tyrell-components 1.0.0-TC7
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 +221 -0
- package/css/tyrell.css +1783 -0
- package/dist/tyrell.css +1783 -0
- package/dist/tyrell.js +2 -0
- package/lib/base/ty-component.d.ts +133 -0
- package/lib/base/ty-component.d.ts.map +1 -0
- package/lib/base/ty-component.js +297 -0
- package/lib/base/ty-component.js.map +1 -0
- package/lib/components/button.d.ts +126 -0
- package/lib/components/button.d.ts.map +1 -0
- package/lib/components/button.js +244 -0
- package/lib/components/button.js.map +1 -0
- package/lib/components/calendar-month.d.ts +132 -0
- package/lib/components/calendar-month.d.ts.map +1 -0
- package/lib/components/calendar-month.js +440 -0
- package/lib/components/calendar-month.js.map +1 -0
- package/lib/components/calendar-navigation.d.ts +137 -0
- package/lib/components/calendar-navigation.d.ts.map +1 -0
- package/lib/components/calendar-navigation.js +366 -0
- package/lib/components/calendar-navigation.js.map +1 -0
- package/lib/components/calendar.d.ts +166 -0
- package/lib/components/calendar.d.ts.map +1 -0
- package/lib/components/calendar.js +774 -0
- package/lib/components/calendar.js.map +1 -0
- package/lib/components/checkbox.d.ts +189 -0
- package/lib/components/checkbox.d.ts.map +1 -0
- package/lib/components/checkbox.js +400 -0
- package/lib/components/checkbox.js.map +1 -0
- package/lib/components/copy.d.ts +180 -0
- package/lib/components/copy.d.ts.map +1 -0
- package/lib/components/copy.js +393 -0
- package/lib/components/copy.js.map +1 -0
- package/lib/components/date-picker.d.ts +379 -0
- package/lib/components/date-picker.d.ts.map +1 -0
- package/lib/components/date-picker.js +1586 -0
- package/lib/components/date-picker.js.map +1 -0
- package/lib/components/dropdown.d.ts +402 -0
- package/lib/components/dropdown.d.ts.map +1 -0
- package/lib/components/dropdown.js +1564 -0
- package/lib/components/dropdown.js.map +1 -0
- package/lib/components/icon.d.ts +107 -0
- package/lib/components/icon.d.ts.map +1 -0
- package/lib/components/icon.js +230 -0
- package/lib/components/icon.js.map +1 -0
- package/lib/components/input.d.ts +270 -0
- package/lib/components/input.d.ts.map +1 -0
- package/lib/components/input.js +721 -0
- package/lib/components/input.js.map +1 -0
- package/lib/components/modal.d.ts +58 -0
- package/lib/components/modal.d.ts.map +1 -0
- package/lib/components/modal.js +473 -0
- package/lib/components/modal.js.map +1 -0
- package/lib/components/multiselect.d.ts +397 -0
- package/lib/components/multiselect.d.ts.map +1 -0
- package/lib/components/multiselect.js +1580 -0
- package/lib/components/multiselect.js.map +1 -0
- package/lib/components/option.d.ts +66 -0
- package/lib/components/option.d.ts.map +1 -0
- package/lib/components/option.js +314 -0
- package/lib/components/option.js.map +1 -0
- package/lib/components/popup.d.ts +43 -0
- package/lib/components/popup.d.ts.map +1 -0
- package/lib/components/popup.js +380 -0
- package/lib/components/popup.js.map +1 -0
- package/lib/components/radio.d.ts +198 -0
- package/lib/components/radio.d.ts.map +1 -0
- package/lib/components/radio.js +437 -0
- package/lib/components/radio.js.map +1 -0
- package/lib/components/resize-observer.d.ts +48 -0
- package/lib/components/resize-observer.d.ts.map +1 -0
- package/lib/components/resize-observer.js +108 -0
- package/lib/components/resize-observer.js.map +1 -0
- package/lib/components/scroll-container.d.ts +51 -0
- package/lib/components/scroll-container.d.ts.map +1 -0
- package/lib/components/scroll-container.js +239 -0
- package/lib/components/scroll-container.js.map +1 -0
- package/lib/components/step.d.ts +26 -0
- package/lib/components/step.d.ts.map +1 -0
- package/lib/components/step.js +75 -0
- package/lib/components/step.js.map +1 -0
- package/lib/components/switch.d.ts +111 -0
- package/lib/components/switch.d.ts.map +1 -0
- package/lib/components/switch.js +240 -0
- package/lib/components/switch.js.map +1 -0
- package/lib/components/tab.d.ts +23 -0
- package/lib/components/tab.d.ts.map +1 -0
- package/lib/components/tab.js +76 -0
- package/lib/components/tab.js.map +1 -0
- package/lib/components/tabs.d.ts +93 -0
- package/lib/components/tabs.d.ts.map +1 -0
- package/lib/components/tabs.js +653 -0
- package/lib/components/tabs.js.map +1 -0
- package/lib/components/tag.d.ts +144 -0
- package/lib/components/tag.d.ts.map +1 -0
- package/lib/components/tag.js +314 -0
- package/lib/components/tag.js.map +1 -0
- package/lib/components/textarea.d.ts +241 -0
- package/lib/components/textarea.d.ts.map +1 -0
- package/lib/components/textarea.js +585 -0
- package/lib/components/textarea.js.map +1 -0
- package/lib/components/tooltip.d.ts +40 -0
- package/lib/components/tooltip.d.ts.map +1 -0
- package/lib/components/tooltip.js +439 -0
- package/lib/components/tooltip.js.map +1 -0
- package/lib/components/wizard.d.ts +86 -0
- package/lib/components/wizard.d.ts.map +1 -0
- package/lib/components/wizard.js +636 -0
- package/lib/components/wizard.js.map +1 -0
- package/lib/icons/fontawesome/brands.d.ts +557 -0
- package/lib/icons/fontawesome/brands.d.ts.map +1 -0
- package/lib/icons/fontawesome/brands.js +557 -0
- package/lib/icons/fontawesome/brands.js.map +1 -0
- package/lib/icons/fontawesome/regular.d.ts +281 -0
- package/lib/icons/fontawesome/regular.d.ts.map +1 -0
- package/lib/icons/fontawesome/regular.js +281 -0
- package/lib/icons/fontawesome/regular.js.map +1 -0
- package/lib/icons/fontawesome/solid.d.ts +1992 -0
- package/lib/icons/fontawesome/solid.d.ts.map +1 -0
- package/lib/icons/fontawesome/solid.js +1992 -0
- package/lib/icons/fontawesome/solid.js.map +1 -0
- package/lib/icons/heroicons/micro.d.ts +324 -0
- package/lib/icons/heroicons/micro.d.ts.map +1 -0
- package/lib/icons/heroicons/micro.js +1032 -0
- package/lib/icons/heroicons/micro.js.map +1 -0
- package/lib/icons/heroicons/mini.d.ts +332 -0
- package/lib/icons/heroicons/mini.d.ts.map +1 -0
- package/lib/icons/heroicons/mini.js +1038 -0
- package/lib/icons/heroicons/mini.js.map +1 -0
- package/lib/icons/heroicons/outline.d.ts +332 -0
- package/lib/icons/heroicons/outline.d.ts.map +1 -0
- package/lib/icons/heroicons/outline.js +993 -0
- package/lib/icons/heroicons/outline.js.map +1 -0
- package/lib/icons/heroicons/solid.d.ts +332 -0
- package/lib/icons/heroicons/solid.d.ts.map +1 -0
- package/lib/icons/heroicons/solid.js +1063 -0
- package/lib/icons/heroicons/solid.js.map +1 -0
- package/lib/icons/lucide.d.ts +1872 -0
- package/lib/icons/lucide.d.ts.map +1 -0
- package/lib/icons/lucide.js +28212 -0
- package/lib/icons/lucide.js.map +1 -0
- package/lib/icons/material/filled.d.ts +2180 -0
- package/lib/icons/material/filled.d.ts.map +1 -0
- package/lib/icons/material/filled.js +14003 -0
- package/lib/icons/material/filled.js.map +1 -0
- package/lib/icons/material/outlined.d.ts +2142 -0
- package/lib/icons/material/outlined.d.ts.map +1 -0
- package/lib/icons/material/outlined.js +14545 -0
- package/lib/icons/material/outlined.js.map +1 -0
- package/lib/icons/material/round.d.ts +2147 -0
- package/lib/icons/material/round.d.ts.map +1 -0
- package/lib/icons/material/round.js +14779 -0
- package/lib/icons/material/round.js.map +1 -0
- package/lib/icons/material/sharp.d.ts +2147 -0
- package/lib/icons/material/sharp.d.ts.map +1 -0
- package/lib/icons/material/sharp.js +14189 -0
- package/lib/icons/material/sharp.js.map +1 -0
- package/lib/icons/material/two-tone.d.ts +2185 -0
- package/lib/icons/material/two-tone.d.ts.map +1 -0
- package/lib/icons/material/two-tone.js +17152 -0
- package/lib/icons/material/two-tone.js.map +1 -0
- package/lib/index.d.ts +78 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +71 -0
- package/lib/index.js.map +1 -0
- package/lib/styles/button.d.ts +14 -0
- package/lib/styles/button.d.ts.map +1 -0
- package/lib/styles/button.js +457 -0
- package/lib/styles/button.js.map +1 -0
- package/lib/styles/calendar-month.d.ts +6 -0
- package/lib/styles/calendar-month.d.ts.map +1 -0
- package/lib/styles/calendar-month.js +229 -0
- package/lib/styles/calendar-month.js.map +1 -0
- package/lib/styles/calendar-navigation.d.ts +6 -0
- package/lib/styles/calendar-navigation.d.ts.map +1 -0
- package/lib/styles/calendar-navigation.js +125 -0
- package/lib/styles/calendar-navigation.js.map +1 -0
- package/lib/styles/calendar.d.ts +6 -0
- package/lib/styles/calendar.d.ts.map +1 -0
- package/lib/styles/calendar.js +28 -0
- package/lib/styles/calendar.js.map +1 -0
- package/lib/styles/checkbox.d.ts +9 -0
- package/lib/styles/checkbox.d.ts.map +1 -0
- package/lib/styles/checkbox.js +19 -0
- package/lib/styles/checkbox.js.map +1 -0
- package/lib/styles/copy.d.ts +7 -0
- package/lib/styles/copy.d.ts.map +1 -0
- package/lib/styles/copy.js +94 -0
- package/lib/styles/copy.js.map +1 -0
- package/lib/styles/custom-scrollbar.d.ts +6 -0
- package/lib/styles/custom-scrollbar.d.ts.map +1 -0
- package/lib/styles/custom-scrollbar.js +157 -0
- package/lib/styles/custom-scrollbar.js.map +1 -0
- package/lib/styles/date-picker.d.ts +6 -0
- package/lib/styles/date-picker.d.ts.map +1 -0
- package/lib/styles/date-picker.js +400 -0
- package/lib/styles/date-picker.js.map +1 -0
- package/lib/styles/dropdown.d.ts +12 -0
- package/lib/styles/dropdown.d.ts.map +1 -0
- package/lib/styles/dropdown.js +983 -0
- package/lib/styles/dropdown.js.map +1 -0
- package/lib/styles/icon.d.ts +6 -0
- package/lib/styles/icon.d.ts.map +1 -0
- package/lib/styles/icon.js +231 -0
- package/lib/styles/icon.js.map +1 -0
- package/lib/styles/input.d.ts +7 -0
- package/lib/styles/input.d.ts.map +1 -0
- package/lib/styles/input.js +685 -0
- package/lib/styles/input.js.map +1 -0
- package/lib/styles/modal.d.ts +8 -0
- package/lib/styles/modal.d.ts.map +1 -0
- package/lib/styles/modal.js +134 -0
- package/lib/styles/modal.js.map +1 -0
- package/lib/styles/multiselect.d.ts +6 -0
- package/lib/styles/multiselect.d.ts.map +1 -0
- package/lib/styles/multiselect.js +774 -0
- package/lib/styles/multiselect.js.map +1 -0
- package/lib/styles/option.d.ts +6 -0
- package/lib/styles/option.d.ts.map +1 -0
- package/lib/styles/option.js +116 -0
- package/lib/styles/option.js.map +1 -0
- package/lib/styles/popup.d.ts +8 -0
- package/lib/styles/popup.d.ts.map +1 -0
- package/lib/styles/popup.js +95 -0
- package/lib/styles/popup.js.map +1 -0
- package/lib/styles/radio.d.ts +8 -0
- package/lib/styles/radio.d.ts.map +1 -0
- package/lib/styles/radio.js +160 -0
- package/lib/styles/radio.js.map +1 -0
- package/lib/styles/resize-observer.d.ts +6 -0
- package/lib/styles/resize-observer.d.ts.map +1 -0
- package/lib/styles/resize-observer.js +18 -0
- package/lib/styles/resize-observer.js.map +1 -0
- package/lib/styles/scroll-container.d.ts +6 -0
- package/lib/styles/scroll-container.d.ts.map +1 -0
- package/lib/styles/scroll-container.js +198 -0
- package/lib/styles/scroll-container.js.map +1 -0
- package/lib/styles/step.d.ts +5 -0
- package/lib/styles/step.d.ts.map +1 -0
- package/lib/styles/step.js +50 -0
- package/lib/styles/step.js.map +1 -0
- package/lib/styles/switch.d.ts +9 -0
- package/lib/styles/switch.d.ts.map +1 -0
- package/lib/styles/switch.js +100 -0
- package/lib/styles/switch.js.map +1 -0
- package/lib/styles/tab.d.ts +5 -0
- package/lib/styles/tab.d.ts.map +1 -0
- package/lib/styles/tab.js +51 -0
- package/lib/styles/tab.js.map +1 -0
- package/lib/styles/tabs.d.ts +13 -0
- package/lib/styles/tabs.d.ts.map +1 -0
- package/lib/styles/tabs.js +184 -0
- package/lib/styles/tabs.js.map +1 -0
- package/lib/styles/tag.d.ts +6 -0
- package/lib/styles/tag.d.ts.map +1 -0
- package/lib/styles/tag.js +415 -0
- package/lib/styles/tag.js.map +1 -0
- package/lib/styles/textarea.d.ts +6 -0
- package/lib/styles/textarea.d.ts.map +1 -0
- package/lib/styles/textarea.js +350 -0
- package/lib/styles/textarea.js.map +1 -0
- package/lib/styles/tooltip.d.ts +9 -0
- package/lib/styles/tooltip.d.ts.map +1 -0
- package/lib/styles/tooltip.js +136 -0
- package/lib/styles/tooltip.js.map +1 -0
- package/lib/styles/wizard.d.ts +25 -0
- package/lib/styles/wizard.d.ts.map +1 -0
- package/lib/styles/wizard.js +325 -0
- package/lib/styles/wizard.js.map +1 -0
- package/lib/types/common.d.ts +143 -0
- package/lib/types/common.d.ts.map +1 -0
- package/lib/types/common.js +5 -0
- package/lib/types/common.js.map +1 -0
- package/lib/utils/calendar-utils.d.ts +176 -0
- package/lib/utils/calendar-utils.d.ts.map +1 -0
- package/lib/utils/calendar-utils.js +370 -0
- package/lib/utils/calendar-utils.js.map +1 -0
- package/lib/utils/custom-scrollbar.d.ts +82 -0
- package/lib/utils/custom-scrollbar.d.ts.map +1 -0
- package/lib/utils/custom-scrollbar.js +320 -0
- package/lib/utils/custom-scrollbar.js.map +1 -0
- package/lib/utils/icon-registry.d.ts +78 -0
- package/lib/utils/icon-registry.d.ts.map +1 -0
- package/lib/utils/icon-registry.js +304 -0
- package/lib/utils/icon-registry.js.map +1 -0
- package/lib/utils/locale.d.ts +136 -0
- package/lib/utils/locale.d.ts.map +1 -0
- package/lib/utils/locale.js +213 -0
- package/lib/utils/locale.js.map +1 -0
- package/lib/utils/mobile.d.ts +14 -0
- package/lib/utils/mobile.d.ts.map +1 -0
- package/lib/utils/mobile.js +21 -0
- package/lib/utils/mobile.js.map +1 -0
- package/lib/utils/number-format.d.ts +83 -0
- package/lib/utils/number-format.d.ts.map +1 -0
- package/lib/utils/number-format.js +143 -0
- package/lib/utils/number-format.js.map +1 -0
- package/lib/utils/parse-boolean.d.ts +39 -0
- package/lib/utils/parse-boolean.d.ts.map +1 -0
- package/lib/utils/parse-boolean.js +58 -0
- package/lib/utils/parse-boolean.js.map +1 -0
- package/lib/utils/positioning.d.ts +143 -0
- package/lib/utils/positioning.d.ts.map +1 -0
- package/lib/utils/positioning.js +308 -0
- package/lib/utils/positioning.js.map +1 -0
- package/lib/utils/property-capture.d.ts +132 -0
- package/lib/utils/property-capture.d.ts.map +1 -0
- package/lib/utils/property-capture.js +152 -0
- package/lib/utils/property-capture.js.map +1 -0
- package/lib/utils/property-manager.d.ts +90 -0
- package/lib/utils/property-manager.d.ts.map +1 -0
- package/lib/utils/property-manager.js +197 -0
- package/lib/utils/property-manager.js.map +1 -0
- package/lib/utils/resize-observer.d.ts +42 -0
- package/lib/utils/resize-observer.d.ts.map +1 -0
- package/lib/utils/resize-observer.js +71 -0
- package/lib/utils/resize-observer.js.map +1 -0
- package/lib/utils/scroll-lock.d.ts +79 -0
- package/lib/utils/scroll-lock.d.ts.map +1 -0
- package/lib/utils/scroll-lock.js +197 -0
- package/lib/utils/scroll-lock.js.map +1 -0
- package/lib/utils/styles.d.ts +27 -0
- package/lib/utils/styles.d.ts.map +1 -0
- package/lib/utils/styles.js +53 -0
- package/lib/utils/styles.js.map +1 -0
- package/lib/version.d.ts +8 -0
- package/lib/version.d.ts.map +1 -0
- package/lib/version.js +11 -0
- package/lib/version.js.map +1 -0
- package/package.json +159 -0
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TyCopy Web Component
|
|
3
|
+
*
|
|
4
|
+
* Read-only field with copy-to-clipboard functionality
|
|
5
|
+
* Perfect for API keys, tokens, URLs, code snippets, etc.
|
|
6
|
+
*
|
|
7
|
+
* Features:
|
|
8
|
+
* - Read-only display (not an input)
|
|
9
|
+
* - Copy icon on the right
|
|
10
|
+
* - Icon animation on copy (copy → check → copy)
|
|
11
|
+
* - Same styling as ty-input for consistency
|
|
12
|
+
* - Label support
|
|
13
|
+
* - Size and flavor variants
|
|
14
|
+
*/
|
|
15
|
+
import type { Flavor, Size } from '../types/common.js';
|
|
16
|
+
import { TyComponent } from '../base/ty-component.js';
|
|
17
|
+
import type { PropertyChange } from '../utils/property-manager.js';
|
|
18
|
+
/**
|
|
19
|
+
* Component internal state
|
|
20
|
+
*/
|
|
21
|
+
interface CopyState {
|
|
22
|
+
value: string;
|
|
23
|
+
label: string;
|
|
24
|
+
size: Size;
|
|
25
|
+
flavor: Flavor;
|
|
26
|
+
format: 'text' | 'code';
|
|
27
|
+
multiline: boolean;
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
required: boolean;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* TyCopy Element Interface
|
|
33
|
+
*/
|
|
34
|
+
export interface TyCopyElement extends HTMLElement {
|
|
35
|
+
value: string;
|
|
36
|
+
label: string;
|
|
37
|
+
size: Size;
|
|
38
|
+
flavor: Flavor;
|
|
39
|
+
format: 'text' | 'code';
|
|
40
|
+
disabled: boolean;
|
|
41
|
+
required: boolean;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Ty Copy Field Component
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```html
|
|
48
|
+
* <!-- Basic copy field -->
|
|
49
|
+
* <ty-copy
|
|
50
|
+
* label="API Key"
|
|
51
|
+
* value="sk_live_1234567890abcdef">
|
|
52
|
+
* </ty-copy>
|
|
53
|
+
*
|
|
54
|
+
* <!-- Code format -->
|
|
55
|
+
* <ty-copy
|
|
56
|
+
* label="Install Command"
|
|
57
|
+
* value="npm install tyrell-components"
|
|
58
|
+
* format="code">
|
|
59
|
+
* </ty-copy>
|
|
60
|
+
*
|
|
61
|
+
* <!-- Different sizes -->
|
|
62
|
+
* <ty-copy size="sm" value="Small field"></ty-copy>
|
|
63
|
+
* <ty-copy size="lg" value="Large field"></ty-copy>
|
|
64
|
+
*
|
|
65
|
+
* <!-- Semantic flavors -->
|
|
66
|
+
* <ty-copy flavor="primary" value="Primary"></ty-copy>
|
|
67
|
+
* <ty-copy flavor="success" value="Success"></ty-copy>
|
|
68
|
+
* ```
|
|
69
|
+
*/
|
|
70
|
+
export declare class TyCopy extends TyComponent<CopyState> implements TyCopyElement {
|
|
71
|
+
static formAssociated: boolean;
|
|
72
|
+
protected static properties: {
|
|
73
|
+
value: {
|
|
74
|
+
type: "string";
|
|
75
|
+
visual: boolean;
|
|
76
|
+
formValue: boolean;
|
|
77
|
+
default: string;
|
|
78
|
+
};
|
|
79
|
+
label: {
|
|
80
|
+
type: "string";
|
|
81
|
+
visual: boolean;
|
|
82
|
+
default: string;
|
|
83
|
+
};
|
|
84
|
+
size: {
|
|
85
|
+
type: "string";
|
|
86
|
+
visual: boolean;
|
|
87
|
+
default: string;
|
|
88
|
+
validate: (v: any) => boolean;
|
|
89
|
+
coerce: (v: any) => any;
|
|
90
|
+
};
|
|
91
|
+
flavor: {
|
|
92
|
+
type: "string";
|
|
93
|
+
visual: boolean;
|
|
94
|
+
default: string;
|
|
95
|
+
validate: (v: any) => boolean;
|
|
96
|
+
coerce: (v: any) => any;
|
|
97
|
+
};
|
|
98
|
+
format: {
|
|
99
|
+
type: "string";
|
|
100
|
+
visual: boolean;
|
|
101
|
+
default: string;
|
|
102
|
+
coerce: (v: any) => "text" | "code";
|
|
103
|
+
};
|
|
104
|
+
multiline: {
|
|
105
|
+
type: "boolean";
|
|
106
|
+
visual: boolean;
|
|
107
|
+
default: boolean;
|
|
108
|
+
};
|
|
109
|
+
disabled: {
|
|
110
|
+
type: "boolean";
|
|
111
|
+
visual: boolean;
|
|
112
|
+
default: boolean;
|
|
113
|
+
};
|
|
114
|
+
required: {
|
|
115
|
+
type: "boolean";
|
|
116
|
+
visual: boolean;
|
|
117
|
+
default: boolean;
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
private _copyTimeout;
|
|
121
|
+
private _showingSuccess;
|
|
122
|
+
constructor();
|
|
123
|
+
/**
|
|
124
|
+
* Called when component connects to DOM
|
|
125
|
+
* TyComponent already handled pre-connection property capture
|
|
126
|
+
*/
|
|
127
|
+
protected onConnect(): void;
|
|
128
|
+
/**
|
|
129
|
+
* Called when component disconnects from DOM
|
|
130
|
+
*/
|
|
131
|
+
protected onDisconnect(): void;
|
|
132
|
+
/**
|
|
133
|
+
* Handle property changes - called BEFORE render
|
|
134
|
+
*/
|
|
135
|
+
protected onPropertiesChanged(_changes: PropertyChange[]): void;
|
|
136
|
+
/**
|
|
137
|
+
* Build CSS class list
|
|
138
|
+
*/
|
|
139
|
+
private buildClassList;
|
|
140
|
+
/**
|
|
141
|
+
* Copy value to clipboard
|
|
142
|
+
*/
|
|
143
|
+
private copyToClipboard;
|
|
144
|
+
/**
|
|
145
|
+
* Show copy success animation
|
|
146
|
+
* Uses state flag so render() can show the correct icon
|
|
147
|
+
*/
|
|
148
|
+
private showCopySuccess;
|
|
149
|
+
/**
|
|
150
|
+
* Show copy error animation
|
|
151
|
+
* Swaps copy icon → red X icon → copy icon
|
|
152
|
+
*/
|
|
153
|
+
private showCopyError;
|
|
154
|
+
/**
|
|
155
|
+
* Setup event listeners
|
|
156
|
+
*/
|
|
157
|
+
private setupEventListeners;
|
|
158
|
+
/**
|
|
159
|
+
* Render the component
|
|
160
|
+
*/
|
|
161
|
+
protected render(): void;
|
|
162
|
+
get value(): string;
|
|
163
|
+
set value(val: string);
|
|
164
|
+
get label(): string;
|
|
165
|
+
set label(val: string);
|
|
166
|
+
get size(): Size;
|
|
167
|
+
set size(value: Size);
|
|
168
|
+
get flavor(): Flavor;
|
|
169
|
+
set flavor(value: Flavor);
|
|
170
|
+
get format(): 'text' | 'code';
|
|
171
|
+
set format(value: 'text' | 'code');
|
|
172
|
+
get multiline(): boolean;
|
|
173
|
+
set multiline(value: boolean);
|
|
174
|
+
get disabled(): boolean;
|
|
175
|
+
set disabled(value: boolean);
|
|
176
|
+
get required(): boolean;
|
|
177
|
+
set required(value: boolean);
|
|
178
|
+
}
|
|
179
|
+
export {};
|
|
180
|
+
//# sourceMappingURL=copy.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"copy.d.ts","sourceRoot":"","sources":["../../src/components/copy.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAyBlE;;GAEG;AACH,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,MAAO,SAAQ,WAAW,CAAC,SAAS,CAAE,YAAW,aAAa;IACzE,MAAM,CAAC,cAAc,UAAO;IAK5B,SAAS,CAAC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;0BAgBT,GAAG;wBACL,GAAG;;;;;;0BAYD,GAAG;wBAIL,GAAG;;;;;;wBAaH,GAAG;;;;;;;;;;;;;;;;;MAiBlB;IAKD,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,eAAe,CAAQ;;IAgB/B;;;OAGG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;IAI3B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B;;OAEG;IACH,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI;IAQ/D;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;YACW,eAAe;IA6C7B;;;OAGG;IACH,OAAO,CAAC,eAAe;IA0BvB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAsBrB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IA4B3B;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;IAqCxB,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,MAAM,IAAI,MAAM,GAAG,MAAM,CAE5B;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAEhC;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;CACF"}
|
|
@@ -0,0 +1,393 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TyCopy Web Component
|
|
3
|
+
*
|
|
4
|
+
* Read-only field with copy-to-clipboard functionality
|
|
5
|
+
* Perfect for API keys, tokens, URLs, code snippets, etc.
|
|
6
|
+
*
|
|
7
|
+
* Features:
|
|
8
|
+
* - Read-only display (not an input)
|
|
9
|
+
* - Copy icon on the right
|
|
10
|
+
* - Icon animation on copy (copy → check → copy)
|
|
11
|
+
* - Same styling as ty-input for consistency
|
|
12
|
+
* - Label support
|
|
13
|
+
* - Size and flavor variants
|
|
14
|
+
*/
|
|
15
|
+
import { TyComponent } from '../base/ty-component.js';
|
|
16
|
+
import { ensureStyles } from '../utils/styles.js';
|
|
17
|
+
import { inputStyles } from '../styles/input.js';
|
|
18
|
+
import { copyStyles } from '../styles/copy.js';
|
|
19
|
+
/**
|
|
20
|
+
* Copy icon SVG (from Lucide)
|
|
21
|
+
*/
|
|
22
|
+
const COPY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
|
|
23
|
+
/**
|
|
24
|
+
* Check icon SVG (from Lucide) - shown after successful copy
|
|
25
|
+
*/
|
|
26
|
+
const CHECK_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
|
27
|
+
/**
|
|
28
|
+
* X icon SVG (from Lucide) - shown on copy failure
|
|
29
|
+
*/
|
|
30
|
+
const ERROR_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
|
|
31
|
+
/**
|
|
32
|
+
* Required indicator SVG icon (from Lucide)
|
|
33
|
+
*/
|
|
34
|
+
const REQUIRED_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk-icon lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>`;
|
|
35
|
+
/**
|
|
36
|
+
* Ty Copy Field Component
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```html
|
|
40
|
+
* <!-- Basic copy field -->
|
|
41
|
+
* <ty-copy
|
|
42
|
+
* label="API Key"
|
|
43
|
+
* value="sk_live_1234567890abcdef">
|
|
44
|
+
* </ty-copy>
|
|
45
|
+
*
|
|
46
|
+
* <!-- Code format -->
|
|
47
|
+
* <ty-copy
|
|
48
|
+
* label="Install Command"
|
|
49
|
+
* value="npm install tyrell-components"
|
|
50
|
+
* format="code">
|
|
51
|
+
* </ty-copy>
|
|
52
|
+
*
|
|
53
|
+
* <!-- Different sizes -->
|
|
54
|
+
* <ty-copy size="sm" value="Small field"></ty-copy>
|
|
55
|
+
* <ty-copy size="lg" value="Large field"></ty-copy>
|
|
56
|
+
*
|
|
57
|
+
* <!-- Semantic flavors -->
|
|
58
|
+
* <ty-copy flavor="primary" value="Primary"></ty-copy>
|
|
59
|
+
* <ty-copy flavor="success" value="Success"></ty-copy>
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
export class TyCopy extends TyComponent {
|
|
63
|
+
constructor() {
|
|
64
|
+
super(); // TyComponent handles attachInternals() and attachShadow()
|
|
65
|
+
// ============================================================================
|
|
66
|
+
// INTERNAL STATE - Not managed by PropertyManager
|
|
67
|
+
// ============================================================================
|
|
68
|
+
this._copyTimeout = null;
|
|
69
|
+
this._showingSuccess = false;
|
|
70
|
+
// Apply both input and copy-specific styles
|
|
71
|
+
ensureStyles(this.shadowRoot, { css: inputStyles, id: 'ty-input' });
|
|
72
|
+
ensureStyles(this.shadowRoot, { css: copyStyles, id: 'ty-copy' });
|
|
73
|
+
}
|
|
74
|
+
// observedAttributes auto-generated by TyComponent from properties config
|
|
75
|
+
// ============================================================================
|
|
76
|
+
// TYCOMPONENT LIFECYCLE HOOKS
|
|
77
|
+
// ============================================================================
|
|
78
|
+
/**
|
|
79
|
+
* Called when component connects to DOM
|
|
80
|
+
* TyComponent already handled pre-connection property capture
|
|
81
|
+
*/
|
|
82
|
+
onConnect() {
|
|
83
|
+
// TyComponent will call render() automatically after this hook
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Called when component disconnects from DOM
|
|
87
|
+
*/
|
|
88
|
+
onDisconnect() {
|
|
89
|
+
// Clear any pending timeout
|
|
90
|
+
if (this._copyTimeout !== null) {
|
|
91
|
+
clearTimeout(this._copyTimeout);
|
|
92
|
+
this._copyTimeout = null;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Handle property changes - called BEFORE render
|
|
97
|
+
*/
|
|
98
|
+
onPropertiesChanged(_changes) {
|
|
99
|
+
// No special handling needed - TyComponent handles rendering automatically
|
|
100
|
+
}
|
|
101
|
+
// ============================================================================
|
|
102
|
+
// PRIVATE METHODS
|
|
103
|
+
// ============================================================================
|
|
104
|
+
/**
|
|
105
|
+
* Build CSS class list
|
|
106
|
+
*/
|
|
107
|
+
buildClassList() {
|
|
108
|
+
const classes = [this.size, this.flavor];
|
|
109
|
+
if (this.disabled)
|
|
110
|
+
classes.push('disabled');
|
|
111
|
+
if (this.required)
|
|
112
|
+
classes.push('required');
|
|
113
|
+
return classes.join(' ');
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Copy value to clipboard
|
|
117
|
+
*/
|
|
118
|
+
async copyToClipboard() {
|
|
119
|
+
if (this.disabled || !this.value)
|
|
120
|
+
return;
|
|
121
|
+
try {
|
|
122
|
+
await navigator.clipboard.writeText(this.value);
|
|
123
|
+
// Emit success event
|
|
124
|
+
this.dispatchEvent(new CustomEvent('copy-success', {
|
|
125
|
+
detail: { value: this.value },
|
|
126
|
+
bubbles: true,
|
|
127
|
+
composed: true
|
|
128
|
+
}));
|
|
129
|
+
}
|
|
130
|
+
catch (err) {
|
|
131
|
+
// Fallback for non-secure contexts (non-HTTPS)
|
|
132
|
+
try {
|
|
133
|
+
const textarea = document.createElement('textarea');
|
|
134
|
+
textarea.value = this.value;
|
|
135
|
+
textarea.style.position = 'fixed';
|
|
136
|
+
textarea.style.opacity = '0';
|
|
137
|
+
document.body.appendChild(textarea);
|
|
138
|
+
textarea.select();
|
|
139
|
+
document.execCommand('copy');
|
|
140
|
+
document.body.removeChild(textarea);
|
|
141
|
+
this.dispatchEvent(new CustomEvent('copy-success', {
|
|
142
|
+
detail: { value: this.value },
|
|
143
|
+
bubbles: true,
|
|
144
|
+
composed: true
|
|
145
|
+
}));
|
|
146
|
+
}
|
|
147
|
+
catch (fallbackErr) {
|
|
148
|
+
console.error('[ty-copy] Failed to copy:', fallbackErr);
|
|
149
|
+
this.dispatchEvent(new CustomEvent('copy-error', {
|
|
150
|
+
detail: { error: fallbackErr },
|
|
151
|
+
bubbles: true,
|
|
152
|
+
composed: true
|
|
153
|
+
}));
|
|
154
|
+
this.showCopyError();
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
// Show success animation (after either method succeeds)
|
|
159
|
+
this.showCopySuccess();
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Show copy success animation
|
|
163
|
+
* Uses state flag so render() can show the correct icon
|
|
164
|
+
*/
|
|
165
|
+
showCopySuccess() {
|
|
166
|
+
// Clear any existing timeout
|
|
167
|
+
if (this._copyTimeout !== null) {
|
|
168
|
+
clearTimeout(this._copyTimeout);
|
|
169
|
+
}
|
|
170
|
+
this._showingSuccess = true;
|
|
171
|
+
// Update just the button without full re-render
|
|
172
|
+
const copyButton = this.shadowRoot.querySelector('.copy-button');
|
|
173
|
+
if (copyButton) {
|
|
174
|
+
copyButton.classList.add('success');
|
|
175
|
+
copyButton.innerHTML = CHECK_ICON_SVG;
|
|
176
|
+
}
|
|
177
|
+
// Reset after 2 seconds
|
|
178
|
+
this._copyTimeout = window.setTimeout(() => {
|
|
179
|
+
this._showingSuccess = false;
|
|
180
|
+
const btn = this.shadowRoot.querySelector('.copy-button');
|
|
181
|
+
if (btn) {
|
|
182
|
+
btn.classList.remove('success');
|
|
183
|
+
btn.innerHTML = COPY_ICON_SVG;
|
|
184
|
+
}
|
|
185
|
+
this._copyTimeout = null;
|
|
186
|
+
}, 2000);
|
|
187
|
+
}
|
|
188
|
+
/**
|
|
189
|
+
* Show copy error animation
|
|
190
|
+
* Swaps copy icon → red X icon → copy icon
|
|
191
|
+
*/
|
|
192
|
+
showCopyError() {
|
|
193
|
+
if (this._copyTimeout !== null) {
|
|
194
|
+
clearTimeout(this._copyTimeout);
|
|
195
|
+
}
|
|
196
|
+
this._showingSuccess = false;
|
|
197
|
+
const copyButton = this.shadowRoot.querySelector('.copy-button');
|
|
198
|
+
if (copyButton) {
|
|
199
|
+
copyButton.classList.add('error');
|
|
200
|
+
copyButton.innerHTML = ERROR_ICON_SVG;
|
|
201
|
+
}
|
|
202
|
+
this._copyTimeout = window.setTimeout(() => {
|
|
203
|
+
const btn = this.shadowRoot.querySelector('.copy-button');
|
|
204
|
+
if (btn) {
|
|
205
|
+
btn.classList.remove('error');
|
|
206
|
+
btn.innerHTML = COPY_ICON_SVG;
|
|
207
|
+
}
|
|
208
|
+
this._copyTimeout = null;
|
|
209
|
+
}, 2000);
|
|
210
|
+
}
|
|
211
|
+
/**
|
|
212
|
+
* Setup event listeners
|
|
213
|
+
*/
|
|
214
|
+
setupEventListeners() {
|
|
215
|
+
const shadow = this.shadowRoot;
|
|
216
|
+
const inputWrapper = shadow.querySelector('.input-wrapper');
|
|
217
|
+
const copyButton = shadow.querySelector('.copy-button');
|
|
218
|
+
// Make entire field clickable for copying
|
|
219
|
+
if (inputWrapper && !this.disabled) {
|
|
220
|
+
const wrapperEl = inputWrapper;
|
|
221
|
+
wrapperEl.addEventListener('click', (e) => {
|
|
222
|
+
// Prevent double-triggering if button was clicked
|
|
223
|
+
if (e.target === copyButton || e.target.closest('.copy-button')) {
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
this.copyToClipboard();
|
|
227
|
+
});
|
|
228
|
+
// Add visual feedback - make it look clickable
|
|
229
|
+
wrapperEl.style.cursor = 'pointer';
|
|
230
|
+
}
|
|
231
|
+
// Button click handler
|
|
232
|
+
if (copyButton) {
|
|
233
|
+
copyButton.addEventListener('click', () => {
|
|
234
|
+
this.copyToClipboard();
|
|
235
|
+
});
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
/**
|
|
239
|
+
* Render the component
|
|
240
|
+
*/
|
|
241
|
+
render() {
|
|
242
|
+
const shadow = this.shadowRoot;
|
|
243
|
+
const classes = this.buildClassList();
|
|
244
|
+
// Determine display element based on format and multiline
|
|
245
|
+
const multilineClass = this.multiline ? ' multiline' : '';
|
|
246
|
+
const displayElement = this.format === 'code'
|
|
247
|
+
? `<code class="copy-field-value${multilineClass}">${this.value || ''}</code>`
|
|
248
|
+
: `<div class="copy-field-value${multilineClass}">${this.value || ''}</div>`;
|
|
249
|
+
const labelHtml = this.label ? `
|
|
250
|
+
<label class="input-label">
|
|
251
|
+
${this.label}
|
|
252
|
+
${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
|
|
253
|
+
</label>
|
|
254
|
+
` : '';
|
|
255
|
+
shadow.innerHTML = `
|
|
256
|
+
<div class="input-container">
|
|
257
|
+
${labelHtml}
|
|
258
|
+
<div class="input-wrapper ${classes}">
|
|
259
|
+
${displayElement}
|
|
260
|
+
<button class="copy-button${this._showingSuccess ? ' success' : ''}" type="button" ${this.disabled ? 'disabled' : ''}>
|
|
261
|
+
${this._showingSuccess ? CHECK_ICON_SVG : COPY_ICON_SVG}
|
|
262
|
+
</button>
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
`;
|
|
266
|
+
// Re-setup event listeners after render
|
|
267
|
+
this.setupEventListeners();
|
|
268
|
+
}
|
|
269
|
+
// ============================================================================
|
|
270
|
+
// PROPERTY ACCESSORS - Simple wrappers (no logic!)
|
|
271
|
+
// ============================================================================
|
|
272
|
+
get value() {
|
|
273
|
+
return this.getProperty('value');
|
|
274
|
+
}
|
|
275
|
+
set value(val) {
|
|
276
|
+
this.setProperty('value', val);
|
|
277
|
+
}
|
|
278
|
+
get label() {
|
|
279
|
+
return this.getProperty('label');
|
|
280
|
+
}
|
|
281
|
+
set label(val) {
|
|
282
|
+
this.setProperty('label', val);
|
|
283
|
+
}
|
|
284
|
+
get size() {
|
|
285
|
+
return this.getProperty('size');
|
|
286
|
+
}
|
|
287
|
+
set size(value) {
|
|
288
|
+
this.setProperty('size', value);
|
|
289
|
+
}
|
|
290
|
+
get flavor() {
|
|
291
|
+
return this.getProperty('flavor');
|
|
292
|
+
}
|
|
293
|
+
set flavor(value) {
|
|
294
|
+
this.setProperty('flavor', value);
|
|
295
|
+
}
|
|
296
|
+
get format() {
|
|
297
|
+
return this.getProperty('format');
|
|
298
|
+
}
|
|
299
|
+
set format(value) {
|
|
300
|
+
this.setProperty('format', value);
|
|
301
|
+
}
|
|
302
|
+
get multiline() {
|
|
303
|
+
return this.getProperty('multiline');
|
|
304
|
+
}
|
|
305
|
+
set multiline(value) {
|
|
306
|
+
this.setProperty('multiline', value);
|
|
307
|
+
}
|
|
308
|
+
get disabled() {
|
|
309
|
+
return this.getProperty('disabled');
|
|
310
|
+
}
|
|
311
|
+
set disabled(value) {
|
|
312
|
+
this.setProperty('disabled', value);
|
|
313
|
+
}
|
|
314
|
+
get required() {
|
|
315
|
+
return this.getProperty('required');
|
|
316
|
+
}
|
|
317
|
+
set required(value) {
|
|
318
|
+
this.setProperty('required', value);
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
TyCopy.formAssociated = true;
|
|
322
|
+
// ============================================================================
|
|
323
|
+
// PROPERTY CONFIGURATION - Declarative property lifecycle
|
|
324
|
+
// ============================================================================
|
|
325
|
+
TyCopy.properties = {
|
|
326
|
+
value: {
|
|
327
|
+
type: 'string',
|
|
328
|
+
visual: true,
|
|
329
|
+
formValue: true,
|
|
330
|
+
default: '',
|
|
331
|
+
},
|
|
332
|
+
label: {
|
|
333
|
+
type: 'string',
|
|
334
|
+
visual: true,
|
|
335
|
+
default: '',
|
|
336
|
+
},
|
|
337
|
+
size: {
|
|
338
|
+
type: 'string',
|
|
339
|
+
visual: true,
|
|
340
|
+
default: 'md',
|
|
341
|
+
validate: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
|
|
342
|
+
coerce: (v) => {
|
|
343
|
+
if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(v)) {
|
|
344
|
+
console.warn(`[ty-copy] Invalid size '${v}'. Using 'md'.`);
|
|
345
|
+
return 'md';
|
|
346
|
+
}
|
|
347
|
+
return v;
|
|
348
|
+
},
|
|
349
|
+
},
|
|
350
|
+
flavor: {
|
|
351
|
+
type: 'string',
|
|
352
|
+
visual: true,
|
|
353
|
+
default: 'neutral',
|
|
354
|
+
validate: (v) => {
|
|
355
|
+
const valid = ['primary', 'secondary', 'success', 'danger', 'warning', 'neutral'];
|
|
356
|
+
return valid.includes(v);
|
|
357
|
+
},
|
|
358
|
+
coerce: (v) => {
|
|
359
|
+
const valid = ['primary', 'secondary', 'success', 'danger', 'warning', 'neutral'];
|
|
360
|
+
if (!valid.includes(v)) {
|
|
361
|
+
console.warn(`[ty-copy] Invalid flavor '${v}'. Using 'neutral'. Valid flavors: ${valid.join(', ')}`);
|
|
362
|
+
return 'neutral';
|
|
363
|
+
}
|
|
364
|
+
return v;
|
|
365
|
+
},
|
|
366
|
+
},
|
|
367
|
+
format: {
|
|
368
|
+
type: 'string',
|
|
369
|
+
visual: true,
|
|
370
|
+
default: 'text',
|
|
371
|
+
coerce: (v) => (v === 'code' ? 'code' : 'text'),
|
|
372
|
+
},
|
|
373
|
+
multiline: {
|
|
374
|
+
type: 'boolean',
|
|
375
|
+
visual: true,
|
|
376
|
+
default: false,
|
|
377
|
+
},
|
|
378
|
+
disabled: {
|
|
379
|
+
type: 'boolean',
|
|
380
|
+
visual: true,
|
|
381
|
+
default: false,
|
|
382
|
+
},
|
|
383
|
+
required: {
|
|
384
|
+
type: 'boolean',
|
|
385
|
+
visual: true,
|
|
386
|
+
default: false,
|
|
387
|
+
},
|
|
388
|
+
};
|
|
389
|
+
// Register the custom element
|
|
390
|
+
if (!customElements.get('ty-copy')) {
|
|
391
|
+
customElements.define('ty-copy', TyCopy);
|
|
392
|
+
}
|
|
393
|
+
//# sourceMappingURL=copy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"copy.js","sourceRoot":"","sources":["../../src/components/copy.ts"],"names":[],"mappings":"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"}
|