diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html index 80738b9..e1e6f44 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html @@ -84,4 +84,4 @@ - + diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts index 2aa5189..fa4d38a 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts @@ -5,7 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module'; import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; -import { LoaderModule } from '@msfa-shared/components/loader/loader.module'; +import { UiLoaderModule } from '@ui/loader/loader.module'; import { EmployeeInviteComponent } from './employee-invite.component'; @NgModule({ @@ -18,7 +18,7 @@ import { EmployeeInviteComponent } from './employee-invite.component'; BackLinkModule, ReactiveFormsModule, DigiNgFormTextareaModule, - LoaderModule + UiLoaderModule, ], }) export class EmployeeInviteModule {} diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html index c72c42e..af36def 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html @@ -1,5 +1,5 @@
- + Totalt {{count}} träffar på personal med max 10 rader på varje sida diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts index ebe1bc9..06cc89b 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { LoaderModule } from '@msfa-shared/components/loader/loader.module'; +import { UiLoaderModule } from '@ui/loader/loader.module'; import { EmployeesListComponent } from './employees-list.component'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [EmployeesListComponent], - imports: [CommonModule, RouterModule, LoaderModule], + imports: [CommonModule, RouterModule, UiLoaderModule], exports: [EmployeesListComponent], }) export class EmployeesListModule {} diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html index c5b41ce..631c0a3 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html +++ b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html @@ -103,13 +103,21 @@ Nästa - Tillbaka Nästa - Tillbaka Bekräfta tilldelning @@ -127,7 +135,7 @@ - + diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts index a0fcf63..cf9420c 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts @@ -1,12 +1,12 @@ import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar'; -import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { HandledarePickerFormModule } from '@msfa-shared/components/handledare-picker-form/handledare-picker-form.module'; import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; -import { LoaderModule } from '@msfa-shared/components/loader/loader.module'; import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-alert/unauthorized-alert.module'; +import { UiLoaderModule } from '@ui/loader/loader.module'; +import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { AvropComponent } from './avrop.component'; import { AvropFiltersModule } from './components/avrop-filters/avrop-filters.module'; import { AvropListModule } from './components/avrop-list/avrop-list.module'; @@ -22,7 +22,7 @@ import { AvropListModule } from './components/avrop-list/avrop-list.module'; AvropFiltersModule, DigiNgProgressProgressbarModule, UiSkeletonModule, - LoaderModule, + UiLoaderModule, HandledarePickerFormModule, UnauthorizedAlertModule, ], diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html index 1aee0bf..271e76e 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html +++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html @@ -49,5 +49,5 @@
- + diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts index 0dd71a4..b84e182 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts +++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts @@ -49,7 +49,7 @@ describe('AvropFiltersComponent', () => { it('should show loading spinner when filters are loading', () => { fixture.detectChanges(); - const tags = fixture.debugElement.queryAll(By.css('msfa-loader')); + const tags = fixture.debugElement.queryAll(By.css('ui-loader')); expect(tags.length).toBe(1); }); }); diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts index cb4439b..6971d5d 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { LoaderModule } from '@msfa-shared/components/loader/loader.module'; import { MultiselectModule } from '@msfa-shared/components/multiselect/multiselect.module'; +import { UiLoaderModule } from '@ui/loader/loader.module'; import { AvropFiltersComponent } from './avrop-filters.component'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [AvropFiltersComponent], - imports: [CommonModule, MultiselectModule, LoaderModule], + imports: [CommonModule, MultiselectModule, UiLoaderModule], exports: [AvropFiltersComponent], }) export class AvropFiltersModule {} diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html index bb73b84..ffb82c3 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html +++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html @@ -1,5 +1,5 @@
- +
- + diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts index 6dbf25b..d16bb8e 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts @@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { UiLoaderModule } from '@ui/loader/loader.module'; import { MarkdownModule } from 'ngx-markdown'; -import { LoaderModule } from '../loader/loader.module'; import { FooterModule } from './components/footer/footer.module'; import { NavigationModule } from './components/navigation/navigation.module'; import { SidebarModule } from './components/sidebar/sidebar.module'; @@ -23,7 +23,7 @@ import { LayoutComponent } from './layout.component'; FooterModule, MarkdownModule.forRoot({ loader: HttpClient }), DigiNgNavigationBreadcrumbsModule, - LoaderModule, + UiLoaderModule, ], exports: [LayoutComponent], }) diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.html b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.html deleted file mode 100644 index 889ea9a..0000000 --- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss deleted file mode 100644 index c819bbf..0000000 --- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import 'mixins/backdrop'; -@import 'variables/gutters'; -@import 'variables/z-index'; - -@keyframes spinning { - to { - transform: rotate(360deg); - } -} - -.loader { - display: flex; - align-items: center; - justify-content: center; - - &--padded { - padding: $digi--layout--gutter--l; - } - - &--absolute { - @include msfa__backdrop($msfa__z-index-backdrop, false); - } - - &--full-screen { - @include msfa__backdrop($msfa__z-index-backdrop); - } - - &--full-blank-screen { - @include msfa__backdrop($msfa__z-index-backdrop, true, true); - } - - &__spinner { - display: inline-flex; - animation: spinning 1s linear infinite; - - &--s { - width: 2.5rem; - } - } -} diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.spec.ts deleted file mode 100644 index 1b7198c..0000000 --- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* tslint:disable:no-unused-variable */ -import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { LoaderComponent } from './loader.component'; - -describe('LoaderComponent', () => { - let component: LoaderComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [LoaderComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(LoaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts deleted file mode 100644 index 279ddef..0000000 --- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { LoaderType } from '@msfa-enums/loader-type.enum'; - -@Component({ - selector: 'msfa-loader', - templateUrl: './loader.component.html', - styleUrls: ['./loader.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class LoaderComponent { - private readonly _defaultClass = 'loader'; - @Input() type: LoaderType; - @Input() size: 's' | 'm' = 'm'; - - get loaderClass(): string { - if (this.type) { - return `${this._defaultClass} ${this._defaultClass}--${this.type as string}`; - } - return this._defaultClass; - } - - get spinnerClass(): string { - return `${this._defaultClass}__spinner ${this._defaultClass}__spinner--${this.size}`; - } -} diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.module.ts b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.module.ts deleted file mode 100644 index 61fef3d..0000000 --- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { LoaderComponent } from './loader.component'; - -@NgModule({ - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [LoaderComponent], - imports: [CommonModule], - exports: [LoaderComponent], -}) -export class LoaderModule {} diff --git a/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts deleted file mode 100644 index d671828..0000000 --- a/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts +++ /dev/null @@ -1,6 +0,0 @@ -export enum LoaderType { - FULL_SCREEN = 'fullscreen', - FULL_BLANK_SCREEN = 'full-blank-screen', - ABSOLUTE = 'absolute', - PADDED = 'padded', -} diff --git a/libs/ui/loader/loader.component.html b/libs/ui/loader/loader.component.html index 1eff722..6aa2d90 100644 --- a/libs/ui/loader/loader.component.html +++ b/libs/ui/loader/loader.component.html @@ -1,4 +1,4 @@
- asdf + {{uiLoadingText}}
diff --git a/libs/ui/loader/loader.component.scss b/libs/ui/loader/loader.component.scss index 53f2c05..b4faed6 100644 --- a/libs/ui/loader/loader.component.scss +++ b/libs/ui/loader/loader.component.scss @@ -10,6 +10,8 @@ .ui-loader { display: flex; + flex-direction: column; + gap: $digi--layout--gutter--s; align-items: center; justify-content: center; @@ -37,4 +39,8 @@ width: 2.5rem; } } + + &__text { + font-size: var(--digi--typography--font-size--s); + } } diff --git a/libs/ui/loader/loader.component.ts b/libs/ui/loader/loader.component.ts index 599828b..5d67073 100644 --- a/libs/ui/loader/loader.component.ts +++ b/libs/ui/loader/loader.component.ts @@ -11,6 +11,8 @@ export class LoaderComponent { private readonly _defaultClass = 'ui-loader'; @Input() uiType: UiLoaderType = UiLoaderType.PADDED; @Input() uiSize: 's' | 'm' = 'm'; + @Input() uiShowLoadingText = false; + @Input() uiLoadingText = 'Laddar innehåll'; get loaderClass(): string { if (this.uiType) {