0.0.2 • Published 4 years ago
@broadstone/modal v0.0.2
Modal
Angular version 8.2.14.
How to use
npm i @broadstone/modal
ADD to app.module.ts
import { ModalModule} from '@broadstone/modal';
@NgModule({
declarations: [
...
],
imports: [
...
ModalModule,
],
providers: [],
bootstrap: [ModalModule]
})
ADD in .html EXAMPLE HERE
<lib-modal title='Assign Workers' sub_header='0/3 Shifts Assigned'
body='Here you can assign workers to the shift. Workers will receive a message in the app asking them to accept or decline.'
[close_icon]='true' [show_modal]="true" (closeModal)='close_modal($event)' btn_label_primary='Save'
btn_label_secondary='Cancel'></lib-modal>
Inside Component
@Input() generic_error: string;
@Input() show_modal;
@Input() title: string;
@Input() body: string;
@Input() sub_header: string;
@Input() close_icon: boolean;
@Input() footer: boolean;
@Input() width: string = '680';
//Buttons
loading = { loading_link: false, loading_primary: false, loading_secondary: false };
@Input() btn_label_primary: string;
@Input() btn_label_secondary: string;
@Input() btn_label_link: string;
@Output() clickSecondary: EventEmitter<any> = new EventEmitter();
@Output() clickPrimary: EventEmitter<any> = new EventEmitter();
@Output() closeModal: EventEmitter<any> = new EventEmitter();
@Output() clickLink: EventEmitter<any> = new EventEmitter();
Based on cornerstone input theme.
https://www.figma.com/file/hgsGs3Pj4jwZ1xNtGH0RL4/Broadstone-Component-Library?node-id=617%3A387
Depending on
@broadstone/clib-button ng-zorro-antd