carbon-components-angular/modal/modal.component.d.ts

Next generation components

/**
 *
 * carbon-angular v0.0.0 | modal.component.d.ts
 *
 * Copyright 2014, 2024 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { AfterViewInit, EventEmitter, ElementRef, SimpleChanges, OnChanges, Renderer2, OnDestroy } from "@angular/core";
import { BaseModalService } from "./base-modal.service";
import * as i0 from "@angular/core";
/**
 * Component to create modals for presenting content.
 *
 * [See demo](../../?path=/story/components-modal--basic)
 *
 * Using a modal in your application requires `cds-placeholder` which would generally be
 * placed near the end of your app component template (app.component.ts or app.component.html) as:
 *
```html
<cds-placeholder></cds-placeholder>
```
 *
 * A more complete example for `Modal` is given as follows:
 *
 * Example modal definition:
 *
```typescript
@Component({
    selector: "app-sample-modal",
    template: `
                <cds-modal size="xl" (overlaySelected)="closeModal()">
                    <cds-modal-header (closeSelect)="closeModal()">Header text</cds-modal-header>
                        <section class="modal-body">
                            <h1>Sample modal works.</h1>
                            <button class="btn--icon-link" nPopover="Hello there" title="Popover title" placement="right" appendInline="true">
                                <svg cdsIcon="info" size="sm"></svg>
                            </button>
                            {{modalText}}
                        </section>
                    <cds-modal-footer><button cdsButton="primary" (click)="closeModal()">Close</button></cds-modal-footer>
                </cds-modal>`,
    styleUrls: ["./sample-modal.component.scss"]
})
export class SampleModal extends BaseModal {
    modalText: string;
    constructor(protected injector: Injector) {
        super();
        this.modalText = this.injector.get("modalText");
    }
}
```
 *
 * Example of opening the modal:
 *
```typescript
@Component({
    selector: "app-modal-demo",
    template: `
                <button cdsButton="primary" (click)="openModal('drill')">Drill-down modal</button>
                <cds-placeholder></cds-placeholder>`
})
export class ModalDemo {
    openModal() {
        this.modalService.create({component: SampleModal, inputs: {modalText: "Hello universe."}});
    }
}
```
 */
export declare class Modal implements AfterViewInit, OnChanges, OnDestroy {
    modalService: BaseModalService;
    private document;
    private renderer;
    /**
     * Size of the modal to display.
     */
    size: "xs" | "sm" | "md" | "lg";
    /**
     * Classification of the modal.
     */
    theme: "default" | "danger";
    /**
     * Label for the modal.
     */
    ariaLabel: string;
    /**
     * Controls the visibility of the modal when used directly in a template
     */
    open: boolean;
    /**
     * The element that triggers the modal, which should receive focus when the modal closes
     */
    trigger: HTMLElement;
    /**
     * Specify whether the modal contains scrolling content. This property overrides the automatic
     * detection of the existence of scrolling content. Set this property to `true` to force
     * overflow indicator to show up or to `false` to force overflow indicator to disappear.
     * It is set to `null` by default which indicates not to override automatic detection.
     */
    hasScrollingContent: boolean;
    /**
     * Emits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.
     */
    overlaySelected: EventEmitter<any>;
    /**
     * To emit the closing event of the modal window.
     */
    close: EventEmitter<any>;
    /**
     * Maintains a reference to the view DOM element of the `Modal`.
     */
    modal: ElementRef;
    /**
     * An element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.
     */
    selectorPrimaryFocus: string;
    /**
     * Creates an instance of `Modal`.
     */
    constructor(modalService: BaseModalService, document: Document, renderer: Renderer2);
    ngOnChanges({ open }: SimpleChanges): void;
    /**
     * Set document focus to be on the modal component after it is initialized.
     */
    ngAfterViewInit(): void;
    /**
     * Handle keyboard events to close modal and tab through the content within the modal.
     */
    handleKeyboardEvent(event: KeyboardEvent): void;
    /**
     * This detects whether or not the modal contains scrolling content.
     *
     * To force trigger a detection (ie. on window resize), change or reset the value of the modal content.
     *
     * Use the `hasScrollingContent` input to manually override the overflow indicator.
     */
    get shouldShowScrollbar(): boolean;
    ngOnDestroy(): void;
    protected focusInitialElement(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<Modal, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<Modal, "cds-modal, ibm-modal", never, { "size": "size"; "theme": "theme"; "ariaLabel": "ariaLabel"; "open": "open"; "trigger": "trigger"; "hasScrollingContent": "hasScrollingContent"; }, { "overlaySelected": "overlaySelected"; "close": "close"; }, never, ["*"], false>;
}