'use strict';

var index = require('./index-B2lA-USD.js');
var popper = require('./popper-Dmp8OTYh.js');
var Toast = require('./Toast-CFBM1R4z.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * 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 (index.h("button", { key: 'a9fda6c84686607ca0490df06a75818c3f884e75', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? index.h("span", { class: "icon start", innerHTML: this.startIcon }) : null, index.h("span", { key: 'cec4cceb49668cc2c38bcd9cda08b5611e8962fd', class: "button-label" }, this.label), this.endIcon ? index.h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
    }
};
VerdocsButton.style = verdocsButtonCss;

const verdocsHelpIconCss = "@-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-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:500;position:absolute;padding:5px 10px;font-size:12px;border-radius:4px;z-index:10005}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";

const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
const VerdocsHelpIcon = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * Help text to display on hover/focus
         */
        this.text = '';
        /**
         * Optional icon to display. If not supplied, a standard help icon will be shown.
         */
        this.icon = helpIcon;
        this.containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;
    }
    componentDidLoad() {
        this.popperInstance = popper.createPopper(this.iconEl, this.tooltipEl, {
        // placement: 'top-end',
        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
        });
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
    }
    show() {
        var _a, _b;
        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
    }
    hide() {
        var _a;
        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
    }
    render() {
        return (index.h(index.Host, { key: '0b905cfd95b07050b34bf1587736871a66637210', class: {} }, index.h("div", { key: '92a0c44d55c69d683c72b90ec8c309becde3a139', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), index.h("div", { key: 'f4de7382924d142eb17c4182ae62664840899b98', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, index.h("span", { key: 'a234a362f265a9cf1bb5e80f2b2153bc0330bb84', innerHTML: this.text }), index.h("div", { key: 'cdb2986f346829a29dca06a63ae6c27b47361e9e', "data-popper-arrow": "true", class: "arrow" }))));
    }
};
VerdocsHelpIcon.style = verdocsHelpIconCss;

const verdocsTextInputCss = "@-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-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 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:34px;padding:0 9px;outline:none}verdocs-text-input .input-element:disabled{cursor:not-allowed;background:#aeb4bf;border:1px solid #33364b}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-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input .toggle-pw{top:5px;right:7px;width:18px;height:18px;stroke:#cccccc;position:absolute}verdocs-text-input .toggle-pw:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";

const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>`;
const EyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`;
const EyeSlashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>`;
const VerdocsTextInput = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * The initial 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 = '';
        /**
         * If supplied, a help icon will be displayed to provide the user more information.
         */
        this.helpText = '';
        /**
         * If set, a clear button will be displayed.
         */
        this.clearable = false;
        /**
         * If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be
         * both clearable and copyable. If both properties are set to true, copyable will
         * be ignored.
         */
        this.copyable = false;
        /**
         * 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;
        /**
         * Should the field be required?
         */
        this.required = false;
        this.showingPw = false;
    }
    copyToClipboard() {
        this.inputEl.select();
        navigator.clipboard
            .writeText(this.value)
            .then(() => Toast.VerdocsToast('Copied!'))
            .catch(e => console.log('Error copying to clipboard', e));
    }
    render() {
        return (index.h(index.Host, { key: 'f22cf456e27a0199331d6ea8eeeda4856a1b71be', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, index.h("label", { key: '4c59d29f8cb68e4ed8431490792e7e8e8d3d3a69' }, this.label && (index.h("div", { key: '26409f21e216aba69e7fbaf8bc610c467381e2b8', class: "input-label" }, this.label + ':', this.required && index.h("span", { key: '9d22b7a8ea5adddb78d29e3e949beb7ff11aa2ce', class: "required" }, "*"))), index.h("div", { key: '771e0be5291a0390065f49445615c6f446013346', class: "input-container" }, index.h("input", { key: 'f956100127dd6df5f61425f3b549fc27eeafc5da', type: this.type === 'password' && this.showingPw ? 'text' : this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete,
            // onBlur={(e: any) => this.blur?.emit(e.target.value)}
            ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (index.h("span", { key: '521d5f77bb57a80a444dd82a79a29a49348f420b', innerHTML: ClearIcon, class: "clear", onClick: () => {
                // We need to allow the onInput event to fire first in case
                // the user was focused on this field before clicking clear.
                setTimeout(() => {
                    var _a;
                    this.value = '';
                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
                    // We need to allow the value to "settle"
                    setTimeout(() => {
                        var _a, _b;
                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new window.Event('focusout'));
                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
                    }, 50);
                }, 50);
            } })), this.type === 'password' && (index.h("span", { key: 'c670578c14e4483712d54e166a34ff90eb703cb4', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
                this.showingPw = !this.showingPw;
            } })), !this.clearable && this.copyable && this.value && index.h("span", { key: 'f6d2762ff285d49360d2f9ad2da66e551380fcd7', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && index.h("verdocs-help-icon", { key: '4a83f453e23089a49abff49aa3b5d197c3189dc3', text: this.helpText }))));
    }
    get hostEl() { return index.getElement(this); }
};
VerdocsTextInput.style = verdocsTextInputCss;

exports.verdocs_button = VerdocsButton;
exports.verdocs_help_icon = VerdocsHelpIcon;
exports.verdocs_text_input = VerdocsTextInput;
//# sourceMappingURL=verdocs-button.verdocs-help-icon.verdocs-text-input.entry.cjs.js.map

//# sourceMappingURL=verdocs-button_3.cjs.entry.js.map