UNPKG

5.52 kBJavaScriptView Raw
1import {
2 animation_styles_default
3} from "./chunk.6B65BPEI.js";
4import {
5 dist_exports
6} from "./chunk.H3IZUSJ7.js";
7import {
8 watch
9} from "./chunk.W6MGCO4G.js";
10import {
11 emit
12} from "./chunk.UY5AQKHP.js";
13import {
14 e,
15 e2,
16 n
17} from "./chunk.VKNZYXSO.js";
18import {
19 $,
20 s
21} from "./chunk.WWAD5WF4.js";
22import {
23 __decorateClass
24} from "./chunk.K2NRSETB.js";
25
26// src/components/animation/animation.ts
27var 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};
153SlAnimation.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);
211SlAnimation = __decorateClass([
212 n("sl-animation")
213], SlAnimation);
214
215export {
216 SlAnimation
217};