@funidata/ngx-fudis
Version:
Funidata Design System.
5,704 lines • 227 kB
TypeScript
import * as i0 from '@angular/core';
import { SimpleChange, Signal, TemplateRef, EventEmitter, OnChanges, OnInit, OnDestroy, ElementRef, WritableSignal, DestroyRef, AfterViewInit, Renderer2, AfterContentInit, AfterViewChecked, ModuleWithProviders } from '@angular/core';
import * as rxjs from 'rxjs';
import { Observable, BehaviorSubject, Subject, Subscription } from 'rxjs';
import { ComponentType } from '@angular/cdk/portal';
import * as i59 from '@angular/material/dialog';
import { MatDialog, MatDialogConfig, MatDialogRef, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
import * as i38 from '@angular/forms';
import { FormControl, FormGroup, ValidationErrors, ValidatorFn, AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
import * as i62 from '@angular/material/core';
import { MatDateFormats, DateAdapter } from '@angular/material/core';
import * as i11 from '@angular/common';
import * as i58 from '@angular/material/datepicker';
import { MatDatepickerIntl, MatDatepicker } from '@angular/material/datepicker';
import * as i53 from '@angular/cdk/layout';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import * as i57 from '@angular/material/button';
import * as i60 from '@angular/material/form-field';
import * as i61 from '@angular/material/input';
import { Overlay } from '@angular/cdk/overlay';
import * as i73 from '@angular/router';
import * as i74 from '@angular/cdk/scrolling';
/**
* Alert
*/
declare const fudisAlertPositionArray: readonly ["static", "absolute", "fixed"];
type FudisAlertPosition = (typeof fudisAlertPositionArray)[number];
interface FudisAlert {
message: Observable<string>;
type: FudisNotification;
id: string;
}
interface FudisAlertElement extends FudisAlert {
htmlId: string;
buttonId: string;
initialFocus: boolean;
}
/**
* Badge
*/
declare const fudisBadgeVariantArray: readonly ["accent", "danger", "primary", "secondary", "success"];
type FudisBadgeVariant = (typeof fudisBadgeVariantArray)[number];
/**
* Button
*/
declare const fudisButtonVariantArray: readonly ["primary", "secondary", "tertiary"];
type FudisButtonVariant = (typeof fudisButtonVariantArray)[number];
declare const fudisButtonSizeArray: readonly ["extra-small", "small", "medium"];
type FudisButtonSize = (typeof fudisButtonSizeArray)[number];
declare const fudisButtonTypeArray: readonly ["submit", "button"];
type FudisButtonType = (typeof fudisButtonTypeArray)[number];
/**
* Description List
*/
type FudisDescriptionListVariant = 'regular' | 'compact';
type FudisDescriptionListItemDetailLanguageContent = {
[lang in FudisLanguageAbbr]?: {
[id: string]: string | null | undefined;
};
};
/**
* Dialog
*/
declare const fudisDialogSizeArray: readonly ["xs", "sm", "md", "lg", "xl"];
type FudisDialogSize = (typeof fudisDialogSizeArray)[number];
/**
* Dropdown Menu
*/
declare const fudisDropdownMenuAlignArray: readonly ["left", "center", "right"];
type FudisDropdownMenuAlign = (typeof fudisDropdownMenuAlignArray)[number];
/**
* Expandable
*/
type FudisExpandableType = 'regular' | 'lite';
/**
* FieldsetActions
*/
declare const fudisFieldsetActionsAlignArray: readonly ["start", "below", "end"];
type fudisFieldsetActionsAlign = (typeof fudisFieldsetActionsAlignArray)[number];
/**
* Language Badge
*/
type FudisLanguageAbbr = 'fi' | 'sv' | 'en';
/**
* Notification
*/
declare const fudisNotificationVariantArray: readonly ["warning", "danger", "success", "info"];
type FudisNotification = (typeof fudisNotificationVariantArray)[number];
type FudisPopoverPosition = 'left' | 'right' | 'above' | 'below';
/**
* Types for extending ngOnChanges SimpleChanges type
*
* - T = any FudisComponent which have @Input() properties
* - P = property of component. E. g. for Grid columns and rowGap or for Heading level and size.
* - So T[P] translates to e.g. HeadingComponent['level'] --> HeadingComponent.level --> values from
* 1-6
*/
interface FudisComponentChange<T, P extends keyof T> extends SimpleChange {
previousValue: T[P] | undefined;
currentValue: T[P] | undefined;
firstChange: boolean;
}
type FudisComponentChanges<T> = {
[P in keyof T]?: FudisComponentChange<T, P>;
};
declare class FudisFocusService {
private _document;
constructor(_document: Document);
/**
* List of ignored id's
*/
private _ignoreInitialFocusList;
/**
* HTML element to focus
*/
private _focusTarget;
/**
* Get target HTML element to focus
*/
getFocusTarget(): HTMLElement;
/**
* Set focus target if it's not alert close button
*/
setFocusTarget(target: HTMLElement): void;
/**
* Focus target element by id. If focusable element is not available when function is called, it
* will repeatively call itself until try counter is full.
*
* @param id Target to focus
* @param tryCounter How many times function should try to focus to given id
*/
focusToElementById(id: string, numberOfTries?: number): void;
/**
* Add component with given id to ignore list, so that initialFocus is ignored with that. Used
* e.g. in a form where same component is added multiple times when user clicks 'New item' or
* similar and focus is wanted to move there except with 'item-id-x'.
*/
addToIgnoreList(id: string): void;
/**
* Remove id from ignore initialFocus list
*/
removeFromIgnoreList(id: string): void;
/**
* Get list of ignored id's
*/
getIgnoreList(): string[];
/**
* Check if current id is in the ignored list
*/
isIgnored(id: string): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<FudisFocusService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisFocusService>;
}
/**
* This file contains translations for static translation keys used by Fudis components. These are
* not supposed to be modified by the using application.
*/
interface FudisTranslationConfig {
BREADCRUMBS: {
PREFIX: string;
};
REQUIRED: string;
DATEPICKER: {
CALENDAR: string;
CLOSE: string;
OPEN: string;
PLACEHOLDER: string;
PREV_MONTH: string;
NEXT_MONTH: string;
PREV_YEAR: string;
NEXT_YEAR: string;
PREV_MULTIYEAR: string;
NEXT_MULTIYEAR: string;
SWITCH_MONTH_VIEW: string;
SWITCH_MULTIYEAR_VIEW: string;
VALIDATION: {
START_DATE_INVALID: string;
END_DATE_INVALID: string;
DATE_PARSE: string;
};
};
DIALOG: {
CLOSE: string;
};
DESCRIPTION_LIST_ITEM_DETAILS: {
EMPTY_STATE: string;
};
DROPDOWNMENU: {
ITEM: {
DISABLED: string;
};
};
ERROR_SUMMARY: {
TITLE: string;
};
INPUT_WITH_LANGUAGE_OPTIONS: {
LANGUAGE: string;
MISSING: string;
MAX_LENGTH: string;
};
LINK: {
EXTERNAL_LINK: string;
};
PAGINATION: {
BUTTON: {
NEXT: {
LABEL: string;
ARIA_LABEL: string;
};
PREVIOUS: {
LABEL: string;
ARIA_LABEL: string;
};
};
PREFIX: string;
OPENED_PAGE: string;
CURRENT_PAGE: string;
LAST_PAGE: string;
};
SELECT: {
DISABLED: string;
MULTISELECT: {
REMOVE_ITEM: string;
REMOVE_ITEMS: string;
};
AUTOCOMPLETE: {
CLEAR: string;
NO_RESULTS: string;
SHOWING: string;
RESULTS: string;
};
};
IMAGE: {
FUNIDATA_LOGO: string;
};
ATTENTION: string;
LOADING_SPINNER: {
VISIBLE_LABEL: string;
PAGE_LOADING: string;
PAGE_LOAD_FINISHED: string;
};
LANGUAGE_BADGE: {
ARIA_LABEL: FudisTranslationLanguageBadgeAriaLabel;
};
TEXTAREA: {
MAX_LENGTH: string;
};
TEXTINPUT: {
MAX_LENGTH: string;
};
ALERT: {
HEADING_LABEL: string;
};
}
interface FudisTranslationLanguageBadgeAriaLabel {
FI: string;
SV: string;
EN: string;
TRANSLATIONS: string;
SELECTED: string;
MISSING_TRANSLATION: string;
}
declare class FudisTranslationService {
constructor();
/**
* Signal for Application's translation texts, default language for translations is English
*/
private _appTranslationsSignal;
/**
* Application language, default language is English
*/
private _appLanguage;
/**
* Currently available languages in Fudis are Finnish, Swedish and English
*/
private _selectableLanguages;
/**
* Set language of repeated texts Fudis uses for its components. E. g. 'required' text of form
* components or help texts for screen readers for various buttons. Also as Error Summary
* Component reloads its errors if error's language has changed, here is defined component to NOT
* focus to the updated list on only language change.
*/
setLanguage(language: FudisLanguageAbbr): void;
/**
* Get current language of Fudis configs
*/
getLanguage(): FudisLanguageAbbr;
/**
* Get current language as Signal
*/
getLanguageSignal(): Signal<FudisLanguageAbbr>;
/**
* Get application's translation config values Signal
*/
getTranslations(): Signal<FudisTranslationConfig>;
/**
* Set which languages are visible in Language Badges
*/
setSelectableLanguages(languages: FudisLanguageAbbr[]): void;
/**
* Get visible languages of Language Badges
*/
getSelectableLanguages(): Signal<FudisLanguageAbbr[]>;
static ɵfac: i0.ɵɵFactoryDeclaration<FudisTranslationService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisTranslationService>;
}
/**
* File containing types used in FudisIdService
*/
declare const fudisIdComponents: readonly ["alert", "autocomplete", "body-text", "button", "checkbox", "autocomplete-multi-select", "datepicker", "dialog", "dropdown", "error-message", "expandable", "fieldset", "form", "guidance", "heading", "localized-text-group", "link", "section", "text-area", "text-input", "validator-error-message", "pagination", "popover"];
declare const fudisIdParents: readonly ["breadcrumbs", "checkbox-group", "language-badge-group", "radio-button-group"];
declare const fudisIdGrandParents: readonly ["description-list", "select", "multiselect", "dropdown-menu"];
type FudisIdComponent = (typeof fudisIdComponents)[number];
type FudisIdParent = (typeof fudisIdParents)[number];
type FudisIdGrandParent = (typeof fudisIdGrandParents)[number];
/**
* Select and Multiselect component ids and its grouped and non-grouped options
*/
type FudisIdSelectFamily = {
id: string;
nonGroupedOptions: string[];
groups: {
[groupId: string]: string[];
};
};
/**
* Description List Item component id and its child term and details ids
*/
type FudisIdDlItem = {
term: string[];
details: string[];
};
/**
* Description List component id and its child items
*/
type FudisIdDlFamily = {
id: string;
items: {
[itemId: string]: FudisIdDlItem;
};
};
/**
* Dropdown Menu component id and its grouped and non-grouped items
*/
type FudisIdDropdownMenuFamily = {
id: string;
nonGroupedOptions: string[];
groups: {
[groupId: string]: string[];
};
};
/**
* Collection of all ids
*/
type FudisIdData = {
components: {
[key in FudisIdComponent]: string[];
};
parents: {
[key in FudisIdParent]: {
[parentId: string]: string[];
};
};
grandParents: {
'description-list': {
[parentId: string]: FudisIdDlFamily;
};
'dropdown-menu': {
[parentId: string]: FudisIdDropdownMenuFamily;
};
select: {
[parentId: string]: FudisIdSelectFamily;
};
multiselect: {
[parentId: string]: FudisIdSelectFamily;
};
};
};
declare class FudisIdService {
private _idData;
/**
* Get collected ID data
*/
getIdData(): FudisIdData;
getNewId(componentType: FudisIdComponent): string;
/**
* Add an id to collection of single components
*/
addNewId(componentType: FudisIdComponent, newId: string): void;
/**
* Get an id and add it to collection for a parent component. E.g. 'fudis-breadcrumbs-1'
*/
getNewParentId(componentType: FudisIdParent): string;
/**
* Add id to collection of parents
*/
addNewParentId(componentType: FudisIdParent, newId: string): void;
/**
* Get an id and add it to collection for a child component. E.g. 'fudis-breadcrumbs-1-item-1'
*/
getNewChildId(parentType: FudisIdParent, parentId: string): string;
getAllChildrenIds(parentType: FudisIdParent, parentId: string): string[];
/**
* Add id to collection of parents children
*/
addNewChildId(parentType: FudisIdParent, parentId: string, customId: string): void;
/**
* Get an id and add it to collection for a grand parent type components
*/
getNewGrandParentId(componentType: FudisIdGrandParent): string;
/**
* Add grand parent id to data collection
*/
addNewGrandParentId(componentType: FudisIdGrandParent, newId: string): void;
/**
* Get an id and add it to collection for first child of grandparent. E.g. Select Group or
* Description List Item
*/
getNewGroupId(componentType: 'select' | 'multiselect' | 'description-list' | 'dropdown-menu', parentId: string): string;
/**
* Add group id of grand parent to data collection
*/
addNewGroupId(componentType: 'select' | 'multiselect' | 'description-list' | 'dropdown-menu', parentId: string, newId: string): void;
getNewDropdownMenuId(parentId: string, groupParentId?: string): string;
/**
* Get an id and add it to collection for Select Options -->
* fudis-select-4-group-2-option-g3n3ratedh4sh
*/
getNewSelectOptionId(label: string, selectType: 'select' | 'multiselect', selectParentId: string, groupParentId?: string): string;
static createSelectOptionId(id: string, label: string): string;
/**
* Djb2 hash for hashing the label for the option id. It doesn't have to be this, it can be
* anything as long as it's fast and short
*/
private static hashLabel;
/**
* Get an id and add it to collection for Descrition List Term & Details -->
* fudis-description-list-1-item-1-term & fudis-description-list-1-item-1-details-1
*/
getNewDlGrandChilId(childType: 'term' | 'details', parentDlId: string, parentItemId: string): string;
getDlGrandChildrensIds(childType: 'term' | 'details', parentDlId: string, parentItemId: string): string[];
static ɵfac: i0.ɵɵFactoryDeclaration<FudisIdService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisIdService>;
}
declare class FudisAlertService {
private _idService;
constructor(_idService: FudisIdService);
/**
* Current alerts
*/
private _alerts;
/**
* To add new alert, which will be rendered by Alert Group component. Note that 'id' doesn't
* necessarily need to be unique. All errors with the same 'id' can be dismissed with
* dismissAlert() using that particular 'id'.
*/
addAlert(newAlert: FudisAlert): void;
/**
* To dismiss alert by 'id' provided in 'addAlert()'. It will dismiss all alerts matching the
* 'id'.
*/
dismissAlert(id: string): void;
/**
* Dismisses only one alert from alert's close button click in the UI
*/
dismissAlertFromButton(id: string): void;
/**
* Dismiss all alerts
*/
dismissAll(): void;
/**
* Get alerts as an Observable
*/
get alerts(): BehaviorSubject<FudisAlertElement[]>;
/**
* Set 'initialFocus' attribute of alert to false, so that if same alert with link is rendered
* again, the initial focus will not jump there anymore.
*/
updateAlertLinkFocusState(htmlId: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration<FudisAlertService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisAlertService>;
}
declare class FudisDialogService {
ngMaterialDialog: MatDialog;
constructor(ngMaterialDialog: MatDialog);
private _dialogOpen;
private _justClosedDropdownWithEscape;
/**
* Open new dialog.
*
* @param component Component or template to show in the dialog.
* @param config Optional configuration object. Use the `data` field to inject data into
* `component`.
* @returns Reference to the dialog that was opened.
*/
open<T, R = any, D = any>(component: ComponentType<T> | TemplateRef<T>, config?: MatDialogConfig<D>): MatDialogRef<T, R>;
/**
* Close opened Dialog
*
* @param dialogResult Data sent to Component which opened this dialog.
*/
close<R = any>(dialogResult?: R): void;
/**
* Close all instances of Dialogs
*/
closeAll(): void;
/**
* Get dialog open status
*/
getDialogOpenStatus(): BehaviorSubject<boolean>;
/**
* Set dialog open
*/
setDialogOpenStatus(value: boolean): void;
/**
* Set flag to indicate that a dropdown was just closed with Escape key, so that dialog does not
* also close with the same key press.
*/
dropdownClosedWithEscape(): void;
/**
* Check if a dropdown was just closed with Escape key. Resets the flag after checking.
*/
hasJustClosedDropdownWithEscape(): boolean;
/**
* @returns Currently open Dialogs
*/
dialogsOpen(): MatDialogRef<any, any>[];
/**
* Merge consumer's config with ours.
*/
private static _createConfig;
static ɵfac: i0.ɵɵFactoryDeclaration<FudisDialogService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisDialogService>;
}
/**
* Displays a dismissible alert message.
*
* Use this component to show contextual feedback messages such as success, warning, or error state.
*/
declare class AlertComponent {
private _document;
protected _translateService: FudisTranslationService;
private _alertService;
private _focusService;
private _dialogService;
constructor(_document: Document, _translateService: FudisTranslationService, _alertService: FudisAlertService, _focusService: FudisFocusService, _dialogService: FudisDialogService);
/**
* Visible alert message
*/
message: Observable<string>;
/**
* Id to be set on the whole alert element
*/
htmlId: string;
/**
* Id to be set on the close button
*/
buttonId: string;
/**
* Variant of Alert: 'warning' | 'danger' | 'success' | 'info'. Same names and colors as in
* Notification Component.
*/
variant: FudisNotification;
/**
* Output for close button click
*/
handleClose: EventEmitter<Event>;
/**
* Handler for close button. Dismisses alert from service and sets focus to last alert in the list
* or to previously focused element stored with _handleFocus().
*/
protected _handleCloseClick(event: Event): void;
/**
* Focus handler for close Button inside alert. Saves the element focus originated from, to
* restore focus there when there are no alerts left.
*/
protected _handleFocus(focusEvent: FocusEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "fudis-alert", never, { "message": { "alias": "message"; "required": true; }; "htmlId": { "alias": "htmlId"; "required": true; }; "buttonId": { "alias": "buttonId"; "required": true; }; "variant": { "alias": "variant"; "required": false; }; }, { "handleClose": "handleClose"; }, never, never, true, never>;
}
/**
* Groups and manages multiple alert messages.
*
* Use this component to display stacked alerts in a single, consistent location.
*/
declare class AlertGroupComponent implements OnChanges {
protected _alertService: FudisAlertService;
private _translationService;
private _dialogService;
constructor(_alertService: FudisAlertService, _translationService: FudisTranslationService, _dialogService: FudisDialogService);
/**
* CSS position of alerts: 'static' | 'absolute' | 'fixed'
*/
position: FudisAlertPosition;
/**
* Boolean to determine if Alert Group is used inside Fudis Dialog Component
*/
insideDialog: boolean;
/**
* List of Alerts fetched from Alert Service
*/
protected _alertList: BehaviorSubject<FudisAlertElement[]>;
/**
* Label for section element containing alerts
*/
protected _alertGroupLabel: BehaviorSubject<string>;
/**
* Boolean to determine if Alert group is visible
*/
protected _visible: BehaviorSubject<boolean>;
ngOnChanges(changes: FudisComponentChanges<AlertGroupComponent>): void;
/**
* Get Alert Group's visible status
*/
getVisibleStatus(): boolean;
/**
* Set visibility when Fudis Dialog is opened and closed
*/
private _setVisibility;
static ɵfac: i0.ɵɵFactoryDeclaration<AlertGroupComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AlertGroupComponent, "fudis-alert-group", never, { "position": { "alias": "position"; "required": false; }; "insideDialog": { "alias": "insideDialog"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Displays a small status or category label.
*
* Use this component to convey concise information, like state or classification that supplements
* surrounding content.
*/
declare class BadgeComponent {
/**
* Badge variant: 'accent' | 'danger' | 'primary' | 'secondary' | 'success'
*/
variant: FudisBadgeVariant;
/**
* Text content for the badge
*/
content: string;
static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "fudis-badge", never, { "variant": { "alias": "variant"; "required": false; }; "content": { "alias": "content"; "required": false; }; }, {}, never, ["*"], true, never>;
}
declare const fudisHeadingLevelArray: readonly [1, 2, 3, 4, 5, 6];
type FudisHeadingLevel = (typeof fudisHeadingLevelArray)[number];
declare const fudisHeadingVariantArray: readonly ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
type FudisHeadingVariant = (typeof fudisHeadingVariantArray)[number];
declare const fudisBodyTextArray: readonly ["lg-regular", "md-regular", "sm-regular", "lg-light", "md-light"];
type FudisBodyText = (typeof fudisBodyTextArray)[number];
declare const fudisTextAlignArray: readonly ["left", "right", "center"];
type FudisTextAlign = (typeof fudisTextAlignArray)[number];
/**
* Displays the hierarchial navigation path to the current page.
*
* Use this component to help users understand their location and navigate back through parent
* levels.
*/
declare class BreadcrumbsComponent {
private _translationService;
private _idService;
constructor(_translationService: FudisTranslationService, _idService: FudisIdService);
/**
* Label to attach to aria-label
*/
label: string;
/**
* Prefix for aria-label from Fudis translation keys
*/
protected _breadcrumbsPrefix: BehaviorSubject<string>;
/**
* HTML id
*/
protected _id: string;
/**
* Getter for id
*/
get id(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsComponent, "fudis-breadcrumbs", never, { "label": { "alias": "label"; "required": true; }; }, {}, never, ["fudis-breadcrumbs-item"], true, never>;
}
/**
* Represents a single link within BreadcrumbsComponent. Must be a direct child of
* `fudis-breadcrumbs`.
*
* Use this component with descriptive link text to ensure understandability.
*/
declare class BreadcrumbsItemComponent {
private _idService;
protected _breadCrumbs: BreadcrumbsComponent;
constructor(_idService: FudisIdService, _breadCrumbs: BreadcrumbsComponent);
/**
* Binding host CSS class to component wrapper
*/
protected _classes: string;
/**
* Id from Id Service
*/
protected _id: string;
static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbsItemComponent, [null, { host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsItemComponent, "fudis-breadcrumbs-item", never, {}, {}, never, ["a", "fudis-body-text"], true, never>;
}
/**
* Displays standard body text content.
*
* Use this component to render paragraphs or informational text with consistent typography and
* spacing. Use clear, simple, and inclusive language.
*/
declare class BodyTextComponent implements OnChanges {
protected _breadcrumbsItem: BreadcrumbsItemComponent;
private _idService;
constructor(_breadcrumbsItem: BreadcrumbsItemComponent, _idService: FudisIdService);
/**
* Class for the parent wrapper element
*/
protected _classes: string;
/**
* Variant for the paragraph: 'lg-regular' | 'md-regular' | 'sm-regular' | 'lg-light' | 'md-light'
*/
variant: FudisBodyText;
/**
* Text alignment: 'center' | 'left' | 'right'
*/
align: FudisTextAlign;
/**
* Optional language attribute, possible values 'fi', 'sv' and 'en'.
*/
lang: FudisLanguageAbbr;
/**
* Id generated from Id Service
*/
protected _id: string;
/**
* To add default CSS class if app hasn't provided any variant
*/
protected _defaultClass: BehaviorSubject<boolean>;
ngOnChanges(changes: FudisComponentChanges<BodyTextComponent>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<BodyTextComponent, [{ optional: true; host: true; }, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<BodyTextComponent, "fudis-body-text", never, { "variant": { "alias": "variant"; "required": false; }; "align": { "alias": "align"; "required": false; }; "lang": { "alias": "lang"; "required": false; }; }, {}, never, ["*"], true, never>;
}
declare const fudisIconArray: readonly ["achievement", "achievement-small", "alert", "alert-fill", "alert-small", "archive", "arrow-big", "arrow-dashed", "arrow-solid", "back", "brochure", "bullets", "calendar", "change-log", "check", "check-indeterminate-small", "check-small", "checkmark-circle", "chevron", "chevron-ring", "chevron-ring-fill", "clock", "close", "close-big", "code", "decrease-indent", "delete", "dot", "edit", "editor", "exclamation-mark-circle", "exclamation-mark-circle-fill", "exclamation-mark-circle-small", "eye", "eye-blind", "fail", "hourglass", "increase-indent", "info", "info-circle", "info-circle-fill", "info-circle-small", "junction", "link", "list-add", "list-minus", "lock", "lock-open", "magic-wand", "mail", "menu", "message", "minus", "minus-ring-fill", "new-tab", "notebook", "notification", "numbering", "paperclip", "pdf", "people", "person", "person-small", "picker", "pin-small", "place", "place-ring-fill", "plus", "print", "question-mark", "question-mark-small", "required", "ring-close", "ring-close-fill", "ring-plus", "ring-plus-fill", "rosette", "rule", "search", "seats", "settings", "shopping-cart", "sorter", "star", "switch", "three-dots", "three-dots-small", "waiting-approval", "waiting-decline", "zoom-in", "zoom-out"];
type FudisIcon = (typeof fudisIconArray)[number];
declare const fudisIconColorArray: readonly ["yellow", "red", "gray-dark", "gray-light", "primary", "primary-dark", "green", "white"];
type FudisIconColor = (typeof fudisIconColorArray)[number];
declare const fudisIconRotateArray: readonly ["flip-180", "cw-90", "ccw-90", "none"];
type FudisIconRotate = (typeof fudisIconRotateArray)[number];
declare class PopoverApiDirective {
/**
* Text placed inside popover
*/
popoverText: string;
/**
* Position of the popover on the parent element: 'left' | 'right' | 'above' | 'below'
*/
popoverPosition: FudisPopoverPosition;
/**
* Label for the element that triggers the popover
*/
popoverTriggerLabel: string;
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverApiDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverApiDirective, "[fudisPopoverApi]", never, { "popoverText": { "alias": "popoverText"; "required": false; }; "popoverPosition": { "alias": "popoverPosition"; "required": false; }; "popoverTriggerLabel": { "alias": "popoverTriggerLabel"; "required": false; }; }, {}, never, never, false, never>;
}
declare class ButtonBaseDirective extends PopoverApiDirective implements OnInit, OnDestroy {
protected _idService: FudisIdService;
constructor(_idService: FudisIdService);
/**
* Reference to native button element
*/
buttonEl: ElementRef<HTMLButtonElement>;
/**
* Id for HTML button element. By default generated.
*/
id: string;
/**
* Icon for button
*/
icon: FudisIcon | undefined;
/**
* Icon rotation option: 'flip-180' | 'cw-90' | 'ccw-90' | 'none'
*/
iconRotate: FudisIconRotate;
/**
* Button variant: 'primary' | 'secondary' | 'tertiary'
*/
variant: FudisButtonVariant;
/**
* Disables the button, keeping it focusable for screen readers
*/
disabled: boolean;
/**
* Button size: 'extra-small' | 'small' | 'medium'
*/
size: FudisButtonSize;
/**
* Click handler
*/
handleClick: EventEmitter<Event>;
/**
* Focus handler
*/
handleFocus: EventEmitter<FocusEvent>;
/**
* Blur handler
*/
handleBlur: EventEmitter<FocusEvent>;
/**
* OnDestroy handler emit
*/
handleDestroy: EventEmitter<void>;
/**
* Default Button size for classes
*/
protected _size: string;
/**
* Automatically sets icon color based on button variant
*/
protected _iconColor: BehaviorSubject<"primary" | "primary-dark" | "yellow" | "red" | "gray-dark" | "gray-light" | "green" | "white">;
/**
* Is button focused or not
*/
protected _focused: boolean;
/**
* Button CSS class list
*/
protected _classList: BehaviorSubject<string[]>;
ngOnInit(): void;
ngOnDestroy(): void;
/**
* Handle button focus
*/
protected _handleButtonFocus(event: FocusEvent): void;
/**
* Determine icon color based on button variant. Return CSS classes with size and variant
*/
protected _getClasses(): string[];
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonBaseDirective, "[fudisButtonBase]", never, { "id": { "alias": "id"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconRotate": { "alias": "iconRotate"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "handleClick": "handleClick"; "handleFocus": "handleFocus"; "handleBlur": "handleBlur"; "handleDestroy": "handleDestroy"; }, never, never, false, never>;
}
/**
* Triggers an action or event.
*
* Use this component for primary user actions such as submitting forms, confirming choices, or
* navigating workflows.
*/
declare class ButtonComponent extends ButtonBaseDirective implements OnChanges, OnInit, OnDestroy {
constructor(_idService: FudisIdService);
/**
* Binding host CSS class to component wrapper
*/
protected _classes: string;
/**
* Text content of the button
*/
label: string;
/**
* Button size: 'small' | 'medium' ('extra-small' not available for Button, only IconButton)
*/
size: Exclude<FudisButtonSize, 'extra-small'>;
/**
* Button type: 'submit' | 'button'
*/
type: FudisButtonType;
ngOnChanges(changes: FudisComponentChanges<ButtonComponent>): void;
/**
* Button click event
*/
buttonClick(event: Event): void;
/**
* Handler blurring out
*/
protected _handleButtonBlur(event: FocusEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "fudis-button", never, { "label": { "alias": "label"; "required": true; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Breakpoint keys.
*
* Used in responsive spacing and grid settings, and calculating breakpoint boundaries
*/
type FudisBreakpointKey = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
declare const fudisSpacingArray: readonly ["none", "xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
type FudisSpacing = (typeof fudisSpacingArray)[number];
/**
* Responsive settings for different breakpoints for spacing
*/
type FudisSpacingResponsive = {
[key in FudisBreakpointKey]?: FudisSpacing;
};
/**
* Default spacing value if none is given
*/
declare const defaultSpacingValue = "0";
/**
* Fudis spacing tokens
*/
type FudisSpacingValues = {
[key in FudisSpacing | 'default' | string]: string;
};
/**
* Fudis spacing tokens converted to rem values
*/
declare const fudisSpacingValues: FudisSpacingValues;
type FudisBreakpointsMinWidths = {
[key in FudisBreakpointKey]: FudisBreakpointBoundary;
};
/**
* Utility object used with breakpointsMinWidthToObserve and BreakpointObserver
*/
declare const fudisBreakpointsMinWidth: FudisBreakpointsMinWidths;
declare const breakpointsMinWidthToObserve: FudisBreakpointBoundary[];
/**
* All the allowed style attributes that can be given to Grid or Spacing
*/
type FudisBreakpointStyleProperty = 'margin-top' | 'margin-bottom' | 'margin-right' | 'margin-left' | 'grid-column' | 'grid-template-columns' | 'justify-self' | 'align-self';
/**
* Object used to apply styles for certain breakpoints
*/
interface FudisBreakpointStyleResponsive {
name: FudisBreakpointKey;
value: string;
breakpoint: string;
}
/**
* Responsive settings for different breakpoints
*/
type FudisBreakpointValueResponsive = {
[key in FudisBreakpointKey]?: FudisSpacing | string | number;
};
type FudisBreakpointBoundary = '(min-width: 100em)' | '(min-width: 75em)' | '(min-width: 62em)' | '(min-width: 48em)' | '(min-width: 36em)' | '(min-width: 0)';
/**
* To add Error to Error Summary
*/
type FudisErrorSummaryNewError = {
formId: string;
focusId: string;
id: string;
message: string;
};
/**
* To remove Error from Error Summary
*/
type FudisErrorSummaryRemoveError = {
formId: string;
focusId: string;
id: string;
};
/**
* Collection of all errors of each Form.
*/
type FudisErrorSummaryAllErrors = {
[formId: string]: FudisErrorSummaryFormErrors;
};
/**
* Collection of all errors of each Form as nested Signal
*/
type FudisErrorSummaryAllErrorsSignal = {
[formId: string]: WritableSignal<FudisErrorSummaryFormErrors>;
};
/**
* Collection of single Forms errors
*/
type FudisErrorSummaryFormErrors = {
[formFieldId: string]: {
[errorId: string]: string;
};
};
type FudisFormErrorSummaryUpdateStrategy = 'reloadOnly' | 'all' | 'onRemove';
declare const fudisInputSizeArray: readonly ["sm", "md", "lg", "full-width"];
type FudisInputSize = (typeof fudisInputSizeArray)[number];
type FudisInputType = 'email' | 'number' | 'password' | 'tel' | 'text' | 'url';
type FudisCheckboxOption<T extends object> = T & {
/**
* Unique id for single checkbox
*/
id?: string;
/**
* Visible label that is shown in the UI
*/
label?: string;
/**
* Is option selected
*/
value?: boolean | null | undefined;
/**
* To store additional data
*/
[key: string]: unknown;
};
type FudisCheckboxGroupOption<T extends object> = T & {
/**
* Unique id for single checkbox group option
*/
id?: string;
/**
* Name for the group of checkboxes
*/
groupName?: string;
/**
* If using FormGroup, name of the option
*/
controlName?: string;
/**
* Visible label that is shown in the UI
*/
label: string;
/**
* Is option selected
*/
value?: boolean | null | undefined;
/**
* To store additional data
*/
[key: string]: unknown;
};
type FudisRadioButtonOption<T extends object> = T & {
/**
* Generated id for single radio option
*/
id?: string;
/**
* Underlying value of the option
*/
value: string | boolean | null | unknown;
/**
* Value that is shown in the UI
*/
label: string;
/**
* To store additional data
*/
[key: string]: unknown;
};
type FudisSelectVariant = 'dropdown' | 'autocompleteDropdown' | 'autocompleteType';
type FudisSelectOption<T = string> = {
/**
* Underlying value of the option
*/
value: T;
/**
* Value that is shown in the UI
*/
label: string;
/**
* Secondary, optional label for the option
*/
subLabel?: string;
/**
* Is option disabled in the dropdown
*/
disabled?: boolean;
};
type FudisLocalizedTextGroupFormGroupOptions = {
controlName: 'fi';
label: 'FI';
} | {
controlName: 'sv';
label: 'SV';
} | {
controlName: 'en';
label: 'EN';
} | {
controlName: string;
label: string;
};
interface FudisLocalizedTextGroupDefaultFormGroup {
fi: FormControl<string | null>;
en: FormControl<string | null>;
sv: FormControl<string | null>;
}
type FudisLocalizedTextGroupFormGroup<T> = {
[K in keyof T]: FormControl<string | null>;
};
type FudisCheckboxGroupFormGroup<T> = {
[K in keyof T]: FormControl<boolean | null>;
};
type FudisCheckboxChangeEvent = {
checkbox: FudisCheckboxGroupOption<object> | FudisCheckboxOption<object>;
control: FormControl<boolean | null>;
};
type FudisCheckboxGroupChangeEvent = {
changedControlName: string;
formGroup: FormGroup;
};
type FudisRadioButtonChangeEvent = {
option: FudisRadioButtonOption<object>;
control: FormControl<unknown>;
};
declare const FudisDateInputFormat: {
dateInput: string;
monthYearLabel: string;
};
declare const FUDIS_DATE_FORMATS: MatDateFormats;
/**
* Default 'columns' value for Grid component
*/
declare const gridColumnDefault = "1fr";
declare const gridInputPropertyDefaults: FudisDefaultGridProperties;
/**
* Grid Columns property accepted input values
*/
type FudisGridColumns = string | number | FudisGridColumnsResponsive;
/**
* Grid widths
*/
declare const fudisGridWidthArray: readonly ["xxl", "xl", "lg", "md", "sm", "xs", "initial", "full-width"];
type FudisGridWidth = (typeof fudisGridWidthArray)[number];
/**
* Alignment of whole Grid inside its container. For items inside the Grid use FudisGridAlignItems.
*/
declare const fudisGridAlignArray: readonly ["start", "end", "center"];
type FudisGridAlign = (typeof fudisGridAlignArray)[number];
/**
* Alignment of Grid Items inside a Grid
*/
declare const fudisGridAlignItemsArray: readonly ["start", "center", "end", "stretch", "baseline"];
type FudisGridAlignItems = (typeof fudisGridAlignItemsArray)[number];
/**
* Spacing between columns and rows inside Grid
*/
type FudisGridGap = FudisSpacing | 'responsive';
/**
* Input object from application to provide responsive settings for different breakpoints for Grid
*/
type FudisGridColumnsResponsive = {
[key in FudisBreakpointKey]?: string | number;
};
/**
* Base attributes for managing Grid
*/
interface FudisGridBase {
align?: FudisGridAlign;
alignItemsY?: FudisGridAlignItems;
alignItemsX?: FudisGridAlignItems;
classes?: string;
columnGap?: FudisGridGap;
rowGap?: FudisGridGap;
width?: FudisGridWidth;
}
/**
* Attributes for managing Grid properties
*/
interface FudisGridProperties extends FudisGridBase {
columns?: FudisBreakpointValueResponsive | string | number;
}
/**
* Attributes for managing Grid defaults
*/
interface FudisDefaultGridProperties extends FudisGridBase {
columns?: FudisBreakpointValueResponsive;
}
interface FudisGridPropertyCollection {
appValues: FudisGridProperties;
defaultValues: FudisDefaultGridProperties;
serviceValues: FudisDefaultGridProperties;
}
/**
* Default value for 'columns' input of Grid Item
*/
declare const gridItemDefault = "auto";
/**
* Alignment of Grid Item inside Grid
*/
type FudisGridItemAlignment = 'start' | 'end' | 'center' | 'stretch';
/**
* Alignment of Grid Item inside Grid for varying breakpoints
*/
type FudisGridItemAlignResponsive = {
[K in FudisBreakpointKey]?: FudisGridItemAlignment;
};
/**
* Input value for width of Grid Item
*/
type FudisGridItemWidth = number | string | 'stretch' | 'auto';
/**
* Input object from application to provide responsive settings for different breakpoints for Grid
* Item
*/
type FudisGridItemColumnsResponsive = {
[K in FudisBreakpointKey]?: FudisGridItemWidth;
};
/**
* Grid input widths
*/
type FudisGridFormInputWidth = 'inputXs' | 'inputSm' | 'inputMd' | 'inputLg';
type FudisValidatorMessage = Observable<string> | string;
interface FudisValidationErrors extends ValidationErrors {
[key: string]: {
message: FudisValidatorMessage;
value?: unknown;
} | null;
}
interface FudisValidatorFn extends ValidatorFn {
(control: AbstractControl): FudisValidationErrors | null;
}
interface FudisValidatorsDatepickerSettings {
value: Date;
message: FudisValidatorMessage;
}
interface FudisGroupValidatorsMinMaxSettings {
value: number;
message: Observable<string> | string;
}
/**
* Represents a single boolean form control.
*
* Use this component when user need to toggle an option on or off.
*/
declare class CheckboxComponent implements OnInit, OnChanges {
private _idService;
protected _translationService: FudisTranslationService;
constructor(_idService: FudisIdService, _translationService: FudisTranslationService);
/**
* FormControl for the input
*/
control: FormControl;
/**
* Checkbox id. By default generated
*/
id: string;
/**
* Label for the Checkbox
*/
label: string;
/**
* AriaLabelledBy attribute to be used when visible label is not provided
*/
ariaLabelledBy: string;
/**
* AriaDescribedBy attribute for linking custom error messages to Checkbox input
*/
ariaDescribedBy: string;
/**
* Emits Checkbox change
*/
handleChange: EventEmitter<FudisCheckboxChangeEvent>;
/**
* Trigger update when control validator is changed
*/
protected _updateValueAndValidityTrigger: Subject<void>;
/**
* Set requiredText based on this boolean value
*/
protected _required: BehaviorSubject<boolean>;
protected _destroyRef: DestroyRef;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
/**
* If Checkbox has focus
*/
protected _focused: boolean;
/**
* Signals reflecting the current state of the form control, updated on every control event.
*/
protected _touched: WritableSignal<boolean>;
protected _invalid: WritableSignal<boolean>;
protected _disabled: WritableSignal<boolean>;
protected _value: WritableSignal<boolean | null>;
/**
* Copy FormControl states into local signals so the template tracks them reactively without
* requiring markForCheck().
*/
private _syncControlState;
/**
* When Checkbox is focused
*/
protected _onFocus(): void;
/**
* When Checkbox is blurred
*/
protected _onBlur(): void;
/**
* Manual toggle for checkbox checked state
*/
protected _onChange(event: Event): void;
ngOnInit(): void;
/**
* Sync local signals with FormControl states and add value and validity check when control value
* changes.
*/
ngOnChanges(changes: FudisComponentChanges<CheckboxComponent>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "fudis-checkbox", never, { "control": { "alias": "control"; "required": true; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; }, { "handleChange": "handleChange"; }, never, ["*"], true, never>;
}
declare class FormCommonApiDirective extends PopoverApiDirective implements AfterViewInit {
protected _idService: FudisIdService;
protected _focusService: FudisFocusService;
constructor(_idService: FudisIdService, _focusService: FudisFocusService);
/**
* Template reference for input. Used in e. g. initialFocus
*/
protected _inputRef: ElementRef<HTMLInputElement>;
/**
* Label for the form component.
*/
label: string;
/**
* Provide additional information for screen reader users by extending text content of the label.
* Used in e. g. Localized Text Group for providing info about currently selected language.
*/
ariaLabel: string;
/**
* Input id. If not provided when component is initialized, generated by Id Service
*/
id: string;
/**
* If component is a child of Form component, Form's Error Summary is visible, this component's
* control has errors and when this component is loaded for the first time, it will by default
* call Error Summary to reload itself again and mark control as touched. This is because if
* component is lazy loaded to the DOM after the initial reload errors call was made, errors of
* this component might not appear on the list. To disable this feature, set this to false.
*/
errorSummaryReloadOnInit: boolean;
/**
* Help text, aligned underneath the input.
*/
helpText: string | undefined;
/**
* Set browser focus to the input on the first load.
*/
initialFocus: boolean;
/**
* Preferred way to disable input is to set formControl as disabled. This Input property should be
* used in edge cases only.
*/
disabled: boolean;
/**
* Disable guidance for this component instance. No help text or errors will be visible.
*/
disableGuidance: boolean;
/**
* To listen for component's blur event.
*/
handleBlur: EventEmitter<FocusEvent>;
/**
* To listen for component's focus event.
*/
handleFocus: EventEmitter<FocusEvent>;
/**
* To listen for input's key up event.
*/
handleKeyUp: EventEmitter<KeyboardEvent>;
/**
* Output emitted when component has finished AfterViewInit lifecycle hook
*/
handleViewInit: EventEmitter<void>;
/**
* Set requiredText based on this boolean value
*/
protected _required: BehaviorSubject<boolean>;
protected _destroyRef: DestroyRef;
/**
* Trigger update when control validator is changed
*/
protected _updateValueAndValidityTrigger: Subject<void>;
/**
* Used prevent checks in HTML DOM before content has been loaded
*/
protected _afterViewInitDone: i0.WritableSignal<boolean>;
/**
* Generate id for parent component
*/
protected _setParentComponentId(parentType: FudisIdParent): void;
/**
* Add given id to Id Service or generate unique id
*/
protected _setComponentId(componentType: FudisIdComponent): void;
protected _afterViewInitCommon(): void;
ngAfterViewInit(): void;
/**
* Set focus to the input element
*/
focusToInput(): void;
/**
* Executed when component's input is focused or when child input, e.g. Checkbox is focused
*/
onFocus(event: FocusEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<FormCommonApiDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FormCommonApiDirective, "[fudisFormCommonApi]", never, { "label": { "alias": "label"; "required": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "id": { "alias": "id"; "required": false; }; "errorSummaryReloadOnInit": { "alias": "errorSummaryReloadOnInit"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "initialFocus": { "alias": "initialFocus"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableGuidance": { "alias": "disableGuidance"; "required": false; }; }, { "handleBlur": "handleBlur"; "handleFocus": "handleFocus"; "handleKeyUp": "handleKeyUp"; "handleViewInit": "handleViewInit"; }, never, never, true, never>;
}
declare class GroupComponentBaseDirective extends FormCommonApiDirective {
constructor(_idService: FudisIdService, _focusService: FudisFocusService);
/**
* Angular FormGroup for the component
*/
formGroup: FormGroup;
static ɵfac: i0.ɵɵFactoryDeclaration<GroupComponentBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GroupComponentBaseDirective, "[fudisGroupComponentBase]", never, { "formGroup": { "alias": "formGroup"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Groups multiple related checkbox options.
*
* Use this component when user can select value(s) from a set. Each `fudis-checkbox-group-option`
* child must have a `[controlName]` matching a key in the FormGroup. Use `FudisGroupValidators` for
* group-level validation (e.g., `oneRequired`, `min`, `max`).
*
* @example
* ```html
* <fudis-checkbox-group [label]="'Colors'" [formGroup]="colorsGroup">
* <fudis-checkbox-group-option [controlName]="'red'" [label]="'Red'"></fudis-checkbox-group-option>
* <fudis-checkbox-group-option [controlName]="'blue'" [label]="'Blue'"></fudis-checkbox-group-option>
* </fudis-checkbox-group>
* ```;
*/
declare class CheckboxGroupComponent<T extends FudisCheckboxGroupFormGroup<T>> extends GroupComponentBaseDirective implements OnInit, AfterViewInit {
private _document;
constructor(_document: Document, _idService: FudisIdService, _focusService: FudisFocusService);
private _guidance;
/**
* FormGroup for Checkbox Group. Provide also `controlName` for each Checkbox child.
*/
formGroup: FormGroup<T>;
/**
* Width of Checkbox Group: 'sm' | 'md' | 'lg' | 'full-width'
*/
size: FudisInputSize;
/**
* Emit changed control's name and whole FormGroup when one Checkbox is clicked.
*/
handleChange: EventEmitter<FudisCheckboxGroupChangeEvent>;
/**
* To determine if focus has been moved out from the whole checkbox group, so possible errors will
* not show before that.
*/
private _groupBlurredOut;
readonly groupBlurredOut: Signal<boolean>;
/**
* Private signals for managing the touched, invalid, and disabled state of the form group.
*/
private _touchedState;
private _invalidState;
private _disabledState;
/**
* Publicly exposed readonly signals reflecting the current state of the form group. Used by child
* checkbox options to track group state reactively without requiring markForCheck().
*/
readonly touchedState: Signal<boolean>;
readonly invalidState: Signal<boolean>;
readonly disabledState: Signal<boolean>;
/**
* Computed signal that combines touched, invalid, and blurred-out state to determine if group
* errors should be shown.
*/
readonly groupErrors: Signal<boolean>;
/**
* Copy FormGroup states into local signals so child checkbox options can track group state
* reactively without requiring markForCheck().
*/
private _syncFormGroupState;
private _applyGroupMarkAsTouched;
ngOnInit(): void;
ngAfterViewInit(): void;
/**
* Return first checkbox child input when it is not disabled
*/
private _getFirstEnabledCheckbox;
/**
* Used to display possible error messages only when focus has moved out from all the group's
* checkboxes.
*/
setGroupBlurredOut(value: boolean): void;
/**
* When child Checkbox component is clicked, it calls this parent's function, which will then
* trigger Output emit.
*
* @param changedControlName Name of the clicked control
*/
triggerEmit(changedControlName: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxGroupComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxGroupComponent<any>, "fudis-checkbox-group", never, { "formGroup": { "alias": "formGroup"; "required": true; }; "size": { "alias": "size"; "required": false; }; }, { "handleChange": "handleChange"; }, never, ["fudis-checkbox-group-option", "fudis-error-message"], true, never>;
}
/**
* Single checkbox option for CheckboxGroupComponent.
*/
declare class CheckboxGroupOptionComponent implements OnInit {
private _idService;
protected _checkboxGroup: CheckboxGroupComponent<object>;
constructor(_idService: FudisIdService, _checkboxGroup: CheckboxGroupComponent<object>);
/**
* Control name for this checkbox from FormGroup. Used to link each Checkbox with their Checkbox
* Group parent's FormGroup.
*/
controlName: string;
/**
* Visible label of checkbox
*/
label: string;
/**
* Id for single checkbox. By default generated.
*/
id: string;
/**
* Emits changed Checkbox and its control.
*/
handleChange: EventEmitter<FudisCheckboxChangeEvent>;
/**
* FormControl for each Checkbox provided by parent FormGroup
*/
protected _control: FormControl<boolean | null>;
/**
* If checkbox has focus
*/
protected _focused: boolean;
ngOnInit(): void;
/**
* For toggling checkbox
*/
protected _onChange(): void;
/**
* When focusing out from checkbox, determine if next focus target is outside of the same checkbox
* group. If yes, then tell parent Checkbox Group, that focus has moved outside. --> If there are
* validation errors, those should become visible.
*/
protected _onBlur(event: FocusEvent): void;
/**
* When Checkbox is focused
*/
protected _onFocus(event: FocusEvent): void;
/**
* If control is disabled, prevent toggling it.
*/
protected _checkboxClick(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxGroupOptionComponent, [null, { host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxGroupOptionComponent, "fudis-checkbox-group-option", never, { "controlName": { "alias": "controlName"; "required": true; }; "label": { "alias": "label"; "required": true; }; "id": { "alias": "id"; "required": false; }; }, { "handleChange": "handleChange"; }, never, never, true, never>;
}
declare class ControlComponentBaseDirective extends FormCommonApiDirective {
constructor(_idService: FudisIdService, _focusService: FudisFocusService);
/**
* FormControl for the input
*/
control: FormControl;
static ɵfac: i0.ɵɵFactoryDeclaration<ControlComponentBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ControlComponentBaseDirective, "[fudisControlComponentBase]", never, { "control": { "alias": "control"; "required": true; }; }, {}, never, never, true, never>;
}
/**
* Allows selection of a start and end date.
*
* Use this component when user needs to define a time interval. Wrap two `fudis-datepicker`
* components — mark them with `fudisDateStart` and `fudisDateEnd` directives.
*
* @example
* ```html
* <fudis-date-range>
* <fudis-datepicker fudisDateStart [label]="'Start'" [control]="startDate"></fudis-datepicker>
* <fudis-datepicker fudisDateEnd [label]="'End'" [control]="endDate"></fudis-datepicker>
* </fudis-date-range>
* ```;
*/
declare class DateRangeComponent implements OnChanges {
private _idService;
constructor(_idService: FudisIdService);
/**
* Internal date comparison parse. By setting to false date comparison parsing is not executed and
* comparison errors are not shown.
*/
dateComparisonParse: boolean;
/**
* Show date comparison errors
*/
showDateComparisonErrors: BehaviorSubject<boolean>;
/**
* Date value for start date
*/
private _startDateValue;
/**
* Date value for end date
*/
private _endDateValue;
ngOnChanges(changes: FudisComponentChanges<DateRangeComponent>): void;
/**
* Check if start date is set to after end date
*/
checkDateCrossings(value?: Date | null, type?: 'start' | 'end'): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DateRangeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DateRangeComponent, "fudis-date-range", never, { "dateComparisonParse": { "alias": "dateComparisonParse"; "required": false; }; }, {}, never, ["[fudisDateStart]", "[fudisDateEnd]"], true, never>;
}
/**
* Allows selection of a single date.
*
* Use this component for date input with calendar assistance and validation.
*/
declare class DatepickerComponent extends ControlComponentBaseDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
protected _parentDateRange: DateRangeComponent | null;
private _adapter;
private _datePickerConfigService;
private _datepickerIntl;
private _translationService;
private _dialogService;
constructor(_parentDateRange: DateRangeComponent | null, _adapter: DateAdapter<Date>, _datePickerConfigService: FudisTranslationService, _datepickerIntl: MatDatepickerIntl, _translationService: FudisTranslationService, _dialogService: FudisDialogService, _idService: FudisIdService, _focusService: FudisFocusService);
/**
* Template reference for MatDatepicker component
*/
protected _picker: MatDatepicker<Date>;
/**
* FormControl for the input
*/
control: FormControl<Date | null>;
/**
* Datepicker size
*/
size: FudisInputSize;
/**
* Show internal date parsing validator message. By setting to false date parsing is not executed.
*/
dateParse: boolean;
/**
* Function that determines which dates are selectable in the calendar. Used the same way as
* Angular Material's `matDatepickerFilter`. Return `true` to allow the date, or `false` to
* disable it.
*/
dateFilter: (d: Date | null | undefined) => boolean;
/**
* Type of the Datepicker in Date Range
*/
dateRangeType: 'start' | 'end' | null;
/**
* Allowed range for minimun date
*/
protected _minDate: Date | null | undefined;
/**
* Allowed range for maximum date
*/
protected _maxDate: Date | null | undefined;
/**
* Fudis translation for invalid start date in Date Range
*/
protected _startDateInvalidTranslation: string;
/**
* Fudis translation for invalid end date in Date Range
*/
protected _endDateInvalidTranslation: string;
/**
* Fudis translation for date parse error message
*/
protected _dateParseError: BehaviorSubject<string>;
/**
* Fudis translation for Datepicker placeholder text
*/
protected _placeholderString: BehaviorSubject<string>;
/**
* Signals reflecting the current state of the form control, updated on every control event.
*/
protected _touched: WritableSignal<boolean>;
protected _invalid: WritableSignal<boolean>;
protected _disabled: WritableSignal<boolean>;
private _syncControlState;
/**
* Instance of Datepicker Parse validator
*/
private _parseValidatorInstance;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
private _dateCrossingSubscription;
/**
* Validator reads HTML input field and checks if it can be converted to valid Date object
*/
private _datepickerParseValidatorFn;
private _addParseValidator;
private _removeParseValidator;
private _isCalendarOpen;
/**
* Handle calendar close
*/
protected _handleCalendarClose(): void;
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: FudisComponentChanges<DatepickerComponent>): void;
ngOnDestroy(): void;
/**
* When pressing keyboard Esc, close datepicker and set flag to indicate it was just closed with
* Escape key
*
* @param event
*/
protected _handleEscapePress(event: KeyboardEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComponent, [{ optional: true; host: true; }, null, null, null, null, null, null, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "fudis-datepicker", never, { "control": { "alias": "control"; "required": true; }; "size": { "alias": "size"; "required": false; }; "dateParse": { "alias": "dateParse"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; }, {}, never, ["fudis-error-message"], true, never>;
}
/**
* Marks an input as the start date of a date range.
*
* Use this directive to associate the control with a date range and enable correct validation
* behavior.
*/
declare class DateStartDirective {
private _datepicker;
constructor(_datepicker: DatepickerComponent);
static ɵfac: i0.ɵɵFactoryDeclaration<DateStartDirective, [{ host: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DateStartDirective, "[fudisDateStart]", never, {}, {}, never, never, true, never>;
}
/**
* Marks an input as the end date of a date range.
*
* Use this directive to associate the control with a date range and enable correct validation
* behavior.
*/
declare class DateEndDirective {
private _datepicker;
constructor(_datepicker: DatepickerComponent);
static ɵfac: i0.ɵɵFactoryDeclaration<DateEndDirective, [{ host: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DateEndDirective, "[fudisDateEnd]", never, {}, {}, never, never, true, never>;
}
declare class GridApiDirective {
/**
* Alignment of Grid component inside its parent: 'start' | 'end' | 'center'
*/
align: FudisGridAlign;
/**
* Horizontal alignment of Grid Items in a row: 'start' | 'center' | 'end' | 'stretch' |
* 'baseline'
*/
alignItemsX: FudisGridAlignItems;
/**
* Vertical alignment of Grid Items in a row: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
*/
alignItemsY: FudisGridAlignItems;
/**
* Custom CSS classes for Grid element.
*/
classes: string;
/**
* Gutter gap between columns: 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' |
* 'responsive'
*/
columnGap: FudisGridGap;
/**
* Setting of columns for the Grid. Input will be converted to native CSS grid
* grid-template-columns values.
*/
columns: FudisGridColumns;
/**
* To make Grid ignore default values defined by application and FudisGridService
*/
serviceDefaults: boolean;
/**
* Grid row gap: 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'responsive'
*/
rowGap: FudisGridGap;
/**
* Maximum width of Grid: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'initial' | 'full-width'.
* When viewport gets narrower, grid automatically adjusts to lower sizes, except in full-width
* mode.
*/
width: FudisGridWidth;
static ɵfac: i0.ɵɵFactoryDeclaration<GridApiDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GridApiDirective, "[fudisGridApi]", never, { "align": { "alias": "align"; "required": false; }; "alignItemsX": { "alias": "alignItemsX"; "required": false; }; "alignItemsY": { "alias": "alignItemsY"; "required": false; }; "classes": { "alias": "classes"; "required": false; }; "columnGap": { "alias": "columnGap"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "serviceDefaults": { "alias": "serviceDefaults"; "required": false; }; "rowGap": { "alias": "rowGap"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Displays a collection of term-details pairs of related information.
*
* Use this component to present structured information with proper semantic relationships.
*/
declare class DescriptionListComponent extends GridApiDirective implements OnInit, OnChanges {
private _idService;
constructor(_idService: FudisIdService);
/**
* Disable Grid behavior for Description List
*/
disableGrid: boolean;
/**
* Variant for Description List structure and layout: 'regular' | 'compact'
*/
variant: FudisDescriptionListVariant;
/**
* Grid row gap. Using Fudis spacing token values of xxs to xxl and none.
*/
rowGap: FudisGridGap;
/**
* HTML element to render. If your Description List has only one item, use 'p', otherwise 'dl'.
*/
tag: 'dl' | 'p';
/**
* Id generated with Id Service
*/
id: string;
/**
* CSS class list
*/
protected _classList: BehaviorSubject<string>;
/**
* Signal for variant
*/
private _dlVariant;
/**
* Signal for listening disableGrid Input, used in DL Item.
*/
private _disabledGrid;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<DescriptionListComponent>): void;
/**
* Read only signal for variant
*/
getVariant(): Signal<FudisDescriptionListVariant>;
/**
* Read only signal for disabledGrid value
*/
getDisabledGridStatus(): Signal<boolean>;
/**
* Define correct CSS classes
*/
private _setClasses;
static ɵfac: i0.ɵɵFactoryDeclaration<DescriptionListComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DescriptionListComponent, "fudis-dl", never, { "disableGrid": { "alias": "disableGrid"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "rowGap": { "alias": "rowGap"; "required": false; }; "tag": { "alias": "tag"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Represents a single term-detail pair.
*
* Use this component to group related description list terms and details together.
*/
declare class DescriptionListItemComponent {
private _element;
private _idService;
protected _parentDl: DescriptionListComponent;
constructor(_element: ElementRef, _idService: FudisIdService, _parentDl: DescriptionListComponent);
/**
* Main CSS class
*/
protected _mainCssClass: BehaviorSubject<string>;
/**
* Storing list of available languages in Details elements
*/
private _detailsLanguageOptions;
/**
* Selected language to pass to child components
*/
private _selectedLanguage;
/**
* Current parent variant
*/
private _variant;
/**
* List of Description List Item Detail children ids
*/
private _detailChildrenIds;
/**
* Last Description List Item Detail id passed to children
*/
private _lastChildId;
/**
* Returns a last child id of selected language.
*/
private _findLastLanguageChildId;
/**
* Returns a compact list last child id for Description List Item Detail component.
*/
private _updateChildren;
/**
* DL Item has combined styles for both regular and compact versions but some styles only apply to
* regular version if parent's disableGrid is true.
*/
private _setClasses;
/**
* Id generated with Id Service
*/
id: string;
/**
* Called from child Details, if it has a language property
*/
addDetailsLanguage(lang: FudisLanguageAbbr, text: string | null, id: string): void;
/**
* Called from child Details, if its language property is removed (or updated)
*/
removeDetailsLanguage(lang: FudisLanguageAbbr, id: string): void;
getDetailsLanguageOptions(): Signal<FudisDescriptionListItemDetailLanguageContent | null>;
setSelectedLanguage(lang: FudisLanguageAbbr | null): void;
getSelectedLanguage(): Signal<FudisLanguageAbbr | null>;
getLastChildId(): Signal<string | null>;
static ɵfac: i0.ɵɵFactoryDeclaration<DescriptionListItemComponent, [null, null, { host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DescriptionListItemComponent, "fudis-dl-item", never, {}, {}, never, ["*"], true, never>;
}
/**
* Displays the details (value) of a term (key) in a DescriptionListItemComponent.
*/
declare class DescriptionListItemDetailsComponent implements OnChanges, OnDestroy {
private _elementRef;
private _idService;
protected _translationService: FudisTranslationService;
protected _parentDlItem: DescriptionListItemComponent;
protected _parentDl: DescriptionListComponent;
constructor(_elementRef: ElementRef, _idService: FudisIdService, _translationService: FudisTranslationService, _parentDlItem: DescriptionListItemComponent, _parentDl: DescriptionListComponent);
/**
* Binding host CSS class to component wrapper
*/
hostClass: string;
/**
* Details element language, possible values 'fi', 'sv' and 'en'.
*/
lang: FudisLanguageAbbr;
/**
* Visible text content for Details
*/
contentText: string;
/**
* Sub heading in between Term and Details elements
*/
subHeading: string | undefined;
/**
* Aria-label for classified/hidden Details content
*/
ariaLabel: string | null | undefined;
/**
* Show empty state content
*/
emptyState: boolean;
/**
* Text displayed in Details element where emptyState boolean is true. If not provided, Fudis will
* display its default empty state text
*/
emptyStateContentText: string;
/**
* Id generated with Id Service
*/
protected _id: string;
/**
* Selected language to show respective Details content
*/
protected _langSelected: BehaviorSubject<boolean>;
/**
* If current Detail element is a last child of it's parent
*/
protected _lastChild: BehaviorSubject<boolean>;
/**
* Main CSS class
*/
protected _mainCssClass: BehaviorSubject<string>;
/**
* If component has language and has sent info to parent
*/
private _detailsSent;
/**
* Parse Details text content and set parent Description List Item languages
*/
private _sendDetailsLanguageToParent;
private _removeDetailsFromParent;
ngOnChanges(changes: FudisComponentChanges<DescriptionListItemDetailsComponent>): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DescriptionListItemDetailsComponent, [null, null, null, { host: true; }, { host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DescriptionListItemDetailsComponent, "fudis-dd", never, { "lang": { "alias": "lang"; "required": false; }; "contentText": { "alias": "contentText"; "required": false; }; "subHeading": { "alias": "subHeading"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "emptyState": { "alias": "emptyState"; "required": false; }; "emptyStateContentText": { "alias": "emptyStateContentText"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Displays the term (key) in a DescriptionListItemComponent.
*/
declare class DescriptionListItemTermComponent extends PopoverApiDirective {
private _translationService;
private _idService;
protected _parentDlItem: DescriptionListItemComponent;
protected _parentDl: DescriptionListComponent;
constructor(_translationService: FudisTranslationService, _idService: FudisIdService, _parentDlItem: DescriptionListItemComponent, _parentDl: DescriptionListComponent);
/**
* Renders Fudis Language Badge Group Component for displaying Description List Item Detail values
* in given languages
*/
languages: boolean;
/**
* Visible text content for term
*/
contentText: string;
/**
* Available translated languages of sibling dt elements fetched from the parent dl-item element
*/
protected _parentLanguageTranslations: i0.WritableSignal<FudisLanguageAbbr[]>;
/**
* Main CSS class
*/
protected _mainCssClass: BehaviorSubject<string>;
/**
* Id generated with Id Service
*/
protected _id: string;
/**
* When Language Badge is clicked, update clicked language to parent item
*
* @param lang FudisLanguageAbbr
*/
protected _setSelectedLanguage(lang: FudisLanguageAbbr | null): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DescriptionListItemTermComponent, [null, null, { host: true; }, { host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DescriptionListItemTermComponent, "fudis-dt", never, { "languages": { "alias": "languages"; "required": false; }; "contentText": { "alias": "contentText"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Identifies the title of a dialog.
*
* Use this directive to provide automatically focused heading when opening a dialog.
*/
declare class DialogTitleDirective extends MatDialogTitle implements OnInit {
private _headingElementRef;
private _renderer;
constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog, _headingElementRef: ElementRef, _renderer: Renderer2);
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DialogTitleDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DialogTitleDirective, "[fudisDialogTitle]", never, {}, {}, never, never, true, never>;
}
/**
* Identifies the main content area of a dialog.
*/
declare class DialogContentDirective extends MatDialogContent implements OnChanges {
private _elRef;
private _renderer;
constructor(_elRef: ElementRef, _renderer: Renderer2);
/**
* Binding fudis-dialog-content CSS class to directive
*/
hostClass: string;
/**
* Dialog contentFocus sets a visual focus to dialog content. Preferred to be used with read-only
* content.
*/
contentFocus: boolean;
ngOnChanges(changes: FudisComponentChanges<DialogContentDirective>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DialogContentDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DialogContentDirective, "fudis-dialog-content", never, { "contentFocus": { "alias": "contentFocus"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Identifies the actions region of a dialog.
*
* Use this directive to set action buttons in a fixed position at the bottom of a dialog.
*/
declare class DialogActionsDirective extends MatDialogActions {
align: 'start' | 'center' | 'end';
static ɵfac: i0.ɵɵFactoryDeclaration<DialogActionsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DialogActionsDirective, "fudis-dialog-actions", never, {}, {}, never, never, true, never>;
}
/**
* Marks and element that closes a dialog.
*
* Use this directive to provide a button which solely dismisses a dialog.
*/
declare class DialogCloseDirective extends MatDialogClose {
private _hostButtonElement;
constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
_onButtonClick(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DialogCloseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DialogCloseDirective, "[fudisDialogClose]", never, {}, {}, never, never, true, never>;
}
/**
* Displays content in a modal overlay.
*
* Must be opened via `FudisDialogService.open(Component)` or `FudisDialogService.open(TemplateRef)`
* — not used as inline HTML. Use content directive `fudisDialogTitle` as inline attribute for the
* dialog heading. Use `<fudis-dialog-content>` and `<fudis-dialog-actions>` directives as HTML
* elements inside the dialog template. Add `fudisDialogClose` directive on a button to close it.
*
* Use this component for focused interactions that require user attention or confirmation before
* continuing.
*/
declare class DialogComponent implements OnDestroy, OnInit, OnChanges, AfterViewInit {
protected _translateService: FudisTranslationService;
private _dialogService;
private _idService;
private _elementRef;
constructor(_translateService: FudisTranslationService, _dialogService: FudisDialogService, _idService: FudisIdService, _elementRef: ElementRef);
/**
* Dialog size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
*/
size: FudisDialogSize;
/**
* Dialog's close button has to have absolute positioning when used inside fudis-form
*/
closeButtonPositionAbsolute: WritableSignal<boolean>;
/**
* Id generated from FudisIdService
*/
protected _id: string;
/**
* To track "order number" of this dialog, if multiple dialogs are open
*/
private _orderNumber;
/**
* Does Dialog have scrollable content
*/
protected _dialogScrollable: WritableSignal<boolean | null>;
/**
* To observe size changes of this Label and trigger height calculation as needed
*/
private _resizeObserver;
ngOnChanges(changes: FudisComponentChanges<DialogComponent>): void;
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* From: https://phuoc.ng/collection/html-dom/check-if-an-element-is-scrollable/
*/
private _isDialogScrollable;
protected _handleEscapePress(event: KeyboardEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "fudis-dialog", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
}
declare class DropdownBaseDirective {
/**
* Template reference for the dropdown div element
*/
dropdownElement: ElementRef<HTMLElement>;
/**
* Binding host CSS class to component wrapper
*/
hostClass: string;
/**
* Output emitter for focus event
*/
handleFocus: EventEmitter<FocusEvent>;
/**
* Output emitter for blur event
*/
handleBlur: EventEmitter<FocusEvent>;
/**
* Id for Dropdown Menu. Generated with FudisIdService
*/
id: string;
/**
* When dropdown is focused, happens e. g. with Firefox
*/
protected _dropdownFocus(event: FocusEvent): void;
/**
* When dropdown is blurred, happens e. g. with Firefox
*/
protected _dropdownBlur(event: FocusEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownBaseDirective, "[fudisDropdownBase]", never, {}, { "handleFocus": "handleFocus"; "handleBlur": "handleBlur"; }, never, never, true, never>;
}
declare class DropdownItemBaseDirective {
protected _document: Document;
constructor(_document: Document);
/**
* Option for closing or leaving dropdown open after clicking an item. Closes by default.
*/
close: boolean;
/**
* Checked state for multiselect checkbox
*/
checked: boolean;
/**
* Ouput for click event
*/
handleClick: EventEmitter<Event>;
/**
* Output for checked state in multiselect
*/
handleChecked: EventEmitter<boolean>;
/**
* Output for blur event in select option
*/
handleBlur: EventEmitter<FocusEvent>;
/**
* Id generated with FudisIdService
*/
protected _id: string;
/**
* Trigger focus based on keyboard interaction. Used to focus on next / previous dropdown item
* element
*/
protected _baseHandleKeyDown(event: KeyboardEvent, element: ElementRef, cssClassSelector: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownItemBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownItemBaseDirective, "[fudisDropdownItemBase]", never, { "close": { "alias": "close"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "handleClick": "handleClick"; "handleChecked": "handleChecked"; "handleBlur": "handleBlur"; }, never, never, true, never>;
}
/**
* Dropdown event service shared between Icon Button and DropdownMenu components.
*
* Dropdown menu element's width calculation must be triggered from host Icon Button click, and it
* should ensure that the dropdown is always fully visible.
*/
declare class DropdownEventService {
private _triggerCalculationSubject;
triggerCalculation: rxjs.Observable<void>;
triggerWidthCalculation(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownEventService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<DropdownEventService>;
}
/**
* Button represented primarily by an icon.
*
* Use this component for compact actions where icon and its aria-label clearly communicate the
* intent.
*/
declare class IconButtonComponent extends ButtonBaseDirective implements OnChanges {
private _dropdownEventService;
constructor(_idService: FudisIdService, _dropdownEventService: DropdownEventService);
/**
* Binding host CSS class to component wrapper
*/
protected _classes: string;
/**
* Required aria-label for describing context
*/
ariaLabel: string;
/**
* Icon for button
*/
icon: FudisIcon | undefined;
/**
* Assign button as menu button with dropdown
*/
asMenuButton: boolean;
/**
* Id of child Dropdown Menu. Passed from child to parent Icon Button.
*/
dropdownMenuId: string;
/**
* Left icon margin for small and medium sizes
*/
protected _iconMargin: BehaviorSubject<string>;
/**
* Toggle dropdown menu button
*/
dropdownOpen: BehaviorSubject<boolean>;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<IconButtonComponent>): void;
/**
* Icon Button click event
*/
buttonClick(event: Event): void;
/**
* Toggling when Icon Button is used as menu button
*/
toggleMenu(): void;
/**
* Close dropdown when Icon Button is used as menu button
*/
closeMenu(focusToButton?: boolean): void;
/**
* Handler for blurring out and closing menu button's dropdown
*/
protected _handleButtonBlur(event: FocusEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "fudis-icon-button", never, { "ariaLabel": { "alias": "ariaLabel"; "required": true; }; "icon": { "alias": "icon"; "required": true; }; "asMenuButton": { "alias": "asMenuButton"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Displays a list of actions in a collapsible menu. Must be a direct child of `fudis-icon-button`
* with `[asMenuButton]="true"`.
*
* Use this component to group secondary or contextual actions.
*
* @example
* ```html
* <fudis-icon-button [ariaLabel]="'Actions'" [size]="'small'" [variant]="'secondary'" [icon]="'three-dots'" [asMenuButton]="true">
* <fudis-dropdown-menu>
* <fudis-dropdown-menu-item [label]="'Edit'" (handleClick)="edit($event)"></fudis-dropdown-menu-item>
* </fudis-dropdown-menu>
* </fudis-icon-button>
* ```;
*/
declare class DropdownMenuComponent extends DropdownBaseDirective implements OnDestroy {
private _idService;
private _dropdownEventService;
private _dialogService;
private _document;
private _parentButton;
constructor(_idService: FudisIdService, _dropdownEventService: DropdownEventService, _dialogService: FudisDialogService, _document: Document, _parentButton: IconButtonComponent);
/**
* Template reference for the Dropdown Menu wrapper element
*/
private _dropdownMenuElement;
/**
* Align Dropdown Menu opening position: 'left' | 'center' | 'right'
*/
align: FudisDropdownMenuAlign;
/**
* Dropdown Menu size: 'sm' | 'md' | 'lg'
*/
size: FudisInputSize;
/**
* Determine dropdown max-width
*/
protected _maxWidth: WritableSignal<string>;
/**
* Currently focused option
*/
private _focusedOption;
/**
* Subscription for dropdown width calculation event
*/
private _subscription;
/**
* Add or remove currently focused option. Called from DropdownMenuItem.
*/
setFocusedOption(id: string, type: 'add' | 'remove', event?: FocusEvent): void;
/**
* Check if focus is inside the Dropdown Menu component
*
* @param event Focus event
* @returns Boolean
*/
private _componentFocused;
closeDropdownMenu(): void;
/**
* Host Listener for dropdown's width, it needs to be wider than its Button parent
*/
protected _getMaxWidth(): void;
/**
* Host Listener for keydown events, especially Arrow Down and Escape from Dropdown Menu
*/
protected _handleDropdownMenuKeyDown(event: KeyboardEvent): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownMenuComponent, [null, null, null, null, { host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownMenuComponent, "fudis-dropdown-menu", never, { "align": { "alias": "align"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["fudis-dropdown-menu-item", "fudis-dropdown-menu-group"], true, never>;
}
/**
* Groups related dropdown items.
*
* Use this component to organize related menu options to improve readability.
*/
declare class DropdownMenuGroupComponent {
private _idService;
private _parentDropdownMenu;
constructor(_idService: FudisIdService, _parentDropdownMenu: DropdownMenuComponent);
/**
* Visible label for this group of items
*/
label: string;
/**
* Id for this Dropdown Menu Group. Generated with FudisIdService and used for accessibility
* attributes.
*/
id: string;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownMenuGroupComponent, [null, { host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownMenuGroupComponent, "fudis-dropdown-menu-group", never, { "label": { "alias": "label"; "required": true; }; }, {}, never, ["*"], true, never>;
}
/**
* Single menu item for DropdownMenuComponent.
*/
declare class DropdownMenuItemComponent extends DropdownItemBaseDirective {
private _idService;
private _translationService;
protected _parentDropdownMenu: DropdownMenuComponent;
protected _parentGroup: DropdownMenuGroupComponent;
constructor(_idService: FudisIdService, _translationService: FudisTranslationService, _document: Document, _parentDropdownMenu: DropdownMenuComponent, _parentGroup: DropdownMenuGroupComponent);
/**
* Template reference for dropdown item button element
*/
dropdownItem: ElementRef<HTMLButtonElement>;
/**
* Visible label for Menu Item
*/
label: string;
/**
* If Menu Item is disabled
*/
disabled: boolean;
/**
* Internal translated text for disabled dropdown menu item
*/
protected _translationItemDisabledText: BehaviorSubject<string>;
/**
* Handle key down event
*/
protected _handleKeyDown(event: KeyboardEvent): void;
/**
* Handle blur event
*/
protected _handleMenuItemBlur(event: FocusEvent): void;
/**
* Handle focus
*/
protected _handleMenuItemFocus(): void;
/**
* Click handler for Dropdown Menu Item click
*/
protected _clickOption(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownMenuItemComponent, [null, null, null, { host: true; }, { optional: true; host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownMenuItemComponent, "fudis-dropdown-menu-item", never, { "label": { "alias": "label"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
}
type FudisFormErrorSummarySection = {
id: string;
formId: string;
title: string;
};
type FudisFormErrorSummaryFormChild = {
[childId: string]: string;
};
type FudisFormErrorSummaryStructure = {
[formId: string]: {
sections: FudisFormErrorSummaryFormChild;
fieldsets: FudisFormErrorSummaryFormChild;
};
};
/**
* Internal Error Summary tools not exposed to public
*/
declare class FudisInternalErrorSummaryService implements OnDestroy {
private _translationService;
constructor(_translationService: FudisTranslationService);
/**
* Collection of all registered errors categorised by parent Form id. Used as "temporary" storage
* and value will be passed to Observable when reloadFormErrors is called.
*/
private _errorsStore;
/**
* Collection of all registered errors categorised by parent Form id. This Observable is updated
* with new value only when reloadFormErrors is called.
*/
private _errorsObservable;
private _errorsSignal;
/**
* Current Form ids with their Error Summary Visibility status
*/
private _errorSummaryVisibilityStatus;
/**
* Collection of child Sections, Expandables and Fieldsets of each Form Component
*/
private _formStructure;
/**
* Info to Error Summary Component if it should move user focus to updated list or not
*/
private _focusToFormOnReload;
/**
* Update strategy of Error Summary
*/
private _updateStrategy;
/**
* Used prevent unnecessary frequent Signal updates
*/
private _reloadGuard;
/**
* Signal for counting submit attempts
*/
private _submitAttempt;
/**
* Used in Components to listen to Reload updates
*/
get errorsObservable(): BehaviorSubject<FudisErrorSummaryAllErrors>;
/**
* For unit testing purposes
*/
get errors(): FudisErrorSummaryAllErrors;
/**
* For unit testing purposes
*/
get errorsSignal(): FudisErrorSummaryAllErrorsSignal;
/**
* Used for firing focus to error summary when submitting
*/
get submitAttempt(): WritableSignal<number>;
/**
* Observable to store each Form's Error Summary's visibility status. Form component will listen
* to these changes if visiblity changes elsewhere than the Input() prop
*/
get errorSummaryVisibilityStatus(): {
[formId: string]: WritableSignal<boolean>;
};
get updateStrategy(): FudisFormErrorSummaryUpdateStrategy;
set updateStrategy(value: FudisFormErrorSummaryUpdateStrategy);
get focusToFormOnReload(): string | null;
get formStructure(): FudisFormErrorSummaryStructure;
set focusToFormOnReload(value: string | null);
/**
* Hide or show Error Summary of specific Form Component
*
* @param formId Form to target
* @param visible Hide or show Error Summary
*/
setErrorSummaryVisibility(formId: string, visible: boolean): void;
/**
* Adds a new error to the list of current errors If new error item has a matching id on the list,
* new error is tied to that error list object
*
* @param newError Form error summary item
*/
addError(newError: FudisErrorSummaryNewError): void;
/**
* Removes error object from the current errors list if it contains matching error id
*
* @param error Error object
*/
removeError(errorToRemove: FudisErrorSummaryRemoveError): void;
/**
* Updates the visible and dynamic lists of all form and errors with the current error list
*/
reloadAllErrors(): void;
/**
* @param formId
* @param focus
*/
reloadFormErrors(formId: string, focus?: boolean): void;
/**
* @param element HTMLElement to check, if it has Form Component as ancestor
* @returns If ancestor found, returns id of that Form and visibility status of Form's Error
* Summary
*/
getFormAncestorId(element: HTMLElement): Promise<null | string>;
/**
* When new Form Component is initialized, it will register itself for child components and error
* messages related to it
*
* @param formId
*/
registerNewForm(formId: string, errorSummaryVisible?: boolean): void;
/**
* When Form Component is destroyed, it will remove itself from the service
*
* @param formId
*/
removeForm(formId: string): void;
/**
* Adds new fieldset to the list of current fieldsets If a fieldset with a matching id exists,
* replace the old fieldset with the new one
*
* @param fieldset Form error summary fieldset
*/
addFieldset(fieldset: FudisFormErrorSummarySection): void;
/**
* Removes the fieldset from the current fieldsets
*
* @param fieldset Form error summary fieldset
*/
removeFieldset(formId: string, fieldsetId: string): void;
/**
* Adds new section to the list of current sections If a section with a matching id exists,
* replace the old section with the new one
*
* @param section Form error summary section
*/
addSection(section: FudisFormErrorSummarySection): void;
/**
* Removes the section from the current sections
*
* @param section Form error summary section
*/
removeSection(formId: string, sectionId: string): void;
ngOnDestroy(): void;
/**
* Returns an error id including a control name if one is given
*
* @param id Id of the form error summary item
* @param controlName Control name of the form error summary item
*/
defineErrorId(id: string, controlName: string | undefined): string;
static ɵfac: i0.ɵɵFactoryDeclaration<FudisInternalErrorSummaryService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisInternalErrorSummaryService>;
}
declare class TextFieldComponentBaseDirective extends ControlComponentBaseDirective {
constructor(_idService: FudisIdService, _focusService: FudisFocusService);
/**
* Width of the input field: 'sm' | 'md' | 'lg'
*/
size: FudisInputSize;
/**
* If user clears the input field, set FormControl value to null instead of empty string.
*/
nullControlOnEmptyString: boolean;
/**
* Max length for HTML attribute and for character indicator in guidance.
*/
protected _maxLength: BehaviorSubject<number | null>;
/**
* Min length for HTML attribute.
*/
protected _minLength: BehaviorSubject<number | null>;
/**
* Subscription to listen to control's value changes
*/
protected _baseSubscription: Subscription;
/**
* Depending on input prop 'nullControlOnEmptyString' either subscribe or unsubscribe to control's
* value changes
*/
protected _setControlValueSubscription(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TextFieldComponentBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TextFieldComponentBaseDirective, "[fudisTextFieldComponentBase]", never, { "size": { "alias": "size"; "required": false; }; "nullControlOnEmptyString": { "alias": "nullControlOnEmptyString"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Allows entry of single-line text.
*
* Use this component for short textual input such as names or identifiers.
*/
declare class TextInputComponent extends TextFieldComponentBaseDirective implements OnInit, OnChanges {
constructor(_focusService: FudisFocusService, _idService: FudisIdService);
/**
* FormControl binded to the HTML input element
*/
control: FormControl<string | null | number>;
/**
* HTML type attribute: 'email' | 'number' | 'password' | 'tel' | 'text' | 'url'
*/
type: FudisInputType;
/**
* Browser's automated assistance in filling out form field values, describing what input is
* expected from the user.
*/
autocomplete: string | string[];
/**
* HTML name attribute (Note: in order to autocomplete to work properly, TextInput should have
* specified name attribute as well)
*/
name: string | null;
/**
* Step for number input: controls the minimum increment for number values. Use 'any' to allow any
* decimal value.
*/
step: number | 'any' | null;
/**
* Max number for number input HTML attribute
*/
protected _maxNumber: BehaviorSubject<number | null>;
/**
* Min number for number input HTML attribute
*/
protected _minNumber: BehaviorSubject<number | null>;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<TextInputComponent>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TextInputComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "fudis-text-input", never, { "control": { "alias": "control"; "required": true; }; "type": { "alias": "type"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "step": { "alias": "step"; "required": false; }; }, {}, never, ["fudis-error-message"], true, never>;
}
/**
* Allows entry of multi-line text.
*
* Use this component for longer or free-form user input.
*/
declare class TextAreaComponent extends TextFieldComponentBaseDirective implements OnInit, OnChanges {
constructor(_focusService: FudisFocusService, _idService: FudisIdService);
/**
* FormControl binded to the HTML textarea element
*/
control: FormControl<string | null | number>;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<TextAreaComponent>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TextAreaComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TextAreaComponent, "fudis-text-area", never, { "control": { "alias": "control"; "required": true; }; }, {}, never, ["fudis-error-message"], true, never>;
}
/**
* Manages localized text inputs across multiple languages.
*
* Use this component to edit equivalent content for different language options.
*/
declare class LocalizedTextGroupComponent<T extends FudisLocalizedTextGroupFormGroup<T>> extends GroupComponentBaseDirective implements OnInit, OnChanges, AfterViewInit {
private _translationService;
constructor(_translationService: FudisTranslationService, _idService: FudisIdService, _focusService: FudisFocusService);
/**
* FormGroup including controls.
*/
formGroup: FormGroup<T>;
/**
* Option list for language Selection. To pair controls with corresponding Select option,
* FormControl's name must match with the controlName defined here. E.g. by default "{controlName:
* 'en', label: 'EN'}" pairs with Form Group's "en: new FormControl('')"
*/
options: FudisLocalizedTextGroupFormGroupOptions[];
/**
* Total width of the component, including both TextInput and Select.
*/
size: FudisInputSize;
/**
* If user clears the input field, set FormControl value to null instead of empty string.
*/
nullControlOnEmptyString: boolean;
/**
* Subscription(s) for listening to each controls' value changes
*/
private _controlsSubscription;
/**
* Form element to display. Defaults to text-input
*/
variant: 'text-input' | 'text-area';
/**
* Min length for HTML attribute and for character indicator in guidance
*/
protected _minLength: BehaviorSubject<number | null>;
/**
* Max length for HTML attribute and for character indicator in guidance
*/
protected _maxLength: BehaviorSubject<number | null>;
/**
* Control for language option Select
*/
protected _selectControl: FormControl<FudisSelectOption<string> | null>;
/**
* Updated options list after changes. Option values (i.e. controlName) are always strings in this
* component so we can type them as such.
*/
protected _selectOptions: FudisSelectOption<string>[];
/**
* Fudis translation
*/
protected _missingLanguage: string;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
/**
* Fudis translation
*/
protected _languageLabel: BehaviorSubject<string>;
/**
* When Form Control value changes, update Select Options accordingly with or without Missing text
*/
protected _updateSelectOptions(): void;
/**
* Set subscriptions for each control to set value to null if empty string is entered.
*/
protected _setControlsValueSubscription(): void;
/**
* On init and when Select option changes, check if now visible input should be marked as
* required.
*/
private _isInputRequired;
protected _checkHtmlAttributes(controlName: string | undefined): void;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<LocalizedTextGroupComponent<T>>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<LocalizedTextGroupComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<LocalizedTextGroupComponent<any>, "fudis-localized-text-group", never, { "formGroup": { "alias": "formGroup"; "required": true; }; "options": { "alias": "options"; "required": false; }; "size": { "alias": "size"; "required": false; }; "nullControlOnEmptyString": { "alias": "nullControlOnEmptyString"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["fudis-error-message"], true, never>;
}
/**
* Groups mutually exclusive options.
*
* Use this component when user must select exactly one option from a set. Each `fudis-radio-button`
* child must have an `[option]` input of type `FudisRadioButtonOption`.
*
* @example
* ```html
* <fudis-radio-button-group [label]="'Color'" [control]="colorControl">
* <fudis-radio-button [label]="'Red'" [value]="'red'"></fudis-radio-button>
* <fudis-radio-button [label]="'Blue'" [value]="'blue'"></fudis-radio-button>
* </fudis-radio-button-group>
* ```;
*/
declare class RadioButtonGroupComponent extends ControlComponentBaseDirective implements OnInit, OnChanges, AfterViewInit {
private _document;
constructor(_document: Document, _focusService: FudisFocusService, _idService: FudisIdService);
private _guidance;
/**
* Width of Radio Button Group: 'sm' | 'md' | 'lg' | 'full-width'
*/
size: FudisInputSize;
/**
* Emit form control and changed option when one option is clicked
*/
handleChange: EventEmitter<FudisRadioButtonChangeEvent>;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
/**
* Private signals for managing the state and selected value of the radio button group
*/
private _selectedValue;
private _touched;
private _invalid;
private _disabled;
/**
* Publicly exposed readonly signals for template binding and external use (in single radio
* button). Not meant to be set from outside the component, but reflect the current state of the
* form control and selected value.
*/
readonly selectedValue: Signal<string | boolean | object | null | unknown>;
readonly touchedState: Signal<boolean>;
readonly invalidState: Signal<boolean>;
readonly disabledState: Signal<boolean>;
ngOnInit(): void;
/**
* Sync local signals with FormControl states and add value and validity check when control value
* changes.
*/
ngOnChanges(changes: FudisComponentChanges<RadioButtonGroupComponent>): void;
ngAfterViewInit(): void;
/**
* Return first radio child input when it is not disabled
*/
private _getFirstEnabledRadio;
/**
* Copy FormControl states into local signals
*/
private _syncControlState;
triggerEmit(id: string, label: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonGroupComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonGroupComponent, "fudis-radio-button-group", never, { "size": { "alias": "size"; "required": false; }; }, { "handleChange": "handleChange"; }, never, ["fudis-radio-button", "fudis-error-message"], true, never>;
}
declare class SelectDropdownComponent extends DropdownBaseDirective implements OnChanges {
private _translationService;
constructor(_translationService: FudisTranslationService);
/**
* Variant of parent Select / Multiselect
*/
selectVariant: FudisSelectVariant;
/**
* Number of results
*/
results: number;
/**
* With Autocomplete variants optional helper text displayed as first item in Dropdown
*/
autocompleteHelpText: string | false;
/**
* By default, Autocomplete variant will display "No results found" text when there are 0 options
* matching. When combined with 'autocompleteFilter' false, application can set their own
* 'Fetching options...' etc. text while their own filtering is in progress.
*/
autocompleteNoResultsText: string | null;
/**
* Current filter text from Autocomplete parents
*/
filterText: string;
/**
* Assign Select dropdown to contain single-select or multiselect options (with checkboxes)
*/
multiselect: boolean;
/**
* Id of parent component
*/
parentId: string;
/**
* Set dropdown size
*/
size: FudisInputSize | 'xs';
/**
* Set dropdown open status
*/
open: boolean | null;
/**
* Internal translated label for situations where no results with current filters were found
*/
protected _translationNoResultsFound: BehaviorSubject<string>;
/**
* Internal translated label for visible results
*/
protected _translationResults: BehaviorSubject<string>;
/**
* Internal translated label for visible results
*/
protected _translationShowing: BehaviorSubject<string>;
/**
* Internal signal mirroring results Input
*/
private _resultsSignal;
/**
* Internal signal mirroring filterText Input
*/
private _filterTextSignal;
/**
* Computed signal for building and updating screen reader message
*/
protected _liveMessage: i0.Signal<string>;
ngOnChanges(changes: FudisComponentChanges<SelectDropdownComponent>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectDropdownComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SelectDropdownComponent, "fudis-select-dropdown", never, { "selectVariant": { "alias": "selectVariant"; "required": true; }; "results": { "alias": "results"; "required": false; }; "autocompleteHelpText": { "alias": "autocompleteHelpText"; "required": false; }; "autocompleteNoResultsText": { "alias": "autocompleteNoResultsText"; "required": false; }; "filterText": { "alias": "filterText"; "required": false; }; "multiselect": { "alias": "multiselect"; "required": false; }; "parentId": { "alias": "parentId"; "required": false; }; "size": { "alias": "size"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Marks the container for select options.
*
* Use this directive to tag the template which wraps (multi)select options and enables lazy loading
* of the options.
*/
declare class SelectOptionsDirective {
templateRef: TemplateRef<unknown>;
constructor(templateRef: TemplateRef<unknown>);
static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectOptionsDirective, "[fudisSelectOptions]", never, {}, {}, never, never, true, never>;
}
interface BaseSelectableComponent<T = unknown> {
control: FormControl<T>;
variant: FudisSelectVariant;
autocompleteFilter: boolean;
}
declare class SelectBaseDirective extends ControlComponentBaseDirective implements OnChanges, OnDestroy {
protected _document: Document;
protected _dialogService: FudisDialogService;
constructor(_document: Document, _dialogService: FudisDialogService, _focusService: FudisFocusService, _idService: FudisIdService);
/**
* Reference to child DropdownComponent listing all options
*/
protected _dropdownRef: SelectDropdownComponent;
/**
* Reference to autocomplete element, used to focus to it
*/
protected _selectIconsRef: ElementRef<HTMLDivElement>;
/**
* To lazy load options on first open
*/
protected _selectOptionsDirective: SelectOptionsDirective;
/**
* Reference to child DropdownComponent listing all options
*/
private _selectRef;
/**
* Set dropdown size (should follow the given input element size)
*/
size: FudisInputSize | 'xs';
/**
* Placeholder text for the dropdown input when no selection has been made
*/
placeholder: string;
/**
* Select variant: 'dropdown' | 'autocompleteDropdown' | 'autocompleteType'.
*
* - 'dropdown': default, normal select dropdown
* - 'autocompleteDropdown': dropdown with autocomplete input field
* - 'autocompleteType': autocomplete but user must type 3 letters before any results are displayed
*/
variant: FudisSelectVariant;
/**
* Enable / disable button, which clears user selection when there is a selected value
*/
selectionClearButton: boolean;
/**
* By default Autocomplete filters options loaded to the DOM based on user input. When this is set
* to 'false', filtering is disabled and all options available in DOM are displayed regardless of
* user's input. Disabling can be useful, if application wants to implement their own filtering
* logic. E. g. get user's input, run a backend search and create list of options for the Select.
*/
autocompleteFilter: boolean;
/**
* For Autocomplete variants optional helper text displayed as first item in opened dropdown list.
* By default uses internal Fudis translation, which can be disabled by setting this property to
* boolean 'false'
*/
autocompleteHelpText: string | false;
/**
* By default, Autocomplete variant will display "No results found" text when there are 0 options
* matching. When combined with 'autocompleteFilter' false, application can set their own
* 'Fetching options...' etc. text while their own filtering is in progress.
*/
autocompleteNoResultsText: string | null;
/**
* Value output event on selection change
*/
selectionUpdate: EventEmitter<any | null>;
/**
* Output for number of visible options after filtering results
*/
visibleOptionsUpdate: EventEmitter<number>;
/**
* Output for filter text after filtering results
*/
filterTextUpdate: EventEmitter<string | null>;
/**
* CSS selector for querying focus states
*/
focusSelector: string;
/**
* For setting dropdown open / closed
*/
protected _dropdownOpen: WritableSignal<boolean>;
/**
* Signal to Select & MultiselectOption for listening autocomplete filter text changes
*/
protected _autocompleteFilterText: WritableSignal<string>;
/**
* Visible results length to be passed on SelectDropdown. This value determines the results shown
* in autocomplete variants helptext.
*/
protected _resultsLength: WritableSignal<number>;
/**
* Lazy loading check for expanding content, unless component control gets values from
* application, then set to true automatically, so that comparing available options match given
* control value.
*/
protected _optionsLoadedOnce: WritableSignal<boolean>;
/**
* Used when filtering autocomplete results to check if 'No results found' text is visible
*/
protected _visibleOptions: string[];
/**
* Status of input focus
*/
protected _inputFocused: boolean;
/**
* Used to handle exceptions when mouse click event fires before / after focus event or user has
* clicked autocomplete clear button
*/
protected _preventDropdownReopen: boolean | undefined;
/**
* Internal signals for template binding and managing the state of the form control.
*/
protected _touched: WritableSignal<boolean>;
protected _invalid: WritableSignal<boolean>;
protected _disabled: WritableSignal<boolean>;
protected _enabled: WritableSignal<boolean>;
protected _selectedLabel: WritableSignal<string | null>;
/**
* Reactive reference to the current control instance.
*
* Used by child option components to rebind their subscription if the parent `control` input is
* replaced with a new FormControl instance.
*/
protected _controlRef: WritableSignal<AbstractControl | null>;
/**
* Focus try counter
*/
private _focusTryCounter;
/**
* Array to store visible options while options are loading.
*/
private _visibleOptionsTemp;
/**
* Store latest option loaded
*/
private _latestVisibleOption;
/**
* Currently focused option
*/
private _focusedOption;
/**
* If clear button is focused
*/
private _clearButtonFocused;
/**
* If click event happens either in input field or in the options
*/
private _mouseDownInsideComponent;
/**
* If click event's target is Select's input field
*/
private _mouseUpOnInput;
/**
* Used to not update visible options to HTML template before some delay has passed in case new
* options are still loading
*/
private _optionLoadInterval;
/**
* If click event originated from Icon used inside input field
*/
private _clickFromIcon;
/**
* Keyboard button pressed down
*/
private _keyDown;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
/**
* Used to pass info, that Clear Button was clicked
*/
protected _clearButtonClickTrigger: WritableSignal<boolean>;
/**
* Resize observer to observe input field size changes
*/
private _resizeObserver;
/**
* Scroll listener for adjusting dropdown position on scroll events
*/
private _scrollListener?;
/**
* Last recorded height of the viewport. Change will trigger dropdown to close.
*/
private _viewportLastHeight;
private _calculateDropdownPosition;
private _setupScrollListener;
private _removeScrollListener;
private _unsubscribeDropdownSubscribtions;
ngOnChanges(changes: FudisComponentChanges<BaseSelectableComponent>): void;
ngOnDestroy(): void;
/**
* @returns Signal value of autocomplete filter text
*/
getAutocompleteFilterText(): Signal<string>;
/**
* Exposes the current control reference as a readonly signal.
*
* Option components use this to follow parent control instance changes and resubscribe to the
* latest control events.
*/
getControlRef(): Signal<AbstractControl | null>;
/**
* Open dropdown
*/
openDropdown(): void;
/**
* Close dropdown
*
* @param focusToInput: When dropdown closes, focus or not to the input
* @param preventDropdownReopen: For cases, when closing command comes from outside eg. clicking
* an option in the dropdownlist. There's no need to reopen the dropdown when focusing back to
* the input, which usually triggers opening the dropdown.
*/
closeDropdown(focusToInput?: boolean, preventDropdownReopen?: boolean): void;
/**
* Each option sends information to parent if they are visible or not
*
* @param value Option value
* @param visible Is this option visible or not
*/
setOptionVisibility(value: string, visible: boolean): void;
/**
* Add or remove currently focused option. Called from SelectOptionBase.
*/
setFocusedOption(id: string, type: 'add' | 'remove'): void;
/**
* Promise which determines, if some of the components used in this Select has focus or not.
*
* @param event FocusEvent
* @returns
*/
componentFocused(event: FocusEvent): Promise<boolean>;
/**
* When Clear button is clicked
*/
protected _clearButtonClick(): void;
/**
* Set control value to null Control value should reset even when user input does not match any
* option value (i.e. control value is null), so that dropdown shows options correctly
*/
protected _setControlNull(): void;
/**
* To handle input focus
*/
protected _selectInputFocus(event: FocusEvent): void;
/**
* To handle input field blur events
*
* @param event FocusEvent
*/
protected _inputBlur(event: FocusEvent): void;
/**
* To handle click events for input
*/
protected _clickInput(): void;
/**
* Register pressed key inside input field. Used to check that both key down and key up originated
* from same source.
*/
protected _inputKeyDown(event: KeyboardEvent): void;
/**
* Handle keypress for dropdown select
*
* @param event KeyboardEvent
* @param focusSelector CSS selector to focus to on ArrowDown event
*/
protected _inputKeyUp(event: KeyboardEvent): void;
/**
* Generate html id for parent FudisSelect
*/
protected _setParentId(type: 'multiselect' | 'select'): void;
/**
* Toggle dropdown
*/
protected _toggleDropdown(): void;
/**
* Resolve a promise after delay if there hasn't been new options
*
* @returns Boolean
*/
private _optionsLoadDelay;
/**
* Copy FormControl states into local signals
*/
private _syncControlState;
/**
* Set Clear button's focus state to false
*/
protected _setClearButtonFocusFalse(): void;
/**
* Set focus state of Clear Button and determine if Dropdown should be closed when this function
* is called
*
* @param event FocusEvent
* @param state
*/
protected _setClearButtonFocusState(event: FocusEvent, state: boolean): void;
/**
* Update input filter text
*
* @param text String to set as filter text
* @param nullCheck True by default, check if control should be set as null
*/
setAutocompleteFilterText(text: string, nullCheck?: boolean): void;
/**
* Checks if currently typed filter text is not same as control label value
*
* @param text Filter text value emitted from autocomplete
*/
protected _checkIfAutocompleteValueNull(text: string): void;
/**
* To focus on first option when dropdown opens
*
* @param cssfocusSelector CSS class to focus to
*/
protected _focusToFirstOption(clickFirstOption?: boolean): void;
/**
* When blurring away from Dropdown, check if this Select has focus
*/
protected _dropdownBlur(event: FocusEvent): void;
/**
* Browser focus logic differs. E. g. Firefox tries to focus to Dropdown menu wrapper. This
* function determines that if it should focus to first option or back to input field.
*/
protected _dropdownFocus(event: FocusEvent): void;
/**
* Focus to input field
*/
protected _focusToSelectInput(): void;
/**
* Function declaration overridden and implemented by Select and Multiselect
*/
protected _updateComponentStateFromControlValue(): void;
/**
* When pressing keyboard Esc, focus to Select input, set flag that dropdown was closed with
* Escape key and close dropdown
*
* @param event
*/
protected _handleEscapePress(event: KeyboardEvent): void;
/**
* When user clicks, set status whether click is inside or outside the Select element
*
* @param targetElement
*/
protected _handleWindowClick(event: MouseEvent): void;
protected _handleMouseDown(): void;
protected _handleMouseUp(event: MouseEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectBaseDirective, "[fudisSelectBase]", never, { "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selectionClearButton": { "alias": "selectionClearButton"; "required": false; }; "autocompleteFilter": { "alias": "autocompleteFilter"; "required": false; }; "autocompleteHelpText": { "alias": "autocompleteHelpText"; "required": false; }; "autocompleteNoResultsText": { "alias": "autocompleteNoResultsText"; "required": false; }; }, { "selectionUpdate": "selectionUpdate"; "visibleOptionsUpdate": "visibleOptionsUpdate"; "filterTextUpdate": "filterTextUpdate"; }, ["_selectOptionsDirective"], never, true, never>;
}
declare class SelectBaseControlValueAccessorDirective implements ControlValueAccessor, Validator {
constructor();
onChanged: () => any;
onTouched: () => any;
onValidate: () => any;
writeValue(value: unknown): void;
registerOnChange(fn: () => any): void;
registerOnTouched(fn: () => any): void;
validate(control: AbstractControl): ValidationErrors | null;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectBaseControlValueAccessorDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectBaseControlValueAccessorDirective, "[fudisSelectBaseControlValueAccessor]", never, {}, {}, never, never, false, never>;
}
declare class SelectControlValueAccessorDirective<T = string> extends SelectBaseControlValueAccessorDirective implements OnChanges {
private _elementRef;
private _renderer;
constructor(_elementRef: ElementRef<HTMLInputElement>, _renderer: Renderer2);
filterText: string | null;
ngOnChanges(changes: FudisComponentChanges<SelectControlValueAccessorDirective<T>>): void;
writeValue(value?: FudisSelectOption<T> | null): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectControlValueAccessorDirective<any>, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectControlValueAccessorDirective<any>, "[fudisSelectControlValueAccessor]", never, { "filterText": { "alias": "filterText"; "required": false; }; }, {}, never, never, true, never>;
}
declare class MultiselectControlValueAccessorDirective<T = string> extends SelectBaseControlValueAccessorDirective implements AfterViewInit {
private _document;
private _elementRef;
private _renderer;
constructor(_document: Document, _elementRef: ElementRef<HTMLInputElement>, _renderer: Renderer2);
id: string;
enableAutocomplete: boolean;
handleSortedSelectedOptions: EventEmitter<FudisSelectOption<T>[] | null>;
ngAfterViewInit(): void;
/**
* When selecting / deselecting options, variable for storing them in the order of their id's
* (usually the DOM order)
*/
protected _selectedOptions: FudisSelectOption<T>[] | null;
writeValue(value: FudisSelectOption<T>[] | null): void;
private _setVisibleLabel;
/**
* Sort selected options the same order they appear in the DOM
*/
private _sortSelectedOptionsDOMOrder;
static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectControlValueAccessorDirective<any>, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<MultiselectControlValueAccessorDirective<any>, "[fudisMultiselectControlValueAccessor]", never, { "id": { "alias": "id"; "required": false; }; "enableAutocomplete": { "alias": "enableAutocomplete"; "required": false; }; }, { "handleSortedSelectedOptions": "handleSortedSelectedOptions"; }, never, never, true, never>;
}
/**
* Allows selection of a single option from a dropdown list.
*
* Use this component when there are multiple predefined options and user can choose only one value.
* The FormControl value is a `FudisSelectOption` object (not a primitive). Options are projected
* via `<ng-template fudisSelectOptions>` containing `<fudis-select-option>` elements.
*
* Option data should be treated as immutable. If application needs to update option labels
* dynamically, for example after a language change, provide a new options array with new
* `FudisSelectOption` object references instead of mutating existing option objects in place.
* Replacing option objects allows the component to update the selected label and option views
* correctly.
*
* @example
* ```html
* <fudis-select [label]="'Country'" [control]="countryControl">
* <ng-template fudisSelectOptions>
* <fudis-select-option [data]="{ value: 'fi', label: 'Finland' }"></fudis-select-option>
* <fudis-select-option [data]="{ value: 'se', label: 'Sweden' }"></fudis-select-option>
* </ng-template>
* </fudis-select>
* ```;
*/
declare class SelectComponent<T = string> extends SelectBaseDirective implements OnInit, AfterViewInit, BaseSelectableComponent {
constructor(_document: Document, _dialogService: FudisDialogService, _idService: FudisIdService, _focusService: FudisFocusService);
selectCVA: SelectControlValueAccessorDirective<T>;
/**
* FormControl for single select
*/
control: FormControl<FudisSelectOption<T> | null>;
/**
* Value output event on selection change
*/
selectionUpdate: EventEmitter<FudisSelectOption<T> | null>;
ngOnInit(): void;
/**
* Handler for triggered option selection change
*
* @param value Option to be selected
* @param disableSignalEmit Disable signal update to reduce unneeded state updates
*/
handleSelectionChange(value: FudisSelectOption<T> | null): void;
/**
* Checks if currently typed filter text is not same as control label value
*
* @param text Filter text value emitted from autocomplete
*/
protected _checkIfAutocompleteValueNull(text: string): void;
/**
* If control value is updated from the Application, update component's state accordingly
*/
protected _updateComponentStateFromControlValue(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent<any>, "fudis-select", never, { "control": { "alias": "control"; "required": true; }; }, { "selectionUpdate": "selectionUpdate"; }, never, ["fudis-error-message"], true, never>;
}
/**
* Allows selection of multiple options from a dropdown list.
*
* Use this component when there are multiple predefined options and user can choose more than one
* value. The FormControl value is a `FudisSelectOption[]` array (not primitives). Options are
* projected via `<ng-template fudisSelectOptions>` containing `<fudis-multiselect-option>`
* elements.
*
* Option data should be treated as immutable. If application needs to update option labels
* dynamically, for example after a language change, provide a new options array with new
* `FudisSelectOption` object references instead of mutating existing option objects in place.
* Replacing option objects allows the component to update selected values and option labels
* correctly.
*
* @example
* ```html
* <fudis-multiselect [label]="'Countries'" [control]="countriesControl">
* <ng-template fudisSelectOptions>
* <fudis-multiselect-option [data]="{ value: 'fi', label: 'Finland' }"></fudis-multiselect-option>
* <fudis-multiselect-option [data]="{ value: 'se', label: 'Sweden' }"></fudis-multiselect-option>
* </ng-template>
* </fudis-multiselect>
* ```;
*/
declare class MultiselectComponent<T = string> extends SelectBaseDirective implements OnInit, BaseSelectableComponent {
protected _translationService: FudisTranslationService;
constructor(_document: Document, _translationService: FudisTranslationService, _dialogService: FudisDialogService, _idService: FudisIdService, _focusService: FudisFocusService);
_multiselectCVA: MultiselectControlValueAccessorDirective<T>;
/**
* Array type control for selected FudisSelectOptions
*/
control: FormControl<FudisSelectOption<T>[] | null>;
/**
* Hide or show selection chips rendered below input
*/
showSelectionChips: boolean;
/**
* Value output event on selection change
*/
selectionUpdate: EventEmitter<FudisSelectOption<T>[] | null>;
/**
* When app language and option labels are changed, selected Multiselect Options push themselves
* here, which will be then used to update visible UI labels managed by MultiselectCVA
*/
selectedOptionsFromLangChange: FudisSelectOption<T>[];
/**
* When selecting / deselecting options, variable for storing them in the order of their id's
* (usually the DOM order)
*/
protected _sortedSelectedOptions: WritableSignal<FudisSelectOption<T>[] | null>;
/**
* Set component's id and subscribe to value changes for form control coming from application
*/
ngOnInit(): void;
/**
* Handler for adding / removing selections
*
* @param option FudisSelectOption to handle
* @param type Add or remove multiselect option
*/
handleMultiSelectionChange(option: FudisSelectOption<T>, type: 'add' | 'remove'): void;
protected _updateSortedSelectedOptions(newValue: FudisSelectOption<any>[] | null): void;
/**
* Handle chip remove. If there are no selections done, focus back to input on last item removal.
*
* @param option Removed option
*/
protected _handleRemoveChip(option: FudisSelectOption<T>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent<any>, "fudis-multiselect", never, { "control": { "alias": "control"; "required": true; }; "showSelectionChips": { "alias": "showSelectionChips"; "required": false; }; }, { "selectionUpdate": "selectionUpdate"; }, never, ["fudis-error-message"], true, never>;
}
/**
* Displays a custom error message for a form field.
*
* Use this directive to link custom validation error to an input where existing validators are not
* possible to use.
*/
declare class ErrorMessageDirective implements OnInit, OnChanges, OnDestroy {
private _errorSummaryService;
private _translationService;
private _idService;
private _textInput;
private _textArea;
private _datePicker;
private _LocalizedTextGroup;
private _checkboxGroup;
private _select;
private _multiSelect;
private _radioButtonGroup;
constructor(_errorSummaryService: FudisInternalErrorSummaryService, _translationService: FudisTranslationService, _idService: FudisIdService, _textInput: TextInputComponent, _textArea: TextAreaComponent, _datePicker: DatepickerComponent, _LocalizedTextGroup: LocalizedTextGroupComponent<FudisLocalizedTextGroupFormGroup<object>>, _checkboxGroup: CheckboxGroupComponent<FudisCheckboxGroupFormGroup<object>>, _select: SelectComponent, _multiSelect: MultiselectComponent, _radioButtonGroup: RadioButtonGroupComponent);
/**
* Error message to display
*/
message: Observable<string> | string;
/**
* Output for handling a state when error is sent to Error Summary
*/
handleAddError: EventEmitter<FudisValidationErrors>;
/**
* Output for handling a state when error is removed from Error Summary
*/
handleRemoveError: EventEmitter<FudisValidationErrors>;
/**
* Id generated with FudisIdService
*/
private _id;
/**
* Boolean determining if Error Message is added
*/
private _errorAdded;
/**
* Convert provided string message to an observable so it updates accordingly in the validator
*/
private _messageStringAsObservable;
/**
* Possible parent components to used with Error Message
*/
private _parent;
/**
* Possible parent group components to used with Error Message
*/
private _parentGroup;
/**
* Custom instance of FudisValidator
*/
private _customValidatorInstance;
private _destroyRef;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<ErrorMessageDirective>): void;
ngOnDestroy(): void;
/**
* Create custom validator with error message
*/
private _customControlValidatorFn;
/**
* Add created validator to the parent component control
*/
private _addControlValidator;
/**
* Remove created validator from parent component control
*/
private _removeValidator;
static ɵfac: i0.ɵɵFactoryDeclaration<ErrorMessageDirective, [null, null, null, { optional: true; host: true; }, { optional: true; host: true; }, { optional: true; host: true; }, { optional: true; host: true; }, { optional: true; host: true; }, { optional: true; host: true; }, { optional: true; host: true; }, { optional: true; host: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ErrorMessageDirective, "fudis-error-message", never, { "message": { "alias": "message"; "required": true; }; }, { "handleAddError": "handleAddError"; "handleRemoveError": "handleRemoveError"; }, never, never, true, never>;
}
type ErrorSummaryDOMListItem = {
id: string;
message: string;
element: HTMLElement | null;
};
/**
* Displays a summary of validation errors.
*
* Use this component to present form errors in a single, accessible location.
*/
declare class ErrorSummaryComponent implements AfterViewInit, OnInit {
private _errorSummaryService;
protected _translationService: FudisTranslationService;
constructor(_errorSummaryService: FudisInternalErrorSummaryService, _translationService: FudisTranslationService);
private _focusTarget;
/**
* Form parent element of this ErrorSummaryComponent
*/
parentComponent: HTMLFormElement;
/**
* Title text displayed in Error Summary before listing individual errors. If not provided, Fudis
* will display its default helper title text
*/
title: string;
/**
* Id of parent Form component
*/
formId: string;
handleUpdatedErrorList: EventEmitter<{
id: string;
message: string;
}[] | null>;
/**
* Visible errors
*/
protected _visibleErrorList: i0.WritableSignal<ErrorSummaryDOMListItem[]>;
/**
* Focus counter to hit the correct focus field
*/
private _numberOfFocusTries;
/**
* To enable clicking Error Summary links and then moving focus to corresponding form field. This
* was needed, as not all Fudis applications use Angular Router, so alternative approach was
* needed.
*
* @param event Original click event
* @param clickedId Id of clicked link in Error Summary
*/
protected handleErrorClick(event: Event, clickedId: string): void;
/**
* Sort errors the same order they appear in the DOM
*/
private _sortErrorOrder;
/**
* Update Error Summary content with possible parent Fieldsets, Sections and Expandables
* (Sections)
*/
private _updateSummaryContent;
/**
* Move focus to Error Summary if errors are visible
*/
private _focusToErrorSummary;
private _injector;
ngOnInit(): void;
ngAfterViewInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ErrorSummaryComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ErrorSummaryComponent, "fudis-error-summary", never, { "parentComponent": { "alias": "parentComponent"; "required": true; }; "title": { "alias": "title"; "required": false; }; "formId": { "alias": "formId"; "required": true; }; }, { "handleUpdatedErrorList": "handleUpdatedErrorList"; }, never, never, true, never>;
}
/**
* Identifies the actions area of an expandable.
*
* Use this directive to position action buttons to a fixed place.
*/
declare class ExpandableActionsDirective {
readonly _hostClass = "fudis-expandable-actions";
static ɵfac: i0.ɵɵFactoryDeclaration<ExpandableActionsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ExpandableActionsDirective, "fudis-expandable-actions", never, {}, {}, never, never, true, never>;
}
/**
* Identifies the main content area of an expandable.
*
* Use this directive for lazy loaded content.
*/
declare class ExpandableContentDirective {
templateRef: TemplateRef<unknown>;
constructor(templateRef: TemplateRef<unknown>);
static ɵfac: i0.ɵɵFactoryDeclaration<ExpandableContentDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ExpandableContentDirective, "[fudisExpandableContent]", never, {}, {}, never, never, true, never>;
}
/**
* Toggles the visibility of additional content.
*
* Use this component to progressively disclose information without overwhelming the user.
*/
declare class ExpandableComponent implements OnDestroy, OnChanges, AfterContentInit {
private _element;
private _idService;
private _errorSummaryService;
constructor(_element: ElementRef, _idService: FudisIdService, _errorSummaryService: FudisInternalErrorSummaryService);
/**
* Content directive for Fudis Expandable Content
*/
protected _content: ExpandableContentDirective;
/**
* Title of the expandable
*/
title: string;
/**
* Expandable title's semantic aria-level for screen readers
*/
level: number;
/**
* Visual variant of the expandable: 'regular' | 'lite'
*/
variant: FudisExpandableType;
/**
* Expandable content padding depth
*/
padding: 'default' | 'small';
/**
* Optional sub title, placed underneath the main title
*/
subTitle: string;
/**
* Add badge next to the expandable title
*/
badge: FudisBadgeVariant | null;
/**
* Badge text
*/
badgeText: string | null;
/**
* Display Expandable title in the breadcrumb of Error Summary
*/
errorSummaryBreadcrumb: boolean;
/**
* If Expandable is used inside Form component, by default it will open itself when
* reloadFormErrors is called in Error Summary Service. To disable this behavior, set this to
* false.
*/
openOnErrorSummaryReload: boolean;
/**
* Expandable is initially closed by default but can be controlled by [closed] input property
*/
set closed(value: boolean);
/**
* Optional output function when the closed status changes
*/
closedChange: EventEmitter<boolean>;
/**
* Internal boolean of whether the expandable is currently closed
*/
protected _closed: WritableSignal<boolean>;
/**
* Internal id to generate unique id
*/
protected _id: string;
/**
* Lazy loading check for expanding content
*/
protected _openedOnce: WritableSignal<boolean>;
/**
* Is info sent to Error Summary Service
*/
private _errorSummaryInfoSent;
private _parentFormId;
private _destroyRef;
private _getParentForm;
/**
* Getter for closed boolean
*/
get closed(): boolean;
private _injector;
ngAfterContentInit(): void;
ngOnChanges(changes: FudisComponentChanges<ExpandableComponent>): void;
ngOnDestroy(): void;
/**
* Send error object to Error Summary Service
*/
private _addToErrorSummary;
/**
* Remove error object from Error Summary Service
*/
private _removeFromErrorSummary;
/**
* Setter for closed boolean
*/
protected _setClosedStatus(value: boolean): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ExpandableComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ExpandableComponent, "fudis-expandable", never, { "title": { "alias": "title"; "required": true; }; "level": { "alias": "level"; "required": true; }; "variant": { "alias": "variant"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "subTitle": { "alias": "subTitle"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "errorSummaryBreadcrumb": { "alias": "errorSummaryBreadcrumb"; "required": false; }; "openOnErrorSummaryReload": { "alias": "openOnErrorSummaryReload"; "required": false; }; "closed": { "alias": "closed"; "required": false; }; }, { "closedChange": "closedChange"; }, ["_content"], ["fudis-expandable-actions"], true, never>;
}
/**
* Groups related form controls under a common context.
*
* Use this component to improve form structure, clarity, and accessibility.
*/
declare class FieldSetComponent extends PopoverApiDirective implements AfterViewInit, OnInit, OnDestroy, OnChanges, AfterContentInit {
protected _translationService: FudisTranslationService;
private _element;
private _errorSummaryService;
private _focusService;
private _idService;
constructor(_translationService: FudisTranslationService, _element: ElementRef, _errorSummaryService: FudisInternalErrorSummaryService, _focusService: FudisFocusService, _idService: FudisIdService);
/**
* Legend elementRef to trigger initialFocus
*/
private _fieldsetLegend;
/**
* Label for the Fieldset component.
*/
label: string;
/**
* Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes.
*
* - Xxl = Default value. Viewports of 1600px and larger
* - Xl = Viewports smaller than 1600px
* - Lg = Viewports smaller than 1200px
* - Md = Viewports smaller than 992px
* - Sm = Viewports smaller than 768px
* - Xs = Viewports smaller than 576px
* - Full-width = Grid takes full width of its parent container, no maximum width
*/
width: FudisGridWidth;
/**
* Overrides 'width' input. Used to set Checkbox Group and Radio Button Group as wide as other
* basic form components.
*/
inputSize: FudisInputSize;
/**
* Alignment of Grid component inside its parent
*/
align: FudisGridAlign;
/**
* Set focus to Fieldset when it appears first time
*/
initialFocus: boolean;
/**
* Send information about current Fieldset to Error Summary Service. Error Summary Breadcrumb is
* the label of the current Fieldset and is visible in the clickable link in Error Summary.
*/
errorSummaryBreadcrumb: boolean;
/**
* Display "Required" text next to Fieldset main label.
*/
required: boolean | null;
/**
* Visual size of label legend. Default 'md' and 'sm' is similar to standard input label, used in
* e. g. RadioButtonGroup.
*/
labelSize: 'md' | 'sm';
/**
* Fieldset id. If not provided when component is initialized, generated by Id Service
*/
id: string;
/**
* Help text, aligned underneath the input.
*/
helpText: string | undefined;
/**
* CSS classes for the native fieldset HTMLelement
*/
protected _classes: string[];
/**
* Used to set visible focus on if focus event comes from Error Summary link.
*/
protected _legendFocusVisible: boolean;
/**
* Has Fieldset been added to Error Summary
*/
private _fieldsetSent;
/**
* Private reference to Guidance
*/
private _fieldsetGuidance;
private _parentFormId;
ngOnInit(): void;
ngAfterContentInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: FudisComponentChanges<FieldSetComponent>): void;
ngOnDestroy(): void;
protected _handleLegendBlur(): void;
protected _handleFocus(event: FocusEvent): void;
/**
* Determines if Fieldset has CheckboxGroup or RadioButtonGroup as a parent. If so, adds Guidance
* helptext as part of the Fieldset legend element and makes it accessible for screen readers.
*/
private _hasSelectionGroupParent;
/**
* Add Fieldset label to Error Summary
*/
private _addToErrorSummary;
/**
* Remove Fieldset label from Error Summary
*/
private _removeFromErrorSummary;
/**
* Set CSS classes for native fieldset HTMLelement
*/
private _setClasses;
/**
* Add or generate id with IdService
*/
private _setFieldsetId;
static ɵfac: i0.ɵɵFactoryDeclaration<FieldSetComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<FieldSetComponent, "fudis-fieldset", never, { "label": { "alias": "label"; "required": true; }; "width": { "alias": "width"; "required": false; }; "inputSize": { "alias": "inputSize"; "required": false; }; "align": { "alias": "align"; "required": false; }; "initialFocus": { "alias": "initialFocus"; "required": false; }; "errorSummaryBreadcrumb": { "alias": "errorSummaryBreadcrumb"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelSize": { "alias": "labelSize"; "required": false; }; "id": { "alias": "id"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; }, {}, never, ["fudis-fieldset-actions", "fudis-fieldset-content"], true, never>;
}
/**
* Identifies the actions associated with a fieldset.
*
* Use this directive to add buttons that affect the fieldset as a whole.
*/
declare class FieldsetActionsDirective implements OnChanges {
hostClass: string;
/**
* Alignment of Fieldset Actions container
*/
align: fudisFieldsetActionsAlign;
ngOnChanges(changes: FudisComponentChanges<FieldsetActionsDirective>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetActionsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FieldsetActionsDirective, "fudis-fieldset-actions", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Identifies the main content area of a fieldset.
*
* Use this directive to group related form controls within a fieldset.
*/
declare class FieldsetContentDirective {
readonly _hostClass = "fudis-fieldset-content";
static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetContentDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FieldsetContentDirective, "fudis-fieldset-content", never, {}, {}, never, never, true, never>;
}
/**
* Displays footer content for a page.
*
* Use this component with supplementary information such as links, legal content, or metadata.
*/
declare class FooterComponent {
private _translationService;
constructor(_translationService: FudisTranslationService);
/**
* Fudis translations
*/
protected _translations: Signal<FudisTranslationConfig>;
/**
* Alternative text for the Funidata logo
*/
protected _funidataLogoAltText: BehaviorSubject<string>;
/**
* External link text for Funidata logo
*/
protected _externalLinkHelpText: BehaviorSubject<string>;
static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "fudis-footer", never, {}, {}, never, ["*"], true, never>;
}
/**
* Identifies the actions area of a form.
*
* Use this directive to group submit or secondary form actions consistently.
*/
declare class FormActionsDirective {
readonly _hostClass = "fudis-form-actions";
static ɵfac: i0.ɵɵFactoryDeclaration<FormActionsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FormActionsDirective, "fudis-form-actions", never, {}, {}, never, never, true, never>;
}
/**
* Identifies the header area of a form.
*
* Use this directive for additional information like intsructions for the form that should be
* grouped with the actual form heading.
*/
declare class FormHeaderDirective {
readonly _hostClass = "fudis-form-header";
static ɵfac: i0.ɵɵFactoryDeclaration<FormHeaderDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FormHeaderDirective, "fudis-form-header", never, {}, {}, never, never, true, never>;
}
/**
* Identifies the main content area of a form.
*
* Use this directive for form fields.
*/
declare class FormContentDirective {
readonly _hostClass = "fudis-form-content";
static ɵfac: i0.ɵɵFactoryDeclaration<FormContentDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FormContentDirective, "fudis-form-content", never, {}, {}, never, never, true, never>;
}
/**
* Provides layout and structure for form content. Extends Grid — all Grid inputs are available.
*
* Use this component to consistently arrange form fields, actions, and validation elements. Place
* fields inside `<fudis-form-content>` and buttons inside `<fudis-form-actions>`. Use
* `fudisFormSubmit` directive on the submit button to trigger error summary. Use `FudisValidators`
* (not Angular's Validators) for error messages to work with Error Summary.
*/
declare class FormComponent extends GridApiDirective implements OnInit, OnDestroy, OnChanges {
private _idService;
protected _elementRef: ElementRef;
private _errorSummaryService;
protected _dialogParent: DialogComponent;
constructor(_idService: FudisIdService, _elementRef: ElementRef, _errorSummaryService: FudisInternalErrorSummaryService, _dialogParent: DialogComponent);
/**
* Form title
*/
title: string;
/**
* Heading level for the form title: 1 | 2 | 3 | 4 | 5 | 6
*/
level: FudisHeadingLevel;
/**
* Form id. If not given, id will be generated with IdService. Set only in component
* initialisation.
*/
id: string;
/**
* Heading variant for the form title: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'. If not
* set, derived automatically from level.
*/
titleVariant: FudisHeadingVariant;
/**
* Help text positioned under form title
*/
helpText: string;
/**
* Additional badge to the form title: 'accent' | 'danger' | 'primary' | 'secondary' | 'success'
*/
badge: FudisBadgeVariant | null;
/**
* Badge text
*/
badgeText: string | null;
/**
* Set Error Summary visibility manually. Usually set true on form submit with Button binded with
* 'fudisFormSubmit' directive.
*/
errorSummaryVisible: boolean;
/**
* Title text displayed in Error Summary before listing individual errors. If not provided, Fudis
* will display its default helper title text
*/
errorSummaryTitle: string;
/**
* Each time Error Summary List is updated, this emitter will output the list
*/
handleUpdatedErrorList: EventEmitter<{
id: string;
message: string;
}[] | null>;
/**
* The _errorSummaryVisible signal tracks the current visibility of the error summary for template
* binding
*/
protected _errorSummaryVisible: WritableSignal<boolean>;
private _injector;
ngOnInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: FudisComponentChanges<FormComponent>): void;
/**
* Add or generate id with IdService
*/
private _setFormId;
static ɵfac: i0.ɵɵFactoryDeclaration<FormComponent, [null, null, null, { optional: true; host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<FormComponent, "fudis-form", never, { "title": { "alias": "title"; "required": true; }; "level": { "alias": "level"; "required": true; }; "id": { "alias": "id"; "required": false; }; "titleVariant": { "alias": "titleVariant"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "errorSummaryVisible": { "alias": "errorSummaryVisible"; "required": false; }; "errorSummaryTitle": { "alias": "errorSummaryTitle"; "required": false; }; }, { "handleUpdatedErrorList": "handleUpdatedErrorList"; }, never, ["fudis-form-header", "fudis-form-content", "fudis-form-actions"], true, never>;
}
/**
* Marks an element as the primary form submission trigger. Must be applied on a `fudis-button` that
* is inside a `fudis-form`. On click, triggers error summary visibility. Pass
* `[formValid]="myForm.valid"` to control behavior.
*
* @example
* ```html
* <fudis-button fudisFormSubmit [label]="'Submit'" [formValid]="myForm.valid"></fudis-button>
* ```;
*/
declare class FormSubmitDirective implements OnInit {
private _document;
private _button;
private _errorSummaryService;
constructor(_document: Document, _button: ButtonComponent, _errorSummaryService: FudisInternalErrorSummaryService);
/**
* If false, Button will set parent Form's 'errorSummaryVisible' to true and call
* reloadFormErrors() from Error Summary Service If true, Button will set parent Form's
* 'errorSummaryVisible' to false
*/
formValid: boolean;
ngOnInit(): void;
/**
* Set parent Form's Error Summary Visible true and reload errors
*/
protected _onClick(event: MouseEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<FormSubmitDirective, [null, { host: true; }, null]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FormSubmitDirective, "[fudisFormSubmit]", never, { "formValid": { "alias": "formValid"; "required": false; }; }, {}, never, never, true, never>;
}
declare class FudisGridService {
/**
* Grid values that can be set from application. By default an empty object.
*/
private _defaultGridValues;
/**
* To set default values for all Grids application uses from application.
*/
setDefaultValues(newDefaultValues: FudisDefaultGridProperties): void | never;
/**
* Get application's default values for Grid
*/
getDefaultValues(): Signal<FudisDefaultGridProperties>;
static ɵfac: i0.ɵɵFactoryDeclaration<FudisGridService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisGridService>;
}
declare class FudisBreakpointService {
/**
* Observe breakpoints and when hitting one, save results to Signal.
*/
constructor(fudisBreakpointObserver: BreakpointObserver);
/**
* Current screen size/breakpoint with true/false state
*/
private _currentScreenSize;
/**
* Readonly value for current screen size and state
*/
private _screenSize;
/**
* Get current state of Breakpoints
*/
getBreakpointState(): BreakpointState | null;
/**
* Function to apply CSS properties
*/
setStyleAttributes(element: HTMLElement, property: FudisBreakpointStyleProperty, value: string | FudisBreakpointStyleResponsive[]): void;
static ɵfac: i0.ɵɵFactoryDeclaration<FudisBreakpointService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisBreakpointService>;
}
/**
* Applies grid layout behavior to a container element.
*
* Use this directive to define responsive columns.
*/
declare class GridDirective extends GridApiDirective implements OnInit, OnChanges {
private _gridElement;
private _gridService;
private _breakpointService;
constructor(_gridElement: ElementRef, _gridService: FudisGridService, _breakpointService: FudisBreakpointService);
/**
* Used to apply grid-template-columns CSS values for the Grid
*/
protected _calculatedColumns: string | number | FudisBreakpointStyleResponsive[];
/**
* Internal reference for the this Grid element
*/
private _element;
/**
* Collection of properties collected from Input props and GridService defaults to be applied as
* CSS values for the Grid
*/
private _valuesForCssClasses;
/**
* Object to store various values from defaults, GridService and Inputs from application
*/
private _gridInputProperties;
private _firstLoadFinished;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<GridDirective>): void;
/**
* Add or update values from application. This does not apply any values for CSS.
*/
private _setAppInputValuesToPropertyObject;
/**
* Set default values. These are used as back up, if application does not provide any input
* properties.
*/
private _setDefaultValuesToPropertyObject;
/**
* Set and config Grid's attributes from provided input properties
*/
private _calculateAndSetGridColumnsCss;
/**
* Function which converts application's input or service values to CSS values which will applied
* to Grid element.
*/
private _calculateColumnsCssValue;
/**
* Set CSS grid-template-column attributes for this Grid element
*/
private _setColumnsForBreakpoints;
private _setAllProperties;
static ɵfac: i0.ɵɵFactoryDeclaration<GridDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GridDirective, "[fudisGrid]", never, {}, {}, never, never, true, never>;
}
/**
* Provides a responsive grid layout.
*
* Use this component to structure page or section layouts visually using columns.
*/
declare class GridComponent extends GridDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<GridComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GridComponent, "fudis-grid", never, {}, {}, never, ["*"], true, never>;
}
/**
* Applies grid item behavior within a grid container.
*
* Use this directive to control placement and span of child elements inside a grid container.
*/
declare class GridItemDirective implements OnInit, OnChanges {
private _gridItemElement;
private _breakpointService;
constructor(_gridItemElement: ElementRef, _breakpointService: FudisBreakpointService);
/**
* Apply CSS grid-column values for the Grid Item
*/
private _calculatedColumns;
/**
* Apply horizontal CSS values for the Grid Item
*/
private _calculatedAlignX;
/**
* Apply vertical CSS values for the Grid Item
*/
private _calculatedAlignY;
/**
* Internal reference for the Grid Item element
*/
private _element;
/**
* Set columns for single Grid Item
*/
set columns(value: FudisGridItemWidth | FudisGridItemColumnsResponsive);
/**
* Align Grid Item horizontally
*/
set alignSelfX(value: FudisGridItemAlignment | FudisGridItemAlignResponsive);
/**
* Align Grid Item vertically
*/
set alignSelfY(value: FudisGridItemAlignment | FudisGridItemAlignResponsive);
ngOnInit(): void;
ngOnChanges(): void;
/**
* Set CSS grid-column attributes for this Grid Item element
*/
private _setColumns;
/**
* Set CSS justify-self attributes for this Grid Item element
*/
private _setAlignX;
/**
* Set CSS align-self attributes for this Grid Item element
*/
private _setAlignY;
/**
* Apply CSS settings from Inputs
*/
private _applyGridItemCss;
static ɵfac: i0.ɵɵFactoryDeclaration<GridItemDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GridItemDirective, "[fudisGridItem]", never, { "columns": { "alias": "columns"; "required": false; }; "alignSelfX": { "alias": "alignSelfX"; "required": false; }; "alignSelfY": { "alias": "alignSelfY"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Represents a single item within a grid layout.
*
* Use this component to define column span and placement inside a grid container.
*/
declare class GridItemComponent extends GridItemDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<GridItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GridItemComponent, "fudis-grid-item", never, {}, {}, never, ["*"], true, never>;
}
declare class GuidanceComponent implements OnChanges, OnInit, AfterContentInit, AfterViewInit {
private _translationService;
private _idService;
private _errorSummaryService;
private _elementRef;
constructor(_translationService: FudisTranslationService, _idService: FudisIdService, _errorSummaryService: FudisInternalErrorSummaryService, _elementRef: ElementRef);
/**
* Id of input, fieldset or similar which Guidance is related to. Used in aria attributes and in
* emit information for Error Summary Service.
*/
for: string;
/**
* Label text of input, fieldset or similar Guidance is related to. Used in emit information for
* Error Summary service.
*/
inputLabel: string;
/**
* FormControl of related input.
*/
control: FormControl;
/**
* FormGroup of related FormGroup. E.g. LocalizedTextGroup with FormGroup
*/
formGroup: FormGroup;
/**
* Text displayed as guidance help text.
*/
helpText: string | undefined;
/**
* When set displays also a character count indicator.
*/
maxLength: number | null;
/**
* Used to match FormControl value for the Localized Text Group component so that the component
* can display the length of the entered input for the connected language option.
*/
selectedOption: string;
/**
* Used with together with Checkbox Group component, to display errors only when focus has moved
* outside of whole Checkbox Group.
*/
groupBlurredOut: boolean;
/**
* Hide visible helptext from screen readers when group components E.g. Radio Button Group and
* Checkbox Group components are used.
*/
groupHelpTextHidden: boolean;
/**
* Assistive text of max character count for screen readers. E. g. "5/20 characters used" where
* "characters used" is "maxLengthText".
*/
protected _maxLengthText: WritableSignal<string>;
/**
* Number of characters left when screen reader is alerted about input max length
*/
protected _maxLengthAlertThreshold: number;
/**
* The width of the character-limit-indicator, determined by how many digits are in the maxLength
* input value
*/
protected _maxLengthWidth: 'sm' | 'md' | 'lg';
/**
* Id from IdService
*/
protected _id: string;
/**
* Collection of validation errors
*/
protected _lazyLoadedErrors: string[];
protected _parentFormId: WritableSignal<string | null>;
/**
* Used prevent checks in HTML DOM before content has been loaded
*/
protected _afterViewInitDone: WritableSignal<boolean>;
/**
* To prevent Error Summary reloading after lazy load check
*/
private _reloadGuard;
private _cdr;
private _destroyRef;
private _injector;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<GuidanceComponent>): void;
ngAfterContentInit(): void;
ngAfterViewInit(): void;
private _subscribeToErrors;
private _setCharacterLimitIndicatorValues;
/**
* This function is triggered, if this component is loaded to the DOM after Error Summary has been
* loaded and there are new validation errors which didn't exist at the time original reload
* errors call was made. It should only trigger reload one time, when all errors of this Guidance
* are registered.
*/
protected _reloadErrorSummaryOnLazyLoad(error: FudisErrorSummaryNewError): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GuidanceComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GuidanceComponent, "fudis-guidance", never, { "for": { "alias": "for"; "required": true; }; "inputLabel": { "alias": "inputLabel"; "required": true; }; "control": { "alias": "control"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "selectedOption": { "alias": "selectedOption"; "required": false; }; "groupBlurredOut": { "alias": "groupBlurredOut"; "required": false; }; "groupHelpTextHidden": { "alias": "groupHelpTextHidden"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Displays a heading at a specified semantic level (h1-h6).
*
* Use this component to structure content hierarchially and provide semantic information for all
* users.
*/
declare class HeadingComponent implements OnInit, OnChanges {
private _idService;
private _wrapperElement;
constructor(_idService: FudisIdService, _wrapperElement: ElementRef);
/**
* Rendered HTML Heading element, e.g.`<h1>` or `<h3>` tag.
*/
headingRef: ElementRef<HTMLHeadingElement>;
/**
* Semantic level of heading
*/
level: FudisHeadingLevel;
/**
* Heading variant: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'. If not set, derived
* automatically from level.
*/
variant: FudisHeadingVariant;
/**
* Heading id. If not provided, generated by FudisIdService.
*/
id: string;
/**
* Align heading: 'center' | 'left' | 'right'
*/
align: FudisTextAlign;
/**
* Heading CSS class list
*/
protected _classList: BehaviorSubject<string[]>;
/**
* Internal id to generate unique id
*/
protected _id: string;
/**
* Set CSS classes for heading
*/
private _setClasses;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<HeadingComponent>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<HeadingComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<HeadingComponent, "fudis-heading", never, { "level": { "alias": "level"; "required": true; }; "variant": { "alias": "variant"; "required": false; }; "id": { "alias": "id"; "required": false; }; "align": { "alias": "align"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Visually separates content sections.
*
* Use this component to visually indicate thematic breaks.
*/
declare class HorizontalRuleComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<HorizontalRuleComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<HorizontalRuleComponent, "fudis-hr", never, {}, {}, never, never, true, never>;
}
/**
* Displays a decorative or semantic icon.
*
* Use this component to enhance recognition, meaning, or visual hierarchy.
*/
declare class IconComponent implements OnChanges {
elementRef: ElementRef;
constructor(elementRef: ElementRef);
/**
* Binding host CSS class to component wrapper
*/
protected _classes: string;
/**
* Displayed SVG icon
*/
icon: FudisIcon;
/**
* Icon color: 'yellow' | 'red' | 'gray-dark' | 'gray-light' | 'primary' | 'primary-dark' |
* 'green' | 'white'
*/
color: FudisIconColor;
/**
* Icon rotation: 'flip-180' | 'cw-90' | 'ccw-90' | 'none'
*/
rotate: FudisIconRotate;
/**
* CSS class list
*/
protected _classList: BehaviorSubject<string[]>;
/**
* Determines icon size by its name. If icon name has suffix "-small", iconSize is set to sm,
* otherwise lg.
*/
private _iconSize;
ngOnChanges(changes: FudisComponentChanges<IconComponent>): void;
/**
* Get CSS classes with correct color, rotate and size suffixes
*/
private _getClasses;
static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "fudis-icon", never, { "icon": { "alias": "icon"; "required": true; }; "color": { "alias": "color"; "required": false; }; "rotate": { "alias": "rotate"; "required": false; }; }, {}, never, never, true, never>;
}
declare class LabelComponent extends PopoverApiDirective {
protected _translationService: FudisTranslationService;
constructor(_translationService: FudisTranslationService);
/**
* Id for label, e. g. used in Dropdown to link ngMaterial mat-select with 'aria-labelledby' to
* fudis-label
*/
id: string;
/**
* Text visible as label
*/
text: string;
/**
* HTML 'for' attribute. E.g. if text-input's id is 'text-input-1', give this id as 'for'
* attribute to the label
*/
for: string;
/**
* Show text indicating if form element associated with the label is required or not
*/
required: boolean | null;
static ɵfac: i0.ɵɵFactoryDeclaration<LabelComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<LabelComponent, "fudis-label", never, { "id": { "alias": "id"; "required": true; }; "text": { "alias": "text"; "required": true; }; "for": { "alias": "for"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, {}, never, never, true, never>;
}
declare class LanguageBadgeComponent implements OnChanges, OnInit {
private _translationService;
private _idService;
constructor(_translationService: FudisTranslationService, _idService: FudisIdService);
language: FudisLanguageAbbr;
parentId: string;
selected: boolean;
variant: 'standard' | 'missing';
ariaLabel: string;
/**
* Click handler outputting clicked language abbreviation
*/
handleClick: EventEmitter<FudisLanguageAbbr>;
/**
* Label string of the badge
*/
protected _badgeLabel: BehaviorSubject<string>;
/**
* Internal variable for selected translation aria-label
*/
protected _selectedTranslation: string;
/**
* Internal variable for missing translation aria-label
*/
protected _missingTranslation: string;
protected _labelTranslations: FudisTranslationLanguageBadgeAriaLabel;
/**
* Generated HTML id
*/
protected _id: string;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<LanguageBadgeComponent>): void;
/**
* Emit badge's language on click
*/
protected _handleLanguageSelect(): void;
/**
* Define correct label for Badge
*/
private _setLabel;
static ɵfac: i0.ɵɵFactoryDeclaration<LanguageBadgeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<LanguageBadgeComponent, "fudis-language-badge", never, { "language": { "alias": "language"; "required": true; }; "parentId": { "alias": "parentId"; "required": true; }; "selected": { "alias": "selected"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "handleClick": "handleClick"; }, never, never, true, never>;
}
type LanguageLabel = {
key: FudisLanguageAbbr;
variant: 'standard' | 'missing';
};
type LanguageLabelArray = LanguageLabel[];
/**
* Displays a group of language indicators.
*
* Use this component to present available or active languages for content.
*/
declare class LanguageBadgeGroupComponent extends PopoverApiDirective implements OnChanges {
protected _translationService: FudisTranslationService;
private _idService;
constructor(_translationService: FudisTranslationService, _idService: FudisIdService);
/**
* Required list of translated languages for Language Badge Group
*/
translatedLanguages: FudisLanguageAbbr[];
/**
* Output Language abbreviation of clicked Badge
*/
handleClick: EventEmitter<FudisLanguageAbbr | null>;
/**
* App language from service
*/
private _currentAppLang;
/**
* App configured selectable languages from service
*/
private _selectableAppLanguages;
/**
* Generated HTML id for the group
*/
protected _id: string;
/**
* Translation for aria-label
*/
protected _groupAriaLabel: BehaviorSubject<string>;
/**
* Internal variable for matching languages and label texts
*/
protected _languageLabels: BehaviorSubject<LanguageLabelArray>;
protected _selectedLanguage: FudisLanguageAbbr | null;
/**
* Set selected language and emits clicked language
*/
protected _updateLanguage(value: FudisLanguageAbbr | null): void;
/**
* Creates an array to loop in template of wanted Language Badges
*/
private _setLanguageOptions;
private _determineSelectedBadge;
ngOnChanges(changes: FudisComponentChanges<LanguageBadgeGroupComponent>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<LanguageBadgeGroupComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<LanguageBadgeGroupComponent, "fudis-language-badge-group", never, { "translatedLanguages": { "alias": "translatedLanguages"; "required": true; }; }, { "handleClick": "handleClick"; }, never, never, true, never>;
}
/**
* Adds link behavior to an element.
*
* Use this directive with anchor element and consider whether link is internal/external.
*/
declare class LinkDirective implements OnInit, OnChanges, AfterViewInit {
private _document;
private _bindedElement;
private _focusService;
private _idService;
private _translationService;
constructor(_document: Document, _bindedElement: ElementRef<HTMLAnchorElement>, _focusService: FudisFocusService, _idService: FudisIdService, _translationService: FudisTranslationService);
/**
* Link default size is 'md' (14px) which is the default size of <fudis-body-text> component. If
* link is used inside of Body Text it will always inherit its parent's font-size.
*/
size: 'inherit' | 'md' | 'lg';
/**
* Set browser focus to link on the first load.
*/
initialFocus: boolean;
/**
* Id for the anchor element. By default generated with FudisIdService
*/
id: string;
/**
* If link opens in a new tab
*/
external: boolean;
/**
* Title for the link
*/
title: string;
/**
* Helper class for link size
*/
private _sizeCssClass;
/**
* Container ref to attach Icon Component
*/
private _viewContainerRef;
/**
* Icon Component reference which will be attached to the View Container
*/
private _iconComponentRef;
/**
* Helper array for parsing long link texts with new-tab icon
*/
private _parsedTitle;
/**
* Aria-label for the external link
*/
private _externalLinkAriaLabel;
ngAfterViewInit(): void;
ngOnInit(): void;
ngOnChanges(changes: FudisComponentChanges<LinkDirective>): void;
private _updateTitleHtml;
/**
* Set size CSS class
*/
private _setSizeClass;
/**
* Add to remove relevant HTML attributes from binded element.
*/
private _setHtmlAttributes;
private _setExternalHtml;
/**
* Used with external links to split the last word of the title to be paired with the Icon, so
* that on line break, the icon sticks with the last word of the title.
*/
private _parseTitle;
static ɵfac: i0.ɵɵFactoryDeclaration<LinkDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<LinkDirective, "[fudisLink]", never, { "size": { "alias": "size"; "required": false; }; "initialFocus": { "alias": "initialFocus"; "required": false; }; "id": { "alias": "id"; "required": false; }; "external": { "alias": "external"; "required": false; }; "title": { "alias": "title"; "required": true; }; }, {}, never, never, true, never>;
}
/**
* Indicates a loading or processing state.
*
* Use this component to inform users of ongoing activity or process.
*/
declare class LoadingSpinnerComponent {
protected _translationService: FudisTranslationService;
constructor(_translationService: FudisTranslationService);
/**
* Visible label text displayed under the spinner icon. If not provided, default text 'Loading' is
* used.
*/
label: string;
/**
* Size variant. Variant 'sm' for smaller page sections and 'lg' for full page.
*/
variant: 'sm' | 'lg';
/**
* Status message for screen reader users. Displayed only for 'lg' variant. Fudis provides default
* 'Page is loading' and 'Page load finished' texts.
*/
statusMessage: string | null;
/**
* For variant 'lg' and better screen reader experience, instead of using `@if` for displaying
* component, set this property true when loading is in progress and false, when loading is not in
* progress. This will trigger screen reader `statusMessage` properties accordingly.
*/
visible: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<LoadingSpinnerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<LoadingSpinnerComponent, "fudis-loading-spinner", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "statusMessage": { "alias": "statusMessage"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, {}, never, never, true, never>;
}
declare class SelectAutocompleteBaseDirective {
protected _elementRef: ElementRef<HTMLInputElement>;
constructor(_elementRef: ElementRef<HTMLInputElement>);
/**
* To enable autocomplete
*/
enableAutocomplete: boolean;
/**
* Determine how many characters must be typed for autocomplete to open available options
*/
typeThreshold: 0 | 3;
/**
* Id of binded Select element
*/
id: string;
/**
* To clear input field when Clear Button is clicked
*/
clearButtonClick: boolean | null;
/**
* Output event for updating parent's filter text signal
*/
handleFilterTextUpdate: EventEmitter<string>;
/**
* Output event for opening parent dropdown
*/
handleDropdownOpen: EventEmitter<void>;
/**
* Output event for closing parent dropdown
*/
handleDropdownClose: EventEmitter<void>;
/**
* Output event for closing parent dropdown
*/
handleClearButtonReset: EventEmitter<void>;
/**
* Output event for input focus
*/
handleFocus: EventEmitter<{
event: FocusEvent;
focusFromClearButton: boolean;
}>;
/**
* Output event for input blur
*/
handleBlur: EventEmitter<FocusEvent>;
/**
* Keyboard button pressed
*/
private _keyDown;
/**
* If Focus came from related clear button
*/
private _focusFromClearButton;
/**
* Currently typed input text
*/
private _inputText;
/**
* If input is focused or not
*/
protected _focused: boolean;
protected _handleFocus(event: FocusEvent): void;
protected _handleBlur(event: FocusEvent): void;
protected _handleKeyDown(event: KeyboardEvent): void;
protected _handleKeyUp(event: KeyboardEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectAutocompleteBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectAutocompleteBaseDirective, "[fudisSelectAutocompleteBase]", never, { "enableAutocomplete": { "alias": "enableAutocomplete"; "required": false; }; "typeThreshold": { "alias": "typeThreshold"; "required": true; }; "id": { "alias": "id"; "required": false; }; "clearButtonClick": { "alias": "clearButtonClick"; "required": false; }; }, { "handleFilterTextUpdate": "handleFilterTextUpdate"; "handleDropdownOpen": "handleDropdownOpen"; "handleDropdownClose": "handleDropdownClose"; "handleClearButtonReset": "handleClearButtonReset"; "handleFocus": "handleFocus"; "handleBlur": "handleBlur"; }, never, never, true, never>;
}
declare class SelectAutocompleteDirective extends SelectAutocompleteBaseDirective implements OnChanges {
constructor(_elementRef: ElementRef<HTMLInputElement>);
/**
* Currently selected visible label
*/
selectedLabel: string | null;
ngOnChanges(changes: FudisComponentChanges<SelectAutocompleteDirective>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectAutocompleteDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectAutocompleteDirective, "[fudisSelectAutocomplete]", never, { "selectedLabel": { "alias": "selectedLabel"; "required": false; }; }, {}, never, never, true, never>;
}
declare class MultiselectAutocompleteDirective extends SelectAutocompleteBaseDirective implements OnChanges {
constructor(_elementRef: ElementRef<HTMLInputElement>);
ngOnChanges(changes: FudisComponentChanges<SelectAutocompleteDirective>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectAutocompleteDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<MultiselectAutocompleteDirective, "[fudisMultiselectAutocomplete]", never, {}, {}, never, never, true, never>;
}
declare class MultiselectChipListComponent<T = string> {
protected _translationService: FudisTranslationService;
constructor(_translationService: FudisTranslationService);
/**
* Reference for the chip list ul element
*/
protected _chipListRef: ElementRef<HTMLUListElement>;
/**
* Array of selected chip items
*/
selectedItems: FudisSelectOption<T>[];
/**
* Parent component id for binding aria attributes
*/
parentId: string;
/**
* Output for removed chip index in selectedItems
*/
handleClick: EventEmitter<FudisSelectOption<T>>;
/**
* Focuses to the sibling and emits clicked index
*
* @param index Clicked index
*/
protected _clickChip(clickedOption: FudisSelectOption<T>, index: number): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectChipListComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectChipListComponent<any>, "fudis-multiselect-chip-list", never, { "selectedItems": { "alias": "selectedItems"; "required": false; }; "parentId": { "alias": "parentId"; "required": false; }; }, { "handleClick": "handleClick"; }, never, never, true, never>;
}
/**
* Groups select options under a common category.
*
* Use this component to organize related options to improve readability.
*/
declare class SelectGroupComponent {
private _idService;
private _parentSelect;
private _parentMultiselect;
constructor(_idService: FudisIdService, _parentSelect: SelectComponent, _parentMultiselect: MultiselectComponent);
/**
* Visible title label for this group of options
*/
label: string;
/**
* Id for this Select Group. Generated with FudisIdService and used for accessibility attributes.
*/
id: string;
/**
* Checks if the select group has content and if the group label should be visible or not.
*/
protected _visibleOptions: WritableSignal<string[]>;
/**
* Called from SelectOption and MultiselectOption to set if the option is visible or not
*
* @param value Value of option
* @param visible State of option's visibility
*/
setOptionVisibility(value: string, visible: boolean): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectGroupComponent, [null, { optional: true; host: true; }, { optional: true; host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<SelectGroupComponent, "fudis-select-group, fudis-multiselect-group", never, { "label": { "alias": "label"; "required": true; }; }, {}, never, ["*"], true, never>;
}
declare class SelectOptionBaseDirective<T = string> extends DropdownItemBaseDirective {
protected _parentGroup: SelectGroupComponent;
protected _translationService: FudisTranslationService;
protected _idService: FudisIdService;
constructor(_document: Document, _parentGroup: SelectGroupComponent, _translationService: FudisTranslationService, _idService: FudisIdService);
/**
* Reference of input or option element
*/
protected _optionInputRef: ElementRef<HTMLOptionElement | HTMLInputElement>;
/**
* Select option data
*/
data: FudisSelectOption<T>;
/**
* State of option visibility
*/
protected _optionVisible: WritableSignal<boolean>;
/**
* Focus state
*/
protected _focused: boolean;
/**
* Common parent and its properties for both Select and Multiselect
*/
protected _parent: SelectComponent<T> | MultiselectComponent<T>;
/**
* Selected state of an option
*/
protected _selected: WritableSignal<boolean>;
/**
* Get visibility status of this option
*/
get visible(): boolean;
/**
* User focus handler
*/
protected _focus(): void;
/**
* For autocompletes, compare if current filter text is contained in this option's label. If not,
* hide the option from the dropdown list.
*
* @param filterText Autocomplete filter text from parent
*/
protected _isOptionVisible(filterText: string): void;
/**
* Update option visibility to parent component
*/
protected _updateVisibilityToParents(visible: boolean): void;
/**
* Handler for keydown keyboard events
*
* @param event Keyboard event
*/
protected _keyDown(event: KeyboardEvent): void;
/**
* Handler for blurring out from focused option
*
* @param event FocusEvent to emit
*/
protected _blur(event: FocusEvent): void;
/**
* Select and Multiselect shared logic for subscribing to parent FormControl's events and syncing
* selected state of options.
*/
protected _initSelectedStateSync(): void;
protected _syncSelectedState(): void;
/**
* Every subclass (i.e. SelectOption and MultiselectOption) needs to implement its own logic to
* determine if it is selected or not, based on the parent select's control value
*/
protected _isSelected(): boolean;
/**
* Boilerplate function to be overriden by SelectOption's and MultiselectOption's own
* implementations
*/
protected _checkVisibilityFromFilterText(filterText: string): void;
/**
* Boilerplate function to be overriden by SelectOption's and MultiselectOption's own
* implementations
*/
protected _clickOption(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionBaseDirective<any>, [null, { optional: true; host: true; }, null, null]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectOptionBaseDirective<any>, "[fudisSelectOptionBase]", never, { "data": { "alias": "data"; "required": true; }; }, {}, never, never, true, never>;
}
/**
* Represents a selectable option within MultiselectComponent.
*/
declare class MultiselectOptionComponent<T = string> extends SelectOptionBaseDirective<T> implements OnDestroy, OnChanges {
protected _parentMultiselect: MultiselectComponent<T>;
private static instanceCounter;
protected readonly componentInstanceId: string;
constructor(_document: Document, _parentMultiselect: MultiselectComponent<T>, _parentGroup: SelectGroupComponent, _idService: FudisIdService, _translationService: FudisTranslationService);
/**
* Common parent and its properties
*/
protected _parent: MultiselectComponent<T>;
ngOnChanges(changes: FudisComponentChanges<MultiselectOptionComponent<T>>): void;
ngOnDestroy(): void;
private clearParentOptionVisibility;
/**
* Click handler for clicking the option
*
* @param event Event
*/
protected _clickOption(event: Event): void;
protected _checkVisibilityFromFilterText(filterText: string): void;
/**
* Checks if this option is currently selected in the parent multiselect and if the option's value
* exists in the parent FormControl's value array.
*/
protected _isSelected(): boolean;
/**
* When option is changed, it will not change Form Control's value, which is intended, but visible
* label should be updated
*/
protected _checkIfLabelRequiresUpdate(newData: FudisSelectOption<T>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectOptionComponent<any>, [null, { host: true; }, { optional: true; host: true; }, null, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectOptionComponent<any>, "fudis-multiselect-option", never, {}, {}, never, never, true, never>;
}
/**
* Displays an information message.
*
* Use this component to inform users about events, updates, or system feedback.
*/
declare class NotificationComponent {
protected _translateService: FudisTranslationService;
constructor(_translateService: FudisTranslationService);
articleElement: ElementRef;
/**
* Notification variant: 'warning' | 'danger' | 'success' | 'info'
*/
variant: FudisNotification;
/**
* Additional description of the notification for screen readers. Internally used in ErrorSummary
* for accessibility reasons.
*/
ariaDescribedby: string;
focus(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NotificationComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NotificationComponent, "fudis-notification", never, { "variant": { "alias": "variant"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Enum representing pagination ellipsis markers\
* Used to indicate hidden page ranges.
*/
declare enum Ellipsis {
start = "start-ellipsis",
end = "end-ellipsis"
}
/**
* Controls navigation through paged data sets.
*
* Use this component to split large collections into manageable pages.
*/
declare class PaginationComponent implements AfterViewChecked, OnInit, OnDestroy {
private _translationService;
private _idService;
private _elementRef;
constructor(_translationService: FudisTranslationService, _idService: FudisIdService, _elementRef: ElementRef<HTMLElement>);
/**
* Template reference for the active item element
*/
activeItemRef?: ElementRef<HTMLElement>;
/**
* Id for Pagination. By default generated.
*/
id: string;
/**
* Aria-Label has always prefix `Pagination:`. Give aria-label that best describes the pagination
* in use
*/
paginationAriaLabel: string;
/**
* Set total amount of pages
*/
set pageCount(value: number);
/**
* Set current page index
*/
set pageIndex(value: number);
/**
* A function that increments **0-based page index** and returns the URL for that page. Example:
* `href=#2`
*/
protected pageHref: (index: number) => string;
/**
* Internal input for setting the number of pages shown in each side of the current page
*/
set siblingCount(value: number);
/**
* On default behavior, focus will stay on pagination component. When set to false, application
* takes responsibility on focus handling on pageChange.
*/
autoFocusOnPageChange: boolean;
/**
* PageChange Emitter
*/
pageChange: EventEmitter<number>;
/**
* Page index has been changed
*/
protected hasUserChangedPage: boolean;
/**
* Protected signal for the total amount of pages
*/
protected _pageCount: WritableSignal<number>;
/**
* Protected signal for the current page index
*/
protected _pageIndex: WritableSignal<number>;
/**
* Prefix for aria-label from Fudis translation keys
*/
protected _paginationPrefix: BehaviorSubject<string>;
/**
* Current page aria-label from Fudis translation keys
*/
protected _paginationCurrent: BehaviorSubject<string>;
/**
* Last page aria-label from Fudis translation keys
*/
protected _paginationLast: BehaviorSubject<string>;
/**
* Previous button label from Fudis translation keys
*/
protected _paginationPreviousButton: BehaviorSubject<string>;
/**
* Next button label from Fudis translation keys
*/
protected _paginationNextButton: BehaviorSubject<string>;
/**
* Previous button aria-label from Fudis translation keys
*/
protected _paginationPreviousButtonAria: BehaviorSubject<string>;
/**
* Next button aria-label from Fudis translation keys
*/
protected _paginationNextButtonAria: BehaviorSubject<string>;
/**
* Main CSS classes for buttons
*/
protected _mainCssPrevClass: BehaviorSubject<string[]>;
protected _mainCssNextClass: BehaviorSubject<string[]>;
/**
* Computed list of pagination items (page numbers + ellipses)\
* Recalculated whenever page count, current page, or sibling count changes.
*/
protected itemList: i0.Signal<(number | Ellipsis)[]>;
/**
* Returns an array of numbers from given starting to ending number
*/
protected range: (start: number, end: number) => number[];
/**
* HTML id
*/
protected _id: string;
/**
* Private signal for counting Pagination item visible siblings
*/
private _siblingCount;
/**
* After DOM is updated, restore focus to the new active element
*/
private userSelectedIndex;
/**
* Stores the previous page index for change detection
*/
private prevPageIndex;
/**
* To observe container size changes and adjust Pagination sibling count based on viewport changes
*/
private observer?;
/**
* Signal to track if a pagination button was clicked, and which one, to manage focus in
* ngAfterViewChecked
*/
private _buttonClickState;
/**
* Get translation for aria-live page openend announcement
*/
get liveAnnouncement(): string;
/**
* Set button collapsed styles if Pagination container is smaller than < 465px
*/
private _setClasses;
/**
* Create function that determines when to show ellipsis on start or end of the pagination list
*/
private createPaginationItemList;
ngOnInit(): void;
/**
* After view updates, restore focus to the active page item if user selected one
*/
ngAfterViewChecked(): void;
ngOnDestroy(): void;
/**
* Emit pageChange event on pagination item click
*/
goToPage(index: number, event?: Event, wasButtonClick?: boolean, buttonType?: 'prev' | 'next'): void;
static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "fudis-pagination", never, { "id": { "alias": "id"; "required": false; }; "paginationAriaLabel": { "alias": "paginationAriaLabel"; "required": true; }; "pageCount": { "alias": "pageCount"; "required": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; }; "siblingCount": { "alias": "siblingCount"; "required": false; }; "autoFocusOnPageChange": { "alias": "autoFocusOnPageChange"; "required": false; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
}
/**
* Displays additional content in an overlay container.
*
* Use this directive to provide contextual information or tips without navigating away from the
* current view. Keep popover content concise.
*/
declare class PopoverDirective extends PopoverApiDirective implements OnInit, AfterViewInit {
private _fudisIdService;
private _boundElement;
private _overlay;
constructor(_fudisIdService: FudisIdService, _boundElement: ElementRef<HTMLAnchorElement>, _overlay: Overlay);
private _destroyRef;
private readonly _offset;
private clickSubscription;
private keydownSubscription;
private scrollSubscription;
private _overlayRef;
private _popoverElementId;
private _isPopoverOpen;
private _positions;
ngOnInit(): void;
ngAfterViewInit(): void;
private _clickHandler;
private _onEscPress;
private _openPopover;
private _focusOutHandler;
private _scrollHandler;
private _closePopover;
private _getPositionStrategy;
private _setAriaForBoundedElement;
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverDirective, "[fudisPopover]", never, {}, {}, never, never, true, never>;
}
/**
* Single radio button option for RadioButtonGroupComponent.
*/
declare class RadioButtonComponent implements OnInit {
private _idService;
protected _parentGroup: RadioButtonGroupComponent;
constructor(_idService: FudisIdService, _parentGroup: RadioButtonGroupComponent);
/**
* Selectable value of a single Radio Button, e.g. "fair-trade-banana"
*/
value: string | boolean | object | null | unknown;
/**
* Visible label for a single Radio Button, e. g. "Fair trade banana"
*/
label: string;
/**
* Emits changed Radio button option and form control.
*/
handleChange: EventEmitter<FudisRadioButtonChangeEvent>;
/**
* Id for single Radio Button
*/
protected _id: string;
/**
* Selected Radio Button change
*/
protected _onChange(): void;
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, [null, { host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "fudis-radio-button", never, { "value": { "alias": "value"; "required": true; }; "label": { "alias": "label"; "required": true; }; }, { "handleChange": "handleChange"; }, never, never, true, never>;
}
/**
* Identifies the actions area of a section.
*
* Use this directive to add buttons that affect the section as a whole.
*/
declare class SectionActionsDirective {
readonly _hostClass = "fudis-section-actions";
static ɵfac: i0.ɵɵFactoryDeclaration<SectionActionsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SectionActionsDirective, "fudis-section-actions", never, {}, {}, never, never, true, never>;
}
/**
* Identifies the main content area of a section.
*
* Use this directive to structure section content.
*/
declare class SectionContentDirective {
readonly _hostClass = "fudis-section-content";
static ɵfac: i0.ɵɵFactoryDeclaration<SectionContentDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SectionContentDirective, "fudis-section-content", never, {}, {}, never, never, true, never>;
}
/**
* Defines a logical content section.
*
* Use this component to group related content and improve page structure.
*/
declare class SectionComponent extends PopoverApiDirective implements OnInit, OnChanges, OnDestroy, AfterContentInit {
private _element;
private _idService;
private _errorSummaryService;
constructor(_element: ElementRef, _idService: FudisIdService, _errorSummaryService: FudisInternalErrorSummaryService);
/**
* Section title
*/
title: string;
/**
* Heading level for the section title
*/
level: FudisHeadingLevel;
/**
* Heading variant for the section title
*/
titleVariant: FudisHeadingVariant;
/**
* Section id
*/
id: string;
/**
* Add badge to the section title
*/
badge: FudisBadgeVariant | null;
/**
* Badge text
*/
badgeText: string | null;
/**
* Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes.
*
* - Xxl = Default value. Viewports of 1600px and larger
* - Xl = Viewports smaller than 1600px
* - Lg = Viewports smaller than 1200px
* - Md = Viewports smaller than 992px
* - Sm = Viewports smaller than 768px
* - Xs = Viewports smaller than 576px
* - Full-width = Grid takes full width of its parent container, no maximum width
*/
width: FudisGridWidth;
/**
* Alignment of Grid component inside its parent
*/
align: FudisGridAlign;
/**
* Custom CSS classes
*/
classes: string;
/**
* Is section title shown in error summary breadcrumb
*/
errorSummaryBreadcrumb: boolean;
/**
* Internal, separate unique heading id
*/
protected _headingId: string;
/**
* Section CSS class list
*/
protected _classList: BehaviorSubject<string>;
/**
* Is info sent to error summary service
*/
private _errorSummaryInfoSent;
private _parentFormId;
ngOnInit(): void;
ngAfterContentInit(): void;
ngOnChanges(changes: FudisComponentChanges<SectionComponent>): void;
ngOnDestroy(): void;
/**
* Send error object to Error Summary Service
*/
private _addToErrorSummary;
/**
* Remove error object from Error Summary Service
*/
private _removeFromErrorSummary;
/**
* Set main CSS class with possible custom classes
*/
private _getClasses;
/**
* Generate id with Id Service
*/
private _setSectionId;
static ɵfac: i0.ɵɵFactoryDeclaration<SectionComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SectionComponent, "fudis-section", never, { "title": { "alias": "title"; "required": true; }; "level": { "alias": "level"; "required": true; }; "titleVariant": { "alias": "titleVariant"; "required": false; }; "id": { "alias": "id"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "width": { "alias": "width"; "required": false; }; "align": { "alias": "align"; "required": false; }; "classes": { "alias": "classes"; "required": false; }; "errorSummaryBreadcrumb": { "alias": "errorSummaryBreadcrumb"; "required": false; }; }, {}, never, ["fudis-section-actions", "fudis-section-content"], true, never>;
}
declare class SelectIconsComponent implements OnChanges {
protected _translationService: FudisTranslationService;
constructor(_translationService: FudisTranslationService);
/**
* If Select's dropdown is open
*/
dropdownOpen: boolean | null;
/**
* Parent Select's variant
*/
parentVariant: FudisSelectVariant;
/**
* Show / hide clear button
*/
clearButton: boolean;
/**
* If clear button is disabled
*/
disabled: boolean;
/**
* Autocomplete's filter text
*/
filterText: boolean;
/**
* Parent Select's form control
*/
parentControl: FormControl;
/**
* Id of parent Select
*/
parentId: string;
/**
* Output event for Clear Button click
*/
handleClearButtonClick: EventEmitter<Event>;
/**
* Output event for Clear Button focus
*/
handleClearButtonFocus: EventEmitter<FocusEvent>;
/**
* Output event for Clear Button blur
*/
handleClearButtonBlur: EventEmitter<FocusEvent>;
/**
* Output event for Clear Button destroy
*/
handleClearButtonDestroy: EventEmitter<void>;
/**
* Observable for status if parent control has value
*/
protected _controlValue: BehaviorSubject<boolean>;
/**
* Translated aria-label for autocomplete close icon button which clears the input
*/
protected _translationClearFilterText: BehaviorSubject<string>;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
private _destroyRef;
/**
* Click handler for Clear Button
*/
protected _clearButtonClick(event: Event): void;
/**
* Focus handler for Clear Button
*/
protected _handleClearButtonFocus(event: FocusEvent): void;
/**
* Blur handler for Clear Button
*/
protected _handleClearButtonBlur(event: FocusEvent): void;
ngOnChanges(changes: FudisComponentChanges<SelectIconsComponent>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectIconsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SelectIconsComponent, "fudis-select-icons", never, { "dropdownOpen": { "alias": "dropdownOpen"; "required": false; }; "parentVariant": { "alias": "parentVariant"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "filterText": { "alias": "filterText"; "required": false; }; "parentControl": { "alias": "parentControl"; "required": false; }; "parentId": { "alias": "parentId"; "required": false; }; }, { "handleClearButtonClick": "handleClearButtonClick"; "handleClearButtonFocus": "handleClearButtonFocus"; "handleClearButtonBlur": "handleClearButtonBlur"; "handleClearButtonDestroy": "handleClearButtonDestroy"; }, never, never, true, never>;
}
/**
* Represents a selectable option within SelectComponent.
*/
declare class SelectOptionComponent<T = string> extends SelectOptionBaseDirective<T> implements OnChanges, OnDestroy {
protected _parentSelect: SelectComponent<T>;
constructor(_document: Document, _parentSelect: SelectComponent<T>, _parentGroup: SelectGroupComponent, _translationService: FudisTranslationService, _idService: FudisIdService);
/**
* Common parent and its properties
*/
protected _parent: SelectComponent<T>;
ngOnChanges(changes: FudisComponentChanges<SelectOptionBaseDirective<T>>): void;
ngOnDestroy(): void;
private clearParentOptionVisibility;
/**
* Click handler for Select Option click
*
* @param event Event emitted
*/
protected _clickOption(event: Event): void;
protected _checkVisibilityFromFilterText(filterText: string): void;
/**
* Checks if this option is currently selected in the parent select.
*/
protected _isSelected(): boolean;
/**
* When option is changed, it will not change Form Control's value, which is intended, but visible
* label should be updated
*/
protected _checkIfLabelRequiresUpdate(newData: FudisSelectOption<T>): void;
/**
* Used with autocomplete to check if filter text matches this option. If yes, then trigger
* selection change in the parent
*
* @param filterText Autocomplete filter text from parent
*/
private _isOptionTyped;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionComponent<any>, [null, { host: true; }, { optional: true; host: true; }, null, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<SelectOptionComponent<any>, "fudis-select-option", never, {}, {}, never, never, true, never>;
}
/**
* Navigation tab panel associated with the TabNavigationBarComponent.
*/
declare class TabNavigationPanelComponent {
/**
* Unique identifier for the component
*/
id: string;
protected _activeTabId: string | undefined;
setActiveTabId: (id: string) => string;
static ɵfac: i0.ɵɵFactoryDeclaration<TabNavigationPanelComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TabNavigationPanelComponent, "fudis-tab-navigation-panel", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Organizes content into selectable tabs.
*
* Use this component to switch between related views within the same context.
*/
declare class TabNavigationBarComponent implements AfterViewInit, OnDestroy {
/**
* Unique identifier for the component
*/
id: string;
/**
* Reference to the TabNavigationPanelComponent
*/
get panel(): TabNavigationPanelComponent;
set panel(value: TabNavigationPanelComponent);
/**
* If panel is not defined you can define the element id where the tab content is projected
*/
ariaControls?: string;
/**
* Variant option
*/
variant?: 'primary' | 'secondary';
tabNavigation: ElementRef;
scrollContainer: ElementRef;
protected _leftContentHidden: i0.WritableSignal<boolean>;
protected _rightContentHidden: i0.WritableSignal<boolean>;
private _ariaControls;
private _tabPanel;
private _currentActiveTabId;
private _scrollSubscription;
private _resizeObserver;
private readonly _scrollAmount;
ngAfterViewInit(): void;
getAriaControls: () => i0.WritableSignal<string | undefined>;
isScrollable: () => boolean;
assertScroll(): void;
scrollLeft(scrollToStart?: boolean): void;
scrollRight(scrollToEnd?: boolean): void;
private _scrollTo;
private _updatePanel;
updateActiveLink(id: string): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TabNavigationBarComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TabNavigationBarComponent, "fudis-tab-navigation-bar", never, { "id": { "alias": "id"; "required": false; }; "panel": { "alias": "panel"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* Button or a link inside a `fudis-tab-navigation-bar`.
*/
declare class TabNavigationTabComponent implements AfterViewInit {
protected _tabNavigation: TabNavigationBarComponent;
protected _isActive: boolean;
protected _ariaControls: string | undefined;
/**
* Unique identifier for the component
*/
id: string;
/**
* Currently active tab
*/
get active(): boolean;
set active(value: boolean);
constructor();
ngAfterViewInit(): void;
protected _onKeyDown: (event: KeyboardEvent) => void;
private _onArrowNavigation;
private _getTabs;
static ɵfac: i0.ɵɵFactoryDeclaration<TabNavigationTabComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TabNavigationTabComponent, "[fudis-tab-navigation-tab]", never, { "id": { "alias": "id"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["*"], true, never>;
}
declare class ValidatorErrorMessageComponent implements OnChanges, OnDestroy, AfterViewInit {
private _errorSummaryService;
private _idService;
constructor(_errorSummaryService: FudisInternalErrorSummaryService, _idService: FudisIdService);
/**
* Id of input this message is related to. Sent to Error Summary service.
*/
focusId: string;
/**
* Label text of input this message is related to. Sent to Error Summary service.
*/
label: string;
/**
* Error type from different keys in e. g. control.errors such as 'required' and 'minlength'
*/
type: string;
/**
* Error message to display
*/
message: Observable<string> | string;
/**
* Is error visible or not
*/
visible: boolean;
/**
* Name of control this error is related to.
*/
controlName: string | undefined;
/**
* Visual variant of error message
*/
variant: 'body-text' | 'form-error';
/**
* Id of parent Form component
*/
formId: string | null;
/**
* Output for handling a state when error is sent to Error Summary
*/
handleCreateError: EventEmitter<FudisErrorSummaryNewError>;
/**
* Output for handling a state when error is removed from Error Summary
*/
handleRemoveError: EventEmitter<FudisErrorSummaryRemoveError>;
/**
* Error message to include in error summary item
*/
protected _currentMessage: BehaviorSubject<string>;
/**
* Id generated with FudisIdService
*/
protected _id: string;
/**
* Has error been created and sent forward
*/
private _errorSent;
/**
* Disposable object for preserving message as Observable string
*/
private _messageSubscribtion;
private _subscribeToMessage;
ngAfterViewInit(): void;
ngOnChanges(changes: FudisComponentChanges<ValidatorErrorMessageComponent>): void;
ngOnDestroy(): void;
throwError(): void;
/**
* Create new error to be sent to Error Summary
*/
private _createError;
/**
* Remove existing error from Error Summary
*/
private _removeError;
static ɵfac: i0.ɵɵFactoryDeclaration<ValidatorErrorMessageComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ValidatorErrorMessageComponent, "fudis-validator-error-message", never, { "focusId": { "alias": "focusId"; "required": true; }; "label": { "alias": "label"; "required": true; }; "type": { "alias": "type"; "required": true; }; "message": { "alias": "message"; "required": true; }; "visible": { "alias": "visible"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "formId": { "alias": "formId"; "required": false; }; }, { "handleCreateError": "handleCreateError"; "handleRemoveError": "handleRemoveError"; }, never, never, true, never>;
}
declare class NgxFudisModule {
static forRoot(): ModuleWithProviders<NgxFudisModule>;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxFudisModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NgxFudisModule, never, [typeof AlertComponent, typeof AlertGroupComponent, typeof BadgeComponent, typeof BodyTextComponent, typeof BreadcrumbsComponent, typeof BreadcrumbsItemComponent, typeof ButtonComponent, typeof CheckboxComponent, typeof CheckboxGroupComponent, typeof CheckboxGroupOptionComponent, typeof i11.CommonModule, typeof ControlComponentBaseDirective, typeof DatepickerComponent, typeof DateRangeComponent, typeof DateEndDirective, typeof DateStartDirective, typeof DescriptionListComponent, typeof DescriptionListItemComponent, typeof DescriptionListItemDetailsComponent, typeof DescriptionListItemTermComponent, typeof DialogActionsDirective, typeof DialogCloseDirective, typeof DialogComponent, typeof DialogContentDirective, typeof DialogTitleDirective, typeof DropdownBaseDirective, typeof DropdownItemBaseDirective, typeof DropdownMenuComponent, typeof DropdownMenuGroupComponent, typeof DropdownMenuItemComponent, typeof ErrorMessageDirective, typeof ErrorSummaryComponent, typeof ExpandableActionsDirective, typeof ExpandableComponent, typeof ExpandableContentDirective, typeof FieldSetComponent, typeof FieldsetActionsDirective, typeof FieldsetContentDirective, typeof FooterComponent, typeof FormActionsDirective, typeof FormCommonApiDirective, typeof FormComponent, typeof FormContentDirective, typeof FormHeaderDirective, typeof FormSubmitDirective, typeof i38.FormsModule, typeof GridApiDirective, typeof GridComponent, typeof GridDirective, typeof GridItemComponent, typeof GridItemDirective, typeof GroupComponentBaseDirective, typeof GuidanceComponent, typeof HeadingComponent, typeof HorizontalRuleComponent, typeof IconButtonComponent, typeof IconComponent, typeof LabelComponent, typeof LanguageBadgeComponent, typeof LanguageBadgeGroupComponent, typeof i53.LayoutModule, typeof LinkDirective, typeof LoadingSpinnerComponent, typeof LocalizedTextGroupComponent, typeof i57.MatButtonModule, typeof i58.MatDatepickerModule, typeof i59.MatDialogModule, typeof i60.MatFormFieldModule, typeof i61.MatInputModule, typeof i62.MatNativeDateModule, typeof MultiselectAutocompleteDirective, typeof MultiselectChipListComponent, typeof MultiselectComponent, typeof MultiselectControlValueAccessorDirective, typeof MultiselectOptionComponent, typeof NotificationComponent, typeof PaginationComponent, typeof PopoverDirective, typeof RadioButtonComponent, typeof RadioButtonGroupComponent, typeof i38.ReactiveFormsModule, typeof i73.RouterModule, typeof i74.ScrollingModule, typeof SectionActionsDirective, typeof SectionComponent, typeof SectionContentDirective, typeof SelectAutocompleteBaseDirective, typeof SelectAutocompleteDirective, typeof SelectBaseDirective, typeof SelectComponent, typeof SelectControlValueAccessorDirective, typeof SelectDropdownComponent, typeof SelectGroupComponent, typeof SelectIconsComponent, typeof SelectOptionBaseDirective, typeof SelectOptionComponent, typeof SelectOptionsDirective, typeof TabNavigationBarComponent, typeof TabNavigationPanelComponent, typeof TabNavigationTabComponent, typeof TextAreaComponent, typeof TextFieldComponentBaseDirective, typeof TextInputComponent, typeof ValidatorErrorMessageComponent], [typeof AlertComponent, typeof AlertGroupComponent, typeof BadgeComponent, typeof BodyTextComponent, typeof BreadcrumbsComponent, typeof BreadcrumbsItemComponent, typeof ButtonComponent, typeof CheckboxComponent, typeof CheckboxGroupComponent, typeof CheckboxGroupOptionComponent, typeof DatepickerComponent, typeof DateRangeComponent, typeof DateStartDirective, typeof DateEndDirective, typeof DescriptionListComponent, typeof DescriptionListItemComponent, typeof DescriptionListItemTermComponent, typeof DescriptionListItemDetailsComponent, typeof DialogComponent, typeof DialogTitleDirective, typeof DialogContentDirective, typeof DialogCloseDirective, typeof DialogActionsDirective, typeof DropdownMenuGroupComponent, typeof DropdownMenuComponent, typeof DropdownMenuItemComponent, typeof ErrorMessageDirective, typeof ExpandableComponent, typeof ExpandableActionsDirective, typeof ExpandableContentDirective, typeof FooterComponent, typeof FieldsetActionsDirective, typeof FieldsetContentDirective, typeof FieldSetComponent, typeof FormComponent, typeof FormActionsDirective, typeof FormContentDirective, typeof FormHeaderDirective, typeof FormSubmitDirective, typeof GridComponent, typeof GridDirective, typeof GridItemComponent, typeof GridItemDirective, typeof HeadingComponent, typeof HorizontalRuleComponent, typeof IconComponent, typeof IconButtonComponent, typeof LocalizedTextGroupComponent, typeof LanguageBadgeGroupComponent, typeof LinkDirective, typeof LoadingSpinnerComponent, typeof MultiselectComponent, typeof MultiselectOptionComponent, typeof NotificationComponent, typeof PaginationComponent, typeof PopoverDirective, typeof RadioButtonComponent, typeof RadioButtonGroupComponent, typeof SectionComponent, typeof SectionActionsDirective, typeof SectionContentDirective, typeof SelectComponent, typeof SelectOptionComponent, typeof SelectOptionsDirective, typeof SelectGroupComponent, typeof TabNavigationBarComponent, typeof TabNavigationPanelComponent, typeof TabNavigationTabComponent, typeof TextAreaComponent, typeof TextInputComponent]>;
static ɵinj: i0.ɵɵInjectorDeclaration<NgxFudisModule>;
}
/**
* Error Summary Service public methods and tools
*/
declare class FudisErrorSummaryService {
private _errorSummaryService;
constructor(_errorSummaryService: FudisInternalErrorSummaryService);
private _destroyRef;
/**
* To store Subscriptions for each sent Observable, so it can be unsubscribed on removeError()
*/
private _subscriptions;
/**
* To define ID for each subscription
*
* @param error With required properties
* @returns Generated id
*/
private _getSubscriptionId;
/**
* Get current updateStrategy of Error Summary. By default 'reloadOnly'.
*/
get updateStrategy(): FudisFormErrorSummaryUpdateStrategy;
/**
* Set updateStrategy of Error Summary
*/
setUpdateStrategy(value: FudisFormErrorSummaryUpdateStrategy): void;
/**
* Reloads all Forms with Error Summary
*/
reloadAllErrors(): void;
/**
* Reload a specific Form Id
*
* @param id Form Id
* @param focus Focus to Error Summary
*/
reloadFormErrors(id: string, focus?: boolean): void;
/**
* Returns an observable of all errors sent to Error Summary. Note, that Observable is updated
* only when reloadFormErrors is called.
*/
getErrorsObservable(): BehaviorSubject<FudisErrorSummaryAllErrors>;
/**
* To add message to specific Form's Error Summary.
*
* @param id Identifier of the message, eg. 'app-custom-error-abc123'
* @param formId Id of Form component
* @param focusId HTML element's id, where user focus should be moved when user clicks the
* message.
* @param message Visible message to the user
*/
addError(id: string, formId: string, focusId: string, message: string | Observable<string>): void;
/**
* To remove messages from Form's Error Summary
*
* @param id Identifier of provided message in 'addError()'
* @param formId Id of Form component
* @param focusId HTML element's id, where user focus should be moved when user clicks the
* message.
*/
removeError(id: string, formId: string, focusId: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration<FudisErrorSummaryService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FudisErrorSummaryService>;
}
/**
* Form Group Validators
*/
declare const FudisGroupValidators: {
oneRequired: typeof oneRequired;
min: typeof min$1;
max: typeof max$1;
};
/**
* At least one option must be selected from a group
*/
declare function oneRequired(message: FudisValidatorMessage): FudisValidatorFn;
/**
* Minimum selected options of a group
*/
declare function min$1(settings: FudisGroupValidatorsMinMaxSettings): FudisValidatorFn;
/**
* Maximum selected options of a group
*/
declare function max$1(settings: FudisGroupValidatorsMinMaxSettings): FudisValidatorFn;
/**
* Form Control Validators
*/
declare const FudisValidators: {
required: typeof required;
email: typeof email;
maxLength: typeof maxLength;
minLength: typeof minLength;
max: typeof max;
min: typeof min;
pattern: typeof pattern;
datepickerMin: typeof datepickerMin;
datepickerMax: typeof datepickerMax;
};
/**
* Fudis version of Validators.required
*/
declare function required(message: FudisValidatorMessage): FudisValidatorFn;
/**
* Fudis version of Validators.email
*/
declare function email(message: FudisValidatorMessage): FudisValidatorFn;
/**
* Fudis version of Validators.maxLength
*/
declare function maxLength(length: number, message: FudisValidatorMessage): FudisValidatorFn;
/**
* Fudis version of Validators.minLength
*
* @param length
* @param message
* @param valueRequired By default this validator does not require, that control value cannot be
* empty. If set true, validator returns error, if control value is falsy.
*/
declare function minLength(length: number, message: FudisValidatorMessage, valueRequired?: boolean): FudisValidatorFn;
/**
* Fudis version of Validators.min
*/
declare function min(minValue: number, message: FudisValidatorMessage): FudisValidatorFn;
/**
* Fudis version of Validators.max
*/
declare function max(maxValue: number, message: FudisValidatorMessage): FudisValidatorFn;
/**
* Fudis version of Validators.pattern
*/
declare function pattern(regex: string | RegExp, message: FudisValidatorMessage): FudisValidatorFn;
/**
* Min date validator for Datepicker
*/
declare function datepickerMin(settings: FudisValidatorsDatepickerSettings): (control: AbstractControl) => {
datepickerMin: {
message: FudisValidatorMessage;
value: Date;
};
} | null;
/**
* Max date validator for Datepicker
*/
declare function datepickerMax(settings: FudisValidatorsDatepickerSettings): (control: AbstractControl) => {
datepickerMax: {
message: FudisValidatorMessage;
value: Date;
};
} | null;
export { AlertComponent, AlertGroupComponent, BadgeComponent, BodyTextComponent, BreadcrumbsComponent, BreadcrumbsItemComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupOptionComponent, DateEndDirective, DateRangeComponent, DateStartDirective, DatepickerComponent, DescriptionListComponent, DescriptionListItemComponent, DescriptionListItemDetailsComponent, DescriptionListItemTermComponent, DialogActionsDirective, DialogCloseDirective, DialogComponent, DialogContentDirective, DialogTitleDirective, DropdownMenuComponent, DropdownMenuGroupComponent, DropdownMenuItemComponent, ErrorMessageDirective, ExpandableActionsDirective, ExpandableComponent, ExpandableContentDirective, FUDIS_DATE_FORMATS, FieldSetComponent, FieldsetActionsDirective, FieldsetContentDirective, FooterComponent, FormActionsDirective, FormComponent, FormContentDirective, FormHeaderDirective, FormSubmitDirective, FudisAlertService, FudisBreakpointService, FudisDateInputFormat, FudisDialogService, FudisErrorSummaryService, FudisGridService, FudisGroupValidators, FudisTranslationService, FudisValidators, GridComponent, GridDirective, GridItemComponent, GridItemDirective, HeadingComponent, HorizontalRuleComponent, IconButtonComponent, IconComponent, LanguageBadgeGroupComponent, LinkDirective, LoadingSpinnerComponent, LocalizedTextGroupComponent, MultiselectComponent, MultiselectOptionComponent, NgxFudisModule, NotificationComponent, PaginationComponent, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SectionActionsDirective, SectionComponent, SectionContentDirective, SelectComponent, SelectGroupComponent, SelectOptionComponent, SelectOptionsDirective, TabNavigationBarComponent, TabNavigationPanelComponent, TabNavigationTabComponent, TextAreaComponent, TextInputComponent, breakpointsMinWidthToObserve, defaultSpacingValue, fudisAlertPositionArray, fudisBadgeVariantArray, fudisBodyTextArray, fudisBreakpointsMinWidth, fudisButtonSizeArray, fudisButtonTypeArray, fudisButtonVariantArray, fudisDialogSizeArray, fudisDropdownMenuAlignArray, fudisFieldsetActionsAlignArray, fudisGridAlignArray, fudisGridAlignItemsArray, fudisGridWidthArray, fudisHeadingLevelArray, fudisHeadingVariantArray, fudisIconArray, fudisIconColorArray, fudisIconRotateArray, fudisIdComponents, fudisIdGrandParents, fudisIdParents, fudisInputSizeArray, fudisNotificationVariantArray, fudisSpacingArray, fudisSpacingValues, fudisTextAlignArray, gridColumnDefault, gridInputPropertyDefaults, gridItemDefault };
export type { FudisAlert, FudisAlertElement, FudisAlertPosition, FudisBadgeVariant, FudisBodyText, FudisBreakpointBoundary, FudisBreakpointKey, FudisBreakpointStyleProperty, FudisBreakpointStyleResponsive, FudisBreakpointValueResponsive, FudisButtonSize, FudisButtonType, FudisButtonVariant, FudisCheckboxChangeEvent, FudisCheckboxGroupChangeEvent, FudisCheckboxGroupFormGroup, FudisCheckboxGroupOption, FudisCheckboxOption, FudisComponentChanges, FudisDefaultGridProperties, FudisDescriptionListItemDetailLanguageContent, FudisDescriptionListVariant, FudisDialogSize, FudisDropdownMenuAlign, FudisErrorSummaryAllErrors, FudisErrorSummaryAllErrorsSignal, FudisErrorSummaryFormErrors, FudisErrorSummaryNewError, FudisErrorSummaryRemoveError, FudisExpandableType, FudisFormErrorSummaryUpdateStrategy, FudisGridAlign, FudisGridAlignItems, FudisGridColumns, FudisGridColumnsResponsive, FudisGridFormInputWidth, FudisGridGap, FudisGridItemAlignResponsive, FudisGridItemAlignment, FudisGridItemColumnsResponsive, FudisGridItemWidth, FudisGridProperties, FudisGridPropertyCollection, FudisGridWidth, FudisGroupValidatorsMinMaxSettings, FudisHeadingLevel, FudisHeadingVariant, FudisIcon, FudisIconColor, FudisIconRotate, FudisIdComponent, FudisIdData, FudisIdDlFamily, FudisIdDlItem, FudisIdDropdownMenuFamily, FudisIdGrandParent, FudisIdParent, FudisIdSelectFamily, FudisInputSize, FudisInputType, FudisLanguageAbbr, FudisLocalizedTextGroupDefaultFormGroup, FudisLocalizedTextGroupFormGroup, FudisLocalizedTextGroupFormGroupOptions, FudisNotification, FudisPopoverPosition, FudisRadioButtonChangeEvent, FudisRadioButtonOption, FudisSelectOption, FudisSelectVariant, FudisSpacing, FudisSpacingResponsive, FudisTextAlign, FudisValidationErrors, FudisValidatorFn, FudisValidatorMessage, FudisValidatorsDatepickerSettings, fudisFieldsetActionsAlign };