design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
1 lines • 605 kB
Source Map (JSON)
{"version":3,"file":"design-angular-kit.mjs","sources":["../../../projects/design-angular-kit/src/lib/abstracts/abstract.component.ts","../../../projects/design-angular-kit/src/lib/utils/coercion.ts","../../../projects/design-angular-kit/src/lib/components/core/collapse/collapse.component.ts","../../../projects/design-angular-kit/src/lib/components/core/collapse/collapse.component.html","../../../projects/design-angular-kit/src/lib/components/core/accordion/accordion.component.ts","../../../projects/design-angular-kit/src/lib/components/core/accordion/accordion.component.html","../../../projects/design-angular-kit/src/lib/interfaces/design-angular-kit-config.ts","../../../projects/design-angular-kit/src/lib/components/utils/icon/icon.component.ts","../../../projects/design-angular-kit/src/lib/components/utils/icon/icon.component.html","../../../projects/design-angular-kit/src/lib/components/core/alert/alert.component.ts","../../../projects/design-angular-kit/src/lib/components/core/alert/alert.component.html","../../../projects/design-angular-kit/src/lib/components/core/avatar/avatar-group/avatar-group.component.ts","../../../projects/design-angular-kit/src/lib/components/core/avatar/avatar-group/avatar-group.component.html","../../../projects/design-angular-kit/src/lib/components/core/link/link.component.ts","../../../projects/design-angular-kit/src/lib/components/core/link/link.component.html","../../../projects/design-angular-kit/src/lib/components/core/dropdown/dropdown-item/dropdown-item.component.ts","../../../projects/design-angular-kit/src/lib/components/core/dropdown/dropdown-item/dropdown-item.component.html","../../../projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.ts","../../../projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.html","../../../projects/design-angular-kit/src/lib/components/core/dropdown/dropdown.module.ts","../../../projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.ts","../../../projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.html","../../../projects/design-angular-kit/src/lib/enums/colors.enums.ts","../../../projects/design-angular-kit/src/lib/enums/sizes.enum.ts","../../../projects/design-angular-kit/src/lib/components/core/avatar/avatar.directive.ts","../../../projects/design-angular-kit/src/lib/components/core/avatar/avatar.module.ts","../../../projects/design-angular-kit/src/lib/components/core/badge/badge.directive.ts","../../../projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.ts","../../../projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.html","../../../projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.ts","../../../projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.html","../../../projects/design-angular-kit/src/lib/components/core/button/button.directive.ts","../../../projects/design-angular-kit/src/lib/components/core/callout/callout.component.ts","../../../projects/design-angular-kit/src/lib/components/core/callout/callout.component.html","../../../projects/design-angular-kit/src/lib/components/core/card/card.component.ts","../../../projects/design-angular-kit/src/lib/components/core/card/card.component.html","../../../projects/design-angular-kit/src/lib/components/core/carousel/carousel-item/carousel-item.component.ts","../../../projects/design-angular-kit/src/lib/components/core/carousel/carousel-item/carousel-item.component.html","../../../projects/design-angular-kit/src/lib/components/core/carousel/carousel/carousel.component.ts","../../../projects/design-angular-kit/src/lib/components/core/carousel/carousel/carousel.component.html","../../../projects/design-angular-kit/src/lib/components/core/carousel/carousel.module.ts","../../../projects/design-angular-kit/src/lib/components/core/chip/chip.component.ts","../../../projects/design-angular-kit/src/lib/components/core/chip/chip.component.html","../../../projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.ts","../../../projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.html","../../../projects/design-angular-kit/src/lib/components/core/dimmer/dimmer-icon/dimmer-icon.component.ts","../../../projects/design-angular-kit/src/lib/components/core/dimmer/dimmer-icon/dimmer-icon.component.html","../../../projects/design-angular-kit/src/lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component.ts","../../../projects/design-angular-kit/src/lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component.html","../../../projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.module.ts","../../../projects/design-angular-kit/src/lib/components/core/forward/forward.directive.ts","../../../projects/design-angular-kit/src/lib/components/core/list/list/list.component.ts","../../../projects/design-angular-kit/src/lib/components/core/list/list/list.component.html","../../../projects/design-angular-kit/src/lib/components/core/list/list-item/list-item.component.ts","../../../projects/design-angular-kit/src/lib/components/core/list/list-item/list-item.component.html","../../../projects/design-angular-kit/src/lib/components/core/list/list.module.ts","../../../projects/design-angular-kit/src/lib/components/core/modal/modal.component.ts","../../../projects/design-angular-kit/src/lib/components/core/modal/modal.component.html","../../../projects/design-angular-kit/src/lib/interfaces/core.ts","../../../projects/design-angular-kit/src/lib/services/notification/notification.service.ts","../../../projects/design-angular-kit/src/lib/components/core/notifications/notifications.component.ts","../../../projects/design-angular-kit/src/lib/components/core/notifications/notifications.component.html","../../../projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts","../../../projects/design-angular-kit/src/lib/utils/regex.ts","../../../projects/design-angular-kit/src/lib/validators/it-validators.ts","../../../projects/design-angular-kit/src/lib/components/form/input/input.component.ts","../../../projects/design-angular-kit/src/lib/components/form/input/input.component.html","../../../projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.ts","../../../projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.html","../../../projects/design-angular-kit/src/lib/components/core/popover/popover.directive.ts","../../../projects/design-angular-kit/src/lib/components/core/spinner/spinner.component.ts","../../../projects/design-angular-kit/src/lib/components/core/spinner/spinner.component.html","../../../projects/design-angular-kit/src/lib/components/core/steppers/steppers-item/steppers-item.component.ts","../../../projects/design-angular-kit/src/lib/components/core/steppers/steppers-item/steppers-item.component.html","../../../projects/design-angular-kit/src/lib/components/core/steppers/steppers-container/steppers-container.component.ts","../../../projects/design-angular-kit/src/lib/components/core/steppers/steppers-container/steppers-container.component.html","../../../projects/design-angular-kit/src/lib/components/core/steppers/steppers.module.ts","../../../projects/design-angular-kit/src/lib/components/core/tab/tab-item/tab-item.component.ts","../../../projects/design-angular-kit/src/lib/components/core/tab/tab-item/tab-item.component.html","../../../projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.ts","../../../projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html","../../../projects/design-angular-kit/src/lib/components/core/tab/tab.module.ts","../../../projects/design-angular-kit/src/lib/components/core/table/table.component.ts","../../../projects/design-angular-kit/src/lib/components/core/table/table.component.html","../../../projects/design-angular-kit/src/lib/interfaces/sortable-table.ts","../../../projects/design-angular-kit/src/lib/components/core/table/sort/sort.directive.ts","../../../projects/design-angular-kit/src/lib/components/core/table/sort/sort-header/sort-header.component.ts","../../../projects/design-angular-kit/src/lib/components/core/table/sort/sort-header/sort-header.component.html","../../../projects/design-angular-kit/src/lib/components/core/table/table.module.ts","../../../projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts","../../../projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html","../../../projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts","../../../projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html","../../../projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts","../../../projects/design-angular-kit/src/lib/components/core/tooltip/tooltip.directive.ts","../../../projects/design-angular-kit/src/lib/components/form/checkbox/checkbox.component.ts","../../../projects/design-angular-kit/src/lib/components/form/checkbox/checkbox.component.html","../../../projects/design-angular-kit/src/lib/components/form/password-input/password-input.component.ts","../../../projects/design-angular-kit/src/lib/components/form/password-input/password-input.component.html","../../../projects/design-angular-kit/src/lib/components/form/radio-button/radio-button.component.ts","../../../projects/design-angular-kit/src/lib/components/form/radio-button/radio-button.component.html","../../../projects/design-angular-kit/src/lib/components/form/range/range.component.ts","../../../projects/design-angular-kit/src/lib/components/form/range/range.component.html","../../../projects/design-angular-kit/src/lib/components/form/rating/rating.component.ts","../../../projects/design-angular-kit/src/lib/components/form/rating/rating.component.html","../../../projects/design-angular-kit/src/lib/components/form/select/select.component.ts","../../../projects/design-angular-kit/src/lib/components/form/select/select.component.html","../../../projects/design-angular-kit/src/lib/components/form/textarea/textarea.component.ts","../../../projects/design-angular-kit/src/lib/components/form/textarea/textarea.component.html","../../../projects/design-angular-kit/src/lib/utils/file-utils.ts","../../../projects/design-angular-kit/src/lib/components/form/upload-drag-drop/upload-drag-drop.component.ts","../../../projects/design-angular-kit/src/lib/components/form/upload-drag-drop/upload-drag-drop.component.html","../../../projects/design-angular-kit/src/lib/components/form/upload-file-list/upload-file-list.component.ts","../../../projects/design-angular-kit/src/lib/components/form/upload-file-list/upload-file-list.component.html","../../../projects/design-angular-kit/src/lib/pipes/mark-matching-text.pipe.ts","../../../projects/design-angular-kit/src/lib/components/form/search/search.component.ts","../../../projects/design-angular-kit/src/lib/components/form/search/search.component.html","../../../projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.reducers.ts","../../../projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.store.ts","../../../projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts","../../../projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.html","../../../projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.ts","../../../projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.html","../../../projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.ts","../../../projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.html","../../../projects/design-angular-kit/src/lib/components/form/form.module.ts","../../../projects/design-angular-kit/src/lib/components/navigation/back-button/back-button.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/back-button/back-button.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/breadcrumbs/breadcrumbs.module.ts","../../../projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/navbar/navbar.module.ts","../../../projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/header/header.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.utils.ts","../../../projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.store.ts","../../../projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-item.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-items.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/sidebar/sidebar.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/sidebar/sidebar.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.ts","../../../projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html","../../../projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.module.ts","../../../projects/design-angular-kit/src/lib/components/utils/error-page/error-page.component.ts","../../../projects/design-angular-kit/src/lib/components/utils/error-page/error-page.component.html","../../../projects/design-angular-kit/src/lib/components/utils/language-switcher/language-switcher.component.ts","../../../projects/design-angular-kit/src/lib/components/utils/language-switcher/language-switcher.component.html","../../../projects/design-angular-kit/src/lib/pipes/date-ago.pipe.ts","../../../projects/design-angular-kit/src/lib/pipes/duration.pipe.ts","../../../projects/design-angular-kit/src/lib/provide-design-angular-kit.ts","../../../projects/design-angular-kit/src/lib/design-angular-kit.module.ts","../../../projects/design-angular-kit/src/lib/components/core/video-player/video-player-i18n.service.ts","../../../projects/design-angular-kit/src/lib/components/core/video-player/video-player.cookie.ts","../../../projects/design-angular-kit/src/lib/components/core/video-player/video-player.config.ts","../../../projects/design-angular-kit/src/lib/components/core/video-player/video-player.component.ts","../../../projects/design-angular-kit/src/lib/components/core/video-player/video-player.model.ts","../../../projects/design-angular-kit/src/lib/components/core/video-player/video-player.module.ts","../../../projects/design-angular-kit/src/lib/components/form/transfer/transfer.model.ts","../../../projects/design-angular-kit/src/lib/interfaces/icon.ts","../../../projects/design-angular-kit/src/lib/utils/date-utils.ts","../../../projects/design-angular-kit/src/public_api.ts","../../../projects/design-angular-kit/src/design-angular-kit.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n OnChanges,\n Output,\n Renderer2,\n SimpleChanges,\n} from '@angular/core';\n\n@Component({ template: '' })\nexport abstract class ItAbstractComponent implements AfterViewInit, OnChanges {\n /**\n * The element ID\n */\n @Input() id: string = this.getDefaultId();\n\n /**\n * Fired when component input attributes was changed\n */\n @Output() public valueChanges: EventEmitter<void>;\n\n /**\n * Counter of active instances\n * @private\n */\n private static instances = 0;\n\n protected readonly _renderer: Renderer2; // Injected\n protected readonly _elementRef: ElementRef; // Injected\n protected readonly _changeDetectorRef: ChangeDetectorRef; // Injected\n\n constructor() {\n this._renderer = inject(Renderer2);\n this._elementRef = inject(ElementRef);\n this._changeDetectorRef = inject(ChangeDetectorRef);\n\n this.valueChanges = new EventEmitter<void>();\n }\n\n ngAfterViewInit(): void {\n this._renderer.removeAttribute(this._elementRef.nativeElement, 'id');\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ngOnChanges(changes: SimpleChanges): void {\n this.valueChanges.next(); // The inputs were changed\n }\n\n /**\n * Generate unique id for components\n * @private\n */\n private getDefaultId(): string {\n const name = this.constructor.name.replace('Component', '');\n const kebabName = name.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());\n return `${kebabName}-${ItAbstractComponent.instances++}`;\n }\n}\n","import { booleanAttribute } from '@angular/core';\n\nexport type BooleanInput = 'false' | 'true' | boolean | undefined;\n\n/**\n * Transforms a value (typically a string) to a boolean.\n * Intended to be used as a transform function of an input.\n *\n * @usageNotes\n * ```typescript\n * @Input({ transform: booleanAttribute }) status?: boolean;\n * ```\n * @param {BooleanInput} value Value to be transformed.\n *\n * @publicApi\n */\nexport function inputToBoolean(value: BooleanInput): boolean {\n // Wrap `@angular/core` function to force value type, for ide hits\n return booleanAttribute(value);\n}\n","import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';\nimport { ItAbstractComponent } from '../../../abstracts/abstract.component';\nimport { Collapse } from 'bootstrap-italia';\nimport { inputToBoolean } from '../../../utils/coercion';\n\n@Component({\n standalone: true,\n selector: 'it-collapse',\n templateUrl: './collapse.component.html',\n exportAs: 'itCollapse',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class ItCollapseComponent extends ItAbstractComponent implements AfterViewInit {\n /**\n * Enable multiple collapse\n * @default false\n */\n @Input({ transform: inputToBoolean }) multi?: boolean;\n\n /**\n * Toggles the collapsible element on invocation\n * @default false\n */\n @Input({ transform: inputToBoolean }) opened?: boolean;\n\n /**\n * Custom class\n */\n @Input() class: string = '';\n\n /**\n * This event fires immediately when the show method is called.\n */\n @Output() showEvent: EventEmitter<Event> = new EventEmitter();\n\n /**\n * This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).\n */\n @Output() shownEvent: EventEmitter<Event> = new EventEmitter();\n\n /**\n * This event fires immediately when the hide method is called.\n */\n @Output() hideEvent: EventEmitter<Event> = new EventEmitter();\n\n /**\n * This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).\n */\n @Output() hiddenEvent: EventEmitter<Event> = new EventEmitter();\n\n private collapse?: Collapse;\n\n private open: boolean = false;\n\n @ViewChild('collapse') protected collapseDiv?: ElementRef<HTMLDivElement>;\n\n override ngAfterViewInit(): void {\n super.ngAfterViewInit();\n this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');\n\n if (this.collapseDiv) {\n const element = this.collapseDiv.nativeElement;\n this.collapse = Collapse.getOrCreateInstance(element, {\n toggle: this.opened,\n });\n\n element.addEventListener('show.bs.collapse', event => {\n this.open = true;\n this.showEvent.emit(event);\n });\n element.addEventListener('shown.bs.collapse', event => {\n this.open = true;\n this.shownEvent.emit(event);\n });\n element.addEventListener('hide.bs.collapse', event => {\n this.open = false;\n this.hideEvent.emit(event);\n });\n element.addEventListener('hidden.bs.collapse', event => {\n this.open = false;\n this.hiddenEvent.emit(event);\n });\n }\n }\n\n /**\n * Shows if collapse is open or not\n */\n public isOpen(): boolean {\n return this.open;\n }\n\n /**\n * Shows a resealable item\n * NOTE: Returns to the caller before the collapsable element has actually been shown (onShown event).\n */\n public show(): void {\n this.collapse?.show();\n }\n\n /**\n * Hides a resealable item\n * NOTE: Returns to the caller before the collapsable element has actually been hidden (onHidden Event)\n */\n public hide(): void {\n this.collapse?.hide();\n }\n\n /**\n * Toggle a collapsible item to show or hide it.\n * NOTE: Returns to the caller before the collapsable element has actually been shown or hidden (onShown and onHidden events)\n */\n public toggle(): void {\n this.collapse?.toggle();\n }\n\n /**\n * Eliminates the possibility of an item being resealable\n */\n public dispose(): void {\n this.collapse?.dispose();\n }\n}\n","<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n <ng-content></ng-content>\n</div>\n","import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';\nimport { ItCollapseComponent } from '../collapse/collapse.component';\n\n/**\n * Accordion\n * @description Build vertically collapsible accordions based on Collapse.\n */\n@Component({\n standalone: true,\n selector: 'it-accordion',\n templateUrl: './accordion.component.html',\n exportAs: 'itAccordion',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class ItAccordionComponent extends ItCollapseComponent implements AfterViewInit {\n /**\n * Accordion Title\n */\n @Input({ required: true }) title!: string;\n\n @ViewChild('collapse') protected override collapseDiv?: ElementRef<HTMLDivElement>;\n\n protected isCollapsed: boolean = true;\n\n override ngAfterViewInit(): void {\n super.ngAfterViewInit();\n this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');\n\n this.isCollapsed = !this.opened;\n this.hideEvent.subscribe(() => {\n this.isCollapsed = true;\n this._changeDetectorRef.detectChanges();\n });\n this.showEvent.subscribe(() => {\n this.isCollapsed = false;\n this._changeDetectorRef.detectChanges();\n });\n }\n}\n","<div class=\"accordion\">\n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n <button\n class=\"accordion-button\"\n type=\"button\"\n data-bs-toggle=\"collapse\"\n [class.collapsed]=\"isCollapsed\"\n [attr.data-bs-target]=\"'#collapse-' + id\"\n [attr.aria-controls]=\"'collapse-' + id\"\n [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n {{ title }}\n </button>\n </h2>\n\n <div\n #collapse\n id=\"collapse-{{ id }}\"\n role=\"region\"\n class=\"accordion-collapse collapse {{ class }}\"\n [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n <div class=\"accordion-body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n","import { InjectionToken, Provider } from '@angular/core';\n\n/**\n * The bootstrap-italia asset folder path\n * @default ./bootstrap-italia\n */\nexport const IT_ASSET_BASE_PATH = new InjectionToken<string>('it-asset-base-path');\n\nexport interface DesignAngularKitConfig {\n /**\n * The bootstrap-italia asset folder path\n * @default ./bootstrap-italia\n */\n assetBasePath?: string;\n\n /**\n * Load the <a href=\"https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/#fonts\">bootstrap-italia fonts</a>\n * @default true\n */\n loadFont?: boolean;\n\n /**\n * The TranslateModule loader\n * @param itPrefix the design-angular-kit i18n path\n * @param itSuffix the design-angular-kit i18n suffix\n * @default\n * {\n * provide: TranslateLoader,\n * useFactory: (http: HttpClient) => new TranslateHttpLoader(http, `${assetBasePath}/i18n/`, `.json?v${version}`),\n * deps: [HttpClient],\n * }\n */\n translateLoader?: (itPrefix: string, itSuffix: string) => Provider;\n}\n","import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';\nimport { IconColor, IconName, IconSize } from '../../../interfaces/icon';\nimport { inputToBoolean } from '../../../utils/coercion';\nimport { IT_ASSET_BASE_PATH } from '../../../interfaces/design-angular-kit-config';\n\n@Component({\n standalone: true,\n selector: 'it-icon',\n templateUrl: './icon.component.html',\n styles: ':host {display: contents;}',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class ItIconComponent {\n /**\n * The icon name\n */\n @Input({ required: true }) name!: IconName;\n\n /**\n * The icon size\n */\n @Input() size: IconSize | undefined;\n\n /**\n * The icon color\n */\n @Input() color: IconColor | undefined;\n\n /**\n * Create a padding proportional to the size of the surrounding icon.\n * @default false\n */\n @Input({ transform: inputToBoolean }) padded?: boolean;\n\n /**\n * Custom class of svg\n */\n @Input() svgClass: string | undefined;\n\n /**\n * Title of the icon\n */\n @Input() title: string | undefined;\n\n /**\n * Custom Waria label\n */\n @Input() labelWaria: string | undefined;\n\n /**\n * Return the icon href\n */\n protected get iconHref(): string {\n return `${this.assetBasePath}/dist/svg/sprites.svg#it-${this.name}`;\n }\n\n /**\n * Return the icon class\n */\n protected get iconClass(): string {\n let iconClass = 'icon';\n if (this.size) {\n iconClass += ` icon-${this.size}`;\n }\n if (this.color) {\n iconClass += ` icon-${this.color}`;\n }\n if (this.padded) {\n iconClass += ` icon-padded`;\n }\n if (this.svgClass) {\n iconClass += ` ${this.svgClass}`;\n }\n return iconClass;\n }\n\n /**\n * The bootstrap-italia asset folder path\n * @default ./bootstrap-italia\n */\n protected assetBasePath: string;\n\n get isAriaHidden(): boolean {\n return this.labelWaria == undefined && this.title == undefined;\n }\n\n get role(): string | null {\n return this.labelWaria == undefined && this.title == undefined ? null : 'img';\n }\n\n constructor() {\n this.assetBasePath = inject(IT_ASSET_BASE_PATH);\n }\n}\n","<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n @if (title || labelWaria) {\n <title>{{ title || labelWaria }}</title>\n }\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n","import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';\nimport { AlertColor } from '../../../interfaces/core';\nimport { ItAbstractComponent } from '../../../abstracts/abstract.component';\nimport { Alert } from 'bootstrap-italia';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { ItIconComponent } from '../../utils/icon/icon.component';\nimport { inputToBoolean } from '../../../utils/coercion';\n\n/**\n * Alert\n * @description You can provide feedback to the user via alert messages.\n */\n@Component({\n standalone: true,\n selector: 'it-alert',\n templateUrl: './alert.component.html',\n styleUrls: ['./alert.component.scss'],\n exportAs: 'itAlert',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [TranslateModule, ItIconComponent],\n})\nexport class ItAlertComponent extends ItAbstractComponent implements AfterViewInit {\n /**\n * The alert color\n * @default info\n */\n @Input() color: AlertColor = 'info';\n\n /**\n * Inserts the close button\n * @default false\n */\n @Input({ transform: inputToBoolean }) dismissible?: boolean;\n\n /**\n * This event fires immediately when the instance's close method is called.\n */\n @Output() public closeEvent: EventEmitter<Event> = new EventEmitter();\n\n /**\n * This event fires when the alert has been closed (it will wait for CSS transitions to complete).\n */\n @Output() public closedEvent: EventEmitter<Event> = new EventEmitter();\n\n private alert?: Alert;\n\n @ViewChild('alertElement') private alertElement?: ElementRef<HTMLDivElement>;\n\n override ngAfterViewInit() {\n super.ngAfterViewInit();\n\n if (this.alertElement) {\n const element = this.alertElement.nativeElement;\n this.alert = Alert.getOrCreateInstance(element);\n\n element.addEventListener('close.bs.alert', event => this.closeEvent.emit(event));\n element.addEventListener('closed.bs.alert', event => this.closedEvent.emit(event));\n }\n }\n\n /**\n * Close an alert by removing it from the DOM.\n * If the `.fade` and `.show` classes are present in the element, the alert will be closed with a disappearing effect.\n */\n public close(): void {\n this.alert?.close();\n }\n\n /**\n * The alert is removed\n */\n public dispose(): void {\n this.alert?.dispose();\n }\n}\n","<div\n #alertElement\n class=\"alert alert-{{ color }}\"\n [class.alert-dismissible]=\"dismissible\"\n [class.fade]=\"dismissible\"\n [class.show]=\"dismissible\"\n role=\"alert\">\n <h4 class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n </h4>\n\n <ng-content></ng-content>\n\n @if (dismissible) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n</div>\n","import { Component, ContentChildren, HostBinding, Input, QueryList, TemplateRef, ViewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { inputToBoolean } from '../../../../utils/coercion';\n\n@Component({\n standalone: true,\n selector: 'it-avatar-item',\n template: '<ng-template><ng-content></ng-content></ng-template>',\n})\nexport class ItAvatarGroupItemComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @ViewChild(TemplateRef, { static: true }) _implicitContent!: TemplateRef<any>;\n}\n\n@Component({\n standalone: true,\n selector: 'it-avatar-group',\n templateUrl: './avatar-group.component.html',\n imports: [NgTemplateOutlet],\n})\nexport class ItAvatarGroupComponent {\n @Input({ transform: inputToBoolean }) @HostBinding('class.link-list-wrapper') linkList = false;\n\n @ContentChildren(ItAvatarGroupItemComponent) avatars!: QueryList<ItAvatarGroupItemComponent>;\n}\n","<ul [class]=\"linkList ? 'link-list avatar-group' : 'avatar-group-stacked'\">\n @for (avatar of avatars; track avatar) {\n <li>\n <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n </li>\n }\n</ul>\n","import { AfterViewInit, ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { ItAbstractComponent } from '../../../abstracts/abstract.component';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { inputToBoolean } from '../../../utils/coercion';\n\n@Component({\n standalone: true,\n selector: 'it-link',\n templateUrl: './link.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [RouterLink, RouterLinkActive, NgTemplateOutlet],\n})\nexport class ItLinkComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {\n /**\n * The router link action\n *\n * Commands to pass to Router#createUrlTree.\n * - array: commands to pass to Router#createUrlTree.\n * - string: shorthand for array of commands with just the string, i.e. ['/route']\n * - null|undefined: Disables the link by removing the href\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Input() href: any[] | string | null | undefined;\n\n /**\n * Is an external link (false to not use Angular router link)\n * @default false\n */\n @Input({ transform: inputToBoolean }) externalLink?: boolean;\n\n /**\n * Is disabled link\n * @default false\n */\n @Input({ transform: inputToBoolean }) disabled?: boolean;\n\n /**\n * Custom class\n */\n @Input() class: string = '';\n\n override ngAfterViewInit(): void {\n super.ngAfterViewInit();\n this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');\n }\n\n override ngOnChanges(changes: SimpleChanges): void {\n super.ngOnChanges(changes);\n if (changes['class']) {\n this._changeDetectorRef.markForCheck();\n }\n }\n}\n","@if (!externalLink) {\n <a [id]=\"id\" [class]=\"class\" [routerLinkActive]=\"'active'\" [routerLink]=\"(disabled ? null : href)!\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </a>\n} @else {\n <a [id]=\"id\" [class]=\"class\" [attr.href]=\"disabled ? null : href\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </a>\n}\n\n<ng-template #linkContent>\n <ng-content></ng-content>\n</ng-template>\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { IconName } from '../../../../interfaces/icon';\nimport { ItLinkComponent } from '../../link/link.component';\nimport { ItIconComponent } from '../../../utils/icon/icon.component';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { inputToBoolean } from '../../../../utils/coercion';\n\n@Component({\n standalone: true,\n selector: 'it-dropdown-item',\n templateUrl: './dropdown-item.component.html',\n styleUrls: ['./dropdown-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ItIconComponent, TranslateModule, ItLinkComponent],\n})\nexport class ItDropdownItemComponent extends ItLinkComponent {\n /**\n * Show divider\n * @default false\n */\n @Input({ transform: inputToBoolean }) divider?: boolean;\n\n /**\n * Active item\n * @default false\n */\n @Input({ transform: inputToBoolean }) active?: boolean;\n\n /**\n * To increase the size of links\n * @default false\n */\n @Input({ transform: inputToBoolean }) large?: boolean;\n\n /**\n * The name of icon to show\n */\n @Input() iconName: IconName | undefined;\n\n /**\n * The icon position\n * @default right\n */\n @Input() iconPosition: 'left' | 'right' = 'right';\n\n /**\n * Dropdown mode\n */\n @Input() mode?: 'button' | 'link' | 'nav' = 'button';\n\n /**\n * Change icon color if menu is dark\n * @default false\n */\n isDark: boolean = false;\n\n get linkClass(): string {\n let linkClass = `list-item ${this.active ? 'active' : 'dropdown-item'}`;\n if (this.mode === 'nav') {\n linkClass += ' nav-link';\n }\n if (this.disabled) {\n linkClass += ' disabled';\n }\n if (this.large) {\n linkClass += ' large';\n }\n if (this.iconName) {\n linkClass += ` ${this.iconPosition === 'right' ? 'right-icon' : 'left-icon'}`;\n }\n\n return linkClass;\n }\n\n setDark(dark: boolean): void {\n if (this.isDark !== dark) {\n this.isDark = dark;\n this._changeDetectorRef.detectChanges();\n }\n }\n}\n","<li>\n @if (divider) {\n <span class=\"divider\"></span>\n } @else {\n <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n @if (iconName && iconPosition === 'left') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n <span><ng-content></ng-content></span>\n @if (iconName && iconPosition === 'right') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n @if (active) {\n <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n }\n </it-link>\n }\n</li>\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n QueryList,\n SimpleChanges,\n ViewChild,\n} from '@angular/core';\nimport { ItAbstractComponent } from '../../../../abstracts/abstract.component';\nimport { ButtonColor, DropdownDirection } from '../../../../interfaces/core';\nimport { ItDropdownItemComponent } from '../dropdown-item/dropdown-item.component';\nimport { Dropdown } from 'bootstrap-italia';\nimport { ItIconComponent } from '../../../utils/icon/icon.component';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { inputToBoolean } from '../../../../utils/coercion';\n\n@Component({\n standalone: true,\n selector: 'it-dropdown',\n templateUrl: './dropdown.component.html',\n styleUrls: ['./dropdown.component.scss'],\n exportAs: 'itDropdown',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ItIconComponent, NgTemplateOutlet],\n})\nexport class ItDropdownComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {\n /**\n * Dropdown mode\n */\n @Input() mode: 'button' | 'link' | 'nav' = 'button';\n\n /**\n * Button color\n */\n @Input() color?: ButtonColor;\n\n /**\n * To open menu items to:\n * - <strong>dropup</strong>: up\n * - <strong>dropend</strong>: right\n * - <strong>dropstart</strong>: left\n */\n @Input() direction: DropdownDirection | undefined;\n\n /**\n * To get a dropdown menu as wide as the element containing the dropdown button\n * @default false\n */\n @Input({ transform: inputToBoolean }) fullWidth?: boolean;\n\n /**\n * Contains a Megamenu element\n * @default false\n */\n @Input({ transform: inputToBoolean }) megamenu?: boolean;\n\n /**\n * Dark menu style\n * @default false\n */\n @Input({ transform: inputToBoolean }) dark?: boolean;\n\n /**\n * The dropdown items\n */\n @ContentChildren(ItDropdownItemComponent) items?: QueryList<ItDropdownItemComponent>;\n\n /**\n * Fires immediately when the show instance method is called.\n */\n @Output() showEvent: EventEmitter<Event> = new EventEmitter();\n\n /**\n * Fired when the dropdown has been made visible to the user and CSS transitions have completed.\n */\n @Output() shownEvent: EventEmitter<Event> = new EventEmitter();\n\n /**\n * Fires immediately when the hide instance method has been called.\n */\n @Output() hideEvent: EventEmitter<Event> = new EventEmitter();\n\n /**\n * Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.\n */\n @Output() hiddenEvent: EventEmitter<Event> = new EventEmitter();\n\n private dropdown?: Dropdown;\n\n @ViewChild('dropdownButton') private dropdownButton?: ElementRef<HTMLButtonElement>;\n\n get buttonClass(): string {\n let btnClass = 'btn dropdown-toggle';\n if (this.color) {\n btnClass += ` btn-${this.color}`;\n } else {\n btnClass += ` btn-dropdown`;\n }\n\n return btnClass;\n }\n\n override ngOnChanges(changes: SimpleChanges): void {\n if (changes['dark'] && !changes['dark'].firstChange) {\n this.setDarkItems();\n }\n if (changes['mode'] && !changes['mode'].firstChange) {\n this.updateListeners();\n }\n super.ngOnChanges(changes);\n }\n\n override ngAfterViewInit() {\n super.ngAfterViewInit();\n this.setDarkItems();\n this.updateListeners();\n this.items?.forEach(item => {\n item.mode = this.mode;\n });\n }\n\n /**\n * Set child items dark mode\n * @private\n */\n private setDarkItems(): void {\n if (this.dark !== undefined) {\n this.items?.forEach(item => {\n item.setDark(!!this.dark);\n });\n }\n }\n\n private updateListeners(): void {\n if (this.dropdownButton) {\n const element = this.dropdownButton.nativeElement;\n this.dropdown = Dropdown.getOrCreateInstance(element);\n\n element.addEventListener('show.bs.dropdown', event => this.showEvent.emit(event));\n element.addEventListener('shown.bs.dropdown', event => this.shownEvent.emit(event));\n element.addEventListener('hide.bs.dropdown', event => this.hideEvent.emit(event));\n element.addEventListener('hidden.bs.dropdown', event => this.hiddenEvent.emit(event));\n }\n }\n\n /**\n * Toggles the dropdown menu of a given navbar or tabbed navigation.\n */\n public toggle(): void {\n this.dropdown?.toggle();\n }\n\n /**\n * Shows the dropdown menu of a given navbar or tabbed navigation.\n */\n public show(): void {\n this.dropdown?.show();\n }\n\n /**\n * Hides the dropdown menu of a given navbar or tabbed navigation.\n */\n public hide(): void {\n this.dropdown?.hide();\n }\n\n /**\n * Updates the position of an element's dropdown.\n */\n public update(): void {\n this.dropdown?.update();\n }\n\n /**\n * Destroys an element's dropdown. (Removes stored data on the DOM element)\n */\n public dispose(): void {\n this.dropdown?.dispose();\n }\n}\n","<div class=\"dropdown {{ direction }}\" [class.nav-item]=\"mode === 'nav'\" [class.megamenu]=\"megamenu\">\n @if (mode === 'button') {\n <button\n #dropdownButton\n [id]=\"id\"\n [class]=\"buttonClass\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\">\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n </button>\n } @else {\n <a\n #dropdownButton\n [id]=\"id\"\n [class.btn]=\"mode === 'link'\"\n [class.btn-dropdown]=\"mode === 'link'\"\n [class.nav-link]=\"mode === 'nav'\"\n class=\"dropdown-toggle\"\n role=\"button\"\n data-bs-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\">\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\"></it-icon>\n </a>\n }\n\n <div class=\"dropdown-menu\" [class.full-width]=\"fullWidth\" [class.dark]=\"dark\" [attr.aria-labelledby]=\"id\">\n <div class=\"link-list-wrapper\">\n <div class=\"link-list-heading\">\n <ng-content select=\"[listHeading]\"></ng-content>\n </div>\n <ul class=\"link-list\">\n <ng-content select=\"[list]\"></ng-content>\n </ul>\n </div>\n </div>\n</div>\n\n<ng-template #buttonContent>\n <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { ItDropdownComponent } from './dropdown/dropdown.component';\nimport { ItDropdownItemComponent } from './dropdown-item/dropdown-item.component';\n\nconst dropdownComponents = [ItDropdownComponent, ItDropdownItemComponent];\n\n@NgModule({\n imports: dropdownComponents,\n exports: dropdownComponents,\n})\nexport class ItDropdownModule {}\n","import { Component, ContentChildren, HostBinding, Input, QueryList, TemplateRef, ViewChild } from '@angular/core';\nimport { ItDropdownModule } from '../../dropdown/dropdown.module';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\n\n@Component({\n standalone: true,\n selector: 'it-avatar-dropdown-item',\n template: '<ng-template><ng-content></ng-content></ng-template>',\n styleUrls: ['./avatar-dropdown.component.scss'],\n imports: [NgTemplateOutlet],\n})\nexport class ItAvatarDropdownItemComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @ViewChild(TemplateRef, { static: true }) _implicitContent!: TemplateRef<any>;\n\n /**\n * Indica il link che possiamo passare all'elemento\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Input() link: string | any[] | null | undefined;\n\n /**\n * Permette di utilizzare l'attributo html title\n */\n @Input() title?: string;\n\n /**\n * Permette di utilizzare l'attributo html accesskey\n */\n @Input() accesskey?: string;\n\n /**\n * Permette di utilizzare l'attributo html tabindex\n */\n @Input() tabindex?: number;\n}\n\n@Component({\n standalone: true,\n selector: 'it-avatar-dropdown',\n templateUrl: './avatar-dropdown.component.html',\n styleUrls: ['./avatar-dropdown.component.scss'],\n imports: [ItDropdownModule, NgTemplateOutlet, RouterLink],\n})\nexport class ItAvatarDropdownComponent {\n @HostBinding('class') componentClass = 'avatar avatar-dropdown';\n\n @ContentChildren(ItAvatarDropdownItemComponent) items!: QueryList<ItAvatarDropdownItemComponent>;\n}\n","<it-dropdown id=\"dropdown\" class=\"dropdown\">\n <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n <ng-container list class=\"dropdown-menu\">\n @for (item of items; track item) {\n <li>\n @if (item.link) {\n <a\n [routerLink]=\"item.link\"\n class=\"dropdown-item list-item\"\n title=\"item.title\"\n accesskey=\"item.accesskey\"\n tabindex=\"item.tabindex\">\n <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n </a>\n } @else {\n <div class=\"dropdown-item list-item\">\n <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n </div>\n }\n </li>\n }\n </ng-container>\n</it-dropdown>\n","export enum ColorsEnum {\n primary = 'primary',\n secondary = 'secondary',\n success = 'success',\n danger = 'danger',\n warning = 'warning',\n green = 'green',\n orange = 'orange',\n red = 'red',\n}\n","export enum SizesEnum {\n xs = 'size-xs',\n sm = 'size-sm',\n lg = 'size-lg',\n xl = 'size-xl',\n xxl = 'size-xxl',\n}\n","import { ColorsEnum } from '../../../enums/colors.enums';\nimport { SizesEnum } from '../../../enums/sizes.enum';\nimport { Directive, HostBinding, Input } from '@angular/core';\n\n@Directive({\n standalone: true,\n selector: '[itAvatar]',\n exportAs: 'itAvatar',\n})\nexport class ItAvatarDirective {\n /**\n * Indica il colore dell'avatar. Può assumere i valori:\n * <ul>\n * <li> primary\n * <li> secondary\n * <li> green\n * <li> orange\n * <li> red\n * </ul>\n */\n @Input()\n get color(): string | undefined {\n return this._color;\n }\n set color(value: string | undefined) {\n const colorsKey = value as keyof typeof ColorsEnum;\n if (ColorsEnum[colorsKey]) {\n this._color = ColorsEnum[colorsKey];\n } else {\n this._color = undefined;\n }\n }\n private _color?: ColorsEnum;\n /**\n * Indica la grandezza dell'avatar. Può assumere i valori:\n * <ul>\n * <li> xs\n * <li> sm\n * <li> lg\n * <li> xl\n * <li> xxl\n * </ul>\n */\n @Input()\n get size(): SizesEnum | undefined {\n return this._size;\n }\n set size(value: string | undefined) {\n const sizesKey = value as keyof typeof SizesEnum;\n if (SizesEnum[sizesKey]) {\n this._size = SizesEnum[sizesKey];\n } else {\n this._size = undefined;\n }\n }\n\n private _size?: SizesEnum;\n\n @HostBinding('class')\n get hostClasses(): string {\n let cssClass = 'avatar';\n\n if (this.size) {\n cssClass += ` ${this.size}`;\n }\n\n if (this.color) {\n cssClass += ` avatar-${this.color}`;\n }\n\n return cssClass;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { ItAvatarGroupComponent, ItAvatarGroupItemComponent } from './avatar-group/avatar-group.component';\nimport { ItAvatarDropdownComponent, ItAvatarDropdownItemComponent } from './avatar-dropdown/avatar-dropdown.c