packages/data/src/lib/resource-list-pop/resource-list-pop.component.ts
| selector | ec-resource-list-pop |
| templateUrl | ./resource-list-pop.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
constructor(resourceConfig: ResourceConfig, popService: PopService, elementRef: ElementRef, cdr: ChangeDetectorRef)
|
|||||||||||||||
|
Parameters :
|
| api | |
Type : Core
|
|
| config | |
Type : ListConfig<Resource>
|
|
| relation | |
Type : string
|
|
| selection | |
Type : Selection<Resource>
|
|
| active | |
Type : boolean
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:28
|
|
|
If true, .ec-pop is part of the DOM (*ngIf) + .active is set on .ec-pop-container. |
|
| hideOnClickOutside | |
Default value : false
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:34
|
|
|
If set to true, the pop will hide when a click happens outside the pop. |
|
| hideOnEscape | |
Default value : true
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:36
|
|
|
If set to false, esc will not close the pop |
|
| type | |
Type : string
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:32
|
|
|
The used type on the host element |
|
| columnClicked | |
Type : EventEmitter<Item<Resource>>
|
|
| pasted | |
Type : EventEmitter<Item<Resource>>
|
|
| toggle | |
Type : EventEmitter<boolean>
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:38
|
|
| class |
Default value : 'ec-resource-list-pop modal-wrapper'
|
|
Set host class to make sure the type is used |
| document:click |
Arguments : '$event'
|
document:click($event)
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:43
|
|
Listens for document:click and hides |
| ngOnChanges |
ngOnChanges()
|
|
Returns :
void
|
| select | ||||
select(item)
|
||||
|
emits columnClicked event or toggles selection if no observers.
Parameters :
Returns :
void
|
| Public hide |
hide()
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:88
|
|
Hides the pop. Sets active false and removes pop from popService.stack
Returns :
void
|
| isOutside | ||||
isOutside(element)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:58
|
||||
|
yields true if the given element is outside the pop / or is the wrapper element itself (the backdrop)
Parameters :
Returns :
boolean
|
| Public show | ||||
show(e?)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:72
|
||||
|
Shows the pop. Sets active true and adds pop to popService.stack
Parameters :
Returns :
void
|
| Public toggle | ||||
toggle(e?)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:63
|
||||
|
Shows if not active, hides if active.
Parameters :
Returns :
void
|
| Public cdr |
Type : ChangeDetectorRef
|
| Public elementRef |
Type : ElementRef
|
| lightModel |
Type : any
|
| Public popService |
Type : PopService
|
| Public resourceConfig |
Type : ResourceConfig
|
| searchbar |
Type : SearchbarComponent
|
Decorators :
@ViewChild(SearchbarComponent)
|
| activated |
Default value : false
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:30
|
|
Flip and stays true after first show |
| clickEvent |
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:40
|
| Public elementRef |
Type : ElementRef
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:55
|
import {
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
HostBinding,
Input,
OnChanges,
Output,
ViewChild,
} from '@angular/core';
import { Item, ListConfig, Selection } from '@ec.components/core';
import { PopComponent, PopService, SearchbarComponent } from '@ec.components/ui';
import Core from 'ec.sdk/lib/Core';
import Resource from 'ec.sdk/lib/resources/Resource';
import { ResourceConfig } from '../resource-config/resource-config.service';
@Component({
selector: 'ec-resource-list-pop',
templateUrl: './resource-list-pop.component.html',
})
export class ResourceListPopComponent extends PopComponent implements OnChanges {
@Input() relation: string;
@Input() api: Core;
@Input() config: ListConfig<Resource>;
@Input() selection: Selection<Resource>;
@Output() columnClicked: EventEmitter<Item<Resource>> = new EventEmitter();
@Output() pasted: EventEmitter<Item<Resource>> = new EventEmitter();
@ViewChild(SearchbarComponent) searchbar: SearchbarComponent;
/** Set host class to make sure the type is used */
@HostBinding('class') class = 'ec-resource-list-pop modal-wrapper';
lightModel: any;
constructor(
public resourceConfig: ResourceConfig,
public popService: PopService,
public elementRef: ElementRef,
public cdr: ChangeDetectorRef,
) {
super(popService, elementRef, cdr);
}
ngOnChanges() {
if (this.relation) {
this.config = Object.assign({}, this.config || {}, this.resourceConfig.get(this.relation));
}
if (this.config) {
this.config = Object.assign({ hidePagination: true, disableHeader: true }, this.config);
}
}
/** emits columnClicked event or toggles selection if no observers. */
select(item) {
if (this.columnClicked.observers.length) {
this.columnClicked.emit(item);
} else if (this.selection) {
this.selection.toggle(item);
}
// this.searchbar.focusEvent.emit(true);
}
}
<div class="modal" *ngIf="active" [attr.data-col]="config?.popColumns || '8@md'">
<button (click)="hide()" type="button" class="modal__dismiss">
<ec-icon name="close"></ec-icon>
</button>
<ec-list-header class="modal__header" [list]="resourceList?.list" [selection]="selection"></ec-list-header>
<div class="modal__body">
<ec-loader class="ec-loader loader is-local" #resourceListLoader></ec-loader>
<ec-resource-list
[api]="api"
[relation]="relation"
[config]="config"
[selection]="selection"
(columnClicked)="select($event)"
[loader]="resourceListLoader"
#resourceList
></ec-resource-list>
<!-- (changed)="searchbar.updatedList($event)" -->
</div>
<ec-pagination [pagination]="resourceList?.list?.pagination"></ec-pagination>
</div>