MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add truncate in input when is not focused or has select type

This commit is contained in:
Konstantinos Triantafyllou 2022-04-09 16:19:18 +03:00
parent e82c7bb6f4
commit 41d5926be3
2 changed files with 5 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
sharedComponents/input/input.component.ts
View File

@ -54,19 +54,19 @@ declare var UIkit;
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'">
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<input #input class="input" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
[formControl]="formAsControl">
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
</ng-template>
<ng-template [ngIf]="type === 'textarea'">
<textarea #textArea class="input" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
[rows]="rows" [formControl]="formAsControl"></textarea>
</ng-template>
<ng-template [ngIf]="type === 'select'">
<div *ngIf="formControl.value || !placeholderInfo.static" class="input">{{getLabel(formControl.value)}}</div>
<div *ngIf="!formControl.value && placeholderInfo.static" class="input placeholder">{{placeholderInfo.label}}</div>
<div *ngIf="formControl.value || !placeholderInfo.static" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
<div *ngIf="!formControl.value && placeholderInfo.static" class="input placeholder uk-text-truncate">{{placeholderInfo.label}}</div>
</ng-template>
<ng-template [ngIf]="type === 'autocomplete'">
<input *ngIf="focused" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
#searchInput class="input" [formControl]="searchControl">
#searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
<div *ngIf="!focused" class="input">{{getLabel(formAsControl.value)}}</div>
</ng-template>
<ng-template [ngIf]="type === 'chips'">
@ -81,7 +81,7 @@ declare var UIkit;
<div *ngIf="searchControl" class="uk-width-expand uk-flex uk-flex-column uk-flex-center">
<input #searchInput class="input" [class.search]="searchControl.value"
[attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
[formControl]="searchControl">
[formControl]="searchControl" [class.uk-text-truncate]="!focused">
</div>
</div>
</ng-template>

19
sharedComponents/input/input.module.ts
View File

@ -1,29 +1,13 @@
import {NgModule} from '@angular/core';
import {InputComponent} from "./input.component";
import {SharedModule} from "../../shared/shared.module";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatInputModule} from "@angular/material/input";
import {MatSelectModule} from "@angular/material/select";
import {MatCheckboxModule} from '@angular/material/checkbox';
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {lock, remove_circle} from "../../utils/icons/icons";
import {MatChipsModule} from "@angular/material/chips";
import {MatAutocompleteModule} from "@angular/material/autocomplete";
import {MatIconModule} from "@angular/material/icon";
import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module";
@NgModule({
imports: [
SharedModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatCheckboxModule,
IconsModule,
MatChipsModule,
MatAutocompleteModule,
MatIconModule,
SafeHtmlPipeModule
],
exports: [
@ -34,7 +18,4 @@ import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module";
]
})
export class InputModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([lock, remove_circle]);
}
}