(fix): moved templates and styles to individual files

src/app/common/components/autocomplete/item-renderers/posts-autocomplete.component.html

+<ng-container *ngIf="choice?.type == 'user'; else hashtagBlock">
+ <a
+ href="javascript:;"
+ (click)="selectChoice.next(choice.username)"
+ >
+ <img
+ class="m-postAutocompleteItemRenderer__avatar mdl-shadow--2dp"
+ [src]="minds.cdn_url + 'icon/' + choice.guid + '/medium/' + choice.icontime">
+ {{ choice.username }}
+ </a>
+</ng-container>
+
+<ng-template #hashtagBlock>
+ <a
+ href="javascript:;"
+ (click)="selectChoice.next(choice)"
+ >
+ #{{ choice }}
+ </a>
+</ng-template>

src/app/common/components/autocomplete/item-renderers/posts-autocomplete.component.ts

@@ -2,28 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
  selector: 'm-post-autocomplete-item-renderer',
- template: `
- <ng-container *ngIf="choice?.type == 'user'; else hashtagBlock">
- <a
- href="javascript:;"
- (click)="selectChoice.next(choice.username)"
- >
- <img
- class="m-postAutocompleteItemRenderer__avatar mdl-shadow--2dp"
- [src]="minds.cdn_url + 'icon/' + choice.guid + '/medium/' + choice.icontime">
- {{ choice.username }}
- </a>
- </ng-container>
-
- <ng-template #hashtagBlock>
- <a
- href="javascript:;"
- (click)="selectChoice.next(choice)"
- >
- #{{ choice }}
- </a>
- </ng-template>
- `
+ templateUrl: 'posts-autocomplete.component.html'
 })
 
 export class PostsAutocompleteItemRendererComponent {

src/app/common/components/autocomplete/text-input-autocomplete-menu.component.html

+<ul
+ *ngIf="choices?.length > 0"
+ #dropdownMenu
+ class="dropdown-menu"
+ [style.top.px]="position?.top"
+ [style.left.px]="position?.left">
+ <li
+ *ngFor="let choice of choices; trackBy:trackById"
+ [class.active]="activeChoice === choice"
+ >
+ <ng-container
+ [ngTemplateOutlet]="itemTemplate"
+ [ngTemplateOutletContext]="{choice: choice, selectChoice: selectChoice}"
+ >
+ </ng-container>
+ </li>
+</ul>
+
+<ng-template #defaultItemTemplate let-choice="choice" let-selectChoice="selectChoice">
+ <a
+ href="javascript:;"
+ (click)="selectChoice.next(choice)"
+ >
+ {{ choice }}
+ </a>
+</ng-template>

src/app/common/components/autocomplete/text-input-autocomplete-menu.component.scss

+m-text-input--autocomplete-menu {
+ .dropdown-menu {
+ display: block;
+ max-height: 200px;
+ overflow-y: auto;
+ }
+}

src/app/common/components/autocomplete/text-input-autocomplete-menu.component.ts

@@ -3,43 +3,7 @@ import { Subject } from 'rxjs';
 
 @Component({
  selector: 'm-text-input--autocomplete-menu',
- template: `
- <ul
- *ngIf="choices?.length > 0"
- #dropdownMenu
- class="dropdown-menu"
- [style.top.px]="position?.top"
- [style.left.px]="position?.left">
- <li
- *ngFor="let choice of choices; trackBy:trackById"
- [class.active]="activeChoice === choice"
- >
- <ng-container
- [ngTemplateOutlet]="itemTemplate"
- [ngTemplateOutletContext]="{choice: choice, selectChoice: selectChoice}"
- >
- </ng-container>
- </li>
- </ul>
-
- <ng-template #defaultItemTemplate let-choice="choice" let-selectChoice="selectChoice">
- <a
- href="javascript:;"
- (click)="selectChoice.next(choice)"
- >
- {{ choice }}
- </a>
- </ng-template>
- `,
- styles: [
- `
- .dropdown-menu {
- display: block;
- max-height: 200px;
- overflow-y: auto;
- }
- `
- ]
+ templateUrl: 'text-input-autocomplete-menu.component.html',
 })
 export class TextInputAutocompleteMenuComponent implements OnInit {
  @ViewChild('dropdownMenu', { static: true }) dropdownMenuElement: ElementRef<HTMLUListElement>;

src/stylesheets/components/components.scss

@@ -765,7 +765,6 @@ m-text-input--autocomplete-menu {
  top: 100%;
  left: 0;
  z-index: 1000;
- display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;