Pull request #10: added small chip component

Merge in SL/common-ui from smallChip to master

* commit 'd4b1bb5c07594dbce9d78cf56d26f75334116aaf':
  removed undefined from color
  update small chip
  added small chip component
This commit is contained in:
Eduard Cziszter 2022-02-15 11:35:05 +01:00
commit f54374859e
4 changed files with 23 additions and 3 deletions

View File

@ -29,6 +29,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import { CapitalizePipe } from './utils/pipes/capitalize.pipe'; import { CapitalizePipe } from './utils/pipes/capitalize.pipe';
import { KeycloakAngularModule } from 'keycloak-angular'; import { KeycloakAngularModule } from 'keycloak-angular';
import { SmallChipComponent } from './misc/small-chip/small-chip.component';
const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule]; const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule];
const modules = [ const modules = [
@ -52,12 +53,14 @@ const components = [
ConfirmationDialogComponent, ConfirmationDialogComponent,
SideNavComponent, SideNavComponent,
ToastComponent, ToastComponent,
SmallChipComponent,
]; ];
const pipes = [SortByPipe, HumanizePipe, CapitalizePipe]; const pipes = [SortByPipe, HumanizePipe, CapitalizePipe, LogPipe];
@NgModule({ @NgModule({
declarations: [...components, ...pipes, LogPipe], declarations: [...components, ...pipes],
imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, KeycloakAngularModule], imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, KeycloakAngularModule],
exports: [...components, ...pipes, ...modules, LogPipe], exports: [...components, ...pipes, ...modules, LogPipe],
}) })
export class CommonUiModule {} export class CommonUiModule {
}

View File

@ -0,0 +1 @@
<div [style.background-color]="color" class="chip"></div>

View File

@ -0,0 +1,5 @@
.chip {
width: 12px;
height: 6px;
border-radius: 6px;
}

View File

@ -0,0 +1,11 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
@Component({
selector: 'redaction-small-chip [color]',
templateUrl: './small-chip.component.html',
styleUrls: ['./small-chip.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SmallChipComponent {
@Input() color!: string;
}