UNPKG

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
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