@verdocs/web-sdk 1.4.0 → 1.4.7

package/dist/cjs/verdocs-button_2.cjs.entry.js

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-589f3be8.js');
+
+const verdocsButtonCss = "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 .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .label{padding:0 12px}verdocs-button button:disabled{cursor:none}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 .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 .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 .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 .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;cursor:none}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;cursor:none;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
+
+const VerdocsButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.press = index.createEvent(this, "press", 7);
+    /**
+     * 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;
+  }
+  handleClick(e) {
+    e.preventDefault();
+    this.press.emit();
+  }
+  render() {
+    return (index.h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e), class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? index.h("span", { class: "icon start", innerHTML: this.startIcon }) : null, index.h("span", { class: "label" }, this.label), this.endIcon ? index.h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+  }
+};
+VerdocsButton.style = verdocsButtonCss;
+
+const verdocsTextInputCss = "verdocs-text-input{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:20px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-label{display:block;color:#33354c;font-weight:400;font-size:14px;margin:0 0 4px 0}";
+
+const VerdocsTextInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldInput = index.createEvent(this, "fieldInput", 7);
+    this.fieldFocus = index.createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = index.createEvent(this, "fieldBlur", 7);
+    /**
+     * The value for the input field.
+     */
+    this.value = '';
+    /**
+     * The label for the field.
+     */
+    this.label = '';
+    /**
+     * The placeholder for the field.
+     */
+    this.placeholder = '';
+    /**
+     * If desired, the autocomplete attribute to set.
+     */
+    this.autocomplete = '';
+    /**
+     * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types
+     * (e.g. a date picker) will be supported by other controls in the future.
+     */
+    this.type = 'text';
+    /**
+     * Should the field be disabled?
+     */
+    this.disabled = false;
+    this._value = '';
+  }
+  componentWillLoad() {
+    this._value = this.value;
+  }
+  componentDidLoad() { }
+  handleInput(event) {
+    this._value = event.target.value;
+    this.fieldInput.emit(this._value);
+  }
+  handleFocus(event) {
+    this.fieldFocus.emit(event);
+  }
+  handleBlur(event) {
+    this.fieldBlur.emit(event);
+  }
+  render() {
+    return (index.h(index.Host, { class: "input-field" }, index.h("label", null, this.label ? index.h("div", { class: "input-label" }, this.label + ':') : index.h("div", null), index.h("input", { type: this.type, placeholder: this.placeholder, autoComplete: this.autocomplete, disabled: this.disabled, value: this._value, class: "input-element", onInput: event => this.handleInput(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleBlur(event) }))));
+  }
+};
+VerdocsTextInput.style = verdocsTextInputCss;
+
+exports.verdocs_button = VerdocsButton;
+exports.verdocs_text_input = VerdocsTextInput;