@edmicro/olkit 2.1.0 → 2.1.1

package/lib/shared/styles/animations.css

@@ -0,0 +1,327 @@
+/**
+ * Core Animation Classes
+ * Migration từ @angular/animations sang CSS animations
+ */
+
+/* ========================================
+   FADE ANIMATIONS
+   ======================================== */
+
+/* Fade In */
+.fade-in {
+  animation: fadeIn var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+.fade-in-fast {
+  animation: fadeIn var(--anim-duration-fast, 150ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Fade Out */
+.fade-out {
+  opacity: 0;
+  transition: opacity var(--anim-duration-normal, 300ms) var(--anim-ease-in, ease-in);
+}
+
+/* ========================================
+   SLIDE ANIMATIONS
+   ======================================== */
+
+/* Slide Down (từ trên xuống) */
+.slide-down-enter {
+  animation: slideDown var(--anim-duration-normal, 300ms)
+    var(--anim-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
+}
+
+.slide-down-leave {
+  opacity: 0;
+  transform: translateY(-100%);
+  transition: all var(--anim-duration-normal, 300ms) cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Slide In from Right (Toast) */
+.toast-slide-enter {
+  animation: toastSlideIn var(--anim-duration-normal, 300ms)
+    var(--anim-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
+}
+
+.toast-slide-leave {
+  opacity: 0;
+  transform: translateX(100%);
+  transition: all 200ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+@keyframes toastSlideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Slide In Up */
+.slide-in-up {
+  animation: slideInUp var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Slide In Down */
+.slide-in-down {
+  animation: slideInDown var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Slide In Left */
+.slide-in-left {
+  animation: slideInLeft var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Slide In Right */
+.slide-in-right {
+  animation: slideInRight var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ========================================
+   SCALE ANIMATIONS
+   ======================================== */
+
+/* Scale In */
+.scale-in {
+  animation: scaleIn var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Scale Out */
+.scale-out {
+  opacity: 0;
+  transform: scale(0.95);
+  transition: all var(--anim-duration-normal, 300ms) var(--anim-ease-in, ease-in);
+}
+
+/* Menu Scale (Speed Dial) */
+.menu-scale-enter {
+  animation: menuScaleIn var(--anim-duration-fast, 150ms)
+    var(--anim-ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
+}
+
+.menu-scale-leave {
+  opacity: 0;
+  transform: scale(0.85);
+  transition: all 100ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@keyframes menuScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ========================================
+   COMBINED ANIMATIONS
+   ======================================== */
+
+/* Fade + Scale */
+.fade-scale-enter {
+  animation: fadeScaleIn var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+.fade-scale-leave {
+  opacity: 0;
+  transform: scale(0.95);
+  transition: all var(--anim-duration-normal, 300ms) var(--anim-ease-in, ease-in);
+}
+
+@keyframes fadeScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ========================================
+   COMPONENT-SPECIFIC ANIMATIONS
+   ======================================== */
+
+/* Alert Fade Out */
+.alert-fade-out {
+  opacity: 0;
+  transform: translateY(-8px);
+  transition: all var(--anim-duration-normal, 300ms) ease-out;
+}
+
+/* Tooltip Fade Enter */
+.tooltip-fade-enter {
+  animation: fadeIn var(--anim-duration-fast, 150ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+/* Backdrop */
+.backdrop-enter {
+  animation: fadeIn var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+.backdrop-leave {
+  opacity: 0;
+  transition: opacity var(--anim-duration-normal, 300ms) var(--anim-ease-in, ease-in);
+}
+
+/* ========================================
+   EXPAND/COLLAPSE
+   ======================================== */
+
+.expand-enter {
+  animation: expandIn var(--anim-duration-normal, 300ms) var(--anim-ease-out, ease-out) forwards;
+}
+
+.collapse-leave {
+  overflow: hidden;
+  height: 0;
+  opacity: 0;
+  transition: all var(--anim-duration-normal, 300ms) var(--anim-ease-in, ease-in);
+}
+
+@keyframes expandIn {
+  from {
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+  to {
+    height: auto;
+    opacity: 1;
+  }
+}
+
+/* ========================================
+   ROTATE
+   ======================================== */
+
+.rotate {
+  transition: transform var(--anim-duration-normal, 300ms)
+    var(--anim-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+/* ========================================
+   UTILITIES
+   ======================================== */
+
+/* Stagger delay utilities */
+.stagger-delay-1 {
+  animation-delay: 50ms;
+}
+.stagger-delay-2 {
+  animation-delay: 100ms;
+}
+.stagger-delay-3 {
+  animation-delay: 150ms;
+}
+.stagger-delay-4 {
+  animation-delay: 200ms;
+}
+.stagger-delay-5 {
+  animation-delay: 250ms;
+}
+
+/* Animation fill mode utilities */
+.anim-forwards {
+  animation-fill-mode: forwards;
+}
+.anim-backwards {
+  animation-fill-mode: backwards;
+}
+.anim-both {
+  animation-fill-mode: both;
+}
+
+/* Prevent animation on prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edmicro/olkit",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Ôn Luyện Design System UI Component Library for Angular",
   "author": "EDMICRO",
   "license": "MIT",