chunk.ZSAL2RTX.js 5.5 KB

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