Skeleton updates

src/assets/styles/common-skeleton.scss

@@ -0,0 +1,58 @@
+/* sk-w-${n} (in pixels) */
+
+$skeleton-widths: (12, 40, 56, 60, 70, 110, 200, 250, 340);
+@each $w in $skeleton-widths {
+    .sk-w-#{$w} {
+        max-width: #{$w}px;
+    }
+}
+
+.sk-w-12 {
+    border-radius: 6px;
+}
+
+/* sk-h-${n} */
+
+$skeleton-heights: (6, 8, 12, 20, 24);
+@each $h in $skeleton-heights {
+    .sk-h-#{$h} {
+        height: #{$h}px;
+    }
+}
+
+.sk-line,
+.sk-square,
+.sk-circle,
+.sk-rhombus {
+    background-color: var(--iqser-grey-4);
+}
+
+.sk-line {
+    border-radius: 12px;
+    width: 100%;
+}
+
+.sk-square {
+    min-width: 16px;
+    height: 16px;
+}
+
+.sk-rhombus {
+    min-width: 16px;
+    height: 16px;
+    transform: rotate(45deg) scale(0.707);
+}
+
+.sk-circle {
+    border-radius: 50%;
+
+    &.w-24 {
+        width: 24px;
+        height: 24px;
+    }
+
+    &.w-16 {
+        width: 16px;
+        height: 16px;
+    }
+}

src/assets/styles/common-styles.scss

@@ -29,3 +29,4 @@
 @use 'common-side-nav';
 @use 'common-radio';
 @use 'common-color-picker';
+@use 'common-skeleton';

src/assets/styles/common-tables.scss

@@ -13,3 +13,38 @@
         margin-right: 10px;
     }
 }
+
+.header-item {
+    background-color: var(--iqser-btn-bg);
+    height: 50px;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    border-bottom: 1px solid var(--iqser-separator);
+    box-sizing: border-box;
+    padding: 0 24px;
+
+    .header-title {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    &.selection-enabled {
+        padding: 0 24px 0 10px;
+    }
+
+    > *:not(:last-child) {
+        margin-right: 10px;
+    }
+
+    .actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        > *:not(:last-child) {
+            margin-right: 16px;
+        }
+    }
+}

src/assets/styles/common-utilities.scss

@@ -42,23 +42,3 @@ $sides: (top, bottom, left, right);
         flex: #{$n};
     }
 }
-
-/* SKELETON LINES */
-
-/* sk-w-${n} (in pixels) */
-
-$skeleton-widths: (12, 110, 200, 250, 340);
-@each $w in $skeleton-widths {
-    .sk-w-#{$w} {
-        max-width: #{$w}px;
-    }
-}
-
-/* sk-h-${n} */
-
-$skeleton-heights: (6, 8, 12, 20, 24);
-@each $h in $skeleton-heights {
-    .sk-h-#{$h} {
-        height: #{$h}px;
-    }
-}

src/lib/listing/table-header/table-header.component.scss

@@ -7,37 +7,3 @@
     }
 }
 
-.header-item {
-    background-color: var(--iqser-btn-bg);
-    height: 50px;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    border-bottom: 1px solid var(--iqser-separator);
-    box-sizing: border-box;
-    padding: 0 24px;
-
-    .header-title {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-    }
-
-    &.selection-enabled {
-        padding: 0 24px 0 10px;
-    }
-
-    > *:not(:last-child) {
-        margin-right: 10px;
-    }
-
-    .actions {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-
-        > *:not(:last-child) {
-            margin-right: 16px;
-        }
-    }
-}

src/lib/services/composite-route.guard.ts

@@ -43,7 +43,13 @@ export class CompositeRouteGuard implements CanActivate {
     }
 
     #preChecks(route: ActivatedRouteSnapshot): void {
-        const skeleton = route.data['skeleton'];
+        let skeleton: string | null = route.data['skeleton'];
+        let currentRoute = route;
+        while (!skeleton && currentRoute.firstChild) {
+            currentRoute = currentRoute.firstChild;
+            skeleton = currentRoute.data['skeleton'];
+        }
+
         if (skeleton) {
             this._skeletonService.setType(skeleton);
         } else {

src/lib/skeleton/skeleton/skeleton.component.scss

@@ -1,5 +1,5 @@
 :host {
     position: absolute;
     width: 100vw;
-    z-index: 2;
+    z-index: 1100;
 }