From c33cbae53d66241197356d3984e8c37796a3a6a4 Mon Sep 17 00:00:00 2001 From: Badisi Date: Wed, 1 May 2024 15:32:07 +0200 Subject: [PATCH] feat: list-loader package --- .github/workflows/ci_test_list-loader.yml | 23 +++++++ projects/list-loader/ng-package.json | 9 ++- projects/list-loader/package.json | 9 ++- .../list-loader/src/_list-loader-theme.scss | 27 ++++++++ .../src/example/example.component.spec.ts | 22 ------ .../src/example/example.component.ts | 11 --- .../src/example/example.service.spec.ts | 16 ----- .../src/example/example.service.ts | 6 -- projects/list-loader/src/index.ts | 7 +- .../src/list-loader.component.html | 8 +++ .../src/list-loader.component.scss | 67 +++++++++++++++++++ .../list-loader/src/list-loader.component.ts | 18 +++++ 12 files changed, 159 insertions(+), 64 deletions(-) create mode 100644 .github/workflows/ci_test_list-loader.yml create mode 100644 projects/list-loader/src/_list-loader-theme.scss delete mode 100644 projects/list-loader/src/example/example.component.spec.ts delete mode 100644 projects/list-loader/src/example/example.component.ts delete mode 100644 projects/list-loader/src/example/example.service.spec.ts delete mode 100644 projects/list-loader/src/example/example.service.ts create mode 100644 projects/list-loader/src/list-loader.component.html create mode 100644 projects/list-loader/src/list-loader.component.scss create mode 100644 projects/list-loader/src/list-loader.component.ts diff --git a/.github/workflows/ci_test_list-loader.yml b/.github/workflows/ci_test_list-loader.yml new file mode 100644 index 00000000..23332dc3 --- /dev/null +++ b/.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]' diff --git a/projects/list-loader/ng-package.json b/projects/list-loader/ng-package.json index df5bfec9..0c170812 100644 --- a/projects/list-loader/ng-package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/projects/list-loader/package.json b/projects/list-loader/package.json index 424193dc..c3db7ea0 100644 --- a/projects/list-loader/package.json +++ b/projects/list-loader/package.json @@ -20,6 +20,11 @@ "components" ], "sideEffects": false, + "exports": { + ".": { + "sass": "./_list-loader-theme.scss" + } + }, "scripts": { "lint": "eslint . --fix", "test": "ng test list-loader", @@ -27,8 +32,8 @@ "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" diff --git a/projects/list-loader/src/_list-loader-theme.scss b/projects/list-loader/src/_list-loader-theme.scss new file mode 100644 index 00000000..09013896 --- /dev/null +++ b/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); + } + } +} diff --git a/projects/list-loader/src/example/example.component.spec.ts b/projects/list-loader/src/example/example.component.spec.ts deleted file mode 100644 index 61022488..00000000 --- a/projects/list-loader/src/example/example.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ExampleComponent } from './example.component'; - -describe('ExampleComponent', () => { - let component: ExampleComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ExampleComponent] - }).compileComponents(); - - fixture = TestBed.createComponent(ExampleComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/list-loader/src/example/example.component.ts b/projects/list-loader/src/example/example.component.ts deleted file mode 100644 index d6dc2085..00000000 --- a/projects/list-loader/src/example/example.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; - -@Component({ - selector: 'deja-example', - standalone: true, - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [], - template: '

example works!

', - styles: [] -}) -export class ExampleComponent { } diff --git a/projects/list-loader/src/example/example.service.spec.ts b/projects/list-loader/src/example/example.service.spec.ts deleted file mode 100644 index 33a65090..00000000 --- a/projects/list-loader/src/example/example.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { ExampleService } from './example.service'; - -describe('ExampleService', () => { - let service: ExampleService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ExampleService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/projects/list-loader/src/example/example.service.ts b/projects/list-loader/src/example/example.service.ts deleted file mode 100644 index 278d5bcf..00000000 --- a/projects/list-loader/src/example/example.service.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class ExampleService { } diff --git a/projects/list-loader/src/index.ts b/projects/list-loader/src/index.ts index 020b9f72..a66d5997 100644 --- a/projects/list-loader/src/index.ts +++ b/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'; diff --git a/projects/list-loader/src/list-loader.component.html b/projects/list-loader/src/list-loader.component.html new file mode 100644 index 00000000..75d2c790 --- /dev/null +++ b/projects/list-loader/src/list-loader.component.html @@ -0,0 +1,8 @@ +
+ +
{{ label }}
+
\ No newline at end of file diff --git a/projects/list-loader/src/list-loader.component.scss b/projects/list-loader/src/list-loader.component.scss new file mode 100644 index 00000000..f03e22df --- /dev/null +++ b/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; + } + } +} diff --git a/projects/list-loader/src/list-loader.component.ts b/projects/list-loader/src/list-loader.component.ts new file mode 100644 index 00000000..4d47cc8e --- /dev/null +++ b/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; +}