@c8y/ngx-components/core/modal/modal.component.d.ts

Angular modules for Cumulocity IoT applications

import { EventEmitter } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { ModalLabels } from '../select-modal/select-modal.model';
import * as i0 from "@angular/core";
/**
 * C8Y component for creating modals.
 *
 * Creating custom modal:
 * ```typescript
 *  import { Component } from "@angular/core";
 *  import { Subject } from 'rxjs';
 *
 * @Component({
 *  selector: "my-modal",
 *  template: `
 *    <c8y-modal title="CustomTitle"
 *      (onClose)="onClose($event)"
 *      (onDismiss)="onDismiss($event)"
 *      [labels]="labels"
 *      [disabled]="true" <- will disable ok button
 *      >
 *        <span>I am body of modal</span>
 *        <span>For simple string use body="string"</span>
 *    </c8y-modal>`
 * })
 *
 * export class MyModalComponent {
 *
 *  closeSubject: Subject<boolean> = new Subject();
 *  labels : ModalLabels = {ok: "customOK", cancel: "customCancel"};
 *
 *  onDismiss(event){
 *    this.closeSubject.next(false);
 *  }
 *
 *  onClose(event) {
 *    this.closeSubject.next(true);
 *  }
 * }
 * ```
 *
 * Showing modal:
 * ```typescript
 * import { BsModalService } from "ngx-bootstrap/modal";
 *
 * constructor(
 *  public bsModalService: BsModalService,
 * ) {}
 *
 * showModal() {
 *  const modalRef = this.bsModalService.show(MyModalComponent);
 *  modalRef.content.closeSubject.subscribe(result => {
 *    console.log('results:', result);
 *  });
 * }
 * ```
 */
export declare class ModalComponent {
    private modal;
    /**
     * Emits 'true' when 'cancel' button is clicked.
     */
    onDismiss: EventEmitter<boolean>;
    /**
     * Emits 'true' when 'ok' button is clicked.
     */
    onClose: EventEmitter<boolean>;
    /**
     * Indicates if the 'ok' (confirmation) button is disabled.
     */
    disabled: boolean;
    /**
     * Callback function which is called right after 'ok' button is clicked, before 'onClose' emits.
     */
    close: () => void;
    /**
     * Callback function which is called right after 'cancel' button is clicked, before 'onDismiss' emits.
     */
    dismiss: () => void;
    /**
     * Title of modal.
     */
    title: string;
    /**
     * Modal body.
     */
    body: string;
    /**
     * Indicates if modal should use custom footer provided with content projection (or no footer at all).
     * If false, default footer with 'cancel' and 'ok' buttons will be displayed.
     */
    customFooter: boolean;
    /**
     * CSS classes for modal header.
     */
    headerClasses: string;
    /**
     * Custom labels for 'cancel' and 'ok' buttons.
     */
    set labels({ ok, cancel }: ModalLabels);
    get labels(): ModalLabels;
    private _labels;
    constructor(modal: BsModalRef);
    /**
     * Hides modal or calls 'dismiss' input callback, then emits 'onDismiss' output.
     * Method is called when 'cancel' button is clicked, but can be also triggered by accessing 'ModalComponent' instance.
     */
    _dismiss(): void;
    /**
     * Hides modal or calls 'close' input callback, then emits 'onClose' output.
     * Method is called when 'ok' button is clicked, but can be also triggered by accessing 'ModalComponent' instance.
     */
    _close(): void;
    /**
     * 'Enter' keyboard button handler. Calls '_dismiss' or '_close' method when only one corresponding button exists.
     * @param _event Enter keydown event
     */
    onEnterKeyDown(_event: KeyboardEvent): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, [{ optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "c8y-modal", never, { "disabled": { "alias": "disabled"; "required": false; }; "close": { "alias": "close"; "required": false; }; "dismiss": { "alias": "dismiss"; "required": false; }; "title": { "alias": "title"; "required": false; }; "body": { "alias": "body"; "required": false; }; "customFooter": { "alias": "customFooter"; "required": false; }; "headerClasses": { "alias": "headerClasses"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; }, { "onDismiss": "onDismiss"; "onClose": "onClose"; }, never, ["[c8y-modal-title]", "*", "[c8y-modal-footer-custom]", "[c8y-modal-footer]"], true, never>;
}
//# sourceMappingURL=modal.component.d.ts.map