inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-04-16 22:24:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring autocomplete fields form in order to use the material 2 autocomplete (#2358)

Browse Source
This commit is contained in:
Eugenio Romano
2017-09-21 10:10:47 +01:00
committed by Popovics András
parent c8743dacc6
commit 4f84079a19
26 changed files with 663 additions and 1458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html
View File

@@ -8,19 +8,19 @@
type="text"
[id]="field.id"
[(ngModel)]="value"
(ngModelChange)="checkVisibility(field)"
(keyup)="onKeyUp($event)"
(blur)="onBlur()"
[disabled]="field.readOnly"
placeholder="{{field.placeholder}}">
placeholder="{{field.placeholder}}"
[mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
<md-option *ngFor="let item of groups"
[id]="field.id +'-'+item.id"
(click)="onItemClick(item, $event)" [value]="item">
<span>{{item.name}}</span>
</md-option>
</md-autocomplete>
</md-input-container>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
<div class="adf-group-autocomplete mat-elevation-z2" *ngIf="popupVisible">
<md-option *ngFor="let item of groups"
[id]="field.id +'-'+item.id"
(click)="onItemClick(item, $event)">
<span>{{item.name}}</span>
</md-option>
</div>

25
ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.scss
View File

@@ -6,29 +6,4 @@
&-group-widget {
width: 100%;
}
&-group-autocomplete {
background-color: #fff;
position: inherit;
max-height: 200px;
overflow-y: auto;
z-index: 5;
width: 100%;
color: #555;
margin: -15px 0 0 0;
> md-option {
list-style-type: none;
position: static;
height: auto;
width: auto;
min-width: 124px;
padding: 8px 0;
margin: 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
> span {
opacity: 1;
}
}
}
}

42
ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.spec.ts
View File

@@ -74,16 +74,6 @@ describe('FunctionalGroupWidgetComponent', () => {
expect(widget.groupId).toBe('<id>');
});
it('should flush value on blur', (done) => {
spyOn(widget, 'flushValue').and.stub();
widget.onBlur();
setTimeout(() => {
expect(widget.flushValue).toHaveBeenCalled();
done();
}, 200);
});
it('should prevent default behaviour on option item click', () => {
let event = jasmine.createSpyObj('event', ['preventDefault']);
widget.onItemClick(null, event);
@@ -98,12 +88,6 @@ describe('FunctionalGroupWidgetComponent', () => {
expect(widget.value).toBe(item.name);
});
it('should hide popup on flush', () => {
widget.popupVisible = true;
widget.flushValue();
expect(widget.popupVisible).toBeFalsy();
});
it('should update form on value flush', () => {
spyOn(widget.field, 'updateForm').and.callThrough();
widget.flushValue();
@@ -138,12 +122,6 @@ describe('FunctionalGroupWidgetComponent', () => {
expect(widget.field.value).toBe(groups[1]);
});
it('should hide popup on key up', () => {
widget.popupVisible = true;
widget.onKeyUp(null);
expect(widget.popupVisible).toBeFalsy();
});
it('should fetch groups and show popup on key up', () => {
let groups: GroupModel[] = [
new GroupModel(),
@@ -156,12 +134,12 @@ describe('FunctionalGroupWidgetComponent', () => {
})
);
let keyboardEvent = new KeyboardEvent('keypress');
widget.value = 'group';
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowGroups).toHaveBeenCalledWith('group', undefined);
expect(widget.groups).toBe(groups);
expect(widget.popupVisible).toBeTruthy();
});
it('should fetch groups with a group filter', () => {
@@ -176,13 +154,13 @@ describe('FunctionalGroupWidgetComponent', () => {
})
);
let keyboardEvent = new KeyboardEvent('keypress');
widget.groupId = 'parentGroup';
widget.value = 'group';
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowGroups).toHaveBeenCalledWith('group', 'parentGroup');
expect(widget.groups).toBe(groups);
expect(widget.popupVisible).toBeTruthy();
});
it('should hide popup when fetching empty group list', () => {
@@ -193,32 +171,32 @@ describe('FunctionalGroupWidgetComponent', () => {
})
);
let keyboardEvent = new KeyboardEvent('keypress');
widget.value = 'group';
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowGroups).toHaveBeenCalledWith('group', undefined);
expect(widget.groups.length).toBe(0);
expect(widget.popupVisible).toBeFalsy();
});
it('should not fetch groups when value is missing', () => {
spyOn(formService, 'getWorkflowGroups').and.stub();
let keyboardEvent = new KeyboardEvent('keypress');
widget.value = null;
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowGroups).not.toHaveBeenCalled();
expect(widget.popupVisible).toBeFalsy();
});
it('should not fetch groups when value violates constraints', () => {
spyOn(formService, 'getWorkflowGroups').and.stub();
let keyboardEvent = new KeyboardEvent('keypress');
widget.minTermLength = 4;
widget.value = '123';
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowGroups).not.toHaveBeenCalled();
expect(widget.popupVisible).toBeFalsy();
});
});

37
ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts
View File

@@ -17,6 +17,7 @@
/* tslint:disable:component-selector */
import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
import { FormService } from '../../../services/form.service';
import { GroupModel } from './../core/group.model';
@@ -32,7 +33,7 @@ import { baseHost , WidgetComponent } from './../widget.component';
export class FunctionalGroupWidgetComponent extends WidgetComponent implements OnInit {
value: string;
popupVisible: boolean = false;
oldValue: string;
groups: GroupModel[] = [];
minTermLength: number = 1;
groupId: string;
@@ -42,8 +43,6 @@ export class FunctionalGroupWidgetComponent extends WidgetComponent implements O
super(formService);
}
// TODO: investigate, called 2 times
// https://github.com/angular/angular/issues/6782
ngOnInit() {
if (this.field) {
let group = this.field.value;
@@ -67,26 +66,18 @@ export class FunctionalGroupWidgetComponent extends WidgetComponent implements O
}
onKeyUp(event: KeyboardEvent) {
if (this.value && this.value.length >= this.minTermLength) {
this.formService.getWorkflowGroups(this.value, this.groupId)
.subscribe((result: GroupModel[]) => {
this.groups = result || [];
this.popupVisible = this.groups.length > 0;
});
} else {
this.popupVisible = false;
if (this.value && this.value.length >= this.minTermLength && this.oldValue !== this.value) {
if (event.keyCode !== ESCAPE && event.keyCode !== ENTER) {
this.oldValue = this.value;
this.formService.getWorkflowGroups(this.value, this.groupId)
.subscribe((result: GroupModel[]) => {
this.groups = result || [];
});
}
}
}
onBlur() {
setTimeout(() => {
this.flushValue();
}, 200);
}
flushValue() {
this.popupVisible = false;
let option = this.groups.find(item => item.name.toLocaleLowerCase() === this.value.toLocaleLowerCase());
if (option) {
@@ -100,7 +91,6 @@ export class FunctionalGroupWidgetComponent extends WidgetComponent implements O
this.field.updateForm();
}
// TODO: still causes onBlur execution
onItemClick(item: GroupModel, event: Event) {
if (item) {
this.field.value = item;
@@ -110,4 +100,11 @@ export class FunctionalGroupWidgetComponent extends WidgetComponent implements O
event.preventDefault();
}
}
onItemSelect(item: GroupModel) {
if (item) {
this.field.value = item;
this.value = item.name;
}
}
}

37
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html
View File

@@ -12,28 +12,27 @@
type="text"
[id]="field.id"
[(ngModel)]="value"
(ngModelChange)="checkVisibility(field)"
(keyup)="onKeyUp($event)"
[disabled]="field.readOnly"
placeholder="{{field.placeholder}}">
placeholder="{{field.placeholder}}"
[mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
<md-option *ngFor="let user of users; let i = index"
(click)="onItemClick(user, $event)" [value]="user">
<div class="adf-people-widget-row" id="adf-people-widget-user-{{i}}">
<div class="adf-people-widget-pic">
{{getInitialUserName(user.firstName, user.lastName)}}
</div>
<div *ngIf="user.userImage" class="adf-people-widget-image-row">
<img id="adf-people-widget-pic-{{i}}" class="adf-people-widget-image"
[src]="user.userImage"
(error)="onErrorImageLoad(user)"/>
</div>
<span class="adf-people-label-name">{{getDisplayName(user)}}</span>
</div>
</md-option>
</md-autocomplete>
</md-input-container>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
<div class="adf-people-autocomplete mat-elevation-z2" [hidden]="!popupVisible || users.length === 0">
<md-option *ngFor="let user of users; let i = index"
[id]="field.id +'-'+user.id"
(click)="onItemClick(user, $event)">
<div class="adf-people-widget-row">
<div id="adf-people-widget-initial-{{i}}" *ngIf="!user.userImage" class="adf-people-widget-pic">
{{getInitialUserName(user.firstName, user.lastName)}}
</div>
<div *ngIf="user.userImage" class="adf-people-widget-image-row">
<img id="adf-people-widget-pic-{{i}}" class="adf-people-widget-image"
[src]="user.userImage"
(error)="onErrorImageLoad(user)"/>
</div>
<span class="adf-people-label-name">{{getDisplayName(user)}}</span>
</div>
</md-option>
</div>

109
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss
View File

@@ -1,69 +1,52 @@
@import '~ng2-alfresco-core/styles/theming';
@import '../form';
@import '~@angular/material/theming';
.adf {
@mixin mat-people-widget-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
&-people-widget {
width: 100%;
}
.adf {
&-people-autocomplete {
background-color: #fff;
position:inherit;
max-height: 200px;
width: 100%;
overflow-y: auto;
z-index: 5;
border-radius: 3%;
color: #555;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
> md-option {
list-style-type: none;
position: static;
height: auto;
width: auto;
min-width: 124px;
padding: 8px 0 0 20px;
margin: 0;
border-radius: 2px;
> span {
opacity: 1;
}
&-people-widget {
width: 100%;
}
&-people-widget-pic {
background: mat-color($primary);
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: mat-color($foreground, text);
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle;
}
&-people-widget-row {
padding-bottom: 10px;
}
&-people-widget-image {
margin-left: -45px;
left: 21px;
background: mat-color($background, dialog);
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0;
}
&-people-widget-image-row {
display: inline-block;
}
&-people-label-name {
padding-left: 10px;
}
}
&-people-widget-pic {
background: #ff9800;
display: inline-block;
width: 30px;
padding: 0 9px;
border-radius: 100px;
color: #fff;
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle;
}
&-people-widget-row {
padding-bottom: 10px;
}
&-people-widget-image {
border-radius: 100px;
width: 50px;
height: 50px;
vertical-align: middle;
display: inline-block;
padding: 0 0;
}
&-people-widget-image-row {
display: inline-block;
}
&-people-label-name {
padding-left: 10px;
}
}

51
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts
View File

@@ -142,12 +142,12 @@ describe('PeopleWidgetComponent', () => {
})
);
let keyboardEvent = new KeyboardEvent('keypress');
widget.value = 'user1';
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
expect(widget.users).toBe(users);
expect(widget.popupVisible).toBeTruthy();
});
it('should fetch users by search term and group id', () => {
@@ -159,13 +159,13 @@ describe('PeopleWidgetComponent', () => {
})
);
let keyboardEvent = new KeyboardEvent('keypress');
widget.value = 'user1';
widget.groupId = '1001';
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
expect(widget.users).toBe(users);
expect(widget.popupVisible).toBeTruthy();
});
it('should fetch users and show no popup', () => {
@@ -176,19 +176,20 @@ describe('PeopleWidgetComponent', () => {
})
);
let keyboardEvent = new KeyboardEvent('keypress');
widget.value = 'user1';
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
expect(widget.users).toEqual([]);
expect(widget.popupVisible).toBeFalsy();
});
it('should require search term to fetch users', () => {
spyOn(formService, 'getWorkflowUsers').and.stub();
let keyboardEvent = new KeyboardEvent('keypress');
widget.value = null;
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).not.toHaveBeenCalled();
});
@@ -196,19 +197,14 @@ describe('PeopleWidgetComponent', () => {
it('should not fetch users due to constraint violation', () => {
spyOn(formService, 'getWorkflowUsers').and.stub();
let keyboardEvent = new KeyboardEvent('keypress');
widget.value = '123';
widget.minTermLength = 4;
widget.onKeyUp(null);
widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).not.toHaveBeenCalled();
});
it('should hide popup on value flush', () => {
widget.popupVisible = true;
widget.flushValue();
expect(widget.popupVisible).toBeFalsy();
});
it('should update form on value flush', () => {
spyOn(widget.field, 'updateForm').and.callThrough();
widget.flushValue();
@@ -247,31 +243,4 @@ describe('PeopleWidgetComponent', () => {
expect(widget.value).toBeNull();
expect(widget.field.value).toBeNull();
});
describe('Image', () => {
it('should show the initial in the image', () => {
widget.users = [
new GroupUserModel({firstName: 'Tony', lastName: 'Stark'}),
new GroupUserModel({firstName: 'John', lastName: 'Doe'})
];
fixture.detectChanges();
expect(element.querySelector('#adf-people-widget-initial-0').innerHTML.trim()).toBe('TS');
expect(element.querySelector('#adf-people-widget-initial-1').innerHTML.trim()).toBe('JD');
});
it('should show the the image if user has an image', () => {
widget.users = [
new GroupUserModel({firstName: 'Tony', lastName: 'Stark', userImage: 'testUrl0'}),
new GroupUserModel({firstName: 'John', lastName: 'Doe', userImage: 'testUrl1'})
];
fixture.detectChanges();
expect((element.querySelector('#adf-people-widget-pic-0') as any).src).toContain('testUrl0');
expect((element.querySelector('#adf-people-widget-pic-1') as any).src).toContain('testUrl1');
});
});
});

69
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
View File

@@ -15,10 +15,11 @@
* limitations under the License.
*/
/* tslint:disable:component-selector */
/* tslint:disable:component-selector */
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MdAutocompleteTrigger } from '@angular/material';
import { FormService } from '../../../services/form.service';
import { GroupUserModel } from '../core/group-user.model';
import { GroupModel } from '../core/group.model';
@@ -31,24 +32,21 @@ import { baseHost , WidgetComponent } from './../widget.component';
host: baseHost,
encapsulation: ViewEncapsulation.None
})
export class PeopleWidgetComponent extends WidgetComponent implements OnInit, AfterViewInit {
export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
@ViewChild('inputValue')
input: ElementRef;
@ViewChild(MdAutocompleteTrigger)
input: MdAutocompleteTrigger;
popupVisible: boolean = false;
minTermLength: number = 1;
value: string;
oldValue: string;
users: GroupUserModel[] = [];
groupId: string;
constructor(public formService: FormService,
public elementRef: ElementRef) {
super(formService);
constructor(public formService: FormService) {
super(formService);
}
// TODO: investigate, called 2 times
// https://github.com/angular/angular/issues/6782
ngOnInit() {
if (this.field) {
let user: GroupUserModel = this.field.value;
@@ -61,37 +59,27 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit, Af
let restrictWithGroup = <GroupModel> params['restrictWithGroup'];
this.groupId = restrictWithGroup.id;
}
// Load auto-completion for previously saved value
if (this.value) {
this.formService
.getWorkflowUsers(this.value, this.groupId)
.subscribe((result: GroupUserModel[]) => this.users = result || []);
}
}
}
ngAfterViewInit() {
if (this.input) {
let onBlurInputEvent = Observable.fromEvent(this.input.nativeElement, 'blur');
onBlurInputEvent.debounceTime(200).subscribe((event) => {
this.flushValue();
});
}
}
onKeyUp(event: KeyboardEvent) {
if (this.value && this.value.length >= this.minTermLength) {
this.formService.getWorkflowUsers(this.value, this.groupId)
.subscribe((result: GroupUserModel[]) => {
this.users = result || [];
this.popupVisible = this.users.length > 0;
});
} else {
this.popupVisible = false;
if (this.value && this.value.length >= this.minTermLength && this.oldValue !== this.value) {
if (event.keyCode !== ESCAPE && event.keyCode !== ENTER) {
if (this.value.length >= this.minTermLength) {
this.oldValue = this.value;
this.searchUsers();
}
}
}
}
searchUsers() {
this.formService.getWorkflowUsers(this.value, this.groupId)
.subscribe((result: GroupUserModel[]) => {
this.users = result || [];
});
}
onErrorImageLoad(user) {
if (user.userImage) {
user.userImage = null;
@@ -99,8 +87,6 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit, Af
}
flushValue() {
this.popupVisible = false;
let option = this.users.find(item => {
let fullName = this.getDisplayName(item).toLocaleLowerCase();
return (this.value && fullName === this.value.toLocaleLowerCase());
@@ -136,6 +122,13 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit, Af
}
}
onItemSelect(item: GroupUserModel) {
if (item) {
this.field.value = item;
this.value = this.getDisplayName(item);
}
}
getInitialUserName(firstName: string, lastName: string) {
firstName = (firstName !== null && firstName !== '' ? firstName[0] : '');
lastName = (lastName !== null && lastName !== '' ? lastName[0] : '');

17
ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html
View File

@@ -11,16 +11,19 @@
[id]="field.id"
[(ngModel)]="value"
(keyup)="onKeyUp($event)"
(blur)="onBlur()"
[disabled]="field.readOnly"
placeholder="{{field.placeholder}}">
placeholder="{{field.placeholder}}"
[mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
<md-option *ngFor="let item of options" (click)="onItemClick(item, $event)" [value]="item">
<span>{{item.name}}</span>
</md-option>
</md-autocomplete>
</md-input-container>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
<div class="adf-typeahead-autocomplete mat-elevation-z2" [hidden]="options.length <= 0 || !popupVisible">
<md-option *ngFor="let item of options" (click)="onItemClick(item, $event)">
<span>{{item.name}}</span>
</md-option>
</div>
</div>

26
ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.scss
View File

@@ -11,30 +11,4 @@
&-typeahead-widget {
width: 100%;
}
&-typeahead-autocomplete {
background-color: #fff;
position:absolute;
max-height: 200px;
width: 100%;
overflow-y: auto;
z-index: 5;
color: #555;
margin: -10px 0 0 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
> md-option {
list-style-type: none;
position: static;
height: auto;
width: auto;
min-width: 124px;
padding: 8px 0;
margin: 0;
border-radius: 2px;
> span {
opacity: 1;
padding-left: 23px;
}
}
}
}

90
ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts
View File

@@ -108,68 +108,6 @@ describe('TypeaheadWidgetComponent', () => {
expect(widget.handleError).toHaveBeenCalledWith(err);
});
it('should show popup on key up', () => {
spyOn(widget, 'getOptions').and.returnValue([{}, {}]);
widget.minTermLength = 1;
widget.value = 'some value';
widget.popupVisible = false;
widget.onKeyUp(null);
expect(widget.popupVisible).toBeTruthy();
});
it('should require items to show popup', () => {
widget.minTermLength = 1;
widget.value = 'some value';
widget.popupVisible = false;
widget.onKeyUp(null);
expect(widget.popupVisible).toBeFalsy();
});
it('should require value to show popup', () => {
widget.minTermLength = 1;
widget.value = '';
widget.popupVisible = false;
widget.onKeyUp(null);
expect(widget.popupVisible).toBeFalsy();
});
it('should require value to be of min length to show popup', () => {
spyOn(widget, 'getOptions').and.returnValue([{}, {}]);
widget.minTermLength = 3;
widget.value = 'v';
// value less than constraint
widget.popupVisible = false;
widget.onKeyUp(null);
expect(widget.popupVisible).toBeFalsy();
// value satisfies constraint
widget.value = 'value';
widget.onKeyUp(null);
expect(widget.popupVisible).toBeTruthy();
// value gets less than allowed again
widget.value = 'va';
widget.onKeyUp(null);
expect(widget.popupVisible).toBeFalsy();
});
it('should flush value on blur', (done) => {
spyOn(widget, 'flushValue').and.stub();
widget.onBlur();
setTimeout(() => {
expect(widget.flushValue).toHaveBeenCalled();
done();
}, 200);
});
it('should prevent default behaviour on option item click', () => {
let event = jasmine.createSpyObj('event', ['preventDefault']);
widget.onItemClick(null, event);
@@ -270,12 +208,6 @@ describe('TypeaheadWidgetComponent', () => {
expect(filtered[0]).toEqual(options[1]);
});
it('should hide popup on flush', () => {
widget.popupVisible = true;
widget.flushValue();
expect(widget.popupVisible).toBeFalsy();
});
it('should update form on value flush', () => {
spyOn(widget.field, 'updateForm').and.callThrough();
widget.flushValue();
@@ -359,22 +291,6 @@ describe('TypeaheadWidgetComponent', () => {
});
});
it('should emit field change event on blur', (done) => {
spyOn(widget, 'flushValue').and.stub();
let fakeField = new FormFieldModel(new FormModel(), { id: 'fakeField', value: 'fakeValue' });
widget.field = fakeField;
widget.onBlur();
setTimeout(() => {
widget.fieldChanged.subscribe((field) => {
expect(field).toBeDefined();
expect(field.id).toEqual('field-id');
expect(field.value).toEqual('field-value');
});
done();
}, 200);
});
describe('when template is ready', () => {
let typeaheadWidgetComponent: TypeaheadWidgetComponent;
let fixture: ComponentFixture<TypeaheadWidgetComponent>;
@@ -428,8 +344,9 @@ describe('TypeaheadWidgetComponent', () => {
}));
it('should show typeahead options', async(() => {
let keyboardEvent = new KeyboardEvent('keypress');
typeaheadWidgetComponent.value = 'F';
typeaheadWidgetComponent.onKeyUp(null);
typeaheadWidgetComponent.onKeyUp(keyboardEvent);
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.debugElement.queryAll(By.css('[id="md-option-1"]'))).toBeDefined();
@@ -472,8 +389,9 @@ describe('TypeaheadWidgetComponent', () => {
}));
it('should show typeahead options', async(() => {
let keyboardEvent = new KeyboardEvent('keypress');
typeaheadWidgetComponent.value = 'F';
typeaheadWidgetComponent.onKeyUp(null);
typeaheadWidgetComponent.onKeyUp(keyboardEvent);
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.debugElement.queryAll(By.css('[id="md-option-1"]'))).toBeDefined();

34
ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts
View File

@@ -17,6 +17,7 @@
/* tslint:disable:component-selector */
import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { LogService } from 'ng2-alfresco-core';
import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
@@ -33,9 +34,9 @@ import { baseHost , WidgetComponent } from './../widget.component';
})
export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit {
popupVisible: boolean = false;
minTermLength: number = 1;
value: string;
oldValue: string;
options: FormFieldOption[] = [];
constructor(public formService: FormService,
@@ -111,24 +112,17 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit
}
onKeyUp(event: KeyboardEvent) {
if (this.value && this.value.length >= this.minTermLength) {
this.options = this.getOptions();
this.popupVisible = this.options.length > 0;
} else {
this.popupVisible = false;
if (this.value && this.value.length >= this.minTermLength && this.oldValue !== this.value) {
if (event.keyCode !== ESCAPE && event.keyCode !== ENTER) {
if (this.value.length >= this.minTermLength) {
this.options = this.getOptions();
this.oldValue = this.value;
}
}
}
}
onBlur() {
setTimeout(() => {
this.flushValue();
this.checkVisibility();
}, 200);
}
flushValue() {
this.popupVisible = false;
let options = this.field.options || [];
let lValue = this.value ? this.value.toLocaleLowerCase() : null;
@@ -141,11 +135,9 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit
this.value = null;
}
// TODO: seems to be not needed as field.value setter calls it
this.field.updateForm();
}
// TODO: still causes onBlur execution
onItemClick(item: FormFieldOption, event: Event) {
if (item) {
this.field.value = item.id;
@@ -157,6 +149,14 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit
}
}
onItemSelect(item: FormFieldOption) {
if (item) {
this.field.value = item.id;
this.value = item.name;
this.checkVisibility();
}
}
handleError(error: any) {
this.logService.error(error);
}

1
ng2-components/ng2-activiti-form/src/components/widgets/widget.component.ts
View File

@@ -122,7 +122,6 @@ export class WidgetComponent implements AfterViewInit {
}
protected event(event: Event): void {
console.log(event);
this.formService.formEvents.next(event);
}
}

5
ng2-components/ng2-activiti-form/styles/index.scss
View File

@@ -1,9 +1,10 @@
@import '../src/components/widgets/form';
@import '../src/components/widgets/container/container.widget';
@import '../src/components/widgets/dynamic-table/dynamic-table.widget';
@import '../src/components/widgets/people/people.widget';
@mixin alfresco-activity-form-theme($theme) {
@include mat-form-theme($theme);
@include mat-container-widget-theme($theme);
@include mat-dynamic-table-theme($theme);
@include mat-people-widget-theme($theme);
}

2
ng2-components/ng2-activiti-tasklist/src/models/user.model.ts
View File

@@ -28,7 +28,7 @@ export class User {
email: string;
firstName: string;
lastName: string;
userImage: string;
userImage: string = null;
constructor(obj?: any) {
if (obj) {

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: rgba(0, 0, 0, 0.87);
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: rgba(0, 0, 0, 0.87);
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: rgba(0, 0, 0, 0.87); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(0, 0, 0, 0.38); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #2196f3;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: rgba(0, 0, 0, 0.87);
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: white;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: rgba(0, 0, 0, 0.87);
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: rgba(0, 0, 0, 0.87);
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: rgba(0, 0, 0, 0.87); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(0, 0, 0, 0.38); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #2196f3;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: rgba(0, 0, 0, 0.87);
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: white;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: rgba(0, 0, 0, 0.87);
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: rgba(0, 0, 0, 0.87);
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: rgba(0, 0, 0, 0.87); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(0, 0, 0, 0.38); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #00bcd4;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: rgba(0, 0, 0, 0.87);
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: white;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: rgba(0, 0, 0, 0.87);
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: rgba(0, 0, 0, 0.87);
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: rgba(0, 0, 0, 0.87); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(0, 0, 0, 0.38); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #00bcd4;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: rgba(0, 0, 0, 0.87);
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: white;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: rgba(0, 0, 0, 0.87);
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: rgba(0, 0, 0, 0.87);
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: rgba(0, 0, 0, 0.87); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(0, 0, 0, 0.38); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #8bc34a;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: rgba(0, 0, 0, 0.87);
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: white;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: rgba(0, 0, 0, 0.87);
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: rgba(0, 0, 0, 0.87);
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: rgba(0, 0, 0, 0.87); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(0, 0, 0, 0.38); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #8bc34a;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: rgba(0, 0, 0, 0.87);
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: white;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: rgba(0, 0, 0, 0.87);
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: rgba(0, 0, 0, 0.87);
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: rgba(0, 0, 0, 0.87); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(0, 0, 0, 0.38); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #3f51b5;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: rgba(0, 0, 0, 0.87);
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: white;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: white;
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: white;
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: white; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(255, 255, 255, 0.3); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #c2185b;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: white;
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: #424242;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

169
ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css
View File

@@ -17,7 +17,23 @@
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/* ANIMATION */
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
* attribute, however Chrome handles high contrast differently.
*/
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
* This mixin adds the correct panel transform styles based
* on the direction that the menu panel opens.
*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/**
* This mixin contains shared option styles between the select and
* autocomplete components.
*/
/**
* Applies styles for users in high contrast mode. Note that this only applies
* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,122 +2223,41 @@ container-widget .mat-focused .mat-input-prefix {
container-widget .mat-grid-tile {
overflow: visible; }
.adf-dynamic-table {
width: 100%;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.07);
white-space: nowrap;
font-size: 14px;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0; }
.adf-dynamic-table thead {
padding-bottom: 3px; }
.adf-dynamic-table tbody tr {
position: relative;
height: 56px;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color; }
.adf-dynamic-table tbody tr:hover {
background-color: #eeeeee; }
.adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
background-color: #e0f7fa; }
.adf-dynamic-table tbody tr:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: #448aff;
outline-style: solid; }
.adf-dynamic-table td, .adf-dynamic-table th {
padding: 0 18px 12px 18px;
text-align: center; }
.adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
padding-left: 24px; }
.adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
padding-right: 24px; }
.adf-dynamic-table td {
color: white;
position: relative;
vertical-align: middle;
height: 56px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
padding-top: 12px;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default; }
.adf-dynamic-table th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: 56px;
font-size: 12px;
color: white;
padding-bottom: 8px;
box-sizing: border-box; }
.adf-dynamic-table th.sortable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.adf-dynamic-table th.sortable:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
color: white; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 16px;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
cursor: pointer; }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
color: rgba(255, 255, 255, 0.3); }
.adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db"; }
.adf-dynamic-table .adf-dynamic-table-cell {
text-align: left;
cursor: default; }
.adf-dynamic-table .adf-dynamic-table-cell--text {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--number {
text-align: right; }
.adf-dynamic-table .adf-dynamic-table-cell--image {
text-align: left; }
.adf-dynamic-table .adf-dynamic-table-cell--image img {
width: 24px;
height: 24px; }
.adf-dynamic-table .full-width {
width: 100%; }
.adf-people-widget {
width: 100%; }
.adf-people-widget-pic {
background: #7b1fa2;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
color: white;
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle; }
.adf-people-widget-row {
padding-bottom: 10px; }
.adf-people-widget-image {
margin-left: -45px;
left: 21px;
background: #424242;
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0; }
.adf-people-widget-image-row {
display: inline-block; }
.adf-people-label-name {
padding-left: 10px; }
.adf-filters__entry {
cursor: pointer;

3
ng2-components/package-base.json
View File

@@ -6,7 +6,7 @@
"scripts": {
"clean": "rimraf node_modules",
"clean-lock": "rimraf package-lock.json",
"build": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.build.js --progress --profile --bail && npm run build-style",
"build": "npm run pkg-build && npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.build.js --progress --profile --bail && npm run build-style",
"build-style": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
"pkg-build": "package-json-merge ng2-alfresco-core/package.json ng2-alfresco-datatable/package.json ng2-activiti-diagrams/package.json ng2-activiti-analytics/package.json ng2-activiti-form/package.json ng2-activiti-tasklist/package.json ng2-activiti-processlist/package.json ng2-alfresco-documentlist/package.json ng2-alfresco-login/package.json ng2-alfresco-search/package.json ng2-alfresco-tag/package.json ng2-alfresco-upload/package.json ng2-alfresco-viewer/package.json ng2-alfresco-webscript/package.json ng2-alfresco-webscript/package.json ng2-alfresco-userinfo/package.json ng2-alfresco-social/package.json package-base.json > package.json",
"test": "node node_modules/karma/bin/karma start --reporters mocha,coverage --single-run --component .",
@@ -14,6 +14,7 @@
"toc": "markdown-toc -i ng2-alfresco-core/README.md && markdown-toc -i ng2-alfresco-datatable/README.md && markdown-toc -i ng2-activiti-diagrams/README.md && markdown-toc -i ng2-activiti-analytics/README.md && markdown-toc -i ng2-activiti-form/README.md && markdown-toc -i ng2-activiti-tasklist/README.md && markdown-toc -i ng2-activiti-processlist/README.md && markdown-toc -i ng2-alfresco-documentlist/README.md && markdown-toc -i ng2-alfresco-login/README.md && markdown-toc -i ng2-alfresco-search/README.md && markdown-toc -i ng2-alfresco-tag/README.md && markdown-toc -i ng2-alfresco-upload/README.md && markdown-toc -i ng2-alfresco-viewer/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-userinfo/README.md && markdown-toc -i ng2-alfresco-social/README.md && markdown-toc -i README.md",
"markdownlint": "markdownlint ng2-alfresco-core/README.md && markdownlint ng2-alfresco-datatable/README.md && markdownlint ng2-activiti-diagrams/README.md && markdownlint ng2-activiti-analytics/README.md && markdownlint ng2-activiti-form/README.md && markdownlint ng2-activiti-tasklist/README.md && markdownlint ng2-activiti-processlist/README.md && markdownlint ng2-alfresco-documentlist/README.md && markdownlint ng2-alfresco-login/README.md && markdownlint ng2-alfresco-search/README.md && markdownlint ng2-alfresco-tag/README.md && markdownlint ng2-alfresco-upload/README.md && markdownlint ng2-alfresco-viewer/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-userinfo/README.md && markdownlint ng2-alfresco-social/README.md && markdownlint README.md",
"doc": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
"docindex": "node config/buildFullDocIndex.js",
"tslint": "",
"prepublish": "",
"tsc": "",

32
ng2-components/package.json
View File

@@ -17,7 +17,6 @@
"toc": "markdown-toc -i ng2-alfresco-core/README.md && markdown-toc -i ng2-alfresco-datatable/README.md && markdown-toc -i ng2-activiti-diagrams/README.md && markdown-toc -i ng2-activiti-analytics/README.md && markdown-toc -i ng2-activiti-form/README.md && markdown-toc -i ng2-activiti-tasklist/README.md && markdown-toc -i ng2-activiti-processlist/README.md && markdown-toc -i ng2-alfresco-documentlist/README.md && markdown-toc -i ng2-alfresco-login/README.md && markdown-toc -i ng2-alfresco-search/README.md && markdown-toc -i ng2-alfresco-tag/README.md && markdown-toc -i ng2-alfresco-upload/README.md && markdown-toc -i ng2-alfresco-viewer/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-userinfo/README.md && markdown-toc -i ng2-alfresco-social/README.md && markdown-toc -i README.md",
"markdownlint": "markdownlint ng2-alfresco-core/README.md && markdownlint ng2-alfresco-datatable/README.md && markdownlint ng2-activiti-diagrams/README.md && markdownlint ng2-activiti-analytics/README.md && markdownlint ng2-activiti-form/README.md && markdownlint ng2-activiti-tasklist/README.md && markdownlint ng2-activiti-processlist/README.md && markdownlint ng2-alfresco-documentlist/README.md && markdownlint ng2-alfresco-login/README.md && markdownlint ng2-alfresco-search/README.md && markdownlint ng2-alfresco-tag/README.md && markdownlint ng2-alfresco-upload/README.md && markdownlint ng2-alfresco-viewer/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-userinfo/README.md && markdownlint ng2-alfresco-social/README.md && markdownlint README.md",
"doc": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
"docindex": "node config/buildFullDocIndex.js",
"tslint": "",
"prepublish": "",
"tsc": "",
@@ -76,25 +75,26 @@
"@angular/router": "4.3.6",
"@ngx-translate/core": "7.0.0",
"alfresco-js-api": "1.8.0",
"chart.js": "2.5.0",
"core-js": "2.4.1",
"hammerjs": "2.0.8",
"material-design-lite": "1.2.1",
"minimatch": "3.0.4",
"moment": "2.15.1",
"ng2-activiti-diagrams": "1.8.0",
"ng2-activiti-form": "1.8.0",
"ng2-activiti-tasklist": "1.8.0",
"ng2-alfresco-core": "1.8.0",
"ng2-alfresco-datatable": "1.8.0",
"ng2-alfresco-documentlist": "1.8.0",
"ng2-charts": "1.6.0",
"pdfjs-dist": "1.5.404",
"raphael": "2.2.7",
"reflect-metadata": "0.1.10",
"rxjs": "5.1.0",
"systemjs": "0.19.27",
"zone.js": "0.8.12"
"zone.js": "0.8.12",
"ng2-alfresco-core": "1.8.0",
"raphael": "2.2.7",
"chart.js": "2.5.0",
"ng2-activiti-diagrams": "1.8.0",
"ng2-charts": "1.6.0",
"@angular/flex-layout": "2.0.0-beta.9",
"ng2-activiti-form": "1.8.0",
"ng2-alfresco-datatable": "1.8.0",
"ng2-activiti-tasklist": "1.8.0",
"ng2-alfresco-documentlist": "1.8.0",
"minimatch": "3.0.4",
"pdfjs-dist": "1.5.404"
},
"devDependencies": {
"@types/hammerjs": "2.0.34",
@@ -129,8 +129,6 @@
"karma-systemjs": "0.16.0",
"karma-webpack": "2.0.3",
"loader-utils": "1.1.0",
"markdown-toc": "1.1.0",
"markdownlint-cli": "^0.3.1",
"merge-stream": "1.0.1",
"node-sass": "4.5.3",
"null-loader": "0.1.1",
@@ -154,7 +152,9 @@
"webpack": "2.2.1",
"webpack-dev-server": "2.3.0",
"webpack-merge": "2.6.1",
"wsrv": "0.1.7"
"wsrv": "0.1.7",
"markdown-toc": "1.1.0",
"markdownlint-cli": "^0.3.1"
},
"license": "Apache-2.0",
"module": "./index.js",