Add initial alpha version of the design system option-list

frontend/package.json

@@ -43,7 +43,7 @@
     "@angular/platform-browser": "~12.0.2",
     "@angular/platform-browser-dynamic": "~12.0.2",
     "@angular/router": "~12.0.2",
-    "@datorama/akita": "^6.1.3",
+    "@datorama/akita": "^6.2.0",
     "@fullcalendar/angular": "5.5.0",
     "@fullcalendar/core": "5.5.0",
     "@fullcalendar/daygrid": "5.5.0",
@@ -53,6 +53,8 @@
     "@ng-select/ng-option-highlight": "0.0.5",
     "@ng-select/ng-select": "^4.0.4",
     "@ngx-formly/core": "^5.10.19",
+    "@openproject/angular": "0.0.1-alpha.9",
+    "@openproject/styles": "0.0.1-alpha.9",
     "@sentry/angular": "^6.2.3",
     "@sentry/tracing": "^6.2.3",
     "@types/chart.js": "^2.9.20",
@@ -80,7 +82,7 @@
     "cdk-drag-scroll": "^0.0.6",
     "chart.js": "2.9.4",
     "chartjs-plugin-datalabels": "^0.6.0",
-    "codemirror": "^5.48.4",
+    "codemirror": "^5.62.0",
     "copy-text-to-clipboard": "^3.0.0",
     "core-js": "^3.2.1",
     "crossvent": "^1.5.4",

frontend/src/app/features/invite-user-modal/project-selection/project-selection.component.ts

@@ -11,10 +11,10 @@ import {
   FormGroup,
   Validators,
 } from '@angular/forms';
+import { IOpOptionListOption } from "@openproject/angular";
 import { I18nService } from "core-app/core/i18n/i18n.service";
 import { BannersService } from "core-app/core/enterprise/banners.service";
 import { CurrentUserService } from 'core-app/core/current-user/current-user.service';
-import { IOpOptionListOption } from "core-app/shared/components/option-list/option-list.component";
 import { ProjectResource } from "core-app/features/hal/resources/project-resource";
 import { PrincipalType } from '../invite-user.component';
 import { ProjectAllowedValidator } from './project-allowed.validator';

frontend/src/app/shared/components/option-list/option-list.component.html

@@ -1,21 +0,0 @@
-<label
-  *ngFor="let option of options"
-  [class]="getClassListForItem(option)"
->
-  <input
-    class="op-option-list--input"
-    type="radio"
-    [attr.name]="name"
-    [value]="option.value"
-    [(ngModel)]="selected"
-    [disabled]="option.disabled"
-  />
-  <div>
-    <p class="op-option-list--item-title">{{ option.title }}</p>
-    <p
-      *ngIf="option.description"
-      class="op-option-list--item-description"
-      [innerHTML]="option.description"
-    ></p>
-  </div>
-</label>

frontend/src/app/shared/components/option-list/option-list.component.ts

@@ -1,71 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  HostBinding,
-  forwardRef,
-} from "@angular/core";
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-} from "@angular/forms";
-
-export interface IOpOptionListOption<T> {
-  value:T;
-  title:string;
-  disabled?:boolean;
-  description?:string;
-}
-
-export type IOpOptionListValue<T> = T|null;
-
-@Component({
-  // Style is imported globally
-  templateUrl: './option-list.component.html',
-  selector: 'op-option-list',
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => OpOptionListComponent),
-    multi: true,
-  }],
-})
-export class OpOptionListComponent<T> implements ControlValueAccessor {
-  @HostBinding('class.op-option-list') className = true;
-
-  @Input() options:IOpOptionListOption<T>[] = [];
-  @Input() name = `op-option-list-${+(new Date())}`;
-  @Output() selectedChange = new EventEmitter<T>();
-
-  private _selected:IOpOptionListValue<T> = null;
-  get selected() {
-    return this._selected;
-  }
-  set selected(value:IOpOptionListValue<T>) {
-    this._selected = value;
-    this.onChange(value);
-  }
-
-  getClassListForItem(option:IOpOptionListOption<T>) {
-    return {
-      'op-option-list--item': true,
-      'op-option-list--item_selected': this.selected === option.value,
-      'op-option-list--item_disabled': !!option.disabled,
-    };
-  }
-
-  onChange = (_:IOpOptionListValue<T>) => {};
-  onTouched = (_:IOpOptionListValue<T>) => {};
-
-  writeValue(value:IOpOptionListValue<T>) {
-    this._selected = value;
-  }
-
-  registerOnChange(fn:any) {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn:any) {
-    this.onTouched = fn;
-  }
-}

frontend/src/app/shared/components/option-list/option-list.sass

@@ -1,39 +0,0 @@
-.op-option-list
-  display: flex
-  flex-direction: column
-  font-size: 1rem
-
-  // TODO: remove the [type] selector once globally overwriting styles are removed
-  &--input[type]
-    margin: 0
-    margin-right: 0.5rem
-
-  &--item
-    padding: 1rem 1rem 0.5rem 0.75rem
-    display: flex
-    border: 1px solid #cbd5e0
-    background: #f7fafc
-    border-radius: 4px
-
-    &:not(:last-child)
-      margin-bottom: 0.5rem
-
-    &_selected
-      border: 1px solid #90cdf4
-      background: #ebf8ff
-
-    &_disabled
-      color: #959595
-
-    &-title,
-    &-description
-      margin: 0
-      margin-bottom: 0.5rem
-      line-height: 1.2
-
-    &-title
-      font-weight: bold
-      font-size: 14px
-      
-    &-description
-      font-size: 12px

frontend/src/app/shared/shared.module.ts

@@ -35,6 +35,7 @@ import {NgOptionHighlightModule} from '@ng-select/ng-option-highlight';
 import {DragulaModule} from 'ng2-dragula';
 import {DynamicModule} from 'ng-dynamic-component';
 import {StateService, UIRouterModule} from '@uirouter/angular';
+import {OpOptionListModule} from '@openproject/angular';
 import {OpenprojectAccessibilityModule} from 'core-app/shared/directives/a11y/openproject-a11y.module';
 import {CurrentUserModule} from 'core-app/core/current-user/current-user.module';
 import {IconModule} from 'core-app/shared/components/icon/icon.module';
@@ -66,7 +67,6 @@ import {SlideToggleComponent} from './components/slide-toggle/slide-toggle.compo
 import {DynamicBootstrapModule} from './components/dynamic-bootstrap/dynamic-bootstrap.module';
 import {OpFormFieldComponent} from './components/forms/form-field/form-field.component';
 import {OpFormBindingDirective} from './components/forms/form-field/form-binding.directive';
-import {OpOptionListComponent} from './components/option-list/option-list.component';
 import {OpenprojectPrincipalRenderingModule} from "core-app/shared/components/principal/principal-rendering.module";
 import { DatePickerModule } from "core-app/shared/components/op-date-picker/date-picker.module";
 import { FocusModule } from "core-app/shared/directives/focus/focus.module";
@@ -110,6 +110,9 @@ export function bootstrapModule(injector:Injector) {
     PortalModule,
     DragDropModule,
     DragulaModule,
+
+    OpOptionListModule,
+
     // Our own A11y module
     OpenprojectAccessibilityModule,
     CurrentUserModule,
@@ -140,6 +143,8 @@ export function bootstrapModule(injector:Injector) {
     DynamicBootstrapModule,
     OpenprojectPrincipalRenderingModule,
 
+    OpOptionListModule,
+
     DatePickerModule,
     FocusModule,
     OpDateTimeComponent,
@@ -180,7 +185,6 @@ export function bootstrapModule(injector:Injector) {
     // Autocompleter
     OpFormFieldComponent,
     OpFormBindingDirective,
-    OpOptionListComponent,
   ],
   declarations: [
     OpDateTimeComponent,
@@ -233,7 +237,6 @@ export function bootstrapModule(injector:Injector) {
 
     OpFormFieldComponent,
     OpFormBindingDirective,
-    OpOptionListComponent,
   ]
 })
 export class OPSharedModule {

frontend/src/global_styles/common/openproject-common.module.sass

@@ -3,6 +3,5 @@
 @import 'input/input'
 @import 'link/link'
 @import '../../app/shared/components/forms'
-@import '../../app/shared/components/option-list/option-list'
 @import 'export-options/export-options'
 @import 'select/select'

frontend/src/styles.scss

@@ -11,3 +11,5 @@
 
 // Core styles
 @import "global_styles/openproject.sass";
+
+@import "~@openproject/styles/src/index.sass";