@ng-bootstrap/ng-bootstrap
Version:
Angular powered Bootstrap
1,445 lines (1,423 loc) • 186 kB
TypeScript
import * as i0 from '@angular/core';
import { OnInit, EventEmitter, AfterContentChecked, OnDestroy, ElementRef, AfterContentInit, TemplateRef, AfterViewInit, QueryList, OnChanges, Injector, SimpleChanges, ViewRef, ComponentRef, DestroyRef, ChangeDetectorRef } from '@angular/core';
import { Observable, Subject, OperatorFunction } from 'rxjs';
import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
import * as _popperjs_core from '@popperjs/core';
import { Options } from '@popperjs/core';
import * as _ng_bootstrap_ng_bootstrap from '@ng-bootstrap/ng-bootstrap';
/**
* A directive to provide a simple way of hiding and showing elements on the
* page.
*/
declare class NgbCollapse implements OnInit {
private _config;
private _element;
private _zone;
/**
* If `true`, collapse will be animated.
*
* Animation is triggered only when clicked on triggering element
* or via the `.toggle()` function
*
* @since 8.0.0
*/
animation: boolean;
/**
* Flag used to track if the collapse setter is invoked during initialization
* or not. This distinction is made in order to avoid running the transition during initialization.
*/
private _afterInit;
private _isCollapsed;
/**
* If `true`, will collapse the element or show it otherwise.
*/
set collapsed(isCollapsed: boolean);
ngbCollapseChange: EventEmitter<boolean>;
/**
* If `true`, will collapse horizontally.
*
* @since 13.1.0
*/
horizontal: boolean;
/**
* An event emitted when the collapse element is shown, after the transition.
* It has no payload.
*
* @since 8.0.0
*/
shown: EventEmitter<void>;
/**
* An event emitted when the collapse element is hidden, after the transition.
* It has no payload.
*
* @since 8.0.0
*/
hidden: EventEmitter<void>;
ngOnInit(): void;
/**
* Triggers collapsing programmatically.
*
* If there is a collapsing transition running already, it will be reversed.
* If the animations are turned off this happens synchronously.
*
* @since 8.0.0
*/
toggle(open?: boolean): void;
private _runTransition;
private _runTransitionWithEvents;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCollapse, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbCollapse, "[ngbCollapse]", ["ngbCollapse"], { "animation": { "alias": "animation"; "required": false; }; "collapsed": { "alias": "ngbCollapse"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; }, { "ngbCollapseChange": "ngbCollapseChange"; "shown": "shown"; "hidden": "hidden"; }, never, never, true, never>;
}
/**
* A directive that wraps the content of an accordion item's collapsible body.
*
* The actual content is provided in a child `ng-template` element.
* Depending on the state of the accordion, the template will be either inserted or removed from the DOM.
*
* @since 14.1.0
*/
declare class NgbAccordionBody implements AfterContentChecked, OnDestroy {
private _item;
private _viewRef;
/**
* the `ElementRef` of the component
*
* @since 18.0.0
*/
readonly elementRef: ElementRef<any>;
private _vcr;
private _bodyTpl;
ngAfterContentChecked(): void;
ngOnDestroy(): void;
private _destroyViewIfExists;
private _createViewIfNotExists;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionBody, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgbAccordionBody, "[ngbAccordionBody]", never, {}, {}, ["_bodyTpl"], ["*"], true, never>;
}
/**
* A directive that wraps the collapsible item's content of the accordion.
*
* Internally it reuses the [`NgbCollapse` directive](#/components/collapse)
*
* @since 14.1.0
*/
declare class NgbAccordionCollapse {
item: NgbAccordionItem;
ngbCollapse: NgbCollapse;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionCollapse, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbAccordionCollapse, "[ngbAccordionCollapse]", ["ngbAccordionCollapse"], {}, {}, never, never, true, [{ directive: typeof NgbCollapse; inputs: {}; outputs: {}; }]>;
}
/**
* A directive to put on a toggling element inside the accordion item's header.
* It will register click handlers that toggle the associated panel and will handle accessibility attributes.
*
* This directive is used internally by the [`NgbAccordionButton` directive](#/components/accordion/api#NgbAccordionButton).
*
* @since 14.1.0
*/
declare class NgbAccordionToggle {
item: NgbAccordionItem;
accordion: NgbAccordionDirective;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionToggle, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbAccordionToggle, "[ngbAccordionToggle]", never, {}, {}, never, never, true, never>;
}
/**
* A directive to put on a button element inside an accordion item's header.
*
* If you want a custom markup for the header, you can also use the [`NgbAccordionToggle` directive](#/components/accordion/api#NgbAccordionToggle).
*
* @since 14.1.0
*/
declare class NgbAccordionButton {
item: NgbAccordionItem;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionButton, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbAccordionButton, "button[ngbAccordionButton]", never, {}, {}, never, never, true, [{ directive: typeof NgbAccordionToggle; inputs: {}; outputs: {}; }]>;
}
/**
* A directive that wraps an accordion item's header.
*
* @since 14.1.0
*/
declare class NgbAccordionHeader {
item: NgbAccordionItem;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionHeader, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbAccordionHeader, "[ngbAccordionHeader]", never, {}, {}, never, never, true, never>;
}
/**
* A directive that wraps an accordion item: a toggleable header + body that collapses.
*
* You can get hold of the `NgbAccordionItem` instance in the template with `#item="ngbAccordionItem"`.
* It allows to check if the item is collapsed or not, toggle the collapse state, etc.
*
* Every accordion item has a string ID that is automatically generated in the `ngb-accordion-item-XX` format, unless provided explicitly.
*
* @since 14.1.0
*/
declare class NgbAccordionItem implements AfterContentInit {
private _accordion;
private _cd;
private _destroyRef;
private _collapsed;
private _id;
private _destroyOnHide;
private _collapseAnimationRunning;
private _collapse;
/**
* Sets the custom ID of the accordion item. It must be unique for the document.
*
* @param id The ID of the accordion item, must be a non-empty string
*/
set id(id: string);
/**
* If `true`, the content of the accordion item's body will be removed from the DOM. It will be just hidden otherwise.
*
* This property can also be set up on the parent [`NgbAccordion` directive](#/components/accordion/api#NgbAccordionDirective).
*/
set destroyOnHide(destroyOnHide: boolean);
get destroyOnHide(): boolean;
/**
* If `true`, the accordion item will be disabled.
* It won't react to user's clicks, but still will be toggelable programmatically.
*/
disabled: boolean;
/**
* If `true`, the accordion item will be collapsed. Otherwise, it will be expanded.
*
* @param collapsed New state of the accordion item.
*/
set collapsed(collapsed: boolean);
/**
* Event emitted before the expanding animation starts. It has no payload.
*
* @since 15.1.0
*/
show: EventEmitter<void>;
/**
* Event emitted when the expanding animation is finished. It has no payload.
*/
shown: EventEmitter<void>;
/**
* Event emitted before the collapsing animation starts. It has no payload.
*
* @since 15.1.0
*/
hide: EventEmitter<void>;
/**
* Event emitted when the collapsing animation is finished and before the content is removed from DOM.
* It has no payload.
*/
hidden: EventEmitter<void>;
get collapsed(): boolean;
get id(): string;
get toggleId(): string;
get collapseId(): string;
get _shouldBeInDOM(): boolean;
ngAfterContentInit(): void;
/**
* Toggles an accordion item.
*/
toggle(): void;
/**
* Expands an accordion item.
*/
expand(): void;
/**
* Collapses an accordion item.
*/
collapse(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionItem, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbAccordionItem, "[ngbAccordionItem]", ["ngbAccordionItem"], { "id": { "alias": "ngbAccordionItem"; "required": false; }; "destroyOnHide": { "alias": "destroyOnHide"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "show": "show"; "shown": "shown"; "hide": "hide"; "hidden": "hidden"; }, ["_collapse"], never, true, never>;
}
/**
* Accordion is a stack of cards that have a header and collapsible body.
*
* This directive is a container for these items and provides an API to handle them.
*
* @since 14.1.0
*/
declare class NgbAccordionDirective {
private _config;
private _anItemWasAlreadyExpandedDuringInitialisation;
private _items?;
/**
* If `true`, accordion will be animated.
*/
animation: boolean;
/**
* If `true`, only one item at the time can stay open.
*/
closeOthers: boolean;
/**
* If `true`, the content of the accordion items body will be removed from the DOM. It will be just hidden otherwise.
*
* This property can be overwritten at the [`NgbAccordionItem`](#/components/accordion/api#NgbAccordionItem) level
*/
destroyOnHide: boolean;
/**
* Event emitted before expanding animation starts. The payload is the id of shown accordion item.
*
* @since 15.1.0
*/
show: EventEmitter<string>;
/**
* Event emitted when the expanding animation is finished. The payload is the id of shown accordion item.
*/
shown: EventEmitter<string>;
/**
* Event emitted before the collapsing animation starts. The payload is the id of hidden accordion item.
*
* @since 15.1.0
*/
hide: EventEmitter<string>;
/**
* Event emitted when the collapsing animation is finished and before the content is removed from DOM.
* The payload is the id of hidden accordion item.
*/
hidden: EventEmitter<string>;
/**
* Toggles an item with the given id.
*
* It will toggle an item, even if it is disabled.
*
* @param itemId The id of the item to toggle.
*/
toggle(itemId: string): void;
/**
* Expands an item with the given id.
*
* If `closeOthers` is `true`, it will collapse other panels.
*
* @param itemId The id of the item to expand.
*/
expand(itemId: string): void;
/**
* Expands all items.
*
* If `closeOthers` is `true` and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
*/
expandAll(): void;
/**
* Collapses an item with the given id.
*
* Has no effect if the `itemId` does not correspond to any item.
*
* @param itemId The id of the item to collapse.
*/
collapse(itemId: string): void;
/**
* Collapses all items.
*/
collapseAll(): void;
/**
* Checks if an item with the given id is expanded.
*
* If the `itemId` does not correspond to any item, it returns `false`.
*
* @param itemId The id of the item to check.
*/
isExpanded(itemId: string): boolean;
/**
* It checks, if the item can be expanded in the current state of the accordion.
* With `closeOthers` there can be only one expanded item at a time.
*
* @internal
*/
_ensureCanExpand(toExpand: NgbAccordionItem): boolean;
private _getItem;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbAccordionDirective, "[ngbAccordion]", ["ngbAccordion"], { "animation": { "alias": "animation"; "required": false; }; "closeOthers": { "alias": "closeOthers"; "required": false; }; "destroyOnHide": { "alias": "destroyOnHide"; "required": false; }; }, { "show": "show"; "shown": "shown"; "hide": "hide"; "hidden": "hidden"; }, ["_items"], never, true, never>;
}
/**
* A configuration service for the [`NgbAccordionDirective`](#/components/accordion/api#NgbAccordionDirective).
*
* You can inject this service, typically in your root component, and customize its properties
* to provide default values for all accordions used in the application.
*/
declare class NgbAccordionConfig {
private _ngbConfig;
private _animation;
closeOthers: boolean;
destroyOnHide: boolean;
get animation(): boolean;
set animation(animation: boolean);
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionConfig, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgbAccordionConfig>;
}
declare class NgbAccordionModule {
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAccordionModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NgbAccordionModule, never, [typeof NgbAccordionButton, typeof NgbAccordionDirective, typeof NgbAccordionItem, typeof NgbAccordionHeader, typeof NgbAccordionToggle, typeof NgbAccordionBody, typeof NgbAccordionCollapse], [typeof NgbAccordionButton, typeof NgbAccordionDirective, typeof NgbAccordionItem, typeof NgbAccordionHeader, typeof NgbAccordionToggle, typeof NgbAccordionBody, typeof NgbAccordionCollapse]>;
static ɵinj: i0.ɵɵInjectorDeclaration<NgbAccordionModule>;
}
/**
* Alert is a component to provide contextual feedback messages for user.
*
* It supports several alert types and can be dismissed.
*/
declare class NgbAlert {
private _config;
private _elementRef;
private _zone;
/**
* If `true`, alert closing will be animated.
*
* Animation is triggered only when clicked on the close button (×)
* or via the `.close()` function
*
* @since 8.0.0
*/
animation: boolean;
/**
* If `true`, alert can be dismissed by the user.
*
* The close button (×) will be displayed and you can be notified
* of the event with the `(closed)` output.
*/
dismissible: boolean;
/**
* Type of the alert.
*
* Bootstrap provides styles for the following types: `'success'`, `'info'`, `'warning'`, `'danger'`, `'primary'`,
* `'secondary'`, `'light'` and `'dark'`.
*/
type: string;
/**
* An event emitted when the close button is clicked. It has no payload and only relevant for dismissible alerts.
*
* @since 8.0.0
*/
closed: EventEmitter<void>;
/**
* Triggers alert closing programmatically (same as clicking on the close button (×)).
*
* The returned observable will emit and be completed once the closing transition has finished.
* If the animations are turned off this happens synchronously.
*
* Alternatively you could listen or subscribe to the `(closed)` output
*
* @since 8.0.0
*/
close(): Observable<void>;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAlert, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgbAlert, "ngb-alert", ["ngbAlert"], { "animation": { "alias": "animation"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
}
/**
* A configuration service for the [NgbAlert](#/components/alert/api#NgbAlert) component.
*
* You can inject this service, typically in your root component, and customize its properties
* to provide default values for all alerts used in the application.
*/
declare class NgbAlertConfig {
private _ngbConfig;
private _animation;
dismissible: boolean;
type: string;
get animation(): boolean;
set animation(animation: boolean);
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAlertConfig, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgbAlertConfig>;
}
declare class NgbAlertModule {
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAlertModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NgbAlertModule, never, [typeof NgbAlert], [typeof NgbAlert]>;
static ɵinj: i0.ɵɵInjectorDeclaration<NgbAlertModule>;
}
/**
* Defines the carousel slide transition direction.
*/
declare enum NgbSlideEventDirection {
START = "start",
END = "end"
}
/**
* A directive that wraps the individual carousel slide.
*/
declare class NgbSlide {
templateRef: TemplateRef<any>;
/**
* Slide id that must be unique for the entire document.
*
* If not provided, will be generated in the `ngb-slide-xx` format.
*/
id: string;
/**
* An event emitted when the slide transition is finished
*
* @since 8.0.0
*/
slid: EventEmitter<NgbSingleSlideEvent>;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbSlide, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSlide, "ng-template[ngbSlide]", never, { "id": { "alias": "id"; "required": false; }; }, { "slid": "slid"; }, never, never, true, never>;
}
/**
* Carousel is a component to easily create and control slideshows.
*
* Allows to set intervals, change the way user interacts with the slides and provides a programmatic API.
*/
declare class NgbCarousel implements AfterContentChecked, AfterContentInit, AfterViewInit {
slides: QueryList<NgbSlide>;
NgbSlideEventSource: typeof NgbSlideEventSource;
private _config;
private _platformId;
private _ngZone;
private _cd;
private _container;
private _destroyRef;
private _injector;
private _interval$;
private _mouseHover$;
private _focused$;
private _pauseOnHover$;
private _pauseOnFocus$;
private _pause$;
private _wrap$;
id: string;
/**
* A flag to enable/disable the animations.
*
* @since 8.0.0
*/
animation: boolean;
/**
* The slide id that should be displayed **initially**.
*
* For subsequent interactions use methods `select()`, `next()`, etc. and the `(slide)` output.
*/
activeId: string;
/**
* Time in milliseconds before the next slide is shown.
*/
set interval(value: number);
get interval(): number;
/**
* If `true`, will 'wrap' the carousel by switching from the last slide back to the first.
*/
set wrap(value: boolean);
get wrap(): boolean;
/**
* If `true`, allows to interact with carousel using keyboard 'arrow left' and 'arrow right'.
*/
keyboard: boolean;
/**
* If `true`, will pause slide switching when mouse cursor hovers the slide.
*
* @since 2.2.0
*/
set pauseOnHover(value: boolean);
get pauseOnHover(): boolean;
/**
* If `true`, will pause slide switching when the focus is inside the carousel.
*/
set pauseOnFocus(value: boolean);
get pauseOnFocus(): boolean;
/**
* If `true`, 'previous' and 'next' navigation arrows will be visible on the slide.
*
* @since 2.2.0
*/
showNavigationArrows: boolean;
/**
* If `true`, navigation indicators at the bottom of the slide will be visible.
*
* @since 2.2.0
*/
showNavigationIndicators: boolean;
/**
* An event emitted just before the slide transition starts.
*
* See [`NgbSlideEvent`](#/components/carousel/api#NgbSlideEvent) for payload details.
*/
slide: EventEmitter<NgbSlideEvent>;
/**
* An event emitted right after the slide transition is completed.
*
* See [`NgbSlideEvent`](#/components/carousel/api#NgbSlideEvent) for payload details.
*
* @since 8.0.0
*/
slid: EventEmitter<NgbSlideEvent>;
private _transitionIds;
set mouseHover(value: boolean);
get mouseHover(): boolean;
set focused(value: boolean);
get focused(): boolean;
arrowLeft(): void;
arrowRight(): void;
ngAfterContentInit(): void;
ngAfterContentChecked(): void;
ngAfterViewInit(): void;
/**
* Navigates to a slide with the specified identifier.
*/
select(slideId: string, source?: NgbSlideEventSource): void;
/**
* Navigates to the previous slide.
*/
prev(source?: NgbSlideEventSource): void;
/**
* Navigates to the next slide.
*/
next(source?: NgbSlideEventSource): void;
/**
* Pauses cycling through the slides.
*/
pause(): void;
/**
* Restarts cycling through the slides from start to end.
*/
cycle(): void;
/**
* Set the focus on the carousel.
*/
focus(): void;
private _cycleToSelected;
private _getSlideEventDirection;
private _getSlideById;
private _getSlideIdxById;
private _getNextSlide;
private _getPrevSlide;
private _getSlideElement;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCarousel, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgbCarousel, "ngb-carousel", ["ngbCarousel"], { "animation": { "alias": "animation"; "required": false; }; "activeId": { "alias": "activeId"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "keyboard": { "alias": "keyboard"; "required": false; }; "pauseOnHover": { "alias": "pauseOnHover"; "required": false; }; "pauseOnFocus": { "alias": "pauseOnFocus"; "required": false; }; "showNavigationArrows": { "alias": "showNavigationArrows"; "required": false; }; "showNavigationIndicators": { "alias": "showNavigationIndicators"; "required": false; }; }, { "slide": "slide"; "slid": "slid"; }, ["slides"], never, true, never>;
}
/**
* A slide change event emitted right after the slide transition is completed.
*/
interface NgbSlideEvent {
/**
* The previous slide id.
*/
prev: string;
/**
* The current slide id.
*/
current: string;
/**
* The slide event direction.
*
* <span class="badge bg-info text-dark">since 12.0.0</span> Possible values are `'start' | 'end'`.
*
* <span class="badge bg-secondary">before 12.0.0</span> Possible values were `'left' | 'right'`.
*/
direction: NgbSlideEventDirection;
/**
* Whether the pause() method was called (and no cycle() call was done afterwards).
*
* @since 5.1.0
*/
paused: boolean;
/**
* Source triggering the slide change event.
*
* Possible values are `'timer' | 'arrowLeft' | 'arrowRight' | 'indicator'`
*
* @since 5.1.0
*/
source?: NgbSlideEventSource;
}
/**
* A slide change event emitted right after the slide transition is completed.
*
* @since 8.0.0
*/
interface NgbSingleSlideEvent {
/**
* true if the slide is shown, false otherwise
*/
isShown: boolean;
/**
* The slide event direction.
*
* <span class="badge bg-info text-dark">since 12.0.0</span> Possible values are `'start' | 'end'`.
*
* <span class="badge bg-secondary">before 12.0.0</span> Possible values were `'left' | 'right'`.
*/
direction: NgbSlideEventDirection;
/**
* Source triggering the slide change event.
*
* Possible values are `'timer' | 'arrowLeft' | 'arrowRight' | 'indicator'`
*
*/
source?: NgbSlideEventSource;
}
declare enum NgbSlideEventSource {
TIMER = "timer",
ARROW_LEFT = "arrowLeft",
ARROW_RIGHT = "arrowRight",
INDICATOR = "indicator"
}
/**
* A configuration service for the [NgbCarousel](#/components/carousel/api#NgbCarousel) component.
*
* You can inject this service, typically in your root component, and customize its properties
* to provide default values for all carousels used in the application.
*/
declare class NgbCarouselConfig {
private _ngbConfig;
private _animation;
interval: number;
wrap: boolean;
keyboard: boolean;
pauseOnHover: boolean;
pauseOnFocus: boolean;
showNavigationArrows: boolean;
showNavigationIndicators: boolean;
get animation(): boolean;
set animation(animation: boolean);
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCarouselConfig, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgbCarouselConfig>;
}
declare class NgbCarouselModule {
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCarouselModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NgbCarouselModule, never, [typeof NgbCarousel, typeof NgbSlide], [typeof NgbCarousel, typeof NgbSlide]>;
static ɵinj: i0.ɵɵInjectorDeclaration<NgbCarouselModule>;
}
/**
* A configuration service for the [NgbCollapse](#/components/collapse/api#NgbCollapse) component.
*
* You can inject this service, typically in your root component, and customize its properties
* to provide default values for all collapses used in the application.
*/
declare class NgbCollapseConfig {
private _ngbConfig;
private _animation;
horizontal: boolean;
get animation(): boolean;
set animation(animation: boolean);
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCollapseConfig, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgbCollapseConfig>;
}
declare class NgbCollapseModule {
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCollapseModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NgbCollapseModule, never, [typeof NgbCollapse], [typeof NgbCollapse]>;
static ɵinj: i0.ɵɵInjectorDeclaration<NgbCollapseModule>;
}
/**
* An interface of the date model used by the datepicker.
*
* All datepicker APIs consume `NgbDateStruct`, but return `NgbDate`.
*
* See the [date format overview](#/components/datepicker/overview#date-model) for more details.
*/
interface NgbDateStruct {
/**
* The year, for example 2016
*/
year: number;
/**
* The month, for example 1=Jan ... 12=Dec
*/
month: number;
/**
* The day of month, starting at 1
*/
day: number;
}
/**
* A simple class that represents a date that datepicker also uses internally.
*
* It is the implementation of the `NgbDateStruct` interface that adds some convenience methods,
* like `.equals()`, `.before()`, etc.
*
* All datepicker APIs consume `NgbDateStruct`, but return `NgbDate`.
*
* In many cases it is simpler to manipulate these objects together with
* [`NgbCalendar`](#/components/datepicker/api#NgbCalendar) than native JS Dates.
*
* See the [date format overview](#/components/datepicker/overview#date-model) for more details.
*
* @since 3.0.0
*/
declare class NgbDate implements NgbDateStruct {
/**
* The year, for example 2016
*/
year: number;
/**
* The month, for example 1=Jan ... 12=Dec as in ISO 8601
*/
month: number;
/**
* The day of month, starting with 1
*/
day: number;
/**
* A **static method** that creates a new date object from the `NgbDateStruct`,
*
* ex. `NgbDate.from({year: 2000, month: 5, day: 1})`.
*
* If the `date` is already of `NgbDate` type, the method will return the same object.
*/
static from(date?: NgbDateStruct | null): NgbDate | null;
constructor(year: number, month: number, day: number);
/**
* Checks if the current date is equal to another date.
*/
equals(other?: NgbDateStruct | null): boolean;
/**
* Checks if the current date is before another date.
*/
before(other?: NgbDateStruct | null): boolean;
/**
* Checks if the current date is after another date.
*/
after(other?: NgbDateStruct | null): boolean;
}
type NgbPeriod = 'y' | 'm' | 'd';
/**
* A service that represents the calendar used by the datepicker.
*
* The default implementation uses the Gregorian calendar. You can inject it in your own
* implementations if necessary to simplify `NgbDate` calculations.
*/
declare abstract class NgbCalendar {
/**
* Returns the number of days per week.
*/
abstract getDaysPerWeek(): number;
/**
* Returns an array of months per year.
*
* With default calendar we use ISO 8601 and return [1, 2, ..., 12];
*/
abstract getMonths(year?: number): number[];
/**
* Returns the number of weeks per month.
*/
abstract getWeeksPerMonth(): number;
/**
* Returns the weekday number for a given day.
*
* With the default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun
*/
abstract getWeekday(date: NgbDate): number;
/**
* Adds a number of years, months or days to a given date.
*
* * `period` can be `y`, `m` or `d` and defaults to day.
* * `number` defaults to 1.
*
* Always returns a new date.
*/
abstract getNext(date: NgbDate, period?: NgbPeriod, number?: number): NgbDate;
/**
* Subtracts a number of years, months or days from a given date.
*
* * `period` can be `y`, `m` or `d` and defaults to day.
* * `number` defaults to 1.
*
* Always returns a new date.
*/
abstract getPrev(date: NgbDate, period?: NgbPeriod, number?: number): NgbDate;
/**
* Returns the week number for a given week.
*/
abstract getWeekNumber(week: readonly NgbDate[], firstDayOfWeek: number): number;
/**
* Returns the today's date.
*/
abstract getToday(): NgbDate;
/**
* Checks if a date is valid in the current calendar.
*/
abstract isValid(date?: NgbDate | null): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCalendar, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgbCalendar>;
}
declare class NgbCalendarGregorian extends NgbCalendar {
getDaysPerWeek(): number;
getMonths(): number[];
getWeeksPerMonth(): number;
getNext(date: NgbDate, period?: NgbPeriod, number?: number): NgbDate;
getPrev(date: NgbDate, period?: NgbPeriod, number?: number): NgbDate;
getWeekday(date: NgbDate): number;
getWeekNumber(week: readonly NgbDate[], firstDayOfWeek: number): number;
getToday(): NgbDate;
isValid(date?: NgbDate | null): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCalendarGregorian, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgbCalendarGregorian>;
}
/**
* The context for the datepicker 'day' template.
*
* You can override the way dates are displayed in the datepicker via the `[dayTemplate]` input.
*/
interface DayTemplateContext {
/**
* The date that corresponds to the template. Same as the `date` parameter.
*
* Can be used for convenience as a default template key, ex. `let-d`.
*
* @since 3.3.0
*/
$implicit: NgbDate;
/**
* The month currently displayed by the datepicker.
*/
currentMonth: number;
/**
* The year currently displayed by the datepicker.
*
* @since 5.2.0
*/
currentYear: number;
/**
* Any data you pass using the `[dayTemplateData]` input in the datepicker.
*
* @since 3.3.0
*/
data?: any;
/**
* The date that corresponds to the template.
*/
date: NgbDate;
/**
* `True` if the current date is disabled.
*/
disabled: boolean;
/**
* `True` if the current date is focused.
*/
focused: boolean;
/**
* `True` if the current date is selected.
*/
selected: boolean;
/**
* `True` if the current date is today (equal to `NgbCalendar.getToday()`).
*
* @since 4.1.0
*/
today: boolean;
}
type NgbMarkDisabled = (date: NgbDateStruct, current?: {
year: number;
month: number;
}) => boolean;
type NgbDayTemplateData = (date: NgbDateStruct, current?: {
year: number;
month: number;
}) => any;
type DayViewModel = {
date: NgbDate;
context: DayTemplateContext;
tabindex: number;
ariaLabel: string;
hidden: boolean;
};
type WeekViewModel = {
number: number;
days: DayViewModel[];
collapsed: boolean;
};
type MonthViewModel = {
firstDate: NgbDate;
lastDate: NgbDate;
number: number;
year: number;
weeks: WeekViewModel[];
weekdays: string[];
};
type DatepickerViewModel = {
dayTemplateData: NgbDayTemplateData | null;
disabled: boolean;
displayMonths: number;
firstDate: NgbDate | null;
firstDayOfWeek: number;
focusDate: NgbDate | null;
focusVisible: boolean;
lastDate: NgbDate | null;
markDisabled: NgbMarkDisabled | null;
maxDate: NgbDate | null;
minDate: NgbDate | null;
months: MonthViewModel[];
navigation: 'select' | 'arrows' | 'none';
outsideDays: 'visible' | 'collapsed' | 'hidden';
prevDisabled: boolean;
nextDisabled: boolean;
selectBoxes: {
years: number[];
months: number[];
};
selectedDate: NgbDate | null;
weekdayWidth: Exclude<Intl.DateTimeFormatOptions['weekday'], undefined>;
weekdaysVisible: boolean;
};
declare enum NavigationEvent {
PREV = 0,
NEXT = 1
}
/**
* A service supplying i18n data to the datepicker component.
*
* The default implementation of this service uses the Angular locale and registered locale data for
* weekdays and month names (as explained in the Angular i18n guide).
*
* It also provides a way to i18n data that depends on calendar calculations, like aria labels, day, week and year
* numerals. For other static labels the datepicker uses the default Angular i18n.
*
* See the [i18n demo](#/components/datepicker/examples#i18n) and
* [Hebrew calendar demo](#/components/datepicker/calendars#hebrew) on how to extend this class and define
* a custom provider for i18n.
*/
declare abstract class NgbDatepickerI18n {
/**
* Returns the weekday label using specified width
*
* @since 9.1.0
*/
abstract getWeekdayLabel(weekday: number, width?: Exclude<Intl.DateTimeFormatOptions['weekday'], undefined>): string;
/**
* Returns the short month name to display in the date picker navigation.
*
* With default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
*/
abstract getMonthShortName(month: number, year?: number): string;
/**
* Returns the full month name to display in the date picker navigation.
*
* With default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
*/
abstract getMonthFullName(month: number, year?: number): string;
/**
* Returns the text label to display above the day view.
*
* @since 9.1.0
*/
getMonthLabel(date: NgbDateStruct): string;
/**
* Returns the value of the `aria-label` attribute for a specific date.
*
* @since 2.0.0
*/
abstract getDayAriaLabel(date: NgbDateStruct): string;
/**
* Returns the textual representation of a day that is rendered in a day cell.
*
* @since 3.0.0
*/
getDayNumerals(date: NgbDateStruct): string;
/**
* Returns the textual representation of a week number rendered by datepicker.
*
* @since 3.0.0
*/
getWeekNumerals(weekNumber: number): string;
/**
* Returns the textual representation of a year that is rendered in the datepicker year select box.
*
* @since 3.0.0
*/
getYearNumerals(year: number): string;
/**
* Returns the week label to display in the heading of the month view.
*
* @since 9.1.0
*/
getWeekLabel(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbDatepickerI18n, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgbDatepickerI18n>;
}
/**
* A service providing default implementation for the datepicker i18n.
* It can be used as a base implementation if necessary.
*
* @since 9.1.0
*/
declare class NgbDatepickerI18nDefault extends NgbDatepickerI18n {
private _locale;
private _monthsShort;
private _monthsFull;
getWeekdayLabel(weekday: number, width?: Exclude<Intl.DateTimeFormatOptions['weekday'], undefined>): string;
getMonthShortName(month: number): string;
getMonthFullName(month: number): string;
getDayAriaLabel(date: NgbDateStruct): string;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbDatepickerI18nDefault, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgbDatepickerI18nDefault>;
}
/**
* The context for the datepicker 'content' template.
*
* You can override the way content is displayed in the datepicker via the `[contentTemplate]` input
* or via the [`NgbDatepickerContent`](#/components/datepicker/api#NgbDatepickerContent) directive.
*
* @since 14.2.0
*/
interface ContentTemplateContext {
/**
* The datepicker that corresponds to the template.
*
* Can be used for convenience as a default template key, ex. `let-d`.
*/
$implicit: NgbDatepicker;
}
/**
* An event emitted right before the navigation happens and the month displayed by the datepicker changes.
*/
interface NgbDatepickerNavigateEvent {
/**
* The currently displayed month.
*/
current: {
year: number;
month: number;
} | null;
/**
* The month we're navigating to.
*/
next: {
year: number;
month: number;
};
/**
* Calling this function will prevent navigation from happening.
*
* @since 4.1.0
*/
preventDefault: () => void;
}
/**
* An interface that represents the readonly public state of the datepicker.
*
* Accessible via the `datepicker.state` getter
*
* @since 5.2.0
*/
interface NgbDatepickerState {
/**
* The earliest date that can be displayed or selected
*/
readonly minDate: NgbDate | null;
/**
* The latest date that can be displayed or selected
*/
readonly maxDate: NgbDate | null;
/**
* The first visible date of currently displayed months
*/
readonly firstDate: NgbDate;
/**
* The last visible date of currently displayed months
*/
readonly lastDate: NgbDate;
/**
* The date currently focused by the datepicker
*/
readonly focusedDate: NgbDate;
/**
* First dates of months currently displayed by the datepicker
*
* @since 5.3.0
*/
readonly months: NgbDate[];
}
/**
* A directive that marks the content template that customizes the way datepicker months are displayed
*
* @since 5.3.0
*/
declare class NgbDatepickerContent {
templateRef: TemplateRef<any>;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbDatepickerContent, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbDatepickerContent, "ng-template[ngbDatepickerContent]", never, {}, {}, never, never, true, never>;
}
/**
* A component that renders one month including all the days, weekdays and week numbers. Can be used inside
* the `<ng-template ngbDatepickerMonths></ng-template>` when you want to customize months layout.
*
* For a usage example, see [custom month layout demo](#/components/datepicker/examples#custommonth)
*
* @since 5.3.0
*/
declare class NgbDatepickerMonth {
private _keyboardService;
private _service;
i18n: NgbDatepickerI18n;
datepicker: NgbDatepicker;
viewModel: MonthViewModel;
/**
* The first date of month to be rendered.
*
* This month must one of the months present in the
* [datepicker state](#/components/datepicker/api#NgbDatepickerState).
*/
set month(month: NgbDateStruct);
onKeyDown(event: KeyboardEvent): void;
doSelect(day: DayViewModel): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbDatepickerMonth, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgbDatepickerMonth, "ngb-datepicker-month", never, { "month": { "alias": "month"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* A highly configurable component that helps you with selecting calendar dates.
*
* `NgbDatepicker` is meant to be displayed inline on a page or put inside a popup.
*/
declare class NgbDatepicker implements AfterViewInit, OnChanges, OnInit, ControlValueAccessor {
static ngAcceptInputType_autoClose: boolean | string;
static ngAcceptInputType_navigation: string;
static ngAcceptInputType_outsideDays: string;
static ngAcceptInputType_weekdays: boolean | string;
model: DatepickerViewModel;
private _defaultDayTemplate;
private _contentEl;
protected injector: Injector;
private _service;
private _calendar;
private _i18n;
private _config;
private _nativeElement;
private _ngbDateAdapter;
private _ngZone;
private _destroyRef;
private _injector;
private _controlValue;
private _publicState;
private _initialized;
/**
* The reference to a custom content template.
*
* Allows to completely override the way datepicker displays months.
*
* See [`NgbDatepickerContent`](#/components/datepicker/api#NgbDatepickerContent) and
* [`ContentTemplateContext`](#/components/datepicker/api#ContentTemplateContext) for more details.
*
* @since 14.2.0
*/
contentTemplate: TemplateRef<ContentTemplateContext>;
contentTemplateFromContent?: NgbDatepickerContent;
/**
* The reference to a custom template for the day.
*
* Allows to completely override the way a day 'cell' in the calendar is displayed.
*
* See [`DayTemplateContext`](#/components/datepicker/api#DayTemplateContext) for the data you get inside.
*/
dayTemplate: TemplateRef<DayTemplateContext>;
/**
* The callback to pass any arbitrary data to the template cell via the
* [`DayTemplateContext`](#/components/datepicker/api#DayTemplateContext)'s `data` parameter.
*
* `current` is the month that is currently displayed by the datepicker.
*
* @since 3.3.0
*/
dayTemplateData: (date: NgbDateStruct, current?: {
year: number;
month: number;
}) => any;
/**
* The number of months to display.
*/
displayMonths: number;
/**
* The first day of the week.
*
* With default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun.
*/
firstDayOfWeek: number;
/**
* The reference to the custom template for the datepicker footer.
*
* @since 3.3.0
*/
footerTemplate: TemplateRef<any>;
/**
* The callback to mark some dates as disabled.
*
* It is called for each new date when navigating to a different month.
*
* `current` is the month that is currently displayed by the datepicker.
*/
markDisabled: (date: NgbDateStruct, current?: {
year: number;
month: number;
}) => boolean;
/**
* The latest date that can be displayed or selected.
*
* If not provided, 'year' select box will display 10 years after the current month.
*/
maxDate: NgbDateStruct;
/**
* The earliest date that can be displayed or selected.
*
* If not provided, 'year' select box will display 10 years before the current month.
*/
minDate: NgbDateStruct;
/**
* Navigation type.
*
* * `"select"` - select boxes for month and navigation arrows
* * `"arrows"` - only navigation arrows
* * `"none"` - no navigation visible at all
*/
navigation: "none" | "select" | "arrows";
/**
* The way of displaying days that don't belong to the current month.
*
* * `"visible"` - days are visible
* * `"hidden"` - days are hidden, white space preserved
* * `"collapsed"` - days are collapsed, so the datepicker height might change between months
*
* For the 2+ months view, days in between months are never shown.
*/
outsideDays: "hidden" | "visible" | "collapsed";
/**
* If `true`, week numbers will be displayed.
*/
showWeekNumbers: boolean;
/**
* The date to open calendar with.
*
* With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
* If nothing or invalid date is provided, calendar will open with current month.
*
* You could use `navigateTo(date)` method as an alternative.
*/
startDate: {
year: number;
month: number;
day?: number;
};
/**
* The way weekdays should be displayed.
*
* * `true` - weekdays are displayed using default width
* * `false` - weekdays are not displayed
* * `"short" | "long" | "narrow"` - weekdays are displayed using specified width
*
* @since 9.1.0
*/
weekdays: boolean | "short" | "narrow" | "long";
/**
* An event emitted right before the navigation happens and displayed month changes.
*
* See [`NgbDatepickerNavigateEvent`](#/components/datepicker/api#NgbDatepickerNavigateEvent) for the payload info.
*/
navigate: EventEmitter<NgbDatepickerNavigateEvent>;
/**
* An event emitted when user selects a date using keyboard or mouse.
*
* The payload of the event is currently selected `NgbDate`.
*
* @since 5.2.0
*/
dateSelect: EventEmitter<NgbDate>;
onChange: (_: any) => void;
onTouched: () => void;
constructor();
/**
* Returns the readonly public state of the datepicker
*
* @since 5.2.0
*/
get state(): NgbDatepickerState;
/**
* Returns the calendar service used in the specific datepicker instance.
*
* @since 5.3.0
*/
get calendar(): NgbCalendar;
/**
* Returns the i18n service used in the specific datepicker instance.
*
* @since 14.2.0
*/
get i18n(): NgbDatepickerI18n;
/**
* Focuses on given date.
*/
focusDate(date?: NgbDateStruct | null): void;
/**
* Selects focused date.
*/
focusSelect(): void;
focus(): void;
/**
* Navigates to the provided date.
*
* With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
* If nothing or invalid date provided calendar will open current month.
*
* Use the `[startDate]` input as an alternative.
*/
navigateTo(date?: {
year: number;
month: number;
day?: number;
}): void;
ngAfterViewInit(): void;
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
onDateSelect(date: NgbDate): void;
onNavigateDateSelect(date: NgbDate): void;
onNavigateEvent(event: NavigationEvent): void;
registerOnChange(fn: (value: any) => any): void;
registerOnTouched(fn: () => any): void;
setDisabledState(disabled: boolean): void;
writeValue(value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgbDatepicker, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgbDatepicker, "ngb-datepicker", ["ngbDatepicker"], { "contentTemplate": { "alias": "contentTemplate"; "required": false; }; "dayTemplate": { "alias": "dayTemplate"; "required": false; }; "dayTemplateData": { "alias": "dayTemplateData"; "required": false; }; "displayMonths": { "alias": "displayMonths"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "markDisabled": { "alias": "markDisabled"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "outsideDays": { "alias": "outsideDays"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "weekdays": { "alias": "weekdays"; "required": false; }; }, { "navigate": "navigate"; "dateSelect": "dateSelect"; }, ["contentTemplateFromContent"], never, true, never>;
}
/**
* A directive that allows to stick a datepicker popup to an input field.
*
* Manages interaction with the input field itself, does value formatting and provides forms integration.
*/
declare class NgbInputDatepicker implements OnChanges, OnDestroy, ControlValueAccessor, Validator {
static ngAcceptInputType_autoClose: boolean | string;
static ngAcceptInputType_disabled: boolean | '';
static ngAcceptInputType_navigation: string;
static ngAcceptInputType_outsideDays: string;
static ngAcceptInputType_weekdays: boolean | string;
private _parserFormatter;
private _elRef;
private _vcRef;
private _ngZone;
private _calendar;
private _dateAdapter;
private _document;
private _changeDetector;
private _injector;
private _config;
private _cRef;
private _disabled;
private _elWithFocus;
private _model;
private _inputValue;
private _afterRenderRef;
private _positioning;
private _destroyCloseHandlers$;
/**
* Indicates whether the datepicker popup should be closed automatically after date selection / outside click or not.
*
* * `true` - the popup will close on both date selection and outside click.
* * `false` - the popup can only be closed manually via `close()` or `toggle()` methods.
* * `"inside"` - the popup will close on date selection, but not outside clicks.
* * `"outside"` - the popup will close only on the outside click and not on date selection/inside clicks.
*
* @since 3.0.0
*/
autoClose: boolean | "inside" | "outside";
/**
* The reference to a custom content template.
*
* Allows to completely override the way datepicker.
*
* See [`NgbDatepickerContent`](#/components/datepicker/api#NgbDatepickerContent) for more details.
*
* @since 14.2.0
*/
contentTemplate: TemplateRef<ContentTemplateContext>;
/**
* An optional class applied to the datepicker popup element.
*
* @since 9.1.0
*/
datepickerClass: string;
/**
* The reference to a custom template for the day.
*
* Allows to completely override the way a day 'cell' in the calendar is displayed.
*
* See [`Da