@transcodes/ui-components 0.3.4 → 0.3.6
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/CHANGELOG.md +35 -0
- package/dist/controllers/animation.controller.d.ts +48 -0
- package/dist/controllers/animation.controller.d.ts.map +1 -0
- package/dist/controllers/base.controller.d.ts +14 -0
- package/dist/controllers/base.controller.d.ts.map +1 -0
- package/dist/controllers/history.controller.d.ts +34 -0
- package/dist/controllers/history.controller.d.ts.map +1 -0
- package/dist/controllers/index.d.ts +0 -2
- package/dist/controllers/index.d.ts.map +1 -0
- package/dist/controllers/index.js +10 -12
- package/dist/controllers/loading.controller.d.ts +36 -0
- package/dist/controllers/loading.controller.d.ts.map +1 -0
- package/dist/controllers/match-media.controller.d.ts +32 -0
- package/dist/controllers/match-media.controller.d.ts.map +1 -0
- package/dist/controllers/message-bus.controller.d.ts +45 -0
- package/dist/controllers/message-bus.controller.d.ts.map +1 -0
- package/dist/controllers/storage.controller.d.ts +40 -0
- package/dist/controllers/storage.controller.d.ts.map +1 -0
- package/dist/index.d.ts +4 -295
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +48 -64
- package/dist/primitives/index.d.ts +1 -0
- package/dist/primitives/index.d.ts.map +1 -0
- package/dist/primitives/index.js +18 -16
- package/dist/primitives/tc-box.d.ts +19 -0
- package/dist/primitives/tc-box.d.ts.map +1 -0
- package/dist/primitives/tc-box.js +4 -4
- package/dist/primitives/tc-button.d.ts +25 -0
- package/dist/primitives/tc-button.d.ts.map +1 -0
- package/dist/primitives/tc-button.js +21 -20
- package/dist/primitives/tc-callout.d.ts +22 -0
- package/dist/primitives/tc-callout.d.ts.map +1 -0
- package/dist/primitives/tc-callout.js +5 -4
- package/dist/primitives/tc-card.d.ts +20 -0
- package/dist/primitives/tc-card.d.ts.map +1 -0
- package/dist/primitives/tc-card.js +11 -10
- package/dist/primitives/tc-chip.d.ts +19 -0
- package/dist/primitives/tc-chip.d.ts.map +1 -0
- package/dist/primitives/tc-chip.js +18 -16
- package/dist/primitives/tc-container.d.ts +20 -0
- package/dist/primitives/tc-container.d.ts.map +1 -0
- package/dist/primitives/tc-container.js +12 -10
- package/dist/primitives/tc-divider.d.ts +22 -0
- package/dist/primitives/tc-divider.d.ts.map +1 -0
- package/dist/primitives/tc-divider.js +4 -3
- package/dist/primitives/tc-error-message.d.ts +23 -0
- package/dist/primitives/tc-error-message.d.ts.map +1 -0
- package/dist/primitives/tc-error-message.js +13 -9
- package/dist/primitives/tc-form-header.d.ts +25 -0
- package/dist/primitives/tc-form-header.d.ts.map +1 -0
- package/dist/primitives/tc-form-header.js +9 -7
- package/dist/primitives/tc-icon.d.ts +20 -0
- package/dist/primitives/tc-icon.d.ts.map +1 -0
- package/dist/primitives/tc-icon.js +3 -3
- package/dist/primitives/tc-input-with-chip.d.ts +38 -0
- package/dist/primitives/tc-input-with-chip.d.ts.map +1 -0
- package/dist/primitives/tc-input-with-chip.js +12 -8
- package/dist/primitives/tc-input.d.ts +45 -0
- package/dist/primitives/tc-input.d.ts.map +1 -0
- package/dist/primitives/tc-input.js +11 -9
- package/dist/primitives/tc-item-button.d.ts +30 -0
- package/dist/primitives/tc-item-button.d.ts.map +1 -0
- package/dist/primitives/tc-item-button.js +18 -17
- package/dist/primitives/tc-item.d.ts +25 -0
- package/dist/primitives/tc-item.d.ts.map +1 -0
- package/dist/primitives/tc-item.js +13 -12
- package/dist/primitives/tc-otp-input.d.ts +38 -0
- package/dist/primitives/tc-otp-input.d.ts.map +1 -0
- package/dist/primitives/tc-otp-input.js +6 -4
- package/dist/primitives/tc-page-decoration.d.ts +19 -0
- package/dist/primitives/tc-page-decoration.d.ts.map +1 -0
- package/dist/{widgets → primitives}/tc-page-decoration.js +8 -8
- package/dist/primitives/tc-section.d.ts +19 -0
- package/dist/primitives/tc-section.d.ts.map +1 -0
- package/dist/primitives/tc-section.js +15 -13
- package/dist/primitives/tc-spinner.d.ts +20 -0
- package/dist/primitives/tc-spinner.d.ts.map +1 -0
- package/dist/primitives/tc-spinner.js +17 -17
- package/dist/primitives/tc-symbol.d.ts +20 -0
- package/dist/primitives/tc-symbol.d.ts.map +1 -0
- package/dist/primitives/tc-symbol.js +15 -13
- package/dist/primitives/tc-text.d.ts +31 -0
- package/dist/primitives/tc-text.d.ts.map +1 -0
- package/dist/primitives/tc-text.js +3 -3
- package/dist/primitives/tc-toast.d.ts +34 -0
- package/dist/primitives/tc-toast.d.ts.map +1 -0
- package/dist/primitives/tc-toast.js +3 -3
- package/dist/screens/index.d.ts.map +1 -0
- package/dist/screens/tc-error-screen.d.ts +32 -0
- package/dist/screens/tc-error-screen.d.ts.map +1 -0
- package/dist/screens/tc-error-screen.js +84 -29
- package/dist/screens/tc-loading-screen.d.ts +23 -0
- package/dist/screens/tc-loading-screen.d.ts.map +1 -0
- package/dist/screens/tc-loading-screen.js +16 -11
- package/dist/screens/tc-success-screen.d.ts +31 -0
- package/dist/screens/tc-success-screen.d.ts.map +1 -0
- package/dist/screens/tc-success-screen.js +19 -13
- package/dist/styles/shared.d.ts +20 -0
- package/dist/styles/shared.d.ts.map +1 -0
- package/package.json +13 -13
- package/dist/controllers/form-validation.controller.js +0 -49
- package/dist/widgets/index.d.ts +0 -9
- package/dist/widgets/index.js +0 -18
- package/dist/widgets/tc-authenticator-card.js +0 -213
- package/dist/widgets/tc-floating-button.js +0 -132
- package/dist/widgets/tc-iframe-modal.js +0 -263
- package/dist/widgets/tc-installation-banner.js +0 -234
- package/dist/widgets/tc-ios-installation-guide.js +0 -240
- package/dist/widgets/tc-notification-modal.js +0 -230
- package/dist/widgets/tc-offline-modal.js +0 -202
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* A full-screen error state with animated icon, message, and retry action.
|
|
4
|
+
*
|
|
5
|
+
* @fires tc-retry - Fired when the retry button is clicked
|
|
6
|
+
* @csspart screen - The screen container
|
|
7
|
+
* @csspart content - The content wrapper
|
|
8
|
+
* @csspart icon - The error icon
|
|
9
|
+
* @csspart title - The error title
|
|
10
|
+
* @csspart message - The error message
|
|
11
|
+
* @csspart action - The action button container
|
|
12
|
+
*/
|
|
13
|
+
export declare class TcErrorScreen extends LitElement {
|
|
14
|
+
title: string;
|
|
15
|
+
message: string;
|
|
16
|
+
retryLabel: string;
|
|
17
|
+
showRetry: boolean;
|
|
18
|
+
autoAnimate: boolean;
|
|
19
|
+
private isAnimated;
|
|
20
|
+
private animation;
|
|
21
|
+
static styles: import('lit').CSSResult;
|
|
22
|
+
connectedCallback(): void;
|
|
23
|
+
playAnimation(): Promise<void>;
|
|
24
|
+
private handleRetry;
|
|
25
|
+
render(): import('lit').TemplateResult<1>;
|
|
26
|
+
}
|
|
27
|
+
declare global {
|
|
28
|
+
interface HTMLElementTagNameMap {
|
|
29
|
+
'tc-error-screen': TcErrorScreen;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=tc-error-screen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IACf,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
|
@@ -1,13 +1,30 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { property as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { css as p, LitElement as d, html as m } from "lit";
|
|
2
|
+
import { property as i, state as h, customElement as y } from "lit/decorators.js";
|
|
3
|
+
import { AnimationController as u } from "../controllers/animation.controller.js";
|
|
4
|
+
import "../primitives/tc-icon.js";
|
|
5
|
+
import "../primitives/tc-text.js";
|
|
6
|
+
import "../primitives/tc-button.js";
|
|
7
|
+
import "../primitives/tc-container.js";
|
|
8
|
+
import "../primitives/tc-section.js";
|
|
9
|
+
var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (a, n, o, s) => {
|
|
10
|
+
for (var e = s > 1 ? void 0 : s ? f(n, o) : n, c = a.length - 1, l; c >= 0; c--)
|
|
11
|
+
(l = a[c]) && (e = (s ? l(n, o, e) : l(e)) || e);
|
|
12
|
+
return s && e && g(n, o, e), e;
|
|
7
13
|
};
|
|
8
|
-
let
|
|
14
|
+
let t = class extends d {
|
|
9
15
|
constructor() {
|
|
10
|
-
super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0
|
|
16
|
+
super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.isAnimated = !1, this.animation = new u(this, {
|
|
17
|
+
showDuration: 600,
|
|
18
|
+
hideDuration: 300
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
connectedCallback() {
|
|
22
|
+
super.connectedCallback(), this.autoAnimate && requestAnimationFrame(() => {
|
|
23
|
+
this.playAnimation();
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
async playAnimation() {
|
|
27
|
+
await this.animation.show(), this.isAnimated = !0;
|
|
11
28
|
}
|
|
12
29
|
handleRetry() {
|
|
13
30
|
this.dispatchEvent(
|
|
@@ -18,14 +35,15 @@ let e = class extends m {
|
|
|
18
35
|
);
|
|
19
36
|
}
|
|
20
37
|
render() {
|
|
21
|
-
|
|
38
|
+
const a = this.isAnimated ? "animated" : "";
|
|
39
|
+
return m`
|
|
22
40
|
<div part="screen" class="screen">
|
|
23
41
|
<tc-container>
|
|
24
42
|
<div part="content" class="content">
|
|
25
|
-
<div part="icon" class="icon-container">
|
|
26
|
-
<tc-icon name="alert-circle" size="
|
|
43
|
+
<div part="icon" class="icon-container ${a}">
|
|
44
|
+
<tc-icon name="alert-circle" size="var(--size-icon-xl)"></tc-icon>
|
|
27
45
|
</div>
|
|
28
|
-
<tc-section gap="var(--space-sm)">
|
|
46
|
+
<tc-section gap="var(--space-sm)" class="text-content ${a}">
|
|
29
47
|
<tc-text part="title" tag="h1" size="xl" weight="600" class="title">
|
|
30
48
|
${this.title}
|
|
31
49
|
</tc-text>
|
|
@@ -33,8 +51,8 @@ let e = class extends m {
|
|
|
33
51
|
${this.message}
|
|
34
52
|
</tc-text>
|
|
35
53
|
</tc-section>
|
|
36
|
-
${this.showRetry ?
|
|
37
|
-
<div part="action" class="action">
|
|
54
|
+
${this.showRetry ? m`
|
|
55
|
+
<div part="action" class="action ${a}">
|
|
38
56
|
<tc-button variant="primary" @tc-click=${this.handleRetry}>
|
|
39
57
|
${this.retryLabel}
|
|
40
58
|
</tc-button>
|
|
@@ -46,12 +64,13 @@ let e = class extends m {
|
|
|
46
64
|
`;
|
|
47
65
|
}
|
|
48
66
|
};
|
|
49
|
-
|
|
67
|
+
t.styles = p`
|
|
50
68
|
:host {
|
|
51
69
|
display: flex;
|
|
52
70
|
align-items: center;
|
|
53
71
|
justify-content: center;
|
|
54
72
|
width: 100%;
|
|
73
|
+
height: 100%;
|
|
55
74
|
min-height: inherit;
|
|
56
75
|
}
|
|
57
76
|
|
|
@@ -60,6 +79,7 @@ e.styles = h`
|
|
|
60
79
|
align-items: center;
|
|
61
80
|
justify-content: center;
|
|
62
81
|
width: 100%;
|
|
82
|
+
height: 100%;
|
|
63
83
|
min-height: inherit;
|
|
64
84
|
padding: var(--space-lg);
|
|
65
85
|
box-sizing: border-box;
|
|
@@ -79,11 +99,19 @@ e.styles = h`
|
|
|
79
99
|
display: flex;
|
|
80
100
|
align-items: center;
|
|
81
101
|
justify-content: center;
|
|
82
|
-
|
|
83
|
-
height: 4rem;
|
|
102
|
+
padding: var(--space-md);
|
|
84
103
|
background: var(--error-bg);
|
|
85
104
|
border-radius: var(--radius-full);
|
|
86
105
|
color: var(--error-base);
|
|
106
|
+
transform: scale(0);
|
|
107
|
+
opacity: 0;
|
|
108
|
+
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
109
|
+
opacity 0.3s ease;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.icon-container.animated {
|
|
113
|
+
transform: scale(1);
|
|
114
|
+
opacity: 1;
|
|
87
115
|
}
|
|
88
116
|
|
|
89
117
|
.title {
|
|
@@ -94,26 +122,53 @@ e.styles = h`
|
|
|
94
122
|
color: var(--ink-medium);
|
|
95
123
|
}
|
|
96
124
|
|
|
125
|
+
.text-content {
|
|
126
|
+
opacity: 0;
|
|
127
|
+
transform: translateY(var(--offset-slide-up-md));
|
|
128
|
+
transition: opacity 0.4s ease, transform 0.4s ease;
|
|
129
|
+
transition-delay: 0.4s;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.text-content.animated {
|
|
133
|
+
opacity: 1;
|
|
134
|
+
transform: translateY(0);
|
|
135
|
+
}
|
|
136
|
+
|
|
97
137
|
.action {
|
|
98
138
|
width: 100%;
|
|
99
139
|
margin-top: var(--space-md);
|
|
140
|
+
opacity: 0;
|
|
141
|
+
transform: translateY(var(--offset-slide-up-md));
|
|
142
|
+
transition: opacity 0.4s ease, transform 0.4s ease;
|
|
143
|
+
transition-delay: 0.6s;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.action.animated {
|
|
147
|
+
opacity: 1;
|
|
148
|
+
transform: translateY(0);
|
|
100
149
|
}
|
|
101
150
|
`;
|
|
102
151
|
r([
|
|
103
|
-
|
|
104
|
-
],
|
|
152
|
+
i({ type: String })
|
|
153
|
+
], t.prototype, "title", 2);
|
|
154
|
+
r([
|
|
155
|
+
i({ type: String })
|
|
156
|
+
], t.prototype, "message", 2);
|
|
157
|
+
r([
|
|
158
|
+
i({ type: String, attribute: "retry-label" })
|
|
159
|
+
], t.prototype, "retryLabel", 2);
|
|
105
160
|
r([
|
|
106
|
-
|
|
107
|
-
],
|
|
161
|
+
i({ type: Boolean, attribute: "show-retry" })
|
|
162
|
+
], t.prototype, "showRetry", 2);
|
|
108
163
|
r([
|
|
109
|
-
|
|
110
|
-
],
|
|
164
|
+
i({ type: Boolean, attribute: "auto-animate" })
|
|
165
|
+
], t.prototype, "autoAnimate", 2);
|
|
111
166
|
r([
|
|
112
|
-
|
|
113
|
-
],
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
],
|
|
167
|
+
h()
|
|
168
|
+
], t.prototype, "isAnimated", 2);
|
|
169
|
+
t = r([
|
|
170
|
+
y("tc-error-screen")
|
|
171
|
+
], t);
|
|
117
172
|
export {
|
|
118
|
-
|
|
173
|
+
t as TcErrorScreen
|
|
119
174
|
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* A full-screen loading state with spinner and optional message.
|
|
4
|
+
*
|
|
5
|
+
* @csspart screen - The screen container
|
|
6
|
+
* @csspart content - The content wrapper
|
|
7
|
+
* @csspart spinner - The spinner element
|
|
8
|
+
* @csspart message - The message text
|
|
9
|
+
*/
|
|
10
|
+
export declare class TcLoadingScreen extends LitElement {
|
|
11
|
+
message: string;
|
|
12
|
+
spinnerSize: 'sm' | 'md' | 'lg' | 'auto';
|
|
13
|
+
private loading;
|
|
14
|
+
static styles: import('lit').CSSResult;
|
|
15
|
+
connectedCallback(): void;
|
|
16
|
+
render(): import('lit').TemplateResult<1>;
|
|
17
|
+
}
|
|
18
|
+
declare global {
|
|
19
|
+
interface HTMLElementTagNameMap {
|
|
20
|
+
'tc-loading-screen': TcLoadingScreen;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=tc-loading-screen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,EAC9D,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,CAAQ;IAElB,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAkCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { property as l, customElement as
|
|
3
|
-
import { LoadingController as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { css as m, LitElement as g, html as p } from "lit";
|
|
2
|
+
import { property as l, customElement as h } from "lit/decorators.js";
|
|
3
|
+
import { LoadingController as d } from "../controllers/loading.controller.js";
|
|
4
|
+
import "../primitives/tc-spinner.js";
|
|
5
|
+
import "../primitives/tc-text.js";
|
|
6
|
+
import "../primitives/tc-container.js";
|
|
7
|
+
var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, r, n, i) => {
|
|
8
|
+
for (var e = i > 1 ? void 0 : i ? u(r, n) : r, s = o.length - 1, a; s >= 0; s--)
|
|
9
|
+
(a = o[s]) && (e = (i ? a(r, n, e) : a(e)) || e);
|
|
10
|
+
return i && e && f(r, n, e), e;
|
|
8
11
|
};
|
|
9
|
-
let t = class extends
|
|
12
|
+
let t = class extends g {
|
|
10
13
|
constructor() {
|
|
11
|
-
super(...arguments), this.message = "", this.spinnerSize = "
|
|
14
|
+
super(...arguments), this.message = "", this.spinnerSize = "md", this.loading = new d(this);
|
|
12
15
|
}
|
|
13
16
|
connectedCallback() {
|
|
14
17
|
super.connectedCallback(), this.loading.start();
|
|
@@ -30,12 +33,13 @@ let t = class extends m {
|
|
|
30
33
|
`;
|
|
31
34
|
}
|
|
32
35
|
};
|
|
33
|
-
t.styles =
|
|
36
|
+
t.styles = m`
|
|
34
37
|
:host {
|
|
35
38
|
display: flex;
|
|
36
39
|
align-items: center;
|
|
37
40
|
justify-content: center;
|
|
38
41
|
width: 100%;
|
|
42
|
+
height: 100%;
|
|
39
43
|
min-height: inherit;
|
|
40
44
|
}
|
|
41
45
|
|
|
@@ -44,6 +48,7 @@ t.styles = g`
|
|
|
44
48
|
align-items: center;
|
|
45
49
|
justify-content: center;
|
|
46
50
|
width: 100%;
|
|
51
|
+
height: 100%;
|
|
47
52
|
min-height: inherit;
|
|
48
53
|
padding: var(--space-lg);
|
|
49
54
|
box-sizing: border-box;
|
|
@@ -70,7 +75,7 @@ c([
|
|
|
70
75
|
l({ type: String, attribute: "spinner-size" })
|
|
71
76
|
], t.prototype, "spinnerSize", 2);
|
|
72
77
|
t = c([
|
|
73
|
-
|
|
78
|
+
h("tc-loading-screen")
|
|
74
79
|
], t);
|
|
75
80
|
export {
|
|
76
81
|
t as TcLoadingScreen
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* A full-screen success state with animated checkmark and message.
|
|
4
|
+
*
|
|
5
|
+
* @fires tc-action - Fired when the action button is clicked
|
|
6
|
+
* @csspart screen - The screen container
|
|
7
|
+
* @csspart content - The content wrapper
|
|
8
|
+
* @csspart icon - The success icon container
|
|
9
|
+
* @csspart title - The success title
|
|
10
|
+
* @csspart message - The success message
|
|
11
|
+
* @csspart action - The action button container
|
|
12
|
+
*/
|
|
13
|
+
export declare class TcSuccessScreen extends LitElement {
|
|
14
|
+
title: string;
|
|
15
|
+
message: string;
|
|
16
|
+
actionLabel: string;
|
|
17
|
+
autoAnimate: boolean;
|
|
18
|
+
private isAnimated;
|
|
19
|
+
private animation;
|
|
20
|
+
static styles: import('lit').CSSResult;
|
|
21
|
+
connectedCallback(): void;
|
|
22
|
+
playAnimation(): Promise<void>;
|
|
23
|
+
private handleAction;
|
|
24
|
+
render(): import('lit').TemplateResult<1>;
|
|
25
|
+
}
|
|
26
|
+
declare global {
|
|
27
|
+
interface HTMLElementTagNameMap {
|
|
28
|
+
'tc-success-screen': TcSuccessScreen;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=tc-success-screen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAoGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
|
|
@@ -1,14 +1,19 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { css as p, LitElement as d, html as m } from "lit";
|
|
2
2
|
import { property as r, state as h, customElement as u } from "lit/decorators.js";
|
|
3
|
-
import { AnimationController as
|
|
4
|
-
|
|
3
|
+
import { AnimationController as f } from "../controllers/animation.controller.js";
|
|
4
|
+
import "../primitives/tc-icon.js";
|
|
5
|
+
import "../primitives/tc-text.js";
|
|
6
|
+
import "../primitives/tc-button.js";
|
|
7
|
+
import "../primitives/tc-container.js";
|
|
8
|
+
import "../primitives/tc-section.js";
|
|
9
|
+
var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (a, s, o, n) => {
|
|
5
10
|
for (var e = n > 1 ? void 0 : n ? g(s, o) : s, c = a.length - 1, l; c >= 0; c--)
|
|
6
11
|
(l = a[c]) && (e = (n ? l(s, o, e) : l(e)) || e);
|
|
7
|
-
return n && e &&
|
|
12
|
+
return n && e && y(s, o, e), e;
|
|
8
13
|
};
|
|
9
|
-
let t = class extends
|
|
14
|
+
let t = class extends d {
|
|
10
15
|
constructor() {
|
|
11
|
-
super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new
|
|
16
|
+
super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new f(this, {
|
|
12
17
|
showDuration: 600,
|
|
13
18
|
hideDuration: 300
|
|
14
19
|
});
|
|
@@ -69,12 +74,13 @@ let t = class extends p {
|
|
|
69
74
|
`;
|
|
70
75
|
}
|
|
71
76
|
};
|
|
72
|
-
t.styles =
|
|
77
|
+
t.styles = p`
|
|
73
78
|
:host {
|
|
74
79
|
display: flex;
|
|
75
80
|
align-items: center;
|
|
76
81
|
justify-content: center;
|
|
77
82
|
width: 100%;
|
|
83
|
+
height: 100%;
|
|
78
84
|
min-height: inherit;
|
|
79
85
|
}
|
|
80
86
|
|
|
@@ -83,6 +89,7 @@ t.styles = d`
|
|
|
83
89
|
align-items: center;
|
|
84
90
|
justify-content: center;
|
|
85
91
|
width: 100%;
|
|
92
|
+
height: 100%;
|
|
86
93
|
min-height: inherit;
|
|
87
94
|
padding: var(--space-lg);
|
|
88
95
|
box-sizing: border-box;
|
|
@@ -102,8 +109,7 @@ t.styles = d`
|
|
|
102
109
|
display: flex;
|
|
103
110
|
align-items: center;
|
|
104
111
|
justify-content: center;
|
|
105
|
-
|
|
106
|
-
height: 5rem;
|
|
112
|
+
padding: var(--space-md);
|
|
107
113
|
background: var(--alpha-success10);
|
|
108
114
|
border-radius: var(--radius-full);
|
|
109
115
|
color: var(--accent-success);
|
|
@@ -119,8 +125,8 @@ t.styles = d`
|
|
|
119
125
|
}
|
|
120
126
|
|
|
121
127
|
.checkmark {
|
|
122
|
-
width:
|
|
123
|
-
height:
|
|
128
|
+
width: var(--size-icon-xl);
|
|
129
|
+
height: var(--size-icon-xl);
|
|
124
130
|
stroke-dasharray: 50;
|
|
125
131
|
stroke-dashoffset: 50;
|
|
126
132
|
}
|
|
@@ -145,7 +151,7 @@ t.styles = d`
|
|
|
145
151
|
|
|
146
152
|
.text-content {
|
|
147
153
|
opacity: 0;
|
|
148
|
-
transform: translateY(
|
|
154
|
+
transform: translateY(var(--offset-slide-up-md));
|
|
149
155
|
transition: opacity 0.4s ease, transform 0.4s ease;
|
|
150
156
|
transition-delay: 0.4s;
|
|
151
157
|
}
|
|
@@ -159,7 +165,7 @@ t.styles = d`
|
|
|
159
165
|
width: 100%;
|
|
160
166
|
margin-top: var(--space-md);
|
|
161
167
|
opacity: 0;
|
|
162
|
-
transform: translateY(
|
|
168
|
+
transform: translateY(var(--offset-slide-up-md));
|
|
163
169
|
transition: opacity 0.4s ease, transform 0.4s ease;
|
|
164
170
|
transition-delay: 0.6s;
|
|
165
171
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { CSSResult } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Design-tokens component styles as Lit CSSResult
|
|
4
|
+
* Use this in your component's static styles:
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```ts
|
|
8
|
+
* import { sharedStyles } from '../styles/shared.js';
|
|
9
|
+
*
|
|
10
|
+
* @customElement('my-component')
|
|
11
|
+
* export class MyComponent extends LitElement {
|
|
12
|
+
* static override styles = [sharedStyles, css`
|
|
13
|
+
* // component-specific styles
|
|
14
|
+
* `];
|
|
15
|
+
* }
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare const sharedStyles: CSSResult;
|
|
19
|
+
export default sharedStyles;
|
|
20
|
+
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/styles/shared.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,SAAsC,CAAC;AAElE,eAAe,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transcodes/ui-components",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Lit 3.x component library with Reactive Controllers",
|
|
6
6
|
"keywords": [
|
|
@@ -32,7 +32,9 @@
|
|
|
32
32
|
"module": "./dist/index.js",
|
|
33
33
|
"types": "./dist/index.d.ts",
|
|
34
34
|
"sideEffects": [
|
|
35
|
-
"dist/**/*.js"
|
|
35
|
+
"dist/**/*.js",
|
|
36
|
+
"src/**/*.ts",
|
|
37
|
+
"src/**/*.js"
|
|
36
38
|
],
|
|
37
39
|
"exports": {
|
|
38
40
|
".": {
|
|
@@ -43,10 +45,6 @@
|
|
|
43
45
|
"types": "./dist/primitives/index.d.ts",
|
|
44
46
|
"import": "./dist/primitives/index.js"
|
|
45
47
|
},
|
|
46
|
-
"./widgets": {
|
|
47
|
-
"types": "./dist/widgets/index.d.ts",
|
|
48
|
-
"import": "./dist/widgets/index.js"
|
|
49
|
-
},
|
|
50
48
|
"./screens": {
|
|
51
49
|
"types": "./dist/screens/index.d.ts",
|
|
52
50
|
"import": "./dist/screens/index.js"
|
|
@@ -64,7 +62,9 @@
|
|
|
64
62
|
],
|
|
65
63
|
"scripts": {
|
|
66
64
|
"build": "tsc && vite build",
|
|
65
|
+
"prebuild-storybook": "cd ../design-tokens && bun run build && cd ../ui-components && cp -r ../design-tokens/build .storybook/design-tokens",
|
|
67
66
|
"build-storybook": "storybook build",
|
|
67
|
+
"predev": "cd ../design-tokens && bun run build && cd ../ui-components && cp -r ../design-tokens/build .storybook/design-tokens",
|
|
68
68
|
"clean": "rm -rf dist",
|
|
69
69
|
"dev": "storybook dev -p 6006",
|
|
70
70
|
"preview": "vite preview",
|
|
@@ -74,16 +74,16 @@
|
|
|
74
74
|
"lit": "^3.0.0"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@transcodes/design-tokens": "^0.3.
|
|
77
|
+
"@transcodes/design-tokens": "^0.3.6"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@storybook/addon-a11y": "^10.1.
|
|
81
|
-
"@storybook/addon-docs": "^10.1.
|
|
82
|
-
"@storybook/addon-links": "^10.1.
|
|
83
|
-
"@storybook/web-components": "^10.1.
|
|
84
|
-
"@storybook/web-components-vite": "^10.1.
|
|
80
|
+
"@storybook/addon-a11y": "^10.1.9",
|
|
81
|
+
"@storybook/addon-docs": "^10.1.9",
|
|
82
|
+
"@storybook/addon-links": "^10.1.9",
|
|
83
|
+
"@storybook/web-components": "^10.1.9",
|
|
84
|
+
"@storybook/web-components-vite": "^10.1.9",
|
|
85
85
|
"lit": "^3.3.1",
|
|
86
|
-
"storybook": "^10.1.
|
|
86
|
+
"storybook": "^10.1.9",
|
|
87
87
|
"typescript": "^5.9.3",
|
|
88
88
|
"vite": "^7.2.7",
|
|
89
89
|
"vite-plugin-dts": "^4.5.4"
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { BaseController as o } from "./base.controller.js";
|
|
2
|
-
class i extends o {
|
|
3
|
-
constructor() {
|
|
4
|
-
super(...arguments), this.errors = /* @__PURE__ */ new Map();
|
|
5
|
-
}
|
|
6
|
-
get isValid() {
|
|
7
|
-
return this.errors.size === 0;
|
|
8
|
-
}
|
|
9
|
-
getError(r) {
|
|
10
|
-
return this.errors.get(r);
|
|
11
|
-
}
|
|
12
|
-
getAllErrors() {
|
|
13
|
-
return new Map(this.errors);
|
|
14
|
-
}
|
|
15
|
-
validate(r, e, s) {
|
|
16
|
-
this.clearError(r);
|
|
17
|
-
for (const t of s)
|
|
18
|
-
if (!this.runRule(e, t))
|
|
19
|
-
return this.errors.set(r, t.message), this.host.requestUpdate(), !1;
|
|
20
|
-
return !0;
|
|
21
|
-
}
|
|
22
|
-
clearError(r) {
|
|
23
|
-
this.errors.has(r) && (this.errors.delete(r), this.host.requestUpdate());
|
|
24
|
-
}
|
|
25
|
-
reset() {
|
|
26
|
-
this.errors.clear(), this.host.requestUpdate();
|
|
27
|
-
}
|
|
28
|
-
runRule(r, e) {
|
|
29
|
-
switch (e.type) {
|
|
30
|
-
case "required":
|
|
31
|
-
return r.trim().length > 0;
|
|
32
|
-
case "email":
|
|
33
|
-
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r);
|
|
34
|
-
case "minLength":
|
|
35
|
-
return r.length >= e.value;
|
|
36
|
-
case "maxLength":
|
|
37
|
-
return r.length <= e.value;
|
|
38
|
-
case "pattern":
|
|
39
|
-
return e.value.test(r);
|
|
40
|
-
case "custom":
|
|
41
|
-
return e.validator ? e.validator(r) : !0;
|
|
42
|
-
default:
|
|
43
|
-
return !0;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
export {
|
|
48
|
-
i as FormValidationController
|
|
49
|
-
};
|
package/dist/widgets/index.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export { TcAuthenticatorCard } from './tc-authenticator-card.js';
|
|
2
|
-
export { TcFloatingButton } from './tc-floating-button.js';
|
|
3
|
-
export { TcIframeModal } from './tc-iframe-modal.js';
|
|
4
|
-
export { TcInstallationBanner } from './tc-installation-banner.js';
|
|
5
|
-
export { TcIosInstallationGuide } from './tc-ios-installation-guide.js';
|
|
6
|
-
export { TcNotificationModal } from './tc-notification-modal.js';
|
|
7
|
-
export { TcOfflineModal } from './tc-offline-modal.js';
|
|
8
|
-
export { TcPageDecoration } from './tc-page-decoration.js';
|
|
9
|
-
//# sourceMappingURL=index.d.ts.map
|
package/dist/widgets/index.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { TcAuthenticatorCard as t } from "./tc-authenticator-card.js";
|
|
2
|
-
import { TcFloatingButton as e } from "./tc-floating-button.js";
|
|
3
|
-
import { TcIframeModal as n } from "./tc-iframe-modal.js";
|
|
4
|
-
import { TcInstallationBanner as i } from "./tc-installation-banner.js";
|
|
5
|
-
import { TcIosInstallationGuide as m } from "./tc-ios-installation-guide.js";
|
|
6
|
-
import { TcNotificationModal as x } from "./tc-notification-modal.js";
|
|
7
|
-
import { TcOfflineModal as d } from "./tc-offline-modal.js";
|
|
8
|
-
import { TcPageDecoration as s } from "./tc-page-decoration.js";
|
|
9
|
-
export {
|
|
10
|
-
t as TcAuthenticatorCard,
|
|
11
|
-
e as TcFloatingButton,
|
|
12
|
-
n as TcIframeModal,
|
|
13
|
-
i as TcInstallationBanner,
|
|
14
|
-
m as TcIosInstallationGuide,
|
|
15
|
-
x as TcNotificationModal,
|
|
16
|
-
d as TcOfflineModal,
|
|
17
|
-
s as TcPageDecoration
|
|
18
|
-
};
|