@verdocs/web-sdk 2.2.5 → 2.2.7
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.
- package/dist/cjs/{Primitives-be5088cb.js → Primitives-a59870a2.js} +20 -0
- package/dist/cjs/{Profiles-244e8254.js → Profiles-54271244.js} +15 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/verdocs-activity-box.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-auth.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-button_3.cjs.entry.js +113 -0
- package/dist/cjs/{verdocs-checkbox_4.cjs.entry.js → verdocs-checkbox_3.cjs.entry.js} +0 -38
- package/dist/cjs/verdocs-dialog_3.cjs.entry.js +74 -0
- package/dist/cjs/verdocs-envelopes-list.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-pagination_3.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-settings-api-keys_4.cjs.entry.js +304 -28
- package/dist/cjs/verdocs-sign.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-template-fields_4.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-templates-list.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-view.cjs.entry.js +10 -3
- package/dist/cjs/verdocs-web-sdk.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/controls/verdocs-table/verdocs-table.css +13 -8
- package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.css +33 -0
- package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.js +102 -0
- package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.stories.js +25 -0
- package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.css +15 -0
- package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.js +30 -2
- package/dist/collection/components/dialogs/verdocs-dialog/verdocs-dialog.css +21 -5
- package/dist/collection/components/dialogs/verdocs-dialog/verdocs-dialog.js +3 -2
- package/dist/collection/components/embeds/verdocs-view/verdocs-view.js +9 -2
- package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.css +27 -18
- package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.js +120 -15
- package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.css +31 -7
- package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.js +137 -10
- package/dist/components/Members.js +17 -0
- package/dist/components/Primitives.js +18 -1
- package/dist/components/Profiles.js +15 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/verdocs-dialog.js +1 -36
- package/dist/components/verdocs-dialog2.js +39 -0
- package/dist/components/verdocs-settings-api-keys2.js +191 -19
- package/dist/components/verdocs-settings-members2.js +189 -22
- package/dist/components/verdocs-settings-profile2.js +1 -1
- package/dist/components/verdocs-settings.js +30 -18
- package/dist/components/verdocs-table2.js +1 -1
- package/dist/components/verdocs-tabs.d.ts +11 -0
- package/dist/components/verdocs-tabs.js +6 -0
- package/dist/components/verdocs-tabs2.js +46 -0
- package/dist/components/verdocs-text-input2.js +14 -3
- package/dist/components/verdocs-view2.js +9 -2
- package/dist/docs.json +147 -9
- package/dist/esm/Primitives-8fe93caf.js +37 -0
- package/dist/esm/{Profiles-7645e6f1.js → Profiles-4cc942ef.js} +15 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/verdocs-activity-box.entry.js +1 -1
- package/dist/esm/verdocs-auth.entry.js +1 -1
- package/dist/esm/verdocs-button_3.entry.js +107 -0
- package/dist/esm/verdocs-checkbox_3.entry.js +50 -0
- package/dist/esm/verdocs-dialog_3.entry.js +68 -0
- package/dist/esm/verdocs-envelopes-list.entry.js +1 -1
- package/dist/esm/verdocs-pagination_3.entry.js +1 -1
- package/dist/esm/verdocs-settings-api-keys_4.entry.js +304 -28
- package/dist/esm/verdocs-sign.entry.js +1 -1
- package/dist/esm/verdocs-template-fields_4.entry.js +1 -1
- package/dist/esm/verdocs-templates-list.entry.js +1 -1
- package/dist/esm/verdocs-view.entry.js +10 -3
- package/dist/esm/verdocs-web-sdk.js +1 -1
- package/dist/esm-es5/Primitives-8fe93caf.js +1 -0
- package/dist/esm-es5/Profiles-4cc942ef.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/verdocs-activity-box.entry.js +1 -1
- package/dist/esm-es5/verdocs-auth.entry.js +1 -1
- package/dist/esm-es5/verdocs-button_3.entry.js +1 -0
- package/dist/esm-es5/verdocs-checkbox_3.entry.js +1 -0
- package/dist/esm-es5/verdocs-dialog_3.entry.js +1 -0
- package/dist/esm-es5/verdocs-envelopes-list.entry.js +1 -1
- package/dist/esm-es5/verdocs-pagination_3.entry.js +1 -1
- package/dist/esm-es5/verdocs-settings-api-keys_4.entry.js +1 -1
- package/dist/esm-es5/verdocs-sign.entry.js +1 -1
- package/dist/esm-es5/verdocs-template-fields_4.entry.js +1 -1
- package/dist/esm-es5/verdocs-templates-list.entry.js +1 -1
- package/dist/esm-es5/verdocs-view.entry.js +1 -1
- package/dist/esm-es5/verdocs-web-sdk.js +1 -1
- package/dist/types/components/controls/verdocs-tabs/verdocs-tabs.d.ts +31 -0
- package/dist/types/components/controls/verdocs-tabs/verdocs-tabs.stories.d.ts +7 -0
- package/dist/types/components/controls/verdocs-text-input/verdocs-text-input.d.ts +7 -0
- package/dist/types/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.d.ts +12 -1
- package/dist/types/components/settings/verdocs-settings-members/verdocs-settings-members.d.ts +17 -1
- package/dist/types/components.d.ts +46 -0
- package/dist/verdocs-web-sdk/{p-68487ce7.system.entry.js → p-02bbfba3.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-0578c85b.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-4c9d9cd6.entry.js → p-0899dd63.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-19a0fdf2.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-690a485e.system.entry.js → p-1b10240a.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-3a0c5966.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-3bcd86ea.system.js +1 -0
- package/dist/verdocs-web-sdk/{p-4f0c253e.system.entry.js → p-3cf4bd84.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-4f8dbb97.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-5e808a0b.js +1 -0
- package/dist/verdocs-web-sdk/p-647cdb84.system.js +1 -1
- package/dist/verdocs-web-sdk/p-6572cc71.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-0d590026.entry.js → p-7967b361.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-803924f3.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-937cd171.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-96ca789b.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-075dc36d.js → p-983da2f6.js} +1 -1
- package/dist/verdocs-web-sdk/{p-e9d2b68a.entry.js → p-a2b83969.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-043eab3f.system.entry.js → p-c556a377.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-cb9985fe.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-cfead4df.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-dd5460ea.entry.js → p-d277233c.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-b3e0db4b.system.entry.js → p-e0a212a1.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-b4ac7a21.entry.js → p-ed38d3d2.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-f65a1b9e.system.js +1 -0
- package/dist/verdocs-web-sdk/{p-986f78e3.entry.js → p-f7fecffd.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-1d7846c9.entry.js → p-fb609f37.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-bf8bded0.system.entry.js → p-fb71f28a.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-febebe69.system.entry.js → p-ff850808.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
- package/package.json +2 -2
- package/dist/cjs/verdocs-button.cjs.entry.js +0 -26
- package/dist/cjs/verdocs-dialog.cjs.entry.js +0 -27
- package/dist/cjs/verdocs-help-icon.cjs.entry.js +0 -45
- package/dist/cjs/verdocs-table.cjs.entry.js +0 -27
- package/dist/components/Strings.js +0 -6
- package/dist/esm/Primitives-054bc6e5.js +0 -20
- package/dist/esm/verdocs-button.entry.js +0 -22
- package/dist/esm/verdocs-checkbox_4.entry.js +0 -87
- package/dist/esm/verdocs-dialog.entry.js +0 -23
- package/dist/esm/verdocs-help-icon.entry.js +0 -41
- package/dist/esm/verdocs-table.entry.js +0 -23
- package/dist/esm-es5/Primitives-054bc6e5.js +0 -1
- package/dist/esm-es5/Profiles-7645e6f1.js +0 -1
- package/dist/esm-es5/verdocs-button.entry.js +0 -1
- package/dist/esm-es5/verdocs-checkbox_4.entry.js +0 -1
- package/dist/esm-es5/verdocs-dialog.entry.js +0 -1
- package/dist/esm-es5/verdocs-help-icon.entry.js +0 -1
- package/dist/esm-es5/verdocs-table.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-144d4ed1.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-268a29a9.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-40361f22.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-606e0405.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-7213a107.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-7291906c.js +0 -1
- package/dist/verdocs-web-sdk/p-84f9fe5d.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-a69359d3.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-ab26744f.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-c69b5a99.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-cbebc039.system.js +0 -1
- package/dist/verdocs-web-sdk/p-d309ef6f.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-d50523fd.system.js +0 -1
- package/dist/verdocs-web-sdk/p-d734ced3.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-db4cfbfe.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-f8a2988e.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-fbabbcea.system.entry.js +0 -1
@@ -7,6 +7,7 @@
|
|
7
7
|
"./components/controls/verdocs-quick-filter/verdocs-quick-filter.js",
|
8
8
|
"./components/elements/verdocs-search-box/verdocs-search-box.js",
|
9
9
|
"./components/controls/verdocs-table/verdocs-table.js",
|
10
|
+
"./components/controls/verdocs-tabs/verdocs-tabs.js",
|
10
11
|
"./components/templates/verdocs-templates-list/verdocs-templates-list.js",
|
11
12
|
"./components/controls/verdocs-toggle/verdocs-toggle.js",
|
12
13
|
"./components/controls/verdocs-button/verdocs-button.js",
|
@@ -1,9 +1,9 @@
|
|
1
1
|
verdocs-table {
|
2
|
-
font-family: "Inter", "Barlow", sans-serif;
|
3
|
-
box-sizing: border-box;
|
4
|
-
margin: 0 0 10px 0;
|
5
|
-
display: block;
|
6
2
|
width: 100%;
|
3
|
+
display: block;
|
4
|
+
margin: 0 0 10px 0;
|
5
|
+
box-sizing: border-box;
|
6
|
+
font-family: "Inter", "Barlow", sans-serif;
|
7
7
|
}
|
8
8
|
verdocs-table .table-wrapper {
|
9
9
|
margin: 10px 0;
|
@@ -12,14 +12,19 @@ verdocs-table .table-wrapper {
|
|
12
12
|
verdocs-table .table {
|
13
13
|
width: 100%;
|
14
14
|
border: none;
|
15
|
+
border-collapse: collapse;
|
16
|
+
}
|
17
|
+
verdocs-table .row.data-row {
|
18
|
+
border: 1px solid #d4d4d8;
|
19
|
+
background-color: #ffffff;
|
15
20
|
}
|
16
21
|
verdocs-table .header-col {
|
22
|
+
color: #5c6575;
|
23
|
+
font-weight: 600;
|
17
24
|
text-align: left;
|
18
|
-
padding:
|
19
|
-
font-weight: 700;
|
20
|
-
color: #555555;
|
25
|
+
padding: 8px 16px;
|
21
26
|
}
|
22
27
|
verdocs-table .data-col {
|
23
|
-
padding: 3px 8px;
|
24
28
|
font-weight: 400;
|
29
|
+
padding: 8px 16px;
|
25
30
|
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
verdocs-tabs {
|
2
|
+
width: 100%;
|
3
|
+
height: 50px;
|
4
|
+
display: flex;
|
5
|
+
color: #72757d;
|
6
|
+
flex-wrap: wrap;
|
7
|
+
margin: 0 0 10px 0;
|
8
|
+
flex-direction: row;
|
9
|
+
align-items: flex-end;
|
10
|
+
box-sizing: border-box;
|
11
|
+
background-color: #e5e5e5;
|
12
|
+
font-family: "Inter", "Barlow", sans-serif;
|
13
|
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
|
14
|
+
}
|
15
|
+
verdocs-tabs .tab {
|
16
|
+
height: 50px;
|
17
|
+
display: flex;
|
18
|
+
cursor: pointer;
|
19
|
+
padding: 0 40px;
|
20
|
+
font-size: 16px;
|
21
|
+
font-weight: 600;
|
22
|
+
align-items: center;
|
23
|
+
justify-content: center;
|
24
|
+
background-color: #e4e4e7;
|
25
|
+
}
|
26
|
+
verdocs-tabs .tab.active {
|
27
|
+
color: #707ae5;
|
28
|
+
background-color: #ffffff;
|
29
|
+
}
|
30
|
+
verdocs-tabs .tab.disabled {
|
31
|
+
color: #d4d4d8;
|
32
|
+
cursor: default;
|
33
|
+
}
|
@@ -0,0 +1,102 @@
|
|
1
|
+
import { Host, h } from '@stencil/core';
|
2
|
+
/**
|
3
|
+
* Display a simple row of selectable tabs.
|
4
|
+
*/
|
5
|
+
export class VerdocsTabs {
|
6
|
+
constructor() {
|
7
|
+
this.tabs = [];
|
8
|
+
this.defaultTab = 0;
|
9
|
+
this.selectedTab = 0;
|
10
|
+
}
|
11
|
+
componentWillLoad() {
|
12
|
+
this.selectedTab = this.defaultTab || 0;
|
13
|
+
}
|
14
|
+
handleSelectTab(index) {
|
15
|
+
var _a;
|
16
|
+
this.selectedTab = index;
|
17
|
+
(_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
|
18
|
+
}
|
19
|
+
render() {
|
20
|
+
return (h(Host, null, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { class: "flex flex-1" }), h("slot", null, h("div", null))));
|
21
|
+
}
|
22
|
+
static get is() { return "verdocs-tabs"; }
|
23
|
+
static get originalStyleUrls() {
|
24
|
+
return {
|
25
|
+
"$": ["verdocs-tabs.scss"]
|
26
|
+
};
|
27
|
+
}
|
28
|
+
static get styleUrls() {
|
29
|
+
return {
|
30
|
+
"$": ["verdocs-tabs.css"]
|
31
|
+
};
|
32
|
+
}
|
33
|
+
static get properties() {
|
34
|
+
return {
|
35
|
+
"tabs": {
|
36
|
+
"type": "unknown",
|
37
|
+
"mutable": false,
|
38
|
+
"complexType": {
|
39
|
+
"original": "ITab[]",
|
40
|
+
"resolved": "ITab[]",
|
41
|
+
"references": {
|
42
|
+
"ITab": {
|
43
|
+
"location": "local"
|
44
|
+
}
|
45
|
+
}
|
46
|
+
},
|
47
|
+
"required": false,
|
48
|
+
"optional": false,
|
49
|
+
"docs": {
|
50
|
+
"tags": [],
|
51
|
+
"text": "The tabs to display"
|
52
|
+
},
|
53
|
+
"defaultValue": "[]"
|
54
|
+
},
|
55
|
+
"defaultTab": {
|
56
|
+
"type": "number",
|
57
|
+
"mutable": false,
|
58
|
+
"complexType": {
|
59
|
+
"original": "number",
|
60
|
+
"resolved": "number",
|
61
|
+
"references": {}
|
62
|
+
},
|
63
|
+
"required": false,
|
64
|
+
"optional": false,
|
65
|
+
"docs": {
|
66
|
+
"tags": [],
|
67
|
+
"text": "The index of the initial tab to select."
|
68
|
+
},
|
69
|
+
"attribute": "default-tab",
|
70
|
+
"reflect": false,
|
71
|
+
"defaultValue": "0"
|
72
|
+
}
|
73
|
+
};
|
74
|
+
}
|
75
|
+
static get states() {
|
76
|
+
return {
|
77
|
+
"selectedTab": {}
|
78
|
+
};
|
79
|
+
}
|
80
|
+
static get events() {
|
81
|
+
return [{
|
82
|
+
"method": "selectTab",
|
83
|
+
"name": "selectTab",
|
84
|
+
"bubbles": true,
|
85
|
+
"cancelable": true,
|
86
|
+
"composed": true,
|
87
|
+
"docs": {
|
88
|
+
"tags": [],
|
89
|
+
"text": "Event fired when the user clicks a template to view it. Typically the host application will use this to navigate\nto the template preview. This is also fired when the user selects \"Preview/Send\" fropm the dropdown menu."
|
90
|
+
},
|
91
|
+
"complexType": {
|
92
|
+
"original": "{tab: ITab; index: number}",
|
93
|
+
"resolved": "{ tab: ITab; index: number; }",
|
94
|
+
"references": {
|
95
|
+
"ITab": {
|
96
|
+
"location": "local"
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}];
|
101
|
+
}
|
102
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import { html } from 'lit-html';
|
2
|
+
export default {
|
3
|
+
title: 'Controls/Tabs',
|
4
|
+
component: 'verdocs-tabs',
|
5
|
+
args: {
|
6
|
+
tabs: [
|
7
|
+
{ id: 'id', header: 'ID' },
|
8
|
+
{ id: 'name', header: 'Name' },
|
9
|
+
{
|
10
|
+
id: 'date',
|
11
|
+
header: 'Date',
|
12
|
+
renderHeader: () => 'Past Due Since',
|
13
|
+
renderCell: (_, row) => `<span style="color: red">${new Date(row.date).toLocaleDateString()}</a>`,
|
14
|
+
},
|
15
|
+
],
|
16
|
+
data: [
|
17
|
+
{ id: '123', name: 'Test 1', date: new Date() },
|
18
|
+
{ id: '456', name: 'Test 2', date: new Date() },
|
19
|
+
],
|
20
|
+
},
|
21
|
+
parameters: {
|
22
|
+
layout: 'fullscreen',
|
23
|
+
},
|
24
|
+
};
|
25
|
+
export const Table = ({ columns, data }) => html `<verdocs-table .columns=${columns} .data=${data} />`;
|
@@ -56,4 +56,19 @@ verdocs-text-input .clear {
|
|
56
56
|
verdocs-text-input .clear:hover {
|
57
57
|
fill: #720101;
|
58
58
|
cursor: pointer;
|
59
|
+
}
|
60
|
+
verdocs-text-input .copy {
|
61
|
+
top: 7px;
|
62
|
+
right: 5px;
|
63
|
+
width: 18px;
|
64
|
+
height: 18px;
|
65
|
+
fill: #cccccc;
|
66
|
+
position: absolute;
|
67
|
+
}
|
68
|
+
verdocs-text-input .copy:hover {
|
69
|
+
fill: #654dcb;
|
70
|
+
cursor: pointer;
|
71
|
+
}
|
72
|
+
verdocs-text-input.clearable .input-element, verdocs-text-input.copyable .input-element {
|
73
|
+
padding-right: 32px;
|
59
74
|
}
|
@@ -1,5 +1,7 @@
|
|
1
1
|
import { Host, h } from '@stencil/core';
|
2
|
+
import { VerdocsToast } from '../../../utils/Toast';
|
2
3
|
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>`;
|
4
|
+
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>`;
|
3
5
|
/**
|
4
6
|
* Display a text input field. This is just a standard HTML input field with minimal markup to fit the
|
5
7
|
* visual styles of the other components. Note that events "bubble" from the input field to the container,
|
@@ -13,12 +15,20 @@ export class VerdocsTextInput {
|
|
13
15
|
this.autocomplete = '';
|
14
16
|
this.helpText = '';
|
15
17
|
this.clearable = false;
|
18
|
+
this.copyable = false;
|
16
19
|
this.type = 'text';
|
17
20
|
this.disabled = false;
|
18
21
|
this.required = false;
|
19
22
|
}
|
23
|
+
copyToClipboard() {
|
24
|
+
this.inputEl.select();
|
25
|
+
navigator.clipboard
|
26
|
+
.writeText(this.value)
|
27
|
+
.then(() => VerdocsToast('Copied!'))
|
28
|
+
.catch(e => console.log('Error copying to clipboard', e));
|
29
|
+
}
|
20
30
|
render() {
|
21
|
-
return (h(Host, { class:
|
31
|
+
return (h(Host, { class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", null, this.label && (h("div", { class: "input-label" }, this.label + ':', this.required && h("span", { class: "required" }, "*"))), h("div", { class: "input-container" }, h("input", { type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { innerHTML: ClearIcon, class: "clear", onClick: () => {
|
22
32
|
// We need to allow the onInput event to fire first in case
|
23
33
|
// the user was focused on this field before clicking clear.
|
24
34
|
setTimeout(() => {
|
@@ -32,7 +42,7 @@ export class VerdocsTextInput {
|
|
32
42
|
(_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
|
33
43
|
}, 50);
|
34
44
|
}, 50);
|
35
|
-
} }))), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
|
45
|
+
} })), !this.clearable && this.copyable && this.value && h("span", { innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
|
36
46
|
}
|
37
47
|
static get is() { return "verdocs-text-input"; }
|
38
48
|
static get originalStyleUrls() {
|
@@ -155,6 +165,24 @@ export class VerdocsTextInput {
|
|
155
165
|
"reflect": false,
|
156
166
|
"defaultValue": "false"
|
157
167
|
},
|
168
|
+
"copyable": {
|
169
|
+
"type": "boolean",
|
170
|
+
"mutable": false,
|
171
|
+
"complexType": {
|
172
|
+
"original": "boolean",
|
173
|
+
"resolved": "boolean",
|
174
|
+
"references": {}
|
175
|
+
},
|
176
|
+
"required": false,
|
177
|
+
"optional": false,
|
178
|
+
"docs": {
|
179
|
+
"tags": [],
|
180
|
+
"text": "If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\nboth clearable and copyable. If both properties are set to true, copyable will\nbe ignored."
|
181
|
+
},
|
182
|
+
"attribute": "copyable",
|
183
|
+
"reflect": false,
|
184
|
+
"defaultValue": "false"
|
185
|
+
},
|
158
186
|
"type": {
|
159
187
|
"type": "string",
|
160
188
|
"mutable": false,
|
@@ -18,18 +18,34 @@ verdocs-dialog .background-overlay {
|
|
18
18
|
justify-content: center;
|
19
19
|
}
|
20
20
|
verdocs-dialog .dialog {
|
21
|
-
width:
|
21
|
+
width: 420px;
|
22
22
|
display: flex;
|
23
|
-
|
24
|
-
border-radius: 4px;
|
23
|
+
max-width: 100%;
|
25
24
|
overflow: hidden;
|
25
|
+
border-radius: 4px;
|
26
|
+
flex-direction: column;
|
26
27
|
background: #ffffff;
|
27
|
-
padding: 16px;
|
28
28
|
box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
|
29
29
|
}
|
30
30
|
verdocs-dialog .heading {
|
31
31
|
display: flex;
|
32
|
-
font-size:
|
32
|
+
font-size: 16px;
|
33
33
|
font-weight: 500;
|
34
|
+
padding: 8px 16px;
|
35
|
+
flex-direction: row;
|
36
|
+
color: #ffffff;
|
37
|
+
background: #46497d;
|
38
|
+
}
|
39
|
+
verdocs-dialog .content {
|
40
|
+
padding: 16px;
|
41
|
+
}
|
42
|
+
verdocs-dialog .content p {
|
43
|
+
margin: 0 0 1em 0;
|
44
|
+
}
|
45
|
+
verdocs-dialog .buttons {
|
46
|
+
gap: 14px;
|
47
|
+
display: flex;
|
34
48
|
flex-direction: row;
|
49
|
+
align-items: center;
|
50
|
+
justify-content: flex-end;
|
35
51
|
}
|
@@ -5,13 +5,14 @@ import { h, Host } from '@stencil/core';
|
|
5
5
|
export class VerdocsDialog {
|
6
6
|
// We need a separate event handler for clicking the background because it can receive events "through" other child components
|
7
7
|
handleDismiss(e) {
|
8
|
+
var _a;
|
8
9
|
if (e.target.className === 'background-overlay') {
|
9
10
|
e.preventDefault();
|
10
|
-
this.exit.emit();
|
11
|
+
(_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
|
11
12
|
}
|
12
13
|
}
|
13
14
|
render() {
|
14
|
-
return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("slot", { name: "title" }, h("div", { class: "heading" }, "Please Confirm")), h("slot", null, h("
|
15
|
+
return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("slot", { name: "title" }, h("div", { class: "heading" }, "Please Confirm")), h("slot", null, h("div", { class: "content" }))))));
|
15
16
|
}
|
16
17
|
static get is() { return "verdocs-dialog"; }
|
17
18
|
static get originalStyleUrls() {
|
@@ -45,7 +45,13 @@ export class VerdocsView {
|
|
45
45
|
console.log('[VIEW] Loading envelope...');
|
46
46
|
try {
|
47
47
|
this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
|
48
|
+
console.log('[VIEW] Loaded envelope', this.envelope);
|
48
49
|
this.roleNames = this.envelope.recipients.map(r => r.role_name);
|
50
|
+
setTimeout(async () => {
|
51
|
+
console.log('[VIEW] Reloading envelope...');
|
52
|
+
this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
|
53
|
+
console.log('[VIEW] Reloaded envelope', this.envelope);
|
54
|
+
}, 2000);
|
49
55
|
}
|
50
56
|
catch (e) {
|
51
57
|
(_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
|
@@ -129,11 +135,12 @@ export class VerdocsView {
|
|
129
135
|
}
|
130
136
|
// Add download options to the menu
|
131
137
|
const hasAttachments = this.envelope.documents.length > 0;
|
132
|
-
const
|
138
|
+
const normalDocCount = this.envelope.documents.filter(doc => doc.type === 'attachment').length;
|
139
|
+
const hasCertificate = this.envelope.documents.find(doc => doc.type === 'certificate') !== undefined;
|
133
140
|
if (hasAttachments || hasCertificate) {
|
134
141
|
menuOptions.push({ label: '' });
|
135
142
|
if (hasAttachments) {
|
136
|
-
menuOptions.push({ id: 'download-attachments', label: 'Download Documents
|
143
|
+
menuOptions.push({ id: 'download-attachments', label: normalDocCount > 1 ? 'Download Documents' : 'Download Document' });
|
137
144
|
}
|
138
145
|
if (hasCertificate) {
|
139
146
|
menuOptions.push({ id: 'download-certificate', label: 'Download Certificate' });
|
package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.css
CHANGED
@@ -11,28 +11,37 @@ verdocs-settings-api-keys {
|
|
11
11
|
verdocs-settings-api-keys .table {
|
12
12
|
margin: 12px 0;
|
13
13
|
}
|
14
|
-
verdocs-settings-api-keys .
|
15
|
-
|
16
|
-
width: 32px;
|
17
|
-
height: 32px;
|
18
|
-
border-radius: 32px;
|
19
|
-
background: #777777;
|
20
|
-
color: #ffffff;
|
21
|
-
font-weight: 700;
|
14
|
+
verdocs-settings-api-keys .data-col div {
|
15
|
+
gap: 12px;
|
22
16
|
display: flex;
|
23
17
|
align-items: center;
|
24
|
-
|
25
|
-
}
|
26
|
-
verdocs-settings-api-keys .col.col-actions {
|
27
|
-
align-items: center;
|
28
|
-
text-align: center;
|
18
|
+
flex-direction: row;
|
29
19
|
}
|
30
|
-
verdocs-settings-api-keys .col
|
31
|
-
cursor: pointer;
|
20
|
+
verdocs-settings-api-keys .data-col svg {
|
32
21
|
width: 24px;
|
33
22
|
height: 24px;
|
34
|
-
fill: #777777;
|
35
23
|
}
|
36
|
-
verdocs-settings-api-keys .col
|
37
|
-
|
24
|
+
verdocs-settings-api-keys .col-name svg,
|
25
|
+
verdocs-settings-api-keys .col-client_id svg,
|
26
|
+
verdocs-settings-api-keys .col-profile_id svg {
|
27
|
+
fill: #a1a1aa;
|
28
|
+
}
|
29
|
+
verdocs-settings-api-keys .col-actions svg {
|
30
|
+
fill: #ffffff;
|
31
|
+
stroke: #a1a1aa;
|
32
|
+
}
|
33
|
+
verdocs-settings-api-keys .col-actions svg:hover {
|
34
|
+
cursor: pointer;
|
35
|
+
stroke: red;
|
36
|
+
}
|
37
|
+
verdocs-settings-api-keys .col-actions > div {
|
38
|
+
justify-content: center;
|
39
|
+
}
|
40
|
+
verdocs-settings-api-keys .header-col.col-actions {
|
41
|
+
text-align: center;
|
42
|
+
}
|
43
|
+
verdocs-settings-api-keys verdocs-dialog p {
|
44
|
+
font-size: 16px;
|
45
|
+
line-height: 18px;
|
46
|
+
margin: 0 0 1em 0;
|
38
47
|
}
|
package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.js
CHANGED
@@ -1,9 +1,14 @@
|
|
1
|
-
import { ApiKeys } from '@verdocs/js-sdk/Organizations';
|
2
1
|
import { VerdocsEndpoint } from '@verdocs/js-sdk';
|
2
|
+
import { ApiKeys, Members } from '@verdocs/js-sdk/Organizations';
|
3
|
+
import { formatFullName } from '@verdocs/js-sdk/Utils/Primitives';
|
3
4
|
import { h, Host } from '@stencil/core';
|
4
5
|
import { VerdocsToast } from '../../../utils/Toast';
|
5
6
|
import { SDKError } from '../../../utils/errors';
|
6
|
-
|
7
|
+
// const ClockIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z" clip-rule="evenodd" /></svg>`;
|
8
|
+
const TagIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.5 3A2.5 2.5 0 003 5.5v2.879a2.5 2.5 0 00.732 1.767l6.5 6.5a2.5 2.5 0 003.536 0l2.878-2.878a2.5 2.5 0 000-3.536l-6.5-6.5A2.5 2.5 0 008.38 3H5.5zM6 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /></svg>`;
|
9
|
+
const UserIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z" clip-rule="evenodd" /></svg>`;
|
10
|
+
const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
|
11
|
+
const ArrowPathIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>`;
|
7
12
|
/**
|
8
13
|
* Displays a settings form that allows the user to manage their API keys.
|
9
14
|
*/
|
@@ -11,6 +16,13 @@ export class VerdocsSettingsApiKeys {
|
|
11
16
|
constructor() {
|
12
17
|
this.endpoint = VerdocsEndpoint.getDefault();
|
13
18
|
this.keys = [];
|
19
|
+
this.creatingKey = false;
|
20
|
+
this.createdKey = null;
|
21
|
+
this.deletingKey = null;
|
22
|
+
this.rotatingKey = null;
|
23
|
+
this.newApiKeyName = '';
|
24
|
+
this.newApiKeyProfileId = '';
|
25
|
+
this.members = [];
|
14
26
|
}
|
15
27
|
componentWillLoad() {
|
16
28
|
this.endpoint.loadSession();
|
@@ -20,25 +32,111 @@ export class VerdocsSettingsApiKeys {
|
|
20
32
|
}
|
21
33
|
}
|
22
34
|
async componentDidLoad() {
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
35
|
+
this.newApiKeyProfileId = this.endpoint.session.profile_id;
|
36
|
+
Members.getMembers(this.endpoint, this.endpoint.session.organization_id)
|
37
|
+
.then(mem => {
|
38
|
+
this.members = mem;
|
39
|
+
})
|
40
|
+
.catch((e) => {
|
41
|
+
var _a, _b, _c;
|
42
|
+
console.log('[SETTINGS] Error loading organization members', e);
|
28
43
|
(_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
|
29
|
-
VerdocsToast('Unable to load
|
30
|
-
}
|
44
|
+
VerdocsToast('Unable to load API keys. Please try again later', { style: 'error' });
|
45
|
+
});
|
46
|
+
this.loadKeys();
|
47
|
+
}
|
48
|
+
loadKeys() {
|
49
|
+
ApiKeys.getKeys(this.endpoint, this.endpoint.session.organization_id)
|
50
|
+
.then(r => {
|
51
|
+
this.keys = r;
|
52
|
+
})
|
53
|
+
.catch(e => {
|
54
|
+
var _a, _b, _c;
|
55
|
+
console.log('[SETTINGS] Unable to load API keys', e);
|
56
|
+
(_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
|
57
|
+
VerdocsToast('Unable to load API keys. Please try again later', { style: 'error' });
|
58
|
+
});
|
59
|
+
}
|
60
|
+
async handleDeleteKey() {
|
61
|
+
ApiKeys.deleteKey(this.endpoint, this.deletingKey.organization_id, this.deletingKey.client_id)
|
62
|
+
.then(() => {
|
63
|
+
this.deletingKey = null;
|
64
|
+
VerdocsToast('API key deleted', { style: 'success' });
|
65
|
+
this.loadKeys();
|
66
|
+
})
|
67
|
+
.catch(e => {
|
68
|
+
var _a, _b, _c;
|
69
|
+
this.deletingKey = null;
|
70
|
+
console.log('[SETTINGS] Unable to delete API key', e);
|
71
|
+
(_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
|
72
|
+
VerdocsToast('Unable to delete API key. Please try again later', { style: 'error' });
|
73
|
+
});
|
74
|
+
}
|
75
|
+
async handleRotateKey() {
|
76
|
+
ApiKeys.rotateKey(this.endpoint, this.rotatingKey.organization_id, this.rotatingKey.client_id)
|
77
|
+
.then(r => {
|
78
|
+
this.rotatingKey = null;
|
79
|
+
VerdocsToast('API key rotated', { style: 'success' });
|
80
|
+
this.loadKeys();
|
81
|
+
this.createdKey = r;
|
82
|
+
})
|
83
|
+
.catch(e => {
|
84
|
+
var _a, _b, _c;
|
85
|
+
this.rotatingKey = null;
|
86
|
+
console.log('[SETTINGS] Unable to rotate API key', e);
|
87
|
+
(_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
|
88
|
+
VerdocsToast('Unable to rotate API key. Please try again later', { style: 'error' });
|
89
|
+
});
|
90
|
+
}
|
91
|
+
async handleCreateKey() {
|
92
|
+
ApiKeys.createKey(this.endpoint, this.endpoint.session.organization_id, { name: this.newApiKeyName, profile_id: this.newApiKeyProfileId })
|
93
|
+
.then(r => {
|
94
|
+
this.creatingKey = false;
|
95
|
+
this.createdKey = r;
|
96
|
+
VerdocsToast('API key created', { style: 'success' });
|
97
|
+
this.loadKeys();
|
98
|
+
})
|
99
|
+
.catch(e => {
|
100
|
+
var _a, _b, _c;
|
101
|
+
this.creatingKey = false;
|
102
|
+
console.log('[SETTINGS] Unable to create API key', e);
|
103
|
+
(_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
|
104
|
+
VerdocsToast('Unable to create API key. Please try again later', { style: 'error' });
|
105
|
+
});
|
31
106
|
}
|
32
107
|
render() {
|
108
|
+
var _a, _b, _c, _d;
|
109
|
+
const profileOptions = this.members.map(member => ({ label: formatFullName(member), value: member.id }));
|
33
110
|
if (!this.endpoint.session) {
|
34
111
|
console.log('[SETTINGS] Must be authenticated');
|
35
112
|
return h(Host, { class: "authentication-required" }, "Must be authenticated");
|
36
113
|
}
|
37
|
-
return (h(Host, null, h("
|
38
|
-
{
|
39
|
-
|
40
|
-
|
41
|
-
|
114
|
+
return (h(Host, null, h("verdocs-table", { data: this.keys, columns: [
|
115
|
+
{
|
116
|
+
id: 'name',
|
117
|
+
header: 'Name',
|
118
|
+
renderCell: (_, row) => (h("div", null, h("div", null, row.name))),
|
119
|
+
},
|
120
|
+
{
|
121
|
+
id: 'client_id',
|
122
|
+
header: 'Client ID',
|
123
|
+
renderCell: (_, row) => (h("div", null, h("div", { innerHTML: TagIcon }), h("div", null, row.client_id))),
|
124
|
+
},
|
125
|
+
{
|
126
|
+
id: 'profile_id',
|
127
|
+
header: 'Acts as',
|
128
|
+
renderCell: (_, row) => (h("div", null, h("div", { innerHTML: UserIcon }), h("div", null, formatFullName(row.profile)))),
|
129
|
+
},
|
130
|
+
{
|
131
|
+
id: 'actions',
|
132
|
+
header: 'Actions',
|
133
|
+
renderCell: (_, row) => (h("div", null, h("div", { innerHTML: TrashIcon, onClick: () => (this.deletingKey = row) }), h("div", { innerHTML: ArrowPathIcon, onClick: () => (this.rotatingKey = row) }))),
|
134
|
+
},
|
135
|
+
] }), h("verdocs-button", { label: "Add API Key", size: "normal", onClick: () => (this.creatingKey = true) }), this.deletingKey && (h("verdocs-dialog", { onExit: () => (this.deletingKey = null) }, h("div", { slot: "title", class: "heading" }, "Delete API key \"", this.deletingKey.name, "\"?"), h("div", { class: "content" }, h("p", null, "Are you sure you want to delete this key? This action cannot be undone."), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", onClick: () => (this.deletingKey = null) }), h("verdocs-button", { size: "small", label: "OK", onClick: () => this.handleDeleteKey() }))))), this.rotatingKey && (h("verdocs-dialog", { onExit: () => (this.rotatingKey = null) }, h("div", { slot: "title", class: "heading" }, "Rotate API key \"", this.rotatingKey.name, "\"?"), h("div", { class: "content" }, h("p", null, "Are you sure you want to rotate this key? A new client secret will be generated, and the old value will become unusable. This action cannot be undone."), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", onClick: () => (this.rotatingKey = null) }), h("verdocs-button", { size: "small", label: "OK", onClick: () => this.handleRotateKey() }))))), this.creatingKey && (h("verdocs-dialog", { onExit: () => (this.creatingKey = false) }, h("div", { slot: "title", class: "heading" }, "Create API Key"), h("div", { class: "content" }, h("verdocs-text-input", { label: "Name", placeholder: "API key name...", id: "verdocs-api-key-name", value: this.newApiKeyName, autocomplete: "off", required: true, onInput: (e) => (this.newApiKeyName = e.target.value), onFocusout: (e) => {
|
136
|
+
this.newApiKeyName = e.target.value.trim();
|
137
|
+
} }), h("p", null, "API keys must be associated with a profile. Actions performed via API calls using this key will \"act as\" this profile."), h("verdocs-select-input", { options: profileOptions, label: "Act as Profile", onInput: (e) => {
|
138
|
+
this.newApiKeyProfileId = e.target.value;
|
139
|
+
} }), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", onClick: () => (this.creatingKey = false) }), h("verdocs-button", { size: "small", label: "OK", onClick: () => this.handleCreateKey() }))))), this.createdKey && (h("verdocs-dialog", { onExit: () => (this.createdKey = null) }, h("div", { slot: "title", class: "heading" }, "API Key Details"), h("div", { class: "content" }, h("verdocs-text-input", { label: "Name", disabled: true, value: (_a = this.createdKey) === null || _a === void 0 ? void 0 : _a.name }), h("verdocs-text-input", { label: "Profile", disabled: true, value: formatFullName((_b = this.createdKey) === null || _b === void 0 ? void 0 : _b.profile) }), h("p", null, "Please save the Client ID and Secret below. Be sure to never expose your secret key in insecure (Web or mobile environments)!"), h("verdocs-text-input", { label: "Client ID", disabled: true, value: (_c = this.createdKey) === null || _c === void 0 ? void 0 : _c.client_id, copyable: true }), h("verdocs-text-input", { label: "Secret Key", disabled: true, value: (_d = this.createdKey) === null || _d === void 0 ? void 0 : _d.client_secret, copyable: true }), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", label: "Done", onClick: () => (this.createdKey = null) })))))));
|
42
140
|
}
|
43
141
|
static get is() { return "verdocs-settings-api-keys"; }
|
44
142
|
static get originalStyleUrls() {
|
@@ -78,7 +176,14 @@ export class VerdocsSettingsApiKeys {
|
|
78
176
|
}
|
79
177
|
static get states() {
|
80
178
|
return {
|
81
|
-
"keys": {}
|
179
|
+
"keys": {},
|
180
|
+
"creatingKey": {},
|
181
|
+
"createdKey": {},
|
182
|
+
"deletingKey": {},
|
183
|
+
"rotatingKey": {},
|
184
|
+
"newApiKeyName": {},
|
185
|
+
"newApiKeyProfileId": {},
|
186
|
+
"members": {}
|
82
187
|
};
|
83
188
|
}
|
84
189
|
static get events() {
|
package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.css
CHANGED
@@ -23,16 +23,40 @@ verdocs-settings-members .role {
|
|
23
23
|
align-items: center;
|
24
24
|
justify-content: center;
|
25
25
|
}
|
26
|
-
verdocs-settings-members .
|
26
|
+
verdocs-settings-members .table {
|
27
|
+
margin: 12px 0;
|
28
|
+
}
|
29
|
+
verdocs-settings-members .data-col div {
|
30
|
+
gap: 12px;
|
31
|
+
display: flex;
|
27
32
|
align-items: center;
|
28
|
-
|
33
|
+
flex-direction: row;
|
29
34
|
}
|
30
|
-
verdocs-settings-members .col
|
31
|
-
cursor: pointer;
|
35
|
+
verdocs-settings-members .data-col svg {
|
32
36
|
width: 24px;
|
33
37
|
height: 24px;
|
34
|
-
fill: #777777;
|
35
38
|
}
|
36
|
-
verdocs-settings-members .col
|
37
|
-
|
39
|
+
verdocs-settings-members .col-name svg,
|
40
|
+
verdocs-settings-members .col-client_id svg,
|
41
|
+
verdocs-settings-members .col-profile_id svg {
|
42
|
+
fill: #a1a1aa;
|
43
|
+
}
|
44
|
+
verdocs-settings-members .col-actions svg {
|
45
|
+
fill: #ffffff;
|
46
|
+
stroke: #a1a1aa;
|
47
|
+
}
|
48
|
+
verdocs-settings-members .col-actions svg:hover {
|
49
|
+
cursor: pointer;
|
50
|
+
stroke: red;
|
51
|
+
}
|
52
|
+
verdocs-settings-members .col-actions > div {
|
53
|
+
justify-content: center;
|
54
|
+
}
|
55
|
+
verdocs-settings-members .header-col.col-actions {
|
56
|
+
text-align: center;
|
57
|
+
}
|
58
|
+
verdocs-settings-members verdocs-dialog p {
|
59
|
+
font-size: 16px;
|
60
|
+
line-height: 18px;
|
61
|
+
margin: 0 0 1em 0;
|
38
62
|
}
|