@verdocs/web-sdk 1.2.0 → 1.4.0

package/dist/{esm/index-2b1938ea.js → components/index4.js}

@@ -9,11 +9,19 @@ function createCommonjsModule(fn, basedir, module) {
 		path: basedir,
 		exports: {},
 		require: function (path, base) {
-			return commonjsRequire();
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
 		}
 	}, fn(module, module.exports), module.exports;
 }
 
+function getDefaultExportFromNamespaceIfPresent (n) {
+	return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
+}
+
+function getDefaultExportFromNamespaceIfNotNamed (n) {
+	return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
+}
+
 function getAugmentedNamespace(n) {
 	if (n.__esModule) return n;
 	var a = Object.defineProperty({}, '__esModule', {value: true});
@@ -36,4 +44,4 @@ function commonjsRequire () {
 // for now just expose the builtin process global from node.js
 var process_1 = commonjsGlobal.process;
 
-export { getDefaultExportFromCjs as a, commonjsGlobal as b, createCommonjsModule as c, commonjsRequire as d, getAugmentedNamespace as g, process_1 as p };
+export { commonjsGlobal as a, commonjsRequire as b, createCommonjsModule as c, getDefaultExportFromCjs as d, getAugmentedNamespace as g, process_1 as p };

package/dist/components/verdocs-auth.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsAuth extends Components.VerdocsAuth, HTMLElement {}
+export const VerdocsAuth: {
+  prototype: VerdocsAuth;
+  new (): VerdocsAuth;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-auth.js

@@ -0,0 +1,347 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as loadSession, a as authenticateUser, s as setSession } from './Auth.js';
+import { g as getEndpoint, V as VerdocsEndpoint, s as setActiveEndpoint } from './Token.js';
+import './index2.js';
+import { d as defineCustomElement$4 } from './verdocs-button2.js';
+import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
+
+// TODO
+
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var getNotifications = function () { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.get('/notifications')
+                .then(function (r) { return r.data; })];
+    });
+}); };
+
+/**
+ * Get the user's available profiles. The current profile will be marked with `current: true`.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const profiles = await Profiles.getProfiles()
+ * ```
+ */
+var getProfiles = function () {
+    return getEndpoint()
+        .api.get('/profiles')
+        .then(function (r) { return r.data; });
+};
+/**
+ * Get a list of system roles.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const roles = await Profiles.getRoles();
+ * ```
+ */
+var getRoles = function () {
+    return getEndpoint()
+        .api.get('/roles')
+        .then(function (r) { return r.data; });
+};
+/**
+ * Get a list of system roles.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const permissions = await Profiles.getPermissions();
+ * ```
+ */
+var getPermissions = function () {
+    return getEndpoint()
+        .api.get('/permissions')
+        .then(function (r) { return r.data; });
+};
+/**
+ * Create a profile. If the caller does not have a "current" profile set, the new profile will be made current.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const newProfile = await Profiles.createProfile({ first_name: 'FIRST', last_name: 'LAST', email: 'EMAIL' });
+ * ```
+ */
+var createProfile = function (params) {
+    return getEndpoint()
+        .api.post('/profiles', params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Get a profile. The caller must have admin access to the given profile.
+ * TODO: Add a "public" profile endpoint for public pages
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const profile = await Profiles.getProfile('PROFILEID');
+ * ```
+ */
+var getProfile = function (profileId) {
+    return getEndpoint()
+        .api.get("/profiles/".concat(profileId))
+        .then(function (r) { return r.data; });
+};
+/**
+ * Get a profile's permissions. The caller must have admin access to the given profile.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const permissions = await Profiles.getProfilePermissions('PROFILEID');
+ * ```
+ */
+var getProfilePermissions = function (profileId) {
+    return getEndpoint()
+        .api.get("/profiles/".concat(profileId, "/permissions"))
+        .then(function (r) { return r.data; });
+};
+/**
+ * Get a profile's groups.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const groups = await Profiles.getProfileGroups('PROFILEID');
+ * ```
+ */
+var getProfileGroups = function (profileId) {
+    return getEndpoint()
+        .api.get("/profiles/".concat(profileId, "/groups"))
+        .then(function (r) { return r.data; });
+};
+/**
+ * Switch the caller's "current" profile. The current profile is used for permissions checking and profile_id field settings
+ * for most operations in Verdocs. It is important to select the appropropriate profile before calling other API functions.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const newProfile = await Profiles.switchProfile('PROFILEID');
+ * ```
+ */
+var switchProfile = function (profileId) {
+    return getEndpoint()
+        .api.post("/profiles/".concat(profileId, "/switch"))
+        .then(function (r) { return r.data; });
+};
+/**
+ * Update a profile. For future expansion, the profile ID to update is required, but currently this must also be the
+ * "current" profile for the caller.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const newProfile = await Profiles.updateProfile('PROFILEID');
+ * ```
+ */
+var updateProfile = function (profileId, params) {
+    return getEndpoint()
+        .api.put("/profiles/".concat(profileId), params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Delete a profile. If the requested profile is the caller's curent profile, the next available profile will be selected.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * await Profiles.deleteProfile('PROFILEID');
+ * ```
+ */
+var deleteProfile = function (profileId) {
+    return getEndpoint()
+        .api.delete("/profiles/".concat(profileId))
+        .then(function (r) { return r.data; });
+};
+
+const verdocsAuthCss = "verdocs-auth{font-family:\"Barlow\", sans-serif;background-color:#4c56cb;padding:40px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-auth .login-form,verdocs-auth .signup-form{background:#f5f5fa;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;padding:20px;width:300px;max-width:100%}verdocs-auth .logo{margin:20px 0 30px;width:128px;max-width:100%}verdocs-auth h3{text-align:center;font-weight:400;font-size:16px;line-height:1.75;margin:0}verdocs-auth h4{text-align:center;font-weight:400;font-size:14px;line-height:1.43;margin:0}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}";
+
+const BASE_URL = 'https://stage-api.verdocs.com/';
+const SOURCE = 'verdocs-stage';
+const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.authenticated = createEvent(this, "authenticated", 7);
+    /**
+     * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display
+     * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may
+     * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.
+     */
+    this.visible = true;
+    /**
+     * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to
+     * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be
+     * in SVG format for best results.
+     */
+    this.logo = 'https://verdocs.com/assets/blue-logo.svg';
+    /**
+     * If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary
+     * if the user's session details will be displayed instead. This may be useful while debugging authentication
+     * flows in new applications.
+     */
+    this.debug = false;
+    this.isAuthenticated = false;
+    this.displayMode = 'login';
+    this.username = '';
+    this.password = '';
+    this.loggingIn = false;
+    this.activeSession = null;
+    this.loginError = null;
+  }
+  componentWillLoad() {
+    const staging = new VerdocsEndpoint().setBaseURL(BASE_URL);
+    setActiveEndpoint(staging);
+    console.log('Set active endpoint', getEndpoint());
+  }
+  componentDidLoad() {
+    const session = loadSession(SOURCE);
+    console.log('loaded session', session, SOURCE);
+    if (session !== null) {
+      this.isAuthenticated = true;
+      this.activeSession = session;
+      this.authenticated.emit({ authenticated: true, session });
+    }
+    else {
+      this.authenticated.emit({ authenticated: false, session: null });
+    }
+  }
+  // handleSelectOption(option: IMenuOption) {
+  //   this.isAuthenticated = false;
+  //   this.authenticated.emit(option);
+  // }
+  handleLogin() {
+    this.loggingIn = true;
+    authenticateUser({ username: this.username, password: this.password })
+      .then(r => {
+      this.loggingIn = false;
+      console.log('Login result', r.accessToken);
+      const session = setSession(SOURCE, r.accessToken, true);
+      this.activeSession = session;
+      this.isAuthenticated = true;
+      console.log('set session', session);
+      this.authenticated.emit({ authenticated: true, session });
+    })
+      .catch(e => {
+      var _a;
+      console.log('Login error', e.response, JSON.stringify(e));
+      this.loggingIn = false;
+      this.activeSession = null;
+      this.authenticated.emit({ authenticated: false, session: null });
+      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 403) {
+        this.loginError = 'Please check your username and password and try again.';
+      }
+    });
+  }
+  handleLogout() {
+    // endSession(SOURCE);
+    this.isAuthenticated = false;
+    this.authenticated.emit({ authenticated: false, session: null });
+  }
+  handleClearError() {
+    this.loginError = null;
+  }
+  render() {
+    if (!this.visible) {
+      return h("div", { style: { display: 'none' } }, "Verdocs Auth Placeholder");
+    }
+    if (this.isAuthenticated) {
+      if (this.debug) {
+        return (h("div", { class: "status-result debug" }, h("verdocs-button", { label: "Logout", disabled: this.loggingIn, onPress: () => this.handleLogout() })));
+      }
+      return h("div", { class: "status-result" }, "Authenticated");
+    }
+    if (this.displayMode === 'signup') {
+      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onFieldInput: e => (this.username = e.detail), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onFieldInput: e => (this.password = e.detail), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+    }
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onFieldInput: e => (this.username = e.detail), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onFieldInput: e => (this.password = e.detail), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { open: true, heading: "Login Error", message: this.loginError, onClosed: () => this.handleClearError() }) : h("div", null)));
+  }
+  static get style() { return verdocsAuthCss; }
+}, [0, "verdocs-auth", {
+    "visible": [4],
+    "logo": [1],
+    "debug": [4],
+    "isAuthenticated": [32],
+    "displayMode": [32],
+    "username": [32],
+    "password": [32],
+    "loggingIn": [32],
+    "activeSession": [32],
+    "loginError": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-auth", "verdocs-button", "verdocs-ok-dialog", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-auth":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsAuth$1);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-ok-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1(VerdocsAuth$1);
+
+const VerdocsAuth = VerdocsAuth$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsAuth, defineCustomElement };

package/dist/components/verdocs-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsButton extends Components.VerdocsButton, HTMLElement {}
+export const VerdocsButton: {
+  prototype: VerdocsButton;
+  new (): VerdocsButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-button.js

@@ -0,0 +1,6 @@
+import { V as VerdocsButton$1, d as defineCustomElement$1 } from './verdocs-button2.js';
+
+const VerdocsButton = VerdocsButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsButton, defineCustomElement };

package/dist/components/verdocs-button2.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const verdocsButtonCss = "verdocs-button button{font-family:\"Barlow\", 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:#fff;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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.press = 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() {
+    console.log('Rendering button', this.startIcon);
+    return (h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e), class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { class: "label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+  }
+  static get style() { return verdocsButtonCss; }
+}, [0, "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;
+  } });
+}
+defineCustomElement(VerdocsButton);
+
+export { VerdocsButton as V, defineCustomElement as d };

package/dist/components/verdocs-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsDropdown extends Components.VerdocsDropdown, HTMLElement {}
+export const VerdocsDropdown: {
+  prototype: VerdocsDropdown;
+  new (): VerdocsDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-dropdown.js

@@ -0,0 +1,6 @@
+import { V as VerdocsDropdown$1, d as defineCustomElement$1 } from './verdocs-dropdown2.js';
+
+const VerdocsDropdown = VerdocsDropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsDropdown, defineCustomElement };

package/dist/components/verdocs-dropdown2.js

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createPopper } from './index3.js';
+
+const SortDown = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>
+`;
+
+const verdocsDropdownCss = "verdocs-dropdown{font-family:\"Barlow\", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";
+
+const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.optionSelected = createEvent(this, "optionSelected", 7);
+    /**
+     * The menu options to display.
+     */
+    this.options = [];
+  }
+  componentWillLoad() {
+    this.isOpen = !!this.open;
+  }
+  componentDidLoad() {
+    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
+  }
+  handleSelectOption(option) {
+    this.isOpen = false;
+    this.optionSelected.emit(option);
+    this.hide();
+  }
+  // See https://popper.js.org/docs/v2/tutorial/
+  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
+  showDropdown() {
+    var _a, _b;
+    this.isOpen = true;
+    this.dropdownMenu.setAttribute('data-show', '');
+    this.dropdownMenu.removeAttribute('aria-hidden');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
+    }));
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update();
+  }
+  handleHideDropdown(e) {
+    var _a, _b;
+    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
+      // This event is fired when a menu element is clicked because the button "loses focus" then too
+      return;
+    }
+    this.hide();
+  }
+  toggleDropdown() {
+    if (this.isOpen) {
+      this.hide();
+    }
+    else {
+      this.showDropdown();
+    }
+  }
+  hide() {
+    var _a;
+    this.isOpen = false;
+    this.dropdownMenu.removeAttribute('data-show');
+    this.dropdownMenu.setAttribute('aria-hidden', 'true');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
+    }));
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: () => this.toggleDropdown(), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: () => this.handleSelectOption(option), class: "option", disabled: option.disabled }, option.label))))));
+  }
+  static get style() { return verdocsDropdownCss; }
+}, [0, "verdocs-dropdown", {
+    "options": [16],
+    "open": [4],
+    "isOpen": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsDropdown);
+      }
+      break;
+  } });
+}
+defineCustomElement(VerdocsDropdown);
+
+export { VerdocsDropdown as V, defineCustomElement as d };

package/dist/components/verdocs-field-attachment.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsFieldAttachment extends Components.VerdocsFieldAttachment, HTMLElement {}
+export const VerdocsFieldAttachment: {
+  prototype: VerdocsFieldAttachment;
+  new (): VerdocsFieldAttachment;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-field-attachment.js

@@ -0,0 +1,6 @@
+import { V as VerdocsFieldAttachment$1, d as defineCustomElement$1 } from './verdocs-field-attachment2.js';
+
+const VerdocsFieldAttachment = VerdocsFieldAttachment$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldAttachment, defineCustomElement };