feat: list-loader package

.github/workflows/ci_test_list-loader.yml

@@ -0,0 +1,23 @@
+name: Test list-loader
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - '**'
+    tags-ignore:
+      - '**'
+    paths:
+      - 'projects/list-loader/**'
+
+concurrency:
+  group: ci-test-list-loader-group-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ci_test_list-loader:
+    uses: ./.github/workflows/ci_job.yml
+    with:
+      working-directory: projects/list-loader
+      runs-on: '["ubuntu-latest", "macos-latest", "windows-latest"]'
+      node-versions: '[18, 20]'

projects/list-loader/ng-package.json

@@ -1,7 +1,14 @@
 {
     "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
     "dest": "../../dist/list-loader",
+    "assets": [
+        {
+            "input": "src/",
+            "glob": "_list-loader-theme.scss",
+            "output": "."
+        }
+    ],
     "lib": {
         "entryFile": "src/index.ts"
     }
-}
+}

projects/list-loader/package.json

@@ -20,15 +20,20 @@
         "components"
     ],
     "sideEffects": false,
+    "exports": {
+        ".": {
+            "sass": "./_list-loader-theme.scss"
+        }
+    },
     "scripts": {
         "lint": "eslint . --fix",
         "test": "ng test list-loader",
         "test:ci": "ng test list-loader --watch=false --browsers=ChromeHeadless",
         "build": "ng build list-loader -c production"
     },
     "peerDependencies": {
-        "@angular/common": "^14.3.0",
-        "@angular/core": "^14.3.0"
+        "@angular/common": ">= 14",
+        "@angular/core": ">= 14"
     },
     "dependencies": {
         "tslib": "^2.6.2"

projects/list-loader/src/_list-loader-theme.scss

@@ -0,0 +1,27 @@
+@use "@angular/material" as mat;
+
+@mixin theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $foreground: map-get($theme, foreground);
+
+    list-loader > .container {
+        > .spinner {
+            > .bounce1 {
+                background-color: mat.get-color-from-palette($foreground, disabled);
+            }
+
+            > .bounce2 {
+                background-color: mat.get-color-from-palette($primary, 600);
+            }
+
+            > .bounce3 {
+                background-color: mat.get-color-from-palette($accent, 500);
+            }
+        }
+
+        > .label {
+            color: mat.get-color-from-palette($foreground, text);
+        }
+    }
+}

projects/list-loader/src/index.ts

@@ -1,6 +1 @@
-/*
- * Public API Surface of lib
- */
-
-export * from './example/example.service';
-export * from './example/example.component';
+export * from './list-loader.component';

projects/list-loader/src/list-loader.component.html

@@ -0,0 +1,8 @@
+<div class="container">
+    <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+    </div>
+    <div class="label" *ngIf="label">{{ label }}</div>
+</div>

projects/list-loader/src/list-loader.component.scss

@@ -0,0 +1,67 @@
+list-loader {
+    display: flex;
+    flex: 1 1 auto;
+    height: 100%;
+    align-items: center;
+
+    >.container {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+
+        >.spinner {
+            margin: auto;
+            width: 60px;
+            text-align: center;
+            display: flex;
+            justify-content: space-around;
+
+            > div {
+                width: 10px;
+                height: 10px;
+                border-radius: 100%;
+                display: inline-block;
+                -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+                animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+            }
+
+            >.bounce1 {
+                -webkit-animation-delay: -0.32s;
+                animation-delay: -0.32s;
+            }
+
+            >.bounce2 {
+                -webkit-animation-delay: -0.16s;
+                animation-delay: -0.16s;
+            }
+        }
+
+        @-webkit-keyframes sk-bouncedelay {
+            0%, 80%, 100% {
+                -webkit-transform: scale(0);
+            }
+            40% {
+                -webkit-transform: scale(1.0);
+            }
+        }
+
+        @keyframes sk-bouncedelay {
+            0%, 80%, 100% {
+                -webkit-transform: scale(0);
+                transform: scale(0);
+            }
+            40% {
+                -webkit-transform: scale(1.0);
+                transform: scale(1.0);
+            }
+        }
+
+        >.label {
+            text-align: center;
+            font-size: 0.9rem;
+            margin-top: 1rem;
+        }
+    }
+}

projects/list-loader/src/list-loader.component.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'list-loader',
+    templateUrl: './list-loader.component.html',
+    styleUrls: ['./list-loader.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [
+        CommonModule
+    ]
+})
+export class ListLoaderComponent {
+    @Input()
+    public label?: string;
+}