@edmicro/olkit 2.1.6 → 2.1.10

package/lib/shared/styles/animations.css

@@ -1,327 +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;
-  }
-}
+/**
+ * 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.6",
+  "version": "2.1.10",
   "description": "Ôn Luyện Design System UI Component Library for Angular",
   "author": "EDMICRO",
   "license": "MIT",
@@ -24,12 +24,12 @@
     "LICENSES/**"
   ],
   "peerDependencies": {
-    "@angular/common": "^22.0.0",
-    "@angular/core": "^22.0.0",
+    "@angular/common": "^22.1.0",
+    "@angular/core": "^22.1.0",
     "@edmicro/olkit-icons": "^1.0.0",
-    "@angular/forms": ">=18.0.0",
-    "@angular/platform-browser": ">=18.0.0",
-    "@angular/router": ">=18.0.0",
+    "@angular/forms": "^22.1.0",
+    "@angular/platform-browser": "^22.1.0",
+    "@angular/router": "^22.1.0",
     "rxjs": "^7.0.0"
   },
   "dependencies": {