@verdocs/web-sdk 6.3.1 → 6.5.0-beta.1

package/dist/components/p-BLnFOrAj.js

@@ -1,66 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-CUAGH_8P.js';
-
-const verdocsButtonCss = "@-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-button button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button:disabled{cursor:inherit;pointer-events:none}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .button-label{padding:0 12px}verdocs-button button.xsmall{height:26px;font-size:12px}verdocs-button button.xsmall .icon{margin:0 3px}verdocs-button button.xsmall .icon svg{margin:2px 0 0 0;height:18px}verdocs-button button.xsmall .button-label{padding:0 4px}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .button-label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .button-label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .button-label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .button-label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
-
-const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class VerdocsButton extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * If desired, a prefix icon for the button.
-         */
-        this.startIcon = null;
-        /**
-         * If desired, a suffix icon for the button.
-         */
-        this.endIcon = null;
-        /**
-         * The size (height) of the button.
-         */
-        this.size = 'normal';
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        /**
-         * The display variant of the button.
-         */
-        this.variant = 'standard';
-        /**
-         * Whether the button should be disabled.
-         */
-        this.disabled = false;
-    }
-    render() {
-        return (h("button", { key: 'a9fda6c84686607ca0490df06a75818c3f884e75', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'cec4cceb49668cc2c38bcd9cda08b5611e8962fd', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
-    }
-    static get style() { return verdocsButtonCss; }
-}, [256, "verdocs-button", {
-        "label": [1],
-        "startIcon": [1, "start-icon"],
-        "endIcon": [1, "end-icon"],
-        "size": [1],
-        "type": [1],
-        "variant": [1],
-        "disabled": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["verdocs-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "verdocs-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, VerdocsButton);
-            }
-            break;
-    } });
-}
-
-export { VerdocsButton as V, defineCustomElement as d };
-//# sourceMappingURL=p-BLnFOrAj.js.map
-
-//# sourceMappingURL=p-BLnFOrAj.js.map

package/dist/components/p-BLnFOrAj.js.map

@@ -1 +0,0 @@
-{"file":"p-BLnFOrAj.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,4kGAA4kG;;MCaxlG,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAJ1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAUE;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAkB,IAAI;AAEvC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkB,IAAI;AAErC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuD,QAAQ;AAE3E;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAEtD;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAoC,UAAU;AAE7D;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAWlC;IATC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EACjG,IAAI,CAAC,SAAS,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC7C,IAAI,CAAC,OAAO,GAAG,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAI,CAAA,GAAG,IAAI,CAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","src/components/controls/verdocs-button/verdocs-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n  button {\n    font-family: $verdocs-primary-font;\n    text-transform: uppercase;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 700;\n    cursor: pointer;\n    margin: 0;\n\n    &:disabled {\n      cursor: inherit;\n      pointer-events: none;\n    }\n\n    .icon {\n      margin: 0 12px;\n\n      svg {\n        fill: $verdocs-grey-4;\n        display: block;\n      }\n    }\n\n    .button-label {\n      padding: 0 12px;\n    }\n\n    // Small-sized button size adjustments\n    &.xsmall {\n      height: 26px;\n      font-size: 12px;\n\n      .icon {\n        margin: 0 3px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 18px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Small-sized button size adjustments\n    &.small {\n      height: 34px;\n      font-size: 13px;\n\n      .icon {\n        margin: 0 4px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 20px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Normal-sized button size adjustments\n    &.normal {\n      height: 44px;\n      font-size: 14px;\n\n      .icon.start {\n        margin: 0 4px 0 8px;\n      }\n\n      .icon.end {\n        margin: 0 8px 0 4px;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 22px;\n        }\n      }\n\n      .button-label {\n        padding: 0 10px;\n      }\n    }\n\n    // Medium-sized button size adjustments\n    &.medium {\n      height: 52px;\n      font-size: 16px;\n\n      .icon.start {\n        margin: 0 0 0 18px;\n      }\n\n      .icon.end {\n        margin: 0 18px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 26px;\n        }\n      }\n\n      .button-label {\n        padding: 0 20px;\n      }\n    }\n\n    // Large-sized button size adjustments\n    &.large {\n      height: 60px;\n      font-size: 20px;\n\n      .icon.start {\n        margin: 0 0 0 24px;\n      }\n\n      .icon.end {\n        margin: 0 24px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 32px;\n        }\n      }\n\n      .button-label {\n        padding: 0 34px;\n      }\n    }\n\n    // Standard variant is a solid color\n    &.standard {\n      background: $verdocs-green;\n      border-radius: 4px;\n      outline: none;\n      border: none;\n      color: white;\n\n      &:disabled {\n        background-color: $disabled-color;\n        cursor: default;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(110%);\n      }\n    }\n\n    // Text variant is just a label\n    &.text {\n      color: $secondary-color;\n      background: transparent;\n      font-weight: 500;\n      padding: 0 4px;\n      outline: none;\n      border: none;\n\n      &:disabled {\n        color: $disabled-color;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(130%);\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n\n    // Standard variant is a solid color\n    &.outline {\n      border: 1px solid $secondary-color;\n      color: $secondary-color;\n      outline: none;\n      background: transparent;\n      border-radius: 4px;\n      padding: 0 20px;\n\n      &:disabled {\n        color: $disabled-color;\n        border: 1px solid $disabled-color;\n      }\n\n      &:active {\n        background: $secondary-color;\n        color: white;\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n  }\n}\n","import {Component, Prop, h} from '@stencil/core';\n\n/**\n * A simple button, with consistent styling to other controls in the design system.\n *\n * ```ts\n * <verdocs-button label=\"Click Me\" size=\"normal\" variant=\"standard\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-button',\n  styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n  /**\n   * The label for the button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If desired, a prefix icon for the button.\n   */\n  @Prop() startIcon: string | null = null;\n\n  /**\n   * If desired, a suffix icon for the button.\n   */\n  @Prop() endIcon: string | null = null;\n\n  /**\n   * The size (height) of the button.\n   */\n  @Prop() size: 'xsmall' | 'small' | 'normal' | 'medium' | 'large' = 'normal';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The display variant of the button.\n   */\n  @Prop() variant: 'standard' | 'text' | 'outline' = 'standard';\n\n  /**\n   * Whether the button should be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button disabled={this.disabled} type={this.type} class={`${this.variant} ${this.size} ${this.type}`}>\n        {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n        <span class=\"button-label\">{this.label}</span>\n        {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CWGZlA4l.js.map

@@ -1 +0,0 @@
-{"file":"p-CWGZlA4l.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,o7CAAo7C;;ACEr9C,MAAM,YAAY,GAAG,CAAA,8oBAAA,CAAgpB;MAWxpB,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AAJlC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAKyB,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAYnC,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AA+CxB;IA7CC,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC;;IAG3C,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIlB,IAAA,aAAa,CAAC,CAAM,EAAA;AAClB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;QAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;YAC/C,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;IAIpB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,MAAM,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAA,EAChD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,YAAY,EAAI,CAAA,EAE7C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAAA,2BAAA,CAAgC,CAC9C,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAC,wBAAwB,EAAC,OAAO,EAAE,CAAC,CAAM,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1H,EAAA,IAAI,CAAC,QAAQ,CACL,CACP,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAEhD,EAAA,QAAA,CAAA,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAA,EAAA,IAAA,CAE1C,CACL,CACF,CACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-question-dialog/verdocs-question-dialog.scss?tag=verdocs-question-dialog","src/components/dialogs/verdocs-question-dialog/verdocs-question-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-question-dialog {\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  &.closed {\n    display: none;\n  }\n\n  textarea {\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: 14px;\n    padding: 9px;\n    outline: none;\n  }\n\n  .heading .title {\n    font-size: 18px;\n  }\n\n  .buttons {\n    gap: 20px;\n    display: flex;\n    margin-top: 24px;\n    flex-direction: row;\n    justify-content: center;\n\n    button {\n      flex: 1;\n      border: 0;\n      height: 38px;\n      display: flex;\n      color: #ffffff;\n      font-size: 14px;\n      cursor: pointer;\n      border-radius: 6px;\n      align-items: center;\n      justify-content: center;\n\n      &.cancel {\n        background-color: $verdocs-button-purple;\n      }\n\n      &.ok {\n        background-color: $verdocs-button-green;\n\n        &.single {\n          max-width: 150px;\n        }\n      }\n\n      &:disabled {\n        background-color: $verdocs-button-disabled;\n      }\n    }\n  }\n}\n","import {Component, h, Event, EventEmitter, State, Prop} from '@stencil/core';\n\nconst QuestionIcon = `<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.4809 13.8423H15.4C16.2962 13.8423 17 13.1288 17 12.2764V5.56582C17 4.71348 16.2962 4 15.4 4H4.6C3.70383 4 3 4.71348 3 5.56582V12.2764C3 13.1288 3.70383 13.8423 4.6 13.8423H6.19908L6.2 17L6.20346 16.9997L6.20502 16.9988L10.4809 13.8423ZM6.79895 17.8034C6.35668 18.1298 5.73 18.0406 5.39921 17.6042C5.26989 17.4335 5.2 17.2262 5.2 17.0133L5.19937 14.8423H4.6C3.16406 14.8423 2 13.6935 2 12.2764V5.56582C2 4.14876 3.16406 3 4.6 3H15.4C16.8359 3 18 4.14876 18 5.56582V12.2764C18 13.6935 16.8359 14.8423 15.4 14.8423H10.81L6.79895 17.8034Z\" fill=\"#ffffff\"/></svg>`;\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-question-dialog',\n  styleUrl: 'verdocs-question-dialog.scss',\n})\nexport class VerdocsQuestionDialog {\n  @Prop({mutable: true}) question: string = '';\n\n  /**\n   * Event fired when the user clicks the OK button.\n   */\n  @Event({composed: true}) next: EventEmitter<{question: string}>;\n\n  /**\n   * Event fired when Cancel is pressed. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() closed = false;\n\n  handleOk() {\n    this.next.emit({question: this.question});\n  }\n\n  handleCancel() {\n    this.exit.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    this.closed = true;\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.exit.emit();\n    }\n  }\n\n  render() {\n    return (\n      <verdocs-dialog onExit={e => this.handleDismiss(e)}>\n        <div slot=\"heading\" class=\"heading\">\n          <div class=\"icon\" innerHTML={QuestionIcon} />\n\n          <div class=\"title\">Ask the Sender a Question</div>\n        </div>\n\n        <div slot=\"content\" class=\"content\">\n          <textarea name=\"question\" rows={6} placeholder=\"Enter your question...\" onInput={(e: any) => (this.question = e.target.value)}>\n            {this.question}\n          </textarea>\n        </div>\n\n        <div class=\"footer\" slot=\"footer\">\n          <div class=\"buttons\">\n            <button class=\"cancel\" onClick={() => this.handleCancel()}>\n              Cancel\n            </button>\n            <button class={'ok'} onClick={() => this.handleOk()}>\n              OK\n            </button>\n          </div>\n        </div>\n      </verdocs-dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DaISePSz.js.map

@@ -1 +0,0 @@
-{"file":"p-DaISePSz.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,4xEAA4xE;;MCSxyE,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AAQxB,IAAA,aAAa,CAAC,CAAM,EAAA;;QAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;YAC/C,CAAC,CAAC,cAAc,EAAE;YAClB,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;;;IAKrB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAA,EACjE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAAA,OAAA,CAAY,CAC3B,EAEP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAc,CAC7B,EAEP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EAAA,QAAA,CAAa,CAC3B,CACH,CACF,CACD;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-dialog/verdocs-dialog.scss?tag=verdocs-dialog","src/components/dialogs/verdocs-dialog/verdocs-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dialog {\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    z-index: 10000;\n    position: absolute;\n    align-items: center;\n    background: #0000007f;\n    justify-content: center;\n  }\n\n  .dialog {\n    width: 420px;\n    display: flex;\n    max-width: 100%;\n    overflow: hidden;\n    border-radius: 8px;\n    background: #ffffff;\n    flex-direction: column;\n    border: 1px solid #aeb4bf;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    gap: 12px;\n    padding: 20px;\n    display: flex;\n    font-size: 16px;\n    font-weight: 500;\n    flex-direction: row;\n    color: $verdocs-grey-4;\n    border-bottom: 1.5px solid #e5e7eb;\n\n    .icon {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      flex-shrink: 0;\n      border-radius: 8px;\n      align-items: center;\n      justify-content: center;\n      background: $verdocs-purple;\n    }\n\n    .title {\n      flex: 1;\n      height: 40px;\n      display: flex;\n      font-size: 20px;\n      font-weight: 500;\n      align-items: center;\n      color: $verdocs-grey-0;\n    }\n  }\n\n  .content {\n    padding: 20px 20px 0 20px;\n    font-size: 16px;\n    line-height: 26px;\n    color: $verdocs-dialog-content;\n\n    p {\n      margin: 0 0 1em 0;\n    }\n\n    ul {\n      margin: 0 0 1em 0;\n      padding: 0 0 0 20px;\n\n      li {\n        font-size: 14px;\n        line-height: 20px;\n        margin: 0 0 12px 0;\n        padding: 0 0 0 8px;\n      }\n\n      li::marker {\n        font-size: 18px;\n        color: $verdocs-purple;\n      }\n    }\n\n    ol {\n      margin: 0 0 1em 0;\n      padding: 0 0 0 20px;\n\n      li {\n        font-size: 14px;\n        line-height: 20px;\n        margin: 0 0 12px 0;\n        padding: 0 0 0 8px;\n      }\n\n      li::marker {\n        font-weight: 500;\n        color: $verdocs-purple;\n      }\n    }\n  }\n\n  .footer {\n    padding: 0 20px 20px 20px;\n  }\n}\n","import {Component, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/**\n * Display a simple dialog where the contents are provided via slots.\n */\n@Component({\n  tag: 'verdocs-dialog',\n  styleUrl: 'verdocs-dialog.scss',\n})\nexport class VerdocsDialog {\n  /**\n   * Event fired when the dialog is dismissed by clicking the background overlay.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  // We need a separate event handler for clicking the background because it can\n  // receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.exit?.emit();\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <slot name=\"heading\">\n              <div class=\"heading\">Title</div>\n            </slot>\n\n            <slot name=\"content\">\n              <div class=\"content\">Content</div>\n            </slot>\n\n            <slot name=\"footer\">\n              <div class=\"footer\">Footer</div>\n            </slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}