packages/ui/src/lib/modal/modal.component.ts
A modal is an extension of a pop. It adds different style options that apply x.ui markup.
https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b
| selector | ec-modal |
| templateUrl | ./modal.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostListeners |
constructor(popService: PopService, elementRef: ElementRef, cdr: ChangeDetectorRef)
|
||||||||||||
|
Constructs the modal, injects pop service
Parameters :
|
| backdrop | |
Default value : false
|
|
|
If true, the modal will have a dark backdrop that disables clicking outside. |
|
| body | |
Type : TemplateRef<any>
|
|
|
Body Template |
|
| columns | |
Type : number | string
|
|
|
Sets data-col. If specified, the width of the modal is fixed to the given value (1-12). |
|
| footer | |
Type : TemplateRef<any>
|
|
|
Footer Template |
|
| header | |
Type : TemplateRef<any>
|
|
|
Header Template |
|
| mode | |
Type : string
|
|
|
This property sets the mode + additional options. It expects the type at first and non mandatory options like opens-left afterwards. |
|
| 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 |
|
| toggle | |
Type : EventEmitter<boolean>
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:38
|
|
| document:click |
Arguments : '$event'
|
document:click($event)
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:43
|
|
Listens for document:click and hides |
| initMode |
initMode()
|
|
Is called on init and change. Parses mode input and throws warning if type is not supported.
Returns :
void
|
| ngOnChanges |
ngOnChanges()
|
|
calls initMode
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
calls initMode
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 classes |
Type : string
|
|
Will contain the classes (mode - type) |
| Public elementRef |
Type : ElementRef
|
| Public popService |
Type : PopService
|
| templates |
Type : TemplateRef<any>[]
|
Decorators :
@ContentChildren(TemplateRef)
|
|
Templates for header body and footer |
| types |
Type : []
|
Default value : ['', 'overlay', 'deck', 'toast']
|
|
all possible modes that can be set |
| 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 {
Component,
Input,
OnInit,
ElementRef,
OnChanges,
TemplateRef,
ContentChildren,
ChangeDetectorRef,
} from '@angular/core';
import { PopComponent } from '../pop/pop.component';
import { PopService } from '../pop/pop.service';
/**
* A modal is an extension of a pop. It adds different style options that apply x.ui markup.
* <example-url>https://components.entrecode.de/ui/modal?e=1</example-url>
*
* https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b
*/
@Component({
selector: 'ec-modal',
templateUrl: './modal.component.html',
})
export class ModalComponent extends PopComponent implements OnInit, OnChanges {
/** all possible modes that can be set */
types = ['', 'overlay', 'deck', 'toast'];
/** This property sets the mode + additional options.
* It expects the type at first and non mandatory options like opens-left afterwards. */
@Input() mode: string;
/** If true, the modal will have a dark backdrop that disables clicking outside. */
@Input() backdrop = false;
/** Header Template */
@Input() header: TemplateRef<any>;
/** Body Template */
@Input() body: TemplateRef<any>;
/** Footer Template */
@Input() footer: TemplateRef<any>;
/** Templates for header body and footer */
@ContentChildren(TemplateRef) templates: TemplateRef<any>[];
/** Sets data-col. If specified, the width of the modal is fixed to the given value (1-12). */
@Input() columns: number | string;
/** Will contain the classes (mode - type) */
public classes: string;
/** Constructs the modal, injects pop service */
constructor(public popService: PopService, public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
super(popService, elementRef, cdr);
}
/** Is called on init and change. Parses mode input and throws warning if type is not supported. */
initMode() {
this.elementRef.nativeElement.classList.add('modal-wrapper');
this.mode = this.mode || '';
this.type = this.mode.split(' ')[0];
if (!this.types.includes(this.type)) {
const fallback = this.mode.replace(this.type, '');
console.warn(`ec-modal does not support the mode "${this.type}".
Use one of ${this.types.join(', ')}.
Falling back to ${fallback}.`);
this.type = fallback;
}
this.classes = this.mode
.split(' ')
.splice(1)
.join(' ');
this.types.forEach((type) => {
this.elementRef.nativeElement.classList.remove(`${type}-wrapper`);
});
if (this.backdrop) {
this.elementRef.nativeElement.classList.add(`modal-wrapper_backdrop`);
}
}
/** calls initMode */
ngOnInit() {
this.initMode();
}
/** calls initMode */
ngOnChanges() {
this.initMode();
}
}
<div *ngIf="active" [attr.data-col]="columns" class="modal ec-modal">
<button (click)="hide()" type="button" class="modal__dismiss">
<ec-icon name="close"></ec-icon>
</button>
<div class="modal__header">
<ng-content select=".modal-header,header"></ng-content>
<ng-container [ngTemplateOutlet]="header"></ng-container>
</div>
<div class="modal__body">
<ng-content></ng-content>
<ng-container [ngTemplateOutlet]="body"></ng-container>
</div>
<div class="modal__footer">
<ng-content select=".modal-footer,footer"></ng-content>
<ng-container [ngTemplateOutlet]="footer"></ng-container>
</div>
</div>