@verdocs/web-sdk 1.5.2 → 1.6.0

package/dist/components/verdocs-template-card.js

@@ -52,3 +52,5 @@ const VerdocsTemplateCard = VerdocsTemplateCard$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsTemplateCard, defineCustomElement };
+
+//# sourceMappingURL=verdocs-template-card.js.map

package/dist/components/verdocs-template-card.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-template-card.js","mappings":";;;;;;;;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,28CAA28C;;MCe79CA,qBAAmB;;;;;EAM9B,MAAM;;IACJ,QACE,EAAC,IAAI,QACH,WAAK,GAAG,EAAE,CAAA,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,iBAAiB,0CAAE,aAAa,KAAI,EAAE,EAAE,GAAG,EAAC,oBAAoB,EAAC,KAAK,EAAC,WAAW,GAAG,EAE9G,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAQ,EAC9C,YAAM,KAAK,EAAC,UAAU,IAAE,CAAA,MAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,0CAAE,IAAI,KAAI,QAAQ,CAAQ,EAE5E,aAAM,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,QAAQ,GAAI,EAC1C,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAQ,CACnD,EAEN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,GAAI,EAC3C,YAAM,KAAK,EAAC,OAAO,IAAE,CAAA,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,iBAAiB,0CAAE,YAAY,KAAI,CAAC,CAAQ,CAC5E,EAEN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,GAAI,EAC3C,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAQ,CAC9C,EAEN,YAAM,KAAK,EAAC,qBAAqB,EAAC,SAAS,EAAE,WAAW,GAAI,CACxD,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsTemplateCard"],"sources":["./src/components/controls/verdocs-template-card/verdocs-template-card.scss?tag=verdocs-template-card","./src/components/controls/verdocs-template-card/verdocs-template-card.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-card {\n  font-family: $primary-font;\n  width: 320px;\n  height: 320px;\n  display: flex;\n  padding: 25px;\n  flex-wrap: nowrap;\n  box-sizing: border-box;\n  flex-direction: column;\n  background-color: $verdocs-grey-4;\n  box-shadow: 2px 2px 5px rgba(51, 54, 75, 0.05);\n\n  .thumbnail {\n    width: 272px;\n    height: 158px;\n    object-fit: cover;\n    margin-bottom: 22px;\n    object-position: -20% 0;\n  }\n\n  .name {\n    font-size: 18px;\n    font-weight: 700;\n    margin-bottom: 7px;\n  }\n\n  .org-name {\n    font-size: 14px;\n    font-weight: 700;\n    margin-bottom: 6px;\n  }\n\n  hr {\n    width: 100%;\n    margin-bottom: 17px;\n    background-color: $icon-color;\n  }\n\n  .controls {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    text-align: center;\n    font-size: 16px;\n\n    .control {\n      flex: 1;\n      display: flex;\n      margin-right: 8px;\n      align-items: flex-start;\n      border-right: 1px solid $icon-color;\n\n      &.secondary {\n        justify-content: center;\n      }\n\n      svg {\n        fill: $icon-color;\n        height: 16px;\n        max-width: 16px;\n        margin: 0 8px -2px 0;\n      }\n    }\n  }\n\n  .additional-controls svg {\n    margin-right: 0;\n    fill: $verdocs-purple;\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport ActionsIcon from './actions.svg';\nimport EmailIcon from './email.svg';\nimport PagesIcon from './pages.svg';\nimport StarIcon from './star.svg';\n\n/**\n * Displays a summary of a template\n */\n@Component({\n  tag: 'verdocs-template-card',\n  styleUrl: 'verdocs-template-card.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCard {\n  /**\n   * The template for which the card will be rendered.\n   */\n  @Prop() template: ITemplate;\n\n  render() {\n    return (\n      <Host>\n        <img src={this.template?.template_document?.thumbnail_url || ''} alt=\"Template Thumbnail\" class=\"thumbnail\" />\n\n        <span class=\"name\">{this.template.name}</span>\n        <span class=\"org-name\">{this.template.organization?.name || 'Public'}</span>\n\n        <hr />\n\n        <div class=\"controls\">\n          <div class=\"control\">\n            <span class=\"icon\" innerHTML={StarIcon} />\n            <span class=\"value\">{this.template.star_counter}</span>\n          </div>\n\n          <div class=\"control secondary\">\n            <span class=\"icon\" innerHTML={PagesIcon} />\n            <span class=\"value\">{this.template?.template_document?.page_numbers || 1}</span>\n          </div>\n\n          <div class=\"control secondary\">\n            <span class=\"icon\" innerHTML={EmailIcon} />\n            <span class=\"value\">{this.template.counter}</span>\n          </div>\n\n          <span class=\"additional-controls\" innerHTML={ActionsIcon} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-template-tags.js

@@ -34,3 +34,5 @@ const VerdocsTemplateTags = VerdocsTemplateTags$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsTemplateTags, defineCustomElement };
+
+//# sourceMappingURL=verdocs-template-tags.js.map

package/dist/components/verdocs-template-tags.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-template-tags.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,uVAAuV;;MCSzWA,qBAAmB;;;;;EAM9B,MAAM;;IACJ,QACE,EAAC,IAAI,QACF,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,CAAC,GAAG,KACjB,gBAAO,GAAG,CAAQ,CACnB,CAAC,CACG,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsTemplateTags"],"sources":["./src/components/controls/verdocs-template-tags/verdocs-template-tags.scss?tag=verdocs-template-tags","./src/components/controls/verdocs-template-tags/verdocs-template-tags.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-tags {\n  font-family: $primary-font;\n\n  span {\n    margin: 0 4px;\n    height: 28px;\n    font-size: 12px;\n    font-weight: 600;\n    padding: 5px 12px 7px;\n    border-radius: 5px;\n    display: inline-block;\n    box-sizing: border-box;\n    text-transform: uppercase;\n    color: $label-color;\n    border: 1px solid $border-color;\n    background-color: $container-bg;\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/**\n * Displays a message listing a template's tags.\n */\n@Component({\n  tag: 'verdocs-template-tags',\n  styleUrl: 'verdocs-template-tags.scss',\n})\nexport class VerdocsTemplateTags {\n  /**\n   * The tags to display\n   */\n  @Prop() tags: any[];\n\n  render() {\n    return (\n      <Host>\n        {this.tags?.map(tag => (\n          <span>{tag}</span>\n        ))}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-text-input.js

@@ -4,3 +4,5 @@ const VerdocsTextInput = VerdocsTextInput$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsTextInput, defineCustomElement };
+
+//# sourceMappingURL=verdocs-text-input.js.map

package/dist/components/verdocs-text-input.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-text-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/verdocs-text-input2.js

@@ -79,3 +79,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { VerdocsTextInput as V, defineCustomElement as d };
+
+//# sourceMappingURL=verdocs-text-input2.js.map

package/dist/components/verdocs-text-input2.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-text-input2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,m1BAAm1B;;MCal2B,gBAAgB;EAJ7B;;;;;;;;;IAQU,UAAK,GAAW,EAAE,CAAC;;;;IAKnB,UAAK,GAAW,EAAE,CAAC;;;;IAKnB,gBAAW,GAAW,EAAE,CAAC;;;;IAKzB,iBAAY,GAAW,EAAE,CAAC;;;;;IAM1B,SAAI,GAAwE,MAAM,CAAC;;;;IAKnF,aAAQ,GAAY,KAAK,CAAC;IAEzB,WAAM,GAAW,EAAE,CAAC;GAwD9B;EAvCC,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;GAC1B;EAED,gBAAgB,MAAK;EAErB,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC7B;EAED,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa,IACvB,iBACG,IAAI,CAAC,KAAK,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,GAAG,cAAO,EACzE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EACzC,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GACvC,CACI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","./src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 20px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 28px;\n    padding: 4px 12px;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $medium-bg;\n    font-weight: 400;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n}\n","import {Component, Prop, State, Event, Host, h, EventEmitter} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Bear in mind Stencil does not currently support emitting events\n * with the same names as native DOM events, so rather than `input` or `blur` we have `tinput`, `tblur`,\n * etc. We used a temporary prefix here to mark this as a temporary API, because we hope this will change\n * in a future Stencil release. See https://github.com/ionic-team/stencil/issues/2822.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  /**\n   * Event fired when the input value changes.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * Event fired when the field receives focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter;\n\n  /**\n   * Event fired when the field loses focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter;\n\n  componentWillLoad() {\n    this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  handleInput(event) {\n    this._value = event.target.value;\n    this.fieldInput.emit(this._value);\n  }\n\n  handleFocus(event) {\n    this.fieldFocus.emit(event);\n  }\n\n  handleBlur(event) {\n    this.fieldBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            disabled={this.disabled}\n            value={this._value}\n            class=\"input-element\"\n            onInput={event => this.handleInput(event)}\n            onFocus={event => this.handleFocus(event)}\n            onBlur={event => this.handleBlur(event)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-toggle.js

@@ -51,3 +51,5 @@ const VerdocsToggle = VerdocsToggle$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsToggle, defineCustomElement };
+
+//# sourceMappingURL=verdocs-toggle.js.map

package/dist/components/verdocs-toggle.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-toggle.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,ulCAAulC;;MCwBnmCA,eAAa;;;;;EAgBxB,WAAW,CAAC,KAAK;IACf,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;IAC7B,IAAI,SAAS,CAAC,OAAO,CAAC,qBAAqB,CAAC,EAAE;MAC5C,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;MACpC,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAC;MACxC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK;QACtE,OAAO,KAAK,KAAK,OAAO,CAAC;OAC1B,CAAC,CAAC;MACH,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAY;QACxB,OAAO,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;OAC7C,CAAC,CAAC;MACH,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;QAC3C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;OACnC;KACF;GACF;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ,EACrD,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAE,KAAa,MACxD,cAAQ,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,gBAAgB,GAAG,UAAU,GAAG,EAAE,GAAI,CACpI,CAAC,CACE,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsToggle"],"sources":["./src/components/controls/verdocs-toggle/verdocs-toggle.scss?tag=verdocs-toggle","./src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle {\n  font-family: $primary-font;\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    background-color: $container-bg;\n  }\n\n  .label {\n    font-size: 24px;\n    font-weight: 700;\n    color: $medium-bg;\n    align-self: center;\n    margin-right: 27px;\n    font-family: sans-serif;\n  }\n\n  .buttons {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n  }\n\n  .buttons button {\n    width: 60px;\n    height: 60px;\n    border: 2px solid $item-border-color;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n\n  .buttons button:not(:last-child) {\n    margin-right: 11px;\n  }\n\n  .buttons svg {\n    width: 30px;\n    height: 30px;\n  }\n\n  .buttons button:hover {\n    background-color: $item-border-color;\n    transition: 0.25s;\n  }\n\n  .buttons button:hover svg {\n    fill: $container-bg;\n    transition: 0.25s;\n  }\n\n  .selected {\n    background-color: $border-color;\n    transition: 0.25s;\n  }\n\n  .selected svg {\n    fill: #ffffff;\n    transition: 0.25s;\n  }\n}\n","import {Component, Prop, h, Listen} from '@stencil/core';\n\nexport interface IButtons {\n  id: string;\n  icon: string;\n}\n\nexport interface IToggleIconButtons {\n  label: string;\n  defaultSelection: number;\n  buttons: IButtons[];\n}\n\n/**\n * Displays a label and a set of buttons, also allowing a default selection of a button\n *\n * ```typescript\n *\n * ```\n */\n@Component({\n  tag: 'verdocs-toggle',\n  styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n  /**\n   * The tags to display\n   */\n  @Prop() options: IToggleIconButtons;\n\n  /**\n   * The \"theme\" to be used\n   */\n  @Prop() theme: 'light' | 'dark';\n\n  @Listen('click', {\n    target: 'document',\n    capture: true,\n    passive: false,\n  })\n  handleClick(event) {\n    event.preventDefault();\n    let container = event.target;\n    if (container.matches('toggle-icon-buttons')) {\n      container = event.target.shadowRoot;\n      const element = container.activeElement;\n      const siblings = Array.from(element.parentElement.children).filter(child => {\n        return child !== element;\n      });\n      siblings.map((sibling: any) => {\n        return sibling.classList.remove('selected');\n      });\n      if (!element.classList.contains('selected')) {\n        element.classList.add('selected');\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <span class=\"label\">{`${this.options.label}:`}</span>\n        <div class=\"buttons\">\n          {this.options.buttons.map((button: IButtons, index: number) => (\n            <button id={button.id} key={button.id} innerHTML={button.icon} class={index === this.options.defaultSelection ? 'selected' : ''} />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-upload-dialog.js

@@ -4,3 +4,5 @@ const VerdocsUploadDialog = VerdocsUploadDialog$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsUploadDialog, defineCustomElement };
+
+//# sourceMappingURL=verdocs-upload-dialog.js.map

package/dist/components/verdocs-upload-dialog.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-upload-dialog.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/verdocs-upload-dialog2.js

@@ -142,3 +142,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { VerdocsUploadDialog as V, defineCustomElement as d };
+
+//# sourceMappingURL=verdocs-upload-dialog2.js.map

package/dist/components/verdocs-upload-dialog2.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-upload-dialog2.js","mappings":";;;AAAA;AACA;AACA;AACA;AACO,IAAI,aAAa,GAAG,UAAU,IAAI,EAAE;AAC3C,IAAI,OAAO,IAAI,OAAO,CAAC,UAAU,OAAO,EAAE,MAAM,EAAE;AAClD,QAAQ,IAAI,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;AACtC,QAAQ,MAAM,CAAC,MAAM,GAAG,YAAY;AACpC,YAAY,OAAO,OAAO,CAAC;AAC3B,gBAAgB,YAAY,EAAE,IAAI,CAAC,YAAY;AAC/C,gBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI;AAC/B,gBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI;AAC/B,gBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI;AAC/B,gBAAgB,IAAI,EAAE,MAAM,CAAC,MAAM;AACnC,aAAa,CAAC,CAAC;AACf,SAAS,CAAC;AACV,QAAQ,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC;AAChC,QAAQ,IAAI,IAAI,EAAE;AAClB,YAAY,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,SAAS;AACT,aAAa;AACb,YAAY,MAAM,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;AAC9C,SAAS;AACT,KAAK,CAAC,CAAC;AACP,CAAC;;;;;;;;;;;;ACxBD,MAAM,sBAAsB,GAAG,o9EAAo9E;;MCct+E,mBAAmB;EAJhC;;;;;;;;IAUU,SAAI,GAAY,KAAK,CAAC;IAYrB,iBAAY,GAAG,KAAK,CAAC;IAErB,iBAAY,GAAG,EAAoB,CAAC;GA+G9C;EA7GC,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;EAED,UAAU;IACR,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAClC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;EAED,cAAc,CAAC,CAAC;IACd,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;GAC1B;EAED,eAAe,CAAC,CAAC;IACf,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC3B;EAED,MAAM,UAAU,CAAC,CAAC;IAChB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;;IAG1B,IAAI,YAAY,GAAG,EAAY,CAAC;IAChC,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE;MACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACpD,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;UAC3C,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;UACjD,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;OACF;KACF;SAAM;MACL,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC;KACrC;IAED,IAAI,CAAC,YAAY,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC;GACxE;EAED,sBAAsB,CAAC,KAAa;IAClC,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;IACxC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC1B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;GAC9B;EAED,gBAAgB;;IACd,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;GACzB;EAED,MAAM,gBAAgB,CAAC,CAAC;;IACtB,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IAC7B,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC,CAAC;IAC5C,IAAI,YAAY,GAAG,EAAY,CAAC;IAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAG,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC,MAAM,CAAA,EAAE,CAAC,EAAE,EAAE;MACrD,YAAY,CAAC,IAAI,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;KAC7C;IACD,IAAI,CAAC,YAAY,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC;GACxE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EAAC,IAClD,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,wBAAwB,EAE3C,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAC3B,WACE,KAAK,EAAE,EAAC,aAAa,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,YAAY,EAAC,EAChE,UAAU,EAAE,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EACvC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EACzC,MAAM,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAE/B,4CAAmC,EACnC,sBAAa,EAEb,sBAAgB,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAAI,EACnF,aAAO,IAAI,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EAAE,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CAC1I,KAEN,WAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACjC,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,GAAI,EAC1C,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,WAAK,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,GAAI,CAC3F,CACP,CAAC,CACE,CACP,EAED,WAAK,KAAK,EAAC,SAAS,IAClB,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,EACvF,sBAAgB,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAI,CACrG,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./node_modules/@verdocs/js-sdk/Utils/Files.js","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["/**\n * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that\n * includes the MIME type of the file, e.g. \"data:image/jpeg;base64,iVBORw0K......\"\n */\nexport var fileToDataUrl = function (file) {\n    return new Promise(function (resolve, reject) {\n        var reader = new FileReader();\n        reader.onload = function () {\n            return resolve({\n                lastModified: file.lastModified,\n                size: file.size,\n                type: file.type,\n                name: file.name,\n                data: reader.result,\n            });\n        };\n        reader.onerror = reject;\n        if (file) {\n            reader.readAsDataURL(file);\n        }\n        else {\n            reject(new Error('Invalid file'));\n        }\n    });\n};\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\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  .drop-target {\n    padding: 30px 15px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: #f5f5f5;\n    border: 2px dashed #979797;\n    min-height: 260px;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    color: rgba(0, 0, 0, 0.54);\n    opacity: 1;\n    margin: 20px 0;\n\n    p {\n      margin: 12px 0;\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        display: flex;\n        padding: 0 8px;\n        font-size: 14px;\n        font-weight: 400;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\nimport Paperclip from './paperclip.svg';\nimport Trash from './trash.svg';\n\n/**\n * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit(this.decodedFiles);\n    this.open = false;\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange(e) {\n    console.log('fileChange', e);\n    console.log('files', this.fileInput?.files);\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onPress={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={e => this.handleFileChange(e)} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={Paperclip} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={Trash} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-view.js

@@ -4,3 +4,5 @@ const VerdocsView = VerdocsView$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsView, defineCustomElement };
+
+//# sourceMappingURL=verdocs-view.js.map

package/dist/components/verdocs-view.js.map

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