@umbraco-ui/uui-button-copy-text 1.13.0-rc.0
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/LICENSE +21 -0
- package/README.md +31 -0
- package/custom-elements.json +397 -0
- package/lib/UUICopyTextEvent.d.ts +12 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +114 -0
- package/lib/uui-button-copy-text.element.d.ts +45 -0
- package/package.json +46 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020 uui-app
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# uui-button-copy-text
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
Umbraco style text-copy component.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
### ES imports
|
|
10
|
+
|
|
11
|
+
```zsh
|
|
12
|
+
npm i @umbraco-ui/uui-button-copy-text
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import the registration of `<uui-button-copy-text>` via:
|
|
16
|
+
|
|
17
|
+
```javascript
|
|
18
|
+
import '@umbraco-ui/uui-button-copy-text';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
When looking to leverage the `UUIButtonCopyTextElement` base class as a type and/or for extension purposes, do so via:
|
|
22
|
+
|
|
23
|
+
```javascript
|
|
24
|
+
import { UUIButtonCopyTextElement } from '@umbraco-ui/uui-button-copy-text';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<uui-button-copy-text></uui-button-copy-text>
|
|
31
|
+
```
|
|
@@ -0,0 +1,397 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "experimental",
|
|
3
|
+
"tags": [
|
|
4
|
+
{
|
|
5
|
+
"name": "uui-button-copy-text",
|
|
6
|
+
"path": "./lib/uui-button-copy-text.element.ts",
|
|
7
|
+
"attributes": [
|
|
8
|
+
{
|
|
9
|
+
"name": "text",
|
|
10
|
+
"description": "Set a string you wish to copy to the clipboard",
|
|
11
|
+
"type": "string",
|
|
12
|
+
"default": "\"''\""
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"name": "copy-from",
|
|
16
|
+
"description": "Copies the text content from another element by specifying the ID of the element\nThe ID of the element does not need to start with # like a CSS selector\nIf this property is set, the value property is ignored",
|
|
17
|
+
"type": "string",
|
|
18
|
+
"default": "\"''\""
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "animation-state-delay",
|
|
22
|
+
"description": "The delay in milliseconds before the button returns to its default state after a successful copy",
|
|
23
|
+
"type": "number",
|
|
24
|
+
"default": "\"250\""
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "type",
|
|
28
|
+
"description": "Specifies the type of button",
|
|
29
|
+
"type": "\"submit\" | \"button\" | \"reset\"",
|
|
30
|
+
"default": "\"\\\"button\\\"\""
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "disabled",
|
|
34
|
+
"description": "Disables the button, changes the looks of it and prevents if from emitting the click event",
|
|
35
|
+
"type": "boolean",
|
|
36
|
+
"default": "\"false\""
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "look",
|
|
40
|
+
"description": "Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.",
|
|
41
|
+
"type": "\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"",
|
|
42
|
+
"default": "\"\\\"default\\\"\""
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "color",
|
|
46
|
+
"description": "Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.",
|
|
47
|
+
"type": "\"default\" | \"positive\" | \"warning\" | \"danger\"",
|
|
48
|
+
"default": "\"\\\"default\\\"\""
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "compact",
|
|
52
|
+
"description": "Makes the left and right padding of the button narrower.",
|
|
53
|
+
"type": "boolean",
|
|
54
|
+
"default": "\"false\""
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "state",
|
|
58
|
+
"description": "Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.",
|
|
59
|
+
"type": "undefined |'waiting' | 'success' | 'failed'",
|
|
60
|
+
"default": "\"undefined\""
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "href",
|
|
64
|
+
"description": "Set an href, this will turns the button into a anchor tag.",
|
|
65
|
+
"type": "string",
|
|
66
|
+
"default": "\"undefined\""
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "target",
|
|
70
|
+
"description": "Set an anchor tag target, only used when using href.",
|
|
71
|
+
"type": "string",
|
|
72
|
+
"default": "\"undefined\""
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "rel",
|
|
76
|
+
"description": "Set the rel attribute for an anchor tag, only used when using href.",
|
|
77
|
+
"type": "string",
|
|
78
|
+
"default": "\"undefined\""
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"name": "name",
|
|
82
|
+
"description": "This is a name property of the component.",
|
|
83
|
+
"type": "string",
|
|
84
|
+
"default": "\"''\""
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"name": "value",
|
|
88
|
+
"description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.",
|
|
89
|
+
"type": "string",
|
|
90
|
+
"default": "\"''\""
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "required",
|
|
94
|
+
"description": "Apply validation rule for requiring a value of this form control.",
|
|
95
|
+
"type": "boolean",
|
|
96
|
+
"default": "\"false\""
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"name": "required-message",
|
|
100
|
+
"description": "Required validation message.",
|
|
101
|
+
"type": "string",
|
|
102
|
+
"default": "\"This field is required\""
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"name": "error",
|
|
106
|
+
"description": "Apply custom error on this input.",
|
|
107
|
+
"type": "boolean",
|
|
108
|
+
"default": "false"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"name": "error-message",
|
|
112
|
+
"description": "Custom error message.",
|
|
113
|
+
"type": "string",
|
|
114
|
+
"default": "\"This field is invalid\""
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"name": "pristine",
|
|
118
|
+
"description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
|
|
119
|
+
"type": "boolean",
|
|
120
|
+
"default": "\"true\""
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "label",
|
|
124
|
+
"description": "label to be used for aria-label and potentially as visual label for some components",
|
|
125
|
+
"type": "string"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "popovertarget",
|
|
129
|
+
"description": "Set a popovertarget.",
|
|
130
|
+
"type": "string",
|
|
131
|
+
"default": "\"undefined\""
|
|
132
|
+
}
|
|
133
|
+
],
|
|
134
|
+
"properties": [
|
|
135
|
+
{
|
|
136
|
+
"name": "text",
|
|
137
|
+
"attribute": "text",
|
|
138
|
+
"description": "Set a string you wish to copy to the clipboard",
|
|
139
|
+
"type": "string",
|
|
140
|
+
"default": "\"''\""
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"name": "copyFrom",
|
|
144
|
+
"attribute": "copy-from",
|
|
145
|
+
"description": "Copies the text content from another element by specifying the ID of the element\nThe ID of the element does not need to start with # like a CSS selector\nIf this property is set, the value property is ignored",
|
|
146
|
+
"type": "string",
|
|
147
|
+
"default": "\"''\""
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"name": "animationStateDelay",
|
|
151
|
+
"attribute": "animation-state-delay",
|
|
152
|
+
"description": "The delay in milliseconds before the button returns to its default state after a successful copy",
|
|
153
|
+
"type": "number",
|
|
154
|
+
"default": "\"250\""
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"name": "type",
|
|
158
|
+
"attribute": "type",
|
|
159
|
+
"description": "Specifies the type of button",
|
|
160
|
+
"type": "\"submit\" | \"button\" | \"reset\"",
|
|
161
|
+
"default": "\"\\\"button\\\"\""
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"name": "disabled",
|
|
165
|
+
"attribute": "disabled",
|
|
166
|
+
"description": "Disables the button, changes the looks of it and prevents if from emitting the click event",
|
|
167
|
+
"type": "boolean",
|
|
168
|
+
"default": "\"false\""
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"name": "look",
|
|
172
|
+
"attribute": "look",
|
|
173
|
+
"description": "Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.",
|
|
174
|
+
"type": "\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"",
|
|
175
|
+
"default": "\"\\\"default\\\"\""
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"name": "color",
|
|
179
|
+
"attribute": "color",
|
|
180
|
+
"description": "Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.",
|
|
181
|
+
"type": "\"default\" | \"positive\" | \"warning\" | \"danger\"",
|
|
182
|
+
"default": "\"\\\"default\\\"\""
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"name": "compact",
|
|
186
|
+
"attribute": "compact",
|
|
187
|
+
"description": "Makes the left and right padding of the button narrower.",
|
|
188
|
+
"type": "boolean",
|
|
189
|
+
"default": "\"false\""
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"name": "state",
|
|
193
|
+
"attribute": "state",
|
|
194
|
+
"description": "Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.",
|
|
195
|
+
"type": "undefined |'waiting' | 'success' | 'failed'",
|
|
196
|
+
"default": "\"undefined\""
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "href",
|
|
200
|
+
"attribute": "href",
|
|
201
|
+
"description": "Set an href, this will turns the button into a anchor tag.",
|
|
202
|
+
"type": "string",
|
|
203
|
+
"default": "\"undefined\""
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"name": "target",
|
|
207
|
+
"attribute": "target",
|
|
208
|
+
"description": "Set an anchor tag target, only used when using href.",
|
|
209
|
+
"type": "string",
|
|
210
|
+
"default": "\"undefined\""
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"name": "rel",
|
|
214
|
+
"attribute": "rel",
|
|
215
|
+
"description": "Set the rel attribute for an anchor tag, only used when using href.",
|
|
216
|
+
"type": "string",
|
|
217
|
+
"default": "\"undefined\""
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"name": "styles",
|
|
221
|
+
"type": "CSSResult[]",
|
|
222
|
+
"default": "\"styles\""
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"name": "formAssociated",
|
|
226
|
+
"description": "This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/",
|
|
227
|
+
"type": "boolean",
|
|
228
|
+
"default": "true"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"name": "name",
|
|
232
|
+
"attribute": "name",
|
|
233
|
+
"description": "This is a name property of the component.",
|
|
234
|
+
"type": "string",
|
|
235
|
+
"default": "\"''\""
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"name": "value",
|
|
239
|
+
"attribute": "value",
|
|
240
|
+
"description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.",
|
|
241
|
+
"type": "string",
|
|
242
|
+
"default": "\"''\""
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"name": "required",
|
|
246
|
+
"attribute": "required",
|
|
247
|
+
"description": "Apply validation rule for requiring a value of this form control.",
|
|
248
|
+
"type": "boolean",
|
|
249
|
+
"default": "\"false\""
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"name": "requiredMessage",
|
|
253
|
+
"attribute": "required-message",
|
|
254
|
+
"description": "Required validation message.",
|
|
255
|
+
"type": "string",
|
|
256
|
+
"default": "\"This field is required\""
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"name": "error",
|
|
260
|
+
"attribute": "error",
|
|
261
|
+
"description": "Apply custom error on this input.",
|
|
262
|
+
"type": "boolean",
|
|
263
|
+
"default": "false"
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"name": "errorMessage",
|
|
267
|
+
"attribute": "error-message",
|
|
268
|
+
"description": "Custom error message.",
|
|
269
|
+
"type": "string",
|
|
270
|
+
"default": "\"This field is invalid\""
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"name": "validity",
|
|
274
|
+
"type": "ValidityState"
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"name": "validationMessage",
|
|
278
|
+
"type": "string"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"name": "pristine",
|
|
282
|
+
"attribute": "pristine",
|
|
283
|
+
"description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
|
|
284
|
+
"type": "boolean",
|
|
285
|
+
"default": "\"true\""
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"name": "label",
|
|
289
|
+
"attribute": "label",
|
|
290
|
+
"description": "label to be used for aria-label and potentially as visual label for some components",
|
|
291
|
+
"type": "string"
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"name": "popoverContainerElement",
|
|
295
|
+
"attribute": "popovertarget",
|
|
296
|
+
"description": "Set a popovertarget.",
|
|
297
|
+
"type": "string",
|
|
298
|
+
"default": "\"undefined\""
|
|
299
|
+
}
|
|
300
|
+
],
|
|
301
|
+
"events": [
|
|
302
|
+
{
|
|
303
|
+
"name": "copying",
|
|
304
|
+
"description": "Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard"
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"name": "copied",
|
|
308
|
+
"description": "Fires when the content is copied to the clipboard"
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "click",
|
|
312
|
+
"description": "fires when the element is clicked"
|
|
313
|
+
}
|
|
314
|
+
],
|
|
315
|
+
"slots": [
|
|
316
|
+
{
|
|
317
|
+
"name": "",
|
|
318
|
+
"description": "Use to replace the default content of the copy icon"
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
"name": "label",
|
|
322
|
+
"description": "for label content"
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"name": "extra",
|
|
326
|
+
"description": "for extra"
|
|
327
|
+
}
|
|
328
|
+
],
|
|
329
|
+
"cssProperties": [
|
|
330
|
+
{
|
|
331
|
+
"name": "--uui-button-height",
|
|
332
|
+
"description": "overwrite the button height"
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
"name": "--uui-button-border-width",
|
|
336
|
+
"description": "overwrite the border width"
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "--uui-button-border-radius",
|
|
340
|
+
"description": "overwrite the border radius"
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"name": "--uui-button-font-weight",
|
|
344
|
+
"description": "overwrite the font weight"
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"name": "--uui-button-font-size",
|
|
348
|
+
"description": "overwrite the font size"
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"name": "--uui-button-background-color",
|
|
352
|
+
"description": "overwrite the background color"
|
|
353
|
+
},
|
|
354
|
+
{
|
|
355
|
+
"name": "--uui-button-background-color-hover",
|
|
356
|
+
"description": "overwrite the background color for hover state"
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": "--uui-button-background-color-disabled",
|
|
360
|
+
"description": "overwrite the background color for disabled state"
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"name": "--uui-button-border-color",
|
|
364
|
+
"description": "overwrite the border color"
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
"name": "--uui-button-border-color-hover",
|
|
368
|
+
"description": "overwrite the border color for hover state"
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
"name": "--uui-button-border-color-disabled",
|
|
372
|
+
"description": "overwrite the border color for disabled state"
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
"name": "--uui-button-contrast",
|
|
376
|
+
"description": "overwrite the text color"
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"name": "--uui-button-contrast-hover",
|
|
380
|
+
"description": "overwrite the text color for hover state"
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"name": "--uui-button-contrast-disabled",
|
|
384
|
+
"description": "overwrite the text color for disabled state"
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "--uui-button-content-align",
|
|
388
|
+
"description": "Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'."
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "--uui-button-transition",
|
|
392
|
+
"description": "Add transition to the button. Default is none."
|
|
393
|
+
}
|
|
394
|
+
]
|
|
395
|
+
}
|
|
396
|
+
]
|
|
397
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
|
|
2
|
+
import { UUIButtonCopyTextElement } from './uui-button-copy-text.element';
|
|
3
|
+
export declare class UUICopyTextEvent extends UUIEvent<{
|
|
4
|
+
text: string;
|
|
5
|
+
}, UUIButtonCopyTextElement> {
|
|
6
|
+
static readonly COPIED: string;
|
|
7
|
+
static readonly COPYING: string;
|
|
8
|
+
/**
|
|
9
|
+
* The text content that is about to be copied to the clipboard
|
|
10
|
+
*/
|
|
11
|
+
text: string | null;
|
|
12
|
+
}
|
package/lib/index.d.ts
ADDED
package/lib/index.js
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
3
|
+
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
|
|
4
|
+
import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
|
|
5
|
+
import { UUIButtonElement } from '@umbraco-ui/uui-button/lib';
|
|
6
|
+
import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
|
|
7
|
+
|
|
8
|
+
class UUICopyTextEvent extends UUIEvent {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
/**
|
|
12
|
+
* The text content that is about to be copied to the clipboard
|
|
13
|
+
*/
|
|
14
|
+
this.text = null;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
UUICopyTextEvent.COPIED = "copied";
|
|
18
|
+
UUICopyTextEvent.COPYING = "copying";
|
|
19
|
+
|
|
20
|
+
var __defProp = Object.defineProperty;
|
|
21
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
22
|
+
var __typeError = (msg) => {
|
|
23
|
+
throw TypeError(msg);
|
|
24
|
+
};
|
|
25
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
26
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
27
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
28
|
+
if (decorator = decorators[i])
|
|
29
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
30
|
+
if (kind && result) __defProp(target, key, result);
|
|
31
|
+
return result;
|
|
32
|
+
};
|
|
33
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
34
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
35
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
36
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
37
|
+
var _animationTimer, _onClick;
|
|
38
|
+
let UUIButtonCopyTextElement = class extends UUIButtonElement {
|
|
39
|
+
constructor() {
|
|
40
|
+
super();
|
|
41
|
+
this.text = "";
|
|
42
|
+
this.copyFrom = "";
|
|
43
|
+
this.animationStateDelay = 250;
|
|
44
|
+
__privateAdd(this, _animationTimer);
|
|
45
|
+
__privateAdd(this, _onClick, async () => {
|
|
46
|
+
this.state = "waiting";
|
|
47
|
+
let valueToCopy = this.text;
|
|
48
|
+
if (this.copyFrom) {
|
|
49
|
+
const el = document.getElementById(this.copyFrom);
|
|
50
|
+
if (el) {
|
|
51
|
+
if ("value" in el) {
|
|
52
|
+
valueToCopy = el.value;
|
|
53
|
+
} else {
|
|
54
|
+
valueToCopy = el.textContent ?? el.innerText ?? "";
|
|
55
|
+
}
|
|
56
|
+
} else {
|
|
57
|
+
console.error(`Element ID ${this.copyFrom} not found to copy from`);
|
|
58
|
+
this.state = "failed";
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING);
|
|
63
|
+
beforeCopyEv.text = valueToCopy;
|
|
64
|
+
this.dispatchEvent(beforeCopyEv);
|
|
65
|
+
if (beforeCopyEv.text != null) {
|
|
66
|
+
valueToCopy = beforeCopyEv.text;
|
|
67
|
+
}
|
|
68
|
+
try {
|
|
69
|
+
await navigator.clipboard.writeText(valueToCopy);
|
|
70
|
+
const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED);
|
|
71
|
+
copiedEv.text = valueToCopy;
|
|
72
|
+
this.dispatchEvent(copiedEv);
|
|
73
|
+
__privateSet(this, _animationTimer, setTimeout(() => {
|
|
74
|
+
this.state = "success";
|
|
75
|
+
}, this.animationStateDelay));
|
|
76
|
+
} catch (err) {
|
|
77
|
+
this.state = "failed";
|
|
78
|
+
console.error("Error copying to clipboard", err);
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
demandCustomElement(this, "uui-icon");
|
|
82
|
+
this.addEventListener("click", __privateGet(this, _onClick));
|
|
83
|
+
}
|
|
84
|
+
disconnectedCallback() {
|
|
85
|
+
super.disconnectedCallback();
|
|
86
|
+
if (__privateGet(this, _animationTimer)) {
|
|
87
|
+
clearTimeout(__privateGet(this, _animationTimer));
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
renderLabel() {
|
|
91
|
+
return html`
|
|
92
|
+
<slot class="label">
|
|
93
|
+
<uui-icon name="copy"></uui-icon>
|
|
94
|
+
</slot>
|
|
95
|
+
`;
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
_animationTimer = new WeakMap();
|
|
99
|
+
_onClick = new WeakMap();
|
|
100
|
+
UUIButtonCopyTextElement.styles = UUIButtonElement.styles;
|
|
101
|
+
__decorateClass([
|
|
102
|
+
property({ type: String })
|
|
103
|
+
], UUIButtonCopyTextElement.prototype, "text", 2);
|
|
104
|
+
__decorateClass([
|
|
105
|
+
property({ type: String, attribute: "copy-from" })
|
|
106
|
+
], UUIButtonCopyTextElement.prototype, "copyFrom", 2);
|
|
107
|
+
__decorateClass([
|
|
108
|
+
property({ type: Number, attribute: "animation-state-delay" })
|
|
109
|
+
], UUIButtonCopyTextElement.prototype, "animationStateDelay", 2);
|
|
110
|
+
UUIButtonCopyTextElement = __decorateClass([
|
|
111
|
+
defineElement("uui-button-copy-text")
|
|
112
|
+
], UUIButtonCopyTextElement);
|
|
113
|
+
|
|
114
|
+
export { UUIButtonCopyTextElement, UUICopyTextEvent };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { UUIButtonElement } from '@umbraco-ui/uui-button/lib';
|
|
2
|
+
/**
|
|
3
|
+
* @summary A button to trigger text content to be copied to the clipboard
|
|
4
|
+
* @element uui-button-copy-text
|
|
5
|
+
* @dependency uui-button
|
|
6
|
+
* @dependency uui-icon
|
|
7
|
+
* @fires {UUICopyTextEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard
|
|
8
|
+
* @fires {UUICopyTextEvent} copied - Fires when the content is copied to the clipboard
|
|
9
|
+
* @slot - Use to replace the default content of the copy icon
|
|
10
|
+
*/
|
|
11
|
+
export declare class UUIButtonCopyTextElement extends UUIButtonElement {
|
|
12
|
+
#private;
|
|
13
|
+
/**
|
|
14
|
+
* Set a string you wish to copy to the clipboard
|
|
15
|
+
* @type {string}
|
|
16
|
+
* @default ''
|
|
17
|
+
*/
|
|
18
|
+
text: string;
|
|
19
|
+
/**
|
|
20
|
+
* Copies the text content from another element by specifying the ID of the element
|
|
21
|
+
* The ID of the element does not need to start with # like a CSS selector
|
|
22
|
+
* If this property is set, the value property is ignored
|
|
23
|
+
* @type {string}
|
|
24
|
+
* @attr
|
|
25
|
+
* @default ''
|
|
26
|
+
* @example copy-from="element-id"
|
|
27
|
+
*/
|
|
28
|
+
copyFrom: string;
|
|
29
|
+
/**
|
|
30
|
+
* The delay in milliseconds before the button returns to its default state after a successful copy
|
|
31
|
+
* @type {number}
|
|
32
|
+
* @attr
|
|
33
|
+
* @default 250
|
|
34
|
+
*/
|
|
35
|
+
animationStateDelay: number;
|
|
36
|
+
constructor();
|
|
37
|
+
disconnectedCallback(): void;
|
|
38
|
+
protected renderLabel(): import("lit-html").TemplateResult<1>;
|
|
39
|
+
static readonly styles: import("lit").CSSResult[];
|
|
40
|
+
}
|
|
41
|
+
declare global {
|
|
42
|
+
interface HTMLElementTagNameMap {
|
|
43
|
+
'uui-button-copy-text': UUIButtonCopyTextElement;
|
|
44
|
+
}
|
|
45
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@umbraco-ui/uui-button-copy-text",
|
|
3
|
+
"version": "1.13.0-rc.0",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"Umbraco",
|
|
7
|
+
"Custom elements",
|
|
8
|
+
"Web components",
|
|
9
|
+
"UI",
|
|
10
|
+
"Lit",
|
|
11
|
+
"Text Copy"
|
|
12
|
+
],
|
|
13
|
+
"description": "Umbraco UI button text-copy component",
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "https://github.com/umbraco/Umbraco.UI.git",
|
|
17
|
+
"directory": "packages/uui-button-copy-text"
|
|
18
|
+
},
|
|
19
|
+
"bugs": {
|
|
20
|
+
"url": "https://github.com/umbraco/Umbraco.UI/issues"
|
|
21
|
+
},
|
|
22
|
+
"main": "./lib/index.js",
|
|
23
|
+
"module": "./lib/index.js",
|
|
24
|
+
"types": "./lib/index.d.ts",
|
|
25
|
+
"type": "module",
|
|
26
|
+
"customElements": "custom-elements.json",
|
|
27
|
+
"files": [
|
|
28
|
+
"lib/**/*.d.ts",
|
|
29
|
+
"lib/**/*.js",
|
|
30
|
+
"custom-elements.json"
|
|
31
|
+
],
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"@umbraco-ui/uui-base": "1.13.0-rc.0",
|
|
34
|
+
"@umbraco-ui/uui-button": "1.13.0-rc.0"
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
|
|
38
|
+
"clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
|
|
39
|
+
"analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
|
|
40
|
+
},
|
|
41
|
+
"publishConfig": {
|
|
42
|
+
"access": "public"
|
|
43
|
+
},
|
|
44
|
+
"homepage": "https://uui.umbraco.com/?path=/story/uui-button-copy-text",
|
|
45
|
+
"gitHead": "864afa6c182c2a73c479237732dadc1abc69a4a0"
|
|
46
|
+
}
|