npm - @verdocs/web-sdk - Versions diffs - 6.13.2 → 6.14.0 - Mend

@verdocs/web-sdk 6.13.2 → 6.14.0

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

package/dist/components/p-Blr31TcJ.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["getRoleNames","template","roles","map","role","name","getRoleIndex","role_name","Math","max","findIndex","verdocsSendCss","chevronRightIcon","chevronLeftIcon","warningIcon","infoIcon","externalLinkIcon","VERDOCS_LOGO_URL","SWIPE_START_FRACTION","SWIPE_MIN_DISTANCE","SWIPE_MAX_DURATION","MIN_EXPIRY_DAYS","MAX_EXPIRY_DAYS","DEFAULT_EXPIRY_DAYS","AUTH_METHOD_LABELS","email","passcode","sms","kba","id","VerdocsSend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","templateListenerId","endpoint","DefaultEndpoint","templateId","environment","showCancel","brandKey","swipeStart","swallowNextClick","loadedOrganizationId","containerId","random","toString","substring","view","editingRoleId","sessionContacts","sending","brands","organization","expiresInDays","noContact","senderDefaults","senderName","senderEmail","rolesCompleted","loading","disconnectedCallback","unlistenToTemplate","componentDidLoad","el","addEventListener","e","stopPropagation","preventDefault","componentDidRender","updateScrollFade","querySelector","_a","toggleAttribute","_b","listenToTemplate","console","log","Store","subscribe","getTemplate","recomputeRolesCompleted","loadBrands","organizationId","organization_id","changedOrganization","stillCurrent","getBrands","then","catch","getOrganization","handleExpiryInput","digits","target","value","replace","String","min","Number","effectiveExpiryDays","days","expiresAt","Date","now","store","delListener","reset","brandSenderName","brand","find","b","key","getDefaultBrand","email_display_name","email_sender_name","effectiveSenderName","effectiveSenderEmail","senderOverrides","trim","sender_name","undefined","sender_email","onTemplateIdChanged","newTemplateId","componentWillLoad","onSessionChanged","_endpoint","_session","profile","me","first_name","last_name","phone","formatFullName","getOrganizationContacts","contacts","loadSession","session","sdkError","emit","SDKError","message","response","status","_c","data","rolesAtLevel","forEach","level","sequence","length","push","isValidEmail","getSequenceNumbers","sequences","Object","keys","s","sort","a","getRolesAtLevel","filter","index","getRoleById","match","getRecipientOptionLabels","recipient","labels","auth_methods","method","delegator","name_locked","defaultId","default_brand_id","getDefaultBrandLabel","getSelectedBrandLabel","showView","handleSelectContact","detail","handleClickRole","handleSend","localeData","Intl","DateTimeFormat","resolvedOptions","details","template_id","initial_reminder","followup_reminders","recipients","values","timezone","timeZone","locale","expires_at","toISOString","no_contact","brand_key","beforeSendResult","beforeSend","defaultPrevented","createEnvelope","r","send","envelope_id","envelope","VerdocsToast","error","handleCancel","exit","handleSwipeStart","pane","currentTarget","rect","getBoundingClientRect","onTextEntry","closest","call","clientX","left","width","x","y","clientY","time","handleSwipeEnd","start","dx","dy","abs","renderDetailHeader","title","h","class","type","onClick","innerHTML","renderDetailBody","content","onScroll","renderDoneButton","label","size","renderRecipientView","roleIndex","style","backgroundColor","getRGBA","onExit","onNext","contactSuggestions","templateRole","onSearchContacts","searchContacts","renderBrandSwatch","fallbackInitial","image","favicon_url","thumbnail_url","src","alt","primary_color","toUpperCase","renderBrandOption","sub","swatch","option","selected","renderBrandView","defaultBrand","others","localeCompare","hasBrands","href","getWebAppUrl","rel","renderExpiresView","when","toLocaleDateString","month","day","year","toLocaleTimeString","hour","minute","inputMode","placeholder","disabled","onInput","renderSenderView","validEmail","htmlFor","renderNotificationsView","checked","renderDetail","render","Host","display","levels","rolesAssigned","allRolesAssigned","assignedEmails","toLowerCase","hasDuplicateEmails","Set","expiresShort","sendable","is_sendable","completed","assigned","optionLabels","off","variant","onPointerDown","onPointerUp","onPointerCancel"],"sources":["src/utils/Templates.ts","src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"sourcesContent":["import {ITemplate} from '@verdocs/js-sdk';\n\nexport const getRoleNames = (template: ITemplate | null) => (template?.roles || []).map(role => role.name);\n\nexport const getRoleIndex = (template: ITemplate | null, role_name: string) =>\n Math.max(\n getRoleNames(template).findIndex(name => name === role_name),\n 0,\n );\n","@import '../../../theme.scss';\n\nverdocs-send {\n --send-ink: var(--verdocs-body-color, #111827);\n --send-ink-2: #374151;\n --send-muted: #6b7280;\n --send-faint: #9ca3af;\n --send-rule: #e5e7eb;\n --send-control-border: #d1d5db;\n --send-accent: var(--verdocs-link-color, #{$secondary-color});\n --send-accent-tint: #f4f5fc;\n --send-accent-tint-2: #e6e7f8;\n --send-warning-bg: #fffbeb;\n --send-warning-border: #fde68a;\n --send-warning-icon: #d97706;\n --send-warning-text: #78350f;\n --send-radius: var(--verdocs-dialog-radius, 8px);\n --send-min-height: 480px;\n --send-max-width: 480px;\n\n display: none;\n position: relative;\n overflow: hidden;\n width: 100%;\n max-width: var(--verdocs-send-max-width, var(--send-max-width));\n box-sizing: border-box;\n background: #ffffff;\n color: var(--send-ink);\n font-size: 14px;\n border-radius: var(--send-radius);\n border: 1px solid var(--send-rule);\n font-family: $verdocs-primary-font;\n\n * {\n box-sizing: border-box;\n }\n\n &.sendable {\n display: block;\n }\n\n // The main pane sets the card's height. The detail pane sits beside it, off-canvas to the\n // right, and the track slides one pane-width left when a detail view is open. Detail views\n // taller than the card scroll inside it.\n .track {\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: var(--send-min-height);\n transition: transform 220ms ease-out;\n }\n\n &.detail-open .track {\n transform: translateX(-100%);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .track {\n transition: none;\n }\n }\n\n .pane {\n padding: 16px;\n display: flex;\n flex-direction: column;\n }\n\n .main-pane {\n flex: 1;\n }\n\n .detail-pane {\n position: absolute;\n top: 0;\n left: 100%;\n bottom: 0;\n width: 100%;\n overflow: hidden;\n }\n\n .detail {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n // The body scrolls between a fixed header and a pinned Done button. The fade sits over the\n // body's bottom edge and shows only while there is more below (classes set by updateScrollFade).\n .detail-body-wrap {\n position: relative;\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n .detail-body {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n }\n\n .scroll-fade {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 36px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease-out;\n background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);\n }\n\n .scrollable:not(.at-end) > .scroll-fade {\n opacity: 1;\n }\n\n .recipient-detail verdocs-contact-picker {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n .section-title {\n font-size: 12px;\n font-weight: 600;\n color: var(--send-ink-2);\n margin: 0 0 6px 0;\n }\n\n .delivery-title {\n margin-top: 16px;\n }\n\n .step {\n font-size: 11px;\n color: var(--send-muted);\n padding: 10px 0 4px 0;\n }\n\n .recipient,\n .kv {\n all: unset;\n display: flex;\n width: 100%;\n cursor: pointer;\n align-items: center;\n column-gap: 10px;\n border-top: 1px solid var(--send-rule);\n color: var(--send-ink);\n font-family: inherit;\n\n &:focus-visible {\n outline: 2px solid var(--send-accent);\n outline-offset: -2px;\n border-radius: 4px;\n }\n\n .chevron {\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n color: var(--send-faint);\n\n svg {\n width: 16px;\n height: 16px;\n display: block;\n }\n }\n }\n\n .recipient {\n padding: 8px 6px 8px 0;\n\n &:last-child {\n border-bottom: 1px solid var(--send-rule);\n }\n\n .who {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n }\n\n .role-name {\n font-size: 13px;\n font-weight: 600;\n }\n\n .who-detail {\n font-size: 12px;\n color: var(--send-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.configure {\n color: var(--send-accent);\n font-weight: 500;\n }\n }\n\n .options {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-top: 3px;\n }\n\n .pill {\n height: 18px;\n padding: 0 6px;\n border-radius: 999px;\n font-size: 10px;\n font-weight: 500;\n display: inline-flex;\n align-items: center;\n background: var(--send-accent-tint);\n color: var(--send-ink-2);\n }\n }\n\n .role-dot {\n flex: 0 0 10px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .kv {\n height: 40px;\n padding: 0 6px 0 0;\n font-size: 13px;\n\n &:last-child {\n border-bottom: 1px solid var(--send-rule);\n }\n\n &:disabled {\n cursor: default;\n color: var(--send-muted);\n }\n\n .key {\n flex: 0 0 84px;\n color: var(--send-muted);\n }\n\n .value {\n flex: 1;\n min-width: 0;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n small {\n font-size: inherit;\n font-weight: 400;\n color: var(--send-muted);\n }\n\n &.off {\n color: var(--send-warning-icon);\n }\n }\n }\n\n .main-spacer,\n .detail-spacer {\n flex: 1;\n }\n\n .buttons {\n display: flex;\n margin-top: 14px;\n column-gap: 10px;\n flex-wrap: wrap;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n\n .error-message {\n width: 100%;\n color: $verdocs-red-1;\n font-size: 13px;\n margin-bottom: 10px;\n }\n }\n\n // Detail views\n .detail-header {\n display: flex;\n align-items: center;\n column-gap: 8px;\n margin: -2px 0 14px 0;\n\n .back {\n all: unset;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--send-accent);\n font-family: inherit;\n flex: 0 0 52px;\n\n .icon,\n .icon svg {\n width: 16px;\n height: 16px;\n display: block;\n }\n\n &:focus-visible {\n outline: 2px solid var(--send-accent);\n outline-offset: 2px;\n border-radius: 4px;\n }\n }\n\n .detail-title {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 8px;\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n }\n\n .detail-header-spacer {\n flex: 0 0 52px;\n }\n }\n\n .detail-footer {\n margin-top: 10px;\n padding-top: 12px;\n border-top: 1px solid var(--send-rule);\n\n verdocs-button,\n verdocs-button button {\n width: 100%;\n }\n }\n\n .hint {\n font-size: 12px;\n line-height: 1.5;\n color: var(--send-muted);\n margin: 10px 0 0 0;\n }\n\n .option-list {\n display: flex;\n flex-direction: column;\n }\n\n .option {\n all: unset;\n display: flex;\n width: 100%;\n cursor: pointer;\n align-items: center;\n column-gap: 10px;\n padding: 10px 0;\n font-size: 13px;\n font-family: inherit;\n color: var(--send-ink);\n border-top: 1px solid var(--send-rule);\n\n &:first-child {\n border-top: 0;\n }\n\n &:focus-visible {\n outline: 2px solid var(--send-accent);\n outline-offset: -2px;\n border-radius: 4px;\n }\n\n .radio {\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 1px solid var(--send-control-border);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.selected .radio {\n border-color: var(--send-accent);\n\n &::after {\n content: '';\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--send-accent);\n }\n }\n\n .swatch {\n flex: 0 0 22px;\n width: 22px;\n height: 22px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 9px;\n font-weight: 700;\n color: #ffffff;\n overflow: hidden;\n\n &.logo {\n background: #ffffff;\n border: 1px solid var(--send-rule);\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n }\n }\n\n .option-label {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n\n small {\n font-size: 11px;\n color: var(--send-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n }\n\n .option-divider {\n height: 0;\n margin: 2px 0;\n border-top: 1px solid var(--send-control-border);\n\n + .option {\n border-top: 0;\n }\n }\n\n .hint a {\n color: var(--send-accent);\n font-weight: 500;\n text-decoration: none;\n border-bottom: 1px solid var(--send-accent-tint-2);\n\n .icon,\n .icon svg {\n width: 11px;\n height: 11px;\n display: inline-block;\n vertical-align: -1px;\n margin-left: 2px;\n }\n }\n\n .expires-field {\n position: relative;\n\n input {\n width: 100%;\n height: 36px;\n padding: 0 52px 0 10px;\n font-size: 14px;\n font-family: inherit;\n color: var(--send-ink);\n background: #ffffff;\n border: 1px solid var(--send-control-border);\n border-radius: 6px;\n outline: none;\n\n &:focus {\n border-color: var(--send-accent);\n box-shadow: 0 0 0 2px var(--send-accent-tint-2);\n }\n\n &::placeholder {\n color: var(--send-faint);\n }\n }\n\n .suffix {\n position: absolute;\n right: 10px;\n top: 0;\n height: 36px;\n display: flex;\n align-items: center;\n font-size: 13px;\n color: var(--send-muted);\n pointer-events: none;\n }\n }\n\n .sender-field {\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n margin: 0 0 10px 0;\n\n label {\n font-size: 12px;\n font-weight: 500;\n color: var(--send-ink-2);\n }\n\n input {\n width: 100%;\n height: 36px;\n padding: 0 10px;\n font-size: 14px;\n font-family: inherit;\n color: var(--send-ink);\n background: #ffffff;\n border: 1px solid var(--send-control-border);\n border-radius: 6px;\n outline: none;\n\n &:focus {\n border-color: var(--send-accent);\n box-shadow: 0 0 0 2px var(--send-accent-tint-2);\n }\n }\n\n .field-error {\n font-size: 12px;\n color: $verdocs-red-1;\n }\n }\n\n .notice {\n display: flex;\n column-gap: 10px;\n margin-top: 4px;\n padding: 10px 12px;\n font-size: 12px;\n line-height: 1.5;\n border-radius: 6px;\n color: var(--send-ink-2);\n background: var(--send-accent-tint);\n border: 1px solid var(--send-accent-tint-2);\n\n > .icon {\n flex: 0 0 18px;\n width: 18px;\n height: 18px;\n margin-top: 1px;\n color: var(--send-accent);\n\n svg {\n width: 18px;\n height: 18px;\n display: block;\n }\n }\n }\n\n .warning {\n display: flex;\n column-gap: 10px;\n margin-top: 12px;\n padding: 10px 12px;\n font-size: 12px;\n line-height: 1.5;\n border-radius: 6px;\n color: var(--send-warning-text);\n background: var(--send-warning-bg);\n border: 1px solid var(--send-warning-border);\n\n > .icon {\n flex: 0 0 18px;\n width: 18px;\n height: 18px;\n margin-top: 1px;\n color: var(--send-warning-icon);\n\n svg {\n width: 18px;\n height: 18px;\n display: block;\n }\n }\n\n a {\n color: var(--send-accent);\n font-weight: 500;\n text-decoration: none;\n border-bottom: 1px solid var(--send-accent-tint-2);\n\n .icon,\n .icon svg {\n width: 11px;\n height: 11px;\n display: inline-block;\n vertical-align: -1px;\n margin-left: 2px;\n }\n }\n }\n\n verdocs-checkbox {\n display: block;\n padding: 4px 0;\n font-size: 13px;\n }\n}\n","import type {IBrand, IOrganization, TRecipientAuthMethod} from '@verdocs/js-sdk';\nimport {Component, Element, Prop, State, h, Event, EventEmitter, Host, Method, Watch} from '@stencil/core';\nimport type {ICreateEnvelopeFromTemplateRequest, ICreateEnvelopeRecipientFromTemplate, IEnvelope, IRecipient, ITemplate} from '@verdocs/js-sdk';\nimport {createEnvelope, formatFullName, getBrands, getOrganization, getTemplate, getOrganizationContacts, getRGBA, isValidEmail, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IContactSearchEvent} from '../../envelopes/verdocs-contact-picker/verdocs-contact-picker';\nimport {DefaultEndpoint, getWebAppUrl} from '../../../utils/Environment';\nimport {getRoleIndex, getRoleNames} from '../../../utils/Templates';\nimport {updateScrollFade} from '../../../utils/ScrollFade';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst chevronRightIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 6 6 6-6 6\"/></svg>';\n\nconst chevronLeftIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>';\n\nconst warningIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"/><path d=\"M12 9v4M12 17h.01\"/></svg>';\n\nconst infoIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/></svg>';\n\nconst externalLinkIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6M10 14 21 3M21 14v7H3V3h7\"/></svg>';\n\nconst VERDOCS_LOGO_URL = 'https://app.verdocs.com/assets/blue-logo.svg';\n\n// Swipe mechanics for mobile users in detail views\nconst SWIPE_START_FRACTION = 0.25;\nconst SWIPE_MIN_DISTANCE = 60;\nconst SWIPE_MAX_DURATION = 500;\n\n// Expiration controls. The API is less strict, but Web users prefer a simpler setup so we just range-limit it 1..120 here.\nconst MIN_EXPIRY_DAYS = 1;\nconst MAX_EXPIRY_DAYS = 120;\nconst DEFAULT_EXPIRY_DAYS = 120;\n\nconst AUTH_METHOD_LABELS: Record<TRecipientAuthMethod, string> = {\n email: 'Email',\n passcode: 'Passcode',\n sms: 'SMS',\n kba: 'KBA',\n id: 'ID check',\n};\n\ntype TSendView = 'main' | 'recipient' | 'brand' | 'expires' | 'notifications' | 'sender';\n\nexport interface ISendEventDetail extends ICreateEnvelopeFromTemplateRequest {\n name: string;\n template_id: string;\n recipients: ICreateEnvelopeRecipientFromTemplate[];\n template: ITemplate;\n}\n\nexport interface ISentEventDetail extends ICreateEnvelopeFromTemplateRequest {\n name: string;\n template_id: string;\n recipients: ICreateEnvelopeRecipientFromTemplate[];\n envelope_id: string;\n envelope: IEnvelope;\n}\n\n/**\n * Display a form to send a template to one or more recipients in an envelope for signing.\n * Host applications should ensure the template is \"sendable\" before displaying this component.\n * To be sendable, a template must have at least one document attached, at least one participant\n * defined, and at least one field assigned to every \"signer\" participant. This component will\n * hide itself if the template is not sendable.\n *\n * ```ts\n * <verdocs-send\n * templateId={TEMPLATE_ID}\n * onBeforeSend={({ detail })) => { console.log('Sending... Show a spinner...', detail) }\n * onSend={({ detail }) => { console.log('Sent! Hide the spinner...', detail) }\n * onExit={({ detail }) => { console.log('Send cancelled.', detail) }\n * onSdkError={({ detail }) => { console.log('SDK error', detail) }\n * />\n * ```\n */\n@Component({\n tag: 'verdocs-send',\n styleUrl: 'verdocs-send.scss',\n shadow: false,\n})\nexport class VerdocsSend {\n private templateListenerId = null;\n\n @Element() el: HTMLElement;\n\n /**\n * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n */\n @Prop() endpoint: VerdocsEndpoint = DefaultEndpoint;\n\n /**\n * The ID of the template to create the document from.\n */\n @Prop({reflect: true}) templateId: string | null = null;\n\n /**\n * The environment the control is being called from, e.g. 'web'. This has an impact on how certain\n * operations such as email communications are handled to ensure users receive the correct URLs for\n * their invitations. Setting this to unknown values may produce unexpected/incorrect behaviors.\n * If environment is not known, do this set this property.\n */\n @Prop() environment: string = '';\n\n /**\n * Whether to show the cancel button. It may be useful to disable this in environments where\n * the embed is shown in a non-wizard flow with its own navigation for the user to exit.\n */\n @Prop() showCancel = true;\n\n /**\n * Preselect a brand by key, overriding the organization default.\n */\n @Prop({mutable: true}) brandKey = '';\n\n /**\n * The user is sending an envelope the form and clicked send.\n */\n @Event({composed: true}) beforeSend: EventEmitter<ISendEventDetail>;\n\n /**\n * The user completed the form and clicked send.\n */\n @Event({composed: true}) send: EventEmitter<ISentEventDetail>;\n\n /**\n * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n */\n @Event({composed: true}) exit: EventEmitter;\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 /**\n * Event fired when the user enters text in a search field. The parent application may use this to update\n * the `contactSuggestions` property.\n */\n @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n private swipeStart: {x: number; y: number; time: number} | null = null;\n private swallowNextClick = false;\n private loadedOrganizationId = '';\n\n @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n @State() view: TSendView = 'main';\n @State() editingRoleId = '';\n @State() sessionContacts: {id: string; first_name: string; last_name: string; email: string; phone: string}[] = [];\n @State() sending = false;\n @State() brands: IBrand[] = [];\n @State() organization: IOrganization | null = null;\n @State() expiresInDays = '';\n @State() noContact = false;\n @State() senderDefaults = {name: '', email: ''};\n @State() senderName = '';\n @State() senderEmail = '';\n @State() rolesCompleted: Record<string, Partial<IRecipient>> = {};\n\n @State() loading = true;\n @State() template: ITemplate | null = null;\n\n disconnectedCallback() {\n this.unlistenToTemplate();\n }\n\n componentDidLoad() {\n this.el.addEventListener(\n 'click',\n e => {\n if (this.swallowNextClick) {\n this.swallowNextClick = false;\n e.stopPropagation();\n e.preventDefault();\n }\n },\n true,\n );\n }\n\n // Make off-canvas controls leave the tab order\n componentDidRender() {\n updateScrollFade(this.el.querySelector('.detail-body'));\n this.el.querySelector('.main-pane')?.toggleAttribute('inert', this.view !== 'main');\n this.el.querySelector('.detail-pane')?.toggleAttribute('inert', this.view === 'main');\n }\n\n async listenToTemplate() {\n console.log('[SEND] Loading template', this.templateId);\n this.unlistenToTemplate();\n Store.subscribe(\n 'templates',\n this.templateId,\n () => getTemplate(this.endpoint, this.templateId),\n true,\n (template: ITemplate) => {\n console.log('[SEND] Got new template', template);\n this.template = template;\n this.loading = false;\n this.rolesCompleted = {};\n this.view = 'main';\n this.editingRoleId = '';\n this.recomputeRolesCompleted();\n this.loadBrands();\n },\n );\n }\n\n loadBrands() {\n const organizationId = this.template?.organization_id;\n if (!organizationId || organizationId === this.loadedOrganizationId) {\n return;\n }\n\n const changedOrganization = !!this.loadedOrganizationId;\n this.loadedOrganizationId = organizationId;\n this.brands = [];\n this.organization = null;\n if (changedOrganization) {\n this.brandKey = '';\n }\n\n const stillCurrent = () => this.template?.organization_id === organizationId;\n\n getBrands(this.endpoint, organizationId)\n .then(brands => {\n if (stillCurrent()) {\n this.brands = brands || [];\n }\n })\n .catch(e => console.log('[SEND] Unable to load brands', e));\n\n getOrganization(this.endpoint, organizationId)\n .then(organization => {\n if (stillCurrent()) {\n this.organization = organization;\n }\n })\n .catch(e => console.log('[SEND] Unable to load organization', e));\n }\n\n handleExpiryInput(e: any) {\n const digits = (e.target.value || '').replace(/[^0-9]/g, '');\n this.expiresInDays = digits ? String(Math.min(Math.max(Number(digits), MIN_EXPIRY_DAYS), MAX_EXPIRY_DAYS)) : '';\n e.target.value = this.expiresInDays;\n }\n\n effectiveExpiryDays(): number {\n const days = Number(this.expiresInDays);\n return days >= MIN_EXPIRY_DAYS ? days : DEFAULT_EXPIRY_DAYS;\n }\n\n expiresAt(): Date {\n return new Date(Date.now() + this.effectiveExpiryDays() * 24 * 60 * 60 * 1000);\n }\n\n unlistenToTemplate() {\n if (this.templateListenerId) {\n Store.store.delListener(this.templateListenerId);\n this.templateListenerId = null;\n }\n }\n\n @Method()\n async reset() {\n this.rolesCompleted = {};\n this.view = 'main';\n this.editingRoleId = '';\n this.brandKey = '';\n this.expiresInDays = '';\n this.noContact = false;\n this.senderName = '';\n this.senderEmail = '';\n }\n\n // The sender_name defaults to the custom sender identity if configued/active, the brand\n // next, and then the org name.\n brandSenderName() {\n const brand = this.brandKey ? this.brands.find(b => b.key === this.brandKey) : this.getDefaultBrand();\n return brand?.email_display_name || brand?.email_sender_name || this.organization?.name || '';\n }\n\n effectiveSenderName() {\n return this.senderName || this.brandSenderName();\n }\n\n effectiveSenderEmail() {\n return this.senderEmail || this.senderDefaults.email;\n }\n\n senderOverrides() {\n const name = this.senderName.trim();\n const email = this.senderEmail.trim();\n return {\n sender_name: name && name !== this.brandSenderName() ? name : undefined,\n sender_email: email && email !== this.senderDefaults.email ? email : undefined,\n };\n }\n\n @Watch('templateId')\n onTemplateIdChanged(newTemplateId: string) {\n console.log('[SEND] Template ID changed', newTemplateId);\n this.listenToTemplate();\n }\n\n async componentWillLoad() {\n try {\n this.endpoint.onSessionChanged((_endpoint, _session, profile) => {\n if (!profile) {\n return;\n }\n\n const me = {\n id: profile.id,\n first_name: profile.first_name,\n last_name: profile.last_name,\n email: profile.email,\n phone: profile.phone,\n };\n\n if (profile) {\n this.senderDefaults = {name: formatFullName(profile), email: profile.email || ''};\n this.sessionContacts = [me];\n\n getOrganizationContacts(this.endpoint)\n .then(contacts => {\n console.log('[SEND] Got contacts', contacts);\n this.sessionContacts = [...contacts, me];\n })\n .catch(e => {\n console.log('[SEND] Error getting contacts', e);\n });\n }\n });\n\n this.endpoint.loadSession();\n\n if (!this.endpoint.session) {\n console.log('[SEND] Unable to start Send operation, must be authenticated');\n return;\n }\n\n if (!this.templateId) {\n console.log(`[SEND] Missing required template ID ${this.templateId}`);\n return;\n }\n\n this.listenToTemplate();\n } catch (e) {\n console.log('[SEND] Error with send session', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n recomputeRolesCompleted() {\n this.rolesCompleted = {};\n\n const rolesAtLevel: Record<number, Partial<IRecipient>[]> = {};\n (this.template?.roles || []).forEach(role => {\n const level = role.sequence;\n rolesAtLevel[level] ||= [];\n const id = `r-${level}-${rolesAtLevel[level].length}`;\n rolesAtLevel[level].push({...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name});\n\n // if (role.first_name && (isValidEmail(role.email) || isValidPhone(role.phone))) {\n if (role.first_name && isValidEmail(role.email)) {\n this.rolesCompleted[id] = {...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name};\n }\n });\n }\n\n getSequenceNumbers() {\n // This is cleaner with a Set but we found a regression in some target environments where\n // this breaks down. Reverting to an older technique while we diagnose it.\n const sequences: Record<number, boolean> = {};\n (this.template?.roles || []).forEach(role => {\n sequences[role.sequence] = true;\n });\n return Object.keys(sequences)\n .map(s => +s)\n .sort((a, b) => a - b);\n }\n\n getRolesAtLevel(level: number) {\n const rolesAtLevel = (this.template?.roles || [])\n .filter(role => role.sequence === level)\n .map((role, index) => ({\n ...role,\n id: `r-${level}-${index}`,\n role_name: role.name,\n first_name: role.first_name,\n last_name: role.last_name,\n }));\n return rolesAtLevel as Partial<IRecipient>[];\n }\n\n getRoleById(id: string): Partial<IRecipient> | null {\n for (const level of this.getSequenceNumbers()) {\n const match = this.getRolesAtLevel(level).find(role => role.id === id);\n if (match) {\n return match;\n }\n }\n\n return null;\n }\n\n // We only show options the sender switched on.\n getRecipientOptionLabels(recipient: Partial<IRecipient> | undefined): string[] {\n if (!recipient) {\n return [];\n }\n\n const labels = (recipient.auth_methods || []).filter(method => method !== 'email').map(method => AUTH_METHOD_LABELS[method] || method);\n if (recipient.delegator) {\n labels.push('May delegate');\n }\n\n if (recipient.name_locked) {\n labels.push('Name locked');\n }\n\n return labels;\n }\n\n getDefaultBrand(): IBrand | null {\n const defaultId = this.organization?.default_brand_id;\n return (defaultId && this.brands.find(brand => brand.id === defaultId)) || null;\n }\n\n getDefaultBrandLabel() {\n const name = this.getDefaultBrand()?.name;\n return `Default (${name || 'Verdocs'})`;\n }\n\n getSelectedBrandLabel() {\n if (!this.brandKey) {\n return this.getDefaultBrandLabel();\n }\n\n const brand = this.brands.find(b => b.key === this.brandKey);\n return brand?.name || brand?.key || this.brandKey;\n }\n\n showView(view: TSendView) {\n this.view = view;\n }\n\n handleSelectContact(e: any, role: Partial<IRecipient>) {\n e.preventDefault();\n this.rolesCompleted = {...this.rolesCompleted, [role.id]: {...role, ...e.detail}};\n this.editingRoleId = '';\n this.view = 'main';\n }\n\n handleClickRole(e: any, role: Partial<IRecipient>) {\n e.stopPropagation();\n this.editingRoleId = role.id;\n this.view = 'recipient';\n }\n\n handleSend(e: any) {\n if (this.sending) {\n console.log('[SEND] Skipping duplicate send', e);\n return;\n }\n\n console.log('[SEND] Sending', e);\n e.preventDefault();\n e.stopPropagation();\n\n this.sending = true;\n const localeData = Intl.DateTimeFormat().resolvedOptions();\n\n const details: ICreateEnvelopeFromTemplateRequest = {\n template_id: this.templateId,\n name: this.template?.name || 'New Envelope',\n environment: this.environment,\n initial_reminder: 0,\n followup_reminders: 0,\n recipients: Object.values(this.rolesCompleted) as ICreateEnvelopeRecipientFromTemplate[],\n timezone: localeData.timeZone,\n locale: localeData.locale,\n expires_at: this.expiresAt().toISOString(),\n };\n\n details.no_contact = this.noContact;\n const {sender_name, sender_email} = this.senderOverrides();\n if (sender_name) {\n details.sender_name = sender_name;\n }\n if (sender_email) {\n details.sender_email = sender_email;\n }\n if (this.brandKey) {\n details.brand_key = this.brandKey;\n }\n\n const beforeSendResult = this.beforeSend.emit({...details, name: details.name!, template: this.template});\n if (beforeSendResult.defaultPrevented) {\n console.log('[SEND] Send cancelled by parent', details);\n this.sending = false;\n return;\n }\n\n console.log('[SEND] Creating envelope', details);\n createEnvelope(this.endpoint, details)\n .then(r => {\n console.log('[SEND] Send envelope', r);\n this.reset().catch((e: any) => console.log('Unknown Error', e));\n this.sending = false;\n this.send?.emit({...details, name: details.name!, envelope_id: r.id, envelope: r});\n })\n .catch(e => {\n console.log('[SEND] Send error', e);\n VerdocsToast(e.response?.data?.error || 'Error creating envelope, please try again later.');\n this.sending = false;\n this.sdkError?.emit(e);\n });\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n this.exit?.emit();\n }\n\n handleSwipeStart(e: PointerEvent) {\n this.swallowNextClick = false;\n const pane = e.currentTarget as HTMLElement;\n const rect = pane.getBoundingClientRect();\n const onTextEntry = !!(e.target as HTMLElement)?.closest?.('input, textarea, select, [contenteditable]');\n if (this.view === 'main' || onTextEntry || e.clientX - rect.left > rect.width * SWIPE_START_FRACTION) {\n this.swipeStart = null;\n return;\n }\n\n this.swipeStart = {x: e.clientX, y: e.clientY, time: Date.now()};\n }\n\n handleSwipeEnd(e: PointerEvent) {\n const start = this.swipeStart;\n this.swipeStart = null;\n if (!start) {\n return;\n }\n\n const dx = e.clientX - start.x;\n const dy = Math.abs(e.clientY - start.y);\n if (dx >= SWIPE_MIN_DISTANCE && dx > dy && Date.now() - start.time <= SWIPE_MAX_DURATION) {\n this.swallowNextClick = true;\n this.showView('main');\n }\n }\n\n renderDetailHeader(title: any) {\n return (\n <div class=\"detail-header\">\n <button type=\"button\" class=\"back\" onClick={() => this.showView('main')}>\n <span class=\"icon\" innerHTML={chevronLeftIcon} />\n Back\n </button>\n <div class=\"detail-title\">{title}</div>\n <div class=\"detail-header-spacer\" />\n </div>\n );\n }\n\n renderDetailBody(content: any) {\n return (\n <div class=\"detail-body-wrap\">\n <div class=\"detail-body\" onScroll={(e: any) => updateScrollFade(e.target)}>\n {content}\n </div>\n <div class=\"scroll-fade\" />\n </div>\n );\n }\n\n renderDoneButton() {\n return (\n <div class=\"detail-footer\">\n <verdocs-button label=\"Done\" size=\"small\" onClick={() => this.showView('main')} />\n </div>\n );\n }\n\n renderRecipientView() {\n const role = this.getRoleById(this.editingRoleId);\n if (!role) {\n return <div class=\"detail recipient-detail\">{this.renderDetailHeader('Recipient')}</div>;\n }\n\n const roleIndex = getRoleIndex(this.template, role.role_name);\n return (\n <div class=\"detail recipient-detail\">\n {this.renderDetailHeader([<span class=\"role-dot\" style={{backgroundColor: getRGBA(roleIndex)}} />, role.role_name])}\n <verdocs-contact-picker\n key={role.id}\n showCancel={false}\n onExit={() => this.showView('main')}\n onNext={e => this.handleSelectContact(e, role)}\n contactSuggestions={this.sessionContacts}\n templateRole={(this.rolesCompleted[role.id] ?? role) as IRecipient}\n onSearchContacts={e => this.searchContacts?.emit(e.detail)}\n />\n </div>\n );\n }\n\n renderBrandSwatch(brand: IBrand | null, fallbackInitial: string) {\n const image = brand?.favicon_url || brand?.thumbnail_url || (brand ? null : VERDOCS_LOGO_URL);\n if (image) {\n return (\n <span class=\"swatch logo\">\n <img src={image} alt=\"\" />\n </span>\n );\n }\n\n return (\n <span class=\"swatch\" style={{backgroundColor: brand?.primary_color || '#4c56cb'}}>\n {fallbackInitial.substring(0, 2).toUpperCase()}\n </span>\n );\n }\n\n renderBrandOption(key: string, label: string, sub: string, swatch: any) {\n return (\n <button type=\"button\" class={{option: true, selected: this.brandKey === key}} onClick={() => (this.brandKey = key)}>\n <span class=\"radio\" />\n {swatch}\n <span class=\"option-label\">\n {label}\n <small>{sub}</small>\n </span>\n </button>\n );\n }\n\n renderBrandView() {\n const defaultBrand = this.getDefaultBrand();\n const others = this.brands.filter(brand => brand.id !== defaultBrand?.id).sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key));\n const hasBrands = this.brands.length > 0;\n\n return (\n <div class=\"detail\">\n {this.renderDetailHeader('Brand')}\n {this.renderDetailBody([\n <div class=\"option-list\">\n {this.renderBrandOption('', this.getDefaultBrandLabel(), 'Organization default', this.renderBrandSwatch(defaultBrand, defaultBrand?.name || 'V'))}\n {others.length > 0 && <div class=\"option-divider\" />}\n {others.map(brand => this.renderBrandOption(brand.key, brand.name || brand.key, brand.key, this.renderBrandSwatch(brand, brand.name || brand.key)))}\n </div>,\n !hasBrands && (\n <p class=\"hint\">\n Configure the look and feel of the signing experience by{' '}\n <a href={`${getWebAppUrl(this.endpoint)}/settings/branding`} target=\"_blank\" rel=\"noopener\">\n Creating a Brand\n <span class=\"icon\" innerHTML={externalLinkIcon} />\n </a>\n .\n </p>\n ),\n ])}\n {this.renderDoneButton()}\n </div>\n );\n }\n\n renderExpiresView() {\n const expiresAt = this.expiresAt();\n const when = `${expiresAt.toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'})} at ${expiresAt.toLocaleTimeString(undefined, {hour: 'numeric', minute: '2-digit'})}`;\n\n return (\n <div class=\"detail\">\n {this.renderDetailHeader('Expiration')}\n {this.renderDetailBody([\n <div class=\"expires-field\">\n <input\n type=\"text\"\n inputMode=\"numeric\"\n aria-label=\"Expires in (days)\"\n placeholder={String(DEFAULT_EXPIRY_DAYS)}\n value={this.expiresInDays}\n disabled={this.sending}\n onInput={(e: any) => this.handleExpiryInput(e)}\n />\n <span class=\"suffix\">days</span>\n </div>,\n <p class=\"hint\">\n This envelope will expire on {when}. Expirations may be set from {MIN_EXPIRY_DAYS}-{MAX_EXPIRY_DAYS} days. If left blank, this will default to {DEFAULT_EXPIRY_DAYS}.\n </p>,\n ])}\n {this.renderDoneButton()}\n </div>\n );\n }\n\n renderSenderView() {\n const validEmail = !this.senderEmail.trim() || isValidEmail(this.senderEmail.trim());\n return (\n <div class=\"detail\">\n {this.renderDetailHeader('Sender')}\n {this.renderDetailBody([\n <div class=\"sender-field\">\n <label htmlFor={`${this.containerId}-sender-name`}>Name</label>\n <input\n id={`${this.containerId}-sender-name`}\n type=\"text\"\n value={this.effectiveSenderName()}\n disabled={this.sending}\n onInput={(e: any) => (this.senderName = e.target.value)}\n />\n </div>,\n <div class=\"sender-field\">\n <label htmlFor={`${this.containerId}-sender-email`}>Email</label>\n <input\n id={`${this.containerId}-sender-email`}\n type=\"email\"\n value={this.effectiveSenderEmail()}\n disabled={this.sending}\n onInput={(e: any) => (this.senderEmail = e.target.value)}\n />\n {!validEmail && <div class=\"field-error\">Enter a valid email address.</div>}\n </div>,\n <div class=\"notice\">\n <span class=\"icon\" innerHTML={infoIcon} />\n <div>\n The name is what recipients see as the sender, for example \"Sentry <notifications@verdocs.com>\", and starts as your brand's name. The email is where status\n updates about this envelope are sent and what the certificate shows as the sender. Delivery from your own address needs a custom sender set up under Settings.\n </div>\n </div>,\n ])}\n {this.renderDoneButton()}\n </div>\n );\n }\n\n renderNotificationsView() {\n return (\n <div class=\"detail\">\n {this.renderDetailHeader('Notifications')}\n {this.renderDetailBody([\n <verdocs-checkbox size=\"small\" label=\"Disable notifications\" checked={this.noContact} onInput={(e: any) => (this.noContact = !!e.target.checked)} />,\n this.noContact && (\n <div class=\"warning\">\n <span class=\"icon\" innerHTML={warningIcon} />\n <div>\n Disabling notifications turns off invitations and reminders to recipients as well as status updates to you. You may obtain invite links in the recipient summary or\n via an API call. We strongly recommend enabling{' '}\n <a href={`${getWebAppUrl(this.endpoint)}/settings/webhooks`} target=\"_blank\" rel=\"noopener\">\n Webhooks\n <span class=\"icon\" innerHTML={externalLinkIcon} />\n </a>{' '}\n to help automate this process.\n </div>\n </div>\n ),\n ])}\n {this.renderDoneButton()}\n </div>\n );\n }\n\n renderDetail() {\n switch (this.view) {\n case 'recipient':\n return this.renderRecipientView();\n case 'brand':\n return this.renderBrandView();\n case 'expires':\n return this.renderExpiresView();\n case 'notifications':\n return this.renderNotificationsView();\n case 'sender':\n return this.renderSenderView();\n default:\n return null;\n }\n }\n\n render() {\n if (this.loading) {\n return (\n <Host>\n <verdocs-loader />\n </Host>\n );\n }\n\n if (!this.endpoint.session) {\n return (\n <Host style={{display: 'flex'}}>\n <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n </Host>\n );\n }\n\n const levels = this.getSequenceNumbers();\n const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);\n const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;\n const assignedEmails = rolesAssigned.map(r => r.email.toLowerCase());\n const hasDuplicateEmails = new Set(assignedEmails).size < assignedEmails.length;\n const expiresAt = this.expiresAt();\n const expiresShort = expiresAt.toLocaleDateString(undefined, {month: 'short', day: 'numeric'});\n\n return (\n <Host class={{'sendable': this.template?.is_sendable, 'detail-open': this.view !== 'main'}}>\n <div class=\"track\">\n <div class=\"pane main-pane\" aria-hidden={this.view !== 'main' ? 'true' : 'false'}>\n <div class=\"section-title\">Recipients</div>\n <div class=\"recipients\">\n {levels.map(level => [\n levels.length > 1 && <div class=\"step\">Step {level}</div>,\n this.getRolesAtLevel(level).map(role => {\n const roleIndex = getRoleIndex(this.template, role.role_name);\n const completed = this.rolesCompleted[role.id];\n const assigned = completed && rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;\n const optionLabels = this.getRecipientOptionLabels(completed);\n\n return (\n <button type=\"button\" class=\"recipient\" data-ri={roleIndex} data-rn={role.role_name} onClick={e => this.handleClickRole(e, role)}>\n <span class=\"role-dot\" style={{backgroundColor: getRGBA(roleIndex)}} />\n <span class=\"who\">\n <span class=\"role-name\">{role.role_name}</span>\n {assigned ? (\n <span class=\"who-detail\">\n {formatFullName(completed)} · {completed.email}\n </span>\n ) : (\n <span class=\"who-detail configure\">Configure recipient</span>\n )}\n {optionLabels.length > 0 && (\n <span class=\"options\">\n {optionLabels.map(label => (\n <span class=\"pill\">{label}</span>\n ))}\n </span>\n )}\n </span>\n <span class=\"chevron\" innerHTML={chevronRightIcon} />\n </button>\n );\n }),\n ])}\n </div>\n\n <div class=\"section-title delivery-title\">Delivery</div>\n <div class=\"delivery\">\n <button type=\"button\" class=\"kv\" onClick={() => this.showView('brand')} disabled={this.sending}>\n <span class=\"key\">Brand</span>\n <span class=\"value\">{this.getSelectedBrandLabel()}</span>\n <span class=\"chevron\" innerHTML={chevronRightIcon} />\n </button>\n <button type=\"button\" class=\"kv\" onClick={() => this.showView('expires')} disabled={this.sending}>\n <span class=\"key\">Expires</span>\n <span class=\"value\">\n {this.effectiveExpiryDays()} days <small>· {expiresShort}</small>\n </span>\n <span class=\"chevron\" innerHTML={chevronRightIcon} />\n </button>\n <button type=\"button\" class=\"kv\" onClick={() => this.showView('sender')} disabled={this.sending}>\n <span class=\"key\">Sender</span>\n <span class=\"value\">\n {this.effectiveSenderName() || this.effectiveSenderEmail()}\n {this.effectiveSenderName() && this.effectiveSenderEmail() ? <small> · {this.effectiveSenderEmail()}</small> : null}\n </span>\n <span class=\"chevron\" innerHTML={chevronRightIcon} />\n </button>\n <button type=\"button\" class=\"kv\" onClick={() => this.showView('notifications')} disabled={this.sending}>\n <span class=\"key\">Notifications</span>\n <span class={{value: true, off: this.noContact}}>{this.noContact ? 'Off' : 'On'}</span>\n <span class=\"chevron\" innerHTML={chevronRightIcon} />\n </button>\n </div>\n\n <div class=\"main-spacer\" />\n\n <div class=\"buttons\">\n {hasDuplicateEmails && <div class=\"error-message\">Recipients cannot share the same email.</div>}\n {this.sending && <verdocs-spinner />}\n {this.showCancel && <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onClick={e => this.handleCancel(e)} disabled={this.sending} />}\n <verdocs-button label=\"Send\" size=\"small\" disabled={!allRolesAssigned || this.sending || hasDuplicateEmails} onClick={e => this.handleSend(e)} />\n </div>\n </div>\n\n <div\n class=\"pane detail-pane\"\n aria-hidden={this.view === 'main' ? 'true' : 'false'}\n onPointerDown={e => this.handleSwipeStart(e)}\n onPointerUp={e => this.handleSwipeEnd(e)}\n onPointerCancel={() => (this.swipeStart = null)}\n >\n {this.renderDetail()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-Bxvw_LqR.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{p as e,H as t,c as s,h as i,d as o,t as l}from"./p-yZBlG3YQ.js";import{VerdocsEndpoint as r,getTemplate as d,updateField as a,deleteField as p}from"@verdocs/js-sdk";import{S as n}from"./p-C1sRVZWv.js";import{S as c}from"./p-C7hFgM52.js";import{d as h}from"./p-Bb5V9TQx.js";import{d as f}from"./p-DGNIsXfr.js";import{d as m}from"./p-C-v22G3g.js";import{d as u}from"./p-DHzSlpJw.js";import{d as v}from"./p-DqzFuSNN.js";import{d as x}from"./p-Bodw4NVB.js";import{d as b}from"./p-PfdIkMoz.js";const g=()=>`verdocs-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);-webkit-box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275)}@media all and (max-width: 600px){verdocs-template-field-properties{padding:10px;-webkit-transform:scale(0.8);transform:scale(0.8)}}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .options-header{gap:10px;margin:0 0 5px 0;display:-ms-flexbox;display:flex;color:#ffffff;font-size:14px;padding:5px 8px;font-weight:700;text-align:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;background-color:#333333}verdocs-template-field-properties .options-header-label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;font-weight:700;font-size:14px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:rgb(165, 0, 33)}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 1px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}`;const w=e=>e.charAt(0).toUpperCase()+e.slice(1);const y=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;const k='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';const E=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.close=s(this,"close");this.delete=s(this,"delete");this.settingsChanged=s(this,"settingsChanged");this.sdkError=s(this,"sdkError");this.templateListenerId=null;this.endpoint=r.getDefault();this.templateId="";this.fieldName="";this.helpText="";this.dirty=false;this.label="";this.type="textbox";this.name="";this.required=false;this.readonly=false;this.roleName="";this.group="";this.fieldType="";this.options=[];this.placeholder="";this.defaultValue="";this.showingHelp=false;this.loading=true;this.template=null}disconnectedCallback(){this.unlistenToTemplate()}async listenToTemplate(){this.unlistenToTemplate();c.subscribe("templates",this.templateId,(()=>d(this.endpoint,this.templateId)),false,(e=>{this.template=e;this.loading=false;this.resetForm()}))}unlistenToTemplate(){if(this.templateListenerId){c.store.delListener(this.templateListenerId);this.templateListenerId=null}}async componentWillLoad(){var e,t,s;try{this.endpoint.loadSession();if(!this.templateId){console.log(`[FIELD PROPERTIES] Missing required template ID ${this.templateId}`);return}if(!this.fieldName){console.error(`[FIELD PROPERTIES] Missing required field name`);return}if(!this.endpoint.session){console.log("[FIELD PROPERTIES] Unable to start builder session, must be authenticated");return}this.listenToTemplate()}catch(i){console.log("[FIELD PROPERTIES] Error loading template",i);this.loading=false;(e=this.sdkError)===null\|\|e===void 0?void 0:e.emit(new n(i.message,(t=i.response)===null\|\|t===void 0?void 0:t.status,(s=i.response)===null\|\|s===void 0?void 0:s.data))}}resetForm(){var e;const t=(((e=this.template)===null\|\|e===void 0?void 0:e.fields)\|\|[]).find((e=>e.name===this.fieldName));if(!t){console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);return}this.type=t.type;this.name=t.name;this.label=t.label;this.group=t.group;this.roleName=t.role_name;this.required=t.required;this.readonly=t.readonly;this.fieldType=t.type;this.options=t.options\|\|[];this.placeholder=t.placeholder\|\|"";this.defaultValue=t.default\|\|"";this.dirty=false;this.loading=false;this.cleanupOptions()}handleCancel(e){var t,s;e.stopPropagation();this.resetForm();(t=this.close)===null\|\|t===void 0?void 0:t.emit();(s=document.getElementById("verdocs-template-field-properties"))===null\|\|s===void 0?void 0:s.remove()}handleSave(e){e.stopPropagation();const t={name:this.name,role_name:this.roleName,required:this.required,readonly:this.readonly,label:this.label,group:this.group,placeholder:this.placeholder,default:this.defaultValue,options:this.options};this.cleanupOptions();a(this.endpoint,this.templateId,this.fieldName,t).then((e=>{var t,s,i;console.log("[FIELD PROPERTIES] Updated",e);const o=JSON.parse(JSON.stringify(this.template));const l=o.fields.findIndex((e=>e.name===this.fieldName));if(l>-1){o.fields[l]=e}c.updateTemplate(this.templateId,o);(t=this.settingsChanged)===null\|\|t===void 0?void 0:t.emit({fieldName:this.fieldName,field:e});(s=this.close)===null\|\|s===void 0?void 0:s.emit();(i=document.getElementById("verdocs-template-field-properties"))===null\|\|i===void 0?void 0:i.remove()})).catch((()=>{console.log("[FIELD PROPERTIES] Update failed",e)}))}async handleDelete(e){e.stopPropagation();p(this.endpoint,this.templateId,this.fieldName).then((()=>{var e,t;const s=JSON.parse(JSON.stringify(this.template));s.fields=s.fields.filter((e=>e.name!==this.fieldName));c.updateTemplate(this.templateId,s);(e=this.delete)===null\|\|e===void 0?void 0:e.emit({templateId:this.templateId,roleName:this.roleName});(t=document.getElementById("verdocs-template-field-properties"))===null\|\|t===void 0?void 0:t.remove()})).catch((e=>{console.log("[FIELD PROPERTIES] Deletion error",e)}))}cleanupOptions(){this.options=[...this.options.filter((e=>(e.id\|\|"").trim()!==""\|\|(e.label\|\|"").trim()!==""))];if(!this.options.find((e=>!e.id&&!e.label))){this.options=[...this.options,{id:"",label:""}]}}render(){var e,t;if(this.loading){return i(o,null,i("verdocs-loader",null))}if(!this.endpoint.session){return i(o,null,i("verdocs-component-error",{message:"You must be authenticated to use this module."}))}if(!this.endpoint.session\|\|!(((e=this.template)===null\|\|e===void 0?void 0:e.fields)\|\|[]).some((e=>e.name===this.fieldName))){return i(o,{class:"empty"})}if(this.helpText&&this.showingHelp){return i(o,null,i("h6",null,w(this.fieldType)," Settings ",i("div",{style:{flex:"1"}}),i("div",{class:"help-icon",innerHTML:k,onClick:()=>this.showingHelp=false})),i("p",{class:"instructions",innerHTML:this.helpText}))}const s=this.options.filter((e=>(e.id\|\|"").trim()!==""\|\|(e.label\|\|"").trim()!=="")).length>0;const l=!this.dirty\|\|this.type==="dropdown"&&!s;return i(o,{id:"verdocs-template-field-properties"},i("h6",null,w(this.fieldType.replace(/_/g," "))," Settings ",i("div",{style:{flex:"1"}}),this.helpText&&i("div",{class:"help-icon",innerHTML:k,onClick:()=>this.showingHelp=true})),i("form",{onSubmit:e=>e.preventDefault(),onClick:e=>e.stopPropagation(),autocomplete:"off"},i("div",{class:"row"},i("verdocs-text-input",{id:"verdocs-field-name",label:"Field Name",value:this.name,autocomplete:"off",placeholder:"Field Name...",onInput:e=>{this.name=e.target.value;this.dirty=true}})),i("div",{class:"row"},i("verdocs-text-input",{id:"verdocs-field-label",label:"Optional Label",value:this.label,autocomplete:"off",placeholder:"Optional Label...",onInput:e=>{this.label=e.target.value;this.dirty=true}})),i("div",{class:"row"},i("div",{class:"input-label"},"Role:"),i("verdocs-select-input",{value:this.roleName,options:(((t=this.template)===null\|\|t===void 0?void 0:t.roles)\|\|[]).map((e=>({label:e.name,value:e.name}))),onInput:e=>{this.roleName=e.target.value;this.dirty=true}})),["textbox","textarea"].includes(this.type)&&i("div",{class:"row",style:{marginTop:"10px",marginBottom:"10px"}},i("verdocs-text-input",{id:"verdocs-field-value",label:"Default Value",value:this.defaultValue,autocomplete:"off",placeholder:this.readonly&&!this.defaultValue?"Default value required":"Pre-filled value...",onInput:e=>{this.defaultValue=e.target.value;this.dirty=true}})),this.type==="radio"&&i("div",{class:"row"},i("verdocs-text-input",{id:"verdocs-field-label",label:"Group",value:this.group,autocomplete:"off",helpText:"Enable exclusive selections. Only one option within the same group may be selected at a time.",placeholder:"Group...",onInput:e=>{this.group=(e.target.value\|\|"").trim().toLowerCase().replace(/[^a-z0-9]/g,"");this.dirty=true}})),["textbox","textarea"].includes(this.type)&&i("div",{class:"row",style:{marginTop:"10px",marginBottom:"10px"}},i("verdocs-text-input",{id:"verdocs-field-placeholder",label:"Placeholder",value:this.placeholder,autocomplete:"off",placeholder:"Placeholder...",onInput:e=>{this.placeholder=e.target.value;this.dirty=true}})),i("div",{class:"row",style:{marginTop:"15px",marginBottom:"15px"}},i("label",{htmlFor:"verdocs-is-required",class:"input-label"},"Required"),i("verdocs-checkbox",{id:"verdocs-is-required",name:"is-required",checked:this.required,value:"on",onInput:e=>{this.required=e.target.checked;this.dirty=true}})),i("div",{class:"row",style:{marginTop:"15px",marginBottom:"15px"}},i("label",{htmlFor:"verdocs-is-readonly",class:"input-label"},"Read-only"),i("verdocs-checkbox",{id:"verdocs-is-readonly",name:"is-readonly",checked:this.readonly,value:"on",onInput:e=>{this.readonly=e.target.checked;this.dirty=true}})),this.type==="dropdown"&&i("div",{class:"row",style:{marginTop:"15px",marginBottom:"15px"}},i("label",{htmlFor:"verdocs-is-required",class:"input-label"},"Options")),this.type==="dropdown"&&i("div",{class:"options"},i("div",{class:"options-header"},i("div",{class:"options-header-label"},"ID"),i("dev",{class:"options-header-label"},"Label")),this.options.map(((e,t)=>i("div",{class:"row option-row",key:t},i("verdocs-text-input",{value:e.id,placeholder:"Unique ID",onInput:e=>{this.options[t].id=e.target.value;this.dirty=true;this.cleanupOptions()}}),i("verdocs-text-input",{value:e.label,placeholder:"Display label",onInput:e=>{this.options[t].label=e.target.value;this.dirty=true;this.cleanupOptions()}}),i("button",{innerHTML:y,class:"remove-button",onClick:()=>{this.options=this.options.filter((t=>t.id!==e.id));this.dirty=true;this.cleanupOptions()}}))))),i("div",{class:"buttons"},i("button",{class:"delete-button",disabled:this.dirty,onClick:e=>this.handleDelete(e),innerHTML:y}),i("div",{style:{flex:"1"}}),i("verdocs-button",{size:"small",variant:"outline",label:"Cancel",disabled:!this.dirty,onClick:e=>this.handleCancel(e)}),i("verdocs-button",{size:"small",label:"Save",disabled:l\|\|this.readonly&&!this.defaultValue,onClick:e=>!l&&this.handleSave(e)}))))}get el(){return this}static get style(){return g()}},[0,"verdocs-template-field-properties",{endpoint:[16],templateId:[1,"template-id"],fieldName:[1025,"field-name"],helpText:[1,"help-text"],dirty:[32],label:[32],type:[32],name:[32],required:[32],readonly:[32],roleName:[32],group:[32],fieldType:[32],options:[32],placeholder:[32],defaultValue:[32],showingHelp:[32],loading:[32],template:[32]}]);function I(){if(typeof customElements==="undefined"){return}const e=["verdocs-template-field-properties","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-select-input","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-template-field-properties":if(!customElements.get(l(e))){customElements.define(l(e),E)}break;case"verdocs-button":if(!customElements.get(l(e))){h()}break;case"verdocs-checkbox":if(!customElements.get(l(e))){f()}break;case"verdocs-component-error":if(!customElements.get(l(e))){m()}break;case"verdocs-help-icon":if(!customElements.get(l(e))){u()}break;case"verdocs-loader":if(!customElements.get(l(e))){v()}break;case"verdocs-select-input":if(!customElements.get(l(e))){x()}break;case"verdocs-text-input":if(!customElements.get(l(e))){b()}break}}))}export{E as V,I as d};
2	- //# sourceMappingURL=p-Bxvw_LqR.js.map

package/dist/components/p-Bxvw_LqR.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["verdocsTemplateFieldPropertiesCss","capitalize","str","charAt","toUpperCase","slice","TrashIcon","HelpIcon","VerdocsTemplateFieldProperties","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","templateListenerId","endpoint","VerdocsEndpoint","getDefault","templateId","fieldName","helpText","dirty","label","type","name","required","readonly","roleName","group","fieldType","options","placeholder","defaultValue","showingHelp","loading","template","disconnectedCallback","unlistenToTemplate","listenToTemplate","Store","subscribe","getTemplate","resetForm","store","delListener","componentWillLoad","loadSession","console","log","error","session","e","_a","sdkError","emit","SDKError","message","_b","response","status","_c","data","field","fields","find","role_name","default","cleanupOptions","handleCancel","stopPropagation","close","document","getElementById","remove","handleSave","newProperties","updateField","then","updatedField","newTemplate","JSON","parse","stringify","fieldIndex","findIndex","updateTemplate","settingsChanged","catch","handleDelete","deleteField","filter","delete","opt","id","trim","render","h","Host","some","class","style","flex","innerHTML","onClick","hasOptions","length","saveDisabled","replace","onSubmit","preventDefault","autocomplete","value","onInput","target","roles","map","role","includes","marginTop","marginBottom","toLowerCase","htmlFor","checked","option","index","key","disabled","size","variant"],"sources":["src/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.scss?tag=verdocs-template-field-properties","src/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-field-properties {\n padding: 20px;\n display: block;\n border-radius: 4px;\n background: #ffffff;\n border: 1px solid #ccc;\n font-family: $verdocs-primary-font;\n box-shadow: 2px 2px 10px 0 #0000001f;\n\n @media all and (max-width: 600px) {\n padding: 10px;\n transform: scale(0.8);\n }\n\n .buttons {\n display: flex;\n margin-top: 30px;\n align-items: center;\n flex-direction: row;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n\n form .row {\n display: flex;\n column-gap: 15px;\n margin: 0 0 10px 0;\n align-items: center;\n flex-direction: row;\n\n .input-label {\n display: block;\n color: $label-color-light;\n font-weight: 700;\n font-size: 14px;\n margin: 0 0 4px 0;\n flex: 0 0 100px;\n }\n }\n\n verdocs-select-input {\n flex: 1;\n margin: 0;\n }\n\n verdocs-text-input {\n margin: 0;\n flex: 1;\n\n label {\n margin: 0;\n display: flex;\n column-gap: 15px;\n align-items: center;\n flex-direction: row;\n }\n\n .input-label {\n flex: 0 0 100px;\n }\n\n input {\n flex: 1;\n display: flex;\n }\n }\n\n .checkbox-wrapper {\n flex: 1;\n display: flex;\n }\n\n .delete-button {\n height: 34px;\n display: flex;\n cursor: pointer;\n background: none;\n border-radius: 4px;\n align-items: center;\n border: 1px solid #999;\n justify-content: center;\n\n &:active {\n background: #f3f3f3;\n }\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n h6 {\n flex: 1;\n display: flex;\n font-size: 16px;\n font-weight: bold;\n margin: 0 0 8px 0;\n flex-direction: row;\n color: $verdocs-grey-0;\n\n .help-icon {\n opacity: 0.5;\n\n &:hover {\n opacity: 1;\n cursor: pointer;\n }\n }\n }\n\n .instructions {\n }\n\n .row-header {\n gap: 15px;\n display: flex;\n flex-direction: row;\n\n h6 {\n margin-bottom: 0;\n }\n\n verdocs-help-icon {\n transform: scale(0.85);\n\n svg {\n margin-bottom: -5px;\n }\n }\n\n .add-button {\n margin: 0;\n padding: 0;\n border: none;\n opacity: 0.5;\n cursor: pointer;\n background: none;\n\n &:hover {\n opacity: 1;\n }\n\n svg {\n width: 32px;\n height: 32px;\n }\n }\n }\n\n .options-header {\n gap: 10px;\n margin: 0 0 5px 0;\n display: flex;\n color: #ffffff;\n font-size: 14px;\n padding: 5px 8px;\n font-weight: 700;\n text-align: center;\n flex-direction: row;\n justify-content: center;\n background-color: #333333;\n }\n\n .options-header-label {\n display: flex;\n flex: 1;\n font-weight: 700;\n font-size: 14px;\n }\n\n .option-row {\n margin: 15px 0;\n\n .remove-button {\n height: 28px;\n display: flex;\n cursor: pointer;\n background: none;\n border-radius: 4px;\n align-items: center;\n border: 1px solid #999;\n justify-content: center;\n\n &:active {\n background: #f3f3f3;\n }\n\n &:hover {\n svg {\n stroke: rgb(165, 0, 33);\n }\n }\n\n svg {\n width: 20px;\n height: 20px;\n stroke: #333333;\n }\n }\n }\n\n .options {\n background: #f3f3f3;\n padding: 0 0 1px 0;\n\n .row-header,\n .option-row {\n padding: 0 10px;\n }\n\n .add-option-button {\n border-radius: 5px;\n border: 1px solid #cccccc;\n background: $verdocs-grey-blue;\n color: #ffffff;\n padding: 3px 8px;\n }\n\n .option-row .input-element {\n font-size: 14px;\n }\n\n verdocs-help-icon {\n opacity: 1;\n transform: scale(0.8);\n\n svg {\n fill: #ffffff;\n }\n }\n }\n}\n","import {Component, h, Element, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {deleteField, getTemplate, type ITemplate, ITemplateField, TFieldType, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"#a50021\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\" /></svg>`;\n\nconst HelpIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z\"/></svg>';\n\n/**\n * Displays an edit form that allows the user to adjust a field's settings.\n */\n@Component({\n tag: 'verdocs-template-field-properties',\n styleUrl: 'verdocs-template-field-properties.scss',\n shadow: false,\n})\nexport class VerdocsTemplateFieldProperties {\n private templateListenerId = null;\n\n @Element()\n el: any;\n\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 template ID to edit.\n */\n @Prop() templateId: string = '';\n\n /**\n * The field to configure.\n */\n @Prop({mutable: true}) fieldName: string = '';\n\n /**\n * If specified, the properties card will have a \"back\" side with the help text as its content.\n */\n @Prop() helpText?: string = '';\n\n /**\n * Event fired when the user cancels the dialog.\n */\n @Event({composed: true}) close: EventEmitter;\n\n /**\n * Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted,\n * the role will have already been deleted server-side.\n */\n @Event({composed: true}) delete: EventEmitter<{templateId: string; roleName: string}>;\n\n /**\n * Event fired when the field's settings are changed.\n */\n @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\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() dirty: boolean = false;\n @State() label = '';\n @State() type = 'textbox' as TFieldType;\n @State() name = '';\n @State() required = false;\n @State() readonly = false;\n @State() roleName = '';\n @State() group = '';\n @State() fieldType = '';\n @State() options = [];\n @State() placeholder = '';\n @State() defaultValue = '';\n @State() showingHelp = false;\n\n @State() loading = true;\n @State() template: ITemplate | null = null;\n\n disconnectedCallback() {\n this.unlistenToTemplate();\n }\n\n async listenToTemplate() {\n this.unlistenToTemplate();\n Store.subscribe(\n 'templates',\n this.templateId,\n () => getTemplate(this.endpoint, this.templateId),\n false,\n (template: ITemplate) => {\n this.template = template;\n this.loading = false;\n this.resetForm();\n },\n );\n }\n\n unlistenToTemplate() {\n if (this.templateListenerId) {\n Store.store.delListener(this.templateListenerId);\n this.templateListenerId = null;\n }\n }\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n if (!this.templateId) {\n console.log(`[FIELD PROPERTIES] Missing required template ID ${this.templateId}`);\n return;\n }\n\n if (!this.fieldName) {\n console.error(`[FIELD PROPERTIES] Missing required field name`);\n return;\n }\n\n if (!this.endpoint.session) {\n console.log('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');\n return;\n }\n\n this.listenToTemplate();\n } catch (e) {\n console.log('[FIELD PROPERTIES] Error loading template', e);\n this.loading = false;\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n resetForm() {\n const field = (this.template?.fields || []).find(field => field.name === this.fieldName);\n if (!field) {\n console.log(`[FIELD PROPERTIES] Unable to find field \"${this.fieldName}\" in fields`);\n return;\n }\n\n this.type = field.type;\n this.name = field.name;\n this.label = field.label;\n this.group = field.group;\n this.roleName = field.role_name;\n this.required = field.required;\n this.readonly = field.readonly;\n this.fieldType = field.type;\n this.options = field.options || [];\n this.placeholder = field.placeholder || '';\n this.defaultValue = field.default || '';\n this.dirty = false;\n this.loading = false;\n this.cleanupOptions();\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n\n this.resetForm();\n this.close?.emit();\n document.getElementById('verdocs-template-field-properties')?.remove();\n }\n\n handleSave(e: any) {\n e.stopPropagation();\n const newProperties = {\n name: this.name,\n role_name: this.roleName,\n required: this.required,\n readonly: this.readonly,\n label: this.label,\n group: this.group,\n placeholder: this.placeholder,\n default: this.defaultValue,\n options: this.options,\n } as Partial<ITemplateField>;\n\n this.cleanupOptions();\n updateField(this.endpoint, this.templateId, this.fieldName, newProperties)\n .then(updatedField => {\n console.log('[FIELD PROPERTIES] Updated', updatedField);\n const newTemplate = JSON.parse(JSON.stringify(this.template));\n const fieldIndex = newTemplate.fields.findIndex(field => field.name === this.fieldName);\n if (fieldIndex > -1) {\n newTemplate.fields[fieldIndex] = updatedField;\n }\n Store.updateTemplate(this.templateId, newTemplate);\n this.settingsChanged?.emit({fieldName: this.fieldName, field: updatedField});\n this.close?.emit();\n\n document.getElementById('verdocs-template-field-properties')?.remove();\n })\n .catch(() => {\n console.log('[FIELD PROPERTIES] Update failed', e);\n });\n }\n\n async handleDelete(e: any) {\n e.stopPropagation();\n deleteField(this.endpoint, this.templateId, this.fieldName)\n .then(() => {\n const newTemplate = JSON.parse(JSON.stringify(this.template));\n newTemplate.fields = newTemplate.fields.filter(field => field.name !== this.fieldName);\n Store.updateTemplate(this.templateId, newTemplate);\n this.delete?.emit({templateId: this.templateId, roleName: this.roleName});\n document.getElementById('verdocs-template-field-properties')?.remove();\n })\n .catch(e => {\n console.log('[FIELD PROPERTIES] Deletion error', e);\n });\n }\n\n cleanupOptions() {\n this.options = [...this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.label || '').trim() !== '')];\n if (!this.options.find(opt => !opt.id && !opt.label)) {\n this.options = [...this.options, {id: '', label: ''}];\n }\n }\n\n render() {\n if (this.loading) {\n return (\n <Host>\n <verdocs-loader />\n </Host>\n );\n }\n\n if (!this.endpoint.session) {\n return (\n <Host>\n <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n </Host>\n );\n }\n\n // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.\n if (!this.endpoint.session || !(this.template?.fields || []).some(field => field.name === this.fieldName)) {\n return <Host class=\"empty\" />;\n }\n\n if (this.helpText && this.showingHelp) {\n return (\n <Host>\n <h6>\n {capitalize(this.fieldType)} Settings <div style={{flex: '1'}} />\n <div class=\"help-icon\" innerHTML={HelpIcon} onClick={() => (this.showingHelp = false)} />\n </h6>\n\n <p class=\"instructions\" innerHTML={this.helpText} />\n </Host>\n );\n }\n\n const hasOptions = this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.label || '').trim() !== '').length > 0;\n const saveDisabled = !this.dirty || (this.type === 'dropdown' && !hasOptions);\n\n return (\n <Host id=\"verdocs-template-field-properties\">\n <h6>\n {capitalize(this.fieldType.replace(/_/g, ' '))} Settings <div style={{flex: '1'}} />\n {this.helpText && <div class=\"help-icon\" innerHTML={HelpIcon} onClick={() => (this.showingHelp = true)} />}\n </h6>\n\n <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n <div class=\"row\">\n <verdocs-text-input\n id=\"verdocs-field-name\"\n label=\"Field Name\"\n value={this.name}\n autocomplete=\"off\"\n // helpText=\"The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key.\"\n placeholder=\"Field Name...\"\n onInput={(e: any) => {\n this.name = e.target.value;\n this.dirty = true;\n }}\n />\n </div>\n\n <div class=\"row\">\n <verdocs-text-input\n id=\"verdocs-field-label\"\n label=\"Optional Label\"\n value={this.label}\n autocomplete=\"off\"\n placeholder=\"Optional Label...\"\n onInput={(e: any) => {\n this.label = e.target.value;\n this.dirty = true;\n }}\n />\n </div>\n\n <div class=\"row\">\n <div class=\"input-label\">Role:</div>\n <verdocs-select-input\n value={this.roleName}\n options={(this.template?.roles || []).map(role => ({label: role.name, value: role.name}))}\n onInput={(e: any) => {\n this.roleName = e.target.value;\n this.dirty = true;\n }}\n />\n </div>\n\n {['textbox', 'textarea'].includes(this.type) && (\n <div class=\"row\" style={{marginTop: '10px', marginBottom: '10px'}}>\n <verdocs-text-input\n id=\"verdocs-field-value\"\n label=\"Default Value\"\n value={this.defaultValue}\n autocomplete=\"off\"\n placeholder={this.readonly && !this.defaultValue ? 'Default value required' : 'Pre-filled value...'}\n onInput={(e: any) => {\n this.defaultValue = e.target.value;\n this.dirty = true;\n }}\n />\n </div>\n )}\n\n {this.type === 'radio' && (\n <div class=\"row\">\n <verdocs-text-input\n id=\"verdocs-field-label\"\n label=\"Group\"\n value={this.group}\n autocomplete=\"off\"\n helpText=\"Enable exclusive selections. Only one option within the same group may be selected at a time.\"\n placeholder=\"Group...\"\n onInput={(e: any) => {\n this.group = (e.target.value || '')\n .trim()\n .toLowerCase()\n .replace(/[^a-z0-9]/g, '');\n this.dirty = true;\n }}\n />\n </div>\n )}\n\n {['textbox', 'textarea'].includes(this.type) && (\n <div class=\"row\" style={{marginTop: '10px', marginBottom: '10px'}}>\n <verdocs-text-input\n id=\"verdocs-field-placeholder\"\n label=\"Placeholder\"\n value={this.placeholder}\n autocomplete=\"off\"\n placeholder=\"Placeholder...\"\n onInput={(e: any) => {\n this.placeholder = e.target.value;\n this.dirty = true;\n }}\n />\n </div>\n )}\n\n <div class=\"row\" style={{marginTop: '15px', marginBottom: '15px'}}>\n <label htmlFor=\"verdocs-is-required\" class=\"input-label\">\n Required\n </label>\n <verdocs-checkbox\n id=\"verdocs-is-required\"\n name=\"is-required\"\n checked={this.required}\n value=\"on\"\n onInput={(e: any) => {\n this.required = e.target.checked;\n this.dirty = true;\n }}\n />\n </div>\n\n <div class=\"row\" style={{marginTop: '15px', marginBottom: '15px'}}>\n <label htmlFor=\"verdocs-is-readonly\" class=\"input-label\">\n Read-only\n </label>\n <verdocs-checkbox\n id=\"verdocs-is-readonly\"\n name=\"is-readonly\"\n checked={this.readonly}\n value=\"on\"\n onInput={(e: any) => {\n this.readonly = e.target.checked;\n this.dirty = true;\n }}\n />\n </div>\n\n {this.type === 'dropdown' && (\n <div class=\"row\" style={{marginTop: '15px', marginBottom: '15px'}}>\n <label htmlFor=\"verdocs-is-required\" class=\"input-label\">\n Options\n </label>\n </div>\n )}\n\n {this.type === 'dropdown' && (\n <div class=\"options\">\n <div class=\"options-header\">\n <div class=\"options-header-label\">ID</div>\n <dev class=\"options-header-label\">Label</dev>\n </div>\n\n {this.options.map((option, index) => (\n <div class=\"row option-row\" key={index}>\n <verdocs-text-input\n value={option.id}\n placeholder=\"Unique ID\"\n onInput={(e: any) => {\n this.options[index].id = e.target.value;\n this.dirty = true;\n this.cleanupOptions();\n }}\n />\n <verdocs-text-input\n value={option.label}\n placeholder=\"Display label\"\n onInput={(e: any) => {\n this.options[index].label = e.target.value;\n this.dirty = true;\n this.cleanupOptions();\n }}\n />\n <button\n innerHTML={TrashIcon}\n class=\"remove-button\"\n onClick={() => {\n this.options = this.options.filter(opt => opt.id !== option.id);\n this.dirty = true;\n this.cleanupOptions();\n }}\n />\n </div>\n ))}\n </div>\n )}\n\n <div class=\"buttons\">\n <button class=\"delete-button\" disabled={this.dirty} onClick={e => this.handleDelete(e)} innerHTML={TrashIcon} />\n <div style={{flex: '1'}} />\n <verdocs-button size=\"small\" variant=\"outline\" label=\"Cancel\" disabled={!this.dirty} onClick={e => this.handleCancel(e)} />\n <verdocs-button size=\"small\" label=\"Save\" disabled={saveDisabled || (this.readonly && !this.defaultValue)} onClick={e => !saveDisabled && this.handleSave(e)} />\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-ByrpRZ3E.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["updateScrollFade","body","wrap","parentElement","scrollable","scrollHeight","clientHeight","atEnd","scrollTop","classList","toggle","verdocsContactPickerCss","addrBookIcon","lockIcon","VerdocsContactPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","endpoint","VerdocsEndpoint","getDefault","templateRole","contactSuggestions","showCancel","showSuggestions","showMessage","delegator","name_locked","auth_methods","passcode","firstNameFieldId","Math","random","toString","substring","lastNameFieldId","emailFieldId","phoneFieldId","activeEntitlements","authMethodsLoading","componentWillLoad","loadSession","fullName","formatFullName","nameComponents","split","firstName","first_name","shift","lastName","last_name","join","email","phone","message","getActiveEntitlements","catch","e","console","warn","log","componentDidRender","el","querySelector","suggestionsEl","namesRowEl","style","top","offsetTop","offsetHeight","handleDocumentClick","contains","target","handleFirstNameChange","value","_a","searchContacts","emit","query","handleLastNameChange","handleCancel","stopPropagation","exit","handleSubmit","next","address","zip","handleSelectSuggestion","suggestion","toggleAuthMethod","method","includes","filter","selected","setSigningOption","option","renderPill","label","onClick","opts","h","type","class","pill","locked","disabled","title","innerHTML","render","hasBasics","isValidEmail","hasAuthRequirements","every","canSubmit","hasSMSAuth","sms_auth","verificationOptions","kba_auth","id_auth","signingOption","onSubmit","preventDefault","autocomplete","onScroll","ref","htmlFor","id","name","onFocus","setTimeout","length","onInput","autoComplete","placeholder","convertToE164","size","mode","map","undefined","role","toLowerCase","key","picture","alt","src","variant"],"sources":["src/utils/ScrollFade.ts","src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx"],"sourcesContent":["/**\n * Toggle `scrollable` and `at-end` on the wrapper of a scrolling body so a CSS fade can show\n * only while there is more content below the fold.\n */\nexport function updateScrollFade(body: HTMLElement | null | undefined) {\n const wrap = body?.parentElement;\n if (!body || !wrap) {\n return;\n }\n\n const scrollable = body.scrollHeight > body.clientHeight + 1;\n const atEnd = body.scrollTop + body.clientHeight >= body.scrollHeight - 1;\n wrap.classList.toggle('scrollable', scrollable);\n wrap.classList.toggle('at-end', atEnd);\n}\n","@import '../../../theme.scss';\n\nverdocs-contact-picker {\n --picker-ink: var(--verdocs-body-color, #111827);\n --picker-ink-2: #374151;\n --picker-muted: #6b7280;\n --picker-faint: #9ca3af;\n --picker-control-border: #d1d5db;\n --picker-accent: var(--verdocs-link-color, #{$secondary-color});\n --picker-accent-tint: #f4f5fc;\n --picker-accent-tint-2: #e6e7f8;\n\n display: block;\n font-size: 14px;\n color: var(--picker-ink);\n font-family: $verdocs-primary-font;\n\n * {\n box-sizing: border-box;\n }\n\n form {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n // Fields scroll above a pinned Done button when the host constrains the picker's height; with\n // no constraint the body simply grows and the fade never shows.\n .form-body-wrap {\n position: relative;\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n .form-body {\n position: relative;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n }\n\n .scroll-fade {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 36px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease-out;\n background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);\n }\n\n .scrollable:not(.at-end) > .scroll-fade {\n opacity: 1;\n }\n\n .row.names {\n display: flex;\n column-gap: 8px;\n position: relative;\n\n .field {\n flex: 1;\n min-width: 0;\n }\n }\n\n .field {\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n margin: 0 0 10px 0;\n\n label {\n font-size: 12px;\n font-weight: 500;\n color: var(--picker-ink-2);\n\n .optional {\n color: var(--picker-muted);\n font-weight: 400;\n }\n }\n }\n\n input,\n textarea {\n width: 100%;\n font-size: 13px;\n font-family: inherit;\n color: var(--picker-ink);\n background: #ffffff;\n border: 1px solid var(--picker-control-border);\n border-radius: 6px;\n outline: none;\n\n &:focus {\n border-color: var(--picker-accent);\n box-shadow: 0 0 0 2px var(--picker-accent-tint-2);\n }\n\n &::placeholder {\n color: var(--picker-faint);\n opacity: 1;\n }\n }\n\n input {\n height: 34px;\n padding: 0 10px;\n }\n\n textarea {\n height: 56px;\n padding: 8px 10px;\n resize: vertical;\n }\n\n .group {\n margin: 2px 0 12px 0;\n\n .group-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--picker-ink-2);\n margin: 0 0 6px 0;\n }\n }\n\n .pills {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n }\n\n .pill {\n all: unset;\n height: 26px;\n padding: 0 9px;\n display: inline-flex;\n align-items: center;\n column-gap: 4px;\n cursor: pointer;\n font-size: 12px;\n font-weight: 500;\n font-family: inherit;\n white-space: nowrap;\n border-radius: 999px;\n color: var(--picker-ink-2);\n border: 1px solid var(--picker-control-border);\n\n &:focus-visible {\n outline: 2px solid var(--picker-accent);\n outline-offset: 2px;\n }\n\n &.selected {\n color: var(--picker-accent);\n border-color: var(--picker-accent);\n background: var(--picker-accent-tint);\n }\n\n &.locked {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .pill-icon,\n .pill-icon svg {\n width: 12px;\n height: 12px;\n display: block;\n }\n }\n\n .passcode {\n display: flex;\n align-items: center;\n column-gap: 8px;\n margin-top: 8px;\n\n input {\n flex: 0 0 120px;\n width: 120px;\n height: 30px;\n }\n\n .passcode-hint {\n flex: 1;\n min-width: 0;\n font-size: 11px;\n line-height: 1.35;\n color: var(--picker-muted);\n align-self: center;\n }\n }\n\n .buttons {\n margin-top: 10px;\n padding-top: 12px;\n border-top: 1px solid #e5e7eb;\n flex: none;\n display: flex;\n column-gap: 10px;\n\n verdocs-button:last-child {\n flex: 1;\n }\n\n verdocs-button:last-child button {\n width: 100%;\n }\n }\n\n .suggestions {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 20;\n max-height: 225px;\n overflow-y: auto;\n background: #ffffff;\n border-radius: 6px;\n border: 1px solid #e5e7eb;\n box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);\n\n .suggestion {\n display: flex;\n padding: 6px 12px;\n align-items: center;\n flex-direction: row;\n cursor: pointer;\n\n svg {\n width: 28px;\n height: 28px;\n }\n\n .avatar {\n width: 28px;\n height: 28px;\n flex: 0 0 28px;\n margin-right: 8px;\n border-radius: 100%;\n }\n\n .details {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .name {\n font-size: 13px;\n font-weight: 500;\n color: var(--picker-ink);\n }\n\n .destination {\n font-size: 12px;\n color: var(--picker-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &:hover {\n background: var(--picker-accent-tint);\n }\n }\n }\n\n // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n}\n","import {Component, Element, h, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';\nimport {formatFullName, getActiveEntitlements, IEntitlement, IProfile, IRecipient, isValidEmail, TEntitlement, TRecipientAuthMethod, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {updateScrollFade} from '../../../utils/ScrollFade';\nimport {convertToE164} from '../../../utils/utils';\n\nconst addrBookIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-book-user\"><path d=\"M15 13a3 3 0 1 0-6 0\"/><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><circle cx=\"12\" cy=\"8\" r=\"2\"/></svg>`;\n\nconst lockIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/></svg>`;\n\ntype TSigningOption = 'none' | 'delegator' | 'name_locked';\n\nexport interface IContactSearchEvent {\n query: string;\n}\n\nexport interface IContactSelectEvent {\n first_name: string;\n last_name: string;\n email: string;\n phone: string;\n message: string;\n delegator: boolean;\n name_locked: boolean;\n auth_methods: TRecipientAuthMethod[];\n passcode: string;\n address: string;\n zip: string;\n}\n\nexport type TPickerContact = Partial<IProfile>;\n\n/**\n * Display a contact picker suitable for filling out Recipient objects when sending Envelopes.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name fields is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n *\n * ```ts\n * <verdocs-contact-picker\n * templateRole={role}\n * contactSuggestions={[]}\n * onNext={e => console.log('Contact completed', e.detail)}\n * />\n * ```\n */\n@Component({\n tag: 'verdocs-contact-picker',\n styleUrl: 'verdocs-contact-picker.scss',\n shadow: false,\n})\nexport class VerdocsContactPicker {\n @Element() el: HTMLElement;\n\n private namesRowEl: HTMLElement;\n private suggestionsEl: HTMLElement;\n\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 role that this contact will be assigned to.\n */\n @Prop() templateRole: Partial<IRecipient> | null = null;\n\n /**\n * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n * of suggestions be limited to the 5 best matching records.\n */\n @Prop() contactSuggestions: TPickerContact[] = [];\n\n /**\n * Whether to show a Cancel button beside Done.\n */\n @Prop() showCancel = true;\n\n /**\n * Event fired when the user enters text in the search field. The calling application may use this to update\n * the `contactSuggestions` property.\n */\n @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n /**\n * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n */\n @Event({composed: true}) exit: EventEmitter;\n\n /**\n * Event fired when the user changes the type.\n */\n @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n @State() first_name: string;\n @State() last_name: string;\n @State() email: string;\n @State() phone: string;\n @State() zip: string;\n @State() address: string;\n @State() message: string;\n @State() showSuggestions: boolean = false;\n @State() showMessage: boolean = false;\n @State() delegator: boolean = false;\n @State() name_locked: boolean = false;\n @State() auth_methods: TRecipientAuthMethod[] = [];\n @State() passcode: string = '';\n\n @State() firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;\n @State() lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;\n @State() emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;\n @State() phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() activeEntitlements: Partial<Record<TEntitlement, IEntitlement>> = {};\n @State() authMethodsLoading: boolean = true;\n\n async componentWillLoad() {\n this.endpoint.loadSession();\n\n if (this.templateRole) {\n const fullName = formatFullName(this.templateRole);\n const nameComponents = fullName.split(' ');\n const firstName = this.templateRole.first_name || nameComponents.shift() || '';\n const lastName = this.templateRole.last_name || nameComponents.join(' ') || '';\n this.first_name = firstName;\n this.last_name = lastName;\n\n this.email = this.templateRole.email || '';\n this.phone = this.templateRole.phone || '';\n // delegator and name_locked are mutually exclusive; delegator takes precedence if both are somehow set\n this.delegator = this.templateRole.delegator || false;\n this.name_locked = this.delegator ? false : this.templateRole.name_locked || false;\n this.message = this.templateRole.message || '';\n this.showMessage = this.message !== '';\n this.auth_methods = this.templateRole.auth_methods || [];\n this.passcode = this.templateRole.passcode || '';\n }\n\n // Entitlements only gate optional methods like KBA. We need error handling here in case the getActiveEntitlements\n // call fails or we stay loading forever.\n this.activeEntitlements = await getActiveEntitlements(this.endpoint).catch(e => {\n console.warn('[CONTACT PICKER] Unable to load entitlements, continuing with base auth methods only', e);\n return {} as Partial<Record<TEntitlement, IEntitlement>>;\n });\n\n this.authMethodsLoading = false;\n console.log('[CONTACT PICKER] Loaded entitlements', this.activeEntitlements);\n }\n\n // Make sure the suggestion list doesn't break the scroll region\n componentDidRender() {\n const body = this.el.querySelector('.form-body') as HTMLElement | null;\n updateScrollFade(body);\n if (this.suggestionsEl && this.namesRowEl && body) {\n this.suggestionsEl.style.top = `${this.namesRowEl.offsetTop + this.namesRowEl.offsetHeight - body.scrollTop + 4}px`;\n }\n }\n\n @Listen('click', {target: 'document'})\n handleDocumentClick(e: MouseEvent) {\n if (this.showSuggestions && !this.el.contains(e.target as Node)) {\n this.showSuggestions = false;\n }\n }\n\n handleFirstNameChange(e: any) {\n this.first_name = e.target.value;\n this.searchContacts?.emit({query: this.first_name});\n }\n\n handleLastNameChange(e: any) {\n this.last_name = e.target.value;\n this.searchContacts?.emit({query: this.last_name});\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n this.showSuggestions = false;\n this.exit?.emit();\n }\n\n handleSubmit(e: any) {\n e.stopPropagation();\n\n this.showSuggestions = false;\n this.next?.emit({\n first_name: this.first_name,\n last_name: this.last_name,\n email: this.email,\n phone: this.phone,\n message: this.message,\n delegator: this.delegator,\n name_locked: this.name_locked,\n auth_methods: this.auth_methods,\n passcode: this.passcode,\n address: this.address,\n zip: this.zip,\n });\n }\n\n handleSelectSuggestion(e: any, suggestion: TPickerContact) {\n e.stopPropagation();\n\n this.first_name = suggestion.first_name;\n this.last_name = suggestion.last_name;\n this.email = suggestion.email;\n this.phone = suggestion.phone;\n this.showSuggestions = false;\n }\n\n toggleAuthMethod(method: TRecipientAuthMethod) {\n if (this.auth_methods.includes(method)) {\n this.auth_methods = this.auth_methods.filter(selected => selected !== method);\n } else {\n this.auth_methods = [...this.auth_methods, method];\n }\n }\n\n // TODO: Decide whether we want to keep these mutually-exclusive\n setSigningOption(option: TSigningOption) {\n this.delegator = option === 'delegator';\n this.name_locked = option === 'name_locked';\n }\n\n renderPill(label: string, selected: boolean, onClick: () => void, opts: {locked?: boolean; title?: string} = {}) {\n return (\n <button\n type=\"button\"\n class={{pill: true, selected, locked: !!opts.locked}}\n aria-pressed={selected ? 'true' : 'false'}\n disabled={opts.locked && !selected}\n title={opts.title}\n onClick={onClick}\n >\n {opts.locked && <span class=\"pill-icon\" innerHTML={lockIcon} />}\n {label}\n </button>\n );\n }\n\n // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them\n // and show a duplicate autocomplete picker on top of our own.\n render() {\n const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n\n const hasAuthRequirements = this.auth_methods.every(method => {\n switch (method) {\n case 'passcode':\n return !!this.passcode;\n case 'kba':\n return !!this.first_name && !!this.last_name;\n case 'email':\n return !!this.email;\n case 'sms':\n return !!this.phone;\n default:\n return true;\n }\n });\n\n const canSubmit = hasBasics && hasAuthRequirements;\n const hasSMSAuth = !!this.activeEntitlements.sms_auth;\n\n // TODO: We show non-entitled options disabled so folks know what's possible. We could alternatively hide them.\n const verificationOptions: {label: string; value: TRecipientAuthMethod; locked?: boolean}[] = [\n {label: 'Email OTP', value: 'email'},\n {label: 'Passcode', value: 'passcode'},\n {label: 'SMS OTP', value: 'sms', locked: !hasSMSAuth},\n {label: 'KBA', value: 'kba', locked: !this.activeEntitlements.kba_auth},\n {label: 'ID check', value: 'id', locked: !this.activeEntitlements.id_auth},\n ];\n\n const signingOption: TSigningOption = this.delegator ? 'delegator' : this.name_locked ? 'name_locked' : 'none';\n\n return (\n <form onSubmit={e => e.preventDefault()} autocomplete=\"off\">\n <div class=\"form-body-wrap\">\n <div\n class=\"form-body\"\n onScroll={(e: any) => {\n updateScrollFade(e.target);\n this.showSuggestions = false;\n }}\n >\n <div class=\"row names\" ref={el => (this.namesRowEl = el)}>\n <div class=\"field\">\n <label htmlFor={this.firstNameFieldId}>First name</label>\n <input\n id={this.firstNameFieldId}\n name={this.firstNameFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.first_name}\n onFocus={() => {\n // Give the blur event a chance to hide it first if going between first/last\n setTimeout(() => {\n this.showSuggestions = this.contactSuggestions?.length > 0;\n }, 100);\n }}\n onInput={e => this.handleFirstNameChange(e)}\n />\n </div>\n <div class=\"field\">\n <label htmlFor={this.lastNameFieldId}>Last name</label>\n <input\n id={this.lastNameFieldId}\n name={this.lastNameFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.last_name}\n onFocus={() => {\n // Give the blur event a chance to hide it first if going between first/last\n setTimeout(() => {\n this.showSuggestions = this.contactSuggestions?.length > 0;\n }, 100);\n }}\n onInput={e => this.handleLastNameChange(e)}\n />\n </div>\n </div>\n\n <div class=\"field\">\n <label htmlFor={this.emailFieldId}>Email</label>\n <input\n id={this.emailFieldId}\n name={this.emailFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autoComplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.email}\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.email = e.target.value)}\n />\n </div>\n\n {hasSMSAuth && (\n <div class=\"field\">\n <label htmlFor={this.phoneFieldId}>\n Phone <span class=\"optional\">(optional)</span>\n </label>\n <input\n id={this.phoneFieldId}\n name={this.phoneFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autoComplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.phone}\n placeholder=\"+1 (555) 000-0000\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => {\n this.phone = convertToE164(e.target.value);\n }}\n />\n </div>\n )}\n\n <div class=\"group\">\n <div class=\"group-label\">Verification</div>\n {this.authMethodsLoading ? (\n <verdocs-spinner size={10} mode=\"dark\" />\n ) : (\n <div class=\"pills\">\n {verificationOptions.map(option =>\n this.renderPill(option.label, this.auth_methods.includes(option.value), () => this.toggleAuthMethod(option.value), {\n locked: option.locked,\n title: option.locked ? 'Please contact sales@verdocs.com to enable this feature.' : undefined,\n }),\n )}\n </div>\n )}\n\n {this.auth_methods.includes('passcode') && (\n <div class=\"passcode\">\n <input\n id=\"verdocs-passcode\"\n name=\"verdocs-passcode\"\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n aria-label=\"Passcode\"\n value={this.passcode}\n placeholder=\"4-8 digits\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.passcode = e.target.value)}\n />\n <span class=\"passcode-hint\">PIN or passcode shared separately with the recipient ahead of time</span>\n </div>\n )}\n </div>\n\n <div class=\"group\">\n <div class=\"group-label\">Signing options</div>\n <div class=\"pills\">\n {this.renderPill('None', signingOption === 'none', () => this.setSigningOption('none'))}\n {this.renderPill('May delegate', signingOption === 'delegator', () => this.setSigningOption('delegator'))}\n {this.renderPill('Name locked', signingOption === 'name_locked', () => this.setSigningOption('name_locked'))}\n </div>\n </div>\n\n <div class=\"field\">\n <label htmlFor=\"verdocs-contact-picker-message\">\n Message <span class=\"optional\">(optional)</span>\n </label>\n <textarea\n id=\"verdocs-contact-picker-message\"\n name=\"verdocs-contact-picker-message\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n placeholder=\"Add a message to the invitation\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.message = e.target.value)}\n >\n {this.message}\n </textarea>\n </div>\n </div>\n <div class=\"scroll-fade\" />\n {this.showSuggestions && (\n <div class=\"suggestions\" role=\"listbox\" ref={el => (this.suggestionsEl = el)}>\n {this.contactSuggestions\n .filter(suggestion => !this.first_name || suggestion.first_name?.toLowerCase().includes(this.first_name.toLowerCase()))\n .map(suggestion => (\n <div key={suggestion.id ?? suggestion.email} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n {suggestion.picture ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.picture} /> : <div class=\"avatar\" innerHTML={addrBookIcon} />}\n <div class=\"details\">\n <div class=\"name\">{formatFullName(suggestion)}</div>\n {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n\n <div class=\"buttons\">\n {this.showCancel && <verdocs-button label=\"Cancel\" variant=\"text\" size=\"small\" onClick={e => this.handleCancel(e)} />}\n <verdocs-button label=\"Done\" size=\"small\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n </div>\n </form>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-Cij_2Ym2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["verdocsAdoptSignatureDialogCss","VerdocsAdoptSignatureDialog","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","name","nameLocked","fontLoaded","enteredName","enteredInitials","mode","isDrawing","hasDrawnSignature","hasDrawnInitials","currentSigStroke","allSigStrokes","lastSigPoint","currentInitialsStroke","allInitialsStrokes","lastInitialsPoint","handleSigPointerDown","e","preventDefault","signatureElement","sigDrawingContext","point","getSigCanvasCoordinates","beginPath","moveTo","x","y","setPointerCapture","pointerId","handleSigPointerMove","push","midPoint","quadraticCurveTo","stroke","handleSigPointerUp","length","lineTo","releasePointerCapture","handleSigPointerCancel","handleInitialsPointerDown","initialsElement","initialsDrawingContext","getInitialsCanvasCoordinates","handleInitialsPointerMove","handleInitialsPointerUp","handleInitialsPointerCancel","componentWillLoad","computeEnteredInitials","ds","FontFace","load","then","font","document","fonts","add","componentDidLoad","drawSignatureText","drawInitialsText","setupSignatureCanvas","setupInitialsCanvas","componentDidUpdate","redrawDrawnSignature","redrawDrawnInitials","sigCanvasWidth","width","sigCanvasHeight","height","sigContext","getContext","clearRect","fontSize","metrics","measureText","actualBoundingBoxAscent","actualBoundingBoxDescent","textAlign","textBaseline","fillText","initialsCanvasWidth","initialsCanvasHeight","context","i","currentPoint","previousPoint","lastPoint","handleNameChange","target","value","nameComponents","trim","split","filter","part","map","word","charAt","toUpperCase","join","handleCancel","stopPropagation","exit","emit","handleAdopt","signature","toDataURL","initials","next","isAdoptButtonDisabled","strokeStyle","lineWidth","lineCap","lineJoin","initialsContext","clearSignatureCanvas","clearInitialsCanvas","handleClearDrawing","type","rect","getBoundingClientRect","scaleX","scaleY","clientX","left","clientY","top","render","h","key","slot","class","style","fontWeight","color","active","label","disabled","onInput","onClick","display","flexDirection","gap","marginBottom","alignItems","checked","innerHTML","SignatureXIcon","ref","el","onPointerDown","onPointerMove","onPointerUp","onPointerCancel","touchAction","cursor"],"sources":["src/components/dialogs/verdocs-adopt-signature-dialog/verdocs-adopt-signature-dialog.scss?tag=verdocs-adopt-signature-dialog","src/components/dialogs/verdocs-adopt-signature-dialog/verdocs-adopt-signature-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-adopt-signature-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n verdocs-dialog {\n border-radius: 4px;\n }\n\n .heading {\n color: #201f1e;\n font-weight: 400;\n padding-bottom: 0;\n border-bottom: none;\n }\n\n .content {\n display: flex;\n padding: 12px 24px 0;\n flex-direction: column;\n }\n\n .name-locked-hint {\n font-size: 12px;\n color: #6b7280;\n margin-top: 4px;\n }\n\n verdocs-text-input .input-label {\n color: #242424;\n font-size: 13px;\n font-weight: 400;\n }\n\n verdocs-text-input .input-element {\n border: 1px solid #e0e0e0;\n }\n\n verdocs-radio-button {\n transform: scale(0.9);\n }\n\n .canvas-container {\n position: relative;\n width: 100%;\n margin: 10px 0;\n border-radius: 4px;\n background: #fafafa;\n border: 1px solid #d1d1d1;\n box-sizing: border-box;\n\n &.initials-container {\n max-width: 50%;\n }\n\n canvas {\n width: 100%;\n height: 79px;\n border-radius: 4px;\n /* Background must be transparent to show the guide */\n background: transparent;\n box-sizing: border-box;\n /* Border is handled by container */\n border: none;\n position: relative;\n z-index: 2;\n }\n\n .signing-indicator {\n position: absolute;\n bottom: 9px;\n left: 9px;\n right: 9px;\n height: 28px;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n gap: 2px;\n z-index: 1;\n pointer-events: none;\n\n .x-icon {\n width: 25px;\n height: 28px;\n display: flex;\n\n svg {\n width: 100%;\n height: 100%;\n }\n }\n\n .signing-line {\n flex: 1;\n /* \"The line is a 1px dashed (8px dash 8px space) #d1d1d1 line\". This works in SOME browsers. */\n border-bottom: 1px dashed #d1d1d1;\n background-position: bottom;\n background-size: 16px 1px;\n /* 8px dash + 8px space = 16px repeat */\n background-repeat: repeat-x;\n margin-bottom: 0;\n /* Since standard border-style: dashed doesn't allow custom spacing, we use a background gradient\n trick or just rely on standard dashed if acceptable.\n */\n height: 1px;\n border: none;\n background-image: linear-gradient(to right, #d1d1d1 50%, transparent 50%);\n }\n }\n }\n\n .disclaimer {\n padding: 8px 0;\n font-size: 11px;\n line-height: 14px;\n text-align: justify;\n color: rgba(0, 0, 0, 0.54);\n }\n\n .tabs {\n display: flex;\n flex-direction: row;\n margin: -20px -20px 0 -20px;\n border-bottom: 1px solid #eeeeee;\n\n .tab {\n flex: 1;\n gap: 4px;\n display: flex;\n cursor: pointer;\n font-size: 12px;\n font-weight: 500;\n padding: 6px 10px;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n\n &.active {\n background: #f9f5fe;\n border-bottom: 2px solid $border-color;\n }\n\n &:hover {\n color: $primary-color;\n }\n\n .icon {\n width: 16px;\n height: 16px;\n }\n }\n }\n\n // We use fixed heights for these sections to avoid layout shifts when switching tabs.\n .type {\n display: none;\n flex-direction: column;\n\n &.active {\n display: flex;\n }\n }\n\n .draw {\n height: 100px;\n display: none;\n margin-top: 20px;\n flex-direction: column;\n\n &.active {\n display: flex;\n }\n\n .draw-instructions {\n font-size: 13px;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 8px;\n text-align: center;\n }\n\n canvas {\n cursor: crosshair;\n touch-action: none;\n }\n }\n\n .preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 10px;\n\n .clear-button-text {\n background: none;\n border: none;\n color: var(--verdocs-primary-color, #{$verdocs-green});\n cursor: pointer;\n font-size: 13px;\n padding: 0;\n font-weight: 500;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:disabled {\n color: #9ca3af;\n text-decoration: none;\n cursor: not-allowed;\n }\n }\n }\n\n .upload {\n height: 100px;\n display: none;\n margin-top: 20px;\n flex-direction: column;\n\n &.active {\n display: flex;\n }\n\n .upload-instructions {\n font-size: 13px;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 8px;\n text-align: center;\n }\n\n .upload-actions {\n display: flex;\n justify-content: center;\n gap: 12px;\n margin-top: 8px;\n\n .upload-button {\n border: 1px solid var(--verdocs-primary-color, #{$verdocs-green});\n background-color: var(--verdocs-primary-color, #{$verdocs-green});\n color: #ffffff;\n padding: 8px 20px;\n font-size: 13px;\n cursor: pointer;\n border-radius: var(--verdocs-button-radius, 4px);\n transition: all 0.2s ease;\n\n &:hover {\n filter: brightness(0.9);\n }\n }\n\n .clear-button {\n border: 1px solid #d0d0d0;\n background-color: #ffffff;\n color: #333333;\n padding: 8px 16px;\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.2s ease;\n\n &:hover:not(:disabled) {\n background-color: #f5f5f5;\n border-color: #b0b0b0;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n }\n\n .upload-filename {\n font-size: 12px;\n color: rgba(0, 0, 0, 0.6);\n text-align: center;\n margin-top: 8px;\n font-style: italic;\n }\n }\n\n /* TODO: We're getting positive feedback. Add this as a formal button variant. */\n .buttons {\n gap: 20px;\n display: flex;\n margin-top: 14px;\n flex-direction: row;\n justify-content: flex-end;\n\n button {\n flex: 1;\n border: 0;\n height: 38px;\n display: flex;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n align-items: center;\n border-radius: var(--verdocs-button-radius, 6px);\n justify-content: center;\n transition: all 0.2s ease;\n\n &.cancel {\n background-color: transparent;\n border: 1px solid #d1d5db;\n color: #374151;\n\n &:hover {\n background-color: #f9fafb;\n }\n }\n\n &.proceed {\n background-color: var(--verdocs-primary-color, #{$verdocs-green});\n border: 1px solid transparent;\n color: #ffffff;\n\n &:hover {\n background-color: var(--verdocs-primary-color-hover, #{$verdocs-green-shade});\n filter: brightness(0.95);\n }\n }\n\n &:disabled {\n background-color: #e5e7eb;\n color: #9ca3af;\n cursor: not-allowed;\n }\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, State} from '@stencil/core';\nimport {SignatureXIcon} from '../../../utils/Icons';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n tag: 'verdocs-adopt-signature-dialog',\n styleUrl: 'verdocs-adopt-signature-dialog.scss',\n})\nexport class VerdocsAdoptSignatureDialog {\n private signatureElement?: HTMLCanvasElement;\n private initialsElement?: HTMLCanvasElement;\n private sigDrawingContext?: CanvasRenderingContext2D;\n private initialsDrawingContext?: CanvasRenderingContext2D;\n\n /**\n * Initial signature text\n */\n @Prop() name: string = '';\n\n /**\n * If true, the name fields will be read-only. Used when the sender has locked the recipient's name.\n */\n @Prop() nameLocked: boolean = false;\n\n /**\n * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n * representation of the signature adopted.\n */\n @Event({composed: true}) next: EventEmitter<{signature: string; initials: string}>;\n\n /**\n * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n */\n @Event({composed: true}) exit: EventEmitter;\n\n @State() fontLoaded = false;\n @State() enteredName: string = '';\n @State() enteredInitials: string = '';\n @State() mode: 'type' | 'draw' = 'type';\n @State() isDrawing = false;\n @State() hasDrawnSignature = false;\n @State() hasDrawnInitials = false;\n\n private currentSigStroke: Array<{x: number; y: number}> = [];\n private allSigStrokes: Array<Array<{x: number; y: number}>> = [];\n private lastSigPoint: {x: number; y: number} | null = null;\n\n private currentInitialsStroke: Array<{x: number; y: number}> = [];\n private allInitialsStrokes: Array<Array<{x: number; y: number}>> = [];\n private lastInitialsPoint: {x: number; y: number} | null = null;\n\n componentWillLoad() {\n this.enteredName = this.name;\n this.computeEnteredInitials(this.name);\n\n const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n ds.load().then(font => {\n document.fonts.add(font);\n this.fontLoaded = true;\n });\n }\n\n componentDidLoad() {\n this.drawSignatureText();\n this.drawInitialsText();\n this.setupSignatureCanvas();\n this.setupInitialsCanvas();\n }\n\n componentDidUpdate() {\n this.drawSignatureText();\n this.drawInitialsText();\n this.setupSignatureCanvas();\n this.setupInitialsCanvas();\n\n // Redraw drawn signature when in draw mode\n if (this.mode === 'draw' && this.allSigStrokes.length > 0) {\n this.redrawDrawnSignature();\n }\n if (this.mode === 'draw' && this.allInitialsStrokes.length > 0) {\n this.redrawDrawnInitials();\n }\n }\n\n drawSignatureText() {\n if (!this.signatureElement || this.mode !== 'type') {\n return;\n }\n\n const sigCanvasWidth = this.signatureElement.width;\n const sigCanvasHeight = this.signatureElement.height;\n const sigContext = this.signatureElement.getContext('2d');\n sigContext.clearRect(0, 0, this.signatureElement.width, this.signatureElement.height);\n\n let fontSize = 100;\n let metrics: TextMetrics = sigContext.measureText(this.enteredName);\n do {\n fontSize -= 2;\n sigContext.font = `${fontSize}px Dancing Script`;\n metrics = sigContext.measureText(this.enteredName);\n } while (metrics.width > sigCanvasWidth - 24 || metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + 24 > sigCanvasHeight);\n\n sigContext.textAlign = 'center';\n sigContext.textBaseline = 'middle';\n sigContext.font = `${fontSize}px Dancing Script`;\n sigContext.fillText(this.enteredName, this.signatureElement.width / 2, this.signatureElement.height / 2);\n }\n\n drawInitialsText() {\n if (!this.initialsElement || this.mode !== 'type') {\n return;\n }\n\n const initialsCanvasWidth = this.initialsElement.width;\n const initialsCanvasHeight = this.initialsElement.height;\n const context = this.initialsElement.getContext('2d');\n context.clearRect(0, 0, this.initialsElement.width, this.initialsElement.height);\n\n let fontSize = 100;\n let metrics: TextMetrics = context.measureText(this.enteredInitials);\n do {\n fontSize -= 2;\n context.font = `${fontSize}px Dancing Script`;\n metrics = context.measureText(this.enteredInitials);\n } while (metrics.width > initialsCanvasWidth - 24 || metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + 24 > initialsCanvasHeight);\n\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.font = `${fontSize}px Dancing Script`;\n context.fillText(this.enteredInitials, this.initialsElement.width / 2, this.initialsElement.height / 2);\n }\n\n redrawDrawnSignature() {\n if (!this.signatureElement || !this.sigDrawingContext || this.allSigStrokes.length === 0) {\n return;\n }\n\n // Clear the canvas first\n this.sigDrawingContext.clearRect(0, 0, this.signatureElement.width, this.signatureElement.height);\n\n // Redraw all strokes\n for (const stroke of this.allSigStrokes) {\n if (stroke.length === 0) {\n continue;\n }\n\n // Start the path at the first point\n this.sigDrawingContext.beginPath();\n this.sigDrawingContext.moveTo(stroke[0].x, stroke[0].y);\n\n // Draw smooth curves through all points in the stroke\n for (let i = 1; i < stroke.length; i++) {\n const currentPoint = stroke[i];\n const previousPoint = stroke[i - 1];\n\n // Use quadratic curves for smooth lines\n const midPoint = {\n x: (previousPoint.x + currentPoint.x) / 2,\n y: (previousPoint.y + currentPoint.y) / 2,\n };\n\n this.sigDrawingContext.quadraticCurveTo(previousPoint.x, previousPoint.y, midPoint.x, midPoint.y);\n }\n\n // Draw to the last point\n if (stroke.length > 1) {\n const lastPoint = stroke[stroke.length - 1];\n this.sigDrawingContext.lineTo(lastPoint.x, lastPoint.y);\n }\n\n this.sigDrawingContext.stroke();\n }\n }\n\n redrawDrawnInitials() {\n if (!this.initialsElement || !this.initialsDrawingContext || this.allInitialsStrokes.length === 0) {\n return;\n }\n\n // Clear the canvas first\n this.initialsDrawingContext.clearRect(0, 0, this.initialsElement.width, this.initialsElement.height);\n\n // Redraw all strokes\n for (const stroke of this.allInitialsStrokes) {\n if (stroke.length === 0) {\n continue;\n }\n\n // Start the path at the first point\n this.initialsDrawingContext.beginPath();\n this.initialsDrawingContext.moveTo(stroke[0].x, stroke[0].y);\n\n // Draw smooth curves through all points in the stroke\n for (let i = 1; i < stroke.length; i++) {\n const currentPoint = stroke[i];\n const previousPoint = stroke[i - 1];\n\n // Use quadratic curves for smooth lines\n const midPoint = {\n x: (previousPoint.x + currentPoint.x) / 2,\n y: (previousPoint.y + currentPoint.y) / 2,\n };\n\n this.initialsDrawingContext.quadraticCurveTo(previousPoint.x, previousPoint.y, midPoint.x, midPoint.y);\n }\n\n // Draw to the last point\n if (stroke.length > 1) {\n const lastPoint = stroke[stroke.length - 1];\n this.initialsDrawingContext.lineTo(lastPoint.x, lastPoint.y);\n }\n\n this.initialsDrawingContext.stroke();\n }\n }\n\n handleNameChange(e: any) {\n this.enteredName = e.target.value;\n this.computeEnteredInitials(e.target.value);\n }\n\n computeEnteredInitials(name: string) {\n const nameComponents = name\n .trim()\n .split(' ')\n .filter(part => part.length > 0);\n\n this.enteredInitials = nameComponents.length > 1 ? nameComponents.map(word => word.charAt(0).toUpperCase()).join('') : nameComponents[0].toUpperCase();\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n e.preventDefault();\n this.exit.emit();\n }\n\n handleAdopt(e: any) {\n e.stopPropagation();\n e.preventDefault();\n const signature = this.signatureElement.toDataURL('image/png');\n const initials = this.initialsElement.toDataURL('image/png');\n this.next.emit({signature, initials});\n }\n\n isAdoptButtonDisabled(): boolean {\n switch (this.mode) {\n case 'type':\n // Disable if no name has been entered\n return !this.enteredName || this.enteredName.trim().length === 0;\n case 'draw':\n // Disable if nothing has been drawn\n return (!this.hasDrawnSignature && !this.hasDrawnInitials) || this.allSigStrokes.length === 0 || this.allInitialsStrokes.length === 0;\n default:\n return true;\n }\n }\n\n setupSignatureCanvas() {\n if (!this.signatureElement) {\n return;\n }\n\n // Set up drawing context when in draw mode\n if (this.mode === 'draw') {\n // Always get fresh context from the current canvas element\n const sigContext = this.signatureElement.getContext('2d');\n\n // Only initialize if we don't have a context or it's different\n if (sigContext && sigContext !== this.sigDrawingContext) {\n this.sigDrawingContext = sigContext;\n\n // Configure drawing style for smooth signatures\n this.sigDrawingContext.strokeStyle = '#000000';\n this.sigDrawingContext.lineWidth = 2;\n this.sigDrawingContext.lineCap = 'round';\n this.sigDrawingContext.lineJoin = 'round';\n\n // Clear canvas only if there are no existing strokes\n if (this.allSigStrokes.length === 0) {\n this.sigDrawingContext.clearRect(0, 0, this.signatureElement.width, this.signatureElement.height);\n }\n }\n }\n\n // Reset drawing context when switching away from draw mode\n // NOTE: We don't clear allStrokes here so drawing persists when returning to draw mode\n if (this.mode !== 'draw' && this.sigDrawingContext) {\n this.sigDrawingContext = null;\n this.currentSigStroke = [];\n this.lastSigPoint = null;\n }\n }\n\n setupInitialsCanvas() {\n if (!this.initialsElement) {\n return;\n }\n\n // Set up drawing context when in draw mode\n if (this.mode === 'draw') {\n // Always get fresh context from the current canvas element\n const initialsContext = this.initialsElement.getContext('2d');\n\n // Only initialize if we don't have a context or it's different\n if (initialsContext && initialsContext !== this.initialsDrawingContext) {\n this.initialsDrawingContext = initialsContext;\n\n // Configure drawing style for smooth signatures\n this.initialsDrawingContext.strokeStyle = '#000000';\n this.initialsDrawingContext.lineWidth = 2;\n this.initialsDrawingContext.lineCap = 'round';\n this.initialsDrawingContext.lineJoin = 'round';\n\n // Clear canvas only if there are no existing strokes\n if (this.allInitialsStrokes.length === 0) {\n this.initialsDrawingContext.clearRect(0, 0, this.initialsElement.width, this.initialsElement.height);\n }\n }\n }\n\n // Reset drawing context when switching away from draw mode\n // NOTE: We don't clear allStrokes here so drawing persists when returning to draw mode\n if (this.mode !== 'draw' && this.initialsDrawingContext) {\n this.initialsDrawingContext = null;\n this.currentInitialsStroke = [];\n this.lastInitialsPoint = null;\n }\n }\n\n clearSignatureCanvas() {\n if (!this.signatureElement || !this.sigDrawingContext) {\n return;\n }\n\n this.sigDrawingContext.clearRect(0, 0, this.signatureElement.width, this.signatureElement.height);\n this.currentSigStroke = [];\n this.allSigStrokes = [];\n this.lastSigPoint = null;\n this.hasDrawnSignature = false;\n }\n\n clearInitialsCanvas() {\n if (!this.initialsElement || !this.initialsDrawingContext) {\n return;\n }\n\n this.initialsDrawingContext.clearRect(0, 0, this.initialsElement.width, this.initialsElement.height);\n this.currentInitialsStroke = [];\n this.allInitialsStrokes = [];\n this.lastInitialsPoint = null;\n this.hasDrawnInitials = false;\n }\n\n handleClearDrawing(e: any, type: 'signature' | 'initials' | 'all' = 'all') {\n e.stopPropagation();\n e.preventDefault();\n if (type === 'all' || type === 'signature') this.clearSignatureCanvas();\n if (type === 'all' || type === 'initials') this.clearInitialsCanvas();\n }\n\n getSigCanvasCoordinates(e: PointerEvent): {x: number; y: number} {\n if (!this.signatureElement) {\n return {x: 0, y: 0};\n }\n\n const rect = this.signatureElement.getBoundingClientRect();\n\n // Calculate the scale factor between canvas size and display size\n const scaleX = this.signatureElement.width / rect.width;\n const scaleY = this.signatureElement.height / rect.height;\n\n return {\n x: (e.clientX - rect.left) * scaleX,\n y: (e.clientY - rect.top) * scaleY,\n };\n }\n\n getInitialsCanvasCoordinates(e: PointerEvent): {x: number; y: number} {\n if (!this.initialsElement) {\n return {x: 0, y: 0};\n }\n\n const rect = this.initialsElement.getBoundingClientRect();\n\n // Calculate the scale factor between canvas size and display size\n const scaleX = this.initialsElement.width / rect.width;\n const scaleY = this.initialsElement.height / rect.height;\n\n return {\n x: (e.clientX - rect.left) * scaleX,\n y: (e.clientY - rect.top) * scaleY,\n };\n }\n\n handleSigPointerDown = (e: PointerEvent) => {\n e.preventDefault();\n\n if (!this.signatureElement || !this.sigDrawingContext) {\n return;\n }\n\n this.isDrawing = true;\n this.hasDrawnSignature = true;\n\n const point = this.getSigCanvasCoordinates(e);\n this.currentSigStroke = [point];\n this.lastSigPoint = point;\n\n // Start a new path\n this.sigDrawingContext.beginPath();\n this.sigDrawingContext.moveTo(point.x, point.y);\n\n // Capture pointer to ensure we get all events even if pointer leaves canvas\n this.signatureElement.setPointerCapture(e.pointerId);\n };\n\n handleSigPointerMove = (e: PointerEvent) => {\n e.preventDefault();\n\n if (!this.isDrawing || !this.sigDrawingContext || !this.lastSigPoint) {\n return;\n }\n\n const point = this.getSigCanvasCoordinates(e);\n this.currentSigStroke.push(point);\n\n // Use quadratic curves for smooth drawing\n // The control point is the last point, and we draw to the midpoint\n const midPoint = {\n x: (this.lastSigPoint.x + point.x) / 2,\n y: (this.lastSigPoint.y + point.y) / 2,\n };\n\n this.sigDrawingContext.quadraticCurveTo(this.lastSigPoint.x, this.lastSigPoint.y, midPoint.x, midPoint.y);\n this.sigDrawingContext.stroke();\n\n this.lastSigPoint = point;\n };\n\n handleSigPointerUp = (e: PointerEvent) => {\n e.preventDefault();\n\n if (!this.isDrawing || !this.sigDrawingContext) {\n return;\n }\n\n // Complete the stroke\n if (this.lastSigPoint && this.currentSigStroke.length > 0) {\n this.sigDrawingContext.lineTo(this.lastSigPoint.x, this.lastSigPoint.y);\n this.sigDrawingContext.stroke();\n }\n\n // Save the completed stroke\n if (this.currentSigStroke.length > 0) {\n this.allSigStrokes.push([...this.currentSigStroke]);\n }\n\n this.isDrawing = false;\n this.currentSigStroke = [];\n this.lastSigPoint = null;\n\n // Release pointer capture\n if (this.signatureElement) {\n this.signatureElement.releasePointerCapture(e.pointerId);\n }\n };\n\n handleSigPointerCancel = (e: PointerEvent) => {\n // Handle cases where drawing is interrupted (e.g., phone call, notification)\n this.isDrawing = false;\n this.currentSigStroke = [];\n this.lastSigPoint = null;\n\n if (this.signatureElement) {\n this.signatureElement.releasePointerCapture(e.pointerId);\n }\n };\n\n handleInitialsPointerDown = (e: PointerEvent) => {\n e.preventDefault();\n\n if (!this.initialsElement || !this.initialsDrawingContext) {\n return;\n }\n\n this.isDrawing = true;\n this.hasDrawnInitials = true;\n\n const point = this.getInitialsCanvasCoordinates(e);\n this.currentInitialsStroke = [point];\n this.lastInitialsPoint = point;\n\n // Start a new path\n this.initialsDrawingContext.beginPath();\n this.initialsDrawingContext.moveTo(point.x, point.y);\n\n // Capture pointer to ensure we get all events even if pointer leaves canvas\n this.initialsElement.setPointerCapture(e.pointerId);\n };\n\n handleInitialsPointerMove = (e: PointerEvent) => {\n e.preventDefault();\n\n if (!this.isDrawing || !this.initialsDrawingContext || !this.lastInitialsPoint) {\n return;\n }\n\n const point = this.getInitialsCanvasCoordinates(e);\n this.currentInitialsStroke.push(point);\n\n // Use quadratic curves for smooth drawing\n // The control point is the last point, and we draw to the midpoint\n const midPoint = {\n x: (this.lastInitialsPoint.x + point.x) / 2,\n y: (this.lastInitialsPoint.y + point.y) / 2,\n };\n\n this.initialsDrawingContext.quadraticCurveTo(this.lastInitialsPoint.x, this.lastInitialsPoint.y, midPoint.x, midPoint.y);\n this.initialsDrawingContext.stroke();\n\n this.lastInitialsPoint = point;\n };\n\n handleInitialsPointerUp = (e: PointerEvent) => {\n e.preventDefault();\n\n if (!this.isDrawing || !this.initialsDrawingContext) {\n return;\n }\n\n // Complete the stroke\n if (this.lastInitialsPoint && this.currentInitialsStroke.length > 0) {\n this.initialsDrawingContext.lineTo(this.lastInitialsPoint.x, this.lastInitialsPoint.y);\n this.initialsDrawingContext.stroke();\n }\n\n // Save the completed stroke\n if (this.currentInitialsStroke.length > 0) {\n this.allInitialsStrokes.push([...this.currentInitialsStroke]);\n }\n\n this.isDrawing = false;\n this.currentInitialsStroke = [];\n this.lastInitialsPoint = null;\n\n // Release pointer capture\n if (this.initialsElement) {\n this.initialsElement.releasePointerCapture(e.pointerId);\n }\n };\n\n handleInitialsPointerCancel = (e: PointerEvent) => {\n // Handle cases where drawing is interrupted (e.g., phone call, notification)\n this.isDrawing = false;\n this.currentInitialsStroke = [];\n this.lastInitialsPoint = null;\n\n if (this.initialsElement) {\n this.initialsElement.releasePointerCapture(e.pointerId);\n }\n };\n\n render() {\n return (\n <verdocs-dialog>\n <div slot=\"heading\" class=\"heading\">\n Adopt Your Signature\n </div>\n\n <div slot=\"content\" class=\"content\">\n <div style={{fontWeight: '300', color: '#242424', fontSize: '13px'}}>Confirm your name, initials, and signature.</div>\n\n <div class={{type: true, active: this.mode === 'type'}}>\n <verdocs-text-input\n label=\"Full Name\"\n value={this.enteredName}\n disabled={this.nameLocked}\n onInput={e => this.handleNameChange(e)}\n onClick={e => e.stopPropagation()}\n />\n {this.nameLocked && <div class=\"name-locked-hint\">Your name has been set by the sender and cannot be changed.</div>}\n </div>\n\n <div style={{fontWeight: '400', color: '#242424', fontSize: '13px'}}>Select a signature style</div>\n\n <div style={{display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px'}}>\n <verdocs-radio-button checked={this.mode === 'type'} value=\"type\" name=\"mode\" onClick={() => (this.mode = 'type')} />\n <label>Typed with a keyboard</label>\n </div>\n <div style={{display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px'}}>\n <verdocs-radio-button checked={this.mode === 'draw'} value=\"draw\" name=\"mode\" onClick={() => (this.mode = 'draw')} />\n <label>Drawn with touch, mouse, or stylus</label>\n </div>\n\n <div class=\"preview-header\">\n <div style={{fontSize: '13px', fontWeight: '400'}}>Signature Preview</div>\n {this.mode === 'draw' && (\n <button class=\"clear-button-text\" onClick={e => this.handleClearDrawing(e, 'signature')} disabled={!this.hasDrawnSignature}>\n Clear\n </button>\n )}\n </div>\n <div class=\"canvas-container signature-container\">\n <div class=\"signing-indicator\">\n <div class=\"x-icon\" innerHTML={SignatureXIcon}></div>\n <div class=\"signing-line\"></div>\n </div>\n <canvas\n ref={el => (this.signatureElement = el as HTMLCanvasElement)}\n // width=\"300\"\n height=\"79\"\n class=\"signature-canvas\"\n onPointerDown={this.handleSigPointerDown}\n onPointerMove={this.handleSigPointerMove}\n onPointerUp={this.handleSigPointerUp}\n onPointerCancel={this.handleSigPointerCancel}\n style={{touchAction: 'none', cursor: 'crosshair'}}\n />\n </div>\n\n <div class=\"preview-header\">\n <div style={{fontSize: '13px', fontWeight: '400'}}>Initials Preview</div>\n {this.mode === 'draw' && (\n <button class=\"clear-button-text\" onClick={e => this.handleClearDrawing(e, 'initials')} disabled={!this.hasDrawnInitials}>\n Clear\n </button>\n )}\n </div>\n <div class=\"canvas-container initials-container\">\n <div class=\"signing-indicator\">\n <div class=\"x-icon\" innerHTML={SignatureXIcon}></div>\n <div class=\"signing-line\"></div>\n </div>\n <canvas\n ref={el => (this.initialsElement = el as HTMLCanvasElement)}\n // width=\"300\"\n height=\"79\"\n class=\"initials-canvas\"\n onPointerDown={this.handleInitialsPointerDown}\n onPointerMove={this.handleInitialsPointerMove}\n onPointerUp={this.handleInitialsPointerUp}\n onPointerCancel={this.handleInitialsPointerCancel}\n style={{touchAction: 'none', cursor: 'crosshair'}}\n />\n </div>\n\n <div class=\"disclaimer\">\n By clicking «Adopt Signature», I agree that the signature and initials above will be the electronic representation of my signature and initials for all purposes when I\n use them to sign documents. Applying them to a document is legally equivalent to signing with a pen on paper.\n </div>\n </div>\n\n <div class=\"footer\" slot=\"footer\">\n <div class=\"buttons\">\n <button class=\"cancel\" onClick={e => this.handleCancel(e)}>\n Cancel\n </button>\n <button class=\"proceed\" onClick={e => this.handleAdopt(e)} disabled={this.isAdoptButtonDisabled()}>\n Adopt & Sign\n </button>\n </div>\n </div>\n </verdocs-dialog>\n );\n }\n}\n"],"mappings":"0OAAA,MAAMA,EAAiC,IAAM,shO,MCWhCC,EAA2BC,EAAA,MAAAD,UAAAE,EAJxC,WAAAC,CAAAC,G,8FAaUC,KAAAC,KAAe,GAKfD,KAAAE,WAAsB,MAarBF,KAAAG,WAAa,MACbH,KAAAI,YAAsB,GACtBJ,KAAAK,gBAA0B,GAC1BL,KAAAM,KAAwB,OACxBN,KAAAO,UAAY,MACZP,KAAAQ,kBAAoB,MACpBR,KAAAS,iBAAmB,MAEpBT,KAAAU,iBAAkD,GAClDV,KAAAW,cAAsD,GACtDX,KAAAY,aAA8C,KAE9CZ,KAAAa,sBAAuD,GACvDb,KAAAc,mBAA2D,GAC3Dd,KAAAe,kBAAmD,KAyV3Df,KAAAgB,qBAAwBC,IACtBA,EAAEC,iBAEF,IAAKlB,KAAKmB,mBAAqBnB,KAAKoB,kBAAmB,CACrD,M,CAGFpB,KAAKO,UAAY,KACjBP,KAAKQ,kBAAoB,KAEzB,MAAMa,EAAQrB,KAAKsB,wBAAwBL,GAC3CjB,KAAKU,iBAAmB,CAACW,GACzBrB,KAAKY,aAAeS,EAGpBrB,KAAKoB,kBAAkBG,YACvBvB,KAAKoB,kBAAkBI,OAAOH,EAAMI,EAAGJ,EAAMK,GAG7C1B,KAAKmB,iBAAiBQ,kBAAkBV,EAAEW,UAAU,EAGtD5B,KAAA6B,qBAAwBZ,IACtBA,EAAEC,iBAEF,IAAKlB,KAAKO,YAAcP,KAAKoB,oBAAsBpB,KAAKY,aAAc,CACpE,M,CAGF,MAAMS,EAAQrB,KAAKsB,wBAAwBL,GAC3CjB,KAAKU,iBAAiBoB,KAAKT,GAI3B,MAAMU,EAAW,CACfN,GAAIzB,KAAKY,aAAaa,EAAIJ,EAAMI,GAAK,EACrCC,GAAI1B,KAAKY,aAAac,EAAIL,EAAMK,GAAK,GAGvC1B,KAAKoB,kBAAkBY,iBAAiBhC,KAAKY,aAAaa,EAAGzB,KAAKY,aAAac,EAAGK,EAASN,EAAGM,EAASL,GACvG1B,KAAKoB,kBAAkBa,SAEvBjC,KAAKY,aAAeS,CAAK,EAG3BrB,KAAAkC,mBAAsBjB,IACpBA,EAAEC,iBAEF,IAAKlB,KAAKO,YAAcP,KAAKoB,kBAAmB,CAC9C,M,CAIF,GAAIpB,KAAKY,cAAgBZ,KAAKU,iBAAiByB,OAAS,EAAG,CACzDnC,KAAKoB,kBAAkBgB,OAAOpC,KAAKY,aAAaa,EAAGzB,KAAKY,aAAac,GACrE1B,KAAKoB,kBAAkBa,Q,CAIzB,GAAIjC,KAAKU,iBAAiByB,OAAS,EAAG,CACpCnC,KAAKW,cAAcmB,KAAK,IAAI9B,KAAKU,kB,CAGnCV,KAAKO,UAAY,MACjBP,KAAKU,iBAAmB,GACxBV,KAAKY,aAAe,KAGpB,GAAIZ,KAAKmB,iBAAkB,CACzBnB,KAAKmB,iBAAiBkB,sBAAsBpB,EAAEW,U,GAIlD5B,KAAAsC,uBAA0BrB,IAExBjB,KAAKO,UAAY,MACjBP,KAAKU,iBAAmB,GACxBV,KAAKY,aAAe,KAEpB,GAAIZ,KAAKmB,iBAAkB,CACzBnB,KAAKmB,iBAAiBkB,sBAAsBpB,EAAEW,U,GAIlD5B,KAAAuC,0BAA6BtB,IAC3BA,EAAEC,iBAEF,IAAKlB,KAAKwC,kBAAoBxC,KAAKyC,uBAAwB,CACzD,M,CAGFzC,KAAKO,UAAY,KACjBP,KAAKS,iBAAmB,KAExB,MAAMY,EAAQrB,KAAK0C,6BAA6BzB,GAChDjB,KAAKa,sBAAwB,CAACQ,GAC9BrB,KAAKe,kBAAoBM,EAGzBrB,KAAKyC,uBAAuBlB,YAC5BvB,KAAKyC,uBAAuBjB,OAAOH,EAAMI,EAAGJ,EAAMK,GAGlD1B,KAAKwC,gBAAgBb,kBAAkBV,EAAEW,UAAU,EAGrD5B,KAAA2C,0BAA6B1B,IAC3BA,EAAEC,iBAEF,IAAKlB,KAAKO,YAAcP,KAAKyC,yBAA2BzC,KAAKe,kBAAmB,CAC9E,M,CAGF,MAAMM,EAAQrB,KAAK0C,6BAA6BzB,GAChDjB,KAAKa,sBAAsBiB,KAAKT,GAIhC,MAAMU,EAAW,CACfN,GAAIzB,KAAKe,kBAAkBU,EAAIJ,EAAMI,GAAK,EAC1CC,GAAI1B,KAAKe,kBAAkBW,EAAIL,EAAMK,GAAK,GAG5C1B,KAAKyC,uBAAuBT,iBAAiBhC,KAAKe,kBAAkBU,EAAGzB,KAAKe,kBAAkBW,EAAGK,EAASN,EAAGM,EAASL,GACtH1B,KAAKyC,uBAAuBR,SAE5BjC,KAAKe,kBAAoBM,CAAK,EAGhCrB,KAAA4C,wBAA2B3B,IACzBA,EAAEC,iBAEF,IAAKlB,KAAKO,YAAcP,KAAKyC,uBAAwB,CACnD,M,CAIF,GAAIzC,KAAKe,mBAAqBf,KAAKa,sBAAsBsB,OAAS,EAAG,CACnEnC,KAAKyC,uBAAuBL,OAAOpC,KAAKe,kBAAkBU,EAAGzB,KAAKe,kBAAkBW,GACpF1B,KAAKyC,uBAAuBR,Q,CAI9B,GAAIjC,KAAKa,sBAAsBsB,OAAS,EAAG,CACzCnC,KAAKc,mBAAmBgB,KAAK,IAAI9B,KAAKa,uB,CAGxCb,KAAKO,UAAY,MACjBP,KAAKa,sBAAwB,GAC7Bb,KAAKe,kBAAoB,KAGzB,GAAIf,KAAKwC,gBAAiB,CACxBxC,KAAKwC,gBAAgBH,sBAAsBpB,EAAEW,U,GAIjD5B,KAAA6C,4BAA+B5B,IAE7BjB,KAAKO,UAAY,MACjBP,KAAKa,sBAAwB,GAC7Bb,KAAKe,kBAAoB,KAEzB,GAAIf,KAAKwC,gBAAiB,CACxBxC,KAAKwC,gBAAgBH,sBAAsBpB,EAAEW,U,EA2GlD,CAtmBC,iBAAAkB,GACE9C,KAAKI,YAAcJ,KAAKC,KACxBD,KAAK+C,uBAAuB/C,KAAKC,MAEjC,MAAM+C,EAAK,IAAIC,SAAS,iBAAkB,oHAC1CD,EAAGE,OAAOC,MAAKC,IACbC,SAASC,MAAMC,IAAIH,GACnBpD,KAAKG,WAAa,IAAI,G,CAI1B,gBAAAqD,GACExD,KAAKyD,oBACLzD,KAAK0D,mBACL1D,KAAK2D,uBACL3D,KAAK4D,qB,CAGP,kBAAAC,GACE7D,KAAKyD,oBACLzD,KAAK0D,mBACL1D,KAAK2D,uBACL3D,KAAK4D,sBAGL,GAAI5D,KAAKM,OAAS,QAAUN,KAAKW,cAAcwB,OAAS,EAAG,CACzDnC,KAAK8D,sB,CAEP,GAAI9D,KAAKM,OAAS,QAAUN,KAAKc,mBAAmBqB,OAAS,EAAG,CAC9DnC,KAAK+D,qB,EAIT,iBAAAN,GACE,IAAKzD,KAAKmB,kBAAoBnB,KAAKM,OAAS,OAAQ,CAClD,M,CAGF,MAAM0D,EAAiBhE,KAAKmB,iBAAiB8C,MAC7C,MAAMC,EAAkBlE,KAAKmB,iBAAiBgD,OAC9C,MAAMC,EAAapE,KAAKmB,iBAAiBkD,WAAW,MACpDD,EAAWE,UAAU,EAAG,EAAGtE,KAAKmB,iBAAiB8C,MAAOjE,KAAKmB,iBAAiBgD,QAE9E,IAAII,EAAW,IACf,IAAIC,EAAuBJ,EAAWK,YAAYzE,KAAKI,aACvD,EAAG,CACDmE,GAAY,EACZH,EAAWhB,KAAO,GAAGmB,qBACrBC,EAAUJ,EAAWK,YAAYzE,KAAKI,Y,OAC/BoE,EAAQP,MAAQD,EAAiB,IAAMQ,EAAQE,wBAA0BF,EAAQG,yBAA2B,GAAKT,GAE1HE,EAAWQ,UAAY,SACvBR,EAAWS,aAAe,SAC1BT,EAAWhB,KAAO,GAAGmB,qBACrBH,EAAWU,SAAS9E,KAAKI,YAAaJ,KAAKmB,iBAAiB8C,MAAQ,EAAGjE,KAAKmB,iBAAiBgD,OAAS,E,CAGxG,gBAAAT,GACE,IAAK1D,KAAKwC,iBAAmBxC,KAAKM,OAAS,OAAQ,CACjD,M,CAGF,MAAMyE,EAAsB/E,KAAKwC,gBAAgByB,MACjD,MAAMe,EAAuBhF,KAAKwC,gBAAgB2B,OAClD,MAAMc,EAAUjF,KAAKwC,gBAAgB6B,WAAW,MAChDY,EAAQX,UAAU,EAAG,EAAGtE,KAAKwC,gBAAgByB,MAAOjE,KAAKwC,gBAAgB2B,QAEzE,IAAII,EAAW,IACf,IAAIC,EAAuBS,EAAQR,YAAYzE,KAAKK,iBACpD,EAAG,CACDkE,GAAY,EACZU,EAAQ7B,KAAO,GAAGmB,qBAClBC,EAAUS,EAAQR,YAAYzE,KAAKK,gB,OAC5BmE,EAAQP,MAAQc,EAAsB,IAAMP,EAAQE,wBAA0BF,EAAQG,yBAA2B,GAAKK,GAE/HC,EAAQL,UAAY,SACpBK,EAAQJ,aAAe,SACvBI,EAAQ7B,KAAO,GAAGmB,qBAClBU,EAAQH,SAAS9E,KAAKK,gBAAiBL,KAAKwC,gBAAgByB,MAAQ,EAAGjE,KAAKwC,gBAAgB2B,OAAS,E,CAGvG,oBAAAL,GACE,IAAK9D,KAAKmB,mBAAqBnB,KAAKoB,mBAAqBpB,KAAKW,cAAcwB,SAAW,EAAG,CACxF,M,CAIFnC,KAAKoB,kBAAkBkD,UAAU,EAAG,EAAGtE,KAAKmB,iBAAiB8C,MAAOjE,KAAKmB,iBAAiBgD,QAG1F,IAAK,MAAMlC,KAAUjC,KAAKW,cAAe,CACvC,GAAIsB,EAAOE,SAAW,EAAG,CACvB,Q,CAIFnC,KAAKoB,kBAAkBG,YACvBvB,KAAKoB,kBAAkBI,OAAOS,EAAO,GAAGR,EAAGQ,EAAO,GAAGP,GAGrD,IAAK,IAAIwD,EAAI,EAAGA,EAAIjD,EAAOE,OAAQ+C,IAAK,CACtC,MAAMC,EAAelD,EAAOiD,GAC5B,MAAME,EAAgBnD,EAAOiD,EAAI,GAGjC,MAAMnD,EAAW,CACfN,GAAI2D,EAAc3D,EAAI0D,EAAa1D,GAAK,EACxCC,GAAI0D,EAAc1D,EAAIyD,EAAazD,GAAK,GAG1C1B,KAAKoB,kBAAkBY,iBAAiBoD,EAAc3D,EAAG2D,EAAc1D,EAAGK,EAASN,EAAGM,EAASL,E,CAIjG,GAAIO,EAAOE,OAAS,EAAG,CACrB,MAAMkD,EAAYpD,EAAOA,EAAOE,OAAS,GACzCnC,KAAKoB,kBAAkBgB,OAAOiD,EAAU5D,EAAG4D,EAAU3D,E,CAGvD1B,KAAKoB,kBAAkBa,Q,EAI3B,mBAAA8B,GACE,IAAK/D,KAAKwC,kBAAoBxC,KAAKyC,wBAA0BzC,KAAKc,mBAAmBqB,SAAW,EAAG,CACjG,M,CAIFnC,KAAKyC,uBAAuB6B,UAAU,EAAG,EAAGtE,KAAKwC,gBAAgByB,MAAOjE,KAAKwC,gBAAgB2B,QAG7F,IAAK,MAAMlC,KAAUjC,KAAKc,mBAAoB,CAC5C,GAAImB,EAAOE,SAAW,EAAG,CACvB,Q,CAIFnC,KAAKyC,uBAAuBlB,YAC5BvB,KAAKyC,uBAAuBjB,OAAOS,EAAO,GAAGR,EAAGQ,EAAO,GAAGP,GAG1D,IAAK,IAAIwD,EAAI,EAAGA,EAAIjD,EAAOE,OAAQ+C,IAAK,CACtC,MAAMC,EAAelD,EAAOiD,GAC5B,MAAME,EAAgBnD,EAAOiD,EAAI,GAGjC,MAAMnD,EAAW,CACfN,GAAI2D,EAAc3D,EAAI0D,EAAa1D,GAAK,EACxCC,GAAI0D,EAAc1D,EAAIyD,EAAazD,GAAK,GAG1C1B,KAAKyC,uBAAuBT,iBAAiBoD,EAAc3D,EAAG2D,EAAc1D,EAAGK,EAASN,EAAGM,EAASL,E,CAItG,GAAIO,EAAOE,OAAS,EAAG,CACrB,MAAMkD,EAAYpD,EAAOA,EAAOE,OAAS,GACzCnC,KAAKyC,uBAAuBL,OAAOiD,EAAU5D,EAAG4D,EAAU3D,E,CAG5D1B,KAAKyC,uBAAuBR,Q,EAIhC,gBAAAqD,CAAiBrE,GACfjB,KAAKI,YAAca,EAAEsE,OAAOC,MAC5BxF,KAAK+C,uBAAuB9B,EAAEsE,OAAOC,M,CAGvC,sBAAAzC,CAAuB9C,GACrB,MAAMwF,EAAiBxF,EACpByF,OACAC,MAAM,KACNC,QAAOC,GAAQA,EAAK1D,OAAS,IAEhCnC,KAAKK,gBAAkBoF,EAAetD,OAAS,EAAIsD,EAAeK,KAAIC,GAAQA,EAAKC,OAAO,GAAGC,gBAAeC,KAAK,IAAMT,EAAe,GAAGQ,a,CAG3I,YAAAE,CAAalF,GACXA,EAAEmF,kBACFnF,EAAEC,iBACFlB,KAAKqG,KAAKC,M,CAGZ,WAAAC,CAAYtF,GACVA,EAAEmF,kBACFnF,EAAEC,iBACF,MAAMsF,EAAYxG,KAAKmB,iBAAiBsF,UAAU,aAClD,MAAMC,EAAW1G,KAAKwC,gBAAgBiE,UAAU,aAChDzG,KAAK2G,KAAKL,KAAK,CAACE,YAAWE,Y,CAG7B,qBAAAE,GACE,OAAQ5G,KAAKM,MACX,IAAK,OAEH,OAAQN,KAAKI,aAAeJ,KAAKI,YAAYsF,OAAOvD,SAAW,EACjE,IAAK,OAEH,OAASnC,KAAKQ,oBAAsBR,KAAKS,kBAAqBT,KAAKW,cAAcwB,SAAW,GAAKnC,KAAKc,mBAAmBqB,SAAW,EACtI,QACE,OAAO,K,CAIb,oBAAAwB,GACE,IAAK3D,KAAKmB,iBAAkB,CAC1B,M,CAIF,GAAInB,KAAKM,OAAS,OAAQ,CAExB,MAAM8D,EAAapE,KAAKmB,iBAAiBkD,WAAW,MAGpD,GAAID,GAAcA,IAAepE,KAAKoB,kBAAmB,CACvDpB,KAAKoB,kBAAoBgD,EAGzBpE,KAAKoB,kBAAkByF,YAAc,UACrC7G,KAAKoB,kBAAkB0F,UAAY,EACnC9G,KAAKoB,kBAAkB2F,QAAU,QACjC/G,KAAKoB,kBAAkB4F,SAAW,QAGlC,GAAIhH,KAAKW,cAAcwB,SAAW,EAAG,CACnCnC,KAAKoB,kBAAkBkD,UAAU,EAAG,EAAGtE,KAAKmB,iBAAiB8C,MAAOjE,KAAKmB,iBAAiBgD,O,GAOhG,GAAInE,KAAKM,OAAS,QAAUN,KAAKoB,kBAAmB,CAClDpB,KAAKoB,kBAAoB,KACzBpB,KAAKU,iBAAmB,GACxBV,KAAKY,aAAe,I,EAIxB,mBAAAgD,GACE,IAAK5D,KAAKwC,gBAAiB,CACzB,M,CAIF,GAAIxC,KAAKM,OAAS,OAAQ,CAExB,MAAM2G,EAAkBjH,KAAKwC,gBAAgB6B,WAAW,MAGxD,GAAI4C,GAAmBA,IAAoBjH,KAAKyC,uBAAwB,CACtEzC,KAAKyC,uBAAyBwE,EAG9BjH,KAAKyC,uBAAuBoE,YAAc,UAC1C7G,KAAKyC,uBAAuBqE,UAAY,EACxC9G,KAAKyC,uBAAuBsE,QAAU,QACtC/G,KAAKyC,uBAAuBuE,SAAW,QAGvC,GAAIhH,KAAKc,mBAAmBqB,SAAW,EAAG,CACxCnC,KAAKyC,uBAAuB6B,UAAU,EAAG,EAAGtE,KAAKwC,gBAAgByB,MAAOjE,KAAKwC,gBAAgB2B,O,GAOnG,GAAInE,KAAKM,OAAS,QAAUN,KAAKyC,uBAAwB,CACvDzC,KAAKyC,uBAAyB,KAC9BzC,KAAKa,sBAAwB,GAC7Bb,KAAKe,kBAAoB,I,EAI7B,oBAAAmG,GACE,IAAKlH,KAAKmB,mBAAqBnB,KAAKoB,kBAAmB,CACrD,M,CAGFpB,KAAKoB,kBAAkBkD,UAAU,EAAG,EAAGtE,KAAKmB,iBAAiB8C,MAAOjE,KAAKmB,iBAAiBgD,QAC1FnE,KAAKU,iBAAmB,GACxBV,KAAKW,cAAgB,GACrBX,KAAKY,aAAe,KACpBZ,KAAKQ,kBAAoB,K,CAG3B,mBAAA2G,GACE,IAAKnH,KAAKwC,kBAAoBxC,KAAKyC,uBAAwB,CACzD,M,CAGFzC,KAAKyC,uBAAuB6B,UAAU,EAAG,EAAGtE,KAAKwC,gBAAgByB,MAAOjE,KAAKwC,gBAAgB2B,QAC7FnE,KAAKa,sBAAwB,GAC7Bb,KAAKc,mBAAqB,GAC1Bd,KAAKe,kBAAoB,KACzBf,KAAKS,iBAAmB,K,CAG1B,kBAAA2G,CAAmBnG,EAAQoG,EAAyC,OAClEpG,EAAEmF,kBACFnF,EAAEC,iBACF,GAAImG,IAAS,OAASA,IAAS,YAAarH,KAAKkH,uBACjD,GAAIG,IAAS,OAASA,IAAS,WAAYrH,KAAKmH,qB,CAGlD,uBAAA7F,CAAwBL,GACtB,IAAKjB,KAAKmB,iBAAkB,CAC1B,MAAO,CAACM,EAAG,EAAGC,EAAG,E,CAGnB,MAAM4F,EAAOtH,KAAKmB,iBAAiBoG,wBAGnC,MAAMC,EAASxH,KAAKmB,iBAAiB8C,MAAQqD,EAAKrD,MAClD,MAAMwD,EAASzH,KAAKmB,iBAAiBgD,OAASmD,EAAKnD,OAEnD,MAAO,CACL1C,GAAIR,EAAEyG,QAAUJ,EAAKK,MAAQH,EAC7B9F,GAAIT,EAAE2G,QAAUN,EAAKO,KAAOJ,E,CAIhC,4BAAA/E,CAA6BzB,GAC3B,IAAKjB,KAAKwC,gBAAiB,CACzB,MAAO,CAACf,EAAG,EAAGC,EAAG,E,CAGnB,MAAM4F,EAAOtH,KAAKwC,gBAAgB+E,wBAGlC,MAAMC,EAASxH,KAAKwC,gBAAgByB,MAAQqD,EAAKrD,MACjD,MAAMwD,EAASzH,KAAKwC,gBAAgB2B,OAASmD,EAAKnD,OAElD,MAAO,CACL1C,GAAIR,EAAEyG,QAAUJ,EAAKK,MAAQH,EAC7B9F,GAAIT,EAAE2G,QAAUN,EAAKO,KAAOJ,E,CA4KhC,MAAAK,GACE,OACEC,EAAA,kBAAAC,IAAA,4CACED,EAAA,OAAAC,IAAA,2CAAKC,KAAK,UAAUC,MAAM,WAAS,wBAInCH,EAAA,OAAAC,IAAA,2CAAKC,KAAK,UAAUC,MAAM,WACxBH,EAAA,OAAAC,IAAA,2CAAKG,MAAO,CAACC,WAAY,MAAOC,MAAO,UAAW9D,SAAU,SAAO,+CAEnEwD,EAAA,OAAAC,IAAA,2CAAKE,MAAO,CAACb,KAAM,KAAMiB,OAAQtI,KAAKM,OAAS,SAC7CyH,EAAA,sBAAAC,IAAA,2CACEO,MAAM,YACN/C,MAAOxF,KAAKI,YACZoI,SAAUxI,KAAKE,WACfuI,QAASxH,GAAKjB,KAAKsF,iBAAiBrE,GACpCyH,QAASzH,GAAKA,EAAEmF,oBAEjBpG,KAAKE,YAAc6H,EAAA,OAAAC,IAAA,2CAAKE,MAAM,oBAAkB,gEAGnDH,EAAA,OAAAC,IAAA,2CAAKG,MAAO,CAACC,WAAY,MAAOC,MAAO,UAAW9D,SAAU,SAAO,4BAEnEwD,EAAA,OAAAC,IAAA,2CAAKG,MAAO,CAACQ,QAAS,OAAQC,cAAe,MAAOC,IAAK,OAAQC,aAAc,MAAOC,WAAY,SAAUxE,SAAU,SACpHwD,EAAA,wBAAAC,IAAA,2CAAsBgB,QAAShJ,KAAKM,OAAS,OAAQkF,MAAM,OAAOvF,KAAK,OAAOyI,QAAS,IAAO1I,KAAKM,KAAO,SAC1GyH,EAAA,SAAAC,IAAA,sEAEFD,EAAA,OAAAC,IAAA,2CAAKG,MAAO,CAACQ,QAAS,OAAQC,cAAe,MAAOC,IAAK,OAAQC,aAAc,MAAOC,WAAY,SAAUxE,SAAU,SACpHwD,EAAA,wBAAAC,IAAA,2CAAsBgB,QAAShJ,KAAKM,OAAS,OAAQkF,MAAM,OAAOvF,KAAK,OAAOyI,QAAS,IAAO1I,KAAKM,KAAO,SAC1GyH,EAAA,SAAAC,IAAA,mFAGFD,EAAA,OAAAC,IAAA,2CAAKE,MAAM,kBACTH,EAAA,OAAAC,IAAA,2CAAKG,MAAO,CAAC5D,SAAU,OAAQ6D,WAAY,QAAM,qBAChDpI,KAAKM,OAAS,QACbyH,EAAA,UAAAC,IAAA,2CAAQE,MAAM,oBAAoBQ,QAASzH,GAAKjB,KAAKoH,mBAAmBnG,EAAG,aAAcuH,UAAWxI,KAAKQ,mBAAiB,UAK9HuH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,wCACTH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,qBACTH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,SAASe,UAAWC,IAC/BnB,EAAA,OAAAC,IAAA,2CAAKE,MAAM,kBAEbH,EAAA,UAAAC,IAAA,2CACEmB,IAAKC,GAAOpJ,KAAKmB,iBAAmBiI,EAEpCjF,OAAO,KACP+D,MAAM,mBACNmB,cAAerJ,KAAKgB,qBACpBsI,cAAetJ,KAAK6B,qBACpB0H,YAAavJ,KAAKkC,mBAClBsH,gBAAiBxJ,KAAKsC,uBACtB6F,MAAO,CAACsB,YAAa,OAAQC,OAAQ,gBAIzC3B,EAAA,OAAAC,IAAA,2CAAKE,MAAM,kBACTH,EAAA,OAAAC,IAAA,2CAAKG,MAAO,CAAC5D,SAAU,OAAQ6D,WAAY,QAAM,oBAChDpI,KAAKM,OAAS,QACbyH,EAAA,UAAAC,IAAA,2CAAQE,MAAM,oBAAoBQ,QAASzH,GAAKjB,KAAKoH,mBAAmBnG,EAAG,YAAauH,UAAWxI,KAAKS,kBAAgB,UAK5HsH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,uCACTH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,qBACTH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,SAASe,UAAWC,IAC/BnB,EAAA,OAAAC,IAAA,2CAAKE,MAAM,kBAEbH,EAAA,UAAAC,IAAA,2CACEmB,IAAKC,GAAOpJ,KAAKwC,gBAAkB4G,EAEnCjF,OAAO,KACP+D,MAAM,kBACNmB,cAAerJ,KAAKuC,0BACpB+G,cAAetJ,KAAK2C,0BACpB4G,YAAavJ,KAAK4C,wBAClB4G,gBAAiBxJ,KAAK6C,4BACtBsF,MAAO,CAACsB,YAAa,OAAQC,OAAQ,gBAIzC3B,EAAA,OAAAC,IAAA,2CAAKE,MAAM,cAAY,0RAMzBH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,SAASD,KAAK,UACvBF,EAAA,OAAAC,IAAA,2CAAKE,MAAM,WACTH,EAAA,UAAAC,IAAA,2CAAQE,MAAM,SAASQ,QAASzH,GAAKjB,KAAKmG,aAAalF,IAAE,UAGzD8G,EAAA,UAAAC,IAAA,2CAAQE,MAAM,UAAUQ,QAASzH,GAAKjB,KAAKuG,YAAYtF,GAAIuH,SAAUxI,KAAK4G,yBAAuB,kB","ignoreList":[]}

package/dist/components/p-DGNIsXfr.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{p as e,H as c,h as o,d as t,t as r}from"./p-yZBlG3YQ.js";const s=()=>`@charset "UTF-8";verdocs-checkbox{line-height:18px;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+::before{content:"";width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;line-height:20px;border-radius:2px;border-style:solid;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+::before{content:"✓";color:white;text-align:center;background:var(--verdocs-checkbox-color, #55bc81);border-color:var(--verdocs-checkbox-color, #55bc81)}verdocs-checkbox.dark label>input[type=checkbox]+::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+::before{background:var(--verdocs-checkbox-color, #55bc81);border-color:var(--verdocs-checkbox-color, #55bc81)}verdocs-checkbox.small label>input[type=checkbox]+*::before{width:16px;height:16px;line-height:16px}`;const b=e(class e extends c{constructor(e){super();if(e!==false){this.__registerHost()}this.checked=false;this.name="";this.label="";this.value="";this.theme="light";this.size="normal";this.disabled=false}render(){return o(t,{key:"cf97024379b4e60ecc00d9b9a13a5dd6026903c6",class:{disabled:this.disabled,[this.theme]:true,[this.size]:true}},o("label",{key:"a2b44d29b3e58be78b59998d94bcec07719645b3"},o("input",{key:"2821ad886055aeb613ed490461007ed6628d159f",type:"checkbox",value:this.value,name:this.name,checked:this.checked,disabled:this.disabled}),o("span",{key:"d72a5ab4951ac6650bc330419880742b011d4729"},this.label)))}static get style(){return s()}},[0,"verdocs-checkbox",{checked:[4],name:[1],label:[1],value:[1],theme:[1],size:[1],disabled:[4]}]);function i(){if(typeof customElements==="undefined"){return}const e=["verdocs-checkbox"];e.forEach((e=>{switch(e){case"verdocs-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),b)}break}}))}export{b as V,i as d};
2	- //# sourceMappingURL=p-DGNIsXfr.js.map

package/dist/components/p-DGNIsXfr.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["verdocsCheckboxCss","VerdocsCheckbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","name","label","value","theme","size","disabled","render","h","Host","key","class","type"],"sources":["src/components/controls/verdocs-checkbox/verdocs-checkbox.scss?tag=verdocs-checkbox","src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// Your periodic reminder that it's 2022 and you still can't style HTML checkboxes\nverdocs-checkbox {\n line-height: 18px;\n font-family: $verdocs-primary-font;\n\n label>input[type='checkbox'] {\n display: none;\n }\n\n label>input[type='checkbox']+*::before {\n content: '';\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n margin-right: 8px;\n line-height: 20px;\n border-radius: 2px;\n border-style: solid;\n border-width: 0.1rem;\n display: inline-block;\n vertical-align: bottom;\n border-color: $verdocs-grey-2;\n }\n\n\n label>input[type='checkbox']:checked+*::before {\n content: '✓';\n color: white;\n text-align: center;\n background: var(--verdocs-checkbox-color, $verdocs-green);\n border-color: var(--verdocs-checkbox-color, $verdocs-green);\n }\n\n &.dark {\n label>input[type='checkbox']+*::before {\n border-color: $verdocs-grey-4;\n }\n\n label>input[type='checkbox']:checked+*::before {\n background: var(--verdocs-checkbox-color, $verdocs-green);\n border-color: var(--verdocs-checkbox-color, $verdocs-green);\n }\n }\n\n &.small {\n label>input[type='checkbox']+*::before {\n width: 16px;\n height: 16px;\n line-height: 16px;\n }\n }\n}","import {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check\n * box for UI displays e.g. dialog boxes.\n *\n * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n *\n * ```ts\n * <verdocs-checkbox\n * value=\"on\"\n * name=\"thingEnabled\"\n * checked={this.thingEnabled}\n * onInput={(e: any) => (this.thingEnabled = e.target.checked)}\n * />\n * ```\n */\n@Component({\n tag: 'verdocs-checkbox',\n styleUrl: 'verdocs-checkbox.scss',\n shadow: false,\n})\nexport class VerdocsCheckbox {\n /**\n * Whether the radio button is currently selected.\n */\n @Prop() checked: boolean = false;\n\n /**\n * HTML form field name for the input.\n */\n @Prop() name: string = '';\n\n /**\n * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be\n * repositioned with CSS.\n */\n @Prop() label: string = '';\n\n /**\n * Value to track with the input. Value is not used internally by this component but is sometimes useful to set\n * because it can be retrieved in event handlers via e.target.value. This can be used to identify which\n * checkbox was clicked in a checkbox group.\n */\n @Prop() value: string = '';\n\n /**\n * Style of checkbox to render. Use 'dark' when rendering on a dark background.\n */\n @Prop() theme: 'light' | 'dark' = 'light';\n\n /**\n * Size of checkbox to render.\n */\n @Prop() size: 'normal' | 'small' = 'normal';\n\n /**\n * If set, the button will still be displayed but not selectable.\n */\n @Prop() disabled?: boolean = false;\n\n render() {\n return (\n <Host class={{disabled: this.disabled, [this.theme]: true, [this.size]: true}}>\n <label>\n <input type=\"checkbox\" value={this.value} name={this.name} checked={this.checked} disabled={this.disabled} />\n <span>{this.label}</span>\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAqB,IAAM,s/B,MCwBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAmB,MAKnBD,KAAAE,KAAe,GAMfF,KAAAG,MAAgB,GAOhBH,KAAAI,MAAgB,GAKhBJ,KAAAK,MAA0B,QAK1BL,KAAAM,KAA2B,SAK3BN,KAAAO,SAAqB,KAY9B,CAVC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAACL,SAAUP,KAAKO,SAAU,CAACP,KAAKK,OAAQ,KAAM,CAACL,KAAKM,MAAO,OACtEG,EAAA,SAAAE,IAAA,4CACEF,EAAA,SAAAE,IAAA,2CAAOE,KAAK,WAAWT,MAAOJ,KAAKI,MAAOF,KAAMF,KAAKE,KAAMD,QAASD,KAAKC,QAASM,SAAUP,KAAKO,WACjGE,EAAA,QAAAE,IAAA,4CAAOX,KAAKG,Q","ignoreList":[]}