@getpara/react-components 0.1.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/css/capsule-core.css +298 -0
- package/css/capsule-core.css.map +1 -0
- package/dist/components/stencil-generated/index.js +46 -0
- package/dist/components/stencil-generated/react-component-lib/createComponent.js +74 -0
- package/dist/components/stencil-generated/react-component-lib/createOverlayComponent.js +108 -0
- package/dist/components/stencil-generated/react-component-lib/index.js +2 -0
- package/dist/components/stencil-generated/react-component-lib/interfaces.js +1 -0
- package/dist/components/stencil-generated/react-component-lib/utils/attachProps.js +107 -0
- package/dist/components/stencil-generated/react-component-lib/utils/case.js +6 -0
- package/dist/components/stencil-generated/react-component-lib/utils/dev.js +12 -0
- package/dist/components/stencil-generated/react-component-lib/utils/index.js +31 -0
- package/dist/index.js +3 -0
- package/dist/types/components/stencil-generated/index.d.ts +43 -0
- package/dist/types/components/stencil-generated/react-component-lib/createComponent.d.ts +10 -0
- package/dist/types/components/stencil-generated/react-component-lib/createOverlayComponent.d.ts +21 -0
- package/dist/types/components/stencil-generated/react-component-lib/index.d.ts +2 -0
- package/dist/types/components/stencil-generated/react-component-lib/interfaces.d.ts +29 -0
- package/dist/types/components/stencil-generated/react-component-lib/utils/attachProps.d.ts +16 -0
- package/dist/types/components/stencil-generated/react-component-lib/utils/case.d.ts +2 -0
- package/dist/types/components/stencil-generated/react-component-lib/utils/dev.d.ts +2 -0
- package/dist/types/components/stencil-generated/react-component-lib/utils/index.d.ts +10 -0
- package/dist/types/index.d.ts +4 -0
- package/package.json +44 -0
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a font size to a dynamic font size.
|
|
3
|
+
* Fonts that participate in Dynamic Type should use
|
|
4
|
+
* dynamic font sizes.
|
|
5
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
6
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
7
|
+
* convert to a unit other than $baselineUnit.
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* Convert a font size to a dynamic font size but impose
|
|
11
|
+
* a maximum font size.
|
|
12
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
13
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
14
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
15
|
+
* convert to a unit other than $baselineUnit.
|
|
16
|
+
*/
|
|
17
|
+
/**
|
|
18
|
+
* Convert a font size to a dynamic font size but impose
|
|
19
|
+
* a minimum font size.
|
|
20
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
21
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
22
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
23
|
+
* convert to a unit other than $baselineUnit.
|
|
24
|
+
*/
|
|
25
|
+
/**
|
|
26
|
+
* Convert a font size to a dynamic font size but impose
|
|
27
|
+
* maximum and minimum font sizes.
|
|
28
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
29
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
30
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
31
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
32
|
+
* convert to a unit other than $baselineUnit.
|
|
33
|
+
*/
|
|
34
|
+
/**
|
|
35
|
+
* A heuristic that applies CSS to tablet
|
|
36
|
+
* viewports.
|
|
37
|
+
*
|
|
38
|
+
* Usage:
|
|
39
|
+
* @include tablet-viewport() {
|
|
40
|
+
* :host {
|
|
41
|
+
* background-color: green;
|
|
42
|
+
* }
|
|
43
|
+
* }
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* A heuristic that applies CSS to mobile
|
|
47
|
+
* viewports (i.e. phones, not tablets).
|
|
48
|
+
*
|
|
49
|
+
* Usage:
|
|
50
|
+
* @include mobile-viewport() {
|
|
51
|
+
* :host {
|
|
52
|
+
* background-color: blue;
|
|
53
|
+
* }
|
|
54
|
+
* }
|
|
55
|
+
*/
|
|
56
|
+
html {
|
|
57
|
+
--cpsl-default-font: "Helvetica", sans-serif;
|
|
58
|
+
--cpsl-default-dynamic-font: -apple-system-body;
|
|
59
|
+
--cpsl-font-family: var(--cpsl-default-font);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
div {
|
|
63
|
+
box-sizing: border-box;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
body.backdrop-no-scroll {
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:root {
|
|
71
|
+
--cpsl-color-black: #000000;
|
|
72
|
+
--cpsl-color-white: #ffffff;
|
|
73
|
+
--cpsl-color-alpha-black-2: rgba(0, 0, 0, 0.0196078431);
|
|
74
|
+
--cpsl-color-alpha-black-4: rgba(0, 0, 0, 0.0392156863);
|
|
75
|
+
--cpsl-color-alpha-black-8: rgba(0, 0, 0, 0.0784313725);
|
|
76
|
+
--cpsl-color-alpha-black-10: rgba(0, 0, 0, 0.1019607843);
|
|
77
|
+
--cpsl-color-alpha-black-16: rgba(0, 0, 0, 0.1607843137);
|
|
78
|
+
--cpsl-color-alpha-black-24: rgba(0, 0, 0, 0.2392156863);
|
|
79
|
+
--cpsl-color-alpha-black-25: rgba(0, 0, 0, 0.2509803922);
|
|
80
|
+
--cpsl-color-alpha-black-32: rgba(0, 0, 0, 0.3215686275);
|
|
81
|
+
--cpsl-color-alpha-black-48: rgba(0, 0, 0, 0.4784313725);
|
|
82
|
+
--cpsl-color-alpha-black-50: rgba(0, 0, 0, 0.5019607843);
|
|
83
|
+
--cpsl-color-alpha-white-4: rgba(255, 255, 255, 0.0392156863);
|
|
84
|
+
--cpsl-color-alpha-white-25: rgba(255, 255, 255, 0.2509803922);
|
|
85
|
+
--cpsl-color-background-0: rgb(255, 255, 255);
|
|
86
|
+
--cpsl-color-background-4: rgb(240, 240, 240);
|
|
87
|
+
--cpsl-color-background-8: rgb(235, 235, 235);
|
|
88
|
+
--cpsl-color-background-16: rgb(214, 214, 214);
|
|
89
|
+
--cpsl-color-background-32: rgb(173, 173, 173);
|
|
90
|
+
--cpsl-color-background-48: rgb(133, 133, 133);
|
|
91
|
+
--cpsl-color-background-64: rgb(92, 92, 92);
|
|
92
|
+
--cpsl-color-background-80: rgb(51, 51, 51);
|
|
93
|
+
--cpsl-color-background-96: rgb(10, 10, 10);
|
|
94
|
+
--cpsl-color-foreground-0: rgb(20, 20, 20);
|
|
95
|
+
--cpsl-color-foreground-4: rgb(31, 31, 31);
|
|
96
|
+
--cpsl-color-foreground-8: rgb(42, 42, 42);
|
|
97
|
+
--cpsl-color-foreground-16: rgb(60, 60, 60);
|
|
98
|
+
--cpsl-color-foreground-32: rgb(97, 97, 97);
|
|
99
|
+
--cpsl-color-foreground-48: rgb(134, 134, 134);
|
|
100
|
+
--cpsl-color-foreground-64: rgb(171, 171, 171);
|
|
101
|
+
--cpsl-color-foreground-80: rgb(209, 209, 209);
|
|
102
|
+
--cpsl-color-foreground-96: rgb(246, 246, 246);
|
|
103
|
+
--cpsl-color-contrast: rgb(0, 0, 0);
|
|
104
|
+
--cpsl-color-utility-red: rgb(240, 68, 56);
|
|
105
|
+
--cpsl-color-utility-red-light: rgb(251, 203, 199);
|
|
106
|
+
--cpsl-color-utility-yellow: rgb(251, 188, 4);
|
|
107
|
+
--cpsl-color-utility-yellow-light: rgb(254, 236, 185);
|
|
108
|
+
--cpsl-color-utility-green: rgb(52, 168, 83);
|
|
109
|
+
--cpsl-color-utility-green-light: rgb(198, 231, 207);
|
|
110
|
+
--cpsl-color-text-primary: var(--cpsl-color-foreground-0);
|
|
111
|
+
--cpsl-color-text-secondary: var(--cpsl-color-background-48);
|
|
112
|
+
--cpsl-color-text-tertiary: var(--cpsl-color-foreground-32);
|
|
113
|
+
--cpsl-color-text-subtle: var(--cpsl-color-background-64);
|
|
114
|
+
--cpsl-color-text-inverted: var(--cpsl-color-foreground-96);
|
|
115
|
+
--cpsl-color-text-disabled: var(--cpsl-color-foreground-48);
|
|
116
|
+
--cpsl-color-text-error: var(--cpsl-color-utility-red);
|
|
117
|
+
--cpsl-color-text-contrast: var(--cpsl-color-contrast);
|
|
118
|
+
--cpsl-color-modal-surface-main: var(--cpsl-color-background-0);
|
|
119
|
+
--cpsl-color-modal-surface-footer: var(--cpsl-color-foreground-96);
|
|
120
|
+
--cpsl-color-modal-border: var(--cpsl-color-background-8);
|
|
121
|
+
--cpsl-color-input-surface-disabled: var(--cpsl-color-background-8);
|
|
122
|
+
--cpsl-color-input-surface-default: var(--cpsl-color-background-4);
|
|
123
|
+
--cpsl-color-input-surface-hover: var(--cpsl-color-background-16);
|
|
124
|
+
--cpsl-color-input-border-placeholder: var(--cpsl-color-background-4);
|
|
125
|
+
--cpsl-color-input-border-active: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
|
|
126
|
+
--cpsl-color-input-border-error: var(--cpsl-color-utility-red);
|
|
127
|
+
--cpsl-color-select-surface-disabled: var(--cpsl-color-background-8);
|
|
128
|
+
--cpsl-color-select-surface-default: var(--cpsl-color-background-4);
|
|
129
|
+
--cpsl-color-select-surface-hover: var(--cpsl-color-background-0);
|
|
130
|
+
--cpsl-color-select-border-placeholder: var(--cpsl-color-background-4);
|
|
131
|
+
--cpsl-color-select-border-active: var(--cpsl-color-foreground-0);
|
|
132
|
+
--cpsl-color-select-border-error: var(--cpsl-color-utility-red);
|
|
133
|
+
--cpsl-color-select-dropdown-border: var(--cpsl-color-background-16);
|
|
134
|
+
--cpsl-color-file-surface-disabled: var(--cpsl-color-background-8);
|
|
135
|
+
--cpsl-color-file-surface-default: var(--cpsl-color-background-4);
|
|
136
|
+
--cpsl-color-file-surface-drag: var(--cpsl-color-background-16);
|
|
137
|
+
--cpsl-color-file-border-placeholder: var(--cpsl-color-background-4);
|
|
138
|
+
--cpsl-color-file-border-error: var(--cpsl-color-utility-red);
|
|
139
|
+
--cpsl-color-tile-button-surface-default: var(--cpsl-color-background-8);
|
|
140
|
+
--cpsl-color-tile-button-surface-hover: var(--cpsl-color-background-16);
|
|
141
|
+
--cpsl-color-tile-button-surface-pressed: var(--cpsl-color-background-16);
|
|
142
|
+
--cpsl-color-tile-button-border: var(--cpsl-color-background-8);
|
|
143
|
+
--cpsl-color-primary-button-text: var(--cpsl-color-text-inverted);
|
|
144
|
+
--cpsl-color-primary-button-surface-default: var(--cpsl-color-foreground-0);
|
|
145
|
+
--cpsl-color-primary-button-surface-hover: var(--cpsl-color-foreground-16);
|
|
146
|
+
--cpsl-color-primary-button-surface-pressed: var(--cpsl-color-foreground-16);
|
|
147
|
+
--cpsl-color-primary-button-surface-disabled: var(--cpsl-color-background-16);
|
|
148
|
+
--cpsl-color-primary-button-border-default: var(--cpsl-color-foreground-0);
|
|
149
|
+
--cpsl-color-primary-button-border-disabled: var(--cpsl-color-background-16);
|
|
150
|
+
--cpsl-color-primary-button-outline: var(--cpsl-color-foreground-32);
|
|
151
|
+
--cpsl-color-secondary-button-text: var(--cpsl-color-text-primary);
|
|
152
|
+
--cpsl-color-secondary-button-surface-default: transparent;
|
|
153
|
+
--cpsl-color-secondary-button-surface-hover: var(--cpsl-color-foreground-96);
|
|
154
|
+
--cpsl-color-secondary-button-surface-pressed: var(--cpsl-color-foreground-96);
|
|
155
|
+
--cpsl-color-secondary-button-surface-disabled: var(--cpsl-color-foreground-96);
|
|
156
|
+
--cpsl-color-secondary-button-border-default: var(--cpsl-color-background-32);
|
|
157
|
+
--cpsl-color-secondary-button-border-disabled: var(--cpsl-color-foreground-96);
|
|
158
|
+
--cpsl-color-secondary-button-outline: var(--cpsl-color-background-32);
|
|
159
|
+
--cpsl-color-tertiary-button-text: var(--cpsl-color-background-96);
|
|
160
|
+
--cpsl-color-tertiary-button-surface-default: var(--cpsl-color-background-8);
|
|
161
|
+
--cpsl-color-tertiary-button-surface-hover: var(--cpsl-color-background-16);
|
|
162
|
+
--cpsl-color-tertiary-button-surface-pressed: var(--cpsl-color-background-16);
|
|
163
|
+
--cpsl-color-tertiary-button-surface-disabled: var(--cpsl-color-background-8);
|
|
164
|
+
--cpsl-color-tertiary-button-border-default: var(--cpsl-color-background-8);
|
|
165
|
+
--cpsl-color-tertiary-button-border-disabled: var(--cpsl-color-background-8);
|
|
166
|
+
--cpsl-color-tertiary-button-outline: var(--cpsl-color-background-32);
|
|
167
|
+
--cpsl-color-destructive-button-text: var(--cpsl-color-text-error);
|
|
168
|
+
--cpsl-color-destructive-button-surface-default: transparent;
|
|
169
|
+
--cpsl-color-destructive-button-surface-hover: var(--cpsl-color-utility-red-light);
|
|
170
|
+
--cpsl-color-destructive-button-surface-pressed: var(--cpsl-color-utility-red-light);
|
|
171
|
+
--cpsl-color-destructive-button-surface-disabled: var(--cpsl-color-foreground-96);
|
|
172
|
+
--cpsl-color-destructive-button-border-default: var(--cpsl-color-utility-red);
|
|
173
|
+
--cpsl-color-destructive-button-border-disabled: var(--cpsl-color-foreground-96);
|
|
174
|
+
--cpsl-color-destructive-button-outline: var(--cpsl-color-background-32);
|
|
175
|
+
--cpsl-color-ghost-button-default: var(--cpsl-color-text-secondary);
|
|
176
|
+
--cpsl-color-ghost-button-disabled: var(--cpsl-color-text-secondary);
|
|
177
|
+
--cpsl-color-ghost-button-hover: var(--cpsl-color-text-primary);
|
|
178
|
+
--cpsl-color-divider: var(--cpsl-color-background-32);
|
|
179
|
+
--cpsl-color-spinner-path: var(--cpsl-color-background-32);
|
|
180
|
+
--cpsl-color-spinner-circle: var(--cpsl-color-foreground-0);
|
|
181
|
+
--cpsl-color-pill-text: var(--cpsl-color-text-secondary);
|
|
182
|
+
--cpsl-color-pill-container-background: var(--cpsl-color-background-0);
|
|
183
|
+
--cpsl-color-pill-container-border: var(--cpsl-color-background-8);
|
|
184
|
+
--cpsl-color-progressIndicator-active: var(--cpsl-color-foreground-0);
|
|
185
|
+
--cpsl-color-progressIndicator-next: var(--cpsl-color-background-32);
|
|
186
|
+
--cpsl-color-progressIndicator-previous: var(--cpsl-color-background-64);
|
|
187
|
+
--cpsl-color-qr-fill: var(--cpsl-color-black);
|
|
188
|
+
--cpsl-color-qr-background: var(--cpsl-color-white);
|
|
189
|
+
--cpsl-color-qr-border: var(--cpsl-color-background-32);
|
|
190
|
+
--cpsl-color-slideButton-slider-container-start-background: var(--cpsl-color-background-0);
|
|
191
|
+
--cpsl-color-slideButton-slider-container-end-background: var(--cpsl-color-foreground-0);
|
|
192
|
+
--cpsl-color-slideButton-slider-container-start-border: var(--cpsl-color-background-32);
|
|
193
|
+
--cpsl-color-slideButton-slider-container-end-border: var(--cpsl-color-foreground-32);
|
|
194
|
+
--cpsl-color-slideButton-slider-border: var(--cpsl-color-foreground-32);
|
|
195
|
+
--cpsl-color-slideButton-slider-background: var(--cpsl-color-foreground-0);
|
|
196
|
+
--cpsl-color-slideButton-slider-text: var(--cpsl-color-text-inverted);
|
|
197
|
+
--cpsl-color-slideButton-start-text: var(--cpsl-color-text-secondary);
|
|
198
|
+
--cpsl-color-slideButton-end-text: var(--cpsl-color-text-inverted);
|
|
199
|
+
--cpsl-color-tabs-border: var(--cpsl-color-background-16);
|
|
200
|
+
--cpsl-color-tabs-background: var(--cpsl-color-background-4);
|
|
201
|
+
--cpsl-color-tabs-slider-background: var(--cpsl-color-background-0);
|
|
202
|
+
--cpsl-color-alert-surface-error: #fee4e2;
|
|
203
|
+
--cpsl-color-alert-border-error: #f97066;
|
|
204
|
+
--cpsl-color-switch-surface-default: var(--cpsl-color-background-4);
|
|
205
|
+
--cpsl-color-switch-surface-checked: var(--cpsl-color-foreground-0);
|
|
206
|
+
--cpsl-color-switch-thumb-default: var(--cpsl-color-background-0);
|
|
207
|
+
--cpsl-color-switch-thumb-checked: var(--cpsl-color-background-0);
|
|
208
|
+
--cpsl-color-checkbox-surface-default: var(--cpsl-color-background-0);
|
|
209
|
+
--cpsl-color-checkbox-surface-checked: var(--cpsl-color-foreground-0);
|
|
210
|
+
--cpsl-color-checkbox-border-default: var(--cpsl-color-background-16);
|
|
211
|
+
--cpsl-color-checkbox-border-checked: var(--cpsl-color-foreground-0);
|
|
212
|
+
--cpsl-color-checkbox-icon: var(--cpsl-color-background-0);
|
|
213
|
+
--cpsl-color-radio-surface-default: var(--cpsl-color-background-0);
|
|
214
|
+
--cpsl-color-radio-surface-checked: var(--cpsl-color-background-0);
|
|
215
|
+
--cpsl-color-radio-border-default: var(--cpsl-color-background-16);
|
|
216
|
+
--cpsl-color-radio-border-checked: var(--cpsl-color-foreground-0);
|
|
217
|
+
--cpsl-color-avatar-surface: var(--cpsl-color-background-0);
|
|
218
|
+
--cpsl-color-avatar-border: var(--cpsl-color-foreground-96);
|
|
219
|
+
--cpsl-color-card-surface: var(--cpsl-color-background-0);
|
|
220
|
+
--cpsl-color-card-border: var(--cpsl-color-background-16);
|
|
221
|
+
--cpsl-color-iconGroup-surface: var(--cpsl-color-background-0);
|
|
222
|
+
--cpsl-color-iconGroup-border: var(--cpsl-color-background-16);
|
|
223
|
+
--cpsl-color-iconGroup-icon-disabled: var(--cpsl-color-text-disabled);
|
|
224
|
+
--cpsl-color-iconGroup-icon-default: var(--cpsl-color-text-primary);
|
|
225
|
+
--cpsl-border-radius-input: 12px;
|
|
226
|
+
--cpsl-border-radius-select: 12px;
|
|
227
|
+
--cpsl-border-radius-file: 12px;
|
|
228
|
+
--cpsl-border-radius-alert: 12px;
|
|
229
|
+
--cpsl-border-radius-tabs: 1000px;
|
|
230
|
+
--cpsl-border-radius-primary-button: 12px;
|
|
231
|
+
--cpsl-border-radius-secondary-button: 12px;
|
|
232
|
+
--cpsl-border-radius-tertiary-button: 12px;
|
|
233
|
+
--cpsl-border-radius-destructive-button: 12px;
|
|
234
|
+
--cpsl-border-radius-tile-button: 12px;
|
|
235
|
+
--cpsl-border-radius-modal: 24px;
|
|
236
|
+
--cpsl-border-radius-pill: 1000px;
|
|
237
|
+
--cpsl-border-radius-qr-code: 20px;
|
|
238
|
+
--cpsl-border-radius-info-box: 16px;
|
|
239
|
+
--cpsl-border-radius-table-container: 24px;
|
|
240
|
+
--cpsl-border-radius-switch: 1000px;
|
|
241
|
+
--cpsl-border-radius-checkbox: 4px;
|
|
242
|
+
--cpsl-border-radius-radio: 1000px;
|
|
243
|
+
--cpsl-border-radius-avatar: 12px;
|
|
244
|
+
--cpsl-border-radius-card: 24px;
|
|
245
|
+
--cpsl-border-radius-button-group: 12px;
|
|
246
|
+
--cpsl-font-size-body-2xs: clamp(8px, 0.625rem, 15px);
|
|
247
|
+
--cpsl-font-size-body-xs: clamp(9.6px, 0.75rem, 18px);
|
|
248
|
+
--cpsl-font-size-body-s: clamp(11.2px, 0.875rem, 21px);
|
|
249
|
+
--cpsl-font-size-body-m: clamp(12.8px, 1rem, 24px);
|
|
250
|
+
--cpsl-font-size-body-l: clamp(16px, 1.25rem, 30px);
|
|
251
|
+
--cpsl-font-size-body-xl: clamp(19.2px, 1.5rem, 36px);
|
|
252
|
+
--cpsl-font-size-heading-xs: clamp(19.2px, 1.5rem, 36px);
|
|
253
|
+
--cpsl-font-size-heading-s: clamp(25.6px, 2rem, 48px);
|
|
254
|
+
--cpsl-font-size-heading-m: clamp(32px, 2.5rem, 60px);
|
|
255
|
+
--cpsl-font-size-heading-l: clamp(44.8px, 3.5rem, 84px);
|
|
256
|
+
--cpsl-font-size-heading-xl: clamp(51.2px, 4rem, 96px);
|
|
257
|
+
--cpsl-font-size-heading-2xl: clamp(57.6px, 4.5rem, 108px);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.cpsl-table {
|
|
261
|
+
width: 100%;
|
|
262
|
+
border-spacing: 0;
|
|
263
|
+
border-collapse: separate;
|
|
264
|
+
font-family: var(--cpsl-font-family, inherit);
|
|
265
|
+
}
|
|
266
|
+
.cpsl-table th {
|
|
267
|
+
-webkit-padding-start: var(--table-header-padding-start);
|
|
268
|
+
padding-inline-start: var(--table-header-padding-start);
|
|
269
|
+
-webkit-padding-end: var(--table-header-padding-end);
|
|
270
|
+
padding-inline-end: var(--table-header-padding-end);
|
|
271
|
+
padding-top: var(--table-header-padding-top);
|
|
272
|
+
padding-bottom: var(--table-header-padding-bottom);
|
|
273
|
+
background: var(--table-header-background-color);
|
|
274
|
+
color: var(--cpsl-color-text-primary);
|
|
275
|
+
font-weight: 500;
|
|
276
|
+
font-size: var(--cpsl-font-size-body-xs);
|
|
277
|
+
border-bottom: var(--table-header-border-width) solid var(--table-header-border-color);
|
|
278
|
+
}
|
|
279
|
+
.cpsl-table td {
|
|
280
|
+
-webkit-padding-start: var(--table-content-padding-start);
|
|
281
|
+
padding-inline-start: var(--table-content-padding-start);
|
|
282
|
+
-webkit-padding-end: var(--table-content-padding-end);
|
|
283
|
+
padding-inline-end: var(--table-content-padding-end);
|
|
284
|
+
padding-top: var(--table-content-padding-top);
|
|
285
|
+
padding-bottom: var(--table-content-padding-bottom);
|
|
286
|
+
color: var(--cpsl-color-text-primary);
|
|
287
|
+
font-size: var(--cpsl-font-size-body-s);
|
|
288
|
+
border-bottom: var(--table-content-border-width) solid var(--table-content-border-color);
|
|
289
|
+
}
|
|
290
|
+
.cpsl-table tr:last-child td {
|
|
291
|
+
border-bottom: none;
|
|
292
|
+
}
|
|
293
|
+
.cpsl-table.sticky-header thead {
|
|
294
|
+
position: sticky;
|
|
295
|
+
top: 0;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/*# sourceMappingURL=capsule-core.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/themes/capsule.functions.font.scss","../src/themes/capsule.mixins.scss","../src/css/capsule-core.scss","../src/themes/capsule.globals.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC/CA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACZA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAiCF;EAvBE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAUA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAUA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AAeF;EACE;EAEA;EACA;EACA,aCjDiB;;ADmDjB;ED4PE,uBC3PuH;ED4PvH,sBC5PuH;ED6PvH,qBC7PkD;ED8PlD,oBC9PkD;ED4QpD,aC5QmB;ED6QnB,gBC7QqF;EAEnF;EACA;EACA;EACA;EACA;;AAGF;EDkPE,uBCjP0H;EDkP1H,sBClP0H;EDmP1H,qBCnPmD;EDoPnD,oBCpPmD;EDkQrD,aClQmB;EDmQnB,gBCnQuF;EACrF;EACA;EACA;;AAGF;EACE;;AAIA;EACE;EACA","file":"capsule-core.css","sourcesContent":["@use 'sass:math';\n\n$baselineSize: 16px !default;\n$baselineUnit: 1rem !default;\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font($size, $unit: $baselineUnit) {\n @return (math.div($size, $baselineSize)) * $unit;\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) {\n $baseScale: dynamic-font($size, $unit);\n $maxScale: $size * $maxScale;\n\n @return min($baseScale, $maxScale);\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) {\n $baseScale: dynamic-font($size, $unit);\n $minScale: $size * $minScale;\n\n @return max($minScale, $baseScale);\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) {\n $baseScale: dynamic-font($baseSize, $unit);\n $maxScale: $baseSize * $maxScale;\n $minScale: $baseSize * $minScale;\n\n @return clamp($minScale, $baseScale, $maxScale);\n}\n","/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n * :host {\n * background-color: green;\n * }\n * }\n */\n@mixin tablet-viewport() {\n @media screen and (min-width: 768px) {\n @content;\n }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n * :host {\n * background-color: blue;\n * }\n * }\n */\n@mixin mobile-viewport() {\n @media screen and (max-width: 767px) {\n @content;\n }\n}\n\n@mixin input-cover() {\n @include position(0, null, null, 0);\n @include margin(0);\n\n position: absolute;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background: transparent;\n cursor: pointer;\n\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin visually-hidden() {\n position: absolute;\n\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n width: 100%;\n height: 100%;\n\n margin: 0;\n padding: 0;\n\n border: 0;\n outline: 0;\n clip: rect(0 0 0 0);\n\n opacity: 0;\n overflow: hidden;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n@mixin button-state() {\n @include position(0, 0, 0, 0);\n\n position: absolute;\n\n content: '';\n\n opacity: 0;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $max: map-get($breakpoints, $name);\n @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n $rootSplit: str-split($root, ',');\n $selectors: #{add-root-selector($root, '[dir=rtl]')};\n $selectorsSplit: str-split($selectors, ',');\n\n $hostContextSelectors: ();\n $restSelectors: ();\n $dirSelectors: ();\n\n // Selectors must be split into individual selectors in case the browser\n // doesn't support a specific selector.\n // For example, Firefox and Safari doesn't support `:host-context()`.\n // If an invalid selector is used, then the entire group of selectors\n // will be ignored.\n // @link https://www.w3.org/TR/selectors-3/#grouping\n @each $selector in $selectorsSplit {\n // Group the selectors back into a single selector to optimize the output.\n @if str-index($selector, ':host-context') {\n $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n } @else {\n // Group the selectors back into a single selector to optimize the output.\n $restSelectors: append($restSelectors, $selector, comma);\n }\n }\n\n // Supported by Chrome.\n @if length($hostContextSelectors) > 0 {\n @at-root #{$hostContextSelectors} {\n @content;\n }\n }\n\n // Supported by all browsers.\n @if length($restSelectors) > 0 {\n @at-root #{$restSelectors} {\n @content;\n }\n }\n\n // If browser can support `:dir()`, then add the `:dir()` selectors.\n @supports selector(:dir(rtl)) {\n // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n // `:host-context()` is added:\n // - through the `add-root-selector()` function.\n // - first so that it takes precedence over `:dir()`.\n // For example,\n // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n // -- the app direction is changed dynamically. v17+ works fine.\n // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n // Supported by Firefox.\n @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n @content;\n }\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n @if $flip-rtl != true or $viewBox == null {\n @include multi-dir() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n } @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');\n $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');\n $flipped-url: str-replace($flipped-url, '<polygon', '<polygon #{$transform}');\n $flipped-url: url-encode($flipped-url);\n\n @include ltr() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n @include rtl() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n }\n }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n @if $start == 0 and $end == 0 {\n #{$prop}-left: $start;\n #{$prop}-right: $end;\n } @else {\n -webkit-#{$prop}-start: $start;\n #{$prop}-inline-start: $start;\n -webkit-#{$prop}-end: $end;\n #{$prop}-inline-end: $end;\n }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n @include property-horizontal($prop, $start, $end);\n #{$prop}-top: $top;\n #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n @if $start == $end {\n @include multi-dir() {\n left: $start;\n right: $end;\n }\n } @else {\n @at-root {\n @supports (inset-inline-start: 0) {\n & {\n inset-inline-start: $start;\n inset-inline-end: $end;\n }\n }\n }\n\n // TODO FW-3766\n @at-root {\n @supports not (inset-inline-start: 0) {\n & {\n @include ltr() {\n left: $start;\n right: $end;\n }\n @include rtl() {\n left: unset;\n right: unset;\n\n left: $end;\n right: $start;\n }\n }\n }\n }\n }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n @include position-horizontal($start, $end);\n top: $top;\n bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n @include multi-dir() {\n border-radius: $top-start;\n }\n } @else {\n @include ltr() {\n border-top-left-radius: $top-start;\n border-top-right-radius: $top-end;\n border-bottom-right-radius: $bottom-end;\n border-bottom-left-radius: $bottom-start;\n }\n\n @include rtl() {\n border-top-left-radius: $top-end;\n border-top-right-radius: $top-start;\n border-bottom-right-radius: $bottom-start;\n border-bottom-left-radius: $bottom-end;\n }\n }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n $other-dir: null;\n\n @if $dir == ltr {\n $other-dir: rtl;\n } @else {\n $other-dir: ltr;\n }\n\n @include ltr() {\n direction: $dir;\n }\n @include rtl() {\n direction: $other-dir;\n }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n @if $side == start {\n @include ltr() {\n float: left $decorator;\n }\n @include rtl() {\n float: right $decorator;\n }\n } @else if $side == end {\n @include ltr() {\n float: right $decorator;\n }\n @include rtl() {\n float: left $decorator;\n }\n } @else {\n @include multi-dir() {\n float: $side $decorator;\n }\n }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n @if $horizontal == start or $horizontal == end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n @if $horizontal == start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n } @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n }\n @include rtl() {\n background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n }\n } @else {\n @include multi-dir() {\n background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis == start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n @include rtl() {\n transform-origin: right $y-axis;\n }\n } @else if $x-axis == end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n @include rtl() {\n transform-origin: left $y-axis;\n }\n } @else if $x-axis == left or $x-axis == right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n } @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: str-replace($transform, 'translate3d(');\n $transform: str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n } @else {\n @if $extra == null {\n $extra: $transform;\n } @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x == '0' or $x == null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n } @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n","@import '../themes/capsule.globals.scss';\n\n// Capsule Font Family\n// --------------------------------------------------\n\nhtml {\n --cpsl-default-font: 'Helvetica', sans-serif;\n --cpsl-default-dynamic-font: -apple-system-body;\n --cpsl-font-family: var(--cpsl-default-font);\n}\n\ndiv {\n box-sizing: border-box;\n}\n\nbody.backdrop-no-scroll {\n overflow: hidden;\n}\n\n// Capsule Colors\n// --------------------------------------------------\n// Generates the default color vars\n\n@mixin generate-color($color-name) {\n $value: map-get($colors, $color-name);\n\n --cpsl-color-#{$color-name}: #{$value};\n}\n\n// Capsule Border Radii\n// --------------------------------------------------\n// Generates the default border vars\n\n@mixin generate-border-radius($border-radius-name) {\n $value: map-get($borderRadii, $border-radius-name);\n\n --cpsl-border-radius-#{$border-radius-name}: #{$value};\n}\n\n// Capsule Font Sizes\n// --------------------------------------------------\n// Generates the default font sizes\n\n@mixin generate-font-size($font-size-name) {\n $value: map-get($fontSizes, $font-size-name);\n\n --cpsl-font-size-#{$font-size-name}: #{dynamic-font-clamp(0.8, $value, 1.5)};\n}\n\n:root {\n @each $color-name, $value in $colors {\n @include generate-color($color-name);\n }\n @each $border-radius-name, $value in $borderRadii {\n @include generate-border-radius($border-radius-name);\n }\n @each $font-size-name, $value in $fontSizes {\n @include generate-font-size($font-size-name);\n }\n}\n\n.cpsl-table {\n width: 100%;\n\n border-spacing: 0;\n border-collapse: separate;\n font-family: $font-family-base;\n\n & th {\n @include padding(var(--table-header-padding-top), var(--table-header-padding-end), var(--table-header-padding-bottom), var(--table-header-padding-start));\n\n background: var(--table-header-background-color);\n color: var(--cpsl-color-text-primary);\n font-weight: 500;\n font-size: var(--cpsl-font-size-body-xs);\n border-bottom: var(--table-header-border-width) solid var(--table-header-border-color);\n }\n\n & td {\n @include padding(var(--table-content-padding-top), var(--table-content-padding-end), var(--table-content-padding-bottom), var(--table-content-padding-start));\n color: var(--cpsl-color-text-primary);\n font-size: var(--cpsl-font-size-body-s);\n border-bottom: var(--table-content-border-width) solid var(--table-content-border-color);\n }\n\n & tr:last-child td {\n border-bottom: none;\n }\n\n &.sticky-header {\n & thead {\n position: sticky;\n top: 0;\n }\n }\n}\n","// Global Utility Functions\n@import './capsule.functions.string';\n\n// Global Color Functions\n@import './capsule.functions.color';\n\n// Global Font Functions\n@import './capsule.functions.font';\n\n// Global Mixins\n@import './capsule.mixins';\n\n// Default Theme\n@import './capsule.theme.default';\n\n// Default General\n// --------------------------------------------------\n$font-family-base: var(--cpsl-font-family, inherit) !default;\n$font-size-base: var(--cpsl-font-size-base, 16px) !default;\n\n// The minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries\n$screen-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px,\n) !default;\n"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
/* tslint:disable */
|
|
3
|
+
/* auto-generated react proxies */
|
|
4
|
+
import { createReactComponent } from './react-component-lib/index.js';
|
|
5
|
+
export const CpslAlert = /*@__PURE__*/ createReactComponent('cpsl-alert');
|
|
6
|
+
export const CpslAppBar = /*@__PURE__*/ createReactComponent('cpsl-app-bar');
|
|
7
|
+
export const CpslAuthModal = /*@__PURE__*/ createReactComponent('cpsl-auth-modal');
|
|
8
|
+
export const CpslAvatar = /*@__PURE__*/ createReactComponent('cpsl-avatar');
|
|
9
|
+
export const CpslButton = /*@__PURE__*/ createReactComponent('cpsl-button');
|
|
10
|
+
export const CpslButtonGroup = /*@__PURE__*/ createReactComponent('cpsl-button-group');
|
|
11
|
+
export const CpslCard = /*@__PURE__*/ createReactComponent('cpsl-card');
|
|
12
|
+
export const CpslCheckbox = /*@__PURE__*/ createReactComponent('cpsl-checkbox');
|
|
13
|
+
export const CpslCodeInput = /*@__PURE__*/ createReactComponent('cpsl-code-input');
|
|
14
|
+
export const CpslCol = /*@__PURE__*/ createReactComponent('cpsl-col');
|
|
15
|
+
export const CpslDivider = /*@__PURE__*/ createReactComponent('cpsl-divider');
|
|
16
|
+
export const CpslDrawer = /*@__PURE__*/ createReactComponent('cpsl-drawer');
|
|
17
|
+
export const CpslDropdown = /*@__PURE__*/ createReactComponent('cpsl-dropdown');
|
|
18
|
+
export const CpslFileUpload = /*@__PURE__*/ createReactComponent('cpsl-file-upload');
|
|
19
|
+
export const CpslGrid = /*@__PURE__*/ createReactComponent('cpsl-grid');
|
|
20
|
+
export const CpslHero = /*@__PURE__*/ createReactComponent('cpsl-hero');
|
|
21
|
+
export const CpslIcon = /*@__PURE__*/ createReactComponent('cpsl-icon');
|
|
22
|
+
export const CpslIconGroup = /*@__PURE__*/ createReactComponent('cpsl-icon-group');
|
|
23
|
+
export const CpslIdenticon = /*@__PURE__*/ createReactComponent('cpsl-identicon');
|
|
24
|
+
export const CpslInfoBox = /*@__PURE__*/ createReactComponent('cpsl-info-box');
|
|
25
|
+
export const CpslInput = /*@__PURE__*/ createReactComponent('cpsl-input');
|
|
26
|
+
export const CpslModalV2 = /*@__PURE__*/ createReactComponent('cpsl-modal-v2');
|
|
27
|
+
export const CpslNavButton = /*@__PURE__*/ createReactComponent('cpsl-nav-button');
|
|
28
|
+
export const CpslNavButtonGroup = /*@__PURE__*/ createReactComponent('cpsl-nav-button-group');
|
|
29
|
+
export const CpslOverlay = /*@__PURE__*/ createReactComponent('cpsl-overlay');
|
|
30
|
+
export const CpslPagination = /*@__PURE__*/ createReactComponent('cpsl-pagination');
|
|
31
|
+
export const CpslPill = /*@__PURE__*/ createReactComponent('cpsl-pill');
|
|
32
|
+
export const CpslPopover = /*@__PURE__*/ createReactComponent('cpsl-popover');
|
|
33
|
+
export const CpslProgressIndicator = /*@__PURE__*/ createReactComponent('cpsl-progress-indicator');
|
|
34
|
+
export const CpslQrCode = /*@__PURE__*/ createReactComponent('cpsl-qr-code');
|
|
35
|
+
export const CpslRadio = /*@__PURE__*/ createReactComponent('cpsl-radio');
|
|
36
|
+
export const CpslRow = /*@__PURE__*/ createReactComponent('cpsl-row');
|
|
37
|
+
export const CpslSelect = /*@__PURE__*/ createReactComponent('cpsl-select');
|
|
38
|
+
export const CpslSelectItem = /*@__PURE__*/ createReactComponent('cpsl-select-item');
|
|
39
|
+
export const CpslSlideButton = /*@__PURE__*/ createReactComponent('cpsl-slide-button');
|
|
40
|
+
export const CpslSpinner = /*@__PURE__*/ createReactComponent('cpsl-spinner');
|
|
41
|
+
export const CpslSwitch = /*@__PURE__*/ createReactComponent('cpsl-switch');
|
|
42
|
+
export const CpslTab = /*@__PURE__*/ createReactComponent('cpsl-tab');
|
|
43
|
+
export const CpslTable = /*@__PURE__*/ createReactComponent('cpsl-table');
|
|
44
|
+
export const CpslTabs = /*@__PURE__*/ createReactComponent('cpsl-tabs');
|
|
45
|
+
export const CpslText = /*@__PURE__*/ createReactComponent('cpsl-text');
|
|
46
|
+
export const CpslTileButton = /*@__PURE__*/ createReactComponent('cpsl-tile-button');
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { createElement } from 'react';
|
|
13
|
+
import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils/index.js';
|
|
14
|
+
export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
|
|
15
|
+
if (defineCustomElement !== undefined) {
|
|
16
|
+
defineCustomElement();
|
|
17
|
+
}
|
|
18
|
+
const displayName = dashToPascalCase(tagName);
|
|
19
|
+
const ReactComponent = class extends React.Component {
|
|
20
|
+
constructor(props) {
|
|
21
|
+
super(props);
|
|
22
|
+
this.setComponentElRef = (element) => {
|
|
23
|
+
this.componentEl = element;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
componentDidMount() {
|
|
27
|
+
this.componentDidUpdate(this.props);
|
|
28
|
+
}
|
|
29
|
+
componentDidUpdate(prevProps) {
|
|
30
|
+
attachProps(this.componentEl, this.props, prevProps);
|
|
31
|
+
}
|
|
32
|
+
render() {
|
|
33
|
+
const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
|
|
34
|
+
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
35
|
+
const value = cProps[name];
|
|
36
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
37
|
+
const eventName = name.substring(2).toLowerCase();
|
|
38
|
+
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
39
|
+
acc[name] = value;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
// we should only render strings, booleans, and numbers as attrs in html.
|
|
44
|
+
// objects, functions, arrays etc get synced via properties on mount.
|
|
45
|
+
const type = typeof value;
|
|
46
|
+
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
47
|
+
acc[camelToDashCase(name)] = value;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return acc;
|
|
51
|
+
}, {});
|
|
52
|
+
if (manipulatePropsFunction) {
|
|
53
|
+
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
54
|
+
}
|
|
55
|
+
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
|
|
56
|
+
/**
|
|
57
|
+
* We use createElement here instead of
|
|
58
|
+
* React.createElement to work around a
|
|
59
|
+
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
60
|
+
* React.createElement causes all elements to be rendered
|
|
61
|
+
* as <tagname> instead of the actual Web Component.
|
|
62
|
+
*/
|
|
63
|
+
return createElement(tagName, newProps, children);
|
|
64
|
+
}
|
|
65
|
+
static get displayName() {
|
|
66
|
+
return displayName;
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
70
|
+
if (ReactComponentContext) {
|
|
71
|
+
ReactComponent.contextType = ReactComponentContext;
|
|
72
|
+
}
|
|
73
|
+
return createForwardRef(ReactComponent, displayName);
|
|
74
|
+
};
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
11
|
+
var t = {};
|
|
12
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
13
|
+
t[p] = s[p];
|
|
14
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
15
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
16
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
17
|
+
t[p[i]] = s[p[i]];
|
|
18
|
+
}
|
|
19
|
+
return t;
|
|
20
|
+
};
|
|
21
|
+
import React from 'react';
|
|
22
|
+
import ReactDOM from 'react-dom';
|
|
23
|
+
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils/index.js';
|
|
24
|
+
export const createOverlayComponent = (tagName, controller, customElement) => {
|
|
25
|
+
defineCustomElement(tagName, customElement);
|
|
26
|
+
const displayName = dashToPascalCase(tagName);
|
|
27
|
+
const didDismissEventName = `on${displayName}DidDismiss`;
|
|
28
|
+
const didPresentEventName = `on${displayName}DidPresent`;
|
|
29
|
+
const willDismissEventName = `on${displayName}WillDismiss`;
|
|
30
|
+
const willPresentEventName = `on${displayName}WillPresent`;
|
|
31
|
+
let isDismissing = false;
|
|
32
|
+
class Overlay extends React.Component {
|
|
33
|
+
constructor(props) {
|
|
34
|
+
super(props);
|
|
35
|
+
if (typeof document !== 'undefined') {
|
|
36
|
+
this.el = document.createElement('div');
|
|
37
|
+
}
|
|
38
|
+
this.handleDismiss = this.handleDismiss.bind(this);
|
|
39
|
+
}
|
|
40
|
+
static get displayName() {
|
|
41
|
+
return displayName;
|
|
42
|
+
}
|
|
43
|
+
componentDidMount() {
|
|
44
|
+
if (this.props.isOpen) {
|
|
45
|
+
this.present();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
componentWillUnmount() {
|
|
49
|
+
if (this.overlay) {
|
|
50
|
+
this.overlay.dismiss();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
handleDismiss(event) {
|
|
54
|
+
if (this.props.onDidDismiss) {
|
|
55
|
+
this.props.onDidDismiss(event);
|
|
56
|
+
}
|
|
57
|
+
setRef(this.props.forwardedRef, null);
|
|
58
|
+
}
|
|
59
|
+
shouldComponentUpdate(nextProps) {
|
|
60
|
+
// Check if the overlay component is about to dismiss
|
|
61
|
+
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
|
62
|
+
isDismissing = true;
|
|
63
|
+
}
|
|
64
|
+
return true;
|
|
65
|
+
}
|
|
66
|
+
componentDidUpdate(prevProps) {
|
|
67
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
68
|
+
if (this.overlay) {
|
|
69
|
+
attachProps(this.overlay, this.props, prevProps);
|
|
70
|
+
}
|
|
71
|
+
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
|
72
|
+
this.present(prevProps);
|
|
73
|
+
}
|
|
74
|
+
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
|
|
75
|
+
yield this.overlay.dismiss();
|
|
76
|
+
isDismissing = false;
|
|
77
|
+
/**
|
|
78
|
+
* Now that the overlay is dismissed
|
|
79
|
+
* we need to render again so that any
|
|
80
|
+
* inner components will be unmounted
|
|
81
|
+
*/
|
|
82
|
+
this.forceUpdate();
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
present(prevProps) {
|
|
87
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
88
|
+
const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
|
89
|
+
const elementProps = Object.assign(Object.assign({}, cProps), { ref: this.props.forwardedRef, [didDismissEventName]: this.handleDismiss, [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e), [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e), [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e) });
|
|
90
|
+
this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
|
|
91
|
+
setRef(this.props.forwardedRef, this.overlay);
|
|
92
|
+
attachProps(this.overlay, elementProps, prevProps);
|
|
93
|
+
yield this.overlay.present();
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
render() {
|
|
97
|
+
/**
|
|
98
|
+
* Continue to render the component even when
|
|
99
|
+
* overlay is dismissing otherwise component
|
|
100
|
+
* will be hidden before animation is done.
|
|
101
|
+
*/
|
|
102
|
+
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
return React.forwardRef((props, ref) => {
|
|
106
|
+
return React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
|
|
107
|
+
});
|
|
108
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { camelToDashCase } from './case.js';
|
|
2
|
+
export const attachProps = (node, newProps, oldProps = {}) => {
|
|
3
|
+
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
4
|
+
if (node instanceof Element) {
|
|
5
|
+
// add any classes in className to the class list
|
|
6
|
+
const className = getClassName(node.classList, newProps, oldProps);
|
|
7
|
+
if (className !== '') {
|
|
8
|
+
node.className = className;
|
|
9
|
+
}
|
|
10
|
+
Object.keys(newProps).forEach((name) => {
|
|
11
|
+
if (name === 'children' ||
|
|
12
|
+
name === 'style' ||
|
|
13
|
+
name === 'ref' ||
|
|
14
|
+
name === 'class' ||
|
|
15
|
+
name === 'className' ||
|
|
16
|
+
name === 'forwardedRef') {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
20
|
+
const eventName = name.substring(2);
|
|
21
|
+
const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
|
|
22
|
+
if (!isCoveredByReact(eventNameLc)) {
|
|
23
|
+
syncEvent(node, eventNameLc, newProps[name]);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
node[name] = newProps[name];
|
|
28
|
+
const propType = typeof newProps[name];
|
|
29
|
+
if (propType === 'string') {
|
|
30
|
+
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
export const getClassName = (classList, newProps, oldProps) => {
|
|
37
|
+
const newClassProp = newProps.className || newProps.class;
|
|
38
|
+
const oldClassProp = oldProps.className || oldProps.class;
|
|
39
|
+
// map the classes to Maps for performance
|
|
40
|
+
const currentClasses = arrayToMap(classList);
|
|
41
|
+
const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
|
|
42
|
+
const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
|
|
43
|
+
const finalClassNames = [];
|
|
44
|
+
// loop through each of the current classes on the component
|
|
45
|
+
// to see if it should be a part of the classNames added
|
|
46
|
+
currentClasses.forEach((currentClass) => {
|
|
47
|
+
if (incomingPropClasses.has(currentClass)) {
|
|
48
|
+
// add it as its already included in classnames coming in from newProps
|
|
49
|
+
finalClassNames.push(currentClass);
|
|
50
|
+
incomingPropClasses.delete(currentClass);
|
|
51
|
+
}
|
|
52
|
+
else if (!oldPropClasses.has(currentClass)) {
|
|
53
|
+
// add it as it has NOT been removed by user
|
|
54
|
+
finalClassNames.push(currentClass);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
incomingPropClasses.forEach((s) => finalClassNames.push(s));
|
|
58
|
+
return finalClassNames.join(' ');
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Transforms a React event name to a browser event name.
|
|
62
|
+
*/
|
|
63
|
+
export const transformReactEventName = (eventNameSuffix) => {
|
|
64
|
+
switch (eventNameSuffix) {
|
|
65
|
+
case 'doubleclick':
|
|
66
|
+
return 'dblclick';
|
|
67
|
+
}
|
|
68
|
+
return eventNameSuffix;
|
|
69
|
+
};
|
|
70
|
+
/**
|
|
71
|
+
* Checks if an event is supported in the current execution environment.
|
|
72
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
73
|
+
*/
|
|
74
|
+
export const isCoveredByReact = (eventNameSuffix) => {
|
|
75
|
+
if (typeof document === 'undefined') {
|
|
76
|
+
return true;
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
const eventName = 'on' + transformReactEventName(eventNameSuffix);
|
|
80
|
+
let isSupported = eventName in document;
|
|
81
|
+
if (!isSupported) {
|
|
82
|
+
const element = document.createElement('div');
|
|
83
|
+
element.setAttribute(eventName, 'return;');
|
|
84
|
+
isSupported = typeof element[eventName] === 'function';
|
|
85
|
+
}
|
|
86
|
+
return isSupported;
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
export const syncEvent = (node, eventName, newEventHandler) => {
|
|
90
|
+
const eventStore = node.__events || (node.__events = {});
|
|
91
|
+
const oldEventHandler = eventStore[eventName];
|
|
92
|
+
// Remove old listener so they don't double up.
|
|
93
|
+
if (oldEventHandler) {
|
|
94
|
+
node.removeEventListener(eventName, oldEventHandler);
|
|
95
|
+
}
|
|
96
|
+
// Bind new listener.
|
|
97
|
+
node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
|
|
98
|
+
if (newEventHandler) {
|
|
99
|
+
newEventHandler.call(this, e);
|
|
100
|
+
}
|
|
101
|
+
}));
|
|
102
|
+
};
|
|
103
|
+
const arrayToMap = (arr) => {
|
|
104
|
+
const map = new Map();
|
|
105
|
+
arr.forEach((s) => map.set(s, s));
|
|
106
|
+
return map;
|
|
107
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export const isDevMode = () => {
|
|
2
|
+
return process && process.env && process.env.NODE_ENV === 'development';
|
|
3
|
+
};
|
|
4
|
+
const warnings = {};
|
|
5
|
+
export const deprecationWarning = (key, message) => {
|
|
6
|
+
if (isDevMode()) {
|
|
7
|
+
if (!warnings[key]) {
|
|
8
|
+
console.warn(message);
|
|
9
|
+
warnings[key] = true;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const setRef = (ref, value) => {
|
|
3
|
+
if (typeof ref === 'function') {
|
|
4
|
+
ref(value);
|
|
5
|
+
}
|
|
6
|
+
else if (ref != null) {
|
|
7
|
+
// Cast as a MutableRef so we can assign current
|
|
8
|
+
ref.current = value;
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
export const mergeRefs = (...refs) => {
|
|
12
|
+
return (value) => {
|
|
13
|
+
refs.forEach((ref) => {
|
|
14
|
+
setRef(ref, value);
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export const createForwardRef = (ReactComponent, displayName) => {
|
|
19
|
+
const forwardRef = (props, ref) => {
|
|
20
|
+
return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
|
|
21
|
+
};
|
|
22
|
+
forwardRef.displayName = displayName;
|
|
23
|
+
return React.forwardRef(forwardRef);
|
|
24
|
+
};
|
|
25
|
+
export const defineCustomElement = (tagName, customElement) => {
|
|
26
|
+
if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
|
|
27
|
+
customElements.define(tagName, customElement);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export * from './attachProps.js';
|
|
31
|
+
export * from './case.js';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { JSX } from '@getpara/core-components';
|
|
2
|
+
export declare const CpslAlert: import("react").ForwardRefExoticComponent<JSX.CpslAlert & Omit<import("react").HTMLAttributes<HTMLCpslAlertElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslAlertElement>>;
|
|
3
|
+
export declare const CpslAppBar: import("react").ForwardRefExoticComponent<JSX.CpslAppBar & Omit<import("react").HTMLAttributes<HTMLCpslAppBarElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslAppBarElement>>;
|
|
4
|
+
export declare const CpslAuthModal: import("react").ForwardRefExoticComponent<JSX.CpslAuthModal & Omit<import("react").HTMLAttributes<HTMLCpslAuthModalElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslAuthModalElement>>;
|
|
5
|
+
export declare const CpslAvatar: import("react").ForwardRefExoticComponent<JSX.CpslAvatar & Omit<import("react").HTMLAttributes<HTMLCpslAvatarElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslAvatarElement>>;
|
|
6
|
+
export declare const CpslButton: import("react").ForwardRefExoticComponent<JSX.CpslButton & Omit<import("react").HTMLAttributes<HTMLCpslButtonElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslButtonElement>>;
|
|
7
|
+
export declare const CpslButtonGroup: import("react").ForwardRefExoticComponent<JSX.CpslButtonGroup & Omit<import("react").HTMLAttributes<HTMLCpslButtonGroupElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslButtonGroupElement>>;
|
|
8
|
+
export declare const CpslCard: import("react").ForwardRefExoticComponent<JSX.CpslCard & Omit<import("react").HTMLAttributes<HTMLCpslCardElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslCardElement>>;
|
|
9
|
+
export declare const CpslCheckbox: import("react").ForwardRefExoticComponent<JSX.CpslCheckbox & Omit<import("react").HTMLAttributes<HTMLCpslCheckboxElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslCheckboxElement>>;
|
|
10
|
+
export declare const CpslCodeInput: import("react").ForwardRefExoticComponent<JSX.CpslCodeInput & Omit<import("react").HTMLAttributes<HTMLCpslCodeInputElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslCodeInputElement>>;
|
|
11
|
+
export declare const CpslCol: import("react").ForwardRefExoticComponent<JSX.CpslCol & Omit<import("react").HTMLAttributes<HTMLCpslColElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslColElement>>;
|
|
12
|
+
export declare const CpslDivider: import("react").ForwardRefExoticComponent<JSX.CpslDivider & Omit<import("react").HTMLAttributes<HTMLCpslDividerElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslDividerElement>>;
|
|
13
|
+
export declare const CpslDrawer: import("react").ForwardRefExoticComponent<JSX.CpslDrawer & Omit<import("react").HTMLAttributes<HTMLCpslDrawerElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslDrawerElement>>;
|
|
14
|
+
export declare const CpslDropdown: import("react").ForwardRefExoticComponent<JSX.CpslDropdown & Omit<import("react").HTMLAttributes<HTMLCpslDropdownElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslDropdownElement>>;
|
|
15
|
+
export declare const CpslFileUpload: import("react").ForwardRefExoticComponent<JSX.CpslFileUpload & Omit<import("react").HTMLAttributes<HTMLCpslFileUploadElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslFileUploadElement>>;
|
|
16
|
+
export declare const CpslGrid: import("react").ForwardRefExoticComponent<JSX.CpslGrid & Omit<import("react").HTMLAttributes<HTMLCpslGridElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslGridElement>>;
|
|
17
|
+
export declare const CpslHero: import("react").ForwardRefExoticComponent<JSX.CpslHero & Omit<import("react").HTMLAttributes<HTMLCpslHeroElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslHeroElement>>;
|
|
18
|
+
export declare const CpslIcon: import("react").ForwardRefExoticComponent<JSX.CpslIcon & Omit<import("react").HTMLAttributes<HTMLCpslIconElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslIconElement>>;
|
|
19
|
+
export declare const CpslIconGroup: import("react").ForwardRefExoticComponent<JSX.CpslIconGroup & Omit<import("react").HTMLAttributes<HTMLCpslIconGroupElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslIconGroupElement>>;
|
|
20
|
+
export declare const CpslIdenticon: import("react").ForwardRefExoticComponent<JSX.CpslIdenticon & Omit<import("react").HTMLAttributes<HTMLCpslIdenticonElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslIdenticonElement>>;
|
|
21
|
+
export declare const CpslInfoBox: import("react").ForwardRefExoticComponent<JSX.CpslInfoBox & Omit<import("react").HTMLAttributes<HTMLCpslInfoBoxElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslInfoBoxElement>>;
|
|
22
|
+
export declare const CpslInput: import("react").ForwardRefExoticComponent<JSX.CpslInput & Omit<import("react").HTMLAttributes<HTMLCpslInputElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslInputElement>>;
|
|
23
|
+
export declare const CpslModalV2: import("react").ForwardRefExoticComponent<JSX.CpslModalV2 & Omit<import("react").HTMLAttributes<HTMLCpslModalV2Element>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslModalV2Element>>;
|
|
24
|
+
export declare const CpslNavButton: import("react").ForwardRefExoticComponent<JSX.CpslNavButton & Omit<import("react").HTMLAttributes<HTMLCpslNavButtonElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslNavButtonElement>>;
|
|
25
|
+
export declare const CpslNavButtonGroup: import("react").ForwardRefExoticComponent<JSX.CpslNavButtonGroup & Omit<import("react").HTMLAttributes<HTMLCpslNavButtonGroupElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslNavButtonGroupElement>>;
|
|
26
|
+
export declare const CpslOverlay: import("react").ForwardRefExoticComponent<JSX.CpslOverlay & Omit<import("react").HTMLAttributes<HTMLCpslOverlayElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslOverlayElement>>;
|
|
27
|
+
export declare const CpslPagination: import("react").ForwardRefExoticComponent<JSX.CpslPagination & Omit<import("react").HTMLAttributes<HTMLCpslPaginationElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslPaginationElement>>;
|
|
28
|
+
export declare const CpslPill: import("react").ForwardRefExoticComponent<JSX.CpslPill & Omit<import("react").HTMLAttributes<HTMLCpslPillElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslPillElement>>;
|
|
29
|
+
export declare const CpslPopover: import("react").ForwardRefExoticComponent<JSX.CpslPopover & Omit<import("react").HTMLAttributes<HTMLCpslPopoverElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslPopoverElement>>;
|
|
30
|
+
export declare const CpslProgressIndicator: import("react").ForwardRefExoticComponent<JSX.CpslProgressIndicator & Omit<import("react").HTMLAttributes<HTMLCpslProgressIndicatorElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslProgressIndicatorElement>>;
|
|
31
|
+
export declare const CpslQrCode: import("react").ForwardRefExoticComponent<JSX.CpslQrCode & Omit<import("react").HTMLAttributes<HTMLCpslQrCodeElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslQrCodeElement>>;
|
|
32
|
+
export declare const CpslRadio: import("react").ForwardRefExoticComponent<JSX.CpslRadio & Omit<import("react").HTMLAttributes<HTMLCpslRadioElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslRadioElement>>;
|
|
33
|
+
export declare const CpslRow: import("react").ForwardRefExoticComponent<JSX.CpslRow & Omit<import("react").HTMLAttributes<HTMLCpslRowElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslRowElement>>;
|
|
34
|
+
export declare const CpslSelect: import("react").ForwardRefExoticComponent<JSX.CpslSelect & Omit<import("react").HTMLAttributes<HTMLCpslSelectElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslSelectElement>>;
|
|
35
|
+
export declare const CpslSelectItem: import("react").ForwardRefExoticComponent<JSX.CpslSelectItem & Omit<import("react").HTMLAttributes<HTMLCpslSelectItemElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslSelectItemElement>>;
|
|
36
|
+
export declare const CpslSlideButton: import("react").ForwardRefExoticComponent<JSX.CpslSlideButton & Omit<import("react").HTMLAttributes<HTMLCpslSlideButtonElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslSlideButtonElement>>;
|
|
37
|
+
export declare const CpslSpinner: import("react").ForwardRefExoticComponent<JSX.CpslSpinner & Omit<import("react").HTMLAttributes<HTMLCpslSpinnerElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslSpinnerElement>>;
|
|
38
|
+
export declare const CpslSwitch: import("react").ForwardRefExoticComponent<JSX.CpslSwitch & Omit<import("react").HTMLAttributes<HTMLCpslSwitchElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslSwitchElement>>;
|
|
39
|
+
export declare const CpslTab: import("react").ForwardRefExoticComponent<JSX.CpslTab & Omit<import("react").HTMLAttributes<HTMLCpslTabElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslTabElement>>;
|
|
40
|
+
export declare const CpslTable: import("react").ForwardRefExoticComponent<JSX.CpslTable & Omit<import("react").HTMLAttributes<HTMLCpslTableElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslTableElement>>;
|
|
41
|
+
export declare const CpslTabs: import("react").ForwardRefExoticComponent<JSX.CpslTabs & Omit<import("react").HTMLAttributes<HTMLCpslTabsElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslTabsElement>>;
|
|
42
|
+
export declare const CpslText: import("react").ForwardRefExoticComponent<JSX.CpslText & Omit<import("react").HTMLAttributes<HTMLCpslTextElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslTextElement>>;
|
|
43
|
+
export declare const CpslTileButton: import("react").ForwardRefExoticComponent<JSX.CpslTileButton & Omit<import("react").HTMLAttributes<HTMLCpslTileButtonElement>, "style"> & import("./react-component-lib/interfaces.js").StyleReactProps & import("react").RefAttributes<HTMLCpslTileButtonElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface HTMLStencilElement extends HTMLElement {
|
|
3
|
+
componentOnReady(): Promise<this>;
|
|
4
|
+
}
|
|
5
|
+
interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
|
|
6
|
+
forwardedRef: React.RefObject<ElementType>;
|
|
7
|
+
ref?: React.Ref<any>;
|
|
8
|
+
}
|
|
9
|
+
export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils/index.js").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
|
|
10
|
+
export {};
|
package/dist/types/components/stencil-generated/react-component-lib/createOverlayComponent.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { OverlayEventDetail } from './interfaces.js';
|
|
3
|
+
import { StencilReactForwardedRef } from './utils/index.js';
|
|
4
|
+
interface OverlayElement extends HTMLElement {
|
|
5
|
+
present: () => Promise<void>;
|
|
6
|
+
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
|
7
|
+
}
|
|
8
|
+
export interface ReactOverlayProps {
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
isOpen: boolean;
|
|
11
|
+
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
12
|
+
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
13
|
+
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
14
|
+
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
15
|
+
}
|
|
16
|
+
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
|
17
|
+
create: (options: any) => Promise<OverlayType>;
|
|
18
|
+
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
|
19
|
+
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
|
20
|
+
}> & React.RefAttributes<OverlayType>>;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface EventEmitter<T = any> {
|
|
2
|
+
emit: (data?: T) => CustomEvent<T>;
|
|
3
|
+
}
|
|
4
|
+
export interface StyleReactProps {
|
|
5
|
+
class?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export interface OverlayEventDetail<T = any> {
|
|
12
|
+
data?: T;
|
|
13
|
+
role?: string;
|
|
14
|
+
}
|
|
15
|
+
export interface OverlayInterface {
|
|
16
|
+
el: HTMLElement;
|
|
17
|
+
animated: boolean;
|
|
18
|
+
keyboardClose: boolean;
|
|
19
|
+
overlayIndex: number;
|
|
20
|
+
presented: boolean;
|
|
21
|
+
enterAnimation?: any;
|
|
22
|
+
leaveAnimation?: any;
|
|
23
|
+
didPresent: EventEmitter<void>;
|
|
24
|
+
willPresent: EventEmitter<void>;
|
|
25
|
+
willDismiss: EventEmitter<OverlayEventDetail>;
|
|
26
|
+
didDismiss: EventEmitter<OverlayEventDetail>;
|
|
27
|
+
present(): Promise<void>;
|
|
28
|
+
dismiss(data?: any, role?: string): Promise<boolean>;
|
|
29
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
|
|
2
|
+
export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
|
|
3
|
+
/**
|
|
4
|
+
* Transforms a React event name to a browser event name.
|
|
5
|
+
*/
|
|
6
|
+
export declare const transformReactEventName: (eventNameSuffix: string) => string;
|
|
7
|
+
/**
|
|
8
|
+
* Checks if an event is supported in the current execution environment.
|
|
9
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
10
|
+
*/
|
|
11
|
+
export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
|
|
12
|
+
export declare const syncEvent: (node: Element & {
|
|
13
|
+
__events?: {
|
|
14
|
+
[key: string]: ((e: Event) => any) | undefined;
|
|
15
|
+
};
|
|
16
|
+
}, eventName: string, newEventHandler?: (e: Event) => any) => void;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { StyleReactProps } from '../interfaces.js';
|
|
3
|
+
export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
|
|
4
|
+
export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
|
|
5
|
+
export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
|
|
6
|
+
export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
|
|
7
|
+
export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
|
|
8
|
+
export declare const defineCustomElement: (tagName: string, customElement: any) => void;
|
|
9
|
+
export * from './attachProps.js';
|
|
10
|
+
export * from './case.js';
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@getpara/react-components",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Capsule Core React Components",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"types": "dist/types/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"types": "./dist/types/index.d.ts"
|
|
12
|
+
},
|
|
13
|
+
"./css/capsule-core.css": "./css/capsule-core.css"
|
|
14
|
+
},
|
|
15
|
+
"sideEffects": [
|
|
16
|
+
"*.css"
|
|
17
|
+
],
|
|
18
|
+
"directories": {
|
|
19
|
+
"lib": "lib"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist/",
|
|
23
|
+
"css/"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "node scripts/fixExtensions.js && yarn copy && yarn tsc",
|
|
27
|
+
"tsc": "tsc -p . --outDir ./dist",
|
|
28
|
+
"copy": "node scripts/copy.cjs"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@getpara/core-components": "0.1.0"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@types/react": "^18.2.64",
|
|
35
|
+
"glob": "^11.0.0",
|
|
36
|
+
"react": "^18.2.0",
|
|
37
|
+
"react-dom": "^18.2.0",
|
|
38
|
+
"typescript": "^5.4.2"
|
|
39
|
+
},
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
43
|
+
"gitHead": "625aaa94001a5461dcde8d6775c3b73f3862c76c"
|
|
44
|
+
}
|