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

Page content: Add padding in header and inner. Complete input, textarea and select base on new redesign

This commit is contained in:
Konstantinos Triantafyllou 2022-03-28 01:21:55 +03:00
parent 3fd632a2b7
commit dc0544d0d8
6 changed files with 405 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core"; import {Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
declare var UIkit; declare var UIkit;
@ -10,14 +10,18 @@ declare var UIkit;
<div id="header"> <div id="header">
<div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset"> <div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
<div #header class="uk-container uk-container-large uk-padding-remove-vertical"> <div #header class="uk-container uk-container-large uk-padding-remove-vertical">
<div class="uk-padding-small uk-padding-remove-vertical">
<ng-content select="[header]"></ng-content> <ng-content select="[header]"></ng-content>
</div> </div>
</div> </div>
</div> </div>
<div id="page_content_inner" class="uk-section uk-padding-remove-top uk-container uk-container-large"> </div>
<div id="page_content_inner" class="uk-container uk-container-large">
<div class="uk-padding uk-padding-remove-vertical">
<ng-content select="[inner]"></ng-content> <ng-content select="[inner]"></ng-content>
</div> </div>
</div> </div>
</div>
`, `,
}) })
export class PageContentComponent implements OnInit, OnDestroy { export class PageContentComponent implements OnInit, OnDestroy {

3
landingPages/dataProvider/dataProvider.component.html
View File

@ -17,8 +17,7 @@
<schema2jsonld *ngIf="dataProviderInfo" [data]=dataProviderInfo <schema2jsonld *ngIf="dataProviderInfo" [data]=dataProviderInfo
[URL]="properties.domain+ properties.baseLink +properties.searchLinkToDataProvider +datasourceId" [URL]="properties.domain+ properties.baseLink +properties.searchLinkToDataProvider +datasourceId"
type="datasource" type="datasource"
[otherURL]="(dataProviderInfo.openDoarId)?(properties.openDoarURL+dataProviderInfo.openDoarId):((dataProviderInfo.r3DataId)?properties.r3DataURL+dataProviderInfo.r3DataId:nul)"></schema2jsonld> [otherURL]="(dataProviderInfo.openDoarId)?(properties.openDoarURL+dataProviderInfo.openDoarId):((dataProviderInfo.r3DataId)?properties.r3DataURL+dataProviderInfo.r3DataId:null)"></schema2jsonld>
<landing-header [properties]="properties" [title]="dataProviderInfo.title.name" <landing-header [properties]="properties" [title]="dataProviderInfo.title.name"
[subTitle]="(dataProviderInfo.officialName [subTitle]="(dataProviderInfo.officialName
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null" && dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"

2
notifications/notify-form/notify-form.component.ts
View File

@ -48,7 +48,7 @@ declare var UIkit;
<div dashboard-input [formInput]="form.get('message')" <div dashboard-input [formInput]="form.get('message')"
[rows]="4" placeholder="Send a notification" [rows]="4" placeholder="Send a notification"
type="textarea" class="uk-width-expand"> type="textarea" class="uk-width-expand">
<div options class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right"> <div tools class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right">
<button *ngIf="!sending && message" (click)="sendNotification()" <button *ngIf="!sending && message" (click)="sendNotification()"
class="uk-button uk-button-small uk-button-secondary">Send</button> class="uk-button uk-button-small uk-button-secondary">Send</button>
<button *ngIf="sending || !message" (click)="sendNotification()" <button *ngIf="sending || !message" (click)="sendNotification()"

182
sharedComponents/input/input.component.css
View File

@ -1,43 +1,167 @@
.left, .right { :host {
padding: 0 10px; --input-placeholder-color: var(--placeholder-color);
--input-background: transparent;
--input-shadow: none;
--input-border: none;
--input-color: var(--grey-color);
--input-color-disabled: var(--disable-color);
--input-background-disabled: var(--muted-color);
--input-options-background: transparent;
--input-options-divider: 1px solid var(--muted-color);
--input-options-background-active: var(--table-color);
--input-options-color-active: var(--dark-color);
} }
.left { /** Input Container*/
position: absolute; .input-container {
left: 40px; box-shadow: var(--input-shadow);
top: 50%; border: var(--input-border);
transform: translateY(-50%); background: var(--input-background);
} border-radius: 6px;
position: relative;
.uk-grid-small .left { }
left: 20px;
} .input-container.disabled {
background-color: var(--input-background-disabled);
.left + .input-box { }
padding-left: 41px;
} .input-container.opened {
z-index: 1;
.right { }
/** Input wrapper*/
.input-wrapper {
padding: 20px 0 20px 20px;
cursor: text;
position: relative;
color: var(--input-color);
}
.input-wrapper.select {
cursor: pointer;
}
.input-container.disabled > .input-wrapper {
cursor: not-allowed !important;
user-select: none;
color: var(--input-color-disabled);
}
/** Placeholder */
.input-wrapper > .placeholder {
position: absolute; position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0; right: 0;
top: 50%; overflow: hidden;
pointer-events: none;
color: var(--input-placeholder-color);
padding: 20px;
}
.input-container.disabled > .input-wrapper > .placeholder {
color: var(--input-color-disabled);
}
.input-wrapper > .placeholder > label {
position: absolute;
font-size: 16px;
line-height: 24px;
top: 32px;
transform: translateY(-50%); transform: translateY(-50%);
transition: all 0.5s ease 0s;
} }
.right + .input-box { .input-container.focused > .input-wrapper > .placeholder > label {
padding-right: 41px; top: 15px;
font-size: 12px;
line-height: 18px;
} }
.input-message { /** Input */
font-family: "Roboto", sans-serif; .input-wrapper .input {
font-size: 14px; outline: 0 none !important;
box-shadow: none;
border-radius: 0;
border: 0 none;
padding: 0 20px 0 0;
background: transparent !important;
color: inherit;
width: 100%;
min-height: 24px;
font-size: inherit;
line-height: inherit;
resize: none;
cursor: inherit;
} }
.chip-input { .input-wrapper .input:disabled {
min-width: 100px; background: transparent;
} }
.left.top, .right.top { .input-wrapper .input::placeholder {
top: 20%; color: transparent;
transform: translateY(-20%); }
/* Tools */
.input-wrapper > .tools {
max-height: 0;
transition: max-height 0.3s linear;
overflow: hidden;
padding-right: 20px;
}
.input-container.focused > .input-wrapper > .tools {
max-height: 100px;
}
/* Options */
.input-container > .options {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s linear;
background: var(--input-options-background);
}
.input-container.opened > .options {
max-height: 200px;
}
.input-container > .options > ul {
margin: 0;
padding: 1px;
list-style: none;
}
.input-container > .options > ul > li > a {
padding: 10px 15px;
background: transparent;
color: var(--input-placeholder-color);
display: block;
}
.input-container > .options > ul > li:nth-child(n+2) {
border-top: var(--input-options-divider);
}
.input-container > .options > ul > li:last-child {
border-radius: 0 0 6px 6px;
}
.input-container > .options > ul > li:hover > a, .input-container > .options > ul > li.uk-active > a{
background: var(--input-options-background-active);
color: var(--input-options-color-active);
font-weight: 600;
}
/** Modifiers */
.inner {
--input-shadow: var(--shadow-inset);
--input-background: var(--default-color);
}
.flat {
--input-background: var(--light-color);
--input-border: 1px solid var(--muted-color);
} }

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

@ -19,7 +19,8 @@ import {MatSelect} from "@angular/material/select";
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete"; import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
import {map, startWith} from "rxjs/operators"; import {map, startWith} from "rxjs/operators";
import {MatChipInputEvent} from "@angular/material/chips"; import {MatChipInputEvent} from "@angular/material/chips";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
export interface Option { export interface Option {
icon?: string, icon?: string,
@ -28,63 +29,65 @@ export interface Option {
label: string label: string
} }
/**
* WARNING! dashboard-input selector is @deprecated, use input instead
*
* */
@Component({ @Component({
selector: '[dashboard-input]', selector: '[dashboard-input], [input]',
template: ` template: `
<div *ngIf="label && type != 'checkbox'" <div class="input-container" [ngClass]="inputClass" [class.disabled]="formControl.disabled"
class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div> [class.focused]="(focused && type !== 'select') || formControl.value" [class.opened]="opened">
<div *ngIf="hint" class="uk-margin-bottom uk-form-hint">{{hint}}</div> <div #inputBox class="input-wrapper" [class.select]="type === 'select'">
<div class="uk-grid uk-flex" [ngClass]="'uk-flex-' + flex" [class.uk-grid-small]="gridSmall" uk-grid> <div class="placeholder">
<ng-content></ng-content> <label>{{placeholder}} <sup *ngIf="required">*</sup></label>
<div [class.uk-hidden]="hideControl" class="uk-width-expand uk-position-relative"
[class.uk-flex-first]="!extraLeft">
<ng-template [ngIf]="icon && formControl.enabled">
<span class="uk-text-muted" [class.top]="type === 'textarea'" [ngClass]="iconLeft?('left'):'right'">
<icon [name]="icon"></icon>
</span>
</ng-template>
<ng-template [ngIf]="formControl.disabled">
<span class="uk-text-muted left" [class.top]="type === 'textarea'">
<icon [name]="'lock'"></icon>
</span>
</ng-template>
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<div [ngClass]="inputClass"
[class.uk-form-danger]="formControl.invalid && formControl.touched"
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null">
<input #input class="uk-input" [placeholder]="placeholder" [formControl]="formControl">
</div> </div>
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'">
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<input #input class="input" [formControl]="formAsControl">
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'textarea'"> <ng-template [ngIf]="type === 'textarea'">
<div [ngClass]="inputClass" class="uk-padding-remove-right" <textarea #textArea class="input" [rows]="rows" [formControl]="formAsControl"></textarea>
[class.uk-form-danger]="formControl.invalid && formControl.touched"
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null">
<textarea class="uk-textarea"
[rows]="rows" [placeholder]="placeholder"
[formControl]="formControl">
</textarea>
<div class="tools" [class.focused]="focused">
<ng-content select="[options]"></ng-content>
</div>
</div>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'select'"> <ng-template [ngIf]="type === 'select'">
<div class="input">{{getLabel(formControl.value)}}</div>
</ng-template>
<div *ngIf="formControl.disabled || icon || type === 'select'" class="uk-margin-small-left uk-margin-right">
<icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon>
<icon *ngIf="formControl.enabled && icon" [name]="icon" [flex]="true"></icon>
<icon *ngIf="formControl.enabled && !icon" name="arrow_drop_down" [flex]="true"></icon>
</div>
</div>
<div class="tools">
<ng-content select="[tools]"></ng-content>
</div>
</div>
<div #optionBox class="options">
<ul *ngIf="options?.length > 1">
<li *ngFor="let option of options" [class.uk-active]="formControl.value === option.value">
<a (click)="selectOption(option)">{{option.label}}</a>
</li>
</ul>
</div>
</div>
<!--<ng-template [ngIf]="type === 'select'">
<div [ngClass]="inputClass" <div [ngClass]="inputClass"
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
[class.clickable]="formControl.enabled" [class.clickable]="formControl.enabled"
[class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()"> [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
<mat-form-field class="uk-width-1-1"> <mat-form-field class="uk-width-1-1">
<mat-select #select [required]="required" [value]="null" <mat-select #select [required]="required" [value]="null"
(openedChange)="stopPropagation()" [formControl]="formControl" (openedChange)="stopPropagation()" [formControl]="formAsControl"
[disableOptionCentering]="true"> [disableOptionCentering]="true">
<mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option> <mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option>
<mat-option *ngFor="let option of options" [value]="option.value" [attr.uk-tooltip]="(tooltip) ? option.label : null"> <mat-option *ngFor="let option of options" [value]="option.value"
[attr.uk-tooltip]="(tooltip) ? option.label : null">
{{option.label}} {{option.label}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
</ng-template> </ng-template>-->
<ng-template [ngIf]="type === 'autocomplete'"> <ng-template [ngIf]="type === 'autocomplete'">
<div [ngClass]="inputClass" <div [ngClass]="inputClass"
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
@ -95,7 +98,8 @@ export interface Option {
<mat-chip *ngIf="formControl.value" [selectable]="false" [removable]="removable" <mat-chip *ngIf="formControl.value" [selectable]="false" [removable]="removable"
[attr.uk-tooltip]="getLabel(formControl.value)"> [attr.uk-tooltip]="getLabel(formControl.value)">
<span class="uk-flex uk-flex-middle uk-width-1-1"> <span class="uk-flex uk-flex-middle uk-width-1-1">
<span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(formControl.value)}}</span> <span class="uk-width-expand uk-text-truncate"
[class.uk-text-small]="smallChip">{{getLabel(formControl.value)}}</span>
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1" <icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1"
(click)="resetSearch($event)"></icon> (click)="resetSearch($event)"></icon>
</span> </span>
@ -108,8 +112,10 @@ export interface Option {
</div> </div>
<div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div> <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
</mat-chip-list> </mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="formControl.setValue($event.option.value)" [class]="panelClass" [panelWidth]="panelWidth"> <mat-autocomplete #auto="matAutocomplete" (optionSelected)="formControl.setValue($event.option.value)"
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" [attr.uk-tooltip]="option.label"> [class]="panelClass" [panelWidth]="panelWidth">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.value"
[attr.uk-tooltip]="option.label">
{{option.label}} {{option.label}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
@ -120,18 +126,22 @@ export interface Option {
<div [ngClass]="inputClass" <div [ngClass]="inputClass"
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
[class.clickable]="formControl.enabled" [class.clickable]="formControl.enabled"
[class.uk-form-danger]="formControl.invalid && searchControl.invalid && searchControl.touched" (click)="openSelect()"> [class.uk-form-danger]="formControl.invalid && searchControl.invalid && searchControl.touched"
(click)="openSelect()">
<mat-form-field class="uk-width-1-1"> <mat-form-field class="uk-width-1-1">
<mat-chip-list #chipList> <mat-chip-list #chipList>
<mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false" <mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"
[removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)"> [removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)">
<span class="uk-flex uk-flex-middle uk-width-1-1"> <span class="uk-flex uk-flex-middle uk-width-1-1">
<span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span> <span class="uk-width-expand uk-text-truncate"
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon> [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span>
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1"
(click)="removed(i)"></icon>
</span> </span>
</mat-chip> </mat-chip>
<div class="uk-width-expand uk-position-relative chip-input"> <div class="uk-width-expand uk-position-relative chip-input">
<input #searchInput style="width: calc(100% - 8px) !important;" [formControl]="searchControl" [matAutocomplete]="auto" <input #searchInput style="width: calc(100% - 8px) !important;" [formControl]="searchControl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin" [matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin"
[matChipInputAddOnBlur]="addExtraChips && searchControl.value" [matChipInputAddOnBlur]="addExtraChips && searchControl.value"
(matChipInputTokenEnd)="add($event)"> (matChipInputTokenEnd)="add($event)">
@ -140,8 +150,10 @@ export interface Option {
</div> </div>
<div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div> <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
</mat-chip-list> </mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth"> <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass"
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" [attr.uk-tooltip]="option.label"> [panelWidth]="panelWidth">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.value"
[attr.uk-tooltip]="option.label">
{{option.label}} {{option.label}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
@ -150,12 +162,13 @@ export interface Option {
</ng-template> </ng-template>
<span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger input-message"> <span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger input-message">
<span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span> <span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
<span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span> <span
*ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
</span> </span>
<span class="uk-text-danger input-message"> <span class="uk-text-danger uk-text-small">
<ng-content select="[error]"></ng-content> <ng-content select="[error]"></ng-content>
</span> </span>
<span *ngIf="formControl.valid" class="uk-text-warning input-message"> <span *ngIf="formControl.valid" class="uk-text-warning uk-text-small">
<ng-content select="[warning]"></ng-content> <ng-content select="[warning]"></ng-content>
<span *ngIf="!secure"> <span *ngIf="!secure">
<span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://</span>example.com/my-secure-image.png" <span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://</span>example.com/my-secure-image.png"
@ -163,36 +176,43 @@ export interface Option {
<span class="uk-text-bold">Browsers may not load non secure content.</span> <span class="uk-text-bold">Browsers may not load non secure content.</span>
</span> </span>
</span> </span>
<span class="input-message"> <span class="uk-text-small">
<ng-content select="[note]"></ng-content> <ng-content select="[note]"></ng-content>
</span> </span>
</div>
</div>
<mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>
`, `,
styleUrls: ['input.component.css'] styleUrls: ['input.component.css']
}) })
export class InputComponent implements OnDestroy, AfterViewInit, OnChanges { export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges {
/** Basic information */ /** Basic information */
@Input('formInput') formControl: AbstractControl; @Input('formInput') formControl: AbstractControl;
@Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text'; @Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'chips' = 'text';
@Input() value: any | any[];
@Output() valueChange = new EventEmitter<any | any[]>();
/** @deprecated */
@Input('label') label: string; @Input('label') label: string;
/** Text */ /** Text */
@ViewChild('input') input: ElementRef; @ViewChild('input') input: ElementRef;
/** Textarea options */ /** Textarea options */
@ViewChild('textArea') textArea: ElementRef;
@Input('rows') rows: number = 3; @Input('rows') rows: number = 3;
/** Select | chips available options */ /** Select | chips available options */
@Input('options') options: Option[] = []; @Input('options') options: Option[] = [];
/** @deprecated */
@Input('hint') hint = null; @Input('hint') hint = null;
@Input('placeholder') placeholder = ''; @Input('placeholder') placeholder = '';
@Input() inputClass: string = 'input-box'; @Input() inputClass: string = 'inner';
/** Extra element Right or Left of the input */ /** Extra element Right or Left of the input */
/** @deprecated */
@Input() extraLeft: boolean = true; @Input() extraLeft: boolean = true;
/** @deprecated */
@Input() gridSmall: boolean = false; @Input() gridSmall: boolean = false;
/** @deprecated */
@Input() hideControl: boolean = false; @Input() hideControl: boolean = false;
/** @deprecated */
@Input() flex: 'middle' | 'top' | 'bottom' = 'middle'; @Input() flex: 'middle' | 'top' | 'bottom' = 'middle';
/** Icon Right or Left on the input */ /** Icon on the input */
@Input() icon: string = null; @Input() icon: string = null;
/** @deprecated */
@Input() iconLeft: boolean = false; @Input() iconLeft: boolean = false;
/** Chip options */ /** Chip options */
@Input() removable: boolean = true; @Input() removable: boolean = true;
@ -202,31 +222,69 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
@Input() panelClass: string = null; @Input() panelClass: string = null;
@Input() showOptionsOnEmpty: boolean = true; @Input() showOptionsOnEmpty: boolean = true;
@Input() validators: ValidatorFn[] | ValidatorFn; @Input() validators: ValidatorFn[] | ValidatorFn;
@Input() disabled: boolean = false;
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
/** LogoUrl information */ /** LogoUrl information */
public secure: boolean = true; public secure: boolean = true;
/** Internal basic information */ /** Internal basic information */
public required: boolean = false; public required: boolean = false;
public focused: boolean = false;
public opened: boolean = false;
public properties: EnvProperties = properties;
private initValue: any; private initValue: any;
private subscriptions: any[] = [];
/** Chips && Autocomplete*/ /** Chips && Autocomplete*/
public filteredOptions: Observable<Option[]>; public filteredOptions: Observable<Option[]>;
public searchControl: FormControl; public searchControl: FormControl;
private subscriptions: any[] = [];
@Input() tooltip: boolean = true; @Input() tooltip: boolean = true;
@ViewChild('select') select: MatSelect; @ViewChild('inputBox') inputBox: ElementRef;
@ViewChild('optionBox') optionBox: ElementRef;
@ViewChild('searchInput') searchInput: ElementRef; @ViewChild('searchInput') searchInput: ElementRef;
focused: boolean = false;
constructor(private elementRef: ElementRef) { constructor(private elementRef: ElementRef) {
if (elementRef.nativeElement.hasAttribute('dashboard-input') && this.properties.environment === "development") {
console.warn("'dashboard-input' selector is deprecated; use 'input' instead.");
}
} }
@HostListener('document:click', ['$event']) @HostListener('document:click', ['$event'])
clickOut(event) { click(event) {
this.focused = !!this.elementRef.nativeElement.contains(event.target); this.focused = (this.inputBox && this.inputBox.nativeElement.contains(event.target));
if (this.focused) {
if(this.input) {
this.input.nativeElement.focus();
} else if(this.textArea) {
this.textArea.nativeElement.focus();
}
this.open(!this.opened);
} else {
this.open(false);
}
this.focusEmitter.emit(this.focused); this.focusEmitter.emit(this.focused);
} }
ngOnInit() {
if(!this.formControl) {
if(Array.isArray(this.value)) {
this.formControl = new FormArray([]);
this.value.forEach(value => {
this.formAsArray.push(new FormControl(value, this.validators));
});
} else {
this.formControl = new FormControl(this.value);
this.formControl.setValidators(this.validators);
}
if(this.disabled) {
this.formControl.disable();
}
}
}
ngAfterViewInit() { ngAfterViewInit() {
/** If options are available set max-height base on input-wrapper height */
if(this.options && this.options.length > 1) {
this.elementRef.nativeElement.style.maxHeight = this.inputBox.nativeElement.clientHeight + 'px';
}
this.reset(); this.reset();
} }
@ -236,26 +294,38 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
} }
} }
get formAsControl(): FormControl {
if (this.formControl instanceof FormControl) {
return this.formControl;
} else {
return null;
}
}
get formAsArray(): FormArray { get formAsArray(): FormArray {
return (<FormArray>this.formControl); if (this.formControl instanceof FormArray) {
return this.formControl;
} else {
return null;
}
} }
reset() { reset() {
this.secure = true; this.secure = true;
this.unsubscribe(); this.unsubscribe();
this.initValue = HelperFunctions.copy(this.formControl.value); this.initValue = HelperFunctions.copy(this.formControl.value);
if(this.type === 'logoURL') { if (this.type === 'logoURL') {
this.secure = (!this.initValue || this.initValue.includes('https://')); this.secure = (!this.initValue || this.initValue.includes('https://'));
} }
if (this.type === 'chips' || this.type === 'autocomplete') { if (this.type === 'chips' || this.type === 'autocomplete') {
if(this.options) { if (this.options) {
this.filteredOptions = of(this.options); this.filteredOptions = of(this.options);
this.searchControl = new FormControl('', this.validators); this.searchControl = new FormControl('', this.validators);
this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => { this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
setTimeout(() => { setTimeout(() => {
this.searchInput.nativeElement.focus(); this.searchInput.nativeElement.focus();
this.searchInput.nativeElement.value = value; this.searchInput.nativeElement.value = value;
},0); }, 0);
})); }));
this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''), this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),
map(option => this.filter(option))); map(option => this.filter(option)));
@ -267,20 +337,19 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
} }
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => { this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
value = (value === '') ? null : value; value = (value === '') ? null : value;
if(this.type === 'logoURL') { if (this.type === 'logoURL') {
this.secure = (!value || value.includes('https://')); this.secure = (!value || value.includes('https://'));
} }
if (this.initValue === value || (this.initValue === '' && value === null)) { if (this.initValue === value || (this.initValue === '' && value === null)) {
this.formControl.markAsPristine(); this.formControl.markAsPristine();
} }
if(this.searchControl) { if (this.searchControl) {
this.searchControl.setValue(null); this.searchControl.setValue(null);
} }
this.value = this.formControl.value;
this.valueChange.emit(this.value);
})); }));
if (!this.formControl.value) { if (this.input) {
this.formControl.setValue((this.type === "checkbox")?false:'');
}
if(this.input) {
this.input.nativeElement.disabled = this.formControl.disabled; this.input.nativeElement.disabled = this.formControl.disabled;
} }
} }
@ -293,12 +362,6 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
}); });
} }
openSelect() {
if (this.select) {
this.select.open();
}
}
ngOnDestroy(): void { ngOnDestroy(): void {
this.unsubscribe(); this.unsubscribe();
} }
@ -323,11 +386,11 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
private filter(value: string): Option[] { private filter(value: string): Option[] {
let options = this.options; let options = this.options;
if(this.type === "chips") { if (this.type === "chips") {
options = options.filter(option => !this.formAsArray.value.find(value => HelperFunctions.equals(option.value, value))); options = options.filter(option => !this.formAsArray.value.find(value => HelperFunctions.equals(option.value, value)));
} }
if ((!value || value.length == 0)) { if ((!value || value.length == 0)) {
return (this.showOptionsOnEmpty)?options:[]; return (this.showOptionsOnEmpty) ? options : [];
} }
const filterValue = value.toString().toLowerCase(); const filterValue = value.toString().toLowerCase();
return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1); return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1);
@ -348,10 +411,23 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
return (option) ? option.label : value; return (option) ? option.label : value;
} }
open(value: boolean) {
this.opened = value && this.formControl.enabled;
setTimeout(() => {
this.optionBox.nativeElement.style.overflow = this.opened?'auto':'hidden';
}, this.opened?200:0);
}
resetSearch(event: any) { resetSearch(event: any) {
event.stopPropagation(); event.stopPropagation();
this.searchControl.setValue(''); this.searchControl.setValue('');
this.formControl.markAsDirty(); // TODO check - should it also become dirty on addition? this.formControl.markAsDirty();
this.formControl.setValue(null); this.formControl.setValue(null);
} }
selectOption(option: Option) {
if(this.formAsControl) {
this.formAsControl.setValue(option.value);
}
}
} }

2
utils/icons/icons.ts
View File

@ -156,7 +156,7 @@ export const incognito = {
export const restricted = { export const restricted = {
name: 'restricted', name: 'restricted',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="noun-remove-file-3557544" transform="translate(-176.397 -106.4)"><path id="Path_104600" data-name="Path 104600" d="M181.881,274.166A5.485,5.485,0,1,0,178,272.559,5.484,5.484,0,0,0,181.881,274.166Zm-3.548-5.484a3.531,3.531,0,0,1,.452-1.729l4.839,4.839a3.548,3.548,0,0,1-5.29-3.11Zm7.1,0a3.527,3.527,0,0,1-.452,1.729l-4.839-4.839a3.548,3.548,0,0,1,5.29,3.11Z" transform="translate(0 -147.766)" fill="#4b4b4b"/><path id="Path_104601" data-name="Path 104601" d="M245.859,106.4a2.258,2.258,0,0,0-2.258,2.258v4.516h1.936v-4.516a.323.323,0,0,1,.323-.323h8.064v3.871h3.871v11.935a.323.323,0,0,1-.323.323h-5.484V126.4h5.484a2.259,2.259,0,0,0,2.258-2.258v-13.3l-4.439-4.439Z" transform="translate(-63.333)" fill="#4b4b4b"/></g></svg>' data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="noun-remove-file-3557544" transform="translate(-176.397 -106.4)"><path id="Path_104600" data-name="Path 104600" d="M181.881,274.166A5.485,5.485,0,1,0,178,272.559,5.484,5.484,0,0,0,181.881,274.166Zm-3.548-5.484a3.531,3.531,0,0,1,.452-1.729l4.839,4.839a3.548,3.548,0,0,1-5.29-3.11Zm7.1,0a3.527,3.527,0,0,1-.452,1.729l-4.839-4.839a3.548,3.548,0,0,1,5.29,3.11Z" transform="translate(0 -147.766)"/><path id="Path_104601" data-name="Path 104601" d="M245.859,106.4a2.258,2.258,0,0,0-2.258,2.258v4.516h1.936v-4.516a.323.323,0,0,1,.323-.323h8.064v3.871h3.871v11.935a.323.323,0,0,1-.323.323h-5.484V126.4h5.484a2.259,2.259,0,0,0,2.258-2.258v-13.3l-4.439-4.439Z" transform="translate(-63.333)"/></g></svg>'
} }
export const graph = { export const graph = {