@flusys/ng-layout 5.5.0 → 6.0.0-beta.2

package/assets/layout/_core.scss

@@ -22,3 +22,22 @@ a {
 .layout-wrapper {
     min-height: 100vh;
 }
+
+@keyframes scalein {
+    0% { opacity: 0; transform: scaleY(0.8); }
+    100% { opacity: 1; transform: scaleY(1); }
+}
+
+@keyframes fadeout {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+.animate-scalein {
+    animation: scalein 0.12s cubic-bezier(0, 0, 0.2, 1);
+    transform-origin: top center;
+}
+
+.animate-fadeout {
+    animation: fadeout 0.1s linear forwards;
+}

package/assets/layout/_forms.scss

@@ -1,17 +1,17 @@
 /* ========================================
-   Native Form Elements - PrimeNG Style
+   Native Form Elements
    ======================================== */
 
-/* Native select styled like PrimeNG p-select */
-select.p-select-native {
+/* Native select element */
+select.ui-select {
   width: 100%;
   padding: 0.5rem 2.5rem 0.5rem 0.75rem;
   font-size: 1rem;
   font-family: inherit;
-  background: var(--p-form-field-background, #ffffff);
-  border: 1px solid var(--p-form-field-border-color, #d1d5db);
-  border-radius: var(--p-border-radius-md, 6px);
-  color: var(--p-text-color, #374151);
+  background: var(--f-form-field-background, #ffffff);
+  border: 1px solid var(--f-form-field-border-color, #d1d5db);
+  border-radius: var(--f-border-radius-md, 6px);
+  color: var(--f-text-color, #374151);
   transition: border-color 0.2s, box-shadow 0.2s;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
@@ -20,35 +20,15 @@ select.p-select-native {
   cursor: pointer;
 }
 
-select.p-select-native:focus {
+select.ui-select:focus {
   outline: none;
-  border-color: var(--p-primary-color, #3b82f6);
+  border-color: var(--f-primary-color, #3b82f6);
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }
 
-select.p-select-native:disabled {
-  background-color: var(--p-form-field-disabled-background, #f3f4f6);
-  color: var(--p-form-field-disabled-color, #9ca3af);
+select.ui-select:disabled {
+  background-color: var(--f-form-field-disabled-background, #f3f4f6);
+  color: var(--f-form-field-disabled-color, #9ca3af);
   cursor: not-allowed;
 }
 
-/* Native checkbox styled like PrimeNG p-checkbox */
-.p-checkbox-native {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  user-select: none;
-}
-
-.p-checkbox-native input[type="checkbox"] {
-  width: 1.25rem;
-  height: 1.25rem;
-  accent-color: var(--p-primary-color, #3b82f6);
-  cursor: pointer;
-  margin: 0;
-}
-
-.p-checkbox-native span {
-  font-weight: 500;
-}

package/assets/layout/_menu.scss

@@ -50,8 +50,8 @@
 
     li.active-menuitem {
         >a {
-            background-color: var(--p-primary-color);
-            color: var(--p-primary-contrast-color) !important;
+            background-color: var(--f-primary-color);
+            color: var(--f-primary-contrast-color) !important;
 
             .layout-submenu-toggler {
                 transform: rotate(-180deg);
@@ -89,12 +89,12 @@
 
             &.active-route {
                 font-weight: 600;
-                background-color: var(--p-primary-color);
-                color: var(--p-primary-contrast-color)
+                background-color: var(--f-primary-color);
+                color: var(--f-primary-contrast-color)
             }
 
             &:not(.active-route):hover {
-                color: var(--p-primary-color);
+                color: var(--f-primary-color);
                 font-weight: 600;
             }
         }

package/assets/layout/_rtl.scss

@@ -1,7 +1,7 @@
 // RTL Support using CSS Logical Properties and dir="rtl" overrides
 
 // Base RTL styles
-html[dir='rtl'] {
+html[dir="rtl"] {
   // Note: Topbar RTL styles are in _topbar.scss for better specificity
 
   // Layout sidebar positioning - move to right side
@@ -104,11 +104,11 @@ html[dir='rtl'] {
 
   // Flip navigation arrows
   .pi-chevron-left::before {
-    content: '\e901'; // pi-chevron-right icon code
+    content: "\e901"; // pi-chevron-right icon code
   }
 
   .pi-chevron-right::before {
-    content: '\e900'; // pi-chevron-left icon code
+    content: "\e900"; // pi-chevron-left icon code
   }
 
   // Calendar grid direction
@@ -364,7 +364,7 @@ html[dir='rtl'] {
 
 // Desktop RTL layout adjustments
 @media (min-width: 992px) {
-  html[dir='rtl'] {
+  html[dir="rtl"] {
     .layout-wrapper {
       &.layout-overlay {
         .layout-main-container {
@@ -423,7 +423,7 @@ html[dir='rtl'] {
 
 // Mobile RTL layout adjustments
 @media (max-width: 991px) {
-  html[dir='rtl'] {
+  html[dir="rtl"] {
     .layout-wrapper {
       .layout-main-container {
         margin-left: 0;

package/assets/layout/_topbar.scss

@@ -67,7 +67,7 @@
       @include focused();
     }
 
-    i {
+    ui-icon {
       font-size: 1.25rem;
     }
 
@@ -163,15 +163,16 @@
 
       .layout-topbar-action {
         display: flex;
+        align-items: center;
         width: 100%;
         height: auto;
         justify-content: flex-start;
+        gap: 0.5rem;
         border-radius: var(--content-border-radius);
         padding: 0.5rem 1rem;
 
-        i {
+        ui-icon {
           font-size: 1rem;
-          margin-right: 0.5rem;
         }
 
         span {

package/assets/layout/_topbar_nav.scss

@@ -67,8 +67,8 @@ $submenu-icon-margin: 0.5rem;
   }
 
   &.active-route {
-    background-color: var(--p-primary-color);
-    color: var(--p-primary-contrast-color);
+    background-color: var(--f-primary-color);
+    color: var(--f-primary-contrast-color);
   }
 }
 
@@ -296,8 +296,8 @@ $submenu-icon-margin: 0.5rem;
           }
 
           &.active-route {
-            background-color: var(--p-primary-color);
-            color: var(--p-primary-contrast-color);
+            background-color: var(--f-primary-color);
+            color: var(--f-primary-contrast-color);
           }
         }
 
@@ -336,8 +336,8 @@ $submenu-icon-margin: 0.5rem;
 
         // Handle active state with children
         &.active-menuitem > a {
-          background-color: var(--p-primary-color);
-          color: var(--p-primary-contrast-color);
+          background-color: var(--f-primary-color);
+          color: var(--f-primary-contrast-color);
         }
       }
     }

package/assets/layout/_typography.scss

@@ -4,7 +4,6 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 1.5rem 0 1rem 0;
   font-family: inherit;
   font-weight: 700;
   line-height: 1.5;

package/assets/layout/variables/_common.scss

@@ -1,20 +1,20 @@
 :root {
-    --primary-color: var(--p-primary-color);
-    --primary-contrast-color: var(--p-primary-contrast-color);
-    --text-color: var(--p-text-color);
-    --text-color-secondary: var(--p-text-muted-color);
-    --surface-border: var(--p-content-border-color);
-    --surface-card: var(--p-content-background);
-    --surface-hover: var(--p-content-hover-background);
-    --surface-overlay: var(--p-overlay-popover-background);
-    --transition-duration: var(--p-transition-duration);
-    --maskbg: var(--p-mask-background);
-    --content-border-radius: var(--p-content-border-radius);
+    --primary-color: var(--f-primary-color);
+    --primary-contrast-color: var(--f-primary-contrast-color);
+    --text-color: var(--f-text-color);
+    --text-color-secondary: var(--f-text-muted-color);
+    --surface-border: var(--f-content-border-color);
+    --surface-card: var(--f-content-background);
+    --surface-hover: var(--f-content-hover-background);
+    --surface-overlay: var(--f-overlay-popover-background);
+    --transition-duration: var(--f-transition-duration);
+    --maskbg: var(--f-mask-background);
+    --content-border-radius: var(--f-content-border-radius);
     --layout-section-transition-duration: 0.2s;
-    --element-transition-duration: var(--p-transition-duration);
-    --focus-ring-width: var(--p-focus-ring-width);
-    --focus-ring-style: var(--p-focus-ring-style);
-    --focus-ring-color: var(--p-focus-ring-color);
-    --focus-ring-offset: var(--p-focus-ring-offset);
-    --focus-ring-shadow: var(--p-focus-ring-shadow);
+    --element-transition-duration: var(--f-transition-duration);
+    --focus-ring-width: var(--f-focus-ring-width);
+    --focus-ring-style: var(--f-focus-ring-style);
+    --focus-ring-color: var(--f-focus-ring-color);
+    --focus-ring-offset: var(--f-focus-ring-offset);
+    --focus-ring-shadow: var(--f-focus-ring-shadow);
 }

package/assets/layout/variables/_dark.scss

@@ -1,5 +1,5 @@
 :root[class*='app-dark'] {
-    --surface-ground: var(--p-surface-950);
-    --code-background: var(--p-surface-800);
-    --code-color: var(--p-surface-100);
+    --surface-ground: var(--f-surface-950);
+    --code-background: var(--f-surface-800);
+    --code-color: var(--f-surface-100);
 }

package/assets/layout/variables/_light.scss

@@ -1,5 +1,5 @@
 :root {
-    --surface-ground: var(--p-surface-100);
-    --code-background: var(--p-surface-900);
-    --code-color: var(--p-surface-200);
+    --surface-ground: var(--f-surface-100);
+    --code-background: var(--f-surface-900);
+    --code-color: var(--f-surface-200);
 }

package/assets/style.scss

@@ -3,8 +3,8 @@
 
 .edit-mode-element-css {
   opacity: 1 !important;
-  color: var(--p-inputtext-color) !important;
-  background: var(--p-inputtext-background) !important;
+  color: var(--f-form-field-color) !important;
+  background: var(--f-form-field-background) !important;
 }
 
 .edit-icon-color {
@@ -35,5 +35,5 @@ li {
 }
 
 .primary-border-color {
-  border: 1px solid var(--p-primary-color) !important;
+  border: 1px solid var(--f-primary-color) !important;
 }