1 | import {
|
2 | animation_styles_default
|
3 | } from "./chunk.6B65BPEI.js";
|
4 | import {
|
5 | dist_exports
|
6 | } from "./chunk.H3IZUSJ7.js";
|
7 | import {
|
8 | watch
|
9 | } from "./chunk.W6MGCO4G.js";
|
10 | import {
|
11 | emit
|
12 | } from "./chunk.UY5AQKHP.js";
|
13 | import {
|
14 | e,
|
15 | e2,
|
16 | n
|
17 | } from "./chunk.VKNZYXSO.js";
|
18 | import {
|
19 | $,
|
20 | s
|
21 | } from "./chunk.WWAD5WF4.js";
|
22 | import {
|
23 | __decorateClass
|
24 | } from "./chunk.K2NRSETB.js";
|
25 |
|
26 |
|
27 | var SlAnimation = class extends s {
|
28 | constructor() {
|
29 | super(...arguments);
|
30 | this.hasStarted = false;
|
31 | this.name = "none";
|
32 | this.play = false;
|
33 | this.delay = 0;
|
34 | this.direction = "normal";
|
35 | this.duration = 1e3;
|
36 | this.easing = "linear";
|
37 | this.endDelay = 0;
|
38 | this.fill = "auto";
|
39 | this.iterations = Infinity;
|
40 | this.iterationStart = 0;
|
41 | this.playbackRate = 1;
|
42 | }
|
43 | get currentTime() {
|
44 | var _a, _b;
|
45 | return (_b = (_a = this.animation) == null ? void 0 : _a.currentTime) != null ? _b : 0;
|
46 | }
|
47 | set currentTime(time) {
|
48 | if (this.animation) {
|
49 | this.animation.currentTime = time;
|
50 | }
|
51 | }
|
52 | connectedCallback() {
|
53 | super.connectedCallback();
|
54 | this.createAnimation();
|
55 | this.handleAnimationCancel = this.handleAnimationCancel.bind(this);
|
56 | this.handleAnimationFinish = this.handleAnimationFinish.bind(this);
|
57 | }
|
58 | disconnectedCallback() {
|
59 | super.disconnectedCallback();
|
60 | this.destroyAnimation();
|
61 | }
|
62 | handleAnimationChange() {
|
63 | if (!this.hasUpdated) {
|
64 | return;
|
65 | }
|
66 | this.createAnimation();
|
67 | }
|
68 | handleAnimationFinish() {
|
69 | this.play = false;
|
70 | this.hasStarted = false;
|
71 | emit(this, "sl-finish");
|
72 | }
|
73 | handleAnimationCancel() {
|
74 | this.play = false;
|
75 | this.hasStarted = false;
|
76 | emit(this, "sl-cancel");
|
77 | }
|
78 | handlePlayChange() {
|
79 | if (this.animation) {
|
80 | if (this.play && !this.hasStarted) {
|
81 | this.hasStarted = true;
|
82 | emit(this, "sl-start");
|
83 | }
|
84 | if (this.play) {
|
85 | this.animation.play();
|
86 | } else {
|
87 | this.animation.pause();
|
88 | }
|
89 | return true;
|
90 | }
|
91 | return false;
|
92 | }
|
93 | handlePlaybackRateChange() {
|
94 | if (this.animation) {
|
95 | this.animation.playbackRate = this.playbackRate;
|
96 | }
|
97 | }
|
98 | handleSlotChange() {
|
99 | this.destroyAnimation();
|
100 | this.createAnimation();
|
101 | }
|
102 | async createAnimation() {
|
103 | var _a, _b;
|
104 | const easing = (_a = dist_exports.easings[this.easing]) != null ? _a : this.easing;
|
105 | const keyframes = (_b = this.keyframes) != null ? _b : dist_exports[this.name];
|
106 | const slot = await this.defaultSlot;
|
107 | const element = slot.assignedElements()[0];
|
108 | if (!element || !keyframes) {
|
109 | return false;
|
110 | }
|
111 | this.destroyAnimation();
|
112 | this.animation = element.animate(keyframes, {
|
113 | delay: this.delay,
|
114 | direction: this.direction,
|
115 | duration: this.duration,
|
116 | easing,
|
117 | endDelay: this.endDelay,
|
118 | fill: this.fill,
|
119 | iterationStart: this.iterationStart,
|
120 | iterations: this.iterations
|
121 | });
|
122 | this.animation.playbackRate = this.playbackRate;
|
123 | this.animation.addEventListener("cancel", this.handleAnimationCancel);
|
124 | this.animation.addEventListener("finish", this.handleAnimationFinish);
|
125 | if (this.play) {
|
126 | this.hasStarted = true;
|
127 | emit(this, "sl-start");
|
128 | } else {
|
129 | this.animation.pause();
|
130 | }
|
131 | return true;
|
132 | }
|
133 | destroyAnimation() {
|
134 | if (this.animation) {
|
135 | this.animation.cancel();
|
136 | this.animation.removeEventListener("cancel", this.handleAnimationCancel);
|
137 | this.animation.removeEventListener("finish", this.handleAnimationFinish);
|
138 | this.hasStarted = false;
|
139 | }
|
140 | }
|
141 | cancel() {
|
142 | var _a;
|
143 | (_a = this.animation) == null ? void 0 : _a.cancel();
|
144 | }
|
145 | finish() {
|
146 | var _a;
|
147 | (_a = this.animation) == null ? void 0 : _a.finish();
|
148 | }
|
149 | render() {
|
150 | return $` <slot @slotchange=${this.handleSlotChange}></slot> `;
|
151 | }
|
152 | };
|
153 | SlAnimation.styles = animation_styles_default;
|
154 | __decorateClass([
|
155 | e2("slot")
|
156 | ], SlAnimation.prototype, "defaultSlot", 2);
|
157 | __decorateClass([
|
158 | e()
|
159 | ], SlAnimation.prototype, "name", 2);
|
160 | __decorateClass([
|
161 | e({ type: Boolean, reflect: true })
|
162 | ], SlAnimation.prototype, "play", 2);
|
163 | __decorateClass([
|
164 | e({ type: Number })
|
165 | ], SlAnimation.prototype, "delay", 2);
|
166 | __decorateClass([
|
167 | e()
|
168 | ], SlAnimation.prototype, "direction", 2);
|
169 | __decorateClass([
|
170 | e({ type: Number })
|
171 | ], SlAnimation.prototype, "duration", 2);
|
172 | __decorateClass([
|
173 | e()
|
174 | ], SlAnimation.prototype, "easing", 2);
|
175 | __decorateClass([
|
176 | e({ attribute: "end-delay", type: Number })
|
177 | ], SlAnimation.prototype, "endDelay", 2);
|
178 | __decorateClass([
|
179 | e()
|
180 | ], SlAnimation.prototype, "fill", 2);
|
181 | __decorateClass([
|
182 | e({ type: Number })
|
183 | ], SlAnimation.prototype, "iterations", 2);
|
184 | __decorateClass([
|
185 | e({ attribute: "iteration-start", type: Number })
|
186 | ], SlAnimation.prototype, "iterationStart", 2);
|
187 | __decorateClass([
|
188 | e({ attribute: false })
|
189 | ], SlAnimation.prototype, "keyframes", 2);
|
190 | __decorateClass([
|
191 | e({ attribute: "playback-rate", type: Number })
|
192 | ], SlAnimation.prototype, "playbackRate", 2);
|
193 | __decorateClass([
|
194 | watch("name"),
|
195 | watch("delay"),
|
196 | watch("direction"),
|
197 | watch("duration"),
|
198 | watch("easing"),
|
199 | watch("endDelay"),
|
200 | watch("fill"),
|
201 | watch("iterations"),
|
202 | watch("iterationsStart"),
|
203 | watch("keyframes")
|
204 | ], SlAnimation.prototype, "handleAnimationChange", 1);
|
205 | __decorateClass([
|
206 | watch("play")
|
207 | ], SlAnimation.prototype, "handlePlayChange", 1);
|
208 | __decorateClass([
|
209 | watch("playbackRate")
|
210 | ], SlAnimation.prototype, "handlePlaybackRateChange", 1);
|
211 | SlAnimation = __decorateClass([
|
212 | n("sl-animation")
|
213 | ], SlAnimation);
|
214 |
|
215 | export {
|
216 | SlAnimation
|
217 | };
|