@verdocs/web-sdk 5.0.24 → 5.0.27

package/dist/components/{p-e4a97ad5.js → p-143a763f.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-324ed895.js';
 import { getRGBA } from '@verdocs/js-sdk';
 import { S as SettingsIcon } from './p-b0766439.js';
-import { S as Store } from './p-3828cb31.js';
+import { S as Store } from './p-d4be87ef.js';
 import { d as defineCustomElement$9 } from './p-0e332769.js';
 import { d as defineCustomElement$8 } from './p-3201d529.js';
 import { d as defineCustomElement$7 } from './p-84ae0283.js';
@@ -9,7 +9,7 @@ import { d as defineCustomElement$6 } from './p-7f32e087.js';
 import { d as defineCustomElement$5 } from './p-1ae5d7e0.js';
 import { d as defineCustomElement$4 } from './p-6719b0d7.js';
 import { d as defineCustomElement$3 } from './p-62743fd3.js';
-import { d as defineCustomElement$2 } from './p-eb12a71c.js';
+import { d as defineCustomElement$2 } from './p-f238b25b.js';
 import { d as defineCustomElement$1 } from './p-325b3828.js';
 
 const verdocsFieldRadioCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-radio{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio svg{margin-top:4px}verdocs-field-radio.disabled.done{opacity:1}verdocs-field-radio div.label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-radio div.group{top:14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#bb0589;border-bottom-left-radius:2px;border-bottom-right-radius:2px}verdocs-field-radio input{cursor:inherit}verdocs-field-radio.disabled input{opacity:0.5}verdocs-field-radio.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:12px;height:12px;position:absolute;left:0;top:0;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio.required{border:1px solid #cc0000}verdocs-field-radio.hide{display:none}verdocs-field-radio.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-radio .settings-icon svg{fill:#707ae5}verdocs-field-radio .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
@@ -160,4 +160,4 @@ function defineCustomElement() {
 
 export { VerdocsFieldRadio as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-e4a97ad5.js.map
+//# sourceMappingURL=p-143a763f.js.map

package/dist/components/{p-e4a97ad5.js.map → p-143a763f.js.map}

@@ -1 +1 @@
-{"file":"p-e4a97ad5.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  svg {\n    margin-top: 4px;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  div.group {\n    top: 14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #bb0589;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.done input[type='radio'] {\n    margin: 0;\n    padding: 0;\n    width: 10px;\n    height: 10px;\n  }\n\n  &:not(.done) input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        //background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        position: absolute;\n        left: 0;\n        top: 0;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    margin-left: -20px;\n    margin-top: -7px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -6px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio',\n  styleUrl: 'verdocs-field-radio.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadio {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's required object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) required?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\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 when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {name, required = false, label = '', group = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const selected = value === 'true';\n\n    if (done) {\n      return (\n        <Host class={{done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required: this.required || required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n        {editable && group && <div class=\"group\">{group}</div>}\n\n        <input id={fieldname} type=\"radio\" name={group || fieldname} value={name} checked={!!selected} disabled={disabled} required={required} />\n        <label htmlFor={fieldname} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-143a763f.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  svg {\n    margin-top: 4px;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  div.group {\n    top: 14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #bb0589;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.done input[type='radio'] {\n    margin: 0;\n    padding: 0;\n    width: 10px;\n    height: 10px;\n  }\n\n  &:not(.done) input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        //background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        position: absolute;\n        left: 0;\n        top: 0;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    margin-left: -20px;\n    margin-top: -7px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -6px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio',\n  styleUrl: 'verdocs-field-radio.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadio {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's required object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) required?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\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 when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {name, required = false, label = '', group = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const selected = value === 'true';\n\n    if (done) {\n      return (\n        <Host class={{done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required: this.required || required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n        {editable && group && <div class=\"group\">{group}</div>}\n\n        <input id={fieldname} type=\"radio\" name={group || fieldname} value={name} checked={!!selected} disabled={disabled} required={required} />\n        <label htmlFor={fieldname} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-2d8b46e5.js → p-16b073b8.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { VerdocsEndpoint, getTemplate, createTemplateDocument, deleteTemplateDocument } from '@verdocs/js-sdk';
 import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon, b as PageCountIcon, T as TrashIcon } from './p-b0766439.js';
 import { S as SDKError } from './p-fd97809c.js';
-import { S as Store } from './p-3828cb31.js';
+import { S as Store } from './p-d4be87ef.js';
 import { d as defineCustomElement$6 } from './p-0e332769.js';
 import { d as defineCustomElement$5 } from './p-84ae0283.js';
 import { d as defineCustomElement$4 } from './p-22da6d14.js';
@@ -219,4 +219,4 @@ function defineCustomElement() {
 
 export { VerdocsTemplateAttachments as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-2d8b46e5.js.map
+//# sourceMappingURL=p-16b073b8.js.map

package/dist/components/{p-2d8b46e5.js.map → p-16b073b8.js.map}

@@ -1 +1 @@
-{"file":"p-2d8b46e5.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-attachments/verdocs-template-attachments.scss?tag=verdocs-template-attachments","src/components/templates/verdocs-template-attachments/verdocs-template-attachments.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-attachments {\n  font-family: $verdocs-primary-font;\n\n  h5 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 10px 0;\n    color: $verdocs-grey-blue;\n  }\n\n  .attachments {\n    margin: 0 0 40px 0;\n  }\n\n  .attachment {\n    display: flex;\n    padding: 5px 0;\n    column-gap: 15px;\n    align-items: center;\n    flex-direction: row;\n    color: $label-color;\n\n    &:hover {\n      .trash-icon {\n        display: flex;\n      }\n\n      .pages {\n        display: none;\n      }\n    }\n  }\n\n  svg {\n    width: 28px;\n    height: 28px;\n    fill: $verdocs-bg-4;\n    margin: 2px 0 0 0;\n  }\n\n  .file-icon {\n    flex: 0;\n  }\n\n  .pages {\n    width: 24px;\n    height: 24px;\n    flex: 0 0 24px;\n    padding-left: 4px;\n    position: relative;\n    margin: -10px 0 0 0;\n\n    .pages-icon {\n      top: 0;\n      left: 0;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n    }\n\n    .count {\n      top: 11px;\n      left: 7px;\n      z-index: 1;\n      width: 18px;\n      font-size: 12px;\n      font-weight: 500;\n      position: absolute;\n      text-align: center;\n      letter-spacing: -2px;\n    }\n  }\n\n  .filename {\n    flex: 1;\n    display: block;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    border-bottom: 1px dotted #cccccc;\n  }\n\n  .trash-icon {\n    flex: 0;\n    display: none;\n\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  verdocs-file-chooser {\n    margin: 10px 0;\n    border: 2px dashed #979797;\n  }\n\n  .loader-wrapper {\n    background-color: $verdocs-grey-4;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    position: relative;\n    width: 320px;\n    height: 320px;\n    text-align: center;\n    border: 2px dashed #979797;\n    justify-content: flex-end;\n  }\n\n  .progress-wrapper {\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {Component, h, Event, EventEmitter, Prop, Host, State} from '@stencil/core';\nimport {createTemplateDocument, deleteTemplateDocument, getTemplate, ITemplate, ITemplateDocument, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {DocIcon, FileIcon, JpgIcon, PageCountIcon, PdfIcon, PngIcon, TrashIcon} from '../../../utils/Icons';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an edit form that allows the user to view, add, or remove a template's attachments.\n * Note that an active session and valid template ID must be supplied.\n */\n@Component({\n  tag: 'verdocs-template-attachments',\n  styleUrl: 'verdocs-template-attachments.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateAttachments {\n  private templateListenerId = null;\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   * 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 clicks the next button.\n   */\n  @Event({composed: true}) next: EventEmitter<{template: ITemplate}>;\n\n  /**\n   * Event fired when the user updates the template.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\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() uploading = false;\n  @State() progressLabel = 'Uploading...';\n  @State() progressPercent = 0;\n  @State() showDeleteError = false;\n  @State() confirmDeleteDocument: ITemplateDocument | null = null;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[ROLES] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[ROLES] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\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      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.exit.emit();\n  }\n\n  handleUploadProgress(percent: number) {\n    if (percent >= 99) {\n      this.progressPercent = 100;\n      this.progressLabel = 'Processing...';\n    } else {\n      this.progressPercent = percent;\n    }\n  }\n\n  async handleUpload(e) {\n    e.stopPropagation();\n\n    const file = e.detail.file as File;\n    if (!file) {\n      return;\n    }\n\n    console.log('[ATTACHMENTS] Uploading...', file);\n\n    this.uploading = true;\n    this.progressLabel = 'Uploading...';\n\n    try {\n      const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));\n      console.log('[ATTACHMENTS] Created attachment', template);\n\n      // TODO: Just updated it in place.\n      this.template = await Store.getTemplate(this.endpoint, this.templateId, true);\n      console.log('[ATTACHMENTS] Updated template', this.template);\n\n      this.templateUpdated?.emit({endpoint: this.endpoint, template: this.template, event: 'attachments'});\n\n      this.uploading = false;\n      this.progressLabel = '';\n      this.progressPercent = 0;\n    } catch (e) {\n      console.log('[ATTACHMENTS] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      this.uploading = false;\n    }\n  }\n\n  handleNext(e: any) {\n    e.stopPropagation();\n    this.uploading = false;\n    this.progressLabel = '';\n    this.progressPercent = 0;\n    this.next?.emit({template: this.template});\n  }\n\n  async confirmDelete() {\n    await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);\n    // TODO: Update it in place\n    this.template = await Store.getTemplate(this.endpoint, this.templateId, true);\n    console.log('[ATTACHMENTS] New template', this.template);\n    this.confirmDeleteDocument = null;\n  }\n\n  async handleDelete(document: ITemplateDocument) {\n    if ((this.template?.documents || []).length > 1) {\n      this.confirmDeleteDocument = document;\n    } else {\n      this.showDeleteError = true;\n    }\n  }\n\n  getFileIcon(document: ITemplateDocument) {\n    switch (document.mime) {\n      case 'application/pdf':\n        return PdfIcon;\n      case 'image/jpeg':\n        return JpgIcon;\n      case 'image/png':\n        return PngIcon;\n      case 'application/msword':\n      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':\n        return DocIcon;\n    }\n\n    return FileIcon;\n  }\n\n  render() {\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    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\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) {\n      return <Host class=\"empty\" />;\n    }\n\n    return (\n      <Host>\n        <h5>Existing Attachments</h5>\n\n        <div class=\"attachments\">\n          {(this.template?.documents || []).map(document => (\n            <div class=\"attachment\">\n              <div class=\"file-icon\" innerHTML={this.getFileIcon(document)} />\n              <div class=\"filename\" title={document.name}>\n                {document.name}\n              </div>\n              <div class=\"pages\">\n                <div class=\"count\">{document.pages}</div>\n                <div class=\"pages-icon\" innerHTML={PageCountIcon} />\n              </div>\n              <div class=\"trash-icon\" innerHTML={TrashIcon} onClick={() => this.handleDelete(document)} />\n            </div>\n          ))}\n        </div>\n\n        <h5>Attach a New Document</h5>\n\n        {this.uploading ? (\n          <div class=\"loader-wrapper\">\n            <verdocs-loader />\n\n            {this.progressLabel && (\n              <div class=\"progress-wrapper\">\n                <verdocs-progress-bar showPercent={true} percent={this.progressPercent} label={this.progressLabel} />\n              </div>\n            )}\n          </div>\n        ) : (\n          <verdocs-file-chooser onFileSelected={e => this.handleUpload(e)} />\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} disabled={this.uploading} />\n          <verdocs-button label=\"Next\" size=\"small\" onClick={e => this.handleNext(e)} disabled={!(this.template?.documents || []).length || this.uploading} />\n        </div>\n\n        {this.showDeleteError && (\n          <verdocs-ok-dialog heading=\"Unable to Delete Attachment\" message=\"Templates must contain at least one attachment.\" onNext={() => (this.showDeleteError = false)} />\n        )}\n\n        {this.confirmDeleteDocument && (\n          <verdocs-ok-dialog\n            heading=\"Delete this Attachment?\"\n            message=\"This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.\"\n            onNext={() => this.confirmDelete()}\n            showCancel={true}\n            onExit={() => {\n              this.confirmDeleteDocument = null;\n            }}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-16b073b8.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-attachments/verdocs-template-attachments.scss?tag=verdocs-template-attachments","src/components/templates/verdocs-template-attachments/verdocs-template-attachments.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-attachments {\n  font-family: $verdocs-primary-font;\n\n  h5 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 10px 0;\n    color: $verdocs-grey-blue;\n  }\n\n  .attachments {\n    margin: 0 0 40px 0;\n  }\n\n  .attachment {\n    display: flex;\n    padding: 5px 0;\n    column-gap: 15px;\n    align-items: center;\n    flex-direction: row;\n    color: $label-color;\n\n    &:hover {\n      .trash-icon {\n        display: flex;\n      }\n\n      .pages {\n        display: none;\n      }\n    }\n  }\n\n  svg {\n    width: 28px;\n    height: 28px;\n    fill: $verdocs-bg-4;\n    margin: 2px 0 0 0;\n  }\n\n  .file-icon {\n    flex: 0;\n  }\n\n  .pages {\n    width: 24px;\n    height: 24px;\n    flex: 0 0 24px;\n    padding-left: 4px;\n    position: relative;\n    margin: -10px 0 0 0;\n\n    .pages-icon {\n      top: 0;\n      left: 0;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n    }\n\n    .count {\n      top: 11px;\n      left: 7px;\n      z-index: 1;\n      width: 18px;\n      font-size: 12px;\n      font-weight: 500;\n      position: absolute;\n      text-align: center;\n      letter-spacing: -2px;\n    }\n  }\n\n  .filename {\n    flex: 1;\n    display: block;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    border-bottom: 1px dotted #cccccc;\n  }\n\n  .trash-icon {\n    flex: 0;\n    display: none;\n\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  verdocs-file-chooser {\n    margin: 10px 0;\n    border: 2px dashed #979797;\n  }\n\n  .loader-wrapper {\n    background-color: $verdocs-grey-4;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    position: relative;\n    width: 320px;\n    height: 320px;\n    text-align: center;\n    border: 2px dashed #979797;\n    justify-content: flex-end;\n  }\n\n  .progress-wrapper {\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {Component, h, Event, EventEmitter, Prop, Host, State} from '@stencil/core';\nimport {createTemplateDocument, deleteTemplateDocument, getTemplate, ITemplate, ITemplateDocument, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {DocIcon, FileIcon, JpgIcon, PageCountIcon, PdfIcon, PngIcon, TrashIcon} from '../../../utils/Icons';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an edit form that allows the user to view, add, or remove a template's attachments.\n * Note that an active session and valid template ID must be supplied.\n */\n@Component({\n  tag: 'verdocs-template-attachments',\n  styleUrl: 'verdocs-template-attachments.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateAttachments {\n  private templateListenerId = null;\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   * 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 clicks the next button.\n   */\n  @Event({composed: true}) next: EventEmitter<{template: ITemplate}>;\n\n  /**\n   * Event fired when the user updates the template.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\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() uploading = false;\n  @State() progressLabel = 'Uploading...';\n  @State() progressPercent = 0;\n  @State() showDeleteError = false;\n  @State() confirmDeleteDocument: ITemplateDocument | null = null;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[ROLES] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[ROLES] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\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      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.exit.emit();\n  }\n\n  handleUploadProgress(percent: number) {\n    if (percent >= 99) {\n      this.progressPercent = 100;\n      this.progressLabel = 'Processing...';\n    } else {\n      this.progressPercent = percent;\n    }\n  }\n\n  async handleUpload(e) {\n    e.stopPropagation();\n\n    const file = e.detail.file as File;\n    if (!file) {\n      return;\n    }\n\n    console.log('[ATTACHMENTS] Uploading...', file);\n\n    this.uploading = true;\n    this.progressLabel = 'Uploading...';\n\n    try {\n      const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));\n      console.log('[ATTACHMENTS] Created attachment', template);\n\n      // TODO: Just updated it in place.\n      this.template = await Store.getTemplate(this.endpoint, this.templateId, true);\n      console.log('[ATTACHMENTS] Updated template', this.template);\n\n      this.templateUpdated?.emit({endpoint: this.endpoint, template: this.template, event: 'attachments'});\n\n      this.uploading = false;\n      this.progressLabel = '';\n      this.progressPercent = 0;\n    } catch (e) {\n      console.log('[ATTACHMENTS] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      this.uploading = false;\n    }\n  }\n\n  handleNext(e: any) {\n    e.stopPropagation();\n    this.uploading = false;\n    this.progressLabel = '';\n    this.progressPercent = 0;\n    this.next?.emit({template: this.template});\n  }\n\n  async confirmDelete() {\n    await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);\n    // TODO: Update it in place\n    this.template = await Store.getTemplate(this.endpoint, this.templateId, true);\n    console.log('[ATTACHMENTS] New template', this.template);\n    this.confirmDeleteDocument = null;\n  }\n\n  async handleDelete(document: ITemplateDocument) {\n    if ((this.template?.documents || []).length > 1) {\n      this.confirmDeleteDocument = document;\n    } else {\n      this.showDeleteError = true;\n    }\n  }\n\n  getFileIcon(document: ITemplateDocument) {\n    switch (document.mime) {\n      case 'application/pdf':\n        return PdfIcon;\n      case 'image/jpeg':\n        return JpgIcon;\n      case 'image/png':\n        return PngIcon;\n      case 'application/msword':\n      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':\n        return DocIcon;\n    }\n\n    return FileIcon;\n  }\n\n  render() {\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    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\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) {\n      return <Host class=\"empty\" />;\n    }\n\n    return (\n      <Host>\n        <h5>Existing Attachments</h5>\n\n        <div class=\"attachments\">\n          {(this.template?.documents || []).map(document => (\n            <div class=\"attachment\">\n              <div class=\"file-icon\" innerHTML={this.getFileIcon(document)} />\n              <div class=\"filename\" title={document.name}>\n                {document.name}\n              </div>\n              <div class=\"pages\">\n                <div class=\"count\">{document.pages}</div>\n                <div class=\"pages-icon\" innerHTML={PageCountIcon} />\n              </div>\n              <div class=\"trash-icon\" innerHTML={TrashIcon} onClick={() => this.handleDelete(document)} />\n            </div>\n          ))}\n        </div>\n\n        <h5>Attach a New Document</h5>\n\n        {this.uploading ? (\n          <div class=\"loader-wrapper\">\n            <verdocs-loader />\n\n            {this.progressLabel && (\n              <div class=\"progress-wrapper\">\n                <verdocs-progress-bar showPercent={true} percent={this.progressPercent} label={this.progressLabel} />\n              </div>\n            )}\n          </div>\n        ) : (\n          <verdocs-file-chooser onFileSelected={e => this.handleUpload(e)} />\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} disabled={this.uploading} />\n          <verdocs-button label=\"Next\" size=\"small\" onClick={e => this.handleNext(e)} disabled={!(this.template?.documents || []).length || this.uploading} />\n        </div>\n\n        {this.showDeleteError && (\n          <verdocs-ok-dialog heading=\"Unable to Delete Attachment\" message=\"Templates must contain at least one attachment.\" onNext={() => (this.showDeleteError = false)} />\n        )}\n\n        {this.confirmDeleteDocument && (\n          <verdocs-ok-dialog\n            heading=\"Delete this Attachment?\"\n            message=\"This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.\"\n            onNext={() => this.confirmDelete()}\n            showCancel={true}\n            onExit={() => {\n              this.confirmDeleteDocument = null;\n            }}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-e9528d9f.js → p-1d4829fb.js}

@@ -3,7 +3,7 @@ import { getRGBA } from '@verdocs/js-sdk';
 import { c as commonjsGlobal } from './p-85aa8e05.js';
 import { S as SettingsIcon } from './p-b0766439.js';
 import { a as FORMAT_DATE } from './p-c7ee88c7.js';
-import { S as Store } from './p-3828cb31.js';
+import { S as Store } from './p-d4be87ef.js';
 import { d as defineCustomElement$9 } from './p-0e332769.js';
 import { d as defineCustomElement$8 } from './p-3201d529.js';
 import { d as defineCustomElement$7 } from './p-84ae0283.js';
@@ -11,7 +11,7 @@ import { d as defineCustomElement$6 } from './p-7f32e087.js';
 import { d as defineCustomElement$5 } from './p-1ae5d7e0.js';
 import { d as defineCustomElement$4 } from './p-6719b0d7.js';
 import { d as defineCustomElement$3 } from './p-62743fd3.js';
-import { d as defineCustomElement$2 } from './p-eb12a71c.js';
+import { d as defineCustomElement$2 } from './p-f238b25b.js';
 import { d as defineCustomElement$1 } from './p-325b3828.js';
 import { f as format } from './p-12bab948.js';
 
@@ -210,4 +210,4 @@ function defineCustomElement() {
 
 export { VerdocsFieldDate as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-e9528d9f.js.map
+//# sourceMappingURL=p-1d4829fb.js.map