@verdocs/web-sdk 1.9.6 → 1.9.10

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

@@ -1 +1 @@
-{"file":"verdocs-kba-dialog.js","mappings":";;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,kkEAAkkE;;MCYjlEA,kBAAgB;;;;;;gBAIJ,CAAC;iBAKA,CAAC;qBAKG,eAAe;oBAKhB,gFAAgF;gBAKzE,QAAQ;iBAKlB,KAAK;uBAKC,mBAAmB;mBAKrB,CAAC,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,gBAAgB,CAAC;gBAKtG,KAAK;oBAYT,EAAE;;EAEtB,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,QAAQ,CAAC,CAAC;IAC9B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;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,6BAEjB,IAAI,CAAC,KAAK,GAAG,CAAC,IACb,YAAM,KAAK,EAAC,MAAM,SACd,IAAI,CAAC,IAAI,OAAG,IAAI,CAAC,KAAK,MACnB,KAEP,EAAC,QAAQ,OAAG,CACb,CACG,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,QAAQ,GAAI,EAC9C,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAO,EAC9C,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAO,CACxC,CACF,EAEL,IAAI,CAAC,IAAI,KAAK,QAAQ,IACrB,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,WACE,KAAK,EAAE,UAAU,MAAM,KAAK,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC7D,OAAO,EAAE;QACP,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;OACxB,IAEA,MAAM,CACH,CACP,CAAC,CACE,KAEN,WAAK,KAAK,EAAC,OAAO,IAChB,aAAO,OAAO,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAS,EACvD,aAAO,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,mBAAmB,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAI,CAChG,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,CAAC,IAAI,CAAC,QAAQ,GAAI,CACvF,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsKbaDialog"],"sources":["./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.scss?tag=verdocs-kba-dialog","./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-kba-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: 440px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #fff;\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  .step {\n    margin-left: 6px;\n    color: #666;\n  }\n\n  .help-box {\n    background-color: $border-color;\n    display: flex;\n    flex-direction: row;\n    margin: 14px 0;\n    padding: 14px;\n    align-items: center;\n    color: white;\n  }\n\n  .help-details {\n    display: flex;\n    flex-direction: column;\n    margin-left: 15px;\n    font-size: 14px;\n  }\n\n  .help-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .help-title {\n    font-weight: 600;\n    margin-bottom: 4px;\n  }\n\n  .help-text {\n    font-weight: 400;\n  }\n\n  .choices {\n    display: grid;\n    gap: 15px;\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n    margin: 0 0 15px 0;\n  }\n\n  .choice {\n    border: 1px solid $border-color;\n    border-radius: 5px;\n    display: flex;\n    height: 60px;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    color: $choice-available-color;\n    cursor: pointer;\n\n    &.selected {\n      background-color: $border-color;\n      color: $verdocs-grey-4;\n    }\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","import {Component, Prop, h, Event, EventEmitter, Fragment, Host, State} from '@stencil/core';\nimport Question from './question.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-kba-dialog',\n  styleUrl: 'verdocs-kba-dialog.scss',\n})\nexport class VerdocsKbaDialog {\n  /**\n   * Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).\n   */\n  @Prop() steps: number = 3;\n\n  /**\n   * If set, a help/instructions box will be displayed with this title\n   */\n  @Prop() helptitle: string = 'One Time Code';\n\n  /**\n   * If set, a help/instructions box will be displayed with this text\n   */\n  @Prop() helptext: string = 'Please check your text messages for a security code, and enter the code below.';\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() mode: 'text' | 'choice' = 'choice';\n\n  /**\n   * For text input challenges, the label to display next to the input field.\n   */\n  @Prop() label: string = 'PIN';\n\n  /**\n   * For text input challenges, the placeholder to display inside the input field.\n   */\n  @Prop() placeholder: string = 'Enter your PIN...';\n\n  /**\n   * For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.\n   */\n  @Prop() choices: string[] = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];\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<string>;\n\n  @State() response = '';\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.response);\n    this.open = false;\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\">\n              Confirm Your Identity\n              {this.steps > 1 ? (\n                <span class=\"step\">\n                  ({this.step}/{this.steps})\n                </span>\n              ) : (\n                <Fragment />\n              )}\n            </div>\n\n            <div class=\"help-box\">\n              <div class=\"help-icon\" innerHTML={Question} />\n              <div class=\"help-details\">\n                <div class=\"help-title\">{this.helptitle}</div>\n                <div class=\"help-text\">{this.helptext}</div>\n              </div>\n            </div>\n\n            {this.mode === 'choice' ? (\n              <div class=\"choices\">\n                {this.choices.map(choice => (\n                  <div\n                    class={`choice ${choice === this.response ? 'selected' : ''}`}\n                    onClick={() => {\n                      this.response = choice;\n                    }}\n                  >\n                    {choice}\n                  </div>\n                ))}\n              </div>\n            ) : (\n              <div class=\"input\">\n                <label htmlFor=\"verdocs-kba-input\">{this.label}</label>\n                <input type=\"text\" id=\"verdocs-kba-input\" name=\"verdocs-kba-input\" placeholder={this.placeholder} />\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.response} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-kba-dialog.js","mappings":";;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,kkEAAkkE;;MCYjlEA,kBAAgB;;;;;;gBAIJ,CAAC;iBAKA,CAAC;qBAKG,eAAe;oBAKhB,gFAAgF;gBAKzE,QAAQ;iBAKlB,KAAK;uBAKC,mBAAmB;mBAKrB,CAAC,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,gBAAgB,CAAC;oBAY1G,EAAE;;EAEtB,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;EAED,UAAU;IACR,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC/B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,6BAEjB,IAAI,CAAC,KAAK,GAAG,CAAC,IACb,YAAM,KAAK,EAAC,MAAM,SACd,IAAI,CAAC,IAAI,OAAG,IAAI,CAAC,KAAK,MACnB,KAEP,EAAC,QAAQ,OAAG,CACb,CACG,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,QAAQ,GAAI,EAC9C,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAO,EAC9C,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAO,CACxC,CACF,EAEL,IAAI,CAAC,IAAI,KAAK,QAAQ,IACrB,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,WACE,KAAK,EAAE,UAAU,MAAM,KAAK,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC7D,OAAO,EAAE;QACP,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;OACxB,IAEA,MAAM,CACH,CACP,CAAC,CACE,KAEN,WAAK,KAAK,EAAC,OAAO,IAChB,aAAO,OAAO,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAS,EACvD,aAAO,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,mBAAmB,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAI,CAChG,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,CAAC,IAAI,CAAC,QAAQ,GAAI,CACvF,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsKbaDialog"],"sources":["./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.scss?tag=verdocs-kba-dialog","./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-kba-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: 440px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #fff;\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  .step {\n    margin-left: 6px;\n    color: #666;\n  }\n\n  .help-box {\n    background-color: $border-color;\n    display: flex;\n    flex-direction: row;\n    margin: 14px 0;\n    padding: 14px;\n    align-items: center;\n    color: white;\n  }\n\n  .help-details {\n    display: flex;\n    flex-direction: column;\n    margin-left: 15px;\n    font-size: 14px;\n  }\n\n  .help-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .help-title {\n    font-weight: 600;\n    margin-bottom: 4px;\n  }\n\n  .help-text {\n    font-weight: 400;\n  }\n\n  .choices {\n    display: grid;\n    gap: 15px;\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n    margin: 0 0 15px 0;\n  }\n\n  .choice {\n    border: 1px solid $border-color;\n    border-radius: 5px;\n    display: flex;\n    height: 60px;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    color: $choice-available-color;\n    cursor: pointer;\n\n    &.selected {\n      background-color: $border-color;\n      color: $verdocs-grey-4;\n    }\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","import {Component, Prop, h, Event, EventEmitter, Fragment, Host, State} from '@stencil/core';\nimport Question from './question.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-kba-dialog',\n  styleUrl: 'verdocs-kba-dialog.scss',\n})\nexport class VerdocsKbaDialog {\n  /**\n   * Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).\n   */\n  @Prop() steps: number = 3;\n\n  /**\n   * If set, a help/instructions box will be displayed with this title\n   */\n  @Prop() helptitle: string = 'One Time Code';\n\n  /**\n   * If set, a help/instructions box will be displayed with this text\n   */\n  @Prop() helptext: string = 'Please check your text messages for a security code, and enter the code below.';\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() mode: 'text' | 'choice' = 'choice';\n\n  /**\n   * For text input challenges, the label to display next to the input field.\n   */\n  @Prop() label: string = 'PIN';\n\n  /**\n   * For text input challenges, the placeholder to display inside the input field.\n   */\n  @Prop() placeholder: string = 'Enter your PIN...';\n\n  /**\n   * For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.\n   */\n  @Prop() choices: string[] = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];\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 value selected.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  @State() response = '';\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.response);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">\n              Confirm Your Identity\n              {this.steps > 1 ? (\n                <span class=\"step\">\n                  ({this.step}/{this.steps})\n                </span>\n              ) : (\n                <Fragment />\n              )}\n            </div>\n\n            <div class=\"help-box\">\n              <div class=\"help-icon\" innerHTML={Question} />\n              <div class=\"help-details\">\n                <div class=\"help-title\">{this.helptitle}</div>\n                <div class=\"help-text\">{this.helptext}</div>\n              </div>\n            </div>\n\n            {this.mode === 'choice' ? (\n              <div class=\"choices\">\n                {this.choices.map(choice => (\n                  <div\n                    class={`choice ${choice === this.response ? 'selected' : ''}`}\n                    onClick={() => {\n                      this.response = choice;\n                    }}\n                  >\n                    {choice}\n                  </div>\n                ))}\n              </div>\n            ) : (\n              <div class=\"input\">\n                <label htmlFor=\"verdocs-kba-input\">{this.label}</label>\n                <input type=\"text\" id=\"verdocs-kba-input\" name=\"verdocs-kba-input\" placeholder={this.placeholder} />\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={!this.response} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -7,32 +7,33 @@ const VerdocsOkDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    this.closed = createEvent(this, "closed", 7);
+    this.next = createEvent(this, "next", 7);
+    this.cancel = createEvent(this, "cancel", 7);
     this.heading = '';
     this.message = '';
-    this.open = false;
-    this.cancel = false;
+    this.showCancel = false;
   }
-  handleClose(reason) {
-    this.closed.emit(reason);
-    this.open = false;
+  handleOk() {
+    this.next.emit();
+  }
+  handleCancel() {
+    this.cancel.emit();
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
     if (e.target.className === 'background-overlay') {
       e.preventDefault();
-      this.handleClose('cancel');
+      this.cancel.emit();
     }
   }
   render() {
-    return (h(Host, { style: { display: this.open ? 'block' : 'none' } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, this.heading), h("div", { class: "content" }, this.message, h("div", { class: "buttons" }, this.cancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onPress: () => this.handleClose('cancel') }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { label: "OK", onPress: () => this.handleClose('ok') })))))));
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, this.heading), h("div", { class: "content" }, this.message, h("div", { class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { label: "OK", onClick: () => this.handleOk() })))))));
   }
   static get style() { return verdocsOkDialogCss; }
 }, [0, "verdocs-ok-dialog", {
     "heading": [1],
     "message": [1],
-    "open": [4],
-    "cancel": [4]
+    "showCancel": [4, "show-cancel"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

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