npm - @verdocs/web-sdk - Versions diffs - 6.2.1 → 6.2.4 - Mend

@verdocs/web-sdk 6.2.1 → 6.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (631) hide show

package/dist/verdocs-web-sdk/verdocs-button.verdocs-help-icon.verdocs-text-input.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-button.verdocs-help-icon.verdocs-text-input.entry.esm.js","sources":["src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","src/components/controls/verdocs-button/verdocs-button.tsx","src/components/controls/verdocs-help-icon/verdocs-help-icon.scss?tag=verdocs-help-icon","src/components/controls/verdocs-help-icon/verdocs-help-icon.tsx","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-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","@import '../../../theme.scss';\n\nverdocs-help-icon {\n font-family: $verdocs-primary-font;\n display: inline-block;\n opacity: 0.3;\n position: relative;\n\n &:hover {\n opacity: 1;\n }\n\n .icon {\n display: inline-block;\n }\n\n .tooltip {\n display: none;\n min-width: 200px;\n box-shadow: 0 0 10px 1px #999999;\n background: #ffffff;\n color: $label-color;\n max-width: 240px;\n font-weight: 500;\n position: absolute;\n padding: 5px 10px;\n font-size: 12px;\n border-radius: 4px;\n z-index: 10005;\n\n .arrow,\n .arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n top: -4px;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n }\n\n &[data-show] {\n display: block;\n }\n\n &[data-popper-placement^='top'] > .arrow {\n bottom: -4px;\n }\n\n &[data-popper-placement^='bottom'] > .arrow {\n top: -4px;\n }\n\n &[data-popper-placement^='left'] > .arrow {\n right: -4px;\n }\n\n &[data-popper-placement^='right'] > .arrow {\n left: -4px;\n }\n }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n\nconst helpIcon =\n '<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>';\n\n/\n Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n \n ```ts\n * <verdocs-help-icon text=\"Sample help text\" />\n * ```\n /\n@Component({\n tag: 'verdocs-help-icon',\n styleUrl: 'verdocs-help-icon.scss',\n shadow: false,\n})\nexport class VerdocsHelpIcon {\n iconEl: HTMLDivElement;\n tooltipEl: HTMLDivElement;\n popperInstance: Instance;\n\n /\n Help text to display on hover/focus\n /\n @Prop() text: string = '';\n\n /\n Optional icon to display. If not supplied, a standard help icon will be shown.\n /\n @Prop() icon: string = helpIcon;\n\n @State() containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n componentDidLoad() {\n this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {\n // placement: 'top-end',\n // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n });\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n show() {\n this.tooltipEl?.setAttribute('data-show', '');\n this.popperInstance?.update().catch(() => {});\n }\n\n hide() {\n this.tooltipEl?.removeAttribute('data-show');\n }\n\n render() {\n return (\n <Host class={{}}>\n <div\n aria-describedby={this.containerId}\n class=\"icon\"\n innerHTML={this.icon}\n onMouseEnter={() => this.show()}\n onFocus={() => this.show()}\n onMouseLeave={() => this.hide()}\n onBlur={() => this.hide()}\n ref={el => (this.iconEl = el as HTMLDivElement)}\n />\n <div\n id={this.containerId}\n role=\"tooltip\"\n class=\"tooltip\"\n data-popper-placement=\"bottom\"\n ref={el => (this.tooltipEl = el as HTMLDivElement)}\n >\n <span innerHTML={this.text} />\n <div data-popper-arrow=\"true\" class=\"arrow\" />\n </div>\n </Host>\n );\n }\n}\n","@import '../../../theme.scss';\n\nverdocs-text-input {\n font-family: $primary-font;\n box-sizing: border-box;\n margin: 0 0 10px 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: 34px;\n padding: 0 9px;\n outline: none;\n\n &:disabled {\n cursor: not-allowed;\n background: $verdocs-grey-2;\n border: 1px solid $verdocs-grey-1;\n }\n\n &::placeholder {\n color: $light-disabled-color;\n opacity: 1;\n }\n\n &:focus {\n outline: 1px solid $border-color-highlight;\n }\n }\n\n .input-label {\n display: block;\n color: $label-color-light;\n font-weight: 700;\n font-size: 14px;\n margin: 0 0 4px 0;\n }\n\n .required {\n color: red;\n margin-left: 2px;\n display: inline-block;\n }\n\n // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n\n .input-container {\n position: relative;\n }\n\n .clear {\n top: 7px;\n right: 5px;\n width: 18px;\n height: 18px;\n fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: #720101;\n cursor: pointer;\n }\n }\n\n .copy {\n top: 7px;\n right: 5px;\n width: 18px;\n height: 18px;\n fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: $verdocs-purple;\n cursor: pointer;\n }\n }\n\n .toggle-pw {\n top: 5px;\n right: 7px;\n width: 18px;\n height: 18px;\n stroke: #cccccc;\n //fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: $verdocs-purple;\n cursor: pointer;\n }\n }\n\n &.clearable,\n &.copyable {\n .input-element {\n padding-right: 32px;\n }\n }\n}\n","import {Component, Element, Prop, Host, h, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst 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>`;\nconst 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>`;\nconst 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>`;\nconst 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>`;\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. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n \n ```ts\n * <verdocs-text-input type=\"text\" label=\"Name\" placeholder=\"Enter your name...\" value=\"\" />\n * ```\n /\n@Component({\n tag: 'verdocs-text-input',\n styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n private inputEl: HTMLInputElement;\n\n @Element()\n hostEl: HTMLElement;\n\n /\n The initial value for the input field.\n /\n @Prop({mutable: true, reflect: true}) 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 If supplied, a help icon will be displayed to provide the user more information.\n /\n @Prop() helpText: string = '';\n\n /\n If set, a clear button will be displayed.\n /\n @Prop() clearable = false;\n\n /\n If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\n * both clearable and copyable. If both properties are set to true, copyable will\n * be ignored.\n /\n @Prop() copyable = false;\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 /\n Should the field be required?\n /\n @Prop() required: boolean = false;\n\n @State() showingPw: boolean = false;\n\n copyToClipboard() {\n this.inputEl.select();\n navigator.clipboard\n .writeText(this.value)\n .then(() => VerdocsToast('Copied!'))\n .catch(e => console.log('Error copying to clipboard', e));\n }\n\n render() {\n return (\n <Host class={`input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}`}>\n <label>\n {this.label && (\n <div class=\"input-label\">\n {this.label + ':'}\n {this.required && <span class=\"required\"></span>}\n </div>\n )}\n\n <div class=\"input-container\">\n <input\n type={this.type === 'password' && this.showingPw ? 'text' : this.type}\n value={this.value}\n required={this.required}\n class=\"input-element\"\n data-lpignore=\"true\"\n disabled={this.disabled}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n // onBlur={(e: any) => this.blur?.emit(e.target.value)}\n ref={el => (this.inputEl = el as HTMLInputElement)}\n onInput={(e: any) => (this.value = e.target.value)}\n />\n\n {this.clearable && this.value && (\n <span\n innerHTML={ClearIcon}\n class=\"clear\"\n onClick={() => {\n // We need to allow the onInput event to fire first in case\n // the user was focused on this field before clicking clear.\n setTimeout(() => {\n this.value = '';\n this.inputEl?.setAttribute('value', '');\n // We need to allow the value to \"settle\"\n setTimeout(() => {\n this.inputEl?.dispatchEvent(new window.Event('focusout'));\n this.inputEl?.blur();\n }, 50);\n }, 50);\n }}\n />\n )}\n\n {this.type === 'password' && (\n <span\n innerHTML={this.showingPw ? EyeIcon : EyeSlashIcon}\n class=\"toggle-pw\"\n onClick={() => {\n this.showingPw = !this.showingPw;\n }}\n />\n )}\n\n {!this.clearable && this.copyable && this.value && <span innerHTML={CopyIcon} class=\"copy\" onClick={() => this.copyToClipboard()} />}\n </div>\n\n {this.helpText && <verdocs-help-icon text={this.helpText} />}\n </label>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"verdocs-button.verdocs-help-icon.verdocs-text-input.entry.esm.js","sources":["src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","src/components/controls/verdocs-button/verdocs-button.tsx","src/components/controls/verdocs-help-icon/verdocs-help-icon.scss?tag=verdocs-help-icon","src/components/controls/verdocs-help-icon/verdocs-help-icon.tsx","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-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","@import '../../../theme.scss';\n\nverdocs-help-icon {\n font-family: $verdocs-primary-font;\n display: inline-block;\n opacity: 0.3;\n position: relative;\n\n &:hover {\n opacity: 1;\n }\n\n .icon {\n display: inline-block;\n }\n\n .tooltip {\n display: none;\n min-width: 200px;\n box-shadow: 0 0 10px 1px #999999;\n background: #ffffff;\n color: $label-color;\n max-width: 240px;\n font-weight: 500;\n position: absolute;\n padding: 5px 10px;\n font-size: 12px;\n border-radius: 4px;\n z-index: 10005;\n\n .arrow,\n .arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n top: -4px;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n }\n\n &[data-show] {\n display: block;\n }\n\n &[data-popper-placement^='top'] > .arrow {\n bottom: -4px;\n }\n\n &[data-popper-placement^='bottom'] > .arrow {\n top: -4px;\n }\n\n &[data-popper-placement^='left'] > .arrow {\n right: -4px;\n }\n\n &[data-popper-placement^='right'] > .arrow {\n left: -4px;\n }\n }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n\nconst helpIcon =\n '<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>';\n\n/\n Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n \n ```ts\n * <verdocs-help-icon text=\"Sample help text\" />\n * ```\n /\n@Component({\n tag: 'verdocs-help-icon',\n styleUrl: 'verdocs-help-icon.scss',\n shadow: false,\n})\nexport class VerdocsHelpIcon {\n iconEl: HTMLDivElement;\n tooltipEl: HTMLDivElement;\n popperInstance: Instance;\n\n /\n Help text to display on hover/focus\n /\n @Prop() text: string = '';\n\n /\n Optional icon to display. If not supplied, a standard help icon will be shown.\n /\n @Prop() icon: string = helpIcon;\n\n @State() containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n componentDidLoad() {\n this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {\n // placement: 'top-end',\n // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n });\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n show() {\n this.tooltipEl?.setAttribute('data-show', '');\n this.popperInstance?.update().catch(() => {});\n }\n\n hide() {\n this.tooltipEl?.removeAttribute('data-show');\n }\n\n render() {\n return (\n <Host class={{}}>\n <div\n aria-describedby={this.containerId}\n class=\"icon\"\n innerHTML={this.icon}\n onMouseEnter={() => this.show()}\n onFocus={() => this.show()}\n onMouseLeave={() => this.hide()}\n onBlur={() => this.hide()}\n ref={el => (this.iconEl = el as HTMLDivElement)}\n />\n <div\n id={this.containerId}\n role=\"tooltip\"\n class=\"tooltip\"\n data-popper-placement=\"bottom\"\n ref={el => (this.tooltipEl = el as HTMLDivElement)}\n >\n <span innerHTML={this.text} />\n <div data-popper-arrow=\"true\" class=\"arrow\" />\n </div>\n </Host>\n );\n }\n}\n","@import '../../../theme.scss';\n\nverdocs-text-input {\n font-family: $primary-font;\n box-sizing: border-box;\n margin: 0 0 10px 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: 34px;\n padding: 0 9px;\n outline: none;\n\n &:disabled {\n cursor: not-allowed;\n background: $verdocs-grey-2;\n border: 1px solid $verdocs-grey-1;\n }\n\n &::placeholder {\n color: $light-disabled-color;\n opacity: 1;\n }\n\n &:focus {\n outline: 1px solid $border-color-highlight;\n }\n }\n\n .input-label {\n display: block;\n color: $label-color-light;\n font-weight: 600;\n font-size: 13px;\n margin: 0 0 2px 0;\n }\n\n .required {\n color: red;\n margin-left: 2px;\n display: inline-block;\n }\n\n .description {\n font-size: 11px;\n margin: 0 0 0 4px;\n color: rgba(0, 0, 0, 0.54);\n }\n\n // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n\n .input-container {\n position: relative;\n }\n\n .clear {\n top: 7px;\n right: 5px;\n width: 18px;\n height: 18px;\n fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: #720101;\n cursor: pointer;\n }\n }\n\n .copy {\n top: 7px;\n right: 5px;\n width: 18px;\n height: 18px;\n fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: $verdocs-purple;\n cursor: pointer;\n }\n }\n\n .toggle-pw {\n top: 5px;\n right: 7px;\n width: 18px;\n height: 18px;\n stroke: #cccccc;\n //fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: $verdocs-purple;\n cursor: pointer;\n }\n }\n\n &.clearable,\n &.copyable {\n .input-element {\n padding-right: 32px;\n }\n }\n}\n","import {Component, Element, Prop, Host, h, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst 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>`;\nconst 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>`;\nconst 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>`;\nconst 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>`;\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. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n \n ```ts\n * <verdocs-text-input type=\"text\" label=\"Name\" placeholder=\"Enter your name...\" value=\"\" />\n * ```\n /\n@Component({\n tag: 'verdocs-text-input',\n styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n private inputEl: HTMLInputElement;\n\n @Element()\n hostEl: HTMLElement;\n\n /\n The initial value for the input field.\n /\n @Prop({mutable: true, reflect: true}) 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 Displayed below the field in a small font, typically used for instructions or reminders.\n /\n @Prop() description: string = '';\n\n /\n If desired, the autocomplete attribute to set.\n /\n @Prop() autocomplete: string = '';\n\n /\n If supplied, a help icon will be displayed to provide the user more information.\n /\n @Prop() helpText: string = '';\n\n /\n If set, a clear button will be displayed.\n /\n @Prop() clearable = false;\n\n /\n If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\n * both clearable and copyable. If both properties are set to true, copyable will\n * be ignored.\n /\n @Prop() copyable = false;\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 /\n Should the field be required?\n /\n @Prop() required: boolean = false;\n\n @State() showingPw: boolean = false;\n\n copyToClipboard() {\n this.inputEl.select();\n navigator.clipboard\n .writeText(this.value)\n .then(() => VerdocsToast('Copied!'))\n .catch(e => console.log('Error copying to clipboard', e));\n }\n\n render() {\n return (\n <Host class={`input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}`}>\n <label>\n {this.label && (\n <div class=\"input-label\">\n {this.label + ':'}\n {this.required && <span class=\"required\"></span>}\n </div>\n )}\n\n <div class=\"input-container\">\n <input\n type={this.type === 'password' && this.showingPw ? 'text' : this.type}\n value={this.value}\n required={this.required}\n class=\"input-element\"\n data-lpignore=\"true\"\n disabled={this.disabled}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n // onBlur={(e: any) => this.blur?.emit(e.target.value)}\n ref={el => (this.inputEl = el as HTMLInputElement)}\n onInput={(e: any) => (this.value = e.target.value)}\n />\n\n {this.description && <div class=\"description\">{this.description}</div>}\n\n {this.clearable && this.value && (\n <span\n innerHTML={ClearIcon}\n class=\"clear\"\n onClick={() => {\n // We need to allow the onInput event to fire first in case\n // the user was focused on this field before clicking clear.\n setTimeout(() => {\n this.value = '';\n this.inputEl?.setAttribute('value', '');\n // We need to allow the value to \"settle\"\n setTimeout(() => {\n this.inputEl?.dispatchEvent(new window.Event('focusout'));\n this.inputEl?.blur();\n }, 50);\n }, 50);\n }}\n />\n )}\n\n {this.type === 'password' && (\n <span\n innerHTML={this.showingPw ? EyeIcon : EyeSlashIcon}\n class=\"toggle-pw\"\n onClick={() => {\n this.showingPw = !this.showingPw;\n }}\n />\n )}\n\n {!this.clearable && this.copyable && this.value && <span innerHTML={CopyIcon} class=\"copy\" onClick={() => this.copyToClipboard()} />}\n </div>\n\n {this.helpText && <verdocs-help-icon text={this.helpText} />}\n </label>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}