design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
1,279 lines (1,239 loc) • 161 kB
TypeScript
import * as i0 from '@angular/core';
import { Provider, InjectionToken, AfterViewInit, OnChanges, EventEmitter, Renderer2, ElementRef, ChangeDetectorRef, SimpleChanges, TemplateRef, QueryList, OnDestroy, OnInit, DestroyRef, DoCheck, PipeTransform, ModuleWithProviders, EnvironmentProviders } from '@angular/core';
import { Modal } from 'bootstrap';
import { FormControl, ControlValueAccessor, NgControl, ControlContainer, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
import * as rxjs from 'rxjs';
import { Subject, Observable } from 'rxjs';
import Player from 'video.js/dist/types/player';
import { TranslateService, TranslatePipe } from '@ngx-translate/core';
import { ProgressDonut } from 'bootstrap-italia';
import { Location } from '@angular/common';
import { SafeHtml } from '@angular/platform-browser';
/**
* The bootstrap-italia asset folder path
* @default ./bootstrap-italia
*/
declare const IT_ASSET_BASE_PATH: InjectionToken<string>;
interface DesignAngularKitConfig {
/**
* The bootstrap-italia asset folder path
* @default ./bootstrap-italia
*/
assetBasePath?: string;
/**
* Load the <a href="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/#fonts">bootstrap-italia fonts</a>
* @default true
*/
loadFont?: boolean;
/**
* The TranslateModule loader
* @param itPrefix the design-angular-kit i18n path
* @param itSuffix the design-angular-kit i18n suffix
* @default
* {
* provide: TranslateLoader,
* useFactory: (http: HttpClient) => new TranslateHttpLoader(http, `${assetBasePath}/i18n/`, `.json?v${version}`),
* deps: [HttpClient],
* }
*/
translateLoader?: (itPrefix: string, itSuffix: string) => Provider;
}
declare abstract class ItAbstractComponent implements AfterViewInit, OnChanges {
/**
* The element ID
*/
id: string;
/**
* Fired when component input attributes was changed
*/
valueChanges: EventEmitter<void>;
/**
* Counter of active instances
* @private
*/
private static instances;
protected readonly _renderer: Renderer2;
protected readonly _elementRef: ElementRef;
protected readonly _changeDetectorRef: ChangeDetectorRef;
constructor();
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
/**
* Generate unique id for components
* @private
*/
private getDefaultId;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAbstractComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItAbstractComponent, "ng-component", never, { "id": { "alias": "id"; "required": false; }; }, { "valueChanges": "valueChanges"; }, never, never, false, never>;
}
type BooleanInput = 'false' | 'true' | boolean | undefined;
declare class ItCollapseComponent extends ItAbstractComponent implements AfterViewInit {
/**
* Enable multiple collapse
* @default false
*/
multi?: boolean;
/**
* Toggles the collapsible element on invocation
* @default false
*/
opened?: boolean;
/**
* Custom class
*/
class: string;
/**
* This event fires immediately when the show method is called.
*/
showEvent: EventEmitter<Event>;
/**
* This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
*/
shownEvent: EventEmitter<Event>;
/**
* This event fires immediately when the hide method is called.
*/
hideEvent: EventEmitter<Event>;
/**
* This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
*/
hiddenEvent: EventEmitter<Event>;
private collapse?;
private open;
protected collapseDiv?: ElementRef<HTMLDivElement>;
ngAfterViewInit(): void;
/**
* Shows if collapse is open or not
*/
isOpen(): boolean;
/**
* Shows a resealable item
* NOTE: Returns to the caller before the collapsable element has actually been shown (onShown event).
*/
show(): void;
/**
* Hides a resealable item
* NOTE: Returns to the caller before the collapsable element has actually been hidden (onHidden Event)
*/
hide(): void;
/**
* Toggle a collapsible item to show or hide it.
* NOTE: Returns to the caller before the collapsable element has actually been shown or hidden (onShown and onHidden events)
*/
toggle(): void;
/**
* Eliminates the possibility of an item being resealable
*/
dispose(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItCollapseComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItCollapseComponent, "it-collapse", ["itCollapse"], { "multi": { "alias": "multi"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "showEvent": "showEvent"; "shownEvent": "shownEvent"; "hideEvent": "hideEvent"; "hiddenEvent": "hiddenEvent"; }, never, ["*"], true, never>;
static ngAcceptInputType_multi: BooleanInput;
static ngAcceptInputType_opened: BooleanInput;
}
/**
* Accordion
* @description Build vertically collapsible accordions based on Collapse.
*/
declare class ItAccordionComponent extends ItCollapseComponent implements AfterViewInit {
/**
* Accordion Title
*/
title: string;
protected collapseDiv?: ElementRef<HTMLDivElement>;
protected isCollapsed: boolean;
ngAfterViewInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAccordionComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItAccordionComponent, "it-accordion", ["itAccordion"], { "title": { "alias": "title"; "required": true; }; }, {}, never, ["*"], true, never>;
}
type IconSize = 'xs' | 'sm' | 'lg' | 'xl';
type IconColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'white';
type IconName = (typeof IconNameArray)[number];
declare const IconNameArray: readonly ["arrow-down", "arrow-down-circle", "arrow-down-triangle", "arrow-left", "arrow-left-circle", "arrow-left-triangle", "arrow-right", "arrow-right-circle", "arrow-right-triangle", "arrow-up", "arrow-up-circle", "arrow-up-triangle", "ban", "bluesky", "bookmark", "box", "burger", "calendar", "camera", "car", "card", "cart", "chart-line", "check", "check-circle", "chevron-left", "chevron-right", "clip", "clock", "close", "close-big", "close-circle", "code-circle", "comment", "copy", "delete", "download", "error", "exchange-circle", "expand", "external-link", "flag", "folder", "fullscreen", "funnel", "hearing", "help", "help-circle", "horn", "inbox", "info-circle", "key", "link", "list", "locked", "logout", "mail", "mail-open", "map-marker", "map-marker-circle", "map-marker-minus", "map-marker-plus", "maximize", "maximize-alt", "minimize", "minus", "minus-circle", "more-actions", "more-items", "note", "pa", "password-invisible", "password-visible", "pencil", "piattaforme", "pin", "plug", "plus", "plus-circle", "presentation", "print", "refresh", "restore", "rss", "rss-square", "search", "settings", "share", "sign", "software", "star-full", "star-outline", "telephone", "tool", "unlocked", "upload", "user", "video", "warning", "warning-circle", "wifi", "zoom-in", "zoom-out", "file", "files", "file-audio", "file-compressed", "file-csv", "file-docx", "file-json", "file-image", "file-odp", "file-ods", "file-odt", "file-pdf", "file-pdf-ext", "file-sheet", "file-slides", "file-ppt", "file-signed", "file-txt", "file-video", "file-xlsx", "file-xml", "behance", "android-square", "android", "apple-square", "apple", "facebook", "facebook-square", "figma", "figma-square", "flickr", "flickr-square", "github", "instagram", "linkedin", "linkedin-square", "mastodon", "mastodon-square", "medium", "medium-square", "moodle", "moodle-square", "pinterest", "pinterest-square", "quora", "quora-square", "reddit", "reddit-square", "slack", "slack-square", "snapchat", "snapchat-square", "stackexchange", "stackexchange-square", "stackoverflow", "stackoverflow-square", "telegram", "threads", "threads-square", "tiktok", "tiktok-square", "twitter", "twitter-square", "vimeo", "vimeo-square", "whatsapp", "whatsapp-square", "youtube", "google", "spotify", "designers-italia", "team-digitale"];
type AlertColor = 'primary' | 'info' | 'success' | 'warning' | 'danger';
type ButtonColor = 'primary' | 'outline-primary' | 'secondary' | 'outline-secondary' | 'success' | 'outline-success' | 'danger' | 'outline-danger' | 'warning' | 'outline-warning' | 'info' | 'outline-info' | 'light' | 'outline-light' | 'dark' | 'outline-dark' | 'link';
type ButtonSize = 'lg' | 'sm' | 'xs';
type ButtonType = 'submit' | 'button';
type CalloutColor = 'success' | 'warning' | 'danger' | 'important' | 'note';
type CalloutAppearance = 'default' | 'highlight' | 'more';
type ChipColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
type ElementPlacement = 'top' | 'bottom' | 'left' | 'right';
type ProgressBarColor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
type BadgeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
type TableColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
type TableHeadColor = 'light' | 'dark';
type TableResponsive = 'responsive' | 'responsive-sm' | 'responsive-md' | 'responsive-lg' | 'responsive-xl' | 'responsive-xxl';
type VerticalAlignment = 'align-baseline' | 'align-top' | 'align-middle' | 'align-bottom' | 'align-text-bottom' | 'align-text-top';
type DropdownDirection = 'dropup' | 'dropend' | 'dropstart';
type CarouselType = 'default' | 'three-cols' | 'three-cols-arrow-visible';
type TimelinePINType = 'default' | 'evidence' | 'now';
interface TimelineElement {
pin: {
type?: TimelinePINType;
icon?: IconName;
text: string;
};
category?: {
title: string;
link: string;
};
title: string;
text: string;
signature?: string;
eventDate?: Date;
link?: string;
}
interface Notification {
/**
* Notification type
*/
type: NotificationType;
/**
* Notification title
*/
title: string;
/**
* Notification message / text
*/
message?: string;
/**
* Custom duration of notification
*/
duration?: number;
/**
* The close notification button appears
*/
dismissible?: boolean;
/**
* Custom position of notification
*/
position?: NotificationPosition;
/**
* Custom icon of notification
*/
icon?: IconName;
}
declare enum NotificationType {
Standard = "standard",
Success = "success",
Error = "error",
Info = "info",
Warning = "warning"
}
declare enum NotificationPosition {
Top = "top-fix mt-3",
Bottom = "bottom-fix mb-3",
Left = "left-fix ms-3",
Right = "right-fix me-3"
}
/**
* Alert
* @description You can provide feedback to the user via alert messages.
*/
declare class ItAlertComponent extends ItAbstractComponent implements AfterViewInit {
/**
* The alert color
* @default info
*/
color: AlertColor;
/**
* Inserts the close button
* @default false
*/
dismissible?: boolean;
/**
* This event fires immediately when the instance's close method is called.
*/
closeEvent: EventEmitter<Event>;
/**
* This event fires when the alert has been closed (it will wait for CSS transitions to complete).
*/
closedEvent: EventEmitter<Event>;
private alert?;
private alertElement?;
ngAfterViewInit(): void;
/**
* Close an alert by removing it from the DOM.
* If the `.fade` and `.show` classes are present in the element, the alert will be closed with a disappearing effect.
*/
close(): void;
/**
* The alert is removed
*/
dispose(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAlertComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItAlertComponent, "it-alert", ["itAlert"], { "color": { "alias": "color"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeEvent": "closeEvent"; "closedEvent": "closedEvent"; }, never, ["[heading]", "*"], true, never>;
static ngAcceptInputType_dismissible: BooleanInput;
}
declare class ItAvatarListItemDirective {
get hostClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarListItemDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItAvatarListItemDirective, "[itAvatarListItem]", ["itAvatarListItem"], {}, {}, never, never, true, never>;
}
declare class ItAvatarGroupItemComponent {
_implicitContent: TemplateRef<any>;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarGroupItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItAvatarGroupItemComponent, "it-avatar-item", never, {}, {}, never, ["*"], true, never>;
}
declare class ItAvatarGroupComponent {
linkList: boolean;
avatars: QueryList<ItAvatarGroupItemComponent>;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarGroupComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItAvatarGroupComponent, "it-avatar-group", never, { "linkList": { "alias": "linkList"; "required": false; }; }, {}, ["avatars"], never, true, never>;
static ngAcceptInputType_linkList: BooleanInput;
}
declare class ItAvatarDropdownItemComponent {
_implicitContent: TemplateRef<any>;
/**
* Indica il link che possiamo passare all'elemento
*/
link: string | any[] | null | undefined;
/**
* Permette di utilizzare l'attributo html title
*/
title?: string;
/**
* Permette di utilizzare l'attributo html accesskey
*/
accesskey?: string;
/**
* Permette di utilizzare l'attributo html tabindex
*/
tabindex?: number;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarDropdownItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItAvatarDropdownItemComponent, "it-avatar-dropdown-item", never, { "link": { "alias": "link"; "required": false; }; "title": { "alias": "title"; "required": false; }; "accesskey": { "alias": "accesskey"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; }, {}, never, ["*"], true, never>;
}
declare class ItAvatarDropdownComponent {
componentClass: string;
items: QueryList<ItAvatarDropdownItemComponent>;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarDropdownComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItAvatarDropdownComponent, "it-avatar-dropdown", never, {}, {}, ["items"], ["[it-avatar-dropdown-toggle]"], true, never>;
}
declare enum SizesEnum {
xs = "size-xs",
sm = "size-sm",
lg = "size-lg",
xl = "size-xl",
xxl = "size-xxl"
}
declare class ItAvatarDirective {
/**
* Indica il colore dell'avatar. Può assumere i valori:
* <ul>
* <li> primary
* <li> secondary
* <li> green
* <li> orange
* <li> red
* </ul>
*/
get color(): string | undefined;
set color(value: string | undefined);
private _color?;
/**
* Indica la grandezza dell'avatar. Può assumere i valori:
* <ul>
* <li> xs
* <li> sm
* <li> lg
* <li> xl
* <li> xxl
* </ul>
*/
get size(): SizesEnum | undefined;
set size(value: string | undefined);
private _size?;
get hostClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItAvatarDirective, "[itAvatar]", ["itAvatar"], { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
}
declare class ItAvatarExtraTextDirective {
get hostClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarExtraTextDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItAvatarExtraTextDirective, "[itAvatarExtraText]", ["itAvatarExtraText"], {}, {}, never, never, true, never>;
}
declare class ItAvatarWrapperDirective {
extraText: boolean;
get hostClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarWrapperDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItAvatarWrapperDirective, "[itAvatarWrapper]", ["itAvatarWrapper"], { "extraText": { "alias": "extraText"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_extraText: BooleanInput;
}
declare class ItAvatarStatusDirective {
/**
* Indica lo stato della presenza. Può assumere i valori:
* <ul>
* <li> approved
* <li> declined
* <li> notify
* </ul>
*/
get status(): string | undefined;
set status(value: string | undefined);
private _status?;
get hostClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarStatusDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItAvatarStatusDirective, "[itAvatarStatus]", ["itAvatarStatus"], { "status": { "alias": "status"; "required": false; }; }, {}, never, never, true, never>;
}
declare class ItAvatarPresenceDirective {
/**
* Indica lo stato della presenza. Può assumere i valori:
* <ul>
* <li> active
* <li> busy
* <li> hidden
* </ul>
*/
get presence(): string | undefined;
set presence(value: string | undefined);
private _presence?;
get hostClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarPresenceDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItAvatarPresenceDirective, "[itAvatarPresence]", ["itAvatarPresence"], { "presence": { "alias": "presence"; "required": false; }; }, {}, never, never, true, never>;
}
declare class ItAvatarModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ItAvatarModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ItAvatarModule, never, [typeof ItAvatarGroupItemComponent, typeof ItAvatarGroupComponent, typeof ItAvatarDropdownComponent, typeof ItAvatarDropdownItemComponent, typeof ItAvatarDirective, typeof ItAvatarExtraTextDirective, typeof ItAvatarWrapperDirective, typeof ItAvatarStatusDirective, typeof ItAvatarPresenceDirective, typeof ItAvatarListItemDirective], [typeof ItAvatarGroupItemComponent, typeof ItAvatarGroupComponent, typeof ItAvatarDropdownComponent, typeof ItAvatarDropdownItemComponent, typeof ItAvatarDirective, typeof ItAvatarExtraTextDirective, typeof ItAvatarWrapperDirective, typeof ItAvatarStatusDirective, typeof ItAvatarPresenceDirective, typeof ItAvatarListItemDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ItAvatarModule>;
}
/**
* Badge
* @description Useful for small counters and labels
*/
declare class ItBadgeDirective {
/**
* Define the badge color
* @default undefined
*/
color: BadgeColor | undefined;
/**
* Show rounded badge
* @default false
*/
rounded?: boolean;
protected get badgeClass(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItBadgeDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItBadgeDirective, "[itBadge]", ["itBadge"], { "color": { "alias": "itBadge"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_rounded: BooleanInput;
}
declare class ItIconComponent {
/**
* The icon name
*/
name: IconName;
/**
* The icon size
*/
size: IconSize | undefined;
/**
* The icon color
*/
color: IconColor | undefined;
/**
* Create a padding proportional to the size of the surrounding icon.
* @default false
*/
padded?: boolean;
/**
* Custom class of svg
*/
svgClass: string | undefined;
/**
* Title of the icon
*/
title: string | undefined;
/**
* Custom Waria label
*/
labelWaria: string | undefined;
/**
* Return the icon href
*/
protected get iconHref(): string;
/**
* Return the icon class
*/
protected get iconClass(): string;
/**
* The bootstrap-italia asset folder path
* @default ./bootstrap-italia
*/
protected assetBasePath: string;
get isAriaHidden(): boolean;
get role(): string | null;
constructor();
static ɵfac: i0.ɵɵFactoryDeclaration<ItIconComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItIconComponent, "it-icon", never, { "name": { "alias": "name"; "required": true; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "padded": { "alias": "padded"; "required": false; }; "svgClass": { "alias": "svgClass"; "required": false; }; "title": { "alias": "title"; "required": false; }; "labelWaria": { "alias": "labelWaria"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_padded: BooleanInput;
}
/**
* Button
* @description Bootstrap italia custom button styles
*/
declare class ItButtonDirective {
private progressButtonComponent;
/**
* Button color
* @default undefined
*/
color: ButtonColor | undefined;
/**
* Button size
* @default undefined
*/
size: ButtonSize | undefined;
/**
* Indicates whether the button occupies all the width available to it.
* @default undefined
*/
block: ButtonSize | undefined;
/**
* If button is disabled
* @default false
*/
disabled?: boolean;
/**
* The type attribute
* @default button
*/
type: 'button' | 'reset' | 'submit';
/**
* The icon children
* @default undefined
*/
protected icons?: QueryList<ItIconComponent>;
protected get hostClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItButtonDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItButtonDirective, "[itButton]", ["itButton"], { "color": { "alias": "itButton"; "required": false; }; "size": { "alias": "size"; "required": false; }; "block": { "alias": "block"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, ["icons"], never, true, never>;
static ngAcceptInputType_disabled: BooleanInput;
}
/**
* Callout
* @description Callouts can be used to highlight certain parts of the text that require particular attention. They may contain error messages, warnings, hints, etc.
*/
declare class ItCalloutComponent {
/**
* Callout label
* @default undefined
*/
label: string | undefined;
/**
* Callout hiddenLabel
* @default undefined
*/
hiddenLabel: string | undefined;
/**
* Callout color
* - <b>success</b>
* - <b>danger</b>
* - <b>warning</b>
* - <b>important</b>
* - <b>note</b>
* @default undefined
*/
color: CalloutColor | undefined;
/**
* Callout appearance
* - <b>default</b>
* - <b>highlight</b>: Callout version with border only on the left side
* - <b>more</b>: It looks radically different from the other styles available and is suitable for more extensive texts
* @default default
*/
appearance: CalloutAppearance;
/**
* Custom icon
* @default undefined
*/
icon: IconName | undefined;
/**
* The input label even get labelWaria icon
* @default undefined
*/
labelWaria: string | undefined;
protected get iconName(): IconName;
static ɵfac: i0.ɵɵFactoryDeclaration<ItCalloutComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItCalloutComponent, "it-callout", never, { "label": { "alias": "label"; "required": false; }; "hiddenLabel": { "alias": "hiddenLabel"; "required": false; }; "color": { "alias": "color"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "labelWaria": { "alias": "labelWaria"; "required": false; }; }, {}, never, ["[bigText]", "*"], true, never>;
}
/**
* Card
* @description A container of texts and images with many options and variations.
*/
declare class ItCardComponent extends ItAbstractComponent {
/**
* To create inline cards
* @default false
*/
inline?: boolean;
/**
* To create inline mini cards
* @default false
*/
mini?: boolean;
/**
* To add border
* @default true
*/
border: boolean;
/**
* To create banner cards
* @default false
*/
banner?: boolean;
/**
* To create profile cards
* @default false
*/
profile?: boolean;
/**
* To create rounded cards
* @default false
*/
rounded?: boolean;
/**
* To create inline reverse cards
* @default false
*/
reverse?: boolean;
/**
* To create full height cards
* @default false
*/
fullHeight?: boolean;
/**
* Card with image
* @default false
*/
hasImage?: boolean;
/**
* To add top border
* @default false
*/
borderTop?: boolean;
/**
* Custom card class
* @default ''
*/
cardClass: string;
/**
* Custom card body class
* @default ''
*/
bodyClass: string;
/**
* Shadow type
* @default 'sm'
*/
shadow: 'sm' | 'lg' | 'normal' | 'none';
static ɵfac: i0.ɵɵFactoryDeclaration<ItCardComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItCardComponent, "it-card", never, { "inline": { "alias": "inline"; "required": false; }; "mini": { "alias": "mini"; "required": false; }; "border": { "alias": "border"; "required": false; }; "banner": { "alias": "banner"; "required": false; }; "profile": { "alias": "profile"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "fullHeight": { "alias": "fullHeight"; "required": false; }; "hasImage": { "alias": "hasImage"; "required": false; }; "borderTop": { "alias": "borderTop"; "required": false; }; "cardClass": { "alias": "cardClass"; "required": false; }; "bodyClass": { "alias": "bodyClass"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; }, {}, never, ["[beforeBody]", "*"], true, never>;
static ngAcceptInputType_inline: BooleanInput;
static ngAcceptInputType_mini: BooleanInput;
static ngAcceptInputType_border: BooleanInput;
static ngAcceptInputType_banner: BooleanInput;
static ngAcceptInputType_profile: BooleanInput;
static ngAcceptInputType_rounded: BooleanInput;
static ngAcceptInputType_reverse: BooleanInput;
static ngAcceptInputType_fullHeight: BooleanInput;
static ngAcceptInputType_hasImage: BooleanInput;
static ngAcceptInputType_borderTop: BooleanInput;
}
/**
* Carousel Item
* @description element, image or text slide of carousel
*/
declare class ItCarouselItemComponent extends ItAbstractComponent {
/**
* The content of item
*/
htmlContent: TemplateRef<any>;
static ɵfac: i0.ɵɵFactoryDeclaration<ItCarouselItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItCarouselItemComponent, "it-carousel-item", never, {}, {}, never, ["*"], true, never>;
}
/**
* Carousel
* @description A presentation component for scrolling through elements, images or text slides.
*/
declare class ItCarouselComponent implements AfterViewInit, OnDestroy {
private readonly _changeDetectorRef;
/**
* The callout title
* @default undefined
*/
title: string | undefined;
/**
* The carousel type
* @default default
*/
type: CarouselType;
/**
* Custom class in splide__track element
* @default ''
*/
trackClass: string;
/**
* True for full screen (landscape) viewing
* @default false
*/
fullCarousel?: boolean;
/**
* To indicate that the contained image is of a large type
* @default false
*/
bigImg?: boolean;
/**
* To indicate that the contained image is of a standard type
* @default false
*/
standardImage?: boolean;
/**
* Card line style
* @default false
*/
lined?: boolean;
protected items?: QueryList<ItCarouselItemComponent>;
private carousel?;
private carouselDiv;
private itemSubscriptions?;
protected get typeClass(): string;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* Removes Carousel features
*/
dispose(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItCarouselComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItCarouselComponent, "it-carousel", ["itCarousel"], { "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "required": false; }; "trackClass": { "alias": "trackClass"; "required": false; }; "fullCarousel": { "alias": "fullCarousel"; "required": false; }; "bigImg": { "alias": "bigImg"; "required": false; }; "standardImage": { "alias": "standardImage"; "required": false; }; "lined": { "alias": "lined"; "required": false; }; }, {}, ["items"], never, true, never>;
static ngAcceptInputType_fullCarousel: BooleanInput;
static ngAcceptInputType_bigImg: BooleanInput;
static ngAcceptInputType_standardImage: BooleanInput;
static ngAcceptInputType_lined: BooleanInput;
}
declare class ItCarouselModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ItCarouselModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ItCarouselModule, never, [typeof ItCarouselComponent, typeof ItCarouselItemComponent], [typeof ItCarouselComponent, typeof ItCarouselItemComponent]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ItCarouselModule>;
}
declare class ItChipComponent {
/**
* Indica la label
*/
set label(value: string);
get label(): string;
private _label;
/**
* Indica se mostrate il pulante di chisura
*/
set showCloseButton(value: boolean);
get showCloseButton(): boolean;
private _showCloseButton;
/**
* Indica il size
*/
set size(value: '' | 'lg');
get size(): '' | 'lg';
private _size;
/**
* Indica il colore della chip
*/
set color(value: ChipColor | undefined);
get color(): ChipColor | undefined;
private _color;
/**
* Indica se la chip è disabilitata
*/
set disabled(value: boolean);
get disabled(): boolean;
private _disabled;
/**
* Indica il nome dell'icona, se valorizzata viene mostrata
*/
set icon(value: IconName | undefined);
get icon(): IconName | undefined;
private _icon;
/**
* Indica l'url dell'avatar, se valorizzata viene mostrata
*/
set avatar(value: string | undefined);
get avatar(): string | undefined;
private _avatar;
/**
* Indica il valore da aggiungere al parametro alt, di default ''
*/
set altAvatar(value: string);
get altAvatar(): string;
private _altAvatar;
/**
* Evento emesso al click sul bottone di chiusura
*/
closeEvent: EventEmitter<any>;
/**
* Return the icon href
*/
protected get iconHref(): string;
private iconClose;
/**
* Return the close icon href
*/
protected get iconCloseHref(): string;
/**
* The bootstrap-italia asset folder path
* @default ./bootstrap-italia
*/
protected assetBasePath: string;
constructor();
clickToClose(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItChipComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItChipComponent, "it-chip", never, { "label": { "alias": "label"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "altAvatar": { "alias": "altAvatar"; "required": false; }; }, { "closeEvent": "closeEvent"; }, never, never, true, never>;
}
type DimmerColor = '' | 'dimmer-primary';
declare class ItDimmerComponent implements OnInit {
private elementRef;
/**
* Dimmer status
* @default false
*/
set active(value: boolean);
get active(): boolean;
private _active;
/**
* Colore del dimmer
* @default ''
*/
set color(value: DimmerColor);
get color(): DimmerColor;
private _color;
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItDimmerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItDimmerComponent, "it-dimmer", never, { "active": { "alias": "active"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
}
declare class ItDimmerIconComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<ItDimmerIconComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItDimmerIconComponent, "it-dimmer-icon", never, {}, {}, never, ["*"], true, never>;
}
declare class ItDimmerButtonsComponent {
/**
* Indica se abbiamo 1 solo bottone
* @default false
*/
set hasOneButton(value: boolean);
get hasOneButton(): boolean;
private _hasOneButton;
static ɵfac: i0.ɵɵFactoryDeclaration<ItDimmerButtonsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItDimmerButtonsComponent, "it-dimmer-buttons", never, { "hasOneButton": { "alias": "hasOneButton"; "required": false; }; }, {}, never, ["*"], true, never>;
}
declare class ItDimmerModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ItDimmerModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ItDimmerModule, never, [typeof ItDimmerComponent, typeof ItDimmerIconComponent, typeof ItDimmerButtonsComponent], [typeof ItDimmerComponent, typeof ItDimmerIconComponent, typeof ItDimmerButtonsComponent]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ItDimmerModule>;
}
declare class ItLinkComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {
/**
* The router link action
*
* Commands to pass to Router#createUrlTree.
* - array: commands to pass to Router#createUrlTree.
* - string: shorthand for array of commands with just the string, i.e. ['/route']
* - null|undefined: Disables the link by removing the href
*/
href: any[] | string | null | undefined;
/**
* Is an external link (false to not use Angular router link)
* @default false
*/
externalLink?: boolean;
/**
* Is disabled link
* @default false
*/
disabled?: boolean;
/**
* Custom class
*/
class: string;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItLinkComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItLinkComponent, "it-link", never, { "href": { "alias": "href"; "required": false; }; "externalLink": { "alias": "externalLink"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
static ngAcceptInputType_externalLink: BooleanInput;
static ngAcceptInputType_disabled: BooleanInput;
}
declare class ItDropdownItemComponent extends ItLinkComponent {
/**
* Show divider
* @default false
*/
divider?: boolean;
/**
* Active item
* @default false
*/
active?: boolean;
/**
* To increase the size of links
* @default false
*/
large?: boolean;
/**
* The name of icon to show
*/
iconName: IconName | undefined;
/**
* The icon position
* @default right
*/
iconPosition: 'left' | 'right';
/**
* Dropdown mode
*/
mode?: 'button' | 'link' | 'nav';
/**
* Change icon color if menu is dark
* @default false
*/
isDark: boolean;
get linkClass(): string;
setDark(dark: boolean): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItDropdownItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItDropdownItemComponent, "it-dropdown-item", never, { "divider": { "alias": "divider"; "required": false; }; "active": { "alias": "active"; "required": false; }; "large": { "alias": "large"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, {}, never, ["*"], true, never>;
static ngAcceptInputType_divider: BooleanInput;
static ngAcceptInputType_active: BooleanInput;
static ngAcceptInputType_large: BooleanInput;
}
declare class ItDropdownComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {
/**
* Dropdown mode
*/
mode: 'button' | 'link' | 'nav';
/**
* Button color
*/
color?: ButtonColor;
/**
* To open menu items to:
* - <strong>dropup</strong>: up
* - <strong>dropend</strong>: right
* - <strong>dropstart</strong>: left
*/
direction: DropdownDirection | undefined;
/**
* To get a dropdown menu as wide as the element containing the dropdown button
* @default false
*/
fullWidth?: boolean;
/**
* Contains a Megamenu element
* @default false
*/
megamenu?: boolean;
/**
* Dark menu style
* @default false
*/
dark?: boolean;
/**
* The dropdown items
*/
items?: QueryList<ItDropdownItemComponent>;
/**
* Fires immediately when the show instance method is called.
*/
showEvent: EventEmitter<Event>;
/**
* Fired when the dropdown has been made visible to the user and CSS transitions have completed.
*/
shownEvent: EventEmitter<Event>;
/**
* Fires immediately when the hide instance method has been called.
*/
hideEvent: EventEmitter<Event>;
/**
* Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
*/
hiddenEvent: EventEmitter<Event>;
private dropdown?;
private dropdownButton?;
get buttonClass(): string;
ngOnChanges(changes: SimpleChanges): void;
ngAfterViewInit(): void;
/**
* Set child items dark mode
* @private
*/
private setDarkItems;
private updateListeners;
/**
* Toggles the dropdown menu of a given navbar or tabbed navigation.
*/
toggle(): void;
/**
* Shows the dropdown menu of a given navbar or tabbed navigation.
*/
show(): void;
/**
* Hides the dropdown menu of a given navbar or tabbed navigation.
*/
hide(): void;
/**
* Updates the position of an element's dropdown.
*/
update(): void;
/**
* Destroys an element's dropdown. (Removes stored data on the DOM element)
*/
dispose(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItDropdownComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItDropdownComponent, "it-dropdown", ["itDropdown"], { "mode": { "alias": "mode"; "required": false; }; "color": { "alias": "color"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "megamenu": { "alias": "megamenu"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; }, { "showEvent": "showEvent"; "shownEvent": "shownEvent"; "hideEvent": "hideEvent"; "hiddenEvent": "hiddenEvent"; }, ["items"], ["[listHeading]", "[list]", "[button]"], true, never>;
static ngAcceptInputType_fullWidth: BooleanInput;
static ngAcceptInputType_megamenu: BooleanInput;
static ngAcceptInputType_dark: BooleanInput;
}
declare class ItDropdownModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ItDropdownModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ItDropdownModule, never, [typeof ItDropdownComponent, typeof ItDropdownItemComponent], [typeof ItDropdownComponent, typeof ItDropdownItemComponent]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ItDropdownModule>;
}
declare class ItForwardDirective {
private document;
/**
* Indica, se HTMLElement, l'elemento a cui navigare, o se stringa, il selettore che selezionerà l'elemento a cui navigare.
*/
set itForward(value: HTMLElement | string | undefined);
get itForward(): HTMLElement | string | undefined;
private _itForward;
onClick(event: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItForwardDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ItForwardDirective, "[itForward]", never, { "itForward": { "alias": "itForward"; "required": false; }; }, {}, never, never, true, never>;
}
declare class ItListComponent {
/**
* Add 'link-list' class for navigation menu
* @default false
*/
linkList?: boolean;
/**
* Add 'link-sublist' class for navigation menu
* @default false
*/
linkSubList?: boolean;
/**
* Add 'multiline' class for wrapper
* @default false
*/
multiline?: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<ItListComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItListComponent, "it-list", never, { "linkList": { "alias": "linkList"; "required": false; }; "linkSubList": { "alias": "linkSubList"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; }, {}, never, ["*"], true, never>;
static ngAcceptInputType_linkList: BooleanInput;
static ngAcceptInputType_linkSubList: BooleanInput;
static ngAcceptInputType_multiline: BooleanInput;
}
declare class ItListItemComponent extends ItLinkComponent {
private elRef;
/**
* Add active class
* @default false
*/
active?: boolean;
/**
* Add large class
*/
size?: 'large' | 'medium';
/**
* Add icon-left class
* @default false
*/
iconLeft?: boolean;
/**
* Add icon-right class
* @default false
*/
iconRight?: boolean;
private _avatar;
/**
* The avatar url
* @deprecated L'input 'avatar' è deprecato. Usa la documentazione del component Avatar per questo caso d'uso, facendo riferimento all'esempio Avatar con lista. Sarà rimosso nelle prossime versioni.
*/
get avatar(): URL | undefined;
set avatar(value: URL | undefined);
/**
* The thumb image url
*/
image: URL | undefined;
get itemClass(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<ItListItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItListItemComponent, "it-list-item", never, { "active": { "alias": "active"; "required": false; }; "size": { "alias": "size"; "required": false; }; "iconLeft": { "alias": "iconLeft"; "required": false; }; "iconRight": { "alias": "iconRight"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "image": { "alias": "image"; "required": false; }; }, {}, never, ["[icon]", "*", "[action]", "[metadata]", "[multiple]"], true, never>;
static ngAcceptInputType_active: BooleanInput;
static ngAcceptInputType_iconLeft: BooleanInput;
static ngAcceptInputType_iconRight: BooleanInput;
}
declare class ItListModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ItListModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ItListModule, never, [typeof ItListComponent, typeof ItListItemComponent], [typeof ItListComponent, typeof ItListItemComponent]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ItListModule>;
}
/**
* Modal windows
* @description To show featured content, notifications to users, or personalized content.
*/
declare class ItModalComponent extends ItAbstractComponent implements AfterViewInit {
/**
* Show/Hide close button on header
* @default true
*/
closeButton: boolean;
/**
* To correctly format the contents of the modal with icon
* @default false
*/
alertModal?: boolean;
/**
* To correctly format the contents of the modal with Link List
* @default false
*/
dialogLinkList?: boolean;
/**
* Modal type Popconfirm can be used for short confirmation messages.
* @default false
*/
popconfirm?: boolean;
/**
* You can choose to use a scroll inside the modal, keeping the header and footer of the modal always visible
* @default false
*/
scrollable?: boolean;
/**
* To have modals that appear with fades
* @default true
*/
fade?: boolean;
/**
* Modal alignment
* - <b>centered</b>: to vertically center the modal
* - <b>left</b>: to left-align the modal
* - <b>right</b>: to right-align the modal
* @default undefined
*/
alignment: 'centered' | 'left' | 'right' | undefined;
/**
* The modal size
* @default undefined
*/
size: 'sm' | 'lg' | 'xl' | undefined;
/**
* Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal when clicked.
* @default true
*/
backdrop: 'static' | boolean;
/**
* Puts the focus on the modal when initialized.
* @default true
*/
focus: boolean;
/**
* Closes the modal when escape key is pressed.
* @default true
*/
keyboard: boolean;
/**
* To better distinguish the footer element with a shadow
* @default false
*/
footerShadow?: boolean;
/**
* Modal options
*/
options?: Partial<Modal.Options>;
/**
* This event fires immediately when the instance method show is called.
*/
showEvent: EventEmitter<Event>;
/**
* This event fires when the modal has been made visible to the user (it will wait for CSS transitions to complete).
*/
shownEvent: EventEmitter<Event>;
/**
* This event is raised immediately when the instance method hide has been called.
*/
hideEvent: EventEmitter<Event>;
/**
* This event fires when the modal has finished hiding from the user (it will wait for CSS transitions to complete).
*/
hiddenEvent: EventEmitter<Event>;
/**
* This event is fired when the modal is displayed, its background is static and a click outside the modal or a press
* of the esc key occurs and data-bs-keyboard is set to false.
*/
hidePreventedEvent: EventEmitter<Event>;
private modal?;
private modalElement?;
ngAfterViewInit(): void;
protected get modalClass(): string;
protected get dialogClass(): string;
/**
* Manually activate/deactivate a modal. Returns to the caller before the modal has actually been shown or hidden
*/
toggle(): void;
/**
* Manually open a modal. Returns to the caller before the modal has actually been displayed
*/
show(): void;
/**
* Manually hide a modal. Returns to the caller before the modal has actually been hidden
*/
hide(): void;
/**
* Manually reposition the modal if the height of the modal changes when it is opened (in case a scroll bar appears).
*/
handleUpdate(): void;
/**
* Destroys the modal of an element.
*/
dispose(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ItModalComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ItModalComponent, "it-modal", ["itModal"], { "closeButton": { "alias": "closeButton"; "required": false; }; "alertModal": { "alias": "alertModal"; "required": false; }; "dialogLinkList": { "alias": "dialogLinkList"; "required": false; }; "popconfirm": { "alias": "popconfirm"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "size": { "alias": "size"; "required": false; }; "backdrop": { "alias": "backdrop"; "required": false; }; "focus": { "alias": "focus"; "required": false; }; "keyboard": { "alias": "keyboard"; "required": false; }; "footerShadow": { "alias": "footerShadow"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "showEvent": "showEvent"; "shownEvent": "shownEvent"; "hideEvent": "hideEvent"; "hiddenEvent": "hiddenEvent"; "hidePreventedEvent": "hidePreventedEvent"; }, never, ["[beforeTitle]", "[modalTitle]", "[description]", "*", "[footer]"], true, never>;
static ngAcceptInputType_closeButton: BooleanInput;
static ngAcceptInputType_alertModal: BooleanInput;
static ngAcceptInputType_dialogLinkList: BooleanInput;
static ngAcceptInputType_popconfirm: BooleanInput;
static ngAcceptInputType_scrollable: BooleanInput;
static ngAcceptInputType_fade: BooleanInput;
static ngAcceptInputType_focus: BooleanInput;
static ngAcceptInputType_keyboard: BooleanInput;
static ngAcceptInputType_footerShadow: BooleanInput;
}
declare class ItNotificationsComponent implements OnDestroy {
private readonly _changeDetectorRef;
private readonly _notificationService;
/**
* Default notifications duration (milliseconds)
* @default 8000
*/
duration: number;
/**
* Default notifications position
*/
position: NotificationPosition | undefined;
/**
* Default notifications is dismissible
* @default true
*/
dismissible: boolean;
private subscription;
private notificationCount;
protected notifications: Array<Notification & {
id: string;
}>;
constructor();
ngOnDestroy(): void;
protected get NotificationType(): typeof NotificationType;
/**
* Hide the notification
* @param id
*/
protected hideNotification(id: string): void;
/**
* Retrieve the icon name by notification type
* @param notification the notification
* @protected
*/
private getNotificationIcon;
static ɵfac: i0.ɵɵFactoryDeclaration<ItNotificationsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclarati