design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
765 lines (749 loc) • 499 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Component, Input, Output, booleanAttribute, ChangeDetectionStrategy, ViewChild, InjectionToken, TemplateRef, HostBinding, ContentChildren, NgModule, Directive, Optional, Host, Inject, HostListener, Injectable, Self, ViewChildren, ViewEncapsulation, Pipe, HostAttributeToken, DestroyRef, APP_INITIALIZER, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
import { Collapse, Alert, Dropdown, Carousel, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, SelectAutocomplete, BackToTop, NavBarCollapsible, HeaderSticky, loadFonts } from 'bootstrap-italia';
import * as i1 from '@ngx-translate/core';
import { TranslateModule, TranslatePipe, TranslateLoader, TranslateService } from '@ngx-translate/core';
import * as i1$3 from '@angular/common';
import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, LowerCasePipe, DatePipe, NgOptimizedImage, TitleCasePipe, JsonPipe, ViewportScroller } from '@angular/common';
import * as i1$4 from '@angular/router';
import { RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterLinkWithHref } from '@angular/router';
import { startWith, Subject, filter, debounceTime, distinctUntilChanged, tap, switchMap, of, merge, map, Observable, take, forkJoin, BehaviorSubject, shareReplay, combineLatest, skip, AsyncSubject, withLatestFrom, delay, timer, takeWhile } from 'rxjs';
import { trigger, transition, style, animate } from '@angular/animations';
import * as i1$1 from '@angular/forms';
import { FormControl, FormGroup, Validators, ReactiveFormsModule, NgModel, FormControlName } from '@angular/forms';
import * as i1$2 from '@angular/platform-browser';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { provideHttpClient, HttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import videojs from 'video.js';
import { initYoutubePlugin } from 'bootstrap-italia/dist/plugins/util/youtube-video.js';
import { map as map$1 } from 'rxjs/operators';
class ItAbstractComponent {
/**
* Counter of active instances
* @private
*/
static { this.instances = 0; }
constructor() {
/**
* The element ID
*/
this.id = this.getDefaultId();
this._renderer = inject(Renderer2);
this._elementRef = inject(ElementRef);
this._changeDetectorRef = inject(ChangeDetectorRef);
this.valueChanges = new EventEmitter();
}
ngAfterViewInit() {
this._renderer.removeAttribute(this._elementRef.nativeElement, 'id');
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ngOnChanges(changes) {
this.valueChanges.next(); // The inputs were changed
}
/**
* Generate unique id for components
* @private
*/
getDefaultId() {
const name = this.constructor.name.replace('Component', '');
const kebabName = name.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
return `${kebabName}-${ItAbstractComponent.instances++}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAbstractComponent, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractComponent, decorators: [{
type: Component,
args: [{ template: '' }]
}], ctorParameters: () => [], propDecorators: { id: [{
type: Input
}], valueChanges: [{
type: Output
}] } });
/**
* Transforms a value (typically a string) to a boolean.
* Intended to be used as a transform function of an input.
*
* @usageNotes
* ```typescript
* @Input({ transform: booleanAttribute }) status?: boolean;
* ```
* @param {BooleanInput} value Value to be transformed.
*
* @publicApi
*/
function inputToBoolean(value) {
// Wrap `@angular/core` function to force value type, for ide hits
return booleanAttribute(value);
}
class ItCollapseComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Custom class
*/
this.class = '';
/**
* This event fires immediately when the show method is called.
*/
this.showEvent = new EventEmitter();
/**
* This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
*/
this.shownEvent = new EventEmitter();
/**
* This event fires immediately when the hide method is called.
*/
this.hideEvent = new EventEmitter();
/**
* This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
*/
this.hiddenEvent = new EventEmitter();
this.open = false;
}
ngAfterViewInit() {
super.ngAfterViewInit();
this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
if (this.collapseDiv) {
const element = this.collapseDiv.nativeElement;
this.collapse = Collapse.getOrCreateInstance(element, {
toggle: this.opened,
});
element.addEventListener('show.bs.collapse', event => {
this.open = true;
this.showEvent.emit(event);
});
element.addEventListener('shown.bs.collapse', event => {
this.open = true;
this.shownEvent.emit(event);
});
element.addEventListener('hide.bs.collapse', event => {
this.open = false;
this.hideEvent.emit(event);
});
element.addEventListener('hidden.bs.collapse', event => {
this.open = false;
this.hiddenEvent.emit(event);
});
}
}
/**
* Shows if collapse is open or not
*/
isOpen() {
return this.open;
}
/**
* Shows a resealable item
* NOTE: Returns to the caller before the collapsable element has actually been shown (onShown event).
*/
show() {
this.collapse?.show();
}
/**
* Hides a resealable item
* NOTE: Returns to the caller before the collapsable element has actually been hidden (onHidden Event)
*/
hide() {
this.collapse?.hide();
}
/**
* 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() {
this.collapse?.toggle();
}
/**
* Eliminates the possibility of an item being resealable
*/
dispose() {
this.collapse?.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItCollapseComponent, isStandalone: true, selector: "it-collapse", inputs: { multi: ["multi", "multi", inputToBoolean], opened: ["opened", "opened", inputToBoolean], class: "class" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itCollapse"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCollapseComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-collapse', exportAs: 'itCollapse', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n <ng-content></ng-content>\n</div>\n" }]
}], propDecorators: { multi: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], opened: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], class: [{
type: Input
}], showEvent: [{
type: Output
}], shownEvent: [{
type: Output
}], hideEvent: [{
type: Output
}], hiddenEvent: [{
type: Output
}], collapseDiv: [{
type: ViewChild,
args: ['collapse']
}] } });
/**
* Accordion
* @description Build vertically collapsible accordions based on Collapse.
*/
class ItAccordionComponent extends ItCollapseComponent {
constructor() {
super(...arguments);
this.isCollapsed = true;
}
ngAfterViewInit() {
super.ngAfterViewInit();
this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
this.isCollapsed = !this.opened;
this.hideEvent.subscribe(() => {
this.isCollapsed = true;
this._changeDetectorRef.detectChanges();
});
this.showEvent.subscribe(() => {
this.isCollapsed = false;
this._changeDetectorRef.detectChanges();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAccordionComponent, isStandalone: true, selector: "it-accordion", inputs: { title: "title" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<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", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-accordion', exportAs: 'itAccordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<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" }]
}], propDecorators: { title: [{
type: Input,
args: [{ required: true }]
}], collapseDiv: [{
type: ViewChild,
args: ['collapse']
}] } });
/**
* The bootstrap-italia asset folder path
* @default ./bootstrap-italia
*/
const IT_ASSET_BASE_PATH = new InjectionToken('it-asset-base-path');
class ItIconComponent {
/**
* Return the icon href
*/
get iconHref() {
return `${this.assetBasePath}/dist/svg/sprites.svg#it-${this.name}`;
}
/**
* Return the icon class
*/
get iconClass() {
let iconClass = 'icon';
if (this.size) {
iconClass += ` icon-${this.size}`;
}
if (this.color) {
iconClass += ` icon-${this.color}`;
}
if (this.padded) {
iconClass += ` icon-padded`;
}
if (this.svgClass) {
iconClass += ` ${this.svgClass}`;
}
return iconClass;
}
get isAriaHidden() {
return this.labelWaria == undefined && this.title == undefined;
}
get role() {
return this.labelWaria == undefined && this.title == undefined ? null : 'img';
}
constructor() {
this.assetBasePath = inject(IT_ASSET_BASE_PATH);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", title: "title", labelWaria: "labelWaria" }, ngImport: i0, template: "<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", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItIconComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<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", styles: [":host{display:contents}\n"] }]
}], ctorParameters: () => [], propDecorators: { name: [{
type: Input,
args: [{ required: true }]
}], size: [{
type: Input
}], color: [{
type: Input
}], padded: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], svgClass: [{
type: Input
}], title: [{
type: Input
}], labelWaria: [{
type: Input
}] } });
/**
* Alert
* @description You can provide feedback to the user via alert messages.
*/
class ItAlertComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* The alert color
* @default info
*/
this.color = 'info';
/**
* This event fires immediately when the instance's close method is called.
*/
this.closeEvent = new EventEmitter();
/**
* This event fires when the alert has been closed (it will wait for CSS transitions to complete).
*/
this.closedEvent = new EventEmitter();
}
ngAfterViewInit() {
super.ngAfterViewInit();
if (this.alertElement) {
const element = this.alertElement.nativeElement;
this.alert = Alert.getOrCreateInstance(element);
element.addEventListener('close.bs.alert', event => this.closeEvent.emit(event));
element.addEventListener('closed.bs.alert', event => this.closedEvent.emit(event));
}
}
/**
* 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() {
this.alert?.close();
}
/**
* The alert is removed
*/
dispose() {
this.alert?.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<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", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent], template: "<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", styles: [".alert-heading:empty{display:none}\n"] }]
}], propDecorators: { color: [{
type: Input
}], dismissible: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], closeEvent: [{
type: Output
}], closedEvent: [{
type: Output
}], alertElement: [{
type: ViewChild,
args: ['alertElement']
}] } });
class ItAvatarGroupItemComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarGroupItemComponent, isStandalone: true, selector: "it-avatar-item", viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupItemComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'it-avatar-item',
template: '<ng-template><ng-content></ng-content></ng-template>',
}]
}], propDecorators: { _implicitContent: [{
type: ViewChild,
args: [TemplateRef, { static: true }]
}] } });
class ItAvatarGroupComponent {
constructor() {
this.linkList = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAvatarGroupComponent, isStandalone: true, selector: "it-avatar-group", inputs: { linkList: ["linkList", "linkList", inputToBoolean] }, host: { properties: { "class.link-list-wrapper": "this.linkList" } }, queries: [{ propertyName: "avatars", predicate: ItAvatarGroupItemComponent }], ngImport: i0, template: "<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", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-avatar-group', imports: [NgTemplateOutlet], template: "<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" }]
}], propDecorators: { linkList: [{
type: Input,
args: [{ transform: inputToBoolean }]
}, {
type: HostBinding,
args: ['class.link-list-wrapper']
}], avatars: [{
type: ContentChildren,
args: [ItAvatarGroupItemComponent]
}] } });
class ItLinkComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Custom class
*/
this.class = '';
}
ngAfterViewInit() {
super.ngAfterViewInit();
this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
if (changes['class']) {
this._changeDetectorRef.markForCheck();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItLinkComponent, isStandalone: true, selector: "it-link", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@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", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLinkComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive, NgTemplateOutlet], template: "@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" }]
}], propDecorators: { href: [{
type: Input
}], externalLink: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], disabled: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], class: [{
type: Input
}] } });
class ItDropdownItemComponent extends ItLinkComponent {
constructor() {
super(...arguments);
/**
* The icon position
* @default right
*/
this.iconPosition = 'right';
/**
* Dropdown mode
*/
this.mode = 'button';
/**
* Change icon color if menu is dark
* @default false
*/
this.isDark = false;
}
get linkClass() {
let linkClass = `list-item ${this.active ? 'active' : 'dropdown-item'}`;
if (this.mode === 'nav') {
linkClass += ' nav-link';
}
if (this.disabled) {
linkClass += ' disabled';
}
if (this.large) {
linkClass += ' large';
}
if (this.iconName) {
linkClass += ` ${this.iconPosition === 'right' ? 'right-icon' : 'left-icon'}`;
}
return linkClass;
}
setDark(dark) {
if (this.isDark !== dark) {
this.isDark = dark;
this._changeDetectorRef.detectChanges();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition", mode: "mode" }, usesInheritance: true, ngImport: i0, template: "<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", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItLinkComponent], template: "<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", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
}], propDecorators: { divider: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], active: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], large: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], iconName: [{
type: Input
}], iconPosition: [{
type: Input
}], mode: [{
type: Input
}] } });
class ItDropdownComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Dropdown mode
*/
this.mode = 'button';
/**
* Fires immediately when the show instance method is called.
*/
this.showEvent = new EventEmitter();
/**
* Fired when the dropdown has been made visible to the user and CSS transitions have completed.
*/
this.shownEvent = new EventEmitter();
/**
* Fires immediately when the hide instance method has been called.
*/
this.hideEvent = new EventEmitter();
/**
* Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
*/
this.hiddenEvent = new EventEmitter();
}
get buttonClass() {
let btnClass = 'btn dropdown-toggle';
if (this.color) {
btnClass += ` btn-${this.color}`;
}
else {
btnClass += ` btn-dropdown`;
}
return btnClass;
}
ngOnChanges(changes) {
if (changes['dark'] && !changes['dark'].firstChange) {
this.setDarkItems();
}
if (changes['mode'] && !changes['mode'].firstChange) {
this.updateListeners();
}
super.ngOnChanges(changes);
}
ngAfterViewInit() {
super.ngAfterViewInit();
this.setDarkItems();
this.updateListeners();
this.items?.forEach(item => {
item.mode = this.mode;
});
}
/**
* Set child items dark mode
* @private
*/
setDarkItems() {
if (this.dark !== undefined) {
this.items?.forEach(item => {
item.setDark(!!this.dark);
});
}
}
updateListeners() {
if (this.dropdownButton) {
const element = this.dropdownButton.nativeElement;
this.dropdown = Dropdown.getOrCreateInstance(element);
element.addEventListener('show.bs.dropdown', event => this.showEvent.emit(event));
element.addEventListener('shown.bs.dropdown', event => this.shownEvent.emit(event));
element.addEventListener('hide.bs.dropdown', event => this.hideEvent.emit(event));
element.addEventListener('hidden.bs.dropdown', event => this.hiddenEvent.emit(event));
}
}
/**
* Toggles the dropdown menu of a given navbar or tabbed navigation.
*/
toggle() {
this.dropdown?.toggle();
}
/**
* Shows the dropdown menu of a given navbar or tabbed navigation.
*/
show() {
this.dropdown?.show();
}
/**
* Hides the dropdown menu of a given navbar or tabbed navigation.
*/
hide() {
this.dropdown?.hide();
}
/**
* Updates the position of an element's dropdown.
*/
update() {
this.dropdown?.update();
}
/**
* Destroys an element's dropdown. (Removes stored data on the DOM element)
*/
dispose() {
this.dropdown?.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDropdownComponent, isStandalone: true, selector: "it-dropdown", inputs: { mode: "mode", color: "color", direction: "direction", fullWidth: ["fullWidth", "fullWidth", inputToBoolean], megamenu: ["megamenu", "megamenu", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, queries: [{ propertyName: "items", predicate: ItDropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<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", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-dropdown', exportAs: 'itDropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "<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", styles: [".link-list-heading:empty{display:none}\n"] }]
}], propDecorators: { mode: [{
type: Input
}], color: [{
type: Input
}], direction: [{
type: Input
}], fullWidth: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], megamenu: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], dark: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], items: [{
type: ContentChildren,
args: [ItDropdownItemComponent]
}], showEvent: [{
type: Output
}], shownEvent: [{
type: Output
}], hideEvent: [{
type: Output
}], hiddenEvent: [{
type: Output
}], dropdownButton: [{
type: ViewChild,
args: ['dropdownButton']
}] } });
const dropdownComponents = [ItDropdownComponent, ItDropdownItemComponent];
class ItDropdownModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownComponent, ItDropdownItemComponent], exports: [ItDropdownComponent, ItDropdownItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownItemComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, decorators: [{
type: NgModule,
args: [{
imports: dropdownComponents,
exports: dropdownComponents,
}]
}] });
class ItAvatarDropdownItemComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarDropdownItemComponent, isStandalone: true, selector: "it-avatar-dropdown-item", inputs: { link: "link", title: "title", accesskey: "accesskey", tabindex: "tabindex" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-avatar-dropdown-item', template: '<ng-template><ng-content></ng-content></ng-template>', imports: [NgTemplateOutlet], styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
}], propDecorators: { _implicitContent: [{
type: ViewChild,
args: [TemplateRef, { static: true }]
}], link: [{
type: Input
}], title: [{
type: Input
}], accesskey: [{
type: Input
}], tabindex: [{
type: Input
}] } });
class ItAvatarDropdownComponent {
constructor() {
this.componentClass = 'avatar avatar-dropdown';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAvatarDropdownComponent, isStandalone: true, selector: "it-avatar-dropdown", host: { properties: { "class": "this.componentClass" } }, queries: [{ propertyName: "items", predicate: ItAvatarDropdownItemComponent }], ngImport: i0, template: "<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", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-avatar-dropdown', imports: [ItDropdownModule, NgTemplateOutlet, RouterLink], template: "<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", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
}], propDecorators: { componentClass: [{
type: HostBinding,
args: ['class']
}], items: [{
type: ContentChildren,
args: [ItAvatarDropdownItemComponent]
}] } });
var ColorsEnum;
(function (ColorsEnum) {
ColorsEnum["primary"] = "primary";
ColorsEnum["secondary"] = "secondary";
ColorsEnum["success"] = "success";
ColorsEnum["danger"] = "danger";
ColorsEnum["warning"] = "warning";
ColorsEnum["green"] = "green";
ColorsEnum["orange"] = "orange";
ColorsEnum["red"] = "red";
})(ColorsEnum || (ColorsEnum = {}));
var SizesEnum;
(function (SizesEnum) {
SizesEnum["xs"] = "size-xs";
SizesEnum["sm"] = "size-sm";
SizesEnum["lg"] = "size-lg";
SizesEnum["xl"] = "size-xl";
SizesEnum["xxl"] = "size-xxl";
})(SizesEnum || (SizesEnum = {}));
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() {
return this._color;
}
set color(value) {
const colorsKey = value;
if (ColorsEnum[colorsKey]) {
this._color = ColorsEnum[colorsKey];
}
else {
this._color = undefined;
}
}
/**
* Indica la grandezza dell'avatar. Può assumere i valori:
* <ul>
* <li> xs
* <li> sm
* <li> lg
* <li> xl
* <li> xxl
* </ul>
*/
get size() {
return this._size;
}
set size(value) {
const sizesKey = value;
if (SizesEnum[sizesKey]) {
this._size = SizesEnum[sizesKey];
}
else {
this._size = undefined;
}
}
get hostClasses() {
let cssClass = 'avatar';
if (this.size) {
cssClass += ` ${this.size}`;
}
if (this.color) {
cssClass += ` avatar-${this.color}`;
}
return cssClass;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarDirective, isStandalone: true, selector: "[itAvatar]", inputs: { color: "color", size: "size" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatar"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDirective, decorators: [{
type: Directive,
a