design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
6,732 lines • 477 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, CarouselBI, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, 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, 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 { 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,
args: [{
standalone: true,
selector: '[itAvatar]',
exportAs: 'itAvatar',
}]
}], propDecorators: { color: [{
type: Input
}], size: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
const avatarComponents = [
ItAvatarGroupItemComponent,
ItAvatarGroupComponent,
ItAvatarDropdownComponent,
ItAvatarDropdownItemComponent,
ItAvatarDirective,
];
class ItAvatarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarGroupItemComponent,
ItAvatarGroupComponent,
ItAvatarDropdownComponent,
ItAvatarDropdownItemComponent,
ItAvatarDirective], exports: [ItAvatarGroupItemComponent,
ItAvatarGroupComponent,
ItAvatarDropdownComponent,
ItAvatarDropdownItemComponent,
ItAvatarDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarDropdownComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, decorators: [{
type: NgModule,
args: [{
imports: avatarComponents,
exports: avatarComponents,
}]
}] });
/**
* Badge
* @description Useful for small counters and labels
*/
class ItBadgeDirective {
get badgeClass() {
let badgeClass = 'badge';
if (this.rounded) {
badgeClass += ` rounded-pill`;
}
if (this.color) {
badgeClass += ` bg-${this.color}`;
}
return badgeClass;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItBadgeDirective, isStandalone: true, selector: "[itBadge]", inputs: { color: ["itBadge", "color"], rounded: ["rounded", "rounded", inputToBoolean] }, host: { properties: { "class": "this.badgeClass" } }, exportAs: ["itBadge"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBadgeDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[itBadge]',
exportAs: 'itBadge',
}]
}], propDecorators: { color: [{
type: Input,
args: ['itBadge']
}], rounded: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], badgeClass: [{
type: HostBinding,
args: ['class']
}] } });
class ItProgressBarComponent {
/**
* Return the background color
*/
get bgColor() {
if (!this.color) {
return '';
}
return ` bg-${this.color}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItProgressBarComponent, isStandalone: true, selector: "it-progress-bar", inputs: { value: "value", showLabel: ["showLabel", "showLabel", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean], color: "color" }, ngImport: i0, template: "<div class=\"progress-bar-wrapper\">\n @if (showLabel) {\n <div class=\"progress-bar-label\">\n <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n </div>\n }\n <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n @if (indeterminate) {\n <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n } @else {\n <div\n class=\"progress-bar{{ bgColor }}\"\n role=\"progressbar\"\n [style.width.%]=\"value\"\n [attr.aria-valuenow]=\"value\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressBarComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div class=\"progress-bar-wrapper\">\n @if (showLabel) {\n <div class=\"progress-bar-label\">\n <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n </div>\n }\n <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n @if (indeterminate) {\n <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n } @else {\n <div\n class=\"progress-bar{{ bgColor }}\"\n role=\"progressbar\"\n [style.width.%]=\"value\"\n [attr.aria-valuenow]=\"value\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n }\n </div>\n</div>\n" }]
}], propDecorators: { value: [{
type: Input,
args: [{ required: true }]
}], showLabel: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], indeterminate: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], color: [{
type: Input
}] } });
class ItProgressButtonComponent {
get isProgress() {
return typeof this.progress === 'number' || !!this.progress;
}
get progressValue() {
return typeof this.progress === 'number' ? this.progress : 0;
}
get isIndeterminate() {
return typeof this.progress !== 'number' && !!this.progress;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItProgressButtonComponent, isStandalone: true, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (isProgress) {\n <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n", dependencies: [{ kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressButtonComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'button[itButton][progress]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItProgressBarComponent], template: "<ng-content></ng-content>\n\n@if (isProgress) {\n <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n" }]
}], propDecorators: { progress: [{
type: Input
}], progressColor: [{
type: Input
}] } });
/**
* Button
* @description Bootstrap italia custom button styles
*/
class ItButtonDirective {
constructor(progressButtonComponent) {
this.progressButtonComponent = progressButtonComponent;
/**
* The type attribute
* @default button
*/
this.type = 'button';
}
get hostClasses() {
let cssClass = 'btn';
if (this.color) {
cssClass += ` btn-${this.color}`;
}
if (this.size) {
cssClass += ` btn-${this.size}`;
}
if (this.block) {
cssClass += ' btn-block';
}
if (this.disabled) {
cssClass += ' disabled';
}
if (this.icons?.length && !this.progressButtonComponent) {
cssClass += ' btn-icon';
}
if (this.progressButtonComponent) {
cssClass += ' btn-progress';
}
return cssClass;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItButtonDirective, deps: [{ token: ItProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { properties: { "disabled": "this.disabled", "type": "this.type", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItButtonDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[itButton]',
exportAs: 'itButton',
}]
}], ctorParameters: () => [{ type: ItProgressButtonComponent, decorators: [{
type: Optional
}, {
type: Host
}] }], propDecorators: { color: [{
type: Input,
args: ['itButton']
}], size: [{
type: Input
}], block: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: inputToBoolean }]
}, {
type: HostBinding,
args: ['disabled']
}], type: [{
type: Input
}, {
type: HostBinding,
args: ['type']
}], icons: [{
type: ContentChildren,
args: [ItIconComponent]
}], hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
/**
* 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.
*/
class ItCalloutComponent {
constructor() {
/**
* 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
*/
this.appearance = 'default';
/**
* The input label even get labelWaria icon
* @default undefined
*/
this.labelWaria = undefined;
}
get iconName() {
if (this.icon) {
return this.icon;
}
if (this.appearance === 'more') {
return 'zoom-in';
}
switch (this.color) {
case 'success':
return 'check-circle';
case 'warning':
return 'help-circle';
case 'danger':
return 'close-circle';
case 'important':
case 'note':
default:
return 'info-circle';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCalloutComponent, isStandalone: true, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon", labelWaria: "labelWaria" }, ngImport: i0, template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n @if (appearance === 'default') {\n <div class=\"callout-inner\">\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n }\n</div>\n\n<ng-template #inner>\n @if (label) {\n <div class=\"callout-title\">\n <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n @if (hiddenLabel) {\n <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n }\n <span class=\"text\">{{ label }}</span>\n </div>\n }\n <p class=\"callout-big-text\">\n <ng-content select=\"[bigText]\"></ng-content>\n </p>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: ItCalloutComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-callout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItIconComponent], template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n @if (appearance === 'default') {\n <div class=\"callout-inner\">\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n }\n</div>\n\n<ng-template #inner>\n @if (label) {\n <div class=\"callout-title\">\n <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n @if (hiddenLabel) {\n <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n }\n <span class=\"text\">{{ label }}</span>\n </div>\n }\n <p class=\"callout-big-text\">\n <ng-content select=\"[bigText]\"></ng-content>\n </p>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"] }]
}], propDecorators: { label: [{
type: Input
}], hiddenLabel: [{
type: Input
}], color: [{
type: Input
}], appearance: [{
type: Input
}], icon: [{
type: Input
}], labelWaria: [{
type: Input
}] } });
/**
* Card
* @description A container of texts and images with many options and variations.
*/
class ItCardComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Custom card class
* @default ''
*/
this.cardClass = '';
/**
* Custom card body class
* @default ''
*/
this.bodyClass = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { teaser: ["teaser", "teaser", inputToBoolean], special: ["special", "special", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], background: ["background", "background", inputToBoolean], borderBottom: ["borderBottom", "borderBottom", inputToBoolean], big: ["big", "big", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n\n <div class=\"card-body {{ bodyClass }}\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n@if (!special) {\n <div\n class=\"card {{ cardClass }}\"\n [class.card-img]=\"hasImage\"\n [class.card-teaser]=\"teaser\"\n [class.no-after]=\"hasImage\"\n [class.shadow]=\"shadow\"\n [class.card-bg]=\"background\"\n [class.card-big]=\"big\"\n [class.border-bottom-card]=\"borderBottom\"\n [class.rounded]=\"rounded\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n </div>\n} @else {\n <a\n class=\"card special-card {{ cardClass }}\"\n [class.card-img]=\"hasImage\"\n [class.card-teaser]=\"teaser\"\n [class.shadow]=\"shadow\"\n [class.card-bg]=\"background\"\n [class.card-big]=\"big\"\n [class.no-after]=\"hasImage\"\n [class.border-bottom-card]=\"borderBottom\"\n [class.rounded]=\"rounded\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ 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: ItCardComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n\n <div class=\"card-body {{ bodyClass }}\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n@if (!special) {\n <div\n class=\"card {{ cardClass }}\"\n [class.card-img]=\"hasImage\"\n [class.card-teaser]=\"teaser\"\n [class.no-after]=\"hasImage\"\n [class.shadow]=\"shadow\"\n [class.card-bg]=\"background\"\n [class.card-big]=\"big\"\n [class.border-bottom-card]=\"borderBottom\"\n [class.rounded]=\"rounded\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n </div>\n} @else {\n <a\n class=\"card special-card {{ cardClass }}\"\n [class.card-img]=\"hasImage\"\n [class.card-teaser]=\"teaser\"\n [class.shadow]=\"shadow\"\n [class.card-bg]=\"background\"\n [class.card-big]=\"big\"\n [class.no-after]=\"hasImage\"\n [class.border-bottom-card]=\"borderBottom\"\n [class.rounded]=\"rounded\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
}], propDecorators: { teaser: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], special: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], hasImage: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], rounded: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], shadow: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], background: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], borderBottom: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], big: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], cardClass: [{
type: Input
}], bodyClass: [{
type: Input
}] } });
/**
* Carousel Item
* @description element, image or text slide of carousel
*/
class ItCarouselItemComponent extends ItAbstractComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItCarouselItemComponent, isStandalone: true, selector: "it-carousel-item", viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-carousel-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], propDecorators: { htmlContent: [{
type: ViewChild,
args: [TemplateRef]
}] } });
/**
* Carousel
* @description A presentation component for scrolling through elements, images or text slides.
*/
class ItCarouselComponent {
get typeClass() {
const typeClass = 'it-carousel-landscape-abstract';
return this.type === 'default' ? typeClass : typeClass + `-${this.type}`;
}
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
/**
* The carousel type
* @default default
*/
this.type = 'default';
/**
* Custom class in splide__track element
* @default ''
*/
this.trackClass = '';
}
ngAfterViewInit() {
this.carousel = CarouselBI.getOrCreateInstance(this.carouselDiv.nativeElement);
this.items?.changes
.pipe(
// When carousel items changes (dynamic add/remove)
startWith(undefined))
.subscribe(() => {
this.itemSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
this.itemSubscriptions = this.items?.map(item => item.valueChanges.subscribe(() => {
this._changeDetectorRef.detectChanges(); // DetectChanges when carousel item attributes changes
}));
this._changeDetectorRef.detectChanges(); // Force update html render
});
}
ngOnDestroy() {
this.itemSubscriptions?.forEach(item => item.unsubscribe());
}
/**
* Removes CarouselBI features
*/
dispose() {
this.carousel?.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCarouselComponent, isStandalone: true, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: ["fullCarousel", "fullCarousel", inputToBoolean], bigImg: ["bigImg", "bigImg", inputToBoolean], standardImage: ["standardImage", "standardImage", inputToBoolean], lined: ["lined", "lined", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItCarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div\n #carousel\n class=\"it-carousel-wrapper splide {{ typeClass }}\"\n [class.it-full-carousel]=\"fullCarousel\"\n [class.it-big-img]=\"bigImg\"\n [class.it-standard-image]=\"standardImage\"\n data-bs-carousel-splide>\n @if (title) {\n <div class=\"it-header-block\">\n <div class=\"it-header-block-title\">\n <h2>{{ title }}</h2>\n </div>\n </div>\n }\n\n <div class=\"splide__track {{ trackClass }}\">\n @if (items) {\n <ul class=\"splide__list\">\n @for (item of items; track item) {\n <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n <div class=\"it-single-slide-wrapper\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ 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: ItCarouselComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-carousel', exportAs: 'itCarousel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div\n #carousel\n class=\"it-carousel-wrapper splide {{ typeClass }}\"\n [class.it-full-carousel]=\"fullCarousel\"\n [class.it-big-img]=\"bigImg\"\n [class.it-standard-image]=\"standardImage\"\n data-bs-carousel-splide>\n @if (title) {\n <div class=\"it-header-block\">\n <div class=\"it-header-block-title\">\n <h2>{{ title }}</h2>\n </div>\n </div>\n }\n\n <div class=\"splide__track {{ trackClass }}\">\n @if (items) {\n <ul class=\"splide__list\">\n @for (item of items; track item) {\n <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n <div class=\"it-single-slide-wrapper\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
type: Input
}], type: [{
type: Input
}], trackClass: [{
type: Input
}], fullCarousel: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], bigImg: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], standardImage: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], lined: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], items: [{
type: ContentChildren,
args: [ItCarouselItemComponent]
}], carouselDiv: [{
type: ViewChild,
args: ['carousel']
}] } });
const carouselComponents = [ItCarouselComponent, ItCarouselItemComponent];
class ItCarouselModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, imports: [ItCarouselComponent, ItCarouselItemComponent], exports: [ItCarouselComponent, ItCarouselItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, decorators: [{
type: NgModule,
args: [{
imports: carouselComponents,
exports: carouselComponents,
}]
}] });
class ItChipComponent {
/**
* Indica la label
*/
set label(value) {
this._label = value;
}
get label() {
return this._label;
}
/**
* Indica se mostrate il pulante di chisura
*/
set showCloseButton(value) {
this._showCloseButton = value;
}
get showCloseButton() {
return this._showCloseButton;
}
/**
* Indica il size
*/
set size(value) {
this._size = value;
}
get size() {
return this._size;
}
/**
* Indica il colore della chip
*/
set color(value) {
this._color = value;
}
get color() {
return this._color;
}
/**
* Indica se la chip è disabilitata
*/
set disabled(value) {
this._disabled = value;
}
get disabled() {
return this._disabled;
}
/**
* Indica il nome dell'icona, se valorizzata viene mostrata
*/
set icon(value) {
this._icon = value;
}
get icon() {
return this._icon;
}
/**
* Indica l'url dell'avatar, se valorizzata viene mostrata
*/
set avatar(value) {
this._avatar = value;
}
get avatar() {
return this._avatar;
}
/**
* Indica il valore da aggiungere al parametro alt, di default ''
*/
set altAvatar(value) {
this._altAvatar = value;
}
get altAvatar() {
return this._altAvatar;
}
/**
* Return the icon href
*/
get iconHref() {
return `${this.assetBasePath}/dist/svg/sprites.svg#it-${this._icon}`;
}
/**
* Return the close icon href
*/
get iconCloseHref() {
return `${this.assetBasePath}/dist/svg/sprites.svg#it-${this.iconClose}`;
}
constructor() {
this._label = '';
this._showCloseButton = false;
this._size = '';
this._color = undefined;
this._disabled = false;
this._icon = undefined;
this._avatar = undefined;
this._altAvatar = '';
/**
* Evento emesso al click sul bottone di chiusura
*/
this.closeEvent = new EventEmitter();
this.iconClose = 'close';
this.assetBasePath = inject(IT_ASSET_BASE_PATH);
}
clickToClose() {
this.closeEvent.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItChipComponent, isStandalone: true, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div\n class=\"chip\"\n [ngClass]=\"[\n !showCloseButton ? 'chip-simple' : 'alert',\n size === 'lg' ? 'chip-lg' : '',\n color ? 'chip-' + color : '',\n disabled ? 'chip-disabled' : '',\n ]\">\n @if (icon) {\n <svg class=\"icon icon-xs\">\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n </svg>\n }\n @if (avatar) {\n <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n }\n <span class=\"chip-label\">{{ label }}</span>\n @if (showCloseButton) {\n <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n <svg class=\"icon\">\n <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n </svg>\n <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItChipComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TranslateModule], template: "<div\n class=\"chip\"\n [ngClass]=\"[\n !showCloseButton ? 'chip-simple' : 'alert',\n size === 'lg' ? 'chip-lg' : '',\n color ? 'chip-' + color : '',\n disabled ? 'chip-disabled' : '',\n ]\">\n @if (icon) {\n <svg class=\"icon icon-xs\">\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n </svg>\n }\n @if (avatar) {\n <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n }\n <span class=\"chip-label\">{{ label }}</span>\n @if (showCloseButton) {\n <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n <svg class=\"icon\">\n <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n </svg>\n <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n </button>\n }\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { label: [{
type: Input
}], showCloseButton: [{
type: Input
}], size: [{
type: Input
}], color: [{
type: Input
}], disabled: [{
type: Input
}], icon: [{
type: Input
}], avatar: [{
type: Input
}], altAvatar: [{
type: Input
}], closeEvent: [{
type: Output
}] } });
class ItDimmerComponent {
/**
* Dimmer status
* @default false
*/
set active(value) {
this._active = value;
}
get active() {
return this._active;
}
/**
* Colore del dimmer
* @default ''
*/
set color(value) {
this._color = value;
}
get color() {
return this._color;
}
constructor(elementRef) {
this.elementRef = elementRef;
this._active = false;
this._color = '';
}
ngOnInit() {
this.elementRef?.nativeElement?.parentElement?.classList?.add('dimmable');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDimmerComponent, isStandalone: true, selector: "it-dimmer", inputs: { active: "active", color: "color" }, ngImport: i0, template: "@if (active) {\n <div class=\"dimmer\" @fade [ngClass]=\"[color, 'show']\">\n <div class=\"dimmer-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
trigger('fade', [
transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.9 }))]),
transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-dimmer', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
trigger('fade', [
transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.9 }))]),
transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
]),
], imports: [NgClass], template: "@if (active) {\n <div class=\"dimmer\" @fade [ngClass]=\"[color, 'show']\">\n <div class=\"dimmer-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n}\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
type: Input
}], color: [{
type: Input
}] } });
class ItDimmerIconComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItDimmerIconComponent, isStandalone: true, selector: "it-dimmer-icon", ngImport: i0, template: "<div class=\"dimmer-icon\">\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: ItDimmerIconComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-dimmer-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"dimmer-icon\">\n <ng-content></ng-content>\n</div>\n" }]
}] });
class ItDimmerButtonsComponent {
constructor() {
this._hasOneButton = false;
}
/**
* Indica se abbiamo 1 solo bottone
* @default false
*/
set hasOneButton(value) {
this._hasOneButton = value;
}
get hasOneButton() {
return this._hasOneButton;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItDimmerButtonsComponent, isStandalone: true, selector: "it-dimmer-buttons", inputs: { hasOneButton: "hasOneButton" }, ngImport: i0, template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerButtonsComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-dimmer-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n <ng-content></ng-content>\n</div>\n" }]
}], propDecorators: { hasOneButton: [{
type: Input
}] } });
const dimmerComponents = [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent];
class ItDimmerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, imports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent], exports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, decorators: [{
type: NgModule,
args: [{
imports: dimmerComponents,
exports: dimmerComponents,
}]
}] });
class ItForwardDirective {
/**
* Indica, se HTMLElement, l'elemento a cui navigare, o se stringa, il selettore che selezionerà l'elemento a cui navigare.
*/
set itForward(value) {
this._itForward = value;
}
get itForward() {
return this._itForward;
}
constructor(document) {
this.document = document;
this._itForward = undefined;
}
onClick(event) {
event.preventDefault();
if (this.itForward) {
if (typeof this.itForward === 'string') {
this.document?.querySelector(this.itForward)?.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest',
});
}
else if (this.itForward instanceof HTMLElement) {
this.itForward.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest',
});
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItForwardDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItForwardDirective, isStandalone: true, selector: "[itForward]", inputs: { itForward: "itForward" }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "forward" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItForwardDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[itForward]',
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: { class: 'forward' },
}]
}], ctorParameters: () => [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { itForward: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class ItListComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItListComponent, isStandalone: true, selector: "it-list", inputs: { linkList: ["linkList", "linkList", inputToBoolean], linkSubList: ["linkSubList", "linkSubList", inputToBoolean], multiline: ["multiline", "multiline", inputToBoolean] }, ngImport: i0, template: "@if (!linkSubList) {\n <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </ul>\n </div>\n}\n@if (linkSubList) {\n <ul class=\"link-sublist\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n", dependencies: [{ 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: ItListComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (!linkSubList) {\n <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </ul>\n </div>\n}\n@if (linkSubList) {\n <ul class=\"link-sublist\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n" }]
}], propDecorators: { linkList: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], linkSubList: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], multiline: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
class ItListItemComponent extends ItLinkComponent {
constructor(elRef) {
super();
this.elRef = elRef;
}
get itemClass() {
const inSidebar = this.elRef.nativeElement.closest('.sidebar-linklist-wrapper') ? true : false;
let itemClass = 'list-item';
if (this.disabled) {
itemClass += ` disabled`;
}
if (this.active) {
itemClass += ` active`;
}
if (this.size) {
itemClass += ` ${this.size}`;
}
if (this.iconLeft) {
itemClass += inSidebar ? ` left-icon` : ` icon-left`;
}
if (this.iconRight) {
itemClass += inSidebar ? ` right-icon` : ` icon-right`;
}
if (this.class) {
itemClass += ` ${this.class}`;
}
return itemClass;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItListItemComponent, isStandalone: true, selector: "it-list-item", inputs: { active: ["active", "active", inputToBoolean], size: "size", iconLeft: ["iconLeft", "iconLeft", inputToBoolean], iconRight: ["iconRight", "iconRight", inputToBoolean], avatar: "avatar", image: "image" }, usesInheritance: true, ngImport: i0, template: "<li>\n <ng-template #content>\n <div class=\"it-rounded-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n @if (avatar) {\n <div class=\"avatar size-lg\">\n <img [attr.src]=\"avatar\" alt=\"avatar\" />\n </div>\n }\n\n @if (image) {\n <div class=\"it-thumb\">\n <img [attr.src]=\"image\" alt=\"thumb\" />\n </div>\n }\n\n <div class=\"it-right-zone\">\n <ng-content></ng-content>\n <ng-content select=\"[action]\"></ng-content>\n\n <span class=\"it-multiple\">\n <span class=\"metadata\">\n <ng-content select=\"[metadata]\"></ng-content>\n </span>\n\n <ng-content select=\"[multiple]\"></ng-content>\n </span>\n </div>\n </ng-template>\n\n @if (!href) {\n <div [class]=\"itemClass\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n } @else {\n <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </it-link>\n }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: ItListItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItLinkComponent], template: "<li>\n <ng-template #content>\n <div class=\"it-rounded-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n @if (avatar) {\n <div class=\"avatar size-lg\">\n <img [attr.src]=\"avatar\" alt=\"avatar\" />\n </div>\n }\n\n @if (image) {\n <div class=\"it-thumb\">\n <img [attr.src]=\"image\" alt=\"thumb\" />\n </div>\n }\n\n <div class=\"it-right-zone\">\n <ng-content></ng-content>\n <ng-content select=\"[action]\"></ng-content>\n\n <span class=\"it-multiple\">\n <span class=\"metadata\">\n <ng-content select=\"[metadata]\"></ng-content>\n </span>\n\n <ng-content select=\"[multiple]\"></ng-content>\n </span>\n </div>\n </ng-template>\n\n @if (!href) {\n <div [class]=\"itemClass\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n } @else {\n <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </it-link>\n }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], size: [{
type: Input
}], iconLeft: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], iconRight: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], avatar: [{
type: Input
}], image: [{
type: Input
}] } });
const listComponents = [ItListComponent, ItListItemComponent];
class ItListModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, imports: [ItListComponent, ItListItemComponent], exports: [ItListComponent, ItListItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, decorators: [{
type: NgModule,
args: [{
imports: listComponents,
exports: listComponents,
}]
}] });
/**
* Modal windows
* @description To show featured content, notifications to users, or personalized content.
*/
class ItModalComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Show/Hide close button on header
* @default true
*/
this.closeButton = true;
/**
* To have modals that appear with fades
* @default true
*/
this.fade = true;
/**
* Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal when clicked.
* @default true
*/
this.backdrop = true;
/**
* Puts the focus on the modal when initialized.
* @default true
*/
this.focus = true;
/**
* Closes the modal when escape key is pressed.
* @default true
*/
this.keyboard = true;
/**
* This event fires immediately when the instance method show is called.
*/
this.showEvent = new EventEmitter();
/**
* This event fires when the modal has been made visible to the user (it will wait for CSS transitions to complete).
*/
this.shownEvent = new EventEmitter();
/**
* This event is raised immediately when the instance method hide has been called.
*/
this.hideEvent = new EventEmitter();
/**
* This event fires when the modal has finished hiding from the user (it will wait for CSS transitions to complete).
*/
this.hiddenEvent = new EventEmitter();
/**
* 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.
*/
this.hidePreventedEvent = new EventEmitter();
}
ngAfterViewInit() {
super.ngAfterViewInit();
this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
if (this.modalElement) {
const element = this.modalElement.nativeElement;
this.modal = Modal.getOrCreateInstance(element, {
...this.options,
backdrop: this.backdrop === 'static' ? 'static' : this.backdrop,
focus: this.focus,
keyboard: this.keyboard,
});
element.addEventListener('show.bs.modal', event => this.showEvent.emit(event));
element.addEventListener('shown.bs.modal', event => this.shownEvent.emit(event));
element.addEventListener('hide.bs.modal', event => this.hideEvent.emit(event));
element.addEventListener('hidden.bs.modal', event => this.hiddenEvent.emit(event));
element.addEventListener('hidePrevented.bs.modal', event => this.hidePreventedEvent.emit(event));
}
}
get modalClass() {
let modalClass = 'modal';
if (this.fade) {
modalClass += ` fade`;
}
if (this.alertModal) {
modalClass += ` alert-modal`;
}
if (this.dialogLinkList) {
modalClass += ` it-dialog-link-list`;
}
if (this.popconfirm) {
modalClass += ` popconfirm-modal`;
}
if (this.scrollable) {
modalClass += ` it-dialog-scrollable`;
}
return modalClass;
}
get dialogClass() {
let dialogClass = 'modal-dialog';
if (this.alignment) {
dialogClass += ` modal-dialog-${this.alignment}`;
}
if (this.size) {
dialogClass += ` modal-${this.size}`;
}
return dialogClass;
}
/**
* Manually activate/deactivate a modal. Returns to the caller before the modal has actually been shown or hidden
*/
toggle() {
this.modal?.toggle();
}
/**
* Manually open a modal. Returns to the caller before the modal has actually been displayed
*/
show() {
this.modal?.show();
}
/**
* Manually hide a modal. Returns to the caller before the modal has actually been hidden
*/
hide() {
this.modal?.hide();
}
/**
* Manually reposition the modal if the height of the modal changes when it is opened (in case a scroll bar appears).
*/
handleUpdate() {
this.modal?.handleUpdate();
}
/**
* Destroys the modal of an element.
*/
dispose() {
this.modal?.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItModalComponent, isStandalone: true, selector: "it-modal", inputs: { closeButton: ["closeButton", "closeButton", inputToBoolean], alertModal: ["alertModal", "alertModal", inputToBoolean], dialogLinkList: ["dialogLinkList", "dialogLinkList", inputToBoolean], popconfirm: ["popconfirm", "popconfirm", inputToBoolean], scrollable: ["scrollable", "scrollable", inputToBoolean], fade: ["fade", "fade", inputToBoolean], alignment: "alignment", size: "size", backdrop: "backdrop", focus: ["focus", "focus", inputToBoolean], keyboard: ["keyboard", "keyboard", inputToBoolean], footerShadow: ["footerShadow", "footerShadow", inputToBoolean], options: "options" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", hidePreventedEvent: "hidePreventedEvent" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div\n #modalElement\n [id]=\"id\"\n [class]=\"modalClass\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-hidden=\"true\"\n [attr.aria-labelledby]=\"id + '-title'\"\n [attr.aria-describedby]=\"id + '-description'\">\n <div [class]=\"dialogClass\">\n <div class=\"modal-content\" role=\"document\">\n <div class=\"modal-header\">\n <ng-content select=\"[beforeTitle]\"></ng-content>\n\n <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n <ng-content select=\"[modalTitle]\"></ng-content>\n </h2>\n\n @if (closeButton) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n }\n </div>\n\n <div class=\"modal-body\">\n <div id=\"{{ id }}-description\">\n <ng-content select=\"[description]\"></ng-content>\n </div>\n <ng-content></ng-content>\n </div>\n\n <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItModalComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-modal', exportAs: 'itModal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div\n #modalElement\n [id]=\"id\"\n [class]=\"modalClass\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-hidden=\"true\"\n [attr.aria-labelledby]=\"id + '-title'\"\n [attr.aria-describedby]=\"id + '-description'\">\n <div [class]=\"dialogClass\">\n <div class=\"modal-content\" role=\"document\">\n <div class=\"modal-header\">\n <ng-content select=\"[beforeTitle]\"></ng-content>\n\n <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n <ng-content select=\"[modalTitle]\"></ng-content>\n </h2>\n\n @if (closeButton) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n }\n </div>\n\n <div class=\"modal-body\">\n <div id=\"{{ id }}-description\">\n <ng-content select=\"[description]\"></ng-content>\n </div>\n <ng-content></ng-content>\n </div>\n\n <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"] }]
}], propDecorators: { closeButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], alertModal: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], dialogLinkList: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], popconfirm: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], scrollable: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], fade: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], alignment: [{
type: Input
}], size: [{
type: Input
}], backdrop: [{
type: Input
}], focus: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], keyboard: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], footerShadow: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], options: [{
type: Input
}], showEvent: [{
type: Output
}], shownEvent: [{
type: Output
}], hideEvent: [{
type: Output
}], hiddenEvent: [{
type: Output
}], hidePreventedEvent: [{
type: Output
}], modalElement: [{
type: ViewChild,
args: ['modalElement', { static: false }]
}] } });
var NotificationType;
(function (NotificationType) {
NotificationType["Standard"] = "standard";
NotificationType["Success"] = "success";
NotificationType["Error"] = "error";
NotificationType["Info"] = "info";
NotificationType["Warning"] = "warning";
})(NotificationType || (NotificationType = {}));
var NotificationPosition;
(function (NotificationPosition) {
NotificationPosition["Top"] = "top-fix mt-3";
NotificationPosition["Bottom"] = "bottom-fix mb-3";
NotificationPosition["Left"] = "left-fix ms-3";
NotificationPosition["Right"] = "right-fix me-3";
})(NotificationPosition || (NotificationPosition = {}));
class ItNotificationService {
constructor() {
this.subject = new Subject();
}
/**
* Listen on notification arrived
* @param filterType filter type of notification
*/
onNotification(filterType) {
return this.subject.asObservable().pipe(filter(n => n && (!filterType || n.type === filterType)));
}
/**
* Show new notification
* @param notification notification
*/
addNotification(notification) {
this.subject.next(notification);
}
/**
* Create new Standard notification
* @param title notification title
* @param message notification message
* @param dismissible notification dismissible
* @param duration notification duration (milliseconds)
* @param position notification position
*/
standard(title, message, dismissible, duration, position) {
this.addNotification({
type: NotificationType.Standard,
message,
title,
duration,
dismissible,
position,
});
}
/**
* Create new Success notification
* @param title notification title
* @param message notification message
* @param dismissible notification dismissible
* @param duration notification duration (milliseconds)
* @param position notification position
*/
success(title, message, dismissible, duration, position) {
this.addNotification({
type: NotificationType.Success,
message,
title,
duration,
dismissible,
position,
});
}
/**
* Create new Error notification
* @param title notification title
* @param message notification message
* @param dismissible notification dismissible
* @param duration notification duration (milliseconds)
* @param position notification position
*/
error(title, message, dismissible, duration, position) {
this.addNotification({
type: NotificationType.Error,
message,
title,
duration,
dismissible,
position,
});
}
/**
* Create new Warning notification
* @param title notification title
* @param message notification message
* @param dismissible notification dismissible
* @param duration notification duration (milliseconds)
* @param position notification position
*/
warning(title, message, dismissible, duration, position) {
this.addNotification({
type: NotificationType.Warning,
message,
title,
duration,
dismissible,
position,
});
}
/**
* Create new Info notification
* @param title notification title
* @param message notification message
* @param dismissible notification dismissible
* @param duration notification duration (milliseconds)
* @param position notification position
*/
info(title, message, dismissible, duration, position) {
this.addNotification({
type: NotificationType.Info,
message,
title,
duration,
dismissible,
position,
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class ItNotificationsComponent {
constructor(_changeDetectorRef, _notificationService) {
this._changeDetectorRef = _changeDetectorRef;
this._notificationService = _notificationService;
/**
* Default notifications duration (milliseconds)
* @default 8000
*/
this.duration = 8000;
/**
* Default notifications is dismissible
* @default true
*/
this.dismissible = true;
this.notificationCount = 0;
this.notifications = [];
this.subscription = this._notificationService.onNotification().subscribe(notification => {
if (!notification.duration) {
notification.duration = this.duration; // Add duration if not is set
}
if (!notification.position && this.position) {
notification.position = this.position; // Add position if not is set
}
if (notification.dismissible === undefined && this.dismissible) {
notification.dismissible = true; // Add dismissible if not is set
}
if (!notification.icon) {
notification.icon = this.getNotificationIcon(notification);
}
const newNotification = {
...notification,
id: `${notification.type}-${this.notificationCount++}-notification`,
};
this.notifications.push(newNotification);
this._changeDetectorRef.detectChanges();
setTimeout(() => {
// Show the notification
new Notification(document.getElementById(newNotification.id), {
timeout: notification.duration,
}).show();
// Clear notification after the duration
setTimeout(() => {
const index = this.notifications.findIndex(n => n.id === newNotification.id);
if (index > -1) {
this.notifications.splice(index, 1);
if (!this.notifications.length) {
this.notificationCount = 0;
}
this._changeDetectorRef.detectChanges();
}
}, notification.duration);
}, 200);
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
get NotificationType() {
return NotificationType;
}
/**
* Hide the notification
* @param id
*/
hideNotification(id) {
Notification.getInstance(document.getElementById(id))?.hide();
}
/**
* Retrieve the icon name by notification type
* @param notification the notification
* @protected
*/
getNotificationIcon(notification) {
switch (notification.type) {
case NotificationType.Success:
return 'check-circle';
case NotificationType.Error:
return 'close-circle';
case NotificationType.Warning:
return 'error';
case NotificationType.Info:
return 'info-circle';
case NotificationType.Standard:
default:
return undefined;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ItNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItNotificationsComponent, isStandalone: true, selector: "it-notifications", inputs: { duration: "duration", position: "position", dismissible: ["dismissible", "dismissible", inputToBoolean] }, ngImport: i0, template: "@for (notification of notifications; track notification.id) {\n <div\n [id]=\"notification.id\"\n class=\"notification {{ notification.position }} {{ notification.type }}\"\n [class.with-icon]=\"!!notification.icon\"\n [class.dismissable]=\"notification.dismissible\"\n role=\"alert\"\n [attr.aria-labelledby]=\"notification.id + '-title'\">\n <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n @if (notification.icon) {\n <it-icon [name]=\"notification.icon\"></it-icon>\n }\n <ng-container>{{ notification.title }}</ng-container>\n </h2>\n @if (notification.message) {\n <p>{{ notification.message }}</p>\n }\n @if (notification.dismissible) {\n <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n <it-icon name=\"close\"></it-icon>\n <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n </button>\n }\n </div>\n}\n", styles: [".notification{z-index:10000}\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationsComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-notifications', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule], template: "@for (notification of notifications; track notification.id) {\n <div\n [id]=\"notification.id\"\n class=\"notification {{ notification.position }} {{ notification.type }}\"\n [class.with-icon]=\"!!notification.icon\"\n [class.dismissable]=\"notification.dismissible\"\n role=\"alert\"\n [attr.aria-labelledby]=\"notification.id + '-title'\">\n <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n @if (notification.icon) {\n <it-icon [name]=\"notification.icon\"></it-icon>\n }\n <ng-container>{{ notification.title }}</ng-container>\n </h2>\n @if (notification.message) {\n <p>{{ notification.message }}</p>\n }\n @if (notification.dismissible) {\n <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n <it-icon name=\"close\"></it-icon>\n <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n </button>\n }\n </div>\n}\n", styles: [".notification{z-index:10000}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ItNotificationService }], propDecorators: { duration: [{
type: Input
}], position: [{
type: Input
}], dismissible: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
class ItAbstractFormComponent extends ItAbstractComponent {
/**
* Set the disabled state
*/
set disabled(isDisabled) {
this.setDisabledState(isDisabled);
}
constructor(_translateService, _ngControl) {
super();
this._translateService = _translateService;
this._ngControl = _ngControl;
/**
* Validation color display mode (validation triggered if field is touched or not pristine)
* - <b>true</b>: Always show the validation color
* - <b>false</b>: Never show validation color
* - <b>only-valid</b>: Show only valid validation color
* - <b>only-invalid</b>: Show only invalid validation color
* @default <b>true</b>: Always show the validation color
*/
this.validationMode = true;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.onChange = (_) => { };
this.onTouched = () => { };
this.control = new FormControl();
this._ngControl && (this._ngControl.valueAccessor = this);
}
/**
* Check if field is invalid (Validation failed)
*/
get isInvalid() {
if (this.validationMode === 'only-valid' || (this.validationMode !== 'only-invalid' && !this.validationMode)) {
return undefined;
}
if (this._ngControl) {
return this._ngControl.invalid === true && (!this._ngControl.pristine || this._ngControl.touched === true);
}
return this.control.invalid && (!this.control.pristine || this.control.touched);
}
/**
* Check if field is valid (Validation successful)
*/
get isValid() {
if (this.validationMode === 'only-invalid' || (this.validationMode !== 'only-valid' && !this.validationMode)) {
return undefined;
}
if (this._ngControl) {
return this._ngControl.valid === true && (!this._ngControl.pristine || this._ngControl.touched === true);
}
return this.control.valid && (!this.control.pristine || this.control.touched);
}
/**
* Return the invalid message string from TranslateService
*/
get invalidMessage() {
if (this.hasError('required')) {
return this._translateService.get('it.errors.required-field');
}
return this._translateService.get('it.errors.invalid-field');
}
ngOnInit() {
if (this._ngControl?.control) {
this.control.setValidators(this._ngControl.control.validator);
}
}
registerOnChange(fn) {
this.control.valueChanges.subscribe(fn);
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
if (isDisabled) {
return this.control.disable();
}
this.control.enable();
}
writeValue(value) {
this.control.setValue(value, { emitEvent: false });
this._changeDetectorRef.detectChanges();
}
/**
* Mark the control as touched
*/
markAsTouched() {
if (!this.control.touched) {
this.onTouched();
}
}
/**
* Fired to check if form control is touched
*/
ngDoCheck() {
if (this._ngControl?.control) {
const ngControl = this._ngControl.control;
if (this.control.touched !== ngControl.touched) {
if (ngControl.touched) {
this.control.markAsTouched();
}
else {
this.control.markAsUntouched();
}
}
if (this.control.pristine !== ngControl.pristine) {
if (ngControl.pristine) {
this.control.markAsPristine();
}
else {
this.control.markAsDirty();
}
}
}
this._changeDetectorRef.detectChanges();
}
/**
* Add the validators in control and parent control
* @param validators the validators
* @protected
*/
addValidators(validators) {
if (!Array.isArray(validators)) {
validators = [validators];
}
validators.forEach(validator => {
if (!this.control.hasValidator(validator)) {
this.control.addValidators(validator);
}
if (this._ngControl?.control && !this._ngControl.control.hasValidator(validator)) {
this._ngControl.control.addValidators(validator);
}
});
}
/**
* Reports whether the control with the given path has the error specified. <br/>
* If the control is not present, false is returned.
* @param errorCode The code of the error to check
* @param path A list of control names that designates how to move from the current control
* to the control that should be queried for errors.
* @returns whether the given error is present in the control at the given path.
*/
hasError(errorCode, path) {
if (this._ngControl) {
return this._ngControl.hasError(errorCode, path);
}
return this.control.hasError(errorCode, path);
}
/**
* Reports error data for the control with the given path.
* @param errorCode The code of the error to check
* @param path A list of control names that designates how to move from the current control
* to the control that should be queried for errors.
* @returns error data for that particular error. If the control or error is not present,
* null is returned.
*/
getError(errorCode, path) {
if (this._ngControl) {
return this._ngControl.getError(errorCode, path);
}
return this.control.getError(errorCode, path);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, deps: [{ token: i1.TranslateService }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItAbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: ["disabled", "disabled", inputToBoolean] }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, decorators: [{
type: Component,
args: [{ template: '' }]
}], ctorParameters: () => [{ type: i1.TranslateService }, { type: i1$1.NgControl, decorators: [{
type: Self
}, {
type: Optional
}] }], propDecorators: { label: [{
type: Input
}], validationMode: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
/**
* General Email Regex (RFC 5322 Official Standard)
* http://emailregex.com/
*/
const EMAIL_REGEX = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
/**
* Phone number Regex
*/
const PHONE_NUMBER_REGEX = /^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{3})(?: *x(\d+))?\s*$/;
/**
* URL Regex
*/
const URL_REGEX = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/;
/**
* The italian tax code Regex (Codice Fiscale)
*/
const ITALIAN_TAX_CODE_REGEX = /^[A-Za-z]{6}[0-9]{2}[A-Za-z]{1}[0-9]{2}[A-Za-z]{1}[0-9]{3}[A-Za-z]{1}$/i;
/**
* The VAT number Regex (Partita iva)
*/
const VAT_NUMBER_REGEX = /^[0-9]{11}$/;
/**
* Italian CAP Regex
*/
const CAP_REGEX = /^[0-9]{5}$/;
/**
* Italian Plate Regex
*/
const PLATE_REGEX = /^[A-Za-z]{2}\d{3}[A-Za-z]{2}$/i;
/**
* IBAN Regex
* https://blog.marketto.it/en/2018/06/validate-any-country-iban/
*/
const IBAN_REGEX = /^(?:(?:IT|SM)\d{2}[A-Z]\d{22}|CY\d{2}[A-Z]\d{23}|NL\d{2}[A-Z]{4}\d{10}|LV\d{2}[A-Z]{4}\d{13}|(?:BG|BH|GB|IE)\d{2}[A-Z]{4}\d{14}|GI\d{2}[A-Z]{4}\d{15}|RO\d{2}[A-Z]{4}\d{16}|KW\d{2}[A-Z]{4}\d{22}|MT\d{2}[A-Z]{4}\d{23}|NO\d{13}|(?:DK|FI|GL|FO)\d{16}|MK\d{17}|(?:AT|EE|KZ|LU|XK)\d{18}|(?:BA|HR|LI|CH|CR)\d{19}|(?:GE|DE|LT|ME|RS)\d{20}|IL\d{21}|(?:AD|CZ|ES|MD|SA)\d{22}|PT\d{23}|(?:BE|IS)\d{24}|(?:FR|MR|MC)\d{25}|(?:AL|DO|LB|PL)\d{26}|(?:AZ|HU)\d{27}|(?:GR|MU)\d{28})$/i;
class ItValidators {
static { this.SpecialCharacterPattern = '!@#$%&*_+=;:|,.'; }
/**
* Static pattern validator with custom error
* @param regex
* @param error
*/
static customPattern(regex, error) {
return (control) => {
if (!control.value) {
// if control is empty return no error
return null;
}
// test the value of the control against the regexp supplied
const valid = regex.test(control.value);
// if true, return no error (no error), else return error passed in the second parameter
return valid ? null : error;
};
}
/**
* Set Validator if the condition is satisfied
* @param validator the validator to apply if the condition is true
* @param condition the condition
*/
static conditional(validator, condition) {
return formControl => {
if (!formControl.parent) {
return null;
}
if (condition(formControl)) {
return validator(formControl);
}
return null;
};
}
/**
* Check whether our password and confirm password are a match
* @param control
* @param passwordControlName the password formControlName
* @param confirmControlName the confirmPassword formControlName
*/
static passwordMatch(control, passwordControlName = 'password', confirmControlName = 'confirmPassword') {
const confirmControl = control.get(confirmControlName); // confirmPassword form control
if (!confirmControl) {
return null;
}
const passwordControl = control.get(passwordControlName); // password form control
const password = passwordControl?.value; // get password from our password form control
// compare is the password match
if ((password && !confirmControl.value) || (confirmControl.value && password !== confirmControl.value)) {
// if they don't match, set an error in our confirmPassword form control
confirmControl?.setErrors({ noPasswordMatch: true });
confirmControl?.markAsTouched();
return control;
}
if (password && passwordControl?.touched) {
confirmControl?.markAsTouched();
}
return null;
}
/**
* Password validator
* @param minLength minimum password length - default 10
* @param hasNumber check whether the entered password has a number - default true
* @param hasCapitalCase check whether the entered password has upper case letter - default true
* @param hasSmallCase check whether the entered password has a lower-case letter - default true
* @param hasSpecialCharacters check whether the entered password has a special character - default true
* @param required the field is required - default true
*/
static password(minLength = 10, hasNumber = true, hasCapitalCase = true, hasSmallCase = true, hasSpecialCharacters = true, required = true) {
const validators = [Validators.minLength(minLength)];
if (hasNumber) {
validators.push(ItValidators.customPattern(/\d/, { hasNumber }));
}
if (hasCapitalCase) {
validators.push(ItValidators.customPattern(/[A-Z]/, { hasCapitalCase }));
}
if (hasSmallCase) {
validators.push(ItValidators.customPattern(/[a-z]/, { hasSmallCase }));
}
if (hasSpecialCharacters) {
validators.push(ItValidators.customPattern(new RegExp(`[${ItValidators.SpecialCharacterPattern}]`), { hasSpecialCharacters }));
}
if (required) {
validators.push(Validators.required);
}
return Validators.compose(validators);
}
/**
* Email validator
*/
static get email() {
return Validators.compose([Validators.email, ItValidators.customPattern(EMAIL_REGEX, { invalidEmail: true })]);
}
/**
* Phone number validator
*/
static get tel() {
return ItValidators.customPattern(PHONE_NUMBER_REGEX, { invalidTel: true });
}
/**
* URL validator
*/
static get url() {
return ItValidators.customPattern(URL_REGEX, { invalidUrl: true });
}
/**
* Italian Tax Code validator
*/
static get taxCode() {
return ItValidators.customPattern(ITALIAN_TAX_CODE_REGEX, { invalidTaxCode: true });
}
/**
* VAT Number validator
*/
static get vatNumber() {
return ItValidators.customPattern(VAT_NUMBER_REGEX, { invalidVatNumber: true });
}
/**
* Italian Postal Code validator (CAP)
*/
static get cap() {
return ItValidators.customPattern(CAP_REGEX, { invalidCap: true });
}
/**
* IBAN validator
*/
static get iban() {
return ItValidators.customPattern(IBAN_REGEX, { invalidIban: true });
}
/**
* Italian plate validator
*/
static get plate() {
return ItValidators.customPattern(PLATE_REGEX, { invalidPlate: true });
}
/**
* Check if value is a valid RegExp
*/
static get regExp() {
return (control) => {
try {
if (control?.value) {
new RegExp(control.value);
}
}
catch (e) {
return { invalidRegex: true };
}
return null;
};
}
}
class ItInputComponent extends ItAbstractFormComponent {
constructor() {
super(...arguments);
/**
* The input type
* @default text
*/
this.type = 'text';
/**
* The input placeholder
*/
this.placeholder = '';
/**
* The max date value [Used only in type = 'date']
* @default '9999-12-31'
* @example 'yyyy-mm-dd'
*/
this.maxDate = '9999-12-31';
}
get isActiveLabel() {
const value = this.control.value;
if ((!!value && value !== 0) || value === 0 || !!this.placeholder) {
return true;
}
// if (this.type === 'number' && (!!this.currency || !!this.percentage)) {
// return true;
// }
return this.type === 'date' || this.type === 'time' || this.type === 'color';
}
/**
* Check is readonly field
*/
get isReadonly() {
return this.readonly === 'plaintext' || !!this.readonly;
}
/**
* Return the invalid message string from TranslateService
*/
get invalidMessage() {
if (this.hasError('min') && this.min) {
return this._translateService.get('it.errors.min-invalid', {
min: this.min,
});
}
if (this.hasError('max') && this.max) {
return this._translateService.get('it.errors.max-invalid', {
max: this.max,
});
}
if (this.hasError('minlength')) {
const error = this.getError('minlength');
return this._translateService.get('it.errors.min-length-invalid', {
min: error.requiredLength,
});
}
if (this.hasError('maxlength')) {
const error = this.getError('maxlength');
return this._translateService.get('it.errors.max-length-invalid', {
max: error.requiredLength,
});
}
if (this.hasError('email') || this.hasError('invalidEmail')) {
return this._translateService.get('it.errors.email-invalid');
}
if (this.hasError('invalidTel')) {
return this._translateService.get('it.errors.tel-invalid');
}
if (this.hasError('invalidUrl')) {
return this._translateService.get('it.errors.url-invalid');
}
if (this.hasError('invalidTaxCode')) {
return this._translateService.get('it.errors.tax-code-invalid');
}
if (this.hasError('invalidVatNumber')) {
return this._translateService.get('it.errors.vat-number-invalid');
}
if (this.hasError('invalidCap')) {
return this._translateService.get('it.errors.cap-invalid');
}
if (this.hasError('invalidIban')) {
return this._translateService.get('it.errors.iban-invalid');
}
if (this.hasError('invalidPlate')) {
return this._translateService.get('it.errors.plate-invalid');
}
if (this.hasError('invalidRegex')) {
return this._translateService.get('it.errors.regex-invalid');
}
if (this.hasError('pattern')) {
const error = this.getError('pattern');
return this._translateService.get('it.errors.pattern-invalid', {
pattern: error.requiredPattern,
});
}
return super.invalidMessage;
}
ngOnInit() {
super.ngOnInit();
const validators = [];
switch (this.type) {
case 'number':
if (this.percentage) {
this.min = this.min || 0;
this.max = this.max || 100;
}
// Dynamic min/max validators
validators.push((control) => (this.min ? Validators.min(this.min)(control) : null));
validators.push((control) => (this.max ? Validators.max(this.max)(control) : null));
break;
case 'email':
validators.push(ItValidators.email);
break;
case 'tel':
validators.push(ItValidators.tel);
break;
case 'url':
validators.push(ItValidators.url);
break;
}
this.addValidators(validators);
}
/**
* Increment or decrease the input number value of step
* @param decrease true to decrease value
*/
incrementNumber(decrease = false) {
if (this.type !== 'number') {
return;
}
const step = this.step === 'any' ? 1 : this.step ?? 1;
let value = Number(this.control.value);
value = (isNaN(value) ? 0 : value) + (decrease ? -step : step);
value = Math.round(value * 1e12) / 1e12; // prevent js decimal error
if (this.min !== undefined && value < this.min) {
value = this.min;
}
else if (this.max !== undefined && value > this.max) {
value = this.max;
}
this.control.setValue(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n <div\n class=\"input-group\"\n [class.disabled]=\"!control.enabled\"\n [class.input-number]=\"type === 'number'\"\n [class.input-number-currency]=\"currency\"\n [class.input-number-percentage]=\"percentage\"\n [class.input-number-adaptive]=\"adaptive\">\n <span class=\"input-group-text\" #prependText>\n <ng-content select=\"[prependText]\"></ng-content>\n </span>\n @if (label) {\n <label\n [for]=\"id\"\n [class.active]=\"isActiveLabel\"\n [class.input-symbol-label]=\"percentage || currency\"\n [class.input-number-label]=\"type === 'number'\"\n [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n {{ label }}\n </label>\n }\n\n @if (type === 'number') {\n @if (currency || percentage) {\n <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n }\n <input\n type=\"number\"\n [id]=\"id\"\n [step]=\"step ?? null\"\n [min]=\"min ?? ''\"\n [max]=\"max ?? ''\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n <span class=\"input-group-text align-buttons flex-column\">\n <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n </button>\n <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n </button>\n </span>\n } @else {\n <input\n [id]=\"id\"\n [type]=\"type\"\n [max]=\"type === 'date' ? maxDate : undefined\"\n [min]=\"type === 'date' ? minDate : undefined\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n }\n\n <div class=\"input-group-append\">\n <ng-content select=\"[append]\"></ng-content>\n\n <div class=\"input-group-text\">\n <ng-content select=\"[appendText]\"></ng-content>\n </div>\n </div>\n </div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItInputComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TranslateModule, AsyncPipe], template: "<div class=\"form-group\">\n <div\n class=\"input-group\"\n [class.disabled]=\"!control.enabled\"\n [class.input-number]=\"type === 'number'\"\n [class.input-number-currency]=\"currency\"\n [class.input-number-percentage]=\"percentage\"\n [class.input-number-adaptive]=\"adaptive\">\n <span class=\"input-group-text\" #prependText>\n <ng-content select=\"[prependText]\"></ng-content>\n </span>\n @if (label) {\n <label\n [for]=\"id\"\n [class.active]=\"isActiveLabel\"\n [class.input-symbol-label]=\"percentage || currency\"\n [class.input-number-label]=\"type === 'number'\"\n [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n {{ label }}\n </label>\n }\n\n @if (type === 'number') {\n @if (currency || percentage) {\n <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n }\n <input\n type=\"number\"\n [id]=\"id\"\n [step]=\"step ?? null\"\n [min]=\"min ?? ''\"\n [max]=\"max ?? ''\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n <span class=\"input-group-text align-buttons flex-column\">\n <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n </button>\n <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n </button>\n </span>\n } @else {\n <input\n [id]=\"id\"\n [type]=\"type\"\n [max]=\"type === 'date' ? maxDate : undefined\"\n [min]=\"type === 'date' ? minDate : undefined\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n }\n\n <div class=\"input-group-append\">\n <ng-content select=\"[append]\"></ng-content>\n\n <div class=\"input-group-text\">\n <ng-content select=\"[appendText]\"></ng-content>\n </div>\n </div>\n </div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
}], propDecorators: { type: [{
type: Input
}], placeholder: [{
type: Input
}], description: [{
type: Input
}], readonly: [{
type: Input
}], maxDate: [{
type: Input
}], minDate: [{
type: Input
}], max: [{
type: Input
}], min: [{
type: Input
}], step: [{
type: Input
}], currency: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], percentage: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], symbol: [{
type: Input
}], adaptive: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], autocomplete: [{
type: Input
}] } });
class ItPaginationComponent {
constructor() {
/**
* Number of pages closest to the current one to display
* @default 5
*/
this.visiblePages = 5;
/**
* Available Changer values
* @default [10, 25, 50, 100]
*/
this.changerValues = [10, 25, 50, 100];
/**
* Fired when page is changed. Emit the new index of page
*/
this.pageEvent = new EventEmitter();
/**
* Fired when changer is changed. Emit the new changer value
*/
this.changerEvent = new EventEmitter();
/**
* The pages
* @protected
*/
this.pages = [];
/**
* Jump to page input
* @protected
*/
this.jumpToPage = new FormControl(null);
this.jumpToPage.valueChanges
.pipe(debounceTime(300), // Delay filter data after time span has passed without another source emission
distinctUntilChanged(), filter(value => !!value && this.jumpToPage.valid))
.subscribe(value => {
this.pageEvent.emit(value - 1);
});
}
ngOnChanges(changes) {
this.pages = this.calculatePages();
if (changes['currentPage']) {
this.jumpToPage.setValue(null, { emitEvent: false });
}
}
/**
* Create array to generate pagination of `visiblePages` element
*/
calculatePages() {
if (this.simpleMode) {
return [this.currentPage];
}
const length = this.pageNumbers > this.visiblePages ? this.visiblePages : this.pageNumbers;
const halfVisiblePages = Math.floor(this.visiblePages / 2);
let start = this.currentPage > halfVisiblePages && this.pageNumbers > this.visiblePages ? this.currentPage - halfVisiblePages + 1 : 1;
if (this.pageNumbers > this.visiblePages) {
if (this.currentPage + 1 >= this.pageNumbers) {
start -= halfVisiblePages;
}
else if (this.currentPage >= this.pageNumbers - halfVisiblePages) {
start -= this.pageNumbers - (this.currentPage + 1);
}
}
return Array.from({ length }, (_, i) => i + start);
}
/**
* On click page change
* @param event click event
* @param newPage the new page of table
*/
pageChange(event, newPage) {
event.preventDefault();
this.pageEvent.emit(newPage - 1); // emit new page index
}
/**
* On click changer
* @param event click event
* @param value the new changer value
*/
changerChange(event, value) {
event.preventDefault();
this.changerEvent.emit(value); // emit new changer value
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n class=\"pagination-wrapper\"\n [class.justify-content-center]=\"alignment === 'center'\"\n [class.justify-content-end]=\"alignment === 'end'\"\n [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n @if (pages.length) {\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n @if (!textLinks) {\n <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n }\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.previous' | translate }}\n }\n </a>\n </li>\n @if (simpleMode) {\n <li class=\"page-item\">\n <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n </li>\n <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n <li class=\"page-item\">\n <span class=\"page-link\">{{ pageNumbers }}</span>\n </li>\n <li class=\"page-item visually-hidden\">\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n </a>\n </li>\n } @else {\n @if (pageNumbers > visiblePages && pages[0] >= 2) {\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n </li>\n @if (pages[0] >= 3) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n }\n @for (page of pages; track page) {\n <li class=\"page-item\">\n @if (page === currentPage + 1) {\n <a class=\"page-link\" aria-current=\"page\">\n <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n </a>\n } @else {\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n }\n </li>\n }\n @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n @if (pages[pages.length - 1] < pageNumbers - 1) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n </li>\n }\n }\n <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.next' | translate }}\n } @else {\n <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n }\n </a>\n </li>\n </ul>\n }\n\n @if (currentChanger !== undefined) {\n <it-dropdown>\n <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n <ng-container list>\n @for (value of changerValues; track value) {\n <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n </it-dropdown-item>\n }\n </ng-container>\n </it-dropdown>\n }\n\n @if (showJumpToPage) {\n <it-input\n type=\"number\"\n [min]=\"1\"\n [max]=\"pageNumbers\"\n [label]=\"('it.core.go-to' | translate) + '...'\"\n [formControl]=\"jumpToPage\"></it-input>\n }\n\n <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n <ng-content></ng-content>\n </p>\n</nav>\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: "pipe", type: LowerCasePipe, name: "lowercase" }, { 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: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPaginationComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, LowerCasePipe, ItDropdownModule, ItInputComponent, ReactiveFormsModule], template: "<nav\n class=\"pagination-wrapper\"\n [class.justify-content-center]=\"alignment === 'center'\"\n [class.justify-content-end]=\"alignment === 'end'\"\n [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n @if (pages.length) {\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n @if (!textLinks) {\n <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n }\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.previous' | translate }}\n }\n </a>\n </li>\n @if (simpleMode) {\n <li class=\"page-item\">\n <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n </li>\n <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n <li class=\"page-item\">\n <span class=\"page-link\">{{ pageNumbers }}</span>\n </li>\n <li class=\"page-item visually-hidden\">\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n </a>\n </li>\n } @else {\n @if (pageNumbers > visiblePages && pages[0] >= 2) {\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n </li>\n @if (pages[0] >= 3) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n }\n @for (page of pages; track page) {\n <li class=\"page-item\">\n @if (page === currentPage + 1) {\n <a class=\"page-link\" aria-current=\"page\">\n <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n </a>\n } @else {\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n }\n </li>\n }\n @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n @if (pages[pages.length - 1] < pageNumbers - 1) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n </li>\n }\n }\n <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.next' | translate }}\n } @else {\n <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n }\n </a>\n </li>\n </ul>\n }\n\n @if (currentChanger !== undefined) {\n <it-dropdown>\n <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n <ng-container list>\n @for (value of changerValues; track value) {\n <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n </it-dropdown-item>\n }\n </ng-container>\n </it-dropdown>\n }\n\n @if (showJumpToPage) {\n <it-input\n type=\"number\"\n [min]=\"1\"\n [max]=\"pageNumbers\"\n [label]=\"('it.core.go-to' | translate) + '...'\"\n [formControl]=\"jumpToPage\"></it-input>\n }\n\n <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n <ng-content></ng-content>\n </p>\n</nav>\n" }]
}], ctorParameters: () => [], propDecorators: { currentPage: [{
type: Input,
args: [{ required: true }]
}], pageNumbers: [{
type: Input,
args: [{ required: true }]
}], visiblePages: [{
type: Input
}], alignment: [{
type: Input
}], simpleMode: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], textLinks: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], currentChanger: [{
type: Input
}], changerValues: [{
type: Input
}], showJumpToPage: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], pageEvent: [{
type: Output
}], changerEvent: [{
type: Output
}] } });
class ItPopoverDirective {
/**
* Define the popover content
* @param content the popover content
*/
set content(content) {
this.element.setAttribute('data-bs-content', content);
}
/**
* Define the popover title
* @param title the popover title
*/
set popoverTitle(title) {
if (title) {
this.element.setAttribute('title', title);
this.element.setAttribute('data-bs-original-title', title);
}
}
/**
* Define the popover placement
* @param placement
*/
set popoverPlacement(placement) {
this.element.setAttribute('data-bs-placement', placement);
}
/**
* Appends the popover to a specific element.
* @param container
*/
set popoverContainer(container) {
if (container) {
this.element.setAttribute('data-bs-container', container);
}
}
/**
* Indicates whether the title contains html
* @param html true if contain html
*/
set popoverHtml(html) {
this.element.setAttribute('data-bs-html', html ? 'true' : 'false');
}
/**
* How popover is triggered
* - 'hover': To open the Popover on hover of the mouse over the element
* - 'focus': To ignore popovers on the user's next click of an element other than the toggle element.
* @param trigger
*/
set popoverTrigger(trigger) {
if (trigger) {
this.element.setAttribute('data-bs-trigger', trigger);
}
}
constructor(_elementRef) {
this._elementRef = _elementRef;
/**
* 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 event fires after the show event when the tooltip template has been added to the DOM.
*/
this.insertedEvent = new EventEmitter();
this.element = this._elementRef.nativeElement;
}
ngAfterViewInit() {
this.element.setAttribute('data-bs-toggle', 'popover');
this.popover = Popover.getOrCreateInstance(this.element);
this.element.addEventListener('show.bs.popover', event => this.showEvent.emit(event));
this.element.addEventListener('shown.bs.popover', event => this.shownEvent.emit(event));
this.element.addEventListener('hide.bs.popover', event => this.hideEvent.emit(event));
this.element.addEventListener('hidden.bs.popover', event => this.hiddenEvent.emit(event));
this.element.addEventListener('inserted.bs.popover', event => this.insertedEvent.emit(event));
}
ngOnDestroy() {
this.dispose();
}
/**
* Shows the popover of an item.
*/
show() {
this.popover?.show();
}
/**
* Hide the popover of an element.
*/
hide() {
this.popover?.hide();
}
/**
* Activate / Deactivate the popover of an element
*/
toggle() {
this.popover?.toggle();
}
/**
* Hides and destroys the popover of an element.
*/
dispose() {
this.popover?.dispose();
}
/**
* Gives the popover of an element a chance to be shown.
*/
enable() {
this.popover?.enable();
}
/**
* Removes the ability to show the popover of an element.
*/
disable() {
this.popover?.disable();
}
/**
* Toggles the possibility that the popover of an element is shown or hidden.
*/
toggleEnabled() {
this.popover?.disable();
}
/**
* Updates the position of an element's popover.
*/
update() {
this.popover?.disable();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItPopoverDirective, isStandalone: true, selector: "[itPopover]", inputs: { content: ["itPopover", "content"], popoverTitle: "popoverTitle", popoverPlacement: "popoverPlacement", popoverContainer: "popoverContainer", popoverHtml: ["popoverHtml", "popoverHtml", inputToBoolean], popoverTrigger: "popoverTrigger" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itPopover"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPopoverDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[itPopover]',
exportAs: 'itPopover',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { content: [{
type: Input,
args: ['itPopover']
}], popoverTitle: [{
type: Input
}], popoverPlacement: [{
type: Input
}], popoverContainer: [{
type: Input
}], popoverHtml: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], popoverTrigger: [{
type: Input
}], showEvent: [{
type: Output
}], shownEvent: [{
type: Output
}], hideEvent: [{
type: Output
}], hiddenEvent: [{
type: Output
}], insertedEvent: [{
type: Output
}] } });
class ItSpinnerComponent {
constructor() {
/**
* The spinner is active
* @default true
*/
this.active = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSpinnerComponent, isStandalone: true, selector: "it-spinner", inputs: { active: ["active", "active", inputToBoolean], small: ["small", "small", inputToBoolean], double: ["double", "double", inputToBoolean] }, ngImport: i0, template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n @if (double) {\n <div class=\"progress-spinner-inner\"></div>\n <div class=\"progress-spinner-inner\"></div>\n }\n <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSpinnerComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-spinner', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n @if (double) {\n <div class=\"progress-spinner-inner\"></div>\n <div class=\"progress-spinner-inner\"></div>\n }\n <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n" }]
}], propDecorators: { active: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], small: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], double: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
class ItSteppersItemComponent extends ItAbstractComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItSteppersItemComponent, isStandalone: true, selector: "it-steppers-item", inputs: { label: "label", icon: "icon", iconTitle: "iconTitle" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-steppers-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], propDecorators: { label: [{
type: Input,
args: [{ required: true }]
}], icon: [{
type: Input
}], iconTitle: [{
type: Input
}], htmlContent: [{
type: ViewChild,
args: [TemplateRef]
}] } });
class ItSteppersContainerComponent {
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
/**
* Show the stepper header
* @default true
*/
this.showHeader = true;
/**
* Show the back button
* @default true
*/
this.showBackButton = true;
/**
* Show the forward button
* @default true
*/
this.showForwardButton = true;
this.backClick = new EventEmitter();
this.forwardClick = new EventEmitter();
this.confirmClick = new EventEmitter();
this.saveClick = new EventEmitter();
}
ngAfterViewInit() {
this.steps?.changes
.pipe(
// When steps changes (dynamic add/remove)
startWith(undefined))
.subscribe(() => {
this.stepsSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
this.stepsSubscriptions = this.steps?.map(step => step.valueChanges.subscribe(() => {
this._changeDetectorRef.detectChanges(); // DetectChanges when step attributes changes
}));
this._changeDetectorRef.detectChanges(); // Force update html render
});
}
ngOnDestroy() {
this.stepsSubscriptions?.forEach(step => step.unsubscribe());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n @if (showHeader) {\n <div class=\"steppers-header\">\n @if (steps) {\n <ul>\n @for (step of steps; track step.id; let i = $index) {\n <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n @if (step.icon && !steppersNumber) {\n <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n }\n @if (steppersNumber) {\n <span class=\"steppers-number\">\n @if (i < activeStep) {\n <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n } @else {\n <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n }\n </span>\n }\n {{ step.label }}\n @if (i < activeStep && !steppersNumber) {\n <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n }\n @if (i === activeStep) {\n <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n }\n </li>\n }\n </ul>\n }\n @if (steps) {\n <span class=\"steppers-index\" aria-hidden=\"true\">\n @if (!steppersNumber) {\n {{ activeStep + 1 + '/' + steps.length }}\n } @else {\n @for (step of steps; track step.id; let i = $index) {\n <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n }\n }\n </span>\n }\n </div>\n }\n\n @if (steps?.get(activeStep); as step) {\n <div class=\"steppers-content\" aria-live=\"polite\">\n <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n </div>\n }\n\n @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n <nav class=\"steppers-nav\">\n @if (showBackButton) {\n <button\n type=\"button\"\n itButton=\"outline-primary\"\n size=\"sm\"\n class=\"steppers-btn-prev\"\n [disabled]=\"disableBackButton\"\n (click)=\"backClick.emit(activeStep)\">\n <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n {{ 'it.core.back' | translate }}\n </button>\n }\n @if (!!progressStyle && steps) {\n @if (progressStyle === 'dots') {\n <ul class=\"steppers-dots\">\n @for (step of steps; track step; let i = $index) {\n <li [class.done]=\"i < activeStep\">\n <span class=\"visually-hidden\">\n {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n </span>\n </li>\n }\n </ul>\n } @else {\n <div class=\"steppers-progress\">\n <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n </div>\n }\n }\n @if (showSaveButton) {\n <button\n type=\"button\"\n itButton=\"primary\"\n size=\"sm\"\n class=\"steppers-btn-save\"\n [progress]=\"saveLoading\"\n [disabled]=\"saveLoading || disableSaveButton\"\n (click)=\"saveClick.emit(activeStep)\">\n {{ 'it.general.save' | translate }}\n </button>\n }\n @if (showForwardButton) {\n <button\n type=\"button\"\n itButton=\"outline-primary\"\n size=\"sm\"\n class=\"steppers-btn-next\"\n [disabled]=\"disableForwardButton\"\n (click)=\"forwardClick.emit(activeStep)\">\n {{ 'it.core.forward' | translate }}\n <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n </button>\n }\n @if (showConfirmButton) {\n <button\n type=\"button\"\n itButton=\"primary\"\n size=\"sm\"\n class=\"steppers-btn-confirm d-lg-block\"\n [progress]=\"confirmLoading\"\n [disabled]=\"confirmLoading || disableConfirmButton\"\n (click)=\"confirmClick.emit(activeStep)\">\n {{ 'it.core.confirm' | translate }}\n </button>\n }\n </nav>\n }\n</div>\n\n<ng-template #checkIcon>\n <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\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"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersContainerComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-steppers-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet, TranslateModule, ItButtonDirective, ItProgressBarComponent, ItProgressButtonComponent], template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n @if (showHeader) {\n <div class=\"steppers-header\">\n @if (steps) {\n <ul>\n @for (step of steps; track step.id; let i = $index) {\n <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n @if (step.icon && !steppersNumber) {\n <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n }\n @if (steppersNumber) {\n <span class=\"steppers-number\">\n @if (i < activeStep) {\n <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n } @else {\n <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n }\n </span>\n }\n {{ step.label }}\n @if (i < activeStep && !steppersNumber) {\n <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n }\n @if (i === activeStep) {\n <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n }\n </li>\n }\n </ul>\n }\n @if (steps) {\n <span class=\"steppers-index\" aria-hidden=\"true\">\n @if (!steppersNumber) {\n {{ activeStep + 1 + '/' + steps.length }}\n } @else {\n @for (step of steps; track step.id; let i = $index) {\n <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n }\n }\n </span>\n }\n </div>\n }\n\n @if (steps?.get(activeStep); as step) {\n <div class=\"steppers-content\" aria-live=\"polite\">\n <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n </div>\n }\n\n @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n <nav class=\"steppers-nav\">\n @if (showBackButton) {\n <button\n type=\"button\"\n itButton=\"outline-primary\"\n size=\"sm\"\n class=\"steppers-btn-prev\"\n [disabled]=\"disableBackButton\"\n (click)=\"backClick.emit(activeStep)\">\n <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n {{ 'it.core.back' | translate }}\n </button>\n }\n @if (!!progressStyle && steps) {\n @if (progressStyle === 'dots') {\n <ul class=\"steppers-dots\">\n @for (step of steps; track step; let i = $index) {\n <li [class.done]=\"i < activeStep\">\n <span class=\"visually-hidden\">\n {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n </span>\n </li>\n }\n </ul>\n } @else {\n <div class=\"steppers-progress\">\n <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n </div>\n }\n }\n @if (showSaveButton) {\n <button\n type=\"button\"\n itButton=\"primary\"\n size=\"sm\"\n class=\"steppers-btn-save\"\n [progress]=\"saveLoading\"\n [disabled]=\"saveLoading || disableSaveButton\"\n (click)=\"saveClick.emit(activeStep)\">\n {{ 'it.general.save' | translate }}\n </button>\n }\n @if (showForwardButton) {\n <button\n type=\"button\"\n itButton=\"outline-primary\"\n size=\"sm\"\n class=\"steppers-btn-next\"\n [disabled]=\"disableForwardButton\"\n (click)=\"forwardClick.emit(activeStep)\">\n {{ 'it.core.forward' | translate }}\n <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n </button>\n }\n @if (showConfirmButton) {\n <button\n type=\"button\"\n itButton=\"primary\"\n size=\"sm\"\n class=\"steppers-btn-confirm d-lg-block\"\n [progress]=\"confirmLoading\"\n [disabled]=\"confirmLoading || disableConfirmButton\"\n (click)=\"confirmClick.emit(activeStep)\">\n {{ 'it.core.confirm' | translate }}\n </button>\n }\n </nav>\n }\n</div>\n\n<ng-template #checkIcon>\n <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { activeStep: [{
type: Input,
args: [{ required: true }]
}], showHeader: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], dark: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], steppersNumber: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], progressStyle: [{
type: Input
}], progressColor: [{
type: Input
}], showBackButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], disableBackButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], showForwardButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], disableForwardButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], showConfirmButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], disableConfirmButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], confirmLoading: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], showSaveButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], disableSaveButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], saveLoading: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], steps: [{
type: ContentChildren,
args: [ItSteppersItemComponent]
}], backClick: [{
type: Output
}], forwardClick: [{
type: Output
}], confirmClick: [{
type: Output
}], saveClick: [{
type: Output
}] } });
const steppersComponents = [ItSteppersContainerComponent, ItSteppersItemComponent];
class ItSteppersModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent, ItSteppersItemComponent], exports: [ItSteppersContainerComponent, ItSteppersItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, decorators: [{
type: NgModule,
args: [{
imports: steppersComponents,
exports: steppersComponents,
}]
}] });
class ItTabItemComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Custom class
*/
this.class = '';
}
ngAfterViewInit() {
super.ngAfterViewInit();
this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItTabItemComponent, isStandalone: true, selector: "it-tab-item", inputs: { label: "label", icon: "icon", active: ["active", "active", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-tab-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], propDecorators: { label: [{
type: Input
}], icon: [{
type: Input
}], active: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], disabled: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], class: [{
type: Input
}], htmlContent: [{
type: ViewChild,
args: [TemplateRef]
}] } });
class ItTabContainerComponent extends ItAbstractComponent {
constructor() {
super();
this.tabSelected = new EventEmitter();
this.tabClosed = new EventEmitter();
this.tabAdded = new EventEmitter();
}
ngAfterViewInit() {
super.ngAfterViewInit();
this.tabs?.changes
.pipe(
// When tabs changes (dynamic add/remove)
startWith(undefined), tap(() => {
this.tabSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
this.tabSubscriptions = this.tabs?.map(tab => tab.valueChanges.subscribe(() => {
this._changeDetectorRef.detectChanges(); // DetectChanges when tab-item attributes changes
}));
this._changeDetectorRef.detectChanges(); // Force update html render
}), switchMap(() => this.tabNavLinks?.changes.pipe(startWith(undefined)) || of(undefined)))
.subscribe(() => {
// Init tabs from bootstrap-italia
this.tabNavLinks?.forEach(tabNavLink => {
const triggerEl = tabNavLink.nativeElement, tabTrigger = Tab.getOrCreateInstance(triggerEl);
if (triggerEl.getAttribute('tab-listener') !== 'true') {
triggerEl.addEventListener('click', event => {
event.preventDefault();
tabTrigger.show();
this._changeDetectorRef.detectChanges();
});
triggerEl.setAttribute('tab-listener', 'true'); // Prevents multiple insertion of the listener
}
});
});
}
ngOnDestroy() {
this.tabSubscriptions?.forEach(sub => sub.unsubscribe());
}
onTab(tab) {
this.tabSelected.emit(tab);
}
clickToClose(index) {
this.tabClosed.emit(index);
}
clickToAdd($event) {
$event.preventDefault();
this.tabAdded.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTabContainerComponent, isStandalone: true, selector: "it-tab-container", inputs: { auto: ["auto", "auto", inputToBoolean], iconText: ["iconText", "iconText", inputToBoolean], dark: ["dark", "dark", inputToBoolean], cards: ["cards", "cards", inputToBoolean], vertical: ["vertical", "vertical", inputToBoolean], inverted: ["inverted", "inverted", inputToBoolean], editable: ["editable", "editable", inputToBoolean] }, outputs: { tabSelected: "tabSelected", tabClosed: "tabClosed", tabAdded: "tabAdded" }, queries: [{ propertyName: "tabs", predicate: ItTabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [class.row]=\"vertical\"\n [class.flex-row-reverse]=\"inverted && vertical\"\n [class.d-flex]=\"inverted && !vertical\"\n [class.flex-column-reverse]=\"inverted && !vertical\">\n <div\n [class.col-5]=\"inverted && vertical\"\n [class.col-md-4]=\"inverted && vertical\"\n [class.col-lg-3]=\"inverted && vertical\"\n [class.col-4]=\"!inverted && vertical\"\n [class.col-md-3]=\"!inverted && vertical\">\n @if (tabs) {\n <ul\n class=\"nav nav-tabs\"\n [class.nav-tabs-editable]=\"editable\"\n [class.nav-tabs-cards]=\"cards\"\n [class.nav-tabs-vertical]=\"vertical\"\n [class.auto]=\"auto\"\n [class.nav-tabs-icon-text]=\"iconText\"\n [class.nav-dark]=\"dark\"\n role=\"tablist\">\n @for (tab of tabs; track tab.id; let i = $index) {\n <li class=\"nav-item\">\n <a\n #tabNavLinks\n [id]=\"tab.id + '-tab-link'\"\n role=\"tab\"\n class=\"nav-link\"\n [class.active]=\"tab.active\"\n [class.disabled]=\"tab.disabled\"\n [attr.href]=\"'#' + tab.id + '-tab'\"\n [attr.aria-controls]=\"tab.id + '-tab'\"\n (click)=\"onTab(tab)\">\n @if (tab.icon) {\n <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n }\n {{ tab.label }}\n </a>\n @if (editable) {\n <a class=\"nav-link-close\" (click)=\"clickToClose(i)\" (keypress)=\"clickToClose(i)\" [attr.disabled]=\"tab.disabled\">\n <it-icon name=\"close\"></it-icon>\n </a>\n }\n </li>\n }\n @if (editable) {\n <li class=\"nav-item\">\n <a href=\"#\" class=\"nav-tab-add\" (click)=\"clickToAdd($event)\" (keypress)=\"clickToAdd($event)\"\n ><span class=\"visually-hidden\"> Aggiungi un tab</span></a\n >\n </li>\n }\n </ul>\n }\n </div>\n <div\n [class.col-7]=\"inverted && vertical\"\n [class.col-md-8]=\"inverted && vertical\"\n [class.col-lg-9]=\"inverted && vertical\"\n [class.col-8]=\"!inverted && vertical\"\n [class.col-md-9]=\"!inverted && vertical\">\n @if (tabs) {\n <div class=\"tab-content\">\n @for (tab of tabs; track tab.id) {\n <div\n [id]=\"tab.id + '-tab'\"\n class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n [class.active]=\"tab.active\"\n [class.show]=\"tab.active\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n </div>\n }\n </div>\n }\n </div>\n</div>\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: ItTabContainerComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "<div\n [class.row]=\"vertical\"\n [class.flex-row-reverse]=\"inverted && vertical\"\n [class.d-flex]=\"inverted && !vertical\"\n [class.flex-column-reverse]=\"inverted && !vertical\">\n <div\n [class.col-5]=\"inverted && vertical\"\n [class.col-md-4]=\"inverted && vertical\"\n [class.col-lg-3]=\"inverted && vertical\"\n [class.col-4]=\"!inverted && vertical\"\n [class.col-md-3]=\"!inverted && vertical\">\n @if (tabs) {\n <ul\n class=\"nav nav-tabs\"\n [class.nav-tabs-editable]=\"editable\"\n [class.nav-tabs-cards]=\"cards\"\n [class.nav-tabs-vertical]=\"vertical\"\n [class.auto]=\"auto\"\n [class.nav-tabs-icon-text]=\"iconText\"\n [class.nav-dark]=\"dark\"\n role=\"tablist\">\n @for (tab of tabs; track tab.id; let i = $index) {\n <li class=\"nav-item\">\n <a\n #tabNavLinks\n [id]=\"tab.id + '-tab-link'\"\n role=\"tab\"\n class=\"nav-link\"\n [class.active]=\"tab.active\"\n [class.disabled]=\"tab.disabled\"\n [attr.href]=\"'#' + tab.id + '-tab'\"\n [attr.aria-controls]=\"tab.id + '-tab'\"\n (click)=\"onTab(tab)\">\n @if (tab.icon) {\n <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n }\n {{ tab.label }}\n </a>\n @if (editable) {\n <a class=\"nav-link-close\" (click)=\"clickToClose(i)\" (keypress)=\"clickToClose(i)\" [attr.disabled]=\"tab.disabled\">\n <it-icon name=\"close\"></it-icon>\n </a>\n }\n </li>\n }\n @if (editable) {\n <li class=\"nav-item\">\n <a href=\"#\" class=\"nav-tab-add\" (click)=\"clickToAdd($event)\" (keypress)=\"clickToAdd($event)\"\n ><span class=\"visually-hidden\"> Aggiungi un tab</span></a\n >\n </li>\n }\n </ul>\n }\n </div>\n <div\n [class.col-7]=\"inverted && vertical\"\n [class.col-md-8]=\"inverted && vertical\"\n [class.col-lg-9]=\"inverted && vertical\"\n [class.col-8]=\"!inverted && vertical\"\n [class.col-md-9]=\"!inverted && vertical\">\n @if (tabs) {\n <div class=\"tab-content\">\n @for (tab of tabs; track tab.id) {\n <div\n [id]=\"tab.id + '-tab'\"\n class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n [class.active]=\"tab.active\"\n [class.show]=\"tab.active\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n </div>\n }\n </div>\n }\n </div>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { auto: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], iconText: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], dark: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], cards: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], vertical: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], inverted: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], editable: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], tabs: [{
type: ContentChildren,
args: [ItTabItemComponent]
}], tabNavLinks: [{
type: ViewChildren,
args: ['tabNavLinks']
}], tabSelected: [{
type: Output
}], tabClosed: [{
type: Output
}], tabAdded: [{
type: Output
}] } });
const tabComponents = [ItTabContainerComponent, ItTabItemComponent];
class ItTabModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, imports: [ItTabContainerComponent, ItTabItemComponent], exports: [ItTabContainerComponent, ItTabItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, decorators: [{
type: NgModule,
args: [{
imports: tabComponents,
exports: tabComponents,
}]
}] });
class ItTableComponent {
constructor() {
/**
* Responsive tables allow you to scroll tables horizontally with ease.
* @default responsive
*/
this.responsive = 'responsive';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItTableComponent, isStandalone: true, selector: "it-table", inputs: { color: "color", headColor: "headColor", alignment: "alignment", striped: ["striped", "striped", inputToBoolean], hover: ["hover", "hover", inputToBoolean], bordered: ["bordered", "bordered", inputToBoolean], borderless: ["borderless", "borderless", inputToBoolean], compact: ["compact", "compact", inputToBoolean], captionTop: ["captionTop", "captionTop", inputToBoolean], responsive: "responsive" }, ngImport: i0, template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n <table\n class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n [class.table-striped]=\"striped\"\n [class.table-hover]=\"hover\"\n [class.table-bordered]=\"bordered\"\n [class.table-borderless]=\"borderless\"\n [class.table-sm]=\"compact\"\n [class.caption-top]=\"captionTop\">\n <caption>\n <ng-content select=\"[caption]\"></ng-content>\n </caption>\n <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n <ng-content select=\"[thead]\"></ng-content>\n </thead>\n <tbody>\n <ng-content select=\"[tbody]\"></ng-content>\n </tbody>\n <tfoot>\n <ng-content select=\"[tfoot]\"></ng-content>\n </tfoot>\n </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n <table\n class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n [class.table-striped]=\"striped\"\n [class.table-hover]=\"hover\"\n [class.table-bordered]=\"bordered\"\n [class.table-borderless]=\"borderless\"\n [class.table-sm]=\"compact\"\n [class.caption-top]=\"captionTop\">\n <caption>\n <ng-content select=\"[caption]\"></ng-content>\n </caption>\n <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n <ng-content select=\"[thead]\"></ng-content>\n </thead>\n <tbody>\n <ng-content select=\"[tbody]\"></ng-content>\n </tbody>\n <tfoot>\n <ng-content select=\"[tfoot]\"></ng-content>\n </tfoot>\n </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"] }]
}], propDecorators: { color: [{
type: Input
}], headColor: [{
type: Input
}], alignment: [{
type: Input
}], striped: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], hover: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], bordered: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], borderless: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], compact: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], captionTop: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], responsive: [{
type: Input
}] } });
/**
* Injection token to be used to override the default options for `it-sort`.
*/
const IT_SORT_DEFAULT_OPTIONS = new InjectionToken('IT_SORT_DEFAULT_OPTIONS');
class ItSortDirective {
/** The sort direction of the currently active ItSortable. */
get direction() {
return this._direction;
}
set direction(direction) {
this._direction = direction;
}
constructor(_defaultOptions) {
this._defaultOptions = _defaultOptions;
/**
* The direction to set when an MatSortable is initially sorted.
* May be overridden by the MatSortable's sort start.
*/
this.start = 'asc';
/** Whether the sortable is disabled. */
this.sortDisabled = false;
/** Event emitted when the user changes either the active sort or sort direction. */
this.sortChange = new EventEmitter();
this.sortDirectiveClass = 'it-sort';
/** Collection of all registered sortables that this directive manages. */
this.sortables = new Map();
/** Used to notify any child components listening to state changes. */
this._stateChanges = new Subject();
}
/**
* Register function to be used by the contained ItSortables. Adds the ItSortable to the
* collection of ItSortables.
*/
register(sortable) {
this.sortables.set(sortable.id, sortable);
}
/**
* Unregister function to be used by the contained ItSortables. Removes the ItSortable from the
* collection of contained ItSortables.
*/
deregister(sortable) {
this.sortables.delete(sortable.id);
}
/** Sets the active sort id and determines the new sort direction. */
sort(sortable) {
if (this.active != sortable.id) {
this.active = sortable.id;
this.direction = sortable.start ? sortable.start : this.start;
}
else {
this.direction = this.getNextSortDirection(sortable);
}
this.sortChange.emit({ active: this.active, direction: this.direction });
}
/** Returns the next sort direction of the active sortable, checking for potential overrides. */
getNextSortDirection(sortable) {
if (!sortable) {
return undefined;
}
// Get the sort direction cycle with the potential sortable overrides.
const disableClear = sortable?.disableSortClear ?? this.disableSortClear ?? !!this._defaultOptions?.disableClear;
const sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
// Get and return the next direction in the cycle
let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
if (nextDirectionIndex >= sortDirectionCycle.length) {
nextDirectionIndex = 0;
}
return sortDirectionCycle[nextDirectionIndex];
}
ngOnChanges() {
this._stateChanges.next();
}
ngOnDestroy() {
this._stateChanges.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortDirective, deps: [{ token: IT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItSortDirective, isStandalone: true, selector: "[itSort]", inputs: { active: ["itSortActive", "active"], start: ["itSortStart", "start"], direction: ["itSortDirection", "direction"], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute] }, outputs: { sortChange: "sortChange" }, host: { properties: { "class": "this.sortDirectiveClass" } }, exportAs: ["itSort"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[itSort]',
exportAs: 'itSort',
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [IT_SORT_DEFAULT_OPTIONS]
}] }], propDecorators: { active: [{
type: Input,
args: ['itSortActive']
}], start: [{
type: Input,
args: ['itSortStart']
}], direction: [{
type: Input,
args: ['itSortDirection']
}], disableSortClear: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], sortDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], sortChange: [{
type: Output
}], sortDirectiveClass: [{
type: HostBinding,
args: ['class']
}] } });
/** Returns the sort direction cycle to use given the provided parameters of order and clear. */
function getSortDirectionCycle(start, disableClear) {
const sortOrder = ['asc', 'desc'];
if (start == 'desc') {
sortOrder.reverse();
}
if (!disableClear) {
sortOrder.push(undefined);
}
return sortOrder;
}
/**
* Applies sorting behavior (click to change sort) and styles to an element, including an
* arrow to display the current sort direction.
*
* Must be provided with an id and contained within a parent ItSort directive.
*
* If used on header cells in a CdkTable, it will automatically default its id from its containing
* column definition.
*/
class ItSortHeaderComponent {
constructor(_changeDetectorRef,
// `SortDirective` is not optionally injected, but just asserted manually w/ better error.
_sort, defaultOptions) {
this._changeDetectorRef = _changeDetectorRef;
this._sort = _sort;
/** Sets the position of the arrow that displays when sorted. */
this.arrowPosition = 'after';
/** whether the sort header is disabled. */
this.sortDisabled = false;
this.sortHeaderClass = 'it-sort-header';
if (defaultOptions?.arrowPosition) {
this.arrowPosition = defaultOptions?.arrowPosition;
}
this._handleStateChanges();
}
ngOnInit() {
// Initialize the direction of the arrow and set the view state to be immediately that state.
this.updateArrowDirection();
this._sort.register(this);
}
ngOnDestroy() {
this._sort.deregister(this);
this._rerenderSubscription?.unsubscribe();
}
_handleClick() {
if (!this.isDisabled) {
this._sort.sort(this);
}
}
/**
* Whether this MatSortHeader is currently sorted in either ascending or descending order.
*/
get isSorted() {
return this._sort.active == this.id && (this._sort.direction === 'asc' || this._sort.direction === 'desc');
}
/**
* Returns the icon class by the arrow direction
*/
get arrowIconClass() {
return `${this._arrowDirection == 'asc' ? 'arrow-up' : 'arrow-down'}`;
}
/**
* Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
* facing the start direction. Otherwise if it is sorted, the arrow should point in the currently
* active sorted direction. The reason this is updated through a function is because the direction
* should only be changed at specific times - when deactivated but the hint is displayed and when
* the sort is active and the direction changes. Otherwise the arrow's direction should linger
* in cases such as the sort becoming deactivated but we want to animate the arrow away while
* preserving its direction, even though the next sort direction is actually different and should
* only be changed once the arrow displays again (hint or activation).
*/
updateArrowDirection() {
this._arrowDirection = this.isSorted ? this._sort.direction : this.start || this._sort.start;
}
get isDisabled() {
return this._sort.sortDisabled || this.sortDisabled;
}
/**
* Gets the aria-sort attribute that should be applied to this sort header. If this header
* is not sorted, returns null so that the attribute is removed from the host element. Aria spec
* says that the aria-sort property should only be present on one header at a time, so removing
* ensures this is true.
*/
get ariaSortAttribute() {
if (!this.isSorted) {
return 'none';
}
return this._sort.direction == 'asc' ? 'ascending' : 'descending';
}
/** Handles changes in the sorting state. */
_handleStateChanges() {
this._rerenderSubscription = merge(this._sort.sortChange, this._sort._stateChanges).subscribe(() => {
if (this.isSorted) {
this.updateArrowDirection();
}
this._changeDetectorRef.markForCheck();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ItSortDirective, optional: true }, { token: IT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItSortHeaderComponent, isStandalone: true, selector: "[it-sort-header]", inputs: { id: ["it-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute] }, host: { listeners: { "click": "_handleClick()" }, properties: { "class": "this.sortHeaderClass", "class.it-sort-header-disabled": "this.isDisabled", "attr.aria-sort": "this.ariaSortAttribute" } }, exportAs: ["itSortHeader"], ngImport: i0, template: "<!--\n We set the `tabindex` on an element inside the table header, rather than the header itself,\n because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n over having a button with an `aria-label` inside the header, because the button's `aria-label`\n will be read out as the user is navigating the table's cell (see #13012).\n\n The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n class=\"it-sort-header-container it-focus-indicator\"\n [class.it-sort-header-sorted]=\"isSorted\"\n [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n [attr.tabindex]=\"isDisabled ? null : 0\"\n [attr.role]=\"isDisabled ? null : 'button'\">\n <!--\n We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n causes it to be center-aligned, whereas removing it will keep the text to the left.\n -->\n <div class=\"it-sort-header-content\">\n <ng-content></ng-content>\n </div>\n\n <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortHeaderComponent, decorators: [{
type: Component,
args: [{ selector: '[it-sort-header]', exportAs: 'itSortHeader', standalone: true, imports: [ItIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n We set the `tabindex` on an element inside the table header, rather than the header itself,\n because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n over having a button with an `aria-label` inside the header, because the button's `aria-label`\n will be read out as the user is navigating the table's cell (see #13012).\n\n The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n class=\"it-sort-header-container it-focus-indicator\"\n [class.it-sort-header-sorted]=\"isSorted\"\n [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n [attr.tabindex]=\"isDisabled ? null : 0\"\n [attr.role]=\"isDisabled ? null : 'button'\">\n <!--\n We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n causes it to be center-aligned, whereas removing it will keep the text to the left.\n -->\n <div class=\"it-sort-header-content\">\n <ng-content></ng-content>\n </div>\n\n <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ItSortDirective, decorators: [{
type: Optional
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [IT_SORT_DEFAULT_OPTIONS]
}] }], propDecorators: { id: [{
type: Input,
args: ['it-sort-header']
}], arrowPosition: [{
type: Input
}], start: [{
type: Input
}], sortDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], disableSortClear: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], sortHeaderClass: [{
type: HostBinding,
args: ['class']
}], _handleClick: [{
type: HostListener,
args: ['click']
}], isDisabled: [{
type: HostBinding,
args: ['class.it-sort-header-disabled']
}], ariaSortAttribute: [{
type: HostBinding,
args: ['attr.aria-sort']
}] } });
const tableComponents = [ItTableComponent, ItSortDirective, ItSortHeaderComponent];
class ItTableModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, imports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent], exports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, decorators: [{
type: NgModule,
args: [{
imports: tableComponents,
exports: tableComponents,
}]
}] });
/**
* Timeline Item
* @description Represents a single event for Timeline component.
*/
class ItTimelineItemComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Timeline element reference date format
* @default dd/MM/yyyy
*/
this.dateFormat = 'dd/MM/yyyy';
/**
* Timeline element PIN type
* @default none
*/
this.pinType = 'default';
/**
* Timeline element PIN icon
* @default code-circle
*/
this.pinIcon = 'code-circle';
/**
* Timeline element category label
*/
this.categoryLabel = 'Categoria evento: ';
/**
* Timeline element date label
*/
this.dateLabel = 'Data evento: ';
/**
* Timeline element show detail link
* @default false
*/
this.showReadMore = false;
/** Timeline element detail link
* @default #
*/
this.readMoreLink = '#';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTimelineItemComponent, isStandalone: true, selector: "it-timeline-item", inputs: { title: "title", text: "text", signature: "signature", eventDate: "eventDate", dateFormat: "dateFormat", pinText: "pinText", pinType: "pinType", pinIcon: "pinIcon", pinIconTitle: "pinIconTitle", categoryLabel: "categoryLabel", dateLabel: "dateLabel", categoryTitle: "categoryTitle", categoryLink: "categoryLink", showReadMore: ["showReadMore", "showReadMore", inputToBoolean], readMoreLink: "readMoreLink" }, usesInheritance: true, ngImport: i0, template: "<div class=\"timeline-element\">\n @if (pinType === 'now') {\n <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n }\n <h3 class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n <div class=\"pin-icon\">\n @if (pinIcon) {\n <it-icon [name]=\"pinIcon\" [title]=\"pinIconTitle\" [attr.role]=\"pinIconTitle ? 'img' : null\"></it-icon>\n } @else {\n <it-icon name=\"code-circle\"></it-icon>\n }\n </div>\n <div class=\"pin-text\">\n <span>{{ pinText }}</span>\n </div>\n </h3>\n <div class=\"card-wrapper\">\n <div class=\"card\">\n <div class=\"card-body\">\n @if ((categoryTitle && categoryLink) || eventDate) {\n <div class=\"category-top\">\n @if (categoryTitle) {\n <span class=\"visually-hidden\">{{ categoryLabel }}</span>\n <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n }\n @if (eventDate) {\n <span class=\"visually-hidden\">{{ dateLabel }}</span>\n <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n }\n </div>\n }\n <h4 class=\"card-title\">{{ title }}</h4>\n <p class=\"card-text\">{{ text }}</p>\n @if (signature) {\n <span class=\"card-signature\">{{ signature }}</span>\n }\n @if (showReadMore) {\n <a class=\"read-more\" [href]=\"readMoreLink\">\n <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n <it-icon name=\"arrow-right\"></it-icon>\n </a>\n }\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-timeline-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, DatePipe, TranslateModule, NgClass], template: "<div class=\"timeline-element\">\n @if (pinType === 'now') {\n <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n }\n <h3 class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n <div class=\"pin-icon\">\n @if (pinIcon) {\n <it-icon [name]=\"pinIcon\" [title]=\"pinIconTitle\" [attr.role]=\"pinIconTitle ? 'img' : null\"></it-icon>\n } @else {\n <it-icon name=\"code-circle\"></it-icon>\n }\n </div>\n <div class=\"pin-text\">\n <span>{{ pinText }}</span>\n </div>\n </h3>\n <div class=\"card-wrapper\">\n <div class=\"card\">\n <div class=\"card-body\">\n @if ((categoryTitle && categoryLink) || eventDate) {\n <div class=\"category-top\">\n @if (categoryTitle) {\n <span class=\"visually-hidden\">{{ categoryLabel }}</span>\n <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n }\n @if (eventDate) {\n <span class=\"visually-hidden\">{{ dateLabel }}</span>\n <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n }\n </div>\n }\n <h4 class=\"card-title\">{{ title }}</h4>\n <p class=\"card-text\">{{ text }}</p>\n @if (signature) {\n <span class=\"card-signature\">{{ signature }}</span>\n }\n @if (showReadMore) {\n <a class=\"read-more\" [href]=\"readMoreLink\">\n <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n <it-icon name=\"arrow-right\"></it-icon>\n </a>\n }\n </div>\n </div>\n </div>\n</div>\n" }]
}], propDecorators: { title: [{
type: Input,
args: [{ required: true }]
}], text: [{
type: Input,
args: [{ required: true }]
}], signature: [{
type: Input
}], eventDate: [{
type: Input
}], dateFormat: [{
type: Input
}], pinText: [{
type: Input,
args: [{ required: true }]
}], pinType: [{
type: Input
}], pinIcon: [{
type: Input
}], pinIconTitle: [{
type: Input
}], categoryLabel: [{
type: Input
}], dateLabel: [{
type: Input
}], categoryTitle: [{
type: Input
}], categoryLink: [{
type: Input
}], showReadMore: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], readMoreLink: [{
type: Input
}] } });
/**
* Timeline
* @description Build timeline for chronological representation of events.
*/
class ItTimelineComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Timeline elements array
* @default []
*/
this.timelineElements = [];
/**
* Default date format for timeline element reference date
* @default dd/MM/yyyy
*/
this.dateFormat = 'dd/MM/yyyy';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTimelineComponent, isStandalone: true, selector: "it-timeline", inputs: { timelineElements: "timelineElements", dateFormat: "dateFormat" }, usesInheritance: true, ngImport: i0, template: "<div class=\"it-timeline-wrapper\">\n <div class=\"row\">\n @for (element of timelineElements; track $index) {\n <div class=\"col-12\">\n <it-timeline-item\n [title]=\"element.title\"\n [text]=\"element.text\"\n [signature]=\"element.signature\"\n [pinType]=\"element.pin?.type\"\n [pinIcon]=\"element.pin?.icon\"\n [pinText]=\"element.pin?.text\"\n [eventDate]=\"element.eventDate\"\n [dateFormat]=\"dateFormat\"\n [categoryTitle]=\"element.category?.title\"\n [categoryLink]=\"element.category?.link\"\n [showReadMore]=\"!!element.link?.length\"\n [readMoreLink]=\"element.link\" />\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItTimelineItemComponent, selector: "it-timeline-item", inputs: ["title", "text", "signature", "eventDate", "dateFormat", "pinText", "pinType", "pinIcon", "pinIconTitle", "categoryLabel", "dateLabel", "categoryTitle", "categoryLink", "showReadMore", "readMoreLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent], template: "<div class=\"it-timeline-wrapper\">\n <div class=\"row\">\n @for (element of timelineElements; track $index) {\n <div class=\"col-12\">\n <it-timeline-item\n [title]=\"element.title\"\n [text]=\"element.text\"\n [signature]=\"element.signature\"\n [pinType]=\"element.pin?.type\"\n [pinIcon]=\"element.pin?.icon\"\n [pinText]=\"element.pin?.text\"\n [eventDate]=\"element.eventDate\"\n [dateFormat]=\"dateFormat\"\n [categoryTitle]=\"element.category?.title\"\n [categoryLink]=\"element.category?.link\"\n [showReadMore]=\"!!element.link?.length\"\n [readMoreLink]=\"element.link\" />\n </div>\n }\n </div>\n</div>\n" }]
}], propDecorators: { timelineElements: [{
type: Input
}], dateFormat: [{
type: Input
}] } });
const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent];
class ItTimelineModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, imports: [ItTimelineComponent, ItTimelineItemComponent], exports: [ItTimelineComponent, ItTimelineItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, imports: [timelineComponents] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, decorators: [{
type: NgModule,
args: [{
imports: timelineComponents,
exports: timelineComponents,
}]
}] });
class ItTooltipDirective {
/**
* Define the tooltip title
* @param title the tooltip title
*/
set title(title) {
if (title) {
// this.element.setAttribute("title", title);
this.element.setAttribute('data-bs-original-title', title);
}
}
/**
* Define the tooltip placement
* @param placement
*/
set tooltipPlacement(placement) {
this.element.setAttribute('data-bs-placement', placement);
}
/**
* Indicates whether the title contains html
* @param html true if contain html
*/
set tooltipHtml(html) {
this.element.setAttribute('data-bs-html', html ? 'true' : 'false');
}
constructor(_elementRef) {
this._elementRef = _elementRef;
/**
* 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 event fires after the show event when the tooltip template has been added to the DOM.
*/
this.insertedEvent = new EventEmitter();
this.element = this._elementRef.nativeElement;
}
ngAfterViewInit() {
this.element.setAttribute('data-bs-toggle', 'tooltip');
this.tooltip = Tooltip.getOrCreateInstance(this.element);
this.element.addEventListener('show.bs.tooltip', event => this.showEvent.emit(event));
this.element.addEventListener('shown.bs.tooltip', event => this.shownEvent.emit(event));
this.element.addEventListener('hide.bs.tooltip', event => this.hideEvent.emit(event));
this.element.addEventListener('hidden.bs.tooltip', event => this.hiddenEvent.emit(event));
this.element.addEventListener('inserted.bs.tooltip', event => this.insertedEvent.emit(event));
}
ngOnDestroy() {
this.dispose();
}
/**
* Shows the tooltip of an item.
*/
show() {
this.tooltip?.show();
}
/**
* Hide the tooltip of an element.
*/
hide() {
this.tooltip?.hide();
}
/**
* Activate / Deactivate the tooltip of an element
*/
toggle() {
this.tooltip?.toggle();
}
/**
* Hides and destroys the tooltip of an element.
*/
dispose() {
this.tooltip?.dispose();
}
/**
* Gives the tooltip of an element a chance to be shown.
*/
enable() {
this.tooltip?.enable();
}
/**
* Removes the ability to show the tooltip of an element.
*/
disable() {
this.tooltip?.disable();
}
/**
* Toggles the possibility that the tooltip of an element is shown or hidden.
*/
toggleEnabled() {
this.tooltip?.disable();
}
/**
* Updates the position of an element's tooltip.
*/
update() {
this.tooltip?.disable();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItTooltipDirective, isStandalone: true, selector: "[itTooltip]", inputs: { title: ["itTooltip", "title"], tooltipPlacement: "tooltipPlacement", tooltipHtml: ["tooltipHtml", "tooltipHtml", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itTooltip"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTooltipDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[itTooltip]',
exportAs: 'itTooltip',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
type: Input,
args: ['itTooltip']
}], tooltipPlacement: [{
type: Input
}], tooltipHtml: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], showEvent: [{
type: Output
}], shownEvent: [{
type: Output
}], hideEvent: [{
type: Output
}], hiddenEvent: [{
type: Output
}], insertedEvent: [{
type: Output
}] } });
class ItCheckboxComponent extends ItAbstractFormComponent {
ngOnInit() {
super.ngOnInit();
this.markAsChecked();
}
ngOnChanges(changes) {
if (changes['checked']) {
this.markAsChecked();
}
}
markAsChecked() {
if (this.control.value || this.checked === undefined) {
return;
}
const value = this.checked;
this.writeValue(value);
return this.onChange(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n @if (toggle) {\n <div class=\"toggles\">\n <label [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\"\n (click)=\"$event.stopPropagation()\" />\n <span class=\"lever\"></span>\n </label>\n </div>\n } @else {\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [class.semi-checked]=\"indeterminate\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\"\n (click)=\"$event.stopPropagation()\" />\n <label class=\"form-check-label\" [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n </label>\n }\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n</ng-container>\n\n<ng-template #error>\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n</ng-template>\n\n<ng-template #htmlLabel>\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCheckboxComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n @if (toggle) {\n <div class=\"toggles\">\n <label [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\"\n (click)=\"$event.stopPropagation()\" />\n <span class=\"lever\"></span>\n </label>\n </div>\n } @else {\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [class.semi-checked]=\"indeterminate\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\"\n (click)=\"$event.stopPropagation()\" />\n <label class=\"form-check-label\" [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n </label>\n }\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n</ng-container>\n\n<ng-template #error>\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n</ng-template>\n\n<ng-template #htmlLabel>\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n</ng-template>\n" }]
}], propDecorators: { toggle: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], inline: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], group: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], checked: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], indeterminate: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
class ItPasswordInputComponent extends ItAbstractFormComponent {
constructor() {
super(...arguments);
/**
* The field is required
* @default true
*/
this.required = true;
/**
* The password minimum length
* @default 10
*/
this.minLength = 10;
/**
* The password must contain at least one number
* @default true
*/
this.useNumber = true;
/**
* The password must contain at least one uppercase character
* @default true
*/
this.useCapitalCase = true;
/**
* The password must contain at least one lowercase character
* @default true
*/
this.useSmallCase = true;
/**
* The password must contain at least one special character
* @default true
*/
this.useSpecialCharacters = true;
/**
* The input placeholder
*/
this.placeholder = '';
}
ngOnInit() {
super.ngOnInit();
if (!this.confirmPasswordField) {
this.addValidators(ItValidators.password(this.minLength, this.useNumber, this.useCapitalCase, this.useSmallCase, this.useSpecialCharacters, this.required));
}
else if (this.required) {
this.addValidators(Validators.required);
}
}
ngAfterViewInit() {
super.ngAfterViewInit();
if (this.inputElement) {
this.inputPasswordBs = InputPassword.getOrCreateInstance(this.inputElement.nativeElement, {
showText: this.isStrengthMeter,
minimumLength: this.minLength,
});
}
}
get isStrengthMeter() {
return !this.confirmPasswordField && !!this.showStrengthMeter;
}
/**
* Return the invalid message string from TranslateService
*/
get invalidMessage() {
if (this.hasError('noPasswordMatch')) {
return this._translateService.get('it.errors.password-no-match');
}
if (this.hasError('minlength')) {
return this._translateService.get('it.errors.password-min-length', {
minLength: this.minLength,
});
}
if (this.hasError('hasNumber')) {
return this._translateService.get('it.errors.password-number');
}
if (this.hasError('hasCapitalCase')) {
return this._translateService.get('it.errors.password-capital-case');
}
if (this.hasError('hasSmallCase')) {
return this._translateService.get('it.errors.password-capital-case');
}
if (this.hasError('hasSpecialCharacters')) {
return this._translateService.get('it.errors.password-special-character');
}
return super.invalidMessage;
}
/**
* Retrieve the default StrengthMeter description message from TranslateService
*/
get strengthMeterDescription() {
const keys = ['it.form.password-strength-meter.description.default'];
if (this.useNumber) {
keys.push('it.form.password-strength-meter.description.number');
}
if (this.useCapitalCase) {
keys.push('it.form.password-strength-meter.description.capital-case');
}
if (this.useSpecialCharacters) {
keys.push('it.form.password-strength-meter.description.special-character');
}
return this._translateService.get(keys, { minLength: this.minLength }).pipe(map(labels => Object.values(labels).join(', ')));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItPasswordInputComponent, isStandalone: true, selector: "it-password-input", inputs: { required: "required", minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: ["showStrengthMeter", "showStrengthMeter", inputToBoolean], confirmPasswordField: ["confirmPasswordField", "confirmPasswordField", inputToBoolean], autocomplete: "autocomplete" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n }\n <input\n #input\n [id]=\"id\"\n type=\"password\"\n class=\"form-control input-password\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [attr.aria-describedby]=\"id + '-description'\"\n [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n <span class=\"password-icon\" aria-hidden=\"true\">\n <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n </span>\n\n @if (isInvalid) {\n <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n\n @if (description !== undefined && !isStrengthMeter) {\n <small [id]=\"id + '-description'\" class=\"form-text\">\n {{ description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n }\n\n <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n {{ 'it.form.caps-inserted' | translate }}\n </small>\n\n @if (isStrengthMeter) {\n <div class=\"password-strength-meter\">\n <small\n [id]=\"id + '-description'\"\n class=\"form-text text-muted\"\n [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n <div class=\"password-meter progress rounded-0 position-absolute\">\n <div class=\"row position-absolute w-100 m-0\">\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n </div>\n <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n </div>\n </div>\n }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPasswordInputComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-password-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, ItIconComponent, AsyncPipe, TranslateModule], template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n }\n <input\n #input\n [id]=\"id\"\n type=\"password\"\n class=\"form-control input-password\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [attr.aria-describedby]=\"id + '-description'\"\n [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n <span class=\"password-icon\" aria-hidden=\"true\">\n <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n </span>\n\n @if (isInvalid) {\n <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n\n @if (description !== undefined && !isStrengthMeter) {\n <small [id]=\"id + '-description'\" class=\"form-text\">\n {{ description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n }\n\n <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n {{ 'it.form.caps-inserted' | translate }}\n </small>\n\n @if (isStrengthMeter) {\n <div class=\"password-strength-meter\">\n <small\n [id]=\"id + '-description'\"\n class=\"form-text text-muted\"\n [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n <div class=\"password-meter progress rounded-0 position-absolute\">\n <div class=\"row position-absolute w-100 m-0\">\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n </div>\n <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n </div>\n </div>\n }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
}], propDecorators: { required: [{
type: Input
}], minLength: [{
type: Input
}], useNumber: [{
type: Input
}], useCapitalCase: [{
type: Input
}], useSmallCase: [{
type: Input
}], useSpecialCharacters: [{
type: Input
}], placeholder: [{
type: Input
}], description: [{
type: Input
}], showStrengthMeter: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], confirmPasswordField: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], autocomplete: [{
type: Input
}], inputElement: [{
type: ViewChild,
args: ['input']
}] } });
class ItRadioButtonComponent extends ItAbstractFormComponent {
get name() {
if (this.forceRadioName) {
return this.forceRadioName;
}
let name = '';
if (this._ngControl) {
name = this._ngControl.name?.toString() || '';
// Retrieve parent name, prevent duplicate name inside FormArray or nested FormGroup
let control = this._ngControl.control?.parent;
while (control?.parent) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const controls = control?.parent?.controls || {};
const parentName = Object.keys(controls).find(name => control === controls[name]) || null;
if (!parentName) {
break;
}
name = `${parentName}.${name}`; // parent.0.radioName
control = control.parent;
}
}
return name;
}
ngOnInit() {
super.ngOnInit();
if (this.control.value || !this.value || !this.checked) {
return;
}
this.writeValue(this.value);
return this.onChange(this.value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRadioButtonComponent, isStandalone: true, selector: "it-radio-button", inputs: { value: "value", inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], forceRadioName: "forceRadioName" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n <input\n [id]=\"id\"\n type=\"radio\"\n [value]=\"value\"\n [name]=\"name\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\" />\n\n <label class=\"form-check-label\" [for]=\"id\">\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n </label>\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRadioButtonComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n <input\n [id]=\"id\"\n type=\"radio\"\n [value]=\"value\"\n [name]=\"name\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\" />\n\n <label class=\"form-check-label\" [for]=\"id\">\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n </label>\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</ng-container>\n" }]
}], propDecorators: { value: [{
type: Input,
args: [{ required: true }]
}], inline: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], group: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], checked: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], forceRadioName: [{
type: Input
}] } });
class ItRangeComponent extends ItAbstractFormComponent {
ngOnInit() {
super.ngOnInit();
this.subscription = this.control.valueChanges
.pipe(distinctUntilChanged(), startWith(undefined))
.subscribe(() => this.updateSliderColor());
}
ngOnChanges(changes) {
if (changes['leftColor']) {
this.slider.nativeElement.style.setProperty('--range-left-color', this.leftColor ?? null);
}
if (changes['rightColor']) {
this.slider.nativeElement.style.setProperty('--range-right-color', this.rightColor ?? null);
}
}
ngOnDestroy() {
this.subscription?.unsubscribe();
}
writeValue(value) {
super.writeValue(value);
this.updateSliderColor();
}
/**
* Update the percentage of slider color
* @private
*/
updateSliderColor() {
if (!this.leftColor || !this.rightColor) {
return;
}
const max = Number(this.slider.nativeElement.max) || 100;
const min = Number(this.slider.nativeElement.min) || 0;
// Calculate visible width
const diff = max - min;
const val = (((this.control.value ?? diff / 2) - min) * 100) / diff;
this.slider.nativeElement.style.setProperty('--range-percentage', `${val}%`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRangeComponent, isStandalone: true, selector: "it-range", inputs: { max: "max", min: "min", step: "step", leftColor: "leftColor", rightColor: "rightColor" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center\">\n @if (label) {\n <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n }\n <ng-content></ng-content>\n</div>\n\n<input\n #slider\n [id]=\"id\"\n type=\"range\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n class=\"form-range\"\n [class.double-color]=\"!!leftColor && !!rightColor\"\n [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRangeComponent, decorators: [{
type: Component,
args: [{ selector: 'it-range', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex justify-content-between align-items-center\">\n @if (label) {\n <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n }\n <ng-content></ng-content>\n</div>\n\n<input\n #slider\n [id]=\"id\"\n type=\"range\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n class=\"form-range\"\n [class.double-color]=\"!!leftColor && !!rightColor\"\n [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"] }]
}], propDecorators: { max: [{
type: Input
}], min: [{
type: Input
}], step: [{
type: Input
}], leftColor: [{
type: Input
}], rightColor: [{
type: Input
}], slider: [{
type: ViewChild,
args: ['slider', { static: true }]
}] } });
class ItRatingComponent extends ItAbstractFormComponent {
constructor() {
super(...arguments);
/**
* Number of stars to show
* @default 5
*/
this.starCount = 5;
this.stars = this.generateStars();
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
if (changes['starCount'] || !this.stars.length) {
this.stars = this.generateStars();
}
}
ngOnInit() {
super.ngOnInit();
if (!this.control.value && !!this.value) {
this.writeValue(this.value);
this.onChange(this.value);
}
}
/**
* Generate the array of stars
* @private
*/
generateStars() {
return Array.from({ length: this.starCount }, (_, i) => i + 1).reverse();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRatingComponent, isStandalone: true, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n <legend>\n <span>{{ label }}</span>\n <span class=\"visually-hidden\">\n {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n </span>\n </legend>\n\n @for (starValue of stars; track starValue) {\n <input\n [id]=\"id + '-' + starValue\"\n type=\"radio\"\n [name]=\"id\"\n [value]=\"starValue\"\n [attr.aria-hidden]=\"control.disabled\"\n [formControl]=\"control\" />\n <label class=\"full\" [for]=\"id + '-' + starValue\">\n <it-icon name=\"star-full\" size=\"sm\" aria-hidden=\"true\"></it-icon>\n <span class=\"visually-hidden\">\n {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n </span>\n </label>\n }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: ItRatingComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-rating', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ReactiveFormsModule, ItIconComponent], template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n <legend>\n <span>{{ label }}</span>\n <span class=\"visually-hidden\">\n {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n </span>\n </legend>\n\n @for (starValue of stars; track starValue) {\n <input\n [id]=\"id + '-' + starValue\"\n type=\"radio\"\n [name]=\"id\"\n [value]=\"starValue\"\n [attr.aria-hidden]=\"control.disabled\"\n [formControl]=\"control\" />\n <label class=\"full\" [for]=\"id + '-' + starValue\">\n <it-icon name=\"star-full\" size=\"sm\" aria-hidden=\"true\"></it-icon>\n <span class=\"visually-hidden\">\n {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n </span>\n </label>\n }\n</fieldset>\n" }]
}], propDecorators: { value: [{
type: Input
}], starCount: [{
type: Input
}] } });
class ItSelectComponent extends ItAbstractFormComponent {
ngOnInit() {
super.ngOnInit();
if (this.control.value) {
return;
}
const selectedOption = this.options?.find(this.optionIsSelected);
if (selectedOption) {
this.writeValue(selectedOption.value);
if (this._ngControl?.control && selectedOption.value !== this._ngControl.control.value) {
this.onChange(selectedOption.value);
}
return;
}
const selectedGroupOption = this.groups?.flatMap(g => g.options).find(this.optionIsSelected);
if (selectedGroupOption) {
this.writeValue(selectedGroupOption.value);
if (this._ngControl?.control && selectedGroupOption.value !== this._ngControl.control.value) {
this.onChange(selectedGroupOption.value);
}
}
}
/**
* Check if the option is selected
* @param option the option
*/
optionIsSelected(option) {
if (option.selected === true) {
return true;
}
if (typeof option.selected === 'function') {
return option.selected(this.control.value);
}
return false;
}
/**
* Check if the option is disabled
* @param option the option
*/
optionIsDisabled(option) {
if (option.disabled === true) {
return true;
}
if (typeof option.disabled === 'function') {
return option.disabled(this.control.value);
}
return false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n @if (label) {\n <label [for]=\"id\">{{ label }}</label>\n }\n <select\n [id]=\"id\"\n [formControl]=\"control\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n (blur)=\"markAsTouched()\"\n [attr.aria-describedby]=\"id + '-description'\">\n @if (defaultOption) {\n <option [ngValue]=\"null\" disabled selected>\n {{ defaultOption }}\n </option>\n }\n\n <ng-content></ng-content>\n\n @if (options) {\n @for (option of options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n }\n\n @if (groups) {\n @for (group of groups; track group) {\n <optgroup [label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSelectComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-select', imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"select-wrapper\">\n @if (label) {\n <label [for]=\"id\">{{ label }}</label>\n }\n <select\n [id]=\"id\"\n [formControl]=\"control\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n (blur)=\"markAsTouched()\"\n [attr.aria-describedby]=\"id + '-description'\">\n @if (defaultOption) {\n <option [ngValue]=\"null\" disabled selected>\n {{ defaultOption }}\n </option>\n }\n\n <ng-content></ng-content>\n\n @if (options) {\n @for (option of options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n }\n\n @if (groups) {\n @for (group of groups; track group) {\n <optgroup [label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
}], propDecorators: { options: [{
type: Input
}], groups: [{
type: Input
}], description: [{
type: Input
}], defaultOption: [{
type: Input
}] } });
class ItTextareaComponent extends ItAbstractFormComponent {
constructor() {
super(...arguments);
/**
* Textarea Rows
* @default 3
*/
this.rows = 3;
/**
* The textarea placeholder
*/
this.placeholder = '';
}
/**
* Return the invalid message string from TranslateService
*/
get invalidMessage() {
if (this.hasError('maxlength')) {
const error = this.getError('maxlength');
return this._translateService.get('it.errors.max-length-invalid', { max: error.requiredLength });
}
if (this.hasError('pattern')) {
const error = this.getError('pattern');
return this._translateService.get('it.errors.pattern-invalid', { pattern: error.requiredPattern });
}
return super.invalidMessage;
}
/**
* Check is readonly field
*/
get isReadonly() {
return this.readonly === 'plaintext' || !!this.readonly;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTextareaComponent, isStandalone: true, selector: "it-textarea", inputs: { rows: "rows", placeholder: "placeholder", description: "description", readonly: "readonly" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n }\n <textarea\n [id]=\"id\"\n [rows]=\"rows\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n [readonly]=\"isReadonly\"\n (blur)=\"markAsTouched()\"></textarea>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError><ng-content select=\"[error]\"></ng-content></div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTextareaComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n }\n <textarea\n [id]=\"id\"\n [rows]=\"rows\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n [readonly]=\"isReadonly\"\n (blur)=\"markAsTouched()\"></textarea>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError><ng-content select=\"[error]\"></ng-content></div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"] }]
}], propDecorators: { rows: [{
type: Input
}], placeholder: [{
type: Input
}], description: [{
type: Input
}], readonly: [{
type: Input
}] } });
class ItFileUtils {
/**
* Return the file size string
* @param file the file
* @param decimals decimal to show
*/
static getFileSizeString(file, decimals = 2) {
const bytes = file.size;
if (!+bytes) {
return '0 Bytes';
}
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
}
/**
* Convert a file to base64 string
* @param file the base64 string
*/
static fileToBase64(file) {
const reader = new FileReader();
reader.readAsDataURL(file);
return new Observable(observer => {
reader.onload = e => {
const target = e.target;
if (!target?.result || target.result instanceof ArrayBuffer) {
return observer.error('Error on parse');
}
observer.next(target.result);
observer.complete();
};
reader.onerror = error => {
observer.error(error);
};
});
}
/**
* Convert base64 to Blob
* @param base64 the base64 string
* @param mimeType the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MIME type</a> (example 'application/pdf')
*/
static base64ToBlob(base64, mimeType) {
const byteString = window.atob(base64);
const arrayBuffer = new ArrayBuffer(byteString.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
int8Array[i] = byteString.charCodeAt(i);
}
return new Blob([int8Array], { type: mimeType });
}
/**
* Convert base64 to File
* @param base64 the base64 string
* @param mimeType the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MIME type</a> (example 'application/pdf')
* @param filename the file name
*/
static base64ToFile(base64, mimeType, filename) {
const fileBlob = ItFileUtils.base64ToBlob(base64, mimeType);
return new File([fileBlob], filename, { type: mimeType });
}
/**
* Extract the MIME type from base64 string
* @param base64 the base64 string
*/
static getMimeTypeFromBase64(base64) {
const mime = base64.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
return mime?.length ? mime[1] : undefined;
}
}
class ItUploadDragDropComponent extends ItAbstractComponent {
constructor() {
super();
/**
* The accepted file type to upload <br>
* Possible values: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MIME Types</a> separated by comma
* @example application/pdf,image/png
* @default *
*/
this.accept = '*';
/**
* Fired when file start to upload
*/
this.fileStartUpload = new EventEmitter();
this.isDragover = false;
this.isLoading = false;
this.isSuccess = false;
this.assetBasePath = inject(IT_ASSET_BASE_PATH);
}
ngAfterViewInit() {
super.ngAfterViewInit();
if (this.donutElement) {
this.donut = ProgressDonut.getOrCreateInstance(this.donutElement.nativeElement);
}
}
// Dragover listener
onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.isDragover = !this.isLoading;
}
// Dragleave listener
onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
this.isDragover = false;
}
// Drop leave listener
onDrop(evt) {
evt.preventDefault();
evt.stopPropagation();
this.isDragover = false;
const files = evt.dataTransfer?.files;
if (this.isLoading || !files?.length) {
return;
}
this.start(files[0]);
}
/**
* On load file from input
* @param event
*/
onLoadFile(event) {
const files = event.target?.files;
if (!files?.length) {
return;
}
this.start(files[0]);
}
/**
* Start the upload file
* @param file
*/
start(file) {
if (this.accept !== '*' && !this.accept.includes(file.type)) {
return;
}
this.reset();
this.isLoading = true;
const splitName = file.name.split('.');
this.filename = splitName[0];
this.extension = splitName[1]?.toUpperCase();
this.fileSize = ItFileUtils.getFileSizeString(file);
this.fileStartUpload.emit(file);
}
/**
* Percentage of upload
* @param value the percentage [0 - 100]
*/
progress(value) {
if (!this.isLoading) {
return;
}
if (value >= 100) {
this.success();
}
else {
this.donut?.set((value < 0 ? 0 : value) / 100);
}
}
/**
* Upload success
*/
success() {
this.isLoading = false;
this.isSuccess = true;
this._changeDetectorRef.detectChanges();
}
/**
* Reset file uploader
*/
reset() {
this.isLoading = false;
this.isSuccess = false;
this.filename = this.extension = this.fileSize = undefined;
this.donut?.set(0);
this._changeDetectorRef.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItUploadDragDropComponent, isStandalone: true, selector: "it-upload-drag-drop", inputs: { accept: "accept" }, outputs: { fileStartUpload: "fileStartUpload" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "donutElement", first: true, predicate: ["donutElement"], descendants: true }], exportAs: ["itUploadDragDrop"], usesInheritance: true, ngImport: i0, template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n <div class=\"upload-dragdrop-image\">\n <img\n [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n alt=\"drag-drop-icon\"\n aria-hidden=\"true\"\n [width]=\"180\"\n [height]=\"180\" />\n <div class=\"upload-dragdrop-loading\">\n <div class=\"progress-donut\" #donutElement></div>\n </div>\n <div class=\"upload-dragdrop-success\">\n <it-icon name=\"check\"></it-icon>\n </div>\n </div>\n <div class=\"upload-dragdrop-text\">\n <p class=\"upload-dragdrop-weight\">\n <it-icon name=\"file\" size=\"xs\"></it-icon>\n {{ extension }} ({{ fileSize }})\n </p>\n <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n @if (isLoading) {\n <p>{{ 'it.form.upload-loading' | translate }}</p>\n }\n @if (isSuccess) {\n <p>{{ 'it.form.upload-complete' | translate }}</p>\n }\n @if (!isLoading && !isSuccess) {\n <p>\n {{ 'it.form.upload-or' | translate }}\n <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n </p>\n }\n </div>\n</div>\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: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadDragDropComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-upload-drag-drop', exportAs: 'itUploadDragDrop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, NgOptimizedImage], template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n <div class=\"upload-dragdrop-image\">\n <img\n [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n alt=\"drag-drop-icon\"\n aria-hidden=\"true\"\n [width]=\"180\"\n [height]=\"180\" />\n <div class=\"upload-dragdrop-loading\">\n <div class=\"progress-donut\" #donutElement></div>\n </div>\n <div class=\"upload-dragdrop-success\">\n <it-icon name=\"check\"></it-icon>\n </div>\n </div>\n <div class=\"upload-dragdrop-text\">\n <p class=\"upload-dragdrop-weight\">\n <it-icon name=\"file\" size=\"xs\"></it-icon>\n {{ extension }} ({{ fileSize }})\n </p>\n <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n @if (isLoading) {\n <p>{{ 'it.form.upload-loading' | translate }}</p>\n }\n @if (isSuccess) {\n <p>{{ 'it.form.upload-complete' | translate }}</p>\n }\n @if (!isLoading && !isSuccess) {\n <p>\n {{ 'it.form.upload-or' | translate }}\n <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n </p>\n }\n </div>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { accept: [{
type: Input
}], fileStartUpload: [{
type: Output
}], donutElement: [{
type: ViewChild,
args: ['donutElement']
}], onDragOver: [{
type: HostListener,
args: ['dragover', ['$event']]
}], onDragLeave: [{
type: HostListener,
args: ['dragleave', ['$event']]
}], onDrop: [{
type: HostListener,
args: ['drop', ['$event']]
}] } });
class ItUploadFileListComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* The accepted file type to upload <br>
* Possible values: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MIME Types</a> separated by comma
* @example application/pdf,image/png
* @default *
*/
this.accept = '*';
/**
* If upload multiple files
* @default true
*/
this.multiple = true;
/**
* Fired when upload new files
*/
this.uploadFiles = new EventEmitter();
/**
* Fired on delete item button click
*/
this.deleteItem = new EventEmitter();
/**
* Cache to preview image
*/
this.previewImages = new Map();
}
ngOnInit() {
if (!!this.images && this.accept === '*') {
this.accept = 'image/*';
}
}
ngOnChanges(changes) {
if (changes['fileList'] && !!this.images) {
const images$ = this.fileList.map(item => ItFileUtils.fileToBase64(item.file).pipe(take(1), tap(base64 => this.previewImages.set(item.id, base64))));
forkJoin(images$).subscribe(() => {
this._changeDetectorRef.detectChanges();
super.ngOnChanges(changes);
});
}
else {
super.ngOnChanges(changes);
}
}
/**
* On load file from input
* @param event
*/
onLoadFiles(event) {
const input = event.target;
const files = input?.files;
if (!files?.length) {
return;
}
const newFiles = Array.from(files).filter(file => !this.fileList.some(item => {
return item.file.name === file.name && item.file.size === file.size && item.file.type === file.type;
}));
const fileList = new DataTransfer();
newFiles.forEach(file => fileList.items.add(file));
this.uploadFiles.emit(fileList.files);
input.value = '';
}
/**
* Get the file size string
* @param file
*/
getFileSize(file) {
return ItFileUtils.getFileSizeString(file);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n <label [for]=\"id\">\n <it-icon name=\"upload\" size=\"sm\"></it-icon>\n <span>{{ 'it.form.upload' | translate }}</span>\n </label>\n}\n\n@if (fileList.length) {\n <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n @for (item of fileList; track item.id) {\n <li\n class=\"upload-file\"\n [class.error]=\"item.error\"\n [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n @if (images) {\n <div class=\"upload-image\">\n <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n </div>\n } @else {\n <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n }\n <p [itTooltip]=\"item.tooltip\">\n <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n </p>\n @if (item.removable && (!item.progress || item.progress < 100)) {\n <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n <button type=\"button\" disabled>\n <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n <it-icon name=\"check\"></it-icon>\n </button>\n }\n @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n }\n </li>\n }\n </ul>\n}\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: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-upload-file-list', imports: [ItIconComponent, TranslateModule, ItTooltipDirective, ItProgressBarComponent], template: "@if (!hideLoadButton) {\n <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n <label [for]=\"id\">\n <it-icon name=\"upload\" size=\"sm\"></it-icon>\n <span>{{ 'it.form.upload' | translate }}</span>\n </label>\n}\n\n@if (fileList.length) {\n <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n @for (item of fileList; track item.id) {\n <li\n class=\"upload-file\"\n [class.error]=\"item.error\"\n [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n @if (images) {\n <div class=\"upload-image\">\n <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n </div>\n } @else {\n <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n }\n <p [itTooltip]=\"item.tooltip\">\n <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n </p>\n @if (item.removable && (!item.progress || item.progress < 100)) {\n <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n <button type=\"button\" disabled>\n <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n <it-icon name=\"check\"></it-icon>\n </button>\n }\n @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n }\n </li>\n }\n </ul>\n}\n" }]
}], propDecorators: { fileList: [{
type: Input,
args: [{ required: true }]
}], accept: [{
type: Input
}], multiple: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], images: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], hideLoadButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], uploadFiles: [{
type: Output
}], deleteItem: [{
type: Output
}] } });
/**
* Allows you to highlight text with the <mark> tag
*/
class ItMarkMatchingTextPipe {
constructor(domSanitizer) {
this.domSanitizer = domSanitizer;
}
/**
* Allows you to highlight text with the <mark> tag
* @param allString the full text to search from
* @param searchString the string to search
*/
transform(allString, searchString) {
if (!searchString) {
return allString;
}
else if (!allString) {
return '';
}
if (typeof searchString === 'number') {
searchString = searchString.toString();
}
// Check if search string is a substring of pivot string (no case-sensitive)
const idxOfMatchString = allString.toLowerCase().indexOf(searchString.toLowerCase());
if (idxOfMatchString !== -1) {
// retrieve the exactly substring
const matchingString = allString.substring(idxOfMatchString, idxOfMatchString + searchString.length);
// Replace original string marking as <strong> (bold) the matchinng substring
const regEx = new RegExp('(' + matchingString + ')', 'gi');
const res = allString.replace(regEx, '<mark>$1</mark>');
return this.domSanitizer.bypassSecurityTrustHtml(res);
}
return allString;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, isStandalone: true, name: "itMarkMatchingText" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, decorators: [{
type: Pipe,
args: [{
standalone: true,
name: 'itMarkMatchingText',
}]
}], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
class ItAutocompleteComponent extends ItAbstractFormComponent {
constructor() {
super(...arguments);
/**
* Time span [ms] has passed without another source emission, to delay data filtering.
* Useful when the user is typing multiple letters
* @default 300 [ms]
*/
this.debounceTime = 300;
/**
* The input placeholder
*/
this.placeholder = '';
/**
* The input label even get labelWaria icon
*/
this.labelWaria = undefined;
/**
* Show the label
*/
this.forceShowLabel = true;
/**
* Fired when the Autocomplete Item has been selected
*/
this.autocompleteSelectedEvent = new EventEmitter();
this.showAutocompletion = false;
/** Observable da cui vengono emessi i risultati dell'auto completamento */
this.autocompleteResults$ = new Observable();
}
ngOnInit() {
super.ngOnInit();
this.autocompleteResults$ = this.getAutocompleteResults$();
}
/**
* Create the autocomplete list
*/
getAutocompleteResults$() {
return this.control.valueChanges.pipe(debounceTime(this.debounceTime), // Delay filter data after time span has passed without another source emission, useful when the user is typing multiple letters
distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value
switchMap(searchedValue => {
if (!this.autocompleteData) {
return of({
searchedValue,
relatedEntries: [],
});
}
const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue);
return autoCompleteData$.pipe(map(autocompleteData => {
if (!searchedValue || typeof searchedValue === 'number') {
return { searchedValue, relatedEntries: [] };
}
const lowercaseValue = searchedValue.toLowerCase();
const relatedEntries = autocompleteData.filter(item => item.value?.toLowerCase().includes(lowercaseValue));
return { searchedValue, relatedEntries };
}));
}));
}
onEntryClick(entry, event) {
// Se non è stato definito un link associato all'elemento dell'autocomplete, probabilmente il desiderata
// non è effettuare la navigazione al default '#', pertanto in tal caso meglio annullare la navigazione.
if (!entry.link) {
event.preventDefault();
}
this.autocompleteSelectedEvent.next(entry);
this.control.setValue(entry.value);
this.showAutocompletion = false;
}
autocompleteItemTrackByValueFn(index, item) {
return item.value;
}
onKeyDown() {
this.showAutocompletion = true;
}
get isActiveLabel() {
const value = this.control.value;
return this.forceShowLabel && (!!value || !!this.placeholder);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { autocompleteData: "autocompleteData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { autocompleteSelectedEvent: "autocompleteSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n @if (label) {\n <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n {{ label }}\n </label>\n }\n\n <input\n [id]=\"id\"\n type=\"search\"\n class=\"autocomplete form-control\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n (blur)=\"markAsTouched()\"\n (keydown)=\"onKeyDown()\" />\n\n <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n </span>\n\n @if (autocompleteResults$ | async; as autocomplete) {\n <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n @for (entry of autocomplete.relatedEntries; track autocompleteItemTrackByValueFn($index, entry)) {\n <li>\n <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n @if (entry.avatarSrcPath) {\n <div class=\"avatar size-sm\">\n <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n </div>\n }\n @if (entry.icon) {\n <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n }\n <span class=\"autocomplete-list-text\">\n <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n @if (entry.label) {\n <em>{{ entry.label }}</em>\n }\n </span>\n </a>\n </li>\n }\n </ul>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-autocomplete', imports: [AsyncPipe, ItIconComponent, ItMarkMatchingTextPipe, NgTemplateOutlet, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n @if (label) {\n <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n {{ label }}\n </label>\n }\n\n <input\n [id]=\"id\"\n type=\"search\"\n class=\"autocomplete form-control\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n (blur)=\"markAsTouched()\"\n (keydown)=\"onKeyDown()\" />\n\n <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n </span>\n\n @if (autocompleteResults$ | async; as autocomplete) {\n <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n @for (entry of autocomplete.relatedEntries; track autocompleteItemTrackByValueFn($index, entry)) {\n <li>\n <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n @if (entry.avatarSrcPath) {\n <div class=\"avatar size-sm\">\n <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n </div>\n }\n @if (entry.icon) {\n <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n }\n <span class=\"autocomplete-list-text\">\n <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n @if (entry.label) {\n <em>{{ entry.label }}</em>\n }\n </span>\n </a>\n </li>\n }\n </ul>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n" }]
}], propDecorators: { autocompleteData: [{
type: Input,
args: [{ required: true }]
}], big: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], debounceTime: [{
type: Input
}], placeholder: [{
type: Input
}], labelWaria: [{
type: Input
}], forceShowLabel: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], autocompleteSelectedEvent: [{
type: Output
}] } });
//#region private utility functions
const generateSelectAll = (checked, items) => {
const selected = new Set();
if (checked) {
items.forEach(item => selected.add(item));
}
return selected;
};
const updateSelected = (set, item) => {
if (set.has(item)) {
set.delete(item);
}
else {
set.add(item);
}
return set;
};
//#endregion
//#region reducers
const init = (state, { source, target }) => ({
...state,
initialItems: {
source: [...source],
target: [...target],
},
current: {
source: [...source],
target: [...target],
},
});
const transfer = (state) => {
return {
...state,
current: {
...state.current,
source: state.current.source.filter(i => !state.selections.source.has(i)),
target: Array.from(new Set([...state.current.target, ...Array.from(state.selections.source)])),
},
selections: {
...state.selections,
source: new Set(),
},
operationsEnabled: {
...state.operationsEnabled,
transfer: false,
reset: true,
},
};
};
const backtransfer = (state) => {
return {
...state,
current: {
...state.current,
target: state.current.target.filter(i => !state.selections.target.has(i)),
source: Array.from(new Set([...state.current.source, ...Array.from(state.selections.target)])),
},
selections: {
...state.selections,
target: new Set(),
},
operationsEnabled: {
...state.operationsEnabled,
backtransfer: false,
reset: true,
},
};
};
const reset = (state) => {
return {
...state,
current: {
source: [...state.initialItems.source],
target: [...state.initialItems.target],
},
operationsEnabled: {
...state.operationsEnabled,
reset: false,
},
};
};
const selectAllSource = (state, { checked }) => {
const items = state.current.source;
const selected = generateSelectAll(checked, items);
const transfer = Boolean(selected.size);
return {
...state,
selections: {
...state.selections,
source: selected,
},
operationsEnabled: {
...state.operationsEnabled,
transfer,
},
};
};
const selectAllTarget = (state, { checked }) => {
const items = state.current.target;
const selected = generateSelectAll(checked, items);
const backtransfer = Boolean(selected.size);
return {
...state,
selections: {
...state.selections,
target: selected,
},
operationsEnabled: {
...state.operationsEnabled,
backtransfer,
},
};
};
const selectionItemSource = (previousState, { item }) => {
const selected = updateSelected(previousState.selections.source, item);
const selectedItems = Array.from(selected);
const transfer = Boolean(selectedItems.length);
const source = new Set([...selectedItems]);
const state = {
...previousState,
selections: {
...previousState.selections,
source,
},
operationsEnabled: {
...previousState.operationsEnabled,
transfer,
},
};
return state;
};
const selectionItemTarget = (previousState, { item }) => {
const selected = updateSelected(previousState.selections.target, item);
const selectedItems = Array.from(selected);
const backtransfer = Boolean(selectedItems.length);
const target = new Set([...selectedItems]);
const state = {
...previousState,
selections: {
...previousState.selections,
target,
},
operationsEnabled: {
...previousState.operationsEnabled,
backtransfer,
},
};
return state;
};
//#endregion reducers
//#region public reducers
const initialStateFn = () => ({
initialItems: {
source: [],
target: [],
},
current: {
source: [],
target: [],
},
selections: {
source: new Set(),
target: new Set(),
},
operationsEnabled: {
transfer: false,
backtransfer: false,
reset: false,
},
});
const initFn = (payload) => (state) => init(state, payload);
const transferFn = () => (state) => transfer(state);
const backtransferFn = () => (state) => backtransfer(state);
const resetFn = () => (state) => reset(state);
const selectAllSourceFn = ({ checked }) => (state) => selectAllSource(state, { checked });
const selectAllTargetFn = ({ checked }) => (state) => selectAllTarget(state, { checked });
const selectionItemSourceFn = ({ item }) => (state) => selectionItemSource(state, { item });
const selectionItemTargetFn = ({ item }) => (state) => selectionItemTarget(state, { item });
//#endregion
var reducers = {
initialStateFn,
initFn,
transferFn,
backtransferFn,
resetFn,
selectAllSourceFn,
selectAllTargetFn,
selectionItemSourceFn,
selectionItemTargetFn,
};
class TransferStore {
constructor() {
this._state = new BehaviorSubject(reducers.initialStateFn());
this.sourceItems = this._state.pipe(map(state => state.current.source));
this.targetItems = this._state.pipe(map(state => state.current.target));
this.valueChanged = this._state.pipe(map(state => state.current.target), distinctUntilChanged());
this.selectItems = (sourceType) => {
if (sourceType === 'source') {
return this.sourceItems;
}
if (sourceType === 'target') {
return this.targetItems;
}
return of([]);
};
this.selectSelectedItems = (sourceType) => {
if (sourceType === 'source') {
return this._state.pipe(map(state => state.selections.source));
}
if (sourceType === 'target') {
return this._state.pipe(map(state => state.selections.target));
}
return of(new Set());
};
this.transferEnabled = this._state.pipe(map(state => state.operationsEnabled.transfer));
this.backtransferEnabled = this._state.pipe(map(state => state.operationsEnabled.backtransfer));
this.resetEnabled = this._state.pipe(map(state => state.operationsEnabled.reset));
}
init({ source, target }) {
this.updateState(reducers.initFn({ source, target }));
}
transfer() {
this.updateState(reducers.transferFn());
}
backtransfer() {
this.updateState(reducers.backtransferFn());
}
reset() {
this.updateState(reducers.resetFn());
}
checkboxSelection(item, sourceType) {
if (sourceType === 'source') {
this.updateState(reducers.selectionItemSourceFn({ item }));
}
if (sourceType === 'target') {
this.updateState(reducers.selectionItemTargetFn({ item }));
}
}
selectAllSelection(checked, sourceType) {
if (sourceType === 'source') {
this.updateState(reducers.selectAllSourceFn({ checked }));
}
if (sourceType === 'target') {
this.updateState(reducers.selectAllTargetFn({ checked }));
}
}
updateState(reducerFn) {
this._state.next(reducerFn(this._state.value));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TransferStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TransferStore }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TransferStore, decorators: [{
type: Injectable
}] });
class ItTransferListComponent extends ItAbstractComponent {
constructor(store) {
super();
this.store = store;
/**
* Widget title
*/
this.title = inject(new HostAttributeToken('title'), { optional: true });
this.sourceType = inject(new HostAttributeToken('sourceType'), { optional: true });
this.items = this.store.selectItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
this.selected = this.store.selectSelectedItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
this.numberOfItems$ = this.items.pipe(map(items => ({ length: items.length })), startWith({ length: 0 }));
this.selectAllDisabled = this.items.pipe(map(items => items.length === 0));
/**
* Items of the list
* @default []
*/
this.items$ = combineLatest([this.items, this.selected]).pipe(map(([items, selected]) => items.map(item => {
item.selected = selected.has(item);
return item;
})));
this.instanceId = this.getInstanceId();
this.onItemsUpdate();
}
/**
* Checkbox selection click handler
*/
checkboxSelectionHandler(item) {
this.store.checkboxSelection(item, this.sourceType);
}
/**
* Checkbox select all selection handler
*/
checkboxSelectAllHandler(event) {
const checked = event.target.checked;
this.store.selectAllSelection(checked, this.sourceType);
}
/**
* Items update subscription
*/
onItemsUpdate() {
this.items
.pipe(takeUntilDestroyed(), skip(1), tap(() => {
if (this.selectAllCheckboxRef) {
this.selectAllCheckboxRef.nativeElement.checked = false;
}
}))
.subscribe();
}
getInstanceId() {
return Math.floor(Math.random() * 100000000).toString();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTransferListComponent, deps: [{ token: TransferStore }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTransferListComponent, isStandalone: true, selector: "it-transfer-list", viewQueries: [{ propertyName: "selectAllCheckboxRef", first: true, predicate: ["selectAllCheckbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"it-transfer-wrapper source\">\n <div class=\"transfer-header\">\n <div class=\"form-check\">\n <input\n #selectAllCheckbox\n type=\"checkbox\"\n id=\"{{ instanceId }}checkbox{{ title }}\"\n [disabled]=\"selectAllDisabled | async\"\n (click)=\"checkboxSelectAllHandler($event)\" />\n <label for=\"{{ instanceId }}checkbox{{ title }}\">\n <span>\n @if (numberOfItems$ | async; as numberOfItems) {\n <span class=\"num\"> {{ numberOfItems.length }}</span>\n <span> {{ (numberOfItems.length === 1 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</span>\n }\n </span>\n <span class=\"descr\">{{ title | titlecase }}</span>\n </label>\n </div>\n <!-- form check -->\n </div>\n <!-- transfer-header -->\n <div class=\"transfer-scroll\">\n <div class=\"transfer-group\">\n @for (item of items$ | async; track item.value) {\n <div class=\"form-check\">\n <input\n type=\"checkbox\"\n id=\"{{ instanceId }}-{{ item.value }}\"\n [checked]=\"item.selected\"\n (click)=\"checkboxSelectionHandler(item)\" />\n <label for=\"{{ instanceId }}-{{ item.value }}\">\n <span>\n <span>{{ item.text }}</span>\n </span>\n </label>\n </div>\n }\n </div>\n </div>\n</div>\n<!-- it-transfer-wrapper -->\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTransferListComponent, decorators: [{
type: Component,
args: [{ selector: 'it-transfer-list', standalone: true, imports: [TranslateModule, AsyncPipe, TitleCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"it-transfer-wrapper source\">\n <div class=\"transfer-header\">\n <div class=\"form-check\">\n <input\n #selectAllCheckbox\n type=\"checkbox\"\n id=\"{{ instanceId }}checkbox{{ title }}\"\n [disabled]=\"selectAllDisabled | async\"\n (click)=\"checkboxSelectAllHandler($event)\" />\n <label for=\"{{ instanceId }}checkbox{{ title }}\">\n <span>\n @if (numberOfItems$ | async; as numberOfItems) {\n <span class=\"num\"> {{ numberOfItems.length }}</span>\n <span> {{ (numberOfItems.length === 1 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</span>\n }\n </span>\n <span class=\"descr\">{{ title | titlecase }}</span>\n </label>\n </div>\n <!-- form check -->\n </div>\n <!-- transfer-header -->\n <div class=\"transfer-scroll\">\n <div class=\"transfer-group\">\n @for (item of items$ | async; track item.value) {\n <div class=\"form-check\">\n <input\n type=\"checkbox\"\n id=\"{{ instanceId }}-{{ item.value }}\"\n [checked]=\"item.selected\"\n (click)=\"checkboxSelectionHandler(item)\" />\n <label for=\"{{ instanceId }}-{{ item.value }}\">\n <span>\n <span>{{ item.text }}</span>\n </span>\n </label>\n </div>\n }\n </div>\n </div>\n</div>\n<!-- it-transfer-wrapper -->\n" }]
}], ctorParameters: () => [{ type: TransferStore }], propDecorators: { selectAllCheckboxRef: [{
type: ViewChild,
args: ['selectAllCheckbox']
}] } });
/**
* Transfer
* @description Component that allows the creation of checkbox lists.
*/
class ItTransferComponent extends ItAbstractFormComponent {
constructor(_ngControl, _translateService, store) {
super(_translateService, _ngControl);
this._ngControl = _ngControl;
this._translateService = _translateService;
this.store = store;
/**
* The select options (left side)
*/
this.options = [];
/**
* The selected options (right side)
*/
this.selected = [];
/**
* Fired when there is a transfer, a backtransfer or a reset event
*/
this.transferChanges = new EventEmitter();
/**
* Enable transfer button
* @default false
*/
this.transferEnabled = this.store.transferEnabled;
/**
* Enable backtransfer button
* @default false
*/
this.backtransferEnabled = this.store.backtransferEnabled;
/**
* Enable reset button
* @default false
*/
this.resetEnabled = this.store.resetEnabled;
this.destroyRef = inject(DestroyRef);
}
ngOnInit() {
super.ngOnInit();
this.storeInit();
this.onStoreValueChanged();
}
/**
* Transfer button click handler
*/
transferClickHandler(event) {
this.buttonEventHandler(event, () => this.store.transfer());
}
/**
* Transfer button keypress handler
*/
transferKeyPressHandler(event) {
this.buttonEventHandler(event, () => this.store.transfer());
}
/**
* Backtransfer button click handler
*/
backtransferClickHandler(event) {
this.buttonEventHandler(event, () => this.store.backtransfer());
}
/**
* Backtransfer button keypress handler
*/
backtransferKeyPressHandler(event) {
this.buttonEventHandler(event, () => this.store.backtransfer());
}
/**
* Reset button click handler
*/
resetClickHandler(event) {
this.buttonEventHandler(event, () => this.store.reset());
}
/**
* Reset button keypress handler
*/
resetKeyPressHandler(event) {
this.buttonEventHandler(event, () => this.store.reset());
}
buttonEventHandler(event, updateStoreCb) {
event.preventDefault();
updateStoreCb();
}
storeInit() {
let target = [];
const ngControl = this._ngControl;
const isNgControlDefined = Boolean(this._ngControl);
// if ngControl is defined, take values from it. Input() target will be ignored
if (isNgControlDefined) {
console.debug('ngControl instanceof NgModel:', ngControl instanceof NgModel);
console.debug('ngControl instanceof FormControlName:', ngControl instanceof FormControlName);
// if ngControl is an ngModel (template-driven form use case), take values from it
if (ngControl instanceof NgModel) {
console.debug('ngControl instanceof NgModel');
const model = ngControl.model;
target = Array.isArray(model) ? model : [];
}
// if ngControl is an FormControlName (reactive form use case), take values from it
if (ngControl instanceof FormControlName) {
console.debug('ngControl instanceof FormControlName');
const model = ngControl.control.value;
target = Array.isArray(model) ? model : [];
}
console.debug('ngControl is defined. Input() target will be ignored');
}
else if (this.selected && Array.isArray(this.selected)) {
target = [...this.selected];
}
console.debug('target:', this.selected, 'formControl:', this.control.value, 'ngModel:', this._ngControl);
this.store.init({ source: [...this.options], target });
}
onStoreValueChanged() {
this.store.valueChanged
.pipe(takeUntilDestroyed(this.destroyRef), tap(value => this.writeValue(value)), tap(value => this.onChange(value)), tap(value => this.transferChanges.emit(value)))
.subscribe();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTransferComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i1.TranslateService }, { token: TransferStore }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTransferComponent, isStandalone: true, selector: "it-transfer", inputs: { options: "options", selected: "selected" }, outputs: { transferChanges: "transferChanges" }, providers: [TransferStore], usesInheritance: true, ngImport: i0, template: "<div>\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n }\n <div class=\"row\">\n <div class=\"col-xs-12 col-md-5\">\n <it-transfer-list sourceType=\"source\" [title]=\"'it.transfer.source' | translate\"></it-transfer-list>\n </div>\n <!-- col -->\n <div class=\"col-xs-12 col-md-2\">\n <!-- transfer buttons-->\n <div class=\"it-transfer-buttons\">\n <a\n class=\"transfer\"\n role=\"button\"\n href=\"#\"\n [ngClass]=\"{ active: transferEnabled | async }\"\n (click)=\"transferClickHandler($event)\"\n (keypress)=\"transferKeyPressHandler($event)\"\n [attr.aria-label]=\"'it.transfer.aria-label-move-forward' | translate\">\n <it-icon name=\"arrow-right\"></it-icon>\n </a>\n <span class=\"visually-hidden\">{{ 'it.transfer.label-move-forward' | translate }}</span>\n <a\n class=\"backtransfer\"\n role=\"button\"\n href=\"#\"\n [ngClass]=\"{ active: backtransferEnabled | async }\"\n (click)=\"backtransferClickHandler($event)\"\n (keypress)=\"backtransferKeyPressHandler($event)\"\n [attr.aria-label]=\"'it.transfer.aria-label-move-backward' | translate\">\n <it-icon name=\"arrow-left\"></it-icon>\n </a>\n <span class=\"visually-hidden\">{{ 'it.transfer.label-move-backward' | translate }}</span>\n <a\n class=\"reset\"\n role=\"button\"\n href=\"#\"\n [ngClass]=\"{ active: resetEnabled | async }\"\n (click)=\"resetClickHandler($event)\"\n (keypress)=\"resetKeyPressHandler($event)\"\n [attr.aria-label]=\"'it.transfer.aria-label-reset' | translate\">\n <it-icon name=\"restore\"></it-icon>\n </a>\n <span class=\"visually-hidden\">{{ 'it.transfer.label-reset' | translate }}</span>\n </div>\n </div>\n <div class=\"col-xs-12 col-md-5\">\n <it-transfer-list sourceType=\"target\" [title]=\"'it.transfer.target' | translate\"></it-transfer-list>\n </div>\n </div>\n</div>\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"] }, { kind: "component", type: ItTransferListComponent, selector: "it-transfer-list" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTransferComponent, decorators: [{
type: Component,
args: [{ selector: 'it-transfer', standalone: true, imports: [TranslateModule, ItIconComponent, ItTransferListComponent, NgClass, AsyncPipe, ReactiveFormsModule], providers: [TransferStore], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n }\n <div class=\"row\">\n <div class=\"col-xs-12 col-md-5\">\n <it-transfer-list sourceType=\"source\" [title]=\"'it.transfer.source' | translate\"></it-transfer-list>\n </div>\n <!-- col -->\n <div class=\"col-xs-12 col-md-2\">\n <!-- transfer buttons-->\n <div class=\"it-transfer-buttons\">\n <a\n class=\"transfer\"\n role=\"button\"\n href=\"#\"\n [ngClass]=\"{ active: transferEnabled | async }\"\n (click)=\"transferClickHandler($event)\"\n (keypress)=\"transferKeyPressHandler($event)\"\n [attr.aria-label]=\"'it.transfer.aria-label-move-forward' | translate\">\n <it-icon name=\"arrow-right\"></it-icon>\n </a>\n <span class=\"visually-hidden\">{{ 'it.transfer.label-move-forward' | translate }}</span>\n <a\n class=\"backtransfer\"\n role=\"button\"\n href=\"#\"\n [ngClass]=\"{ active: backtransferEnabled | async }\"\n (click)=\"backtransferClickHandler($event)\"\n (keypress)=\"backtransferKeyPressHandler($event)\"\n [attr.aria-label]=\"'it.transfer.aria-label-move-backward' | translate\">\n <it-icon name=\"arrow-left\"></it-icon>\n </a>\n <span class=\"visually-hidden\">{{ 'it.transfer.label-move-backward' | translate }}</span>\n <a\n class=\"reset\"\n role=\"button\"\n href=\"#\"\n [ngClass]=\"{ active: resetEnabled | async }\"\n (click)=\"resetClickHandler($event)\"\n (keypress)=\"resetKeyPressHandler($event)\"\n [attr.aria-label]=\"'it.transfer.aria-label-reset' | translate\">\n <it-icon name=\"restore\"></it-icon>\n </a>\n <span class=\"visually-hidden\">{{ 'it.transfer.label-reset' | translate }}</span>\n </div>\n </div>\n <div class=\"col-xs-12 col-md-5\">\n <it-transfer-list sourceType=\"target\" [title]=\"'it.transfer.target' | translate\"></it-transfer-list>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
type: Self
}, {
type: Optional
}] }, { type: i1.TranslateService }, { type: TransferStore }], propDecorators: { options: [{
type: Input
}], selected: [{
type: Input
}], transferChanges: [{
type: Output
}] } });
const formComponents = [
ItAutocompleteComponent,
ItCheckboxComponent,
ItInputComponent,
ItPasswordInputComponent,
ItRadioButtonComponent,
ItRangeComponent,
ItRatingComponent,
ItSelectComponent,
ItTextareaComponent,
ItTransferComponent,
ItUploadDragDropComponent,
ItUploadFileListComponent,
];
class ItFormModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [ItAutocompleteComponent,
ItCheckboxComponent,
ItInputComponent,
ItPasswordInputComponent,
ItRadioButtonComponent,
ItRangeComponent,
ItRatingComponent,
ItSelectComponent,
ItTextareaComponent,
ItTransferComponent,
ItUploadDragDropComponent,
ItUploadFileListComponent], exports: [ItAutocompleteComponent,
ItCheckboxComponent,
ItInputComponent,
ItPasswordInputComponent,
ItRadioButtonComponent,
ItRangeComponent,
ItRatingComponent,
ItSelectComponent,
ItTextareaComponent,
ItTransferComponent,
ItUploadDragDropComponent,
ItUploadFileListComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [formComponents] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, decorators: [{
type: NgModule,
args: [{
imports: formComponents,
exports: formComponents,
}]
}] });
class ItBackButtonComponent {
constructor(_location) {
this._location = _location;
/**
* Back button style
* - <b>link</b>: use a link with icon and text
* - <b>button</b>: use a button with icon and text
* @default button
*/
this.buttonStyle = 'button';
/**
* Button direction
* - <b>left</b>: Back direction
* - <b>up</b>: Upper direction
* @default left
*/
this.direction = 'left';
/**
* Show/Hide icon
* @default true
*/
this.showIcon = true;
/**
* Show/Hide text
* @default true
*/
this.showText = true;
}
/**
* Go back function
*/
goBack(event) {
event.preventDefault();
if (this.backFn) {
return this.backFn(this._location);
}
this._location.back();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackButtonComponent, deps: [{ token: i1$3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBackButtonComponent, isStandalone: true, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: ["showIcon", "showIcon", inputToBoolean], showText: ["showText", "showText", inputToBoolean], backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "@if (buttonStyle === 'link') {\n <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n}\n\n@if (buttonStyle === 'button') {\n <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n}\n\n<ng-template #content>\n @if (showIcon) {\n <it-icon\n size=\"sm\"\n [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n [class.me-2]=\"showText\"></it-icon>\n }\n\n <span [class.visually-hidden]=\"!showText\">\n {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackButtonComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-back-button', exportAs: 'itBackButton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItButtonDirective, ItIconComponent, TranslateModule], template: "@if (buttonStyle === 'link') {\n <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n}\n\n@if (buttonStyle === 'button') {\n <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n}\n\n<ng-template #content>\n @if (showIcon) {\n <it-icon\n size=\"sm\"\n [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n [class.me-2]=\"showText\"></it-icon>\n }\n\n <span [class.visually-hidden]=\"!showText\">\n {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n </span>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i1$3.Location }], propDecorators: { buttonStyle: [{
type: Input
}], direction: [{
type: Input
}], showIcon: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], showText: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], backFn: [{
type: Input
}] } });
class ItBackToTopComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Aria label for the component
* @default 'Torna su'
*/
this.ariaLabel = 'Torna su';
}
ngAfterViewInit() {
super.ngAfterViewInit();
if (this.backToTopElement) {
const element = this.backToTopElement.nativeElement;
this.backToTop = BackToTop.getOrCreateInstance(element);
}
}
/**
* Show button
*/
show() {
this.backToTop?.show();
}
/**
* Hide the button
*/
hide() {
this.backToTop?.hide();
}
/**
* Activates the scroll animation towards the Y coordinate indicated by the positionTop option
*/
scrollToTop() {
this.backToTop?.scrollToTop();
}
/**
* Eliminate component features
*/
dispose() {
this.backToTop?.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItBackToTopComponent, isStandalone: true, selector: "it-back-to-top", inputs: { ariaLabel: "ariaLabel", small: ["small", "small", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a\n #backToTop\n [id]=\"id\"\n href=\"#\"\n [attr.aria-label]=\"ariaLabel\"\n class=\"back-to-top\"\n [class.back-to-top-small]=\"small\"\n [class.shadow]=\"shadow\"\n [class.dark]=\"dark\">\n <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ 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: ItBackToTopComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-back-to-top', exportAs: 'itBackToTop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent], template: "<a\n #backToTop\n [id]=\"id\"\n href=\"#\"\n [attr.aria-label]=\"ariaLabel\"\n class=\"back-to-top\"\n [class.back-to-top-small]=\"small\"\n [class.shadow]=\"shadow\"\n [class.dark]=\"dark\">\n <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n" }]
}], propDecorators: { ariaLabel: [{
type: Input
}], small: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], shadow: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], dark: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], backToTopElement: [{
type: ViewChild,
args: ['backToTop']
}] } });
class ItBreadcrumbItemComponent extends ItLinkComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItBreadcrumbItemComponent, isStandalone: true, selector: "it-breadcrumb-item", inputs: { active: ["active", "active", inputToBoolean], iconName: "iconName" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], propDecorators: { active: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], iconName: [{
type: Input
}], htmlContent: [{
type: ViewChild,
args: [TemplateRef]
}] } });
class ItBreadcrumbComponent {
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
/**
* The character to use as separator
* @default /
*/
this.separator = '/';
}
ngAfterViewInit() {
this.items?.changes
.pipe(
// When breadcrumb items changes (dynamic add/remove)
startWith(undefined))
.subscribe(() => {
this.itemSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
this.itemSubscriptions = this.items?.map(item => item.valueChanges.subscribe(() => {
this._changeDetectorRef.detectChanges(); // DetectChanges when breadcrumb item attributes changes
}));
this._changeDetectorRef.detectChanges(); // Force update html render
});
}
ngOnDestroy() {
this.itemSubscriptions?.forEach(item => item.unsubscribe());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBreadcrumbComponent, isStandalone: true, selector: "it-breadcrumb", inputs: { separator: "separator", dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItBreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n @if (items) {\n <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n @for (item of items; track item; let isLast = $last) {\n <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n @if (item.iconName) {\n <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n }\n @if (!item.active && !isLast) {\n <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </it-link>\n } @else {\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n }\n @if (!isLast) {\n <span class=\"separator\">{{ separator }}</span>\n }\n </li>\n }\n </ol>\n }\n</nav>\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"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { 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: ItBreadcrumbComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItLinkComponent, NgTemplateOutlet], template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n @if (items) {\n <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n @for (item of items; track item; let isLast = $last) {\n <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n @if (item.iconName) {\n <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n }\n @if (!item.active && !isLast) {\n <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </it-link>\n } @else {\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n }\n @if (!isLast) {\n <span class=\"separator\">{{ separator }}</span>\n }\n </li>\n }\n </ol>\n }\n</nav>\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { separator: [{
type: Input
}], dark: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], items: [{
type: ContentChildren,
args: [ItBreadcrumbItemComponent]
}] } });
const breadcrumb = [ItBreadcrumbComponent, ItBreadcrumbItemComponent];
class ItBreadcrumbsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent], exports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, decorators: [{
type: NgModule,
args: [{
imports: breadcrumb,
exports: breadcrumb,
}]
}] });
class ItNavBarComponent {
constructor() {
this.expand = true;
}
ngAfterViewInit() {
if (this.collapseButton && this.collapseView) {
this.navbar = NavBarCollapsible.getOrCreateInstance(this.collapseView.nativeElement);
}
}
get isOpen() {
return this.navbar?._isShown;
}
open() {
this.navbar?.show(this.collapseButton?.nativeElement);
}
close() {
this.navbar?.hide();
}
toggleCollapse() {
this.navbar?.toggle(this.collapseButton?.nativeElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItNavBarComponent, isStandalone: true, selector: "it-navbar", inputs: { megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, viewQueries: [{ propertyName: "collapseButton", first: true, predicate: ["collapseButton"], descendants: true }, { propertyName: "collapseView", first: true, predicate: ["collapseView"], descendants: true }], ngImport: i0, template: "<nav\n class=\"navbar\"\n [class.navbar-expand-lg]=\"expand\"\n [class.has-megamenu]=\"megamenu\"\n [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n <button\n (click)=\"toggleCollapse()\"\n #collapseButton\n class=\"custom-navbar-toggler\"\n type=\"button\"\n [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n <it-icon name=\"burger\"></it-icon>\n </button>\n <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n <div class=\"overlay\" style=\"display: none\"></div>\n <div class=\"close-div\">\n <button class=\"btn close-menu\" type=\"button\">\n <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n <it-icon name=\"close-big\"></it-icon>\n </button>\n </div>\n <div class=\"menu-wrapper\">\n <ul class=\"navbar-nav\">\n <ng-content select=\"[navItems]\"></ng-content>\n </ul>\n </div>\n </div>\n</nav>\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: ItNavBarComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective], template: "<nav\n class=\"navbar\"\n [class.navbar-expand-lg]=\"expand\"\n [class.has-megamenu]=\"megamenu\"\n [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n <button\n (click)=\"toggleCollapse()\"\n #collapseButton\n class=\"custom-navbar-toggler\"\n type=\"button\"\n [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n <it-icon name=\"burger\"></it-icon>\n </button>\n <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n <div class=\"overlay\" style=\"display: none\"></div>\n <div class=\"close-div\">\n <button class=\"btn close-menu\" type=\"button\">\n <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n <it-icon name=\"close-big\"></it-icon>\n </button>\n </div>\n <div class=\"menu-wrapper\">\n <ul class=\"navbar-nav\">\n <ng-content select=\"[navItems]\"></ng-content>\n </ul>\n </div>\n </div>\n</nav>\n" }]
}], propDecorators: { megamenu: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], expand: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], collapseButton: [{
type: ViewChild,
args: ['collapseButton']
}], collapseView: [{
type: ViewChild,
args: ['collapseView']
}] } });
class ItNavBarItemComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItNavBarItemComponent, isStandalone: true, selector: "it-navbar-item", ngImport: i0, template: "<li class=\"nav-item\">\n <ng-content></ng-content>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-navbar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<li class=\"nav-item\">\n <ng-content></ng-content>\n</li>\n" }]
}] });
const navbarComponents = [ItNavBarComponent, ItNavBarItemComponent];
class ItNavBarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent, ItNavBarItemComponent], exports: [ItNavBarComponent, ItNavBarItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, decorators: [{
type: NgModule,
args: [{
imports: navbarComponents,
exports: navbarComponents,
}]
}] });
class ItHeaderComponent {
constructor() {
this.showSlim = true;
this.smallHeader = true;
this.showSearch = true;
this.slimTitleLink = '#';
this.loginStyle = 'none';
this.expand = true;
this.loginClick = new EventEmitter();
this.searchClick = new EventEmitter();
}
ngAfterViewInit() {
this.updateListeners();
}
ngOnChanges(changes) {
if (changes['sticky'] && changes['sticky'].currentValue == true && !changes['sticky'].firstChange) {
this.updateListeners();
}
if (changes['sticky'] && changes['sticky'].currentValue == false) {
this.stickyHeader?._elementObj?._unsetSticky();
this.stickyHeader?._elementObj?.dispose();
delete this.stickyHeader;
this.stickyHeader = undefined;
}
}
updateListeners() {
if (!this.stickyHeader && this.headerWrapper && this.sticky) {
this.stickyHeader = new HeaderSticky(this.headerWrapper.nativeElement);
}
}
openNavBar() {
this.itNavBarComponent?.open();
}
closeNavBar() {
this.itNavBarComponent?.close();
}
emitLoginClick(event) {
event.preventDefault();
this.loginClick.emit(event);
}
emitSearchClick(event) {
event.preventDefault();
this.searchClick.emit(event);
}
toggleCollapse() {
this.itNavBarComponent?.toggleCollapse();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItHeaderComponent, isStandalone: true, selector: "it-header", inputs: { light: ["light", "light", inputToBoolean], sticky: ["sticky", "sticky", inputToBoolean], showSlim: ["showSlim", "showSlim", inputToBoolean], smallHeader: ["smallHeader", "smallHeader", inputToBoolean], showSearch: ["showSearch", "showSearch", inputToBoolean], slimTitle: "slimTitle", slimTitleLink: "slimTitleLink", loginStyle: "loginStyle", megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "itNavBarComponent", first: true, predicate: ItNavBarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header\n #headerWrapper\n class=\"it-header-wrapper\"\n [class.it-header-sticky]=\"sticky\"\n data-bs-position-type=\"fixed\"\n data-bs-sticky-class-name=\"is-sticky\"\n data-bs-target=\"#header-nav-wrapper\">\n @if (showSlim) {\n <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n <div class=\"container-xxl\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"it-header-slim-wrapper-content\">\n <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n {{ slimTitle }}\n </a>\n <div class=\"nav-mobile\">\n <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n <a\n class=\"it-opener d-lg-none\"\n data-bs-toggle=\"collapse\"\n href=\"#menuC1\"\n role=\"button\"\n aria-expanded=\"false\"\n aria-controls=\"menuC1\">\n <span>{{ slimTitle }}</span>\n <it-icon name=\"expand\"></it-icon>\n </a>\n <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n <ng-content select=\"[slimLinkList]\"></ng-content>\n </div>\n </nav>\n </div>\n <div class=\"it-header-slim-right-zone\">\n <ng-content select=\"[slimRightZone]\"></ng-content>\n @if (loginStyle === 'default') {\n <div class=\"it-access-top-wrapper\">\n <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n {{ 'it.navigation.login' | translate }}\n </a>\n </div>\n }\n @if (loginStyle === 'full') {\n <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n <span class=\"rounded-icon\">\n <it-icon name=\"user\" color=\"primary\"></it-icon>\n </span>\n <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"it-nav-wrapper\">\n <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"it-header-center-content-wrapper\">\n <div class=\"it-brand-wrapper\">\n <ng-content select=\"[brand]\"></ng-content>\n </div>\n <div class=\"it-right-zone\">\n <ng-content select=\"[rightZone]\"></ng-content>\n\n @if (showSearch) {\n <div class=\"it-search-wrapper\">\n <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n <a\n href=\"#\"\n class=\"search-link rounded-icon\"\n [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n (click)=\"emitSearchClick($event)\">\n <it-icon name=\"search\"></it-icon>\n </a>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12\">\n <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n <ng-container navItems>\n <ng-content select=\"[navItems]\"></ng-content>\n </ng-container>\n </it-navbar>\n </div>\n </div>\n </div>\n </div>\n </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper: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"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "ngmodule", type: ItNavBarModule }, { kind: "component", type: ItNavBarComponent, selector: "it-navbar", inputs: ["megamenu", "expand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItHeaderComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule], template: "<header\n #headerWrapper\n class=\"it-header-wrapper\"\n [class.it-header-sticky]=\"sticky\"\n data-bs-position-type=\"fixed\"\n data-bs-sticky-class-name=\"is-sticky\"\n data-bs-target=\"#header-nav-wrapper\">\n @if (showSlim) {\n <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n <div class=\"container-xxl\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"it-header-slim-wrapper-content\">\n <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n {{ slimTitle }}\n </a>\n <div class=\"nav-mobile\">\n <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n <a\n class=\"it-opener d-lg-none\"\n data-bs-toggle=\"collapse\"\n href=\"#menuC1\"\n role=\"button\"\n aria-expanded=\"false\"\n aria-controls=\"menuC1\">\n <span>{{ slimTitle }}</span>\n <it-icon name=\"expand\"></it-icon>\n </a>\n <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n <ng-content select=\"[slimLinkList]\"></ng-content>\n </div>\n </nav>\n </div>\n <div class=\"it-header-slim-right-zone\">\n <ng-content select=\"[slimRightZone]\"></ng-content>\n @if (loginStyle === 'default') {\n <div class=\"it-access-top-wrapper\">\n <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n {{ 'it.navigation.login' | translate }}\n </a>\n </div>\n }\n @if (loginStyle === 'full') {\n <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n <span class=\"rounded-icon\">\n <it-icon name=\"user\" color=\"primary\"></it-icon>\n </span>\n <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"it-nav-wrapper\">\n <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"it-header-center-content-wrapper\">\n <div class=\"it-brand-wrapper\">\n <ng-content select=\"[brand]\"></ng-content>\n </div>\n <div class=\"it-right-zone\">\n <ng-content select=\"[rightZone]\"></ng-content>\n\n @if (showSearch) {\n <div class=\"it-search-wrapper\">\n <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n <a\n href=\"#\"\n class=\"search-link rounded-icon\"\n [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n (click)=\"emitSearchClick($event)\">\n <it-icon name=\"search\"></it-icon>\n </a>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12\">\n <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n <ng-container navItems>\n <ng-content select=\"[navItems]\"></ng-content>\n </ng-container>\n </it-navbar>\n </div>\n </div>\n </div>\n </div>\n </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
}], ctorParameters: () => [], propDecorators: { light: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], sticky: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], showSlim: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], smallHeader: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], showSearch: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], slimTitle: [{
type: Input
}], slimTitleLink: [{
type: Input
}], loginStyle: [{
type: Input
}], loginClick: [{
type: Output
}], searchClick: [{
type: Output
}], headerWrapper: [{
type: ViewChild,
args: ['headerWrapper']
}], itNavBarComponent: [{
type: ViewChild,
args: [ItNavBarComponent]
}], megamenu: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], expand: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
class ItMegamenuComponent {
constructor() {
/**
* Megamenu mode
*/
this.mode = 'normal';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItMegamenuComponent, isStandalone: true, selector: "it-megamenu", inputs: { mode: "mode", header: ["header", "header", inputToBoolean], footer: ["footer", "footer", inputToBoolean] }, ngImport: i0, template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n <div class=\"row\">\n @if (mode === 'left-section') {\n <div class=\"col-xs-12 col-lg-4 px-0\">\n <div class=\"row\">\n <div class=\"col-12 it-vertical it-description pb-lg-3\">\n <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n @if (header) {\n <div class=\"it-heading-link-wrapper\">\n <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n </div>\n }\n <div class=\"row\">\n <ng-content select=\"[megamenuLinkList]\"></ng-content>\n </div>\n </div>\n @if (footer || mode === 'right-section') {\n <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n <ng-content select=\"[megamenuFooter]\"></ng-content>\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n <div class=\"row\">\n @if (mode === 'left-section') {\n <div class=\"col-xs-12 col-lg-4 px-0\">\n <div class=\"row\">\n <div class=\"col-12 it-vertical it-description pb-lg-3\">\n <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n @if (header) {\n <div class=\"it-heading-link-wrapper\">\n <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n </div>\n }\n <div class=\"row\">\n <ng-content select=\"[megamenuLinkList]\"></ng-content>\n </div>\n </div>\n @if (footer || mode === 'right-section') {\n <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n <ng-content select=\"[megamenuFooter]\"></ng-content>\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"] }]
}], propDecorators: { mode: [{
type: Input
}], header: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], footer: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
function searchFn(items, item) {
//ricerca
const nodes = Array.from(items);
const parent = nodes.find(i => i.childs.includes(item));
const ancestors = parent?.childs?.length ? searchFn(items, parent) : [];
return [item, ...ancestors];
}
function flattenNavscrollItemsFn(items) {
const result = [];
function flatten(items) {
for (const item of items) {
result.push(item);
if (item.childs && item.childs.length > 0) {
flatten(item.childs);
}
}
}
flatten(items);
return result;
}
const search = searchFn;
const flattenNavscrollItems = flattenNavscrollItemsFn;
class NavscrollStore {
constructor() {
this.#state = new BehaviorSubject({
items: new Set(),
active: [],
selected: undefined,
progressBar: 0,
isMobile: false,
});
this.#state$ = this.#state.asObservable();
this.selected = this.#state$.pipe(map(({ selected }) => selected), distinctUntilChanged());
this.progressBar = this.#state$.pipe(map(({ progressBar }) => progressBar), distinctUntilChanged());
this.isMobile = this.#state$.pipe(map(({ isMobile }) => isMobile), distinctUntilChanged());
this.#menuItemSelected = new Subject();
this.menuItemSelected = this.#menuItemSelected.asObservable();
}
#state;
#state$;
#menuItemSelected;
init(navscrollItems) {
const flattenItems = flattenNavscrollItems(navscrollItems);
//the first item is selected by default
const selected = (flattenItems && flattenItems.length && flattenItems[0]) ?? undefined;
const state = {
items: new Set(flattenItems),
active: selected ? [selected] : [],
selected: selected,
progressBar: 0,
isMobile: false,
};
this.#state.next(state);
}
setActive(item) {
const { items } = this.#state.value;
const active = search(items, item);
const state = this.#state.value;
this.#state.next({ ...state, items, selected: item, active });
}
isActive$(item) {
return this.#state.asObservable().pipe(map(state => state.active.includes(item)));
}
updateProgressBar(container) {
if (!container) {
return;
}
const offset = Math.abs(container.getBoundingClientRect().top);
const height = container.getBoundingClientRect().height;
const scrollAmount = (offset / height) * 100;
const scrollValue = Math.min(100, Math.max(0, scrollAmount));
const state = this.#state.value;
this.#state.next({
...state,
progressBar: container.getBoundingClientRect().y > 0 ? 0 : scrollValue,
});
}
selectMenuItem() {
this.#menuItemSelected.next(undefined);
}
setMobile({ innerWidth }) {
const isLessThan992px = innerWidth < 992;
const isMobile = isLessThan992px;
const state = this.#state.value;
this.#state.next({ ...state, isMobile });
}
}
const ROUTER_LINK_ACTIVE_OPTIONS = {
fragment: 'exact',
paths: 'exact',
queryParams: 'exact',
matrixParams: 'exact',
};
class ItNavscrollListItemComponent {
constructor() {
this.checkActive = new EventEmitter();
this.routerLinkActiveOptions = ROUTER_LINK_ACTIVE_OPTIONS;
this.#initIsActive = new AsyncSubject();
this.active = this.#initIsActive.asObservable().pipe(switchMap(item => this.#store.isActive$(item)));
this.#router = inject(Router);
this.#store = inject(NavscrollStore);
this.#destroyRef = inject(DestroyRef);
}
#initIsActive;
#router;
#store;
#destroyRef;
ngOnInit() {
this.#initIsActiveSub();
this.#router.events
.pipe(takeUntilDestroyed(this.#destroyRef), filter((event) => {
const isNavigationEndEvent = event instanceof NavigationEnd;
const isScrollEvent = event instanceof Scroll && event.routerEvent instanceof NavigationEnd;
return isNavigationEndEvent || isScrollEvent;
}), tap(() => {
if (this.rtl?.isActive) {
this.#store.setActive(this.item);
}
}))
.subscribe();
}
clickHandler(event) {
event.preventDefault();
this.#store.selectMenuItem();
this.#router.navigate([], { fragment: this.item.href });
}
#initIsActiveSub() {
this.#initIsActive.next(this.item);
this.#initIsActive.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItNavscrollListItemComponent, isStandalone: true, selector: "it-navscroll-list-item", inputs: { item: "item" }, outputs: { checkActive: "checkActive" }, viewQueries: [{ propertyName: "rtl", first: true, predicate: ["rtl"], descendants: true }], ngImport: i0, template: `
<a
class="nav-link"
[class.active]="active | async"
[routerLink]="[]"
routerLinkActive
[fragment]="item?.href"
[routerLinkActiveOptions]="routerLinkActiveOptions"
ariaCurrentWhenActive="page"
#rtl="routerLinkActive"
(click)="clickHandler($event)"
><span>{{ item?.title }}</span></a
>
`, isInline: true, 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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemComponent, decorators: [{
type: Component,
args: [{
selector: 'it-navscroll-list-item',
standalone: true,
imports: [RouterLink, RouterLinkActive, RouterLinkWithHref, ItNavscrollListItemsComponent, AsyncPipe],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<a
class="nav-link"
[class.active]="active | async"
[routerLink]="[]"
routerLinkActive
[fragment]="item?.href"
[routerLinkActiveOptions]="routerLinkActiveOptions"
ariaCurrentWhenActive="page"
#rtl="routerLinkActive"
(click)="clickHandler($event)"
><span>{{ item?.title }}</span></a
>
`,
}]
}], propDecorators: { item: [{
type: Input
}], checkActive: [{
type: Output
}], rtl: [{
type: ViewChild,
args: ['rtl']
}] } });
class ItNavscrollListItemsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItNavscrollListItemsComponent, isStandalone: true, selector: "it-navscroll-list-items", inputs: { items: "items" }, ngImport: i0, template: `
<ul class="link-list">
@for (item of items; track item.href) {
<li class="nav-item">
<it-navscroll-list-item [item]="item"></it-navscroll-list-item>
@if (item.childs?.length) {
<it-navscroll-list-items [items]="item.childs"></it-navscroll-list-items>
}
</li>
}
</ul>
`, isInline: true, dependencies: [{ kind: "component", type: ItNavscrollListItemsComponent, selector: "it-navscroll-list-items", inputs: ["items"] }, { kind: "component", type: ItNavscrollListItemComponent, selector: "it-navscroll-list-item", inputs: ["item"], outputs: ["checkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemsComponent, decorators: [{
type: Component,
args: [{
selector: 'it-navscroll-list-items',
standalone: true,
imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, RouterLinkWithHref, JsonPipe, ItNavscrollListItemComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ul class="link-list">
@for (item of items; track item.href) {
<li class="nav-item">
<it-navscroll-list-item [item]="item"></it-navscroll-list-item>
@if (item.childs?.length) {
<it-navscroll-list-items [items]="item.childs"></it-navscroll-list-items>
}
</li>
}
</ul>
`,
}]
}], propDecorators: { items: [{
type: Input
}] } });
/**
* Navscroll
* @description Show a list of links to anchor of the document.
*/
class ItNavscrollComponent {
onScroll() {
const sectionContainer = this.#elementRef.nativeElement.querySelector('.it-page-sections-container');
this.#store.updateProgressBar(sectionContainer);
}
onResize() {
this.#setMobile();
}
#store;
#scroller;
#destroyRef;
#elementRef;
constructor() {
/**
* Header of the Navscroll
*/
this.header = '';
/**
* Border position
* @default left
*/
this.borderPosition = 'left';
/**
* Alignment
* @default top
*/
this.alignment = 'top';
/**
* Theme
* @default light
*/
this.theme = 'light';
this.#store = inject(NavscrollStore);
this.#scroller = inject(ViewportScroller);
this.#destroyRef = inject(DestroyRef);
this.#elementRef = inject(ElementRef);
this.selectedTitle = this.#store.selected.pipe(map(selected => selected?.title ?? ''));
this.progressBarValue = this.#store.progressBar;
this.isMobile = this.#store.isMobile;
this.#store.menuItemSelected
.pipe(takeUntilDestroyed(), withLatestFrom(this.isMobile), tap(v => {
const isMobile = v[1];
if (isMobile) {
this.toggleButtonRef.nativeElement.click();
}
}))
.subscribe();
}
ngOnInit() {
this.#initViewScrollerSubscription();
this.#store.init(this.items);
this.#setMobile();
}
#initViewScrollerSubscription() {
this.#store.selected
.pipe(takeUntilDestroyed(this.#destroyRef), filter(selected => Boolean(selected)), map(v => v), delay(0), //WA
tap({
next: ({ href }) => {
this.#scroller.scrollToAnchor(href);
},
}))
.subscribe();
}
#setMobile() {
this.#store.setMobile(window);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItNavscrollComponent, isStandalone: true, selector: "it-navscroll", inputs: { header: "header", items: "items", borderPosition: "borderPosition", alignment: "alignment", theme: "theme", pageSectionsTemplate: "pageSectionsTemplate" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, providers: [NavscrollStore], viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButtonRef"], descendants: true }], ngImport: i0, template: "<div class=\"container py-lg-5\">\n <div class=\"row\">\n <div class=\"col-12 col-lg-4\">\n <div class=\"it-navscroll-sticky\" [ngClass]=\"{ 'it-navscroll-sticky-mobile': isMobile | async }\" data-bs-stackable=\"true\">\n <nav\n class=\"navbar it-navscroll-wrapper navbar-expand-lg\"\n [class.it-top-navscroll]=\"alignment === 'top'\"\n [class.it-bottom-navscroll]=\"alignment === 'bottom'\"\n [class.it-left-side]=\"borderPosition === 'left'\"\n [class.it-right-side]=\"borderPosition === 'right'\"\n [class.theme-dark-mobile]=\"theme === 'dark'\"\n [class.theme-dark-desktop]=\"theme === 'dark'\">\n <button\n class=\"custom-navbar-toggler\"\n type=\"button\"\n aria-controls=\"navbarNav\"\n aria-expanded=\"false\"\n aria-label=\"Toggle navigation\"\n data-bs-toggle=\"navbarcollapsible\"\n data-bs-target=\"#navbarNav\"\n #toggleButtonRef>\n <span class=\"it-list\"></span>{{ selectedTitle | async }}\n </button>\n <div class=\"progress custom-navbar-progressbar\">\n <div\n class=\"progress-bar it-navscroll-progressbar\"\n role=\"progressbar\"\n [style.width.%]=\"progressBarValue | async\"\n [attr.aria-valuenow]=\"progressBarValue | async\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n </div>\n <div class=\"navbar-collapsable\" id=\"navbarNav\">\n <div class=\"overlay\"></div>\n <div class=\"close-div visually-hidden\">\n <button class=\"btn close-menu\" type=\"button\"><span class=\"it-close\"></span>Chiudi</button>\n </div>\n <button type=\"button\" class=\"it-back-button btn w-100 text-start\">\n <svg class=\"icon icon-sm icon-primary align-top\">\n <use\n href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"\n xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"></use>\n </svg>\n <span>Indietro</span>\n </button>\n <div class=\"menu-wrapper\">\n <div class=\"link-list-wrapper\">\n <h3>{{ header }}</h3>\n <div class=\"progress\">\n <div\n class=\"progress-bar it-navscroll-progressbar\"\n role=\"progressbar\"\n [style.width.%]=\"progressBarValue | async\"\n [attr.aria-valuenow]=\"progressBarValue | async\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n </div>\n <it-navscroll-list-items [items]=\"items\"></it-navscroll-list-items>\n </div>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"col-12 col-lg-8 it-page-sections-container\">\n <ng-container\n *ngTemplateOutlet=\"pageSectionsTemplate ? pageSectionsTemplate : defaultPageSectionsTemplate; context: { items: items }\">\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #defaultPageSectionsTemplate let-items=\"items\">\n @for (item of items; track item.href) {\n <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: 1 }\"></ng-container>\n }\n</ng-template>\n\n<ng-template #paragraphTemplate let-item=\"item\" let-level=\"level\" let-nextLevel=\"level+1\">\n @switch (level) {\n @case (1) {\n <h2 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h2>\n }\n @case (2) {\n <h3 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h3>\n }\n @case (3) {\n <h4 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h4>\n }\n @case (4) {\n <h5 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h5>\n }\n @default {\n <h6 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h6>\n }\n }\n <p>{{ item.text }}</p>\n @for (item of item.childs; track item.href) {\n <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: nextLevel }\"></ng-container>\n }\n</ng-template>\n", styles: [".it-navscroll-sticky{position:sticky;top:0}.it-navscroll-sticky-mobile{z-index:1020}\n"], dependencies: [{ kind: "component", type: ItNavscrollListItemsComponent, selector: "it-navscroll-list-items", inputs: ["items"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollComponent, decorators: [{
type: Component,
args: [{ selector: 'it-navscroll', standalone: true, imports: [
ItNavscrollListItemsComponent,
AsyncPipe,
NgTemplateOutlet,
RouterLink,
RouterLinkActive,
RouterLinkWithHref,
AsyncPipe,
NgClass,
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NavscrollStore], template: "<div class=\"container py-lg-5\">\n <div class=\"row\">\n <div class=\"col-12 col-lg-4\">\n <div class=\"it-navscroll-sticky\" [ngClass]=\"{ 'it-navscroll-sticky-mobile': isMobile | async }\" data-bs-stackable=\"true\">\n <nav\n class=\"navbar it-navscroll-wrapper navbar-expand-lg\"\n [class.it-top-navscroll]=\"alignment === 'top'\"\n [class.it-bottom-navscroll]=\"alignment === 'bottom'\"\n [class.it-left-side]=\"borderPosition === 'left'\"\n [class.it-right-side]=\"borderPosition === 'right'\"\n [class.theme-dark-mobile]=\"theme === 'dark'\"\n [class.theme-dark-desktop]=\"theme === 'dark'\">\n <button\n class=\"custom-navbar-toggler\"\n type=\"button\"\n aria-controls=\"navbarNav\"\n aria-expanded=\"false\"\n aria-label=\"Toggle navigation\"\n data-bs-toggle=\"navbarcollapsible\"\n data-bs-target=\"#navbarNav\"\n #toggleButtonRef>\n <span class=\"it-list\"></span>{{ selectedTitle | async }}\n </button>\n <div class=\"progress custom-navbar-progressbar\">\n <div\n class=\"progress-bar it-navscroll-progressbar\"\n role=\"progressbar\"\n [style.width.%]=\"progressBarValue | async\"\n [attr.aria-valuenow]=\"progressBarValue | async\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n </div>\n <div class=\"navbar-collapsable\" id=\"navbarNav\">\n <div class=\"overlay\"></div>\n <div class=\"close-div visually-hidden\">\n <button class=\"btn close-menu\" type=\"button\"><span class=\"it-close\"></span>Chiudi</button>\n </div>\n <button type=\"button\" class=\"it-back-button btn w-100 text-start\">\n <svg class=\"icon icon-sm icon-primary align-top\">\n <use\n href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"\n xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"></use>\n </svg>\n <span>Indietro</span>\n </button>\n <div class=\"menu-wrapper\">\n <div class=\"link-list-wrapper\">\n <h3>{{ header }}</h3>\n <div class=\"progress\">\n <div\n class=\"progress-bar it-navscroll-progressbar\"\n role=\"progressbar\"\n [style.width.%]=\"progressBarValue | async\"\n [attr.aria-valuenow]=\"progressBarValue | async\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n </div>\n <it-navscroll-list-items [items]=\"items\"></it-navscroll-list-items>\n </div>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"col-12 col-lg-8 it-page-sections-container\">\n <ng-container\n *ngTemplateOutlet=\"pageSectionsTemplate ? pageSectionsTemplate : defaultPageSectionsTemplate; context: { items: items }\">\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #defaultPageSectionsTemplate let-items=\"items\">\n @for (item of items; track item.href) {\n <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: 1 }\"></ng-container>\n }\n</ng-template>\n\n<ng-template #paragraphTemplate let-item=\"item\" let-level=\"level\" let-nextLevel=\"level+1\">\n @switch (level) {\n @case (1) {\n <h2 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h2>\n }\n @case (2) {\n <h3 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h3>\n }\n @case (3) {\n <h4 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h4>\n }\n @case (4) {\n <h5 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h5>\n }\n @default {\n <h6 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h6>\n }\n }\n <p>{{ item.text }}</p>\n @for (item of item.childs; track item.href) {\n <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: nextLevel }\"></ng-container>\n }\n</ng-template>\n", styles: [".it-navscroll-sticky{position:sticky;top:0}.it-navscroll-sticky-mobile{z-index:1020}\n"] }]
}], ctorParameters: () => [], propDecorators: { header: [{
type: Input
}], items: [{
type: Input
}], borderPosition: [{
type: Input
}], alignment: [{
type: Input
}], theme: [{
type: Input
}], pageSectionsTemplate: [{
type: Input
}], onScroll: [{
type: HostListener,
args: ['window:scroll', ['$event']]
}], onResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}], toggleButtonRef: [{
type: ViewChild,
args: ['toggleButtonRef']
}] } });
class ItSidebarComponent {
constructor() {
/**
* Per creare una sidebar con linea separatrice a destra è sufficiente aggiungere la classe
*/
this.withRightLine = false;
/**
* Per creare una sidebar con linea separatrice a sinistra è sufficiente aggiungere la classe
*/
this.withLeftLine = false;
/**
* Per cambiare il tema della sidebar e renderla scura
*/
this.dark = false;
this.componentClass = 'd-block sidebar-wrapper';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSidebarComponent, isStandalone: true, selector: "it-sidebar", inputs: { withRightLine: ["withRightLine", "withRightLine", inputToBoolean], withLeftLine: ["withLeftLine", "withLeftLine", inputToBoolean], dark: ["dark", "dark", inputToBoolean], header: "header" }, host: { properties: { "class.it-line-right-side": "this.withRightLine", "class.it-line-left-side": "this.withLeftLine", "class.theme-dark": "this.dark", "class": "this.componentClass" } }, ngImport: i0, template: "@if (header) {\n <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n <ng-content select=\"[secondary]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSidebarComponent, decorators: [{
type: Component,
args: [{ selector: 'it-sidebar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (header) {\n <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n <ng-content select=\"[secondary]\"></ng-content>\n</div>\n" }]
}], propDecorators: { withRightLine: [{
type: Input,
args: [{ transform: inputToBoolean }]
}, {
type: HostBinding,
args: ['class.it-line-right-side']
}], withLeftLine: [{
type: Input,
args: [{ transform: inputToBoolean }]
}, {
type: HostBinding,
args: ['class.it-line-left-side']
}], dark: [{
type: Input,
args: [{ transform: inputToBoolean }]
}, {
type: HostBinding,
args: ['class.theme-dark']
}], header: [{
type: Input
}], componentClass: [{
type: HostBinding,
args: ['class']
}] } });
class ItErrorPageComponent {
constructor(route) {
this.route = route;
/**
* Show/Hide error code
* @default true - show
*/
this.showErrorCode = true;
/**
* Show/Hide back button
* @default true - show
*/
this.showBackButton = true;
/**
* Show/Hide home button
* @default true - show
*/
this.showHomeButton = true;
this.route.data.subscribe(data => {
if (!this.errorCode && data['errorCode']) {
this.errorCode = data['errorCode']; // Get errorCode from route data
}
if (data['showErrorCode'] !== undefined) {
this.showErrorCode = data['showErrorCode']; // Get showErrorCode from route data
}
if (!this.errorTitle && data['errorTitle']) {
this.errorTitle = data['errorTitle']; // Get errorTitle from route data
}
if (!this.errorDescription && data['errorDescription']) {
this.errorDescription = data['errorDescription']; // Get errorDescription from route data
}
if (data['showBackButton'] !== undefined) {
this.showBackButton = data['showBackButton']; // Get showBackButton from route data
}
if (data['showHomeButton'] !== undefined) {
this.showHomeButton = data['showHomeButton']; // Get showHomeButton from route data
}
});
}
get isDefaultErrorCode() {
return this.errorCode === 404 || this.errorCode === 403 || this.errorCode === 500;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItErrorPageComponent, deps: [{ token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n @if (errorCode && showErrorCode) {\n <h1>{{ errorCode }}</h1>\n }\n <h2>\n @if (!errorTitle && isDefaultErrorCode) {\n {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n } @else {\n {{ errorTitle || 'it.errors.generic' | translate }}\n }\n </h2>\n\n <p class=\"mt-3 w-75 mx-auto\">\n @if (!errorDescription && isDefaultErrorCode) {\n {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n } @else {\n {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n }\n </p>\n\n @if (showBackButton || showHomeButton) {\n <div class=\"mt-5\">\n @if (showBackButton) {\n <it-back-button></it-back-button>\n }\n @if (showHomeButton) {\n <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n {{ 'it.utils.error-page.go-to-homepage' | translate }}\n </a>\n }\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItErrorPageComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-error-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RouterLink, ItBackButtonComponent, ItButtonDirective], template: "<div class=\"container text-center mt-5\">\n @if (errorCode && showErrorCode) {\n <h1>{{ errorCode }}</h1>\n }\n <h2>\n @if (!errorTitle && isDefaultErrorCode) {\n {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n } @else {\n {{ errorTitle || 'it.errors.generic' | translate }}\n }\n </h2>\n\n <p class=\"mt-3 w-75 mx-auto\">\n @if (!errorDescription && isDefaultErrorCode) {\n {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n } @else {\n {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n }\n </p>\n\n @if (showBackButton || showHomeButton) {\n <div class=\"mt-5\">\n @if (showBackButton) {\n <it-back-button></it-back-button>\n }\n @if (showHomeButton) {\n <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n {{ 'it.utils.error-page.go-to-homepage' | translate }}\n </a>\n }\n </div>\n }\n</div>\n" }]
}], ctorParameters: () => [{ type: i1$4.ActivatedRoute }], propDecorators: { errorCode: [{
type: Input
}], showErrorCode: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], errorTitle: [{
type: Input
}], errorDescription: [{
type: Input
}], showBackButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], showHomeButton: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
class ItLanguageSwitcherComponent {
constructor(translateService) {
this.translateService = translateService;
/**
* Dropdown mode
*/
this.mode = 'link';
this.currentLang$ = this.translateService.onLangChange.pipe(startWith({ lang: translateService.currentLang }), map(event => this.availableLanguages?.find(l => l.code === event.lang)));
}
ngOnInit() {
if (!this.availableLanguages) {
this.availableLanguages = this.translateService.getLangs().map(lang => ({
code: lang,
label: lang,
...(lang === 'it' && { label: 'ITA' }),
...(lang === 'en' && { label: 'ENG' }),
}));
}
else {
this.translateService.addLangs(this.availableLanguages.map(l => l.code)); // Adds custom languages
}
}
/**
* Change the current language
* @param lang the language code
*/
changeLanguage(lang) {
this.translateService.use(lang);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n <ng-container button>\n <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n </ng-container>\n\n @if (availableLanguages) {\n <ng-container list>\n @for (lang of availableLanguages; track lang.code) {\n <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n {{ lang.label }}\n @if (lang.code === (currentLang$ | async)?.code) {\n <span class=\"visually-hidden\">\n {{ 'it.utils.selected' | translate }}\n </span>\n }\n </it-dropdown-item>\n }\n </ng-container>\n }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateModule, ItDropdownModule], template: "<it-dropdown [mode]=\"mode\">\n <ng-container button>\n <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n </ng-container>\n\n @if (availableLanguages) {\n <ng-container list>\n @for (lang of availableLanguages; track lang.code) {\n <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n {{ lang.label }}\n @if (lang.code === (currentLang$ | async)?.code) {\n <span class=\"visually-hidden\">\n {{ 'it.utils.selected' | translate }}\n </span>\n }\n </it-dropdown-item>\n }\n </ng-container>\n }\n</it-dropdown>\n" }]
}], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { availableLanguages: [{
type: Input
}], mode: [{
type: Input
}] } });
/**
* Indicates in a textual way how much time has passed since the indicated date
* @example 2 hours ago
*/
class ItDateAgoPipe extends TranslatePipe {
/**
* Indicates in a textual way how much time has passed since the indicated date
* @example 2 hours ago
* @param value the Date or date string
*/
transform(value) {
if (!value) {
return '';
}
const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
if (isNaN(seconds)) {
return '';
}
// less than 30 seconds ago will show as 'Just now'
if (seconds < 29) {
return super.transform('it.date-ago-pipe.just-now');
}
const intervals = new Map([
['year', 31536000],
['month', 2592000],
['week', 604800],
['day', 86400],
['hour', 3600],
['minute', 60],
['second', 1],
]);
for (const interval of intervals) {
const counter = Math.floor(seconds / interval[1]);
if (counter > 0) {
return super.transform(`it.date-ago-pipe.${counter === 1 ? 'singular-' : ''}${interval[0]}-ago`, {
count: counter,
});
}
}
return '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, isStandalone: true, name: "itDateAgo", pure: false }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, decorators: [{
type: Pipe,
args: [{
name: 'itDateAgo',
pure: false,
standalone: true,
}]
}] });
/**
* Transform a number into a duration.
* Is necessary indicate the value expressed by the number, for example 'day'.
* @example
* - 1, 'day' -> 1 day
* - 5, 'day' -> 5 days
* - 7, 'day' -> 1 week
* - 365, 'day' -> 1 year
* - 2, 'week' -> 2 weeks
* ...
*/
class ItDurationPipe extends TranslatePipe {
/**
* Transform a number into a duration.
* Is necessary indicate the value expressed by the number, for example 'day'.
* @example
* - 1, 'day' -> 1 day
* - 5, 'day' -> 5 days
* - 7, 'day' -> 1 week
* - 8, 'day' -> 1 week
* - 365, 'day' -> 1 year
* - 2, 'week' -> 2 weeks
* - 24, 'month' -> 1 year
* ...
* @param value the number
* @param type the number expressed type
*/
transform(value, type) {
let valueAdjust = Number(value);
if (isNaN(valueAdjust)) {
return '';
}
switch (type) {
// eslint-disable-next-line no-fallthrough,@typescript-eslint/ban-ts-comment
// @ts-ignore
case 'second':
if (valueAdjust < 60) {
return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
count: valueAdjust,
});
}
valueAdjust = Math.round(valueAdjust / 60);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line no-fallthrough
case 'minute':
if (valueAdjust < 60) {
return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
count: valueAdjust,
});
}
valueAdjust = Math.round(valueAdjust / 60);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line no-fallthrough
case 'hour':
if (valueAdjust < 24) {
return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
count: valueAdjust,
});
}
valueAdjust = Math.round(valueAdjust / 24);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line no-fallthrough
case 'day':
if (valueAdjust < 7) {
return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
count: valueAdjust,
});
}
valueAdjust = Math.round(valueAdjust / 7);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line no-fallthrough
case 'week':
if (valueAdjust < 5) {
return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
count: valueAdjust,
});
}
valueAdjust = Math.round(valueAdjust / 5);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line no-fallthrough
case 'month':
if (valueAdjust < 24) {
return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
count: valueAdjust,
});
}
valueAdjust = Math.round(valueAdjust / 24);
// eslint-disable-next-line no-fallthrough
case 'year':
return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
count: valueAdjust,
});
default:
return '';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, isStandalone: true, name: "itDuration" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, decorators: [{
type: Pipe,
args: [{
name: 'itDuration',
standalone: true,
}]
}] });
class ItSkiplinkComponent {
constructor() {
/**
* Aria label for `nav` mode
* @default 'Scorciatoie di navigazione'
*/
this.ariaLabel = 'Scorciatoie di navigazione';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSkiplinkComponent, isStandalone: true, selector: "it-skiplink", inputs: { ariaLabel: "ariaLabel", nav: ["nav", "nav", inputToBoolean] }, exportAs: ["itSkipLink"], ngImport: i0, template: "@if (nav) {\n <nav class=\"skiplinks\">\n <ul>\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </ul>\n </nav>\n} @else {\n <div class=\"skiplinks\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </div>\n}\n\n<ng-template #linkContent>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-skiplink', exportAs: 'itSkipLink', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (nav) {\n <nav class=\"skiplinks\">\n <ul>\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </ul>\n </nav>\n} @else {\n <div class=\"skiplinks\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </div>\n}\n\n<ng-template #linkContent>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], propDecorators: { ariaLabel: [{
type: Input
}], nav: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
class ItSkiplinkItemComponent {
constructor(parent) {
this.inNav = parent.nav ? true : false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkItemComponent, deps: [{ token: ItSkiplinkComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSkiplinkItemComponent, isStandalone: true, selector: "it-skiplink-item", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean] }, exportAs: ["itSkipLinkItem"], ngImport: i0, template: "@if (inNav) {\n <li class=\"visually-hidden-focusable\">\n <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </it-link>\n </li>\n} @else {\n <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </it-link>\n}\n\n<ng-template #linkContent>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { 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: ItSkiplinkItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-skiplink-item', exportAs: 'itSkipLinkItem', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (inNav) {\n <li class=\"visually-hidden-focusable\">\n <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </it-link>\n </li>\n} @else {\n <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </it-link>\n}\n\n<ng-template #linkContent>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: ItSkiplinkComponent, decorators: [{
type: Host
}] }], propDecorators: { href: [{
type: Input
}], externalLink: [{
type: Input,
args: [{ transform: inputToBoolean }]
}] } });
const skiplinkComponents = [ItSkiplinkComponent, ItSkiplinkItemComponent];
class ItSkiplinkModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, imports: [ItSkiplinkComponent, ItSkiplinkItemComponent], exports: [ItSkiplinkComponent, ItSkiplinkItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, imports: [skiplinkComponents] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, decorators: [{
type: NgModule,
args: [{
imports: skiplinkComponents,
exports: skiplinkComponents,
}]
}] });
/**
* Configures DesignAngularKit library
* @param config the DesignAngularKit config
*/
function provideDesignAngularKit(config) {
let assetBasePath = './bootstrap-italia';
if (config?.assetBasePath) {
assetBasePath = config.assetBasePath.endsWith('/')
? config.assetBasePath.substring(0, config.assetBasePath.lastIndexOf('/'))
: config.assetBasePath;
}
const providers = [
{
provide: IT_ASSET_BASE_PATH,
useValue: assetBasePath,
},
provideAnimationsAsync(),
provideHttpClient(),
];
if (config?.loadFont !== false) {
// Add provider to initialize the bootstrap-italia font
providers.push({
provide: APP_INITIALIZER,
useFactory: () => {
return () => {
loadFonts(`${assetBasePath}/dist/fonts`);
};
},
multi: true,
});
}
// Add provider to initialize the TranslateModule
const langPrefix = `${assetBasePath}/i18n/`;
const langSuffix = `.json`; // TODO: add ?v${version} to prevent cache loading on version change
providers.push(importProvidersFrom(TranslateModule.forRoot({
loader: config?.translateLoader?.(langPrefix, langSuffix) ?? {
provide: TranslateLoader,
useFactory: (http) => new TranslateHttpLoader(http, langPrefix, langSuffix),
deps: [HttpClient],
},
defaultLanguage: 'it',
useDefaultLang: true,
})));
// Add provider to initialize library default languages
providers.push({
provide: APP_INITIALIZER,
useFactory: (translateService) => {
return () => {
translateService.addLangs(['it', 'en']); // Adds 'it' and 'en' as available languages.
};
},
multi: true,
deps: [TranslateService],
});
return makeEnvironmentProviders(providers);
}
/**
* Core components
*/
const core = [
ItAccordionComponent,
ItAlertComponent,
ItAvatarModule,
ItBadgeDirective,
ItButtonDirective,
ItCalloutComponent,
ItCardComponent,
ItCarouselModule,
ItChipComponent,
ItCollapseComponent,
ItDimmerModule,
ItDropdownModule,
ItForwardDirective,
ItLinkComponent,
ItListModule,
ItModalComponent,
ItNotificationsComponent,
ItPaginationComponent,
ItPopoverDirective,
ItProgressBarComponent,
ItProgressButtonComponent,
ItSpinnerComponent,
ItSteppersModule,
ItTabModule,
ItTableModule,
ItTooltipDirective,
ItTimelineModule,
];
/**
* Navigation Components
*/
const navigation = [
ItBackButtonComponent,
ItBackToTopComponent,
ItBreadcrumbsModule,
ItHeaderComponent,
ItNavBarModule,
ItSidebarComponent,
ItMegamenuComponent,
ItSkiplinkModule,
ItNavscrollComponent,
];
/**
* Utils components
*/
const utils = [ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent];
/**
* Library pipes
*/
const pipes = [ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe];
const components = [
...core, // Core components
ItFormModule, // Form components
...navigation, // Navigation Components
...utils, // Utils components
...pipes, // Library pipes
];
class DesignAngularKitModule {
static forRoot(config) {
return {
ngModule: DesignAngularKitModule,
providers: [provideDesignAngularKit(config)],
};
}
static forChild() {
return {
ngModule: DesignAngularKitModule,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, imports: [ItAccordionComponent,
ItAlertComponent,
ItAvatarModule,
ItBadgeDirective,
ItButtonDirective,
ItCalloutComponent,
ItCardComponent,
ItCarouselModule,
ItChipComponent,
ItCollapseComponent,
ItDimmerModule,
ItDropdownModule,
ItForwardDirective,
ItLinkComponent,
ItListModule,
ItModalComponent,
ItNotificationsComponent,
ItPaginationComponent,
ItPopoverDirective,
ItProgressBarComponent,
ItProgressButtonComponent,
ItSpinnerComponent,
ItSteppersModule,
ItTabModule,
ItTableModule,
ItTooltipDirective,
ItTimelineModule, // Core components
ItFormModule, ItBackButtonComponent,
ItBackToTopComponent,
ItBreadcrumbsModule,
ItHeaderComponent,
ItNavBarModule,
ItSidebarComponent,
ItMegamenuComponent,
ItSkiplinkModule,
ItNavscrollComponent, ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent, ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe], exports: [ItAccordionComponent,
ItAlertComponent,
ItAvatarModule,
ItBadgeDirective,
ItButtonDirective,
ItCalloutComponent,
ItCardComponent,
ItCarouselModule,
ItChipComponent,
ItCollapseComponent,
ItDimmerModule,
ItDropdownModule,
ItForwardDirective,
ItLinkComponent,
ItListModule,
ItModalComponent,
ItNotificationsComponent,
ItPaginationComponent,
ItPopoverDirective,
ItProgressBarComponent,
ItProgressButtonComponent,
ItSpinnerComponent,
ItSteppersModule,
ItTabModule,
ItTableModule,
ItTooltipDirective,
ItTimelineModule, // Core components
ItFormModule, ItBackButtonComponent,
ItBackToTopComponent,
ItBreadcrumbsModule,
ItHeaderComponent,
ItNavBarModule,
ItSidebarComponent,
ItMegamenuComponent,
ItSkiplinkModule,
ItNavscrollComponent, ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent, ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, imports: [ItAlertComponent,
ItAvatarModule,
ItCarouselModule,
ItChipComponent,
ItDimmerModule,
ItDropdownModule,
ItListModule,
ItModalComponent,
ItNotificationsComponent,
ItPaginationComponent,
ItProgressBarComponent,
ItProgressButtonComponent,
ItSpinnerComponent,
ItSteppersModule,
ItTabModule,
ItTableModule,
ItTimelineModule, // Core components
ItFormModule, ItBackButtonComponent,
ItBreadcrumbsModule,
ItHeaderComponent,
ItNavBarModule,
ItSkiplinkModule, ItErrorPageComponent, ItLanguageSwitcherComponent, ItAvatarModule,
ItCarouselModule,
ItDimmerModule,
ItDropdownModule,
ItListModule,
ItSteppersModule,
ItTabModule,
ItTableModule,
ItTimelineModule, // Core components
ItFormModule, ItBreadcrumbsModule,
ItNavBarModule,
ItSkiplinkModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, decorators: [{
type: NgModule,
args: [{
imports: components,
exports: components,
}]
}] });
//Qs
//Aria hidden?
//state management with service?
//interface?
const IconNameArray = [
'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',
'bookmark',
'box',
'burger',
'calendar',
'camera',
'card',
'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',
'software',
'star-full',
'star-outline',
'telephone',
'tool',
'unlocked',
'upload',
'user',
'video',
'warning',
'warning-circle',
'wifi',
'zoom-in',
'zoom-out',
// Files
'file',
'files',
'file-audio',
'file-compressed',
'file-csv',
'file-json',
'file-odp',
'file-ods',
'file-odt',
'file-pdf',
'file-pdf-ext',
'file-sheet',
'file-slides',
'file-ppt',
'file-txt',
'file-video',
'file-xml',
// Platforms
'behance',
'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',
// Extra
'designers-italia',
'team-digitale',
];
class ItDateUtils {
/**
* Add seconds to date
* @param date the date
* @param seconds seconds to add
*/
static addSeconds(date, seconds) {
const newDate = new Date(date.valueOf());
newDate.setSeconds(date.getSeconds() + seconds);
return newDate;
}
/**
* Add minutes to date
* @param date the date
* @param minutes minutes to add
*/
static addMinutes(date, minutes) {
const newDate = new Date(date.valueOf());
newDate.setMinutes(date.getMinutes() + minutes);
return newDate;
}
/**
* Add hours to date
* @param date the date
* @param hours hours to add
*/
static addHours(date, hours) {
const newDate = new Date(date.valueOf());
newDate.setHours(date.getHours() + hours);
return newDate;
}
/**
* Add days to date
* @param date the date
* @param days days to add
*/
static addDays(date, days) {
const newDate = new Date(date.valueOf());
newDate.setDate(date.getDate() + days);
return newDate;
}
/**
* Add years to date
* @param date the date
* @param months months to add
*/
static addMonths(date, months) {
const newDate = new Date(date.valueOf());
newDate.setMonth(date.getMonth() + months);
return newDate;
}
/**
* Add years to date
* @param date the date
* @param years years to add
*/
static addYears(date, years) {
const newDate = new Date(date.valueOf());
newDate.setFullYear(date.getFullYear() + years);
return newDate;
}
/**
* Calculate number of days between two date
* @param startDate
* @param endDate
* @param absolute return unsigned result
*/
static countDays(startDate, endDate, absolute = false) {
const differenceInTime = endDate.getTime() - startDate.getTime();
const diff = absolute ? Math.abs(differenceInTime) : differenceInTime;
return Math.ceil(diff / (1000 * 3600 * 24));
}
/**
* Check if string is a date with iso format
* @param value the string
*/
static isIsoString(value) {
if (!value || !/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(value)) {
return false;
}
const d = new Date(value);
return !!d && !isNaN(d.getTime()) && d.toISOString() === value;
}
/**
* Convert iso string to Date
* @param isoString the iso string
*/
static isoStringToDate(isoString) {
return isoString ? new Date(Date.parse(isoString)) : null;
}
/**
* Remove time from an iso date string
* @param isoString the iso string
*/
static isoStringRemoveTime(isoString) {
let date = ItDateUtils.isoStringToDate(isoString);
if (!date) {
return isoString;
}
const offset = date.getTimezoneOffset();
date = new Date(date.getTime() - offset * 60 * 1000);
return date.toISOString().substring(0, isoString.indexOf('T'));
}
/**
* Set iso string hours to 0 and format correctly the date (consider timezone offset)
* @example '2024-03-04T23:00:00.000Z' -> '2024-03-05T00:00:00.000Z'
* @param isoString the iso string
*/
static isoStringSetZeroTime(isoString) {
let date = ItDateUtils.isoStringToDate(isoString);
if (!date) {
return isoString;
}
const offset = date.getTimezoneOffset();
date = new Date(date.getTime() - offset * 60 * 1000);
date.setUTCHours(0, 0, 0, 0);
return date.toISOString();
}
/**
* Calculate the date time left and return the string format [d h m s]
* @param endDate
*/
static timeLeftString(endDate) {
const endTime = endDate.getTime();
return timer(0, 1000).pipe(map$1(() => Math.floor((endTime - new Date().getTime()) / 1000)), takeWhile(delta => delta >= 0), map$1(delta => {
const arrayResult = [];
const days = Math.floor(delta / 60 / 60 / 24);
if (days > 0) {
arrayResult.push(days + 'd');
}
delta -= days * 60 * 60 * 24;
const hours = Math.floor(delta / 60 / 60) % 24;
if (hours > 0) {
arrayResult.push(hours + 'h');
}
delta -= hours * 60 * 60;
const minutes = Math.floor(delta / 60) % 60;
arrayResult.push(minutes + 'm');
delta -= minutes * 60;
const seconds = delta % 60;
arrayResult.push(seconds + 's');
return arrayResult.join(' ');
}), shareReplay(1));
}
/**
* Calculate the next day of week
* @param dayOfWeek Day of week 0=Sunday, 1=Monday...4=Thursday...
* @param hour the specif hour
* @param minute the specific minute
*/
static nextWeekDayAndTime(dayOfWeek, hour = 0, minute = 0) {
const now = new Date();
const result = new Date(now.getFullYear(), now.getMonth(), now.getDate() + ((7 + dayOfWeek - now.getDay()) % 7), hour, minute, 0, 0);
if (result < now) {
result.setDate(result.getDate() + 7);
}
return result;
}
}
/*
* Public API Surface of design-angular-kit
*/
/**
* Generated bundle index. Do not edit.
*/
export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNavscrollComponent, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSidebarComponent, ItSkiplinkComponent, ItSkiplinkItemComponent, ItSkiplinkModule, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTimelineComponent, ItTimelineItemComponent, ItTimelineModule, ItTooltipDirective, ItTransferComponent, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, PLATE_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
//# sourceMappingURL=design-angular-kit.mjs.map