projects init

projects/ui/README.md

@@ -0,0 +1,24 @@
+# Ui
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ui`.
+> Note: Don't forget to add `--project ui` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ui` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ui`, go to the dist folder `cd dist/ui` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

projects/ui/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

projects/ui/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/ui/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^14.1.0",
+    "@angular/core": "^14.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

projects/ui/src/lib/icon/icon.component.html

@@ -0,0 +1 @@
+<tui-svg [style]="'--local-stroke:' + stroke" [style.color]="color" [style.width]="sizeWithUnit" [style.height]="sizeWithUnit" [src]="src" (tui-icon-error)="error"></tui-svg>

projects/ui/src/lib/icon/icon.component.scss

@@ -0,0 +1,16 @@
+:host::ng-deep {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+
+    path, circle, rect {
+      stroke-width: var(--local-stroke, 1.5);
+      stroke: currentColor;
+    }
+  }
+}

projects/ui/src/lib/icon/icon.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IconComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ui/src/lib/icon/icon.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TuiIconError } from '@taiga-ui/core';
+
+const BASE_SIZE = 24;
+const BASE_STROKE_WIDTH = 1.5;
+
+@Component({
+  selector: 'skirda-icon[name]',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+})
+export class IconComponent implements OnInit {
+  @Input() name!: string;
+  @Input() size: number | string = 24;
+  @Input() sizeUnit: string = 'px';
+  @Input() color: string = '#fff';
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  get src() {
+    return `/assets/icons/Name=${this.name}.svg`;
+  }
+
+  get sizeWithUnit() {
+    return this.size + this.sizeUnit;
+  }
+
+  get stroke() {
+    return +this.size / BASE_SIZE < 1 ? 2.5 : 1.5;
+  }
+
+  error(error: TuiIconError) {
+    console.log(`[${error.icon}]: ${error.message}`);
+  }
+}

projects/ui/src/lib/icon/icon.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from './icon.component';
+import { TuiSvgModule } from '@taiga-ui/core';
+
+@NgModule({
+  declarations: [IconComponent],
+  imports: [CommonModule, TuiSvgModule],
+  exports: [IconComponent],
+})
+export class IconModule {}

projects/ui/src/lib/image-icon/image-icon.component.html

@@ -0,0 +1 @@
+<div class="sk-image-icon" [style.background-image]="'url(' + src + ')'"></div>

projects/ui/src/lib/image-icon/image-icon.component.scss

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+
+  .sk-image-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.1);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    overflow: hidden;
+  }
+}

projects/ui/src/lib/image-icon/image-icon.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageIconComponent } from './image-icon.component';
+
+describe('ImageIconComponent', () => {
+  let component: ImageIconComponent;
+  let fixture: ComponentFixture<ImageIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ImageIconComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ImageIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ui/src/lib/image-icon/image-icon.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'skirda-image-icon[src]',
+  templateUrl: './image-icon.component.html',
+  styleUrls: ['./image-icon.component.scss'],
+})
+export class ImageIconComponent {
+  @Input() src!: string;
+}

projects/ui/src/lib/image-icon/image-icon.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ImageIconComponent } from './image-icon.component';
+
+
+
+@NgModule({
+  declarations: [
+    ImageIconComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ImageIconComponent
+  ]
+})
+export class ImageIconModule { }

projects/ui/src/lib/input/input.component.html

@@ -0,0 +1,5 @@
+<label [style]="style">
+  <ng-content select="skirda-icon[role=left]"></ng-content>
+  <input type="text" (input)="input(inp.value)" [value]="value" #inp [disabled]="disabled" [placeholder]="placeholder"/>
+  <ng-content select="skirda-icon[role=right]"></ng-content>
+</label>

projects/ui/src/lib/input/input.component.scss

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: var(--local-gap);
+    cursor: text;
+    background-color: var(--sk-input);
+    color: #fff;
+    border-radius: 8px;
+
+    &:focus-within {
+      background-color: var(--sk-input-focus);
+    }
+
+    input {
+      flex: 1;
+      border: 0;
+      font-family: var(--tui-text-font);
+      outline: none;
+      appearance: none;
+      background: transparent;
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+}
+
+:host::ng-deep {
+  skirda-icon svg {
+    color: var(--tui-base-01);
+    opacity: 0.5;
+  }
+}

projects/ui/src/lib/input/input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputComponent } from './input.component';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InputComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ui/src/lib/input/input.component.ts

@@ -0,0 +1,65 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Size } from '../interfaces/sizes';
+
+@Component({
+  selector: 'skirda-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: InputComponent,
+      multi: true,
+    },
+  ],
+})
+export class InputComponent implements ControlValueAccessor {
+  @Input() size: Size = 'm';
+  @Input() placeholder: string = '';
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+  disabled = false;
+  value: any = '';
+  touched = false;
+
+  constructor() {}
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  markAsTouched() {
+    if (!this.touched) {
+      this.onTouched();
+      this.touched = true;
+    }
+  }
+
+  input(value: any) {
+    this.markAsTouched();
+    this.value = value;
+    this.onChange(this.value);
+  }
+
+  get style() {
+    let styles: string[] = [];
+
+    styles.push(`--local-gap: var(--sk-gap-${this.size})`);
+
+    return styles.join(';');
+  }
+}

projects/ui/src/lib/input/input.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputComponent } from './input.component';
+
+
+
+@NgModule({
+  declarations: [
+    InputComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    InputComponent
+  ]
+})
+export class InputModule { }

projects/ui/src/lib/interfaces/session.ts

@@ -0,0 +1,7 @@
+export interface Session {
+  icon: string;
+  title: string;
+  status?: string;
+  version: string;
+  expires: string | Date;
+}

projects/ui/src/lib/interfaces/sizes.ts

@@ -0,0 +1 @@
+export type Size = 's' | 'm' | 'l' | 'xl';

projects/ui/src/lib/section-label/section-label.component.html

@@ -0,0 +1,6 @@
+<skirda-text>
+  <ng-content></ng-content>
+</skirda-text>
+<div class="count">
+  <ng-content select=".count"></ng-content>
+</div>

projects/ui/src/lib/section-label/section-label.component.scss

@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+  align-items: baseline;
+  padding: var(--sk-gap-m) var(--sk-gap-l);
+  gap: var(--sk-gap-m);
+  opacity: 0.65;
+
+  skirda-text {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
+  .count {
+    height: 18px;
+    min-width: 18px;
+    background-color: rgba(255, 255, 255, 0.2);
+    text-align: center;
+    line-height: 18px;
+    border-radius: 18px;
+    padding: 0rem 0.3125rem;
+    box-sizing: border-box;
+  }
+}

projects/ui/src/lib/section-label/section-label.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SectionLabelComponent } from './section-label.component';
+
+describe('SectionLabelComponent', () => {
+  let component: SectionLabelComponent;
+  let fixture: ComponentFixture<SectionLabelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SectionLabelComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SectionLabelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ui/src/lib/section-label/section-label.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'skirda-section-label',
+  templateUrl: './section-label.component.html',
+  styleUrls: ['./section-label.component.scss']
+})
+export class SectionLabelComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/ui/src/lib/section-label/section-label.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SectionLabelComponent } from './section-label.component';
+import { TypographyModule } from '../typography/typography.module';
+
+@NgModule({
+  declarations: [SectionLabelComponent],
+  imports: [CommonModule, TypographyModule],
+  exports: [SectionLabelComponent],
+})
+export class SectionLabelModule {}

projects/ui/src/lib/section/section.component.html

@@ -0,0 +1,4 @@
+<div class="sk-section">
+  <ng-content select="skirda-icon"></ng-content>
+  <ng-content select="skirda-heading, skirda-text"></ng-content>
+</div>

projects/ui/src/lib/section/section.component.scss

@@ -0,0 +1,52 @@
+:host {
+  display: block;
+  border-radius: var(--sk-br-m);
+  overflow: hidden;
+  position: relative;
+
+  .sk-section {
+    display: flex;
+    align-items: center;
+    padding: var(--sk-gap-l);
+    gap: var(--sk-gap-l);
+    opacity: 0.75;
+    mix-blend-mode: overlay;
+    transition: 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+
+      &:before {
+        opacity: 0.5;
+      }
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: rgba(255, 255, 255, 0.2);
+      width: 100%;
+      height: 100%;
+      mix-blend-mode: overlay;
+      z-index: -1;
+      opacity: 0;
+      transition: 0.2s ease;
+    }
+  }
+
+  &.active {
+
+    .sk-section {
+      opacity: 1;
+      mix-blend-mode: normal;
+
+      &:before {
+        opacity: 1;
+      }
+    }
+  }
+}

projects/ui/src/lib/section/section.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SectionComponent } from './section.component';
+
+describe('SectionComponent', () => {
+  let component: SectionComponent;
+  let fixture: ComponentFixture<SectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SectionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ui/src/lib/section/section.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'skirda-section',
+  templateUrl: './section.component.html',
+  styleUrls: ['./section.component.scss']
+})
+export class SectionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/ui/src/lib/section/section.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SectionComponent } from './section.component';
+
+
+
+@NgModule({
+  declarations: [
+    SectionComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SectionComponent
+  ]
+})
+export class SectionModule { }

projects/ui/src/lib/session/session.component.html

@@ -0,0 +1,7 @@
+<div class="sk-session">
+  <skirda-image-icon [src]="session.icon"></skirda-image-icon>
+  <div class="sk-session-info">
+    <skirda-heading size="6">{{session.title}}</skirda-heading>
+    <skirda-text *ngIf="session.status">{{session.status}}</skirda-text>
+  </div>
+</div>

projects/ui/src/lib/session/session.component.scss

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+
+  &.active {
+
+    .sk-session {
+      background-color: var(--sk-accent);
+    }
+  }
+
+  .sk-session {
+    display: flex;
+    align-items: center;
+    gap: var(--sk-gap-l);
+    padding: var(--sk-gap-l);
+    border-radius: var(--sk-br-m);
+
+    .sk-session-info {
+
+    }
+  }
+}

projects/ui/src/lib/session/session.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SessionComponent } from './session.component';
+
+describe('SessionComponent', () => {
+  let component: SessionComponent;
+  let fixture: ComponentFixture<SessionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SessionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SessionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ui/src/lib/session/session.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Session } from '../interfaces/session';
+
+@Component({
+  selector: 'skirda-session[session]',
+  templateUrl: './session.component.html',
+  styleUrls: ['./session.component.scss'],
+})
+export class SessionComponent implements OnInit {
+  @Input() session!: Session;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

projects/ui/src/lib/session/session.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SessionComponent } from './session.component';
+import { ImageIconModule } from '../image-icon/image-icon.module';
+import { TypographyModule } from '../typography/typography.module';
+
+@NgModule({
+  declarations: [SessionComponent],
+  imports: [CommonModule, ImageIconModule, TypographyModule],
+  exports: [SessionComponent],
+})
+export class SessionModule {}

projects/ui/src/lib/typography/heading/heading.component.html

@@ -0,0 +1,3 @@
+<div class="heading" [attr.data-size]="size">
+  <ng-content></ng-content>
+</div>

projects/ui/src/lib/typography/heading/heading.component.scss

@@ -0,0 +1,25 @@
+:host {
+
+  .heading {
+    font-weight: 600;
+
+    &[data-size="1"] {
+      font-size: 32px;
+    }
+    &[data-size="2"] {
+      font-size: 28px;
+    }
+    &[data-size="3"] {
+      font-size: 24px;
+    }
+    &[data-size="4"] {
+      font-size: 22px;
+    }
+    &[data-size="5"] {
+      font-size: 18px;
+    }
+    &[data-size="6"] {
+      font-size: 15px;
+    }
+  }
+}

projects/ui/src/lib/typography/heading/heading.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeadingComponent } from './heading.component';
+
+describe('HeadingComponent', () => {
+  let component: HeadingComponent;
+  let fixture: ComponentFixture<HeadingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeadingComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeadingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ui/src/lib/typography/heading/heading.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'skirda-heading',
+  templateUrl: './heading.component.html',
+  styleUrls: ['./heading.component.scss'],
+})
+export class HeadingComponent implements OnInit {
+  @Input() size: number | string = 3;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

projects/ui/src/lib/typography/text/text.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

projects/ui/src/lib/typography/text/text.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextComponent } from './text.component';
+
+describe('TextComponent', () => {
+  let component: TextComponent;
+  let fixture: ComponentFixture<TextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TextComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ui/src/lib/typography/text/text.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'skirda-text',
+  templateUrl: './text.component.html',
+  styleUrls: ['./text.component.scss']
+})
+export class TextComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/ui/src/lib/typography/typography.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeadingComponent } from './heading/heading.component';
+import { TextComponent } from './text/text.component';
+
+@NgModule({
+  declarations: [HeadingComponent, TextComponent],
+  imports: [CommonModule],
+  exports: [HeadingComponent, TextComponent],
+})
+export class TypographyModule {}

projects/ui/src/lib/ui.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { IconModule } from './icon/icon.module';
+import { InputModule } from './input/input.module';
+import { SessionModule } from './session/session.module';
+import { SectionModule } from './section/section.module';
+import { TypographyModule } from './typography/typography.module';
+import { SectionLabelModule } from './section-label/section-label.module';
+import { ImageIconModule } from './image-icon/image-icon.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    IconModule,
+    InputModule,
+    SessionModule,
+    SectionModule,
+    TypographyModule,
+    SectionLabelModule,
+    ImageIconModule,
+  ],
+  exports: [
+    IconModule,
+    InputModule,
+    SessionModule,
+    SectionModule,
+    TypographyModule,
+    SectionLabelModule,
+    ImageIconModule,
+  ],
+})
+export class UiModule {}

projects/ui/src/public-api.ts

@@ -0,0 +1,12 @@
+/*
+ * Public API Surface of ui
+ */
+
+export * from './lib/ui.module';
+export * from './lib/icon/icon.module';
+export * from './lib/input/input.module';
+export * from './lib/session/session.module';
+export * from './lib/section/section.module';
+export * from './lib/typography/typography.module';
+export * from './lib/section-label/section-label.module';
+export * from './lib/image-icon/image-icon.module';

projects/ui/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

projects/ui/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/ui/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

projects/ui/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}