design-angular-kit 1.0.0-16 → 1.0.0-18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -6
- package/assets/i18n/en.json +4 -1
- package/assets/i18n/it.json +4 -1
- package/esm2022/lib/abstracts/abstract-form.component.mjs +186 -0
- package/esm2022/lib/abstracts/abstract.component.mjs +45 -0
- package/esm2022/lib/components/components.module.mjs +188 -0
- package/esm2022/lib/components/core/accordion/accordion.component.mjs +38 -0
- package/esm2022/lib/components/core/alert/alert.component.mjs +74 -0
- package/esm2022/lib/components/core/badge/badge.directive.mjs +38 -0
- package/esm2022/lib/components/core/button/button.directive.mjs +85 -0
- package/esm2022/lib/components/core/callout/callout.component.mjs +57 -0
- package/esm2022/lib/components/core/card/card.component.mjs +64 -0
- package/esm2022/lib/components/core/carousel/carousel/carousel.component.mjs +89 -0
- package/esm2022/lib/components/core/carousel/carousel-item/carousel-item.component.mjs +19 -0
- package/esm2022/lib/components/core/carousel/carousel.module.mjs +23 -0
- package/esm2022/lib/components/core/chip/chip.component.mjs +96 -0
- package/esm2022/lib/components/core/collapse/collapse.component.mjs +101 -0
- package/esm2022/lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component.mjs +24 -0
- package/esm2022/lib/components/core/dimmer/dimmer-icon/dimmer-icon.component.mjs +11 -0
- package/esm2022/lib/components/core/dimmer/dimmer.component.mjs +59 -0
- package/esm2022/lib/components/core/dimmer/dimmer.module.mjs +27 -0
- package/esm2022/lib/components/core/dropdown/dropdown/dropdown.component.mjs +143 -0
- package/esm2022/lib/components/core/dropdown/dropdown-item/dropdown-item.component.mjs +68 -0
- package/esm2022/lib/components/core/dropdown/dropdown.module.mjs +18 -0
- package/esm2022/lib/components/core/forward/forward.directive.mjs +53 -0
- package/esm2022/lib/components/core/link/link.component.mjs +46 -0
- package/esm2022/lib/components/core/list/list/list.component.mjs +17 -0
- package/esm2022/lib/components/core/list/list-item/list-item.component.mjs +40 -0
- package/esm2022/lib/components/core/list/list.module.mjs +23 -0
- package/esm2022/lib/components/core/modal/modal.component.mjs +164 -0
- package/esm2022/lib/components/core/notifications/notifications.component.mjs +111 -0
- package/esm2022/lib/components/core/pagination/pagination.component.mjs +133 -0
- package/esm2022/lib/components/core/popover/popover.directive.mjs +175 -0
- package/esm2022/lib/components/core/progress-bar/progress-bar.component.mjs +35 -0
- package/esm2022/lib/components/core/progress-button/progress-button.component.mjs +27 -0
- package/esm2022/lib/components/core/spinner/spinner.component.mjs +36 -0
- package/esm2022/lib/components/core/steppers/steppers-container/steppers-container.component.mjs +138 -0
- package/esm2022/lib/components/core/steppers/steppers-item/steppers-item.component.mjs +19 -0
- package/esm2022/lib/components/core/steppers/steppers.module.mjs +23 -0
- package/esm2022/lib/components/core/tab/tab-container/tab-container.component.mjs +60 -0
- package/esm2022/lib/components/core/tab/tab-item/tab-item.component.mjs +36 -0
- package/esm2022/lib/components/core/tab/tab.module.mjs +23 -0
- package/esm2022/lib/components/core/table/table.component.mjs +57 -0
- package/esm2022/lib/components/core/tooltip/tooltip.directive.mjs +142 -0
- package/esm2022/lib/components/form/checkbox/checkbox.component.mjs +49 -0
- package/esm2022/lib/components/form/form.module.mjs +55 -0
- package/esm2022/lib/components/form/input/input.component.mjs +239 -0
- package/esm2022/lib/components/form/password-input/password-input.component.mjs +155 -0
- package/esm2022/lib/components/form/radio-button/radio-button.component.mjs +69 -0
- package/esm2022/lib/components/form/range/range.component.mjs +64 -0
- package/esm2022/lib/components/form/rating/rating.component.mjs +51 -0
- package/esm2022/lib/components/form/select/select.component.mjs +70 -0
- package/esm2022/lib/components/form/textarea/textarea.component.mjs +47 -0
- package/esm2022/lib/components/form/upload-drag-drop/upload-drag-drop.component.mjs +140 -0
- package/esm2022/lib/components/form/upload-file-list/upload-file-list.component.mjs +112 -0
- package/esm2022/lib/components/navigation/back-button/back-button.component.mjs +71 -0
- package/esm2022/lib/components/navigation/back-to-top/back-to-top.component.mjs +64 -0
- package/esm2022/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.mjs +57 -0
- package/esm2022/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.mjs +23 -0
- package/esm2022/lib/components/navigation/breadcrumbs/breadcrumbs.module.mjs +18 -0
- package/esm2022/lib/components/navigation/header/header.component.mjs +58 -0
- package/esm2022/lib/components/utils/error-page/error-page.component.mjs +81 -0
- package/esm2022/lib/components/utils/icon/icon.component.mjs +55 -0
- package/esm2022/lib/components/utils/language-switcher/language-switcher.component.mjs +41 -0
- package/esm2022/lib/design-angular-kit.module.mjs +68 -0
- package/{esm2020 → esm2022}/lib/interfaces/form.mjs +1 -1
- package/esm2022/lib/interfaces/icon.mjs +165 -0
- package/esm2022/lib/pipes/mark-matching-text.pipe.mjs +37 -0
- package/esm2022/lib/services/notification/notification.service.mjs +120 -0
- package/esm2022/lib/utils/file-utils.mjs +73 -0
- package/esm2022/lib/utils/regex.mjs +31 -0
- package/esm2022/lib/validators/it-validators.mjs +153 -0
- package/esm2022/public_api.mjs +85 -0
- package/fesm2022/design-angular-kit.mjs +4615 -0
- package/fesm2022/design-angular-kit.mjs.map +1 -0
- package/lib/abstracts/abstract-form.component.d.ts +4 -4
- package/lib/abstracts/abstract.component.d.ts +3 -3
- package/lib/components/components.module.d.ts +32 -52
- package/lib/components/core/accordion/accordion.component.d.ts +6 -5
- package/lib/components/core/alert/alert.component.d.ts +5 -5
- package/lib/components/core/badge/badge.directive.d.ts +5 -5
- package/lib/components/core/button/button.directive.d.ts +11 -11
- package/lib/components/core/callout/callout.component.d.ts +7 -7
- package/lib/components/core/card/card.component.d.ts +8 -8
- package/lib/components/core/carousel/carousel/carousel.component.d.ts +10 -10
- package/lib/components/core/carousel/carousel-item/carousel-item.component.d.ts +4 -4
- package/lib/components/core/carousel/carousel.module.d.ts +8 -0
- package/lib/components/core/chip/chip.component.d.ts +6 -3
- package/lib/components/core/collapse/collapse.component.d.ts +8 -8
- package/lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component.d.ts +3 -3
- package/lib/components/core/dimmer/dimmer-icon/dimmer-icon.component.d.ts +3 -3
- package/lib/components/core/dimmer/dimmer.component.d.ts +4 -4
- package/lib/components/core/dimmer/dimmer.module.d.ts +9 -0
- package/lib/components/core/dropdown/dropdown/dropdown.component.d.ts +14 -9
- package/lib/components/core/dropdown/dropdown-item/dropdown-item.component.d.ts +8 -8
- package/lib/components/core/dropdown/dropdown.module.d.ts +8 -0
- package/lib/components/core/forward/forward.directive.d.ts +3 -3
- package/lib/components/core/link/link.component.d.ts +9 -8
- package/lib/components/core/list/list/list.component.d.ts +4 -4
- package/lib/components/core/list/list-item/list-item.component.d.ts +9 -9
- package/lib/components/core/list/list.module.d.ts +8 -0
- package/lib/components/core/modal/modal.component.d.ts +11 -11
- package/lib/components/core/notifications/notifications.component.d.ts +6 -6
- package/lib/components/core/pagination/pagination.component.d.ts +8 -8
- package/lib/components/core/popover/popover.directive.d.ts +3 -3
- package/lib/components/core/progress-bar/progress-bar.component.d.ts +6 -6
- package/lib/components/core/progress-button/progress-button.component.d.ts +5 -5
- package/lib/components/core/spinner/spinner.component.d.ts +5 -5
- package/lib/components/core/steppers/steppers-container/steppers-container.component.d.ts +37 -13
- package/lib/components/core/steppers/steppers-item/steppers-item.component.d.ts +5 -5
- package/lib/components/core/steppers/steppers.module.d.ts +8 -0
- package/lib/components/core/tab/tab-container/tab-container.component.d.ts +9 -9
- package/lib/components/core/tab/tab-item/tab-item.component.d.ts +8 -8
- package/lib/components/core/tab/tab.module.d.ts +8 -0
- package/lib/components/core/table/table.component.d.ts +12 -12
- package/lib/components/core/tooltip/tooltip.directive.d.ts +3 -3
- package/lib/components/form/checkbox/checkbox.component.d.ts +12 -10
- package/lib/components/form/form.module.d.ts +16 -0
- package/lib/components/form/input/input.component.d.ts +18 -13
- package/lib/components/form/password-input/password-input.component.d.ts +11 -6
- package/lib/components/form/radio-button/radio-button.component.d.ts +6 -6
- package/lib/components/form/range/range.component.d.ts +42 -0
- package/lib/components/form/rating/rating.component.d.ts +24 -0
- package/lib/components/form/select/select.component.d.ts +11 -6
- package/lib/components/form/textarea/textarea.component.d.ts +5 -5
- package/lib/components/form/upload-drag-drop/upload-drag-drop.component.d.ts +4 -4
- package/lib/components/form/upload-file-list/upload-file-list.component.d.ts +6 -6
- package/lib/components/navigation/back-button/back-button.component.d.ts +3 -3
- package/lib/components/navigation/back-to-top/back-to-top.component.d.ts +7 -7
- package/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.d.ts +6 -6
- package/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.d.ts +6 -6
- package/lib/components/navigation/breadcrumbs/breadcrumbs.module.d.ts +8 -0
- package/lib/components/navigation/header/header.component.d.ts +6 -6
- package/lib/components/utils/error-page/error-page.component.d.ts +6 -6
- package/lib/components/utils/icon/icon.component.d.ts +7 -7
- package/lib/components/utils/language-switcher/language-switcher.component.d.ts +4 -4
- package/lib/design-angular-kit.module.d.ts +3 -4
- package/lib/interfaces/core.d.ts +16 -16
- package/lib/interfaces/form.d.ts +3 -3
- package/lib/interfaces/icon.d.ts +4 -4
- package/lib/pipes/mark-matching-text.pipe.d.ts +4 -4
- package/lib/services/{notifications/notifications.service.d.ts → notification/notification.service.d.ts} +3 -3
- package/lib/utils/boolean-input.d.ts +1 -1
- package/lib/utils/regex.d.ts +5 -0
- package/lib/validators/it-validators.d.ts +4 -0
- package/package.json +13 -19
- package/public_api.d.ts +13 -4
- package/esm2020/lib/abstracts/abstract-form.component.mjs +0 -188
- package/esm2020/lib/abstracts/abstract.component.mjs +0 -45
- package/esm2020/lib/components/components.module.mjs +0 -256
- package/esm2020/lib/components/core/accordion/accordion.component.mjs +0 -35
- package/esm2020/lib/components/core/alert/alert.component.mjs +0 -73
- package/esm2020/lib/components/core/badge/badge.directive.mjs +0 -37
- package/esm2020/lib/components/core/button/button.directive.mjs +0 -84
- package/esm2020/lib/components/core/callout/callout.component.mjs +0 -57
- package/esm2020/lib/components/core/card/card.component.mjs +0 -64
- package/esm2020/lib/components/core/carousel/carousel/carousel.component.mjs +0 -89
- package/esm2020/lib/components/core/carousel/carousel-item/carousel-item.component.mjs +0 -19
- package/esm2020/lib/components/core/chip/chip.component.mjs +0 -89
- package/esm2020/lib/components/core/collapse/collapse.component.mjs +0 -101
- package/esm2020/lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component.mjs +0 -24
- package/esm2020/lib/components/core/dimmer/dimmer-icon/dimmer-icon.component.mjs +0 -11
- package/esm2020/lib/components/core/dimmer/dimmer.component.mjs +0 -59
- package/esm2020/lib/components/core/dropdown/dropdown/dropdown.component.mjs +0 -130
- package/esm2020/lib/components/core/dropdown/dropdown-item/dropdown-item.component.mjs +0 -68
- package/esm2020/lib/components/core/forward/forward.directive.mjs +0 -52
- package/esm2020/lib/components/core/link/link.component.mjs +0 -40
- package/esm2020/lib/components/core/list/list/list.component.mjs +0 -17
- package/esm2020/lib/components/core/list/list-item/list-item.component.mjs +0 -41
- package/esm2020/lib/components/core/modal/modal.component.mjs +0 -163
- package/esm2020/lib/components/core/notifications/notifications.component.mjs +0 -110
- package/esm2020/lib/components/core/pagination/pagination.component.mjs +0 -131
- package/esm2020/lib/components/core/popover/popover.directive.mjs +0 -174
- package/esm2020/lib/components/core/progress-bar/progress-bar.component.mjs +0 -34
- package/esm2020/lib/components/core/progress-button/progress-button.component.mjs +0 -27
- package/esm2020/lib/components/core/rating/rating.component.mjs +0 -49
- package/esm2020/lib/components/core/spinner/spinner.component.mjs +0 -35
- package/esm2020/lib/components/core/steppers/steppers-container/steppers-container.component.mjs +0 -127
- package/esm2020/lib/components/core/steppers/steppers-item/steppers-item.component.mjs +0 -19
- package/esm2020/lib/components/core/tab/tab-container/tab-container.component.mjs +0 -59
- package/esm2020/lib/components/core/tab/tab-item/tab-item.component.mjs +0 -36
- package/esm2020/lib/components/core/table/table.component.mjs +0 -57
- package/esm2020/lib/components/core/tooltip/tooltip.directive.mjs +0 -141
- package/esm2020/lib/components/form/checkbox/checkbox.component.mjs +0 -40
- package/esm2020/lib/components/form/input/input.component.mjs +0 -232
- package/esm2020/lib/components/form/password-input/password-input.component.mjs +0 -152
- package/esm2020/lib/components/form/radio-button/radio-button.component.mjs +0 -68
- package/esm2020/lib/components/form/select/select.component.mjs +0 -62
- package/esm2020/lib/components/form/textarea/textarea.component.mjs +0 -46
- package/esm2020/lib/components/form/upload-drag-drop/upload-drag-drop.component.mjs +0 -139
- package/esm2020/lib/components/form/upload-file-list/upload-file-list.component.mjs +0 -104
- package/esm2020/lib/components/navigation/back-button/back-button.component.mjs +0 -69
- package/esm2020/lib/components/navigation/back-to-top/back-to-top.component.mjs +0 -64
- package/esm2020/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.mjs +0 -56
- package/esm2020/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.mjs +0 -23
- package/esm2020/lib/components/navigation/header/header.component.mjs +0 -57
- package/esm2020/lib/components/utils/error-page/error-page.component.mjs +0 -79
- package/esm2020/lib/components/utils/icon/icon.component.mjs +0 -55
- package/esm2020/lib/components/utils/language-switcher/language-switcher.component.mjs +0 -39
- package/esm2020/lib/design-angular-kit.module.mjs +0 -68
- package/esm2020/lib/interfaces/icon.mjs +0 -162
- package/esm2020/lib/pipes/mark-matching-text.pipe.mjs +0 -36
- package/esm2020/lib/services/notifications/notifications.service.mjs +0 -120
- package/esm2020/lib/utils/file-utils.mjs +0 -73
- package/esm2020/lib/utils/regex.mjs +0 -26
- package/esm2020/lib/validators/it-validators.mjs +0 -147
- package/esm2020/public_api.mjs +0 -74
- package/fesm2015/design-angular-kit.mjs +0 -4422
- package/fesm2015/design-angular-kit.mjs.map +0 -1
- package/fesm2020/design-angular-kit.mjs +0 -4354
- package/fesm2020/design-angular-kit.mjs.map +0 -1
- package/lib/components/core/rating/rating.component.d.ts +0 -24
- /package/{esm2020 → esm2022}/design-angular-kit.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/design-angular-kit-config.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/interfaces/core.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/interfaces/design-angular-kit-init.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/interfaces/utils.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/utils/boolean-input.mjs +0 -0
|
@@ -1,4422 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, InjectionToken, Inject, Directive, HostBinding, Optional, Host, ContentChildren, HostListener, TemplateRef, Injectable, Self, Pipe, ViewChildren, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1$1 from '@ngx-translate/core';
|
|
4
|
-
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
|
|
5
|
-
import { HttpClientModule, HttpClient } from '@angular/common/http';
|
|
6
|
-
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
7
|
-
import * as i1 from '@angular/common';
|
|
8
|
-
import { DOCUMENT, CommonModule, NgIf, NgForOf } from '@angular/common';
|
|
9
|
-
import * as i2 from '@angular/forms';
|
|
10
|
-
import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
11
|
-
import * as i1$2 from '@angular/router';
|
|
12
|
-
import { RouterLink } from '@angular/router';
|
|
13
|
-
import { Collapse, Alert, CarouselBI, Dropdown, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, BackToTop } from 'bootstrap-italia';
|
|
14
|
-
import { startWith, Subject, filter, Observable, of, debounceTime, distinctUntilChanged, switchMap, map, tap, take, forkJoin } from 'rxjs';
|
|
15
|
-
import * as i1$3 from '@angular/platform-browser';
|
|
16
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
17
|
-
|
|
18
|
-
class AbstractComponent {
|
|
19
|
-
constructor() {
|
|
20
|
-
/**
|
|
21
|
-
* The element ID
|
|
22
|
-
*/
|
|
23
|
-
this.id = this.getDefaultId();
|
|
24
|
-
this._renderer = inject(Renderer2);
|
|
25
|
-
this._elementRef = inject(ElementRef);
|
|
26
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
27
|
-
this.valueChanges = new EventEmitter();
|
|
28
|
-
}
|
|
29
|
-
ngAfterViewInit() {
|
|
30
|
-
this._renderer.removeAttribute(this._elementRef.nativeElement, 'id');
|
|
31
|
-
}
|
|
32
|
-
ngOnChanges(changes) {
|
|
33
|
-
this.valueChanges.next(); // The inputs were changed
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Generate unique id for components
|
|
37
|
-
* @private
|
|
38
|
-
*/
|
|
39
|
-
getDefaultId() {
|
|
40
|
-
const name = this.constructor.name.replace('Component', '');
|
|
41
|
-
const kebabName = name.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
|
|
42
|
-
return `it-${kebabName}-${AbstractComponent.instances++}`;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Counter of active instances
|
|
47
|
-
* @private
|
|
48
|
-
*/
|
|
49
|
-
AbstractComponent.instances = 0;
|
|
50
|
-
AbstractComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
AbstractComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: AbstractComponent, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AbstractComponent, decorators: [{
|
|
53
|
-
type: Component,
|
|
54
|
-
args: [{ template: '' }]
|
|
55
|
-
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
56
|
-
type: Input
|
|
57
|
-
}], valueChanges: [{
|
|
58
|
-
type: Output
|
|
59
|
-
}] } });
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Check if boolean input has true value and not is `undefined`
|
|
63
|
-
* @param booleanInput the boolean input
|
|
64
|
-
*/
|
|
65
|
-
function isTrueBooleanInput(booleanInput) {
|
|
66
|
-
return booleanInput !== undefined && (booleanInput === true || booleanInput === 'true');
|
|
67
|
-
}
|
|
68
|
-
/**
|
|
69
|
-
* Check if boolean input has false value or is `undefined`
|
|
70
|
-
* @param booleanInput the boolean input
|
|
71
|
-
*/
|
|
72
|
-
function isFalseBooleanInput(booleanInput) {
|
|
73
|
-
return booleanInput === undefined || booleanInput === false || booleanInput === 'false';
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
class CollapseComponent extends AbstractComponent {
|
|
77
|
-
constructor() {
|
|
78
|
-
super(...arguments);
|
|
79
|
-
/**
|
|
80
|
-
* Custom class
|
|
81
|
-
*/
|
|
82
|
-
this.class = '';
|
|
83
|
-
/**
|
|
84
|
-
* This event fires immediately when the show method is called.
|
|
85
|
-
*/
|
|
86
|
-
this.showEvent = new EventEmitter();
|
|
87
|
-
/**
|
|
88
|
-
* This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
|
|
89
|
-
*/
|
|
90
|
-
this.shownEvent = new EventEmitter();
|
|
91
|
-
/**
|
|
92
|
-
* This event fires immediately when the hide method is called.
|
|
93
|
-
*/
|
|
94
|
-
this.hideEvent = new EventEmitter();
|
|
95
|
-
/**
|
|
96
|
-
* This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
|
|
97
|
-
*/
|
|
98
|
-
this.hiddenEvent = new EventEmitter();
|
|
99
|
-
}
|
|
100
|
-
get isMulti() {
|
|
101
|
-
return isTrueBooleanInput(this.multi);
|
|
102
|
-
}
|
|
103
|
-
get isOpenedOnStart() {
|
|
104
|
-
return isTrueBooleanInput(this.opened);
|
|
105
|
-
}
|
|
106
|
-
ngAfterViewInit() {
|
|
107
|
-
super.ngAfterViewInit();
|
|
108
|
-
this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
|
|
109
|
-
if (this.collapseDiv) {
|
|
110
|
-
const element = this.collapseDiv.nativeElement;
|
|
111
|
-
this.collapse = Collapse.getOrCreateInstance(element, {
|
|
112
|
-
toggle: this.isOpenedOnStart
|
|
113
|
-
});
|
|
114
|
-
element.addEventListener('show.bs.collapse', event => this.showEvent.emit(event));
|
|
115
|
-
element.addEventListener('shown.bs.collapse', event => this.shownEvent.emit(event));
|
|
116
|
-
element.addEventListener('hide.bs.collapse', event => this.hideEvent.emit(event));
|
|
117
|
-
element.addEventListener('hidden.bs.collapse', event => this.hiddenEvent.emit(event));
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
/**
|
|
121
|
-
* Shows a resealable item
|
|
122
|
-
* NOTE: Returns to the caller before the collapsable element has actually been shown (onShown event).
|
|
123
|
-
*/
|
|
124
|
-
show() {
|
|
125
|
-
var _a;
|
|
126
|
-
(_a = this.collapse) === null || _a === void 0 ? void 0 : _a.show();
|
|
127
|
-
}
|
|
128
|
-
/**
|
|
129
|
-
* Hides a resealable item
|
|
130
|
-
* NOTE: Returns to the caller before the collapsable element has actually been hidden (onHidden Event)
|
|
131
|
-
*/
|
|
132
|
-
hide() {
|
|
133
|
-
var _a;
|
|
134
|
-
(_a = this.collapse) === null || _a === void 0 ? void 0 : _a.hide();
|
|
135
|
-
}
|
|
136
|
-
/**
|
|
137
|
-
* Toggle a collapsible item to show or hide it.
|
|
138
|
-
* NOTE: Returns to the caller before the collapsable element has actually been shown or hidden (onShown and onHidden events)
|
|
139
|
-
*/
|
|
140
|
-
toggle() {
|
|
141
|
-
var _a;
|
|
142
|
-
(_a = this.collapse) === null || _a === void 0 ? void 0 : _a.toggle();
|
|
143
|
-
}
|
|
144
|
-
/**
|
|
145
|
-
* Eliminates the possibility of an item being resealable
|
|
146
|
-
*/
|
|
147
|
-
dispose() {
|
|
148
|
-
var _a;
|
|
149
|
-
(_a = this.collapse) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
CollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
153
|
-
CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: CollapseComponent, selector: "it-collapse", inputs: { multi: "multi", opened: "opened", 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]=\"isMulti\" #collapse>\n <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
155
|
-
type: Component,
|
|
156
|
-
args: [{ selector: 'it-collapse', exportAs: 'itCollapse', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [id]=\"id\" class=\"collapse {{class}}\" [class.multi-collapse]=\"isMulti\" #collapse>\n <ng-content></ng-content>\n</div>\n" }]
|
|
157
|
-
}], propDecorators: { multi: [{
|
|
158
|
-
type: Input
|
|
159
|
-
}], opened: [{
|
|
160
|
-
type: Input
|
|
161
|
-
}], class: [{
|
|
162
|
-
type: Input
|
|
163
|
-
}], showEvent: [{
|
|
164
|
-
type: Output
|
|
165
|
-
}], shownEvent: [{
|
|
166
|
-
type: Output
|
|
167
|
-
}], hideEvent: [{
|
|
168
|
-
type: Output
|
|
169
|
-
}], hiddenEvent: [{
|
|
170
|
-
type: Output
|
|
171
|
-
}], collapseDiv: [{
|
|
172
|
-
type: ViewChild,
|
|
173
|
-
args: ['collapse']
|
|
174
|
-
}] } });
|
|
175
|
-
|
|
176
|
-
/**
|
|
177
|
-
* Accordion
|
|
178
|
-
* @description Build vertically collapsible accordions based on Collapse.
|
|
179
|
-
*/
|
|
180
|
-
class AccordionComponent extends CollapseComponent {
|
|
181
|
-
constructor() {
|
|
182
|
-
super(...arguments);
|
|
183
|
-
this.isCollapsed = true;
|
|
184
|
-
}
|
|
185
|
-
ngAfterViewInit() {
|
|
186
|
-
super.ngAfterViewInit();
|
|
187
|
-
this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
|
|
188
|
-
this.isCollapsed = !this.isOpenedOnStart;
|
|
189
|
-
this.hideEvent.subscribe(() => {
|
|
190
|
-
this.isCollapsed = true;
|
|
191
|
-
this._changeDetectorRef.detectChanges();
|
|
192
|
-
});
|
|
193
|
-
this.showEvent.subscribe(() => {
|
|
194
|
-
this.isCollapsed = false;
|
|
195
|
-
this._changeDetectorRef.detectChanges();
|
|
196
|
-
});
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
AccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
200
|
-
AccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: AccordionComponent, selector: "it-accordion[title]", inputs: { title: "title" }, exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n <div class=\"accordion-item\">\n\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]=\"isOpenedOnStart ? 'true' : 'false'\">\n {{title}}\n </button>\n </h2>\n\n <div #collapse id=\"collapse-{{id}}\" role=\"region\"\n class=\"accordion-collapse collapse {{class}}\"\n [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n\n <div class=\"accordion-body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
202
|
-
type: Component,
|
|
203
|
-
args: [{ selector: 'it-accordion[title]', exportAs: 'itAccordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"accordion\">\n <div class=\"accordion-item\">\n\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]=\"isOpenedOnStart ? 'true' : 'false'\">\n {{title}}\n </button>\n </h2>\n\n <div #collapse id=\"collapse-{{id}}\" role=\"region\"\n class=\"accordion-collapse collapse {{class}}\"\n [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n\n <div class=\"accordion-body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n\n" }]
|
|
204
|
-
}], propDecorators: { title: [{
|
|
205
|
-
type: Input
|
|
206
|
-
}] } });
|
|
207
|
-
|
|
208
|
-
const DESIGN_ANGULAR_KIT_CONFIG = new InjectionToken('DesignAngularKitConfig');
|
|
209
|
-
class DesignAngularKitConfig {
|
|
210
|
-
constructor(nextInit) {
|
|
211
|
-
this.initConfig = nextInit;
|
|
212
|
-
}
|
|
213
|
-
/**
|
|
214
|
-
* The initial path in the `href` attribute in the `IconComponent` component
|
|
215
|
-
* @default './bootstrap-italia/dist/svg/sprites.svg'
|
|
216
|
-
*/
|
|
217
|
-
get iconHref() {
|
|
218
|
-
var _a;
|
|
219
|
-
return ((_a = this.initConfig) === null || _a === void 0 ? void 0 : _a.iconHref) || './bootstrap-italia/dist/svg/sprites.svg';
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
class IconComponent {
|
|
224
|
-
constructor(config) {
|
|
225
|
-
this.config = config;
|
|
226
|
-
}
|
|
227
|
-
/**
|
|
228
|
-
* Return the icon href
|
|
229
|
-
*/
|
|
230
|
-
get iconHref() {
|
|
231
|
-
return `${this.config.iconHref}#it-${this.name}`;
|
|
232
|
-
}
|
|
233
|
-
/**
|
|
234
|
-
* Return the icon class
|
|
235
|
-
*/
|
|
236
|
-
get iconClass() {
|
|
237
|
-
let iconClass = 'icon';
|
|
238
|
-
if (this.size) {
|
|
239
|
-
iconClass += ` icon-${this.size}`;
|
|
240
|
-
}
|
|
241
|
-
if (this.color) {
|
|
242
|
-
iconClass += ` icon-${this.color}`;
|
|
243
|
-
}
|
|
244
|
-
if (isTrueBooleanInput(this.padded)) {
|
|
245
|
-
iconClass += ` icon-padded`;
|
|
246
|
-
}
|
|
247
|
-
if (this.svgClass) {
|
|
248
|
-
iconClass += ` ${this.svgClass}`;
|
|
249
|
-
}
|
|
250
|
-
return iconClass;
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: IconComponent, deps: [{ token: DESIGN_ANGULAR_KIT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
254
|
-
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: IconComponent, selector: "it-icon[name]", inputs: { name: "name", size: "size", color: "color", padded: "padded", svgClass: "svgClass" }, ngImport: i0, template: "<svg [class]=\"iconClass\">\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: IconComponent, decorators: [{
|
|
256
|
-
type: Component,
|
|
257
|
-
args: [{ selector: 'it-icon[name]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [class]=\"iconClass\">\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n" }]
|
|
258
|
-
}], ctorParameters: function () {
|
|
259
|
-
return [{ type: DesignAngularKitConfig, decorators: [{
|
|
260
|
-
type: Inject,
|
|
261
|
-
args: [DESIGN_ANGULAR_KIT_CONFIG]
|
|
262
|
-
}] }];
|
|
263
|
-
}, propDecorators: { name: [{
|
|
264
|
-
type: Input
|
|
265
|
-
}], size: [{
|
|
266
|
-
type: Input
|
|
267
|
-
}], color: [{
|
|
268
|
-
type: Input
|
|
269
|
-
}], padded: [{
|
|
270
|
-
type: Input
|
|
271
|
-
}], svgClass: [{
|
|
272
|
-
type: Input
|
|
273
|
-
}] } });
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* Alert
|
|
277
|
-
* @description You can provide feedback to the user via alert messages.
|
|
278
|
-
*/
|
|
279
|
-
class AlertComponent extends AbstractComponent {
|
|
280
|
-
constructor() {
|
|
281
|
-
super(...arguments);
|
|
282
|
-
/**
|
|
283
|
-
* The alert color
|
|
284
|
-
* @default info
|
|
285
|
-
*/
|
|
286
|
-
this.color = 'info';
|
|
287
|
-
/**
|
|
288
|
-
* This event fires immediately when the instance's close method is called.
|
|
289
|
-
*/
|
|
290
|
-
this.closeEvent = new EventEmitter();
|
|
291
|
-
/**
|
|
292
|
-
* This event fires when the alert has been closed (it will wait for CSS transitions to complete).
|
|
293
|
-
*/
|
|
294
|
-
this.closedEvent = new EventEmitter();
|
|
295
|
-
}
|
|
296
|
-
get isDismissible() {
|
|
297
|
-
return isTrueBooleanInput(this.dismissible);
|
|
298
|
-
}
|
|
299
|
-
ngAfterViewInit() {
|
|
300
|
-
super.ngAfterViewInit();
|
|
301
|
-
if (this.alertElement) {
|
|
302
|
-
const element = this.alertElement.nativeElement;
|
|
303
|
-
this.alert = Alert.getOrCreateInstance(element);
|
|
304
|
-
element.addEventListener('close.bs.alert', event => this.closeEvent.emit(event));
|
|
305
|
-
element.addEventListener('closed.bs.alert', event => this.closedEvent.emit(event));
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
/**
|
|
309
|
-
* Close an alert by removing it from the DOM.
|
|
310
|
-
* If the `.fade` and `.show` classes are present in the element, the alert will be closed with a disappearing effect.
|
|
311
|
-
*/
|
|
312
|
-
close() {
|
|
313
|
-
var _a;
|
|
314
|
-
(_a = this.alert) === null || _a === void 0 ? void 0 : _a.close();
|
|
315
|
-
}
|
|
316
|
-
/**
|
|
317
|
-
* The alert is removed
|
|
318
|
-
*/
|
|
319
|
-
dispose() {
|
|
320
|
-
var _a;
|
|
321
|
-
(_a = this.alert) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
325
|
-
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: AlertComponent, selector: "it-alert", inputs: { color: "color", dismissible: "dismissible" }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div class=\"alert alert-{{color}}\" #alertElement\n [class.alert-dismissible]=\"isDismissible\"\n [class.fade]=\"isDismissible\"\n [class.show]=\"isDismissible\"\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 <button *ngIf=\"isDismissible\"\n type=\"button\"\n class=\"btn-close\"\n data-bs-dismiss=\"alert\"\n [attr.aria-label]=\"'it.core.close-alert'|translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AlertComponent, decorators: [{
|
|
327
|
-
type: Component,
|
|
328
|
-
args: [{ selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"alert alert-{{color}}\" #alertElement\n [class.alert-dismissible]=\"isDismissible\"\n [class.fade]=\"isDismissible\"\n [class.show]=\"isDismissible\"\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 <button *ngIf=\"isDismissible\"\n type=\"button\"\n class=\"btn-close\"\n data-bs-dismiss=\"alert\"\n [attr.aria-label]=\"'it.core.close-alert'|translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
|
|
329
|
-
}], propDecorators: { color: [{
|
|
330
|
-
type: Input
|
|
331
|
-
}], dismissible: [{
|
|
332
|
-
type: Input
|
|
333
|
-
}], closeEvent: [{
|
|
334
|
-
type: Output
|
|
335
|
-
}], closedEvent: [{
|
|
336
|
-
type: Output
|
|
337
|
-
}], alertElement: [{
|
|
338
|
-
type: ViewChild,
|
|
339
|
-
args: ['alertElement']
|
|
340
|
-
}] } });
|
|
341
|
-
|
|
342
|
-
/**
|
|
343
|
-
* Badge
|
|
344
|
-
* @description Useful for small counters and labels
|
|
345
|
-
*/
|
|
346
|
-
class BadgeDirective {
|
|
347
|
-
get badgeClass() {
|
|
348
|
-
let badgeClass = 'badge';
|
|
349
|
-
if (isTrueBooleanInput(this.rounded)) {
|
|
350
|
-
badgeClass += ` rounded-pill`;
|
|
351
|
-
}
|
|
352
|
-
if (this.color) {
|
|
353
|
-
badgeClass += ` bg-${this.color}`;
|
|
354
|
-
}
|
|
355
|
-
return badgeClass;
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
BadgeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
359
|
-
BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: BadgeDirective, selector: "[itBadge]", inputs: { color: ["itBadge", "color"], rounded: "rounded" }, host: { properties: { "class": "this.badgeClass" } }, exportAs: ["itBadge"], ngImport: i0 });
|
|
360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BadgeDirective, decorators: [{
|
|
361
|
-
type: Directive,
|
|
362
|
-
args: [{
|
|
363
|
-
selector: '[itBadge]',
|
|
364
|
-
exportAs: 'itBadge'
|
|
365
|
-
}]
|
|
366
|
-
}], propDecorators: { color: [{
|
|
367
|
-
type: Input,
|
|
368
|
-
args: ['itBadge']
|
|
369
|
-
}], rounded: [{
|
|
370
|
-
type: Input
|
|
371
|
-
}], badgeClass: [{
|
|
372
|
-
type: HostBinding,
|
|
373
|
-
args: ['class']
|
|
374
|
-
}] } });
|
|
375
|
-
|
|
376
|
-
class ProgressBarComponent {
|
|
377
|
-
/**
|
|
378
|
-
* Return the background color
|
|
379
|
-
*/
|
|
380
|
-
get bgColor() {
|
|
381
|
-
if (!this.color) {
|
|
382
|
-
return '';
|
|
383
|
-
}
|
|
384
|
-
return ` bg-${this.color}`;
|
|
385
|
-
}
|
|
386
|
-
get isIndeterminate() {
|
|
387
|
-
return isTrueBooleanInput(this.indeterminate);
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
391
|
-
ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: { value: "value", showLabel: "showLabel", indeterminate: "indeterminate", color: "color" }, ngImport: i0, template: "<div class=\"progress-bar-wrapper\">\n <div *ngIf=\"showLabel\" class=\"progress-bar-label\">\n <span class=\"visually-hidden\">{{'it.core.progress'|translate}} </span>{{value}}%\n </div>\n <div class=\"progress\"\n [class.progress-color]=\"!!color\"\n [class.progress-indeterminate]=\"isIndeterminate\">\n\n <div *ngIf=\"isIndeterminate; else determinate\" class=\"progress-bar{{bgColor}}\" role=\"progressbar\"></div>\n <ng-template #determinate>\n <div class=\"progress-bar{{bgColor}}\" role=\"progressbar\" [style.width.%]=\"value\"\n [attr.aria-valuenow]=\"value\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n </ng-template>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
393
|
-
type: Component,
|
|
394
|
-
args: [{ selector: 'it-progress-bar[value]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"progress-bar-wrapper\">\n <div *ngIf=\"showLabel\" class=\"progress-bar-label\">\n <span class=\"visually-hidden\">{{'it.core.progress'|translate}} </span>{{value}}%\n </div>\n <div class=\"progress\"\n [class.progress-color]=\"!!color\"\n [class.progress-indeterminate]=\"isIndeterminate\">\n\n <div *ngIf=\"isIndeterminate; else determinate\" class=\"progress-bar{{bgColor}}\" role=\"progressbar\"></div>\n <ng-template #determinate>\n <div class=\"progress-bar{{bgColor}}\" role=\"progressbar\" [style.width.%]=\"value\"\n [attr.aria-valuenow]=\"value\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n </ng-template>\n </div>\n</div>\n" }]
|
|
395
|
-
}], propDecorators: { value: [{
|
|
396
|
-
type: Input
|
|
397
|
-
}], showLabel: [{
|
|
398
|
-
type: Input
|
|
399
|
-
}], indeterminate: [{
|
|
400
|
-
type: Input
|
|
401
|
-
}], color: [{
|
|
402
|
-
type: Input
|
|
403
|
-
}] } });
|
|
404
|
-
|
|
405
|
-
class ProgressButtonComponent {
|
|
406
|
-
get isProgress() {
|
|
407
|
-
return typeof this.progress === 'number' || isTrueBooleanInput(this.progress);
|
|
408
|
-
}
|
|
409
|
-
get progressValue() {
|
|
410
|
-
return typeof this.progress === 'number' ? this.progress : 0;
|
|
411
|
-
}
|
|
412
|
-
get isIndeterminate() {
|
|
413
|
-
return typeof this.progress !== 'number' && isTrueBooleanInput(this.progress);
|
|
414
|
-
}
|
|
415
|
-
}
|
|
416
|
-
ProgressButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
417
|
-
ProgressButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: ProgressButtonComponent, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n [value]=\"progressValue\"\n [indeterminate]=\"isIndeterminate\"\n [color]=\"progressColor\"></it-progress-bar>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ProgressButtonComponent, decorators: [{
|
|
419
|
-
type: Component,
|
|
420
|
-
args: [{ selector: 'button[itButton][progress]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n [value]=\"progressValue\"\n [indeterminate]=\"isIndeterminate\"\n [color]=\"progressColor\"></it-progress-bar>\n" }]
|
|
421
|
-
}], propDecorators: { progress: [{
|
|
422
|
-
type: Input
|
|
423
|
-
}], progressColor: [{
|
|
424
|
-
type: Input
|
|
425
|
-
}] } });
|
|
426
|
-
|
|
427
|
-
/**
|
|
428
|
-
* Button
|
|
429
|
-
* @description Bootstrap italia custom button styles
|
|
430
|
-
*/
|
|
431
|
-
class ButtonDirective {
|
|
432
|
-
constructor(progressButtonComponent) {
|
|
433
|
-
this.progressButtonComponent = progressButtonComponent;
|
|
434
|
-
this.isFocus = false;
|
|
435
|
-
}
|
|
436
|
-
onFocus() {
|
|
437
|
-
this.isFocus = true;
|
|
438
|
-
}
|
|
439
|
-
onBlur() {
|
|
440
|
-
this.isFocus = false;
|
|
441
|
-
}
|
|
442
|
-
get hostClasses() {
|
|
443
|
-
var _a;
|
|
444
|
-
let cssClass = 'btn';
|
|
445
|
-
if (this.color) {
|
|
446
|
-
cssClass += ` btn-${this.color}`;
|
|
447
|
-
}
|
|
448
|
-
if (this.size) {
|
|
449
|
-
cssClass += ` btn-${this.size}`;
|
|
450
|
-
}
|
|
451
|
-
if (this.block) {
|
|
452
|
-
cssClass += ' btn-block';
|
|
453
|
-
}
|
|
454
|
-
if (isTrueBooleanInput(this.disabled)) {
|
|
455
|
-
cssClass += ' disabled';
|
|
456
|
-
}
|
|
457
|
-
if (this.isFocus) {
|
|
458
|
-
cssClass += ' focus--mouse';
|
|
459
|
-
}
|
|
460
|
-
if (((_a = this.icons) === null || _a === void 0 ? void 0 : _a.length) && !this.progressButtonComponent) {
|
|
461
|
-
cssClass += ' btn-icon';
|
|
462
|
-
}
|
|
463
|
-
if (!!this.progressButtonComponent) {
|
|
464
|
-
cssClass += ' btn-progress';
|
|
465
|
-
}
|
|
466
|
-
return cssClass;
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
|
-
ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ButtonDirective, deps: [{ token: ProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
470
|
-
ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: ButtonDirective, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: "disabled" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: IconComponent }], exportAs: ["itButton"], ngImport: i0 });
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
472
|
-
type: Directive,
|
|
473
|
-
args: [{
|
|
474
|
-
selector: '[itButton]',
|
|
475
|
-
exportAs: 'itButton'
|
|
476
|
-
}]
|
|
477
|
-
}], ctorParameters: function () {
|
|
478
|
-
return [{ type: ProgressButtonComponent, decorators: [{
|
|
479
|
-
type: Optional
|
|
480
|
-
}, {
|
|
481
|
-
type: Host
|
|
482
|
-
}] }];
|
|
483
|
-
}, propDecorators: { color: [{
|
|
484
|
-
type: Input,
|
|
485
|
-
args: ['itButton']
|
|
486
|
-
}], size: [{
|
|
487
|
-
type: Input
|
|
488
|
-
}], block: [{
|
|
489
|
-
type: Input
|
|
490
|
-
}], disabled: [{
|
|
491
|
-
type: Input
|
|
492
|
-
}, {
|
|
493
|
-
type: HostBinding,
|
|
494
|
-
args: ['disabled']
|
|
495
|
-
}], icons: [{
|
|
496
|
-
type: ContentChildren,
|
|
497
|
-
args: [IconComponent]
|
|
498
|
-
}], onFocus: [{
|
|
499
|
-
type: HostListener,
|
|
500
|
-
args: ['focus']
|
|
501
|
-
}], onBlur: [{
|
|
502
|
-
type: HostListener,
|
|
503
|
-
args: ['blur']
|
|
504
|
-
}], hostClasses: [{
|
|
505
|
-
type: HostBinding,
|
|
506
|
-
args: ['class']
|
|
507
|
-
}] } });
|
|
508
|
-
|
|
509
|
-
/**
|
|
510
|
-
* Callout
|
|
511
|
-
* @description Callouts can be used to highlight certain parts of the text that require particular attention. They may contain error messages, warnings, hints, etc.
|
|
512
|
-
*/
|
|
513
|
-
class CalloutComponent {
|
|
514
|
-
constructor() {
|
|
515
|
-
/**
|
|
516
|
-
* Callout appearance
|
|
517
|
-
* - <b>default</b>
|
|
518
|
-
* - <b>highlight</b>: Callout version with border only on the left side
|
|
519
|
-
* - <b>more</b>: It looks radically different from the other styles available and is suitable for more extensive texts
|
|
520
|
-
* @default default
|
|
521
|
-
*/
|
|
522
|
-
this.appearance = 'default';
|
|
523
|
-
}
|
|
524
|
-
get iconName() {
|
|
525
|
-
if (this.icon) {
|
|
526
|
-
return this.icon;
|
|
527
|
-
}
|
|
528
|
-
if (this.appearance === 'more') {
|
|
529
|
-
return 'zoom-in';
|
|
530
|
-
}
|
|
531
|
-
switch (this.color) {
|
|
532
|
-
case 'success':
|
|
533
|
-
return 'check-circle';
|
|
534
|
-
case 'warning':
|
|
535
|
-
return 'help-circle';
|
|
536
|
-
case 'danger':
|
|
537
|
-
return 'close-circle';
|
|
538
|
-
case 'important':
|
|
539
|
-
case 'note':
|
|
540
|
-
default:
|
|
541
|
-
return 'info-circle';
|
|
542
|
-
}
|
|
543
|
-
}
|
|
544
|
-
}
|
|
545
|
-
CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
546
|
-
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: CalloutComponent, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon" }, ngImport: i0, template: "<div class=\"callout {{color}}\" [class.callout-highlight]=\"appearance === 'highlight'\"\n [class.callout-more]=\"appearance === 'more'\">\n\n <div *ngIf=\"appearance === 'default'; else inner\" class=\"callout-inner\">\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n </div>\n</div>\n\n<ng-template #inner>\n <div class=\"callout-title\" *ngIf=\"label\">\n <it-icon [name]=\"iconName\"></it-icon>\n <span *ngIf=\"hiddenLabel\" class=\"visually-hidden\">{{ hiddenLabel }}</span>\n <span class=\"text\">{{ label }}</span>\n </div>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
547
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CalloutComponent, decorators: [{
|
|
548
|
-
type: Component,
|
|
549
|
-
args: [{ selector: 'it-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"callout {{color}}\" [class.callout-highlight]=\"appearance === 'highlight'\"\n [class.callout-more]=\"appearance === 'more'\">\n\n <div *ngIf=\"appearance === 'default'; else inner\" class=\"callout-inner\">\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n </div>\n</div>\n\n<ng-template #inner>\n <div class=\"callout-title\" *ngIf=\"label\">\n <it-icon [name]=\"iconName\"></it-icon>\n <span *ngIf=\"hiddenLabel\" class=\"visually-hidden\">{{ hiddenLabel }}</span>\n <span class=\"text\">{{ label }}</span>\n </div>\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"] }]
|
|
550
|
-
}], propDecorators: { label: [{
|
|
551
|
-
type: Input
|
|
552
|
-
}], hiddenLabel: [{
|
|
553
|
-
type: Input
|
|
554
|
-
}], color: [{
|
|
555
|
-
type: Input
|
|
556
|
-
}], appearance: [{
|
|
557
|
-
type: Input
|
|
558
|
-
}], icon: [{
|
|
559
|
-
type: Input
|
|
560
|
-
}] } });
|
|
561
|
-
|
|
562
|
-
/**
|
|
563
|
-
* Card
|
|
564
|
-
* @description A container of texts and images with many options and variations.
|
|
565
|
-
*/
|
|
566
|
-
class CardComponent extends AbstractComponent {
|
|
567
|
-
constructor() {
|
|
568
|
-
super(...arguments);
|
|
569
|
-
/**
|
|
570
|
-
* It serves to space the cards in their mobile version.
|
|
571
|
-
* @default true
|
|
572
|
-
*/
|
|
573
|
-
this.space = true;
|
|
574
|
-
/**
|
|
575
|
-
* Custom card class
|
|
576
|
-
* @default ''
|
|
577
|
-
*/
|
|
578
|
-
this.cardClass = '';
|
|
579
|
-
/**
|
|
580
|
-
* Custom card body class
|
|
581
|
-
* @default ''
|
|
582
|
-
*/
|
|
583
|
-
this.bodyClass = '';
|
|
584
|
-
}
|
|
585
|
-
get isSpace() {
|
|
586
|
-
return isTrueBooleanInput(this.space);
|
|
587
|
-
}
|
|
588
|
-
get isTeaser() {
|
|
589
|
-
return isTrueBooleanInput(this.teaser);
|
|
590
|
-
}
|
|
591
|
-
get isHasImage() {
|
|
592
|
-
return isTrueBooleanInput(this.hasImage);
|
|
593
|
-
}
|
|
594
|
-
get isRounded() {
|
|
595
|
-
return isTrueBooleanInput(this.rounded);
|
|
596
|
-
}
|
|
597
|
-
get isShadow() {
|
|
598
|
-
return isTrueBooleanInput(this.shadow);
|
|
599
|
-
}
|
|
600
|
-
}
|
|
601
|
-
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
602
|
-
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: CardComponent, selector: "it-card", inputs: { space: "space", teaser: "teaser", hasImage: "hasImage", rounded: "rounded", shadow: "shadow", cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card-wrapper\" [class.card-space]=\"isSpace\">\n <div class=\"card {{cardClass}}\"\n [class.card-teaser]=\"isTeaser\"\n [class.card-img.no-after]=\"isHasImage\"\n [class.shadow]=\"isShadow\"\n [class.rounded]=\"isRounded\">\n\n <ng-content select=\"[beforeBody]\"></ng-content>\n\n <div class=\"card-body {{bodyClass}}\">\n <ng-content></ng-content>\n </div>\n\n </div>\n</div>\n", styles: [".card-body:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CardComponent, decorators: [{
|
|
604
|
-
type: Component,
|
|
605
|
-
args: [{ selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-wrapper\" [class.card-space]=\"isSpace\">\n <div class=\"card {{cardClass}}\"\n [class.card-teaser]=\"isTeaser\"\n [class.card-img.no-after]=\"isHasImage\"\n [class.shadow]=\"isShadow\"\n [class.rounded]=\"isRounded\">\n\n <ng-content select=\"[beforeBody]\"></ng-content>\n\n <div class=\"card-body {{bodyClass}}\">\n <ng-content></ng-content>\n </div>\n\n </div>\n</div>\n", styles: [".card-body:empty{display:none}\n"] }]
|
|
606
|
-
}], propDecorators: { space: [{
|
|
607
|
-
type: Input
|
|
608
|
-
}], teaser: [{
|
|
609
|
-
type: Input
|
|
610
|
-
}], hasImage: [{
|
|
611
|
-
type: Input
|
|
612
|
-
}], rounded: [{
|
|
613
|
-
type: Input
|
|
614
|
-
}], shadow: [{
|
|
615
|
-
type: Input
|
|
616
|
-
}], cardClass: [{
|
|
617
|
-
type: Input
|
|
618
|
-
}], bodyClass: [{
|
|
619
|
-
type: Input
|
|
620
|
-
}] } });
|
|
621
|
-
|
|
622
|
-
/**
|
|
623
|
-
* Carousel Item
|
|
624
|
-
* @description element, image or text slide of carousel
|
|
625
|
-
*/
|
|
626
|
-
class CarouselItemComponent extends AbstractComponent {
|
|
627
|
-
}
|
|
628
|
-
CarouselItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CarouselItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
629
|
-
CarouselItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: CarouselItemComponent, 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 });
|
|
630
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CarouselItemComponent, decorators: [{
|
|
631
|
-
type: Component,
|
|
632
|
-
args: [{ selector: 'it-carousel-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
633
|
-
}], propDecorators: { htmlContent: [{
|
|
634
|
-
type: ViewChild,
|
|
635
|
-
args: [TemplateRef]
|
|
636
|
-
}] } });
|
|
637
|
-
|
|
638
|
-
/**
|
|
639
|
-
* Carousel
|
|
640
|
-
* @description A presentation component for scrolling through elements, images or text slides.
|
|
641
|
-
*/
|
|
642
|
-
class CarouselComponent {
|
|
643
|
-
constructor(_changeDetectorRef) {
|
|
644
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
645
|
-
/**
|
|
646
|
-
* The carousel type
|
|
647
|
-
* @default default
|
|
648
|
-
*/
|
|
649
|
-
this.type = 'default';
|
|
650
|
-
/**
|
|
651
|
-
* Custom class in splide__track element
|
|
652
|
-
* @default ''
|
|
653
|
-
*/
|
|
654
|
-
this.trackClass = '';
|
|
655
|
-
}
|
|
656
|
-
get typeClass() {
|
|
657
|
-
const typeClass = 'it-carousel-landscape-abstract';
|
|
658
|
-
return this.type === 'default' ? typeClass : typeClass + `-${this.type}`;
|
|
659
|
-
}
|
|
660
|
-
get isFullCarousel() {
|
|
661
|
-
return isTrueBooleanInput(this.fullCarousel);
|
|
662
|
-
}
|
|
663
|
-
get isBigImg() {
|
|
664
|
-
return isTrueBooleanInput(this.bigImg);
|
|
665
|
-
}
|
|
666
|
-
get isStandardImage() {
|
|
667
|
-
return isTrueBooleanInput(this.standardImage);
|
|
668
|
-
}
|
|
669
|
-
get isLined() {
|
|
670
|
-
return isTrueBooleanInput(this.lined);
|
|
671
|
-
}
|
|
672
|
-
ngAfterViewInit() {
|
|
673
|
-
var _a;
|
|
674
|
-
this.carousel = CarouselBI.getOrCreateInstance(this.carouselDiv.nativeElement);
|
|
675
|
-
(_a = this.items) === null || _a === void 0 ? void 0 : _a.changes.pipe(// When carousel items changes (dynamic add/remove)
|
|
676
|
-
startWith(undefined)).subscribe(() => {
|
|
677
|
-
var _a, _b;
|
|
678
|
-
(_a = this.itemSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
|
|
679
|
-
this.itemSubscriptions = (_b = this.items) === null || _b === void 0 ? void 0 : _b.map(item => item.valueChanges.subscribe(() => {
|
|
680
|
-
this._changeDetectorRef.detectChanges(); // DetectChanges when carousel item attributes changes
|
|
681
|
-
}));
|
|
682
|
-
this._changeDetectorRef.detectChanges(); // Force update html render
|
|
683
|
-
});
|
|
684
|
-
}
|
|
685
|
-
ngOnDestroy() {
|
|
686
|
-
var _a;
|
|
687
|
-
(_a = this.itemSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(item => item.unsubscribe());
|
|
688
|
-
}
|
|
689
|
-
/**
|
|
690
|
-
* Removes CarouselBI features
|
|
691
|
-
*/
|
|
692
|
-
dispose() {
|
|
693
|
-
var _a;
|
|
694
|
-
(_a = this.carousel) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
695
|
-
}
|
|
696
|
-
}
|
|
697
|
-
CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
698
|
-
CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: CarouselComponent, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: "fullCarousel", bigImg: "bigImg", standardImage: "standardImage", lined: "lined" }, queries: [{ propertyName: "items", predicate: CarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div #carousel class=\"it-carousel-wrapper splide {{typeClass}}\"\n [class.it-full-carousel]=\"isFullCarousel\"\n [class.it-big-img]=\"isBigImg\"\n [class.it-standard-image]=\"isStandardImage\"\n data-bs-carousel-splide>\n\n <div class=\"it-header-block\" *ngIf=\"title\">\n <div class=\"it-header-block-title\">\n <h2>{{title}}</h2>\n </div>\n </div>\n\n <div class=\"splide__track {{trackClass}}\">\n <ul class=\"splide__list\">\n <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n <div class=\"it-single-slide-wrapper\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </div>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;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{align-items:center;display:flex;flex-wrap:wrap;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;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;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{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;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:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
699
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
700
|
-
type: Component,
|
|
701
|
-
args: [{ selector: 'it-carousel', exportAs: 'itCarousel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #carousel class=\"it-carousel-wrapper splide {{typeClass}}\"\n [class.it-full-carousel]=\"isFullCarousel\"\n [class.it-big-img]=\"isBigImg\"\n [class.it-standard-image]=\"isStandardImage\"\n data-bs-carousel-splide>\n\n <div class=\"it-header-block\" *ngIf=\"title\">\n <div class=\"it-header-block-title\">\n <h2>{{title}}</h2>\n </div>\n </div>\n\n <div class=\"splide__track {{trackClass}}\">\n <ul class=\"splide__list\">\n <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n <div class=\"it-single-slide-wrapper\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </div>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;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{align-items:center;display:flex;flex-wrap:wrap;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;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;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{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;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:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"] }]
|
|
702
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
703
|
-
type: Input
|
|
704
|
-
}], type: [{
|
|
705
|
-
type: Input
|
|
706
|
-
}], trackClass: [{
|
|
707
|
-
type: Input
|
|
708
|
-
}], fullCarousel: [{
|
|
709
|
-
type: Input
|
|
710
|
-
}], bigImg: [{
|
|
711
|
-
type: Input
|
|
712
|
-
}], standardImage: [{
|
|
713
|
-
type: Input
|
|
714
|
-
}], lined: [{
|
|
715
|
-
type: Input
|
|
716
|
-
}], items: [{
|
|
717
|
-
type: ContentChildren,
|
|
718
|
-
args: [CarouselItemComponent]
|
|
719
|
-
}], carouselDiv: [{
|
|
720
|
-
type: ViewChild,
|
|
721
|
-
args: ['carousel']
|
|
722
|
-
}] } });
|
|
723
|
-
|
|
724
|
-
class LinkComponent extends AbstractComponent {
|
|
725
|
-
constructor() {
|
|
726
|
-
super(...arguments);
|
|
727
|
-
/**
|
|
728
|
-
* Custom class
|
|
729
|
-
*/
|
|
730
|
-
this.class = '';
|
|
731
|
-
}
|
|
732
|
-
get isExternalLink() {
|
|
733
|
-
return isTrueBooleanInput(this.externalLink);
|
|
734
|
-
}
|
|
735
|
-
get isDisabled() {
|
|
736
|
-
return isTrueBooleanInput(this.disabled);
|
|
737
|
-
}
|
|
738
|
-
ngAfterViewInit() {
|
|
739
|
-
super.ngAfterViewInit();
|
|
740
|
-
this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
|
|
741
|
-
}
|
|
742
|
-
}
|
|
743
|
-
LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: LinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
744
|
-
LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: LinkComponent, selector: "it-link", inputs: { href: "href", externalLink: "externalLink", disabled: "disabled", class: "class" }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isExternalLink; else externalLink\" [id]=\"id\" [class]=\"class\" [routerLink]=\"isDisabled ? null : href\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n <a [id]=\"id\" [class]=\"class\" [attr.href]=\"isDisabled ? null : href\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </a>\n</ng-template>\n\n<ng-template #linkContent>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
745
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: LinkComponent, decorators: [{
|
|
746
|
-
type: Component,
|
|
747
|
-
args: [{ selector: 'it-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a *ngIf=\"!isExternalLink; else externalLink\" [id]=\"id\" [class]=\"class\" [routerLink]=\"isDisabled ? null : href\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n <a [id]=\"id\" [class]=\"class\" [attr.href]=\"isDisabled ? null : href\">\n <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n </a>\n</ng-template>\n\n<ng-template #linkContent>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
748
|
-
}], propDecorators: { href: [{
|
|
749
|
-
type: Input
|
|
750
|
-
}], externalLink: [{
|
|
751
|
-
type: Input
|
|
752
|
-
}], disabled: [{
|
|
753
|
-
type: Input
|
|
754
|
-
}], class: [{
|
|
755
|
-
type: Input
|
|
756
|
-
}] } });
|
|
757
|
-
|
|
758
|
-
class DropdownItemComponent extends LinkComponent {
|
|
759
|
-
constructor() {
|
|
760
|
-
super(...arguments);
|
|
761
|
-
/**
|
|
762
|
-
* The icon position
|
|
763
|
-
* @default right
|
|
764
|
-
*/
|
|
765
|
-
this.iconPosition = 'right';
|
|
766
|
-
/**
|
|
767
|
-
* Change icon color if menu is dark
|
|
768
|
-
* @default false
|
|
769
|
-
*/
|
|
770
|
-
this.isDark = false;
|
|
771
|
-
}
|
|
772
|
-
get isDivider() {
|
|
773
|
-
return isTrueBooleanInput(this.divider);
|
|
774
|
-
}
|
|
775
|
-
get isActive() {
|
|
776
|
-
return isTrueBooleanInput(this.active);
|
|
777
|
-
}
|
|
778
|
-
get isLarge() {
|
|
779
|
-
return isTrueBooleanInput(this.large);
|
|
780
|
-
}
|
|
781
|
-
get linkClass() {
|
|
782
|
-
let linkClass = `list-item ${this.isActive ? 'active' : 'dropdown-item'}`;
|
|
783
|
-
if (this.isDisabled) {
|
|
784
|
-
linkClass += ' disabled';
|
|
785
|
-
}
|
|
786
|
-
if (this.isLarge) {
|
|
787
|
-
linkClass += ' large';
|
|
788
|
-
}
|
|
789
|
-
if (this.iconName) {
|
|
790
|
-
linkClass += ` ${this.iconPosition === 'right' ? 'right-icon' : 'left-icon'}`;
|
|
791
|
-
}
|
|
792
|
-
return linkClass;
|
|
793
|
-
}
|
|
794
|
-
setDark(dark) {
|
|
795
|
-
if (this.isDark !== dark) {
|
|
796
|
-
this.isDark = dark;
|
|
797
|
-
this._changeDetectorRef.detectChanges();
|
|
798
|
-
}
|
|
799
|
-
}
|
|
800
|
-
}
|
|
801
|
-
DropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
802
|
-
DropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: { divider: "divider", active: "active", large: "large", iconName: "iconName", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<li>\n <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n <ng-template #item>\n <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n size=\"sm\"\n [name]=\"iconName\"\n [color]=\"isDark ? 'light' : 'primary'\"\n [svgClass]=\"iconPosition\"></it-icon>\n\n <span><ng-content></ng-content></span>\n\n <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n size=\"sm\"\n [name]=\"iconName\"\n [color]=\"isDark ? 'light' : 'primary'\"\n [svgClass]=\"iconPosition\"></it-icon>\n\n <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n </it-link>\n </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DropdownItemComponent, decorators: [{
|
|
804
|
-
type: Component,
|
|
805
|
-
args: [{ selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n <ng-template #item>\n <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n size=\"sm\"\n [name]=\"iconName\"\n [color]=\"isDark ? 'light' : 'primary'\"\n [svgClass]=\"iconPosition\"></it-icon>\n\n <span><ng-content></ng-content></span>\n\n <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n size=\"sm\"\n [name]=\"iconName\"\n [color]=\"isDark ? 'light' : 'primary'\"\n [svgClass]=\"iconPosition\"></it-icon>\n\n <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n </it-link>\n </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
|
|
806
|
-
}], propDecorators: { divider: [{
|
|
807
|
-
type: Input
|
|
808
|
-
}], active: [{
|
|
809
|
-
type: Input
|
|
810
|
-
}], large: [{
|
|
811
|
-
type: Input
|
|
812
|
-
}], iconName: [{
|
|
813
|
-
type: Input
|
|
814
|
-
}], iconPosition: [{
|
|
815
|
-
type: Input
|
|
816
|
-
}] } });
|
|
817
|
-
|
|
818
|
-
class DropdownComponent extends AbstractComponent {
|
|
819
|
-
constructor() {
|
|
820
|
-
super(...arguments);
|
|
821
|
-
/**
|
|
822
|
-
* Fires immediately when the show instance method is called.
|
|
823
|
-
*/
|
|
824
|
-
this.showEvent = new EventEmitter();
|
|
825
|
-
/**
|
|
826
|
-
* Fired when the dropdown has been made visible to the user and CSS transitions have completed.
|
|
827
|
-
*/
|
|
828
|
-
this.shownEvent = new EventEmitter();
|
|
829
|
-
/**
|
|
830
|
-
* Fires immediately when the hide instance method has been called.
|
|
831
|
-
*/
|
|
832
|
-
this.hideEvent = new EventEmitter();
|
|
833
|
-
/**
|
|
834
|
-
* Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
|
|
835
|
-
*/
|
|
836
|
-
this.hiddenEvent = new EventEmitter();
|
|
837
|
-
}
|
|
838
|
-
get buttonClass() {
|
|
839
|
-
let btnClass = 'btn dropdown-toggle';
|
|
840
|
-
if (this.color) {
|
|
841
|
-
btnClass += ` btn-${this.color}`;
|
|
842
|
-
}
|
|
843
|
-
else {
|
|
844
|
-
btnClass += ` btn-dropdown`;
|
|
845
|
-
}
|
|
846
|
-
return btnClass;
|
|
847
|
-
}
|
|
848
|
-
get isFullWidth() {
|
|
849
|
-
return isTrueBooleanInput(this.fullWidth);
|
|
850
|
-
}
|
|
851
|
-
get isDark() {
|
|
852
|
-
return isTrueBooleanInput(this.dark);
|
|
853
|
-
}
|
|
854
|
-
ngOnChanges(changes) {
|
|
855
|
-
if (changes['dark'] && !changes['dark'].firstChange) {
|
|
856
|
-
this.setDarkItems();
|
|
857
|
-
}
|
|
858
|
-
super.ngOnChanges(changes);
|
|
859
|
-
}
|
|
860
|
-
ngAfterViewInit() {
|
|
861
|
-
super.ngAfterViewInit();
|
|
862
|
-
this.setDarkItems();
|
|
863
|
-
if (this.dropdownButton) {
|
|
864
|
-
const element = this.dropdownButton.nativeElement;
|
|
865
|
-
this.dropdown = Dropdown.getOrCreateInstance(element);
|
|
866
|
-
element.addEventListener('show.bs.dropdown', event => this.showEvent.emit(event));
|
|
867
|
-
element.addEventListener('shown.bs.dropdown', event => this.shownEvent.emit(event));
|
|
868
|
-
element.addEventListener('hide.bs.dropdown', event => this.hideEvent.emit(event));
|
|
869
|
-
element.addEventListener('hidden.bs.dropdown', event => this.hiddenEvent.emit(event));
|
|
870
|
-
}
|
|
871
|
-
}
|
|
872
|
-
/**
|
|
873
|
-
* Set child items dark mode
|
|
874
|
-
* @private
|
|
875
|
-
*/
|
|
876
|
-
setDarkItems() {
|
|
877
|
-
var _a;
|
|
878
|
-
(_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach(item => {
|
|
879
|
-
item.setDark(this.isDark);
|
|
880
|
-
});
|
|
881
|
-
}
|
|
882
|
-
/**
|
|
883
|
-
* Toggles the dropdown menu of a given navbar or tabbed navigation.
|
|
884
|
-
*/
|
|
885
|
-
toggle() {
|
|
886
|
-
var _a;
|
|
887
|
-
(_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.toggle();
|
|
888
|
-
}
|
|
889
|
-
/**
|
|
890
|
-
* Shows the dropdown menu of a given navbar or tabbed navigation.
|
|
891
|
-
*/
|
|
892
|
-
show() {
|
|
893
|
-
var _a;
|
|
894
|
-
(_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show();
|
|
895
|
-
}
|
|
896
|
-
/**
|
|
897
|
-
* Hides the dropdown menu of a given navbar or tabbed navigation.
|
|
898
|
-
*/
|
|
899
|
-
hide() {
|
|
900
|
-
var _a;
|
|
901
|
-
(_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
|
|
902
|
-
}
|
|
903
|
-
/**
|
|
904
|
-
* Updates the position of an element's dropdown.
|
|
905
|
-
*/
|
|
906
|
-
update() {
|
|
907
|
-
var _a;
|
|
908
|
-
(_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.update();
|
|
909
|
-
}
|
|
910
|
-
/**
|
|
911
|
-
* Destroys an element's dropdown. (Removes stored data on the DOM element)
|
|
912
|
-
*/
|
|
913
|
-
dispose() {
|
|
914
|
-
var _a;
|
|
915
|
-
(_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
916
|
-
}
|
|
917
|
-
}
|
|
918
|
-
DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
919
|
-
DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: DropdownComponent, selector: "it-dropdown", inputs: { color: "color", direction: "direction", fullWidth: "fullWidth", dark: "dark" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, queries: [{ propertyName: "items", predicate: DropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{direction}}\">\n <button #dropdownButton [id]=\"id\"\n [class]=\"buttonClass\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\">\n <ng-content select=\"[button]\"></ng-content>\n <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n </button>\n\n <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [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", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
920
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
921
|
-
type: Component,
|
|
922
|
-
args: [{ selector: 'it-dropdown', exportAs: 'itDropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropdown {{direction}}\">\n <button #dropdownButton [id]=\"id\"\n [class]=\"buttonClass\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\">\n <ng-content select=\"[button]\"></ng-content>\n <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n </button>\n\n <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [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", styles: [".link-list-heading:empty{display:none}\n"] }]
|
|
923
|
-
}], propDecorators: { color: [{
|
|
924
|
-
type: Input
|
|
925
|
-
}], direction: [{
|
|
926
|
-
type: Input
|
|
927
|
-
}], fullWidth: [{
|
|
928
|
-
type: Input
|
|
929
|
-
}], dark: [{
|
|
930
|
-
type: Input
|
|
931
|
-
}], items: [{
|
|
932
|
-
type: ContentChildren,
|
|
933
|
-
args: [DropdownItemComponent]
|
|
934
|
-
}], showEvent: [{
|
|
935
|
-
type: Output
|
|
936
|
-
}], shownEvent: [{
|
|
937
|
-
type: Output
|
|
938
|
-
}], hideEvent: [{
|
|
939
|
-
type: Output
|
|
940
|
-
}], hiddenEvent: [{
|
|
941
|
-
type: Output
|
|
942
|
-
}], dropdownButton: [{
|
|
943
|
-
type: ViewChild,
|
|
944
|
-
args: ['dropdownButton']
|
|
945
|
-
}] } });
|
|
946
|
-
|
|
947
|
-
class ListComponent {
|
|
948
|
-
get isLinkList() {
|
|
949
|
-
return isTrueBooleanInput(this.linkList);
|
|
950
|
-
}
|
|
951
|
-
}
|
|
952
|
-
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
953
|
-
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: ListComponent, selector: "it-list", inputs: { linkList: "linkList" }, ngImport: i0, template: "<div [class]=\"isLinkList? 'link-list-wrapper' : 'it-list-wrapper'\">\n <ul [class]=\"isLinkList? 'link-list' : 'it-list'\">\n <ng-content></ng-content>\n </ul>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ListComponent, decorators: [{
|
|
955
|
-
type: Component,
|
|
956
|
-
args: [{ selector: 'it-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"isLinkList? 'link-list-wrapper' : 'it-list-wrapper'\">\n <ul [class]=\"isLinkList? 'link-list' : 'it-list'\">\n <ng-content></ng-content>\n </ul>\n</div>\n" }]
|
|
957
|
-
}], propDecorators: { linkList: [{
|
|
958
|
-
type: Input
|
|
959
|
-
}] } });
|
|
960
|
-
|
|
961
|
-
class ListItemComponent extends LinkComponent {
|
|
962
|
-
get itemClass() {
|
|
963
|
-
let itemClass = 'list-item';
|
|
964
|
-
if (isTrueBooleanInput(this.active)) {
|
|
965
|
-
itemClass += ` active`;
|
|
966
|
-
}
|
|
967
|
-
if (isTrueBooleanInput(this.large)) {
|
|
968
|
-
itemClass += ` large`;
|
|
969
|
-
}
|
|
970
|
-
if (isTrueBooleanInput(this.iconLeft)) {
|
|
971
|
-
itemClass += ` icon-left`;
|
|
972
|
-
}
|
|
973
|
-
if (this.class) {
|
|
974
|
-
itemClass += ` ${this.class}`;
|
|
975
|
-
}
|
|
976
|
-
return itemClass;
|
|
977
|
-
}
|
|
978
|
-
}
|
|
979
|
-
ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
980
|
-
ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: ListItemComponent, selector: "it-list-item", inputs: { active: "active", large: "large", iconLeft: "iconLeft", 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 <div *ngIf=\"avatar\" class=\"avatar size-lg\">\n <img [attr.src]=\"avatar\" alt=\"avatar\">\n </div>\n\n <div *ngIf=\"image\" class=\"it-thumb\">\n <img [attr.src]=\"image\" alt=\"thumb\">\n </div>\n\n <div class=\"it-right-zone\">\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\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\n <div *ngIf=\"!href; else link\" [class]=\"itemClass\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n\n <ng-template #link>\n <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </it-link>\n </ng-template>\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
982
|
-
type: Component,
|
|
983
|
-
args: [{ selector: 'it-list-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n <ng-template #content>\n <div class=\"it-rounded-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <div *ngIf=\"avatar\" class=\"avatar size-lg\">\n <img [attr.src]=\"avatar\" alt=\"avatar\">\n </div>\n\n <div *ngIf=\"image\" class=\"it-thumb\">\n <img [attr.src]=\"image\" alt=\"thumb\">\n </div>\n\n <div class=\"it-right-zone\">\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\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\n <div *ngIf=\"!href; else link\" [class]=\"itemClass\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n\n <ng-template #link>\n <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </it-link>\n </ng-template>\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}\n"] }]
|
|
984
|
-
}], propDecorators: { active: [{
|
|
985
|
-
type: Input
|
|
986
|
-
}], large: [{
|
|
987
|
-
type: Input
|
|
988
|
-
}], iconLeft: [{
|
|
989
|
-
type: Input
|
|
990
|
-
}], avatar: [{
|
|
991
|
-
type: Input
|
|
992
|
-
}], image: [{
|
|
993
|
-
type: Input
|
|
994
|
-
}] } });
|
|
995
|
-
|
|
996
|
-
/**
|
|
997
|
-
* Modal windows
|
|
998
|
-
* @description To show featured content, notifications to users, or personalized content.
|
|
999
|
-
*/
|
|
1000
|
-
class ModalComponent extends AbstractComponent {
|
|
1001
|
-
constructor() {
|
|
1002
|
-
super(...arguments);
|
|
1003
|
-
/**
|
|
1004
|
-
* Show/Hide close button on header
|
|
1005
|
-
* @default true
|
|
1006
|
-
*/
|
|
1007
|
-
this.closeButton = true;
|
|
1008
|
-
/**
|
|
1009
|
-
* To have modals that appear with fades
|
|
1010
|
-
* @default true
|
|
1011
|
-
*/
|
|
1012
|
-
this.fade = true;
|
|
1013
|
-
/**
|
|
1014
|
-
* This event fires immediately when the instance method show is called.
|
|
1015
|
-
*/
|
|
1016
|
-
this.showEvent = new EventEmitter();
|
|
1017
|
-
/**
|
|
1018
|
-
* This event fires when the modal has been made visible to the user (it will wait for CSS transitions to complete).
|
|
1019
|
-
*/
|
|
1020
|
-
this.shownEvent = new EventEmitter();
|
|
1021
|
-
/**
|
|
1022
|
-
* This event is raised immediately when the instance method hide has been called.
|
|
1023
|
-
*/
|
|
1024
|
-
this.hideEvent = new EventEmitter();
|
|
1025
|
-
/**
|
|
1026
|
-
* This event fires when the modal has finished hiding from the user (it will wait for CSS transitions to complete).
|
|
1027
|
-
*/
|
|
1028
|
-
this.hiddenEvent = new EventEmitter();
|
|
1029
|
-
/**
|
|
1030
|
-
* This event is fired when the modal is displayed, its background is static and a click outside the modal or a press
|
|
1031
|
-
* of the esc key occurs and data-bs-keyboard is set to false.
|
|
1032
|
-
*/
|
|
1033
|
-
this.hidePreventedEvent = new EventEmitter();
|
|
1034
|
-
}
|
|
1035
|
-
ngAfterViewInit() {
|
|
1036
|
-
super.ngAfterViewInit();
|
|
1037
|
-
this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
|
|
1038
|
-
if (this.modalElement) {
|
|
1039
|
-
const element = this.modalElement.nativeElement;
|
|
1040
|
-
this.modal = Modal.getOrCreateInstance(element);
|
|
1041
|
-
element.addEventListener('show.bs.modal', event => this.showEvent.emit(event));
|
|
1042
|
-
element.addEventListener('shown.bs.modal', event => this.shownEvent.emit(event));
|
|
1043
|
-
element.addEventListener('hide.bs.modal', event => this.hideEvent.emit(event));
|
|
1044
|
-
element.addEventListener('hidden.bs.modal', event => this.hiddenEvent.emit(event));
|
|
1045
|
-
element.addEventListener('hidePrevented.bs.modal', event => this.hidePreventedEvent.emit(event));
|
|
1046
|
-
}
|
|
1047
|
-
}
|
|
1048
|
-
get isCloseButton() {
|
|
1049
|
-
return isTrueBooleanInput(this.closeButton);
|
|
1050
|
-
}
|
|
1051
|
-
get isFooterShadow() {
|
|
1052
|
-
return isTrueBooleanInput(this.footerShadow);
|
|
1053
|
-
}
|
|
1054
|
-
get modalClass() {
|
|
1055
|
-
let modalClass = 'modal';
|
|
1056
|
-
if (isTrueBooleanInput(this.fade)) {
|
|
1057
|
-
modalClass += ` fade`;
|
|
1058
|
-
}
|
|
1059
|
-
if (isTrueBooleanInput(this.alertModal)) {
|
|
1060
|
-
modalClass += ` alert-modal`;
|
|
1061
|
-
}
|
|
1062
|
-
if (isTrueBooleanInput(this.dialogLinkList)) {
|
|
1063
|
-
modalClass += ` it-dialog-link-list`;
|
|
1064
|
-
}
|
|
1065
|
-
if (isTrueBooleanInput(this.popconfirm)) {
|
|
1066
|
-
modalClass += ` popconfirm-modal`;
|
|
1067
|
-
}
|
|
1068
|
-
if (isTrueBooleanInput(this.scrollable)) {
|
|
1069
|
-
modalClass += ` it-dialog-scrollable`;
|
|
1070
|
-
}
|
|
1071
|
-
return modalClass;
|
|
1072
|
-
}
|
|
1073
|
-
get dialogClass() {
|
|
1074
|
-
let dialogClass = 'modal-dialog';
|
|
1075
|
-
if (this.alignment) {
|
|
1076
|
-
dialogClass += ` modal-dialog-${this.alignment}`;
|
|
1077
|
-
}
|
|
1078
|
-
if (this.size) {
|
|
1079
|
-
dialogClass += ` modal-${this.size}`;
|
|
1080
|
-
}
|
|
1081
|
-
return dialogClass;
|
|
1082
|
-
}
|
|
1083
|
-
/**
|
|
1084
|
-
* Manually activate/deactivate a modal. Returns to the caller before the modal has actually been shown or hidden
|
|
1085
|
-
*/
|
|
1086
|
-
toggle() {
|
|
1087
|
-
var _a;
|
|
1088
|
-
(_a = this.modal) === null || _a === void 0 ? void 0 : _a.toggle();
|
|
1089
|
-
}
|
|
1090
|
-
/**
|
|
1091
|
-
* Manually open a modal. Returns to the caller before the modal has actually been displayed
|
|
1092
|
-
*/
|
|
1093
|
-
show() {
|
|
1094
|
-
var _a;
|
|
1095
|
-
(_a = this.modal) === null || _a === void 0 ? void 0 : _a.show();
|
|
1096
|
-
}
|
|
1097
|
-
/**
|
|
1098
|
-
* Manually hide a modal. Returns to the caller before the modal has actually been hidden
|
|
1099
|
-
*/
|
|
1100
|
-
hide() {
|
|
1101
|
-
var _a;
|
|
1102
|
-
(_a = this.modal) === null || _a === void 0 ? void 0 : _a.hide();
|
|
1103
|
-
}
|
|
1104
|
-
/**
|
|
1105
|
-
* Manually reposition the modal if the height of the modal changes when it is opened (in case a scroll bar appears).
|
|
1106
|
-
*/
|
|
1107
|
-
handleUpdate() {
|
|
1108
|
-
var _a;
|
|
1109
|
-
(_a = this.modal) === null || _a === void 0 ? void 0 : _a.handleUpdate();
|
|
1110
|
-
}
|
|
1111
|
-
/**
|
|
1112
|
-
* Destroys the modal of an element.
|
|
1113
|
-
*/
|
|
1114
|
-
dispose() {
|
|
1115
|
-
var _a;
|
|
1116
|
-
(_a = this.modal) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
1117
|
-
}
|
|
1118
|
-
}
|
|
1119
|
-
ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1120
|
-
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: ModalComponent, selector: "it-modal", inputs: { closeButton: "closeButton", alertModal: "alertModal", dialogLinkList: "dialogLinkList", popconfirm: "popconfirm", scrollable: "scrollable", fade: "fade", alignment: "alignment", size: "size", footerShadow: "footerShadow" }, 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 #modalElement [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\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 <button *ngIf=\"isCloseButton\" type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"\n [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\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]=\"isFooterShadow\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [".modal-footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1122
|
-
type: Component,
|
|
1123
|
-
args: [{ selector: 'it-modal', exportAs: 'itModal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #modalElement [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\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 <button *ngIf=\"isCloseButton\" type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"\n [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\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]=\"isFooterShadow\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [".modal-footer:empty{display:none}\n"] }]
|
|
1124
|
-
}], propDecorators: { closeButton: [{
|
|
1125
|
-
type: Input
|
|
1126
|
-
}], alertModal: [{
|
|
1127
|
-
type: Input
|
|
1128
|
-
}], dialogLinkList: [{
|
|
1129
|
-
type: Input
|
|
1130
|
-
}], popconfirm: [{
|
|
1131
|
-
type: Input
|
|
1132
|
-
}], scrollable: [{
|
|
1133
|
-
type: Input
|
|
1134
|
-
}], fade: [{
|
|
1135
|
-
type: Input
|
|
1136
|
-
}], alignment: [{
|
|
1137
|
-
type: Input
|
|
1138
|
-
}], size: [{
|
|
1139
|
-
type: Input
|
|
1140
|
-
}], footerShadow: [{
|
|
1141
|
-
type: Input
|
|
1142
|
-
}], showEvent: [{
|
|
1143
|
-
type: Output
|
|
1144
|
-
}], shownEvent: [{
|
|
1145
|
-
type: Output
|
|
1146
|
-
}], hideEvent: [{
|
|
1147
|
-
type: Output
|
|
1148
|
-
}], hiddenEvent: [{
|
|
1149
|
-
type: Output
|
|
1150
|
-
}], hidePreventedEvent: [{
|
|
1151
|
-
type: Output
|
|
1152
|
-
}], modalElement: [{
|
|
1153
|
-
type: ViewChild,
|
|
1154
|
-
args: ['modalElement', { static: false }]
|
|
1155
|
-
}] } });
|
|
1156
|
-
|
|
1157
|
-
var NotificationType;
|
|
1158
|
-
(function (NotificationType) {
|
|
1159
|
-
NotificationType["Standard"] = "standard";
|
|
1160
|
-
NotificationType["Success"] = "success";
|
|
1161
|
-
NotificationType["Error"] = "error";
|
|
1162
|
-
NotificationType["Info"] = "info";
|
|
1163
|
-
NotificationType["Warning"] = "warning";
|
|
1164
|
-
})(NotificationType || (NotificationType = {}));
|
|
1165
|
-
var NotificationPosition;
|
|
1166
|
-
(function (NotificationPosition) {
|
|
1167
|
-
NotificationPosition["Top"] = "top-fix mt-3";
|
|
1168
|
-
NotificationPosition["Bottom"] = "bottom-fix mb-3";
|
|
1169
|
-
NotificationPosition["Left"] = "left-fix ms-3";
|
|
1170
|
-
NotificationPosition["Right"] = "right-fix me-3";
|
|
1171
|
-
})(NotificationPosition || (NotificationPosition = {}));
|
|
1172
|
-
|
|
1173
|
-
class NotificationsService {
|
|
1174
|
-
constructor() {
|
|
1175
|
-
this.subject = new Subject();
|
|
1176
|
-
}
|
|
1177
|
-
/**
|
|
1178
|
-
* Listen on notification arrived
|
|
1179
|
-
* @param filterType filter type of notification
|
|
1180
|
-
*/
|
|
1181
|
-
onNotification(filterType) {
|
|
1182
|
-
return this.subject.asObservable().pipe(filter(n => n && (!filterType || (n.type === filterType))));
|
|
1183
|
-
}
|
|
1184
|
-
/**
|
|
1185
|
-
* Show new notification
|
|
1186
|
-
* @param notification notification
|
|
1187
|
-
*/
|
|
1188
|
-
addNotification(notification) {
|
|
1189
|
-
this.subject.next(notification);
|
|
1190
|
-
}
|
|
1191
|
-
/**
|
|
1192
|
-
* Create new Standard notification
|
|
1193
|
-
* @param title notification title
|
|
1194
|
-
* @param message notification message
|
|
1195
|
-
* @param dismissible notification dismissible
|
|
1196
|
-
* @param duration notification duration (milliseconds)
|
|
1197
|
-
* @param position notification position
|
|
1198
|
-
*/
|
|
1199
|
-
standard(title, message, dismissible, duration, position) {
|
|
1200
|
-
this.addNotification({
|
|
1201
|
-
type: NotificationType.Standard,
|
|
1202
|
-
message,
|
|
1203
|
-
title,
|
|
1204
|
-
duration,
|
|
1205
|
-
dismissible,
|
|
1206
|
-
position
|
|
1207
|
-
});
|
|
1208
|
-
}
|
|
1209
|
-
/**
|
|
1210
|
-
* Create new Success notification
|
|
1211
|
-
* @param title notification title
|
|
1212
|
-
* @param message notification message
|
|
1213
|
-
* @param dismissible notification dismissible
|
|
1214
|
-
* @param duration notification duration (milliseconds)
|
|
1215
|
-
* @param position notification position
|
|
1216
|
-
*/
|
|
1217
|
-
success(title, message, dismissible, duration, position) {
|
|
1218
|
-
this.addNotification({
|
|
1219
|
-
type: NotificationType.Success,
|
|
1220
|
-
message,
|
|
1221
|
-
title,
|
|
1222
|
-
duration,
|
|
1223
|
-
dismissible,
|
|
1224
|
-
position
|
|
1225
|
-
});
|
|
1226
|
-
}
|
|
1227
|
-
/**
|
|
1228
|
-
* Create new Error notification
|
|
1229
|
-
* @param title notification title
|
|
1230
|
-
* @param message notification message
|
|
1231
|
-
* @param dismissible notification dismissible
|
|
1232
|
-
* @param duration notification duration (milliseconds)
|
|
1233
|
-
* @param position notification position
|
|
1234
|
-
*/
|
|
1235
|
-
error(title, message, dismissible, duration, position) {
|
|
1236
|
-
this.addNotification({
|
|
1237
|
-
type: NotificationType.Error,
|
|
1238
|
-
message,
|
|
1239
|
-
title,
|
|
1240
|
-
duration,
|
|
1241
|
-
dismissible,
|
|
1242
|
-
position
|
|
1243
|
-
});
|
|
1244
|
-
}
|
|
1245
|
-
/**
|
|
1246
|
-
* Create new Warning notification
|
|
1247
|
-
* @param title notification title
|
|
1248
|
-
* @param message notification message
|
|
1249
|
-
* @param dismissible notification dismissible
|
|
1250
|
-
* @param duration notification duration (milliseconds)
|
|
1251
|
-
* @param position notification position
|
|
1252
|
-
*/
|
|
1253
|
-
warning(title, message, dismissible, duration, position) {
|
|
1254
|
-
this.addNotification({
|
|
1255
|
-
type: NotificationType.Warning,
|
|
1256
|
-
message,
|
|
1257
|
-
title,
|
|
1258
|
-
duration,
|
|
1259
|
-
dismissible,
|
|
1260
|
-
position
|
|
1261
|
-
});
|
|
1262
|
-
}
|
|
1263
|
-
/**
|
|
1264
|
-
* Create new Info notification
|
|
1265
|
-
* @param title notification title
|
|
1266
|
-
* @param message notification message
|
|
1267
|
-
* @param dismissible notification dismissible
|
|
1268
|
-
* @param duration notification duration (milliseconds)
|
|
1269
|
-
* @param position notification position
|
|
1270
|
-
*/
|
|
1271
|
-
info(title, message, dismissible, duration, position) {
|
|
1272
|
-
this.addNotification({
|
|
1273
|
-
type: NotificationType.Info,
|
|
1274
|
-
message,
|
|
1275
|
-
title,
|
|
1276
|
-
duration,
|
|
1277
|
-
dismissible,
|
|
1278
|
-
position
|
|
1279
|
-
});
|
|
1280
|
-
}
|
|
1281
|
-
}
|
|
1282
|
-
NotificationsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: NotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1283
|
-
NotificationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: NotificationsService, providedIn: 'root' });
|
|
1284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: NotificationsService, decorators: [{
|
|
1285
|
-
type: Injectable,
|
|
1286
|
-
args: [{ providedIn: 'root' }]
|
|
1287
|
-
}] });
|
|
1288
|
-
|
|
1289
|
-
class NotificationsComponent {
|
|
1290
|
-
constructor(_changeDetectorRef, _notificationService) {
|
|
1291
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
1292
|
-
this._notificationService = _notificationService;
|
|
1293
|
-
/**
|
|
1294
|
-
* Default notifications duration (milliseconds)
|
|
1295
|
-
* @default 8000
|
|
1296
|
-
*/
|
|
1297
|
-
this.duration = 8000;
|
|
1298
|
-
/**
|
|
1299
|
-
* Default notifications is dismissible
|
|
1300
|
-
* @default true
|
|
1301
|
-
*/
|
|
1302
|
-
this.dismissible = true;
|
|
1303
|
-
this.notificationCount = 0;
|
|
1304
|
-
this.notifications = [];
|
|
1305
|
-
this.subscription = this._notificationService.onNotification().subscribe(notification => {
|
|
1306
|
-
if (!notification.duration) {
|
|
1307
|
-
notification.duration = this.duration; // Add duration if not is set
|
|
1308
|
-
}
|
|
1309
|
-
if (!notification.position && this.position) {
|
|
1310
|
-
notification.position = this.position; // Add position if not is set
|
|
1311
|
-
}
|
|
1312
|
-
if (notification.dismissible === undefined && isTrueBooleanInput(this.dismissible)) {
|
|
1313
|
-
notification.dismissible = true; // Add dismissible if not is set
|
|
1314
|
-
}
|
|
1315
|
-
if (!notification.icon) {
|
|
1316
|
-
notification.icon = this.getNotificationIcon(notification);
|
|
1317
|
-
}
|
|
1318
|
-
const newNotification = Object.assign(Object.assign({}, notification), { id: `${notification.type}-${this.notificationCount++}-notification` });
|
|
1319
|
-
this.notifications.push(newNotification);
|
|
1320
|
-
this._changeDetectorRef.detectChanges();
|
|
1321
|
-
setTimeout(() => {
|
|
1322
|
-
// Show the notification
|
|
1323
|
-
new Notification(document.getElementById(newNotification.id), {
|
|
1324
|
-
timeout: notification.duration
|
|
1325
|
-
}).show();
|
|
1326
|
-
// Clear notification after the duration
|
|
1327
|
-
setTimeout(() => {
|
|
1328
|
-
const index = this.notifications.findIndex(n => n.id === newNotification.id);
|
|
1329
|
-
if (index > -1) {
|
|
1330
|
-
this.notifications.splice(index, 1);
|
|
1331
|
-
if (!this.notifications.length) {
|
|
1332
|
-
this.notificationCount = 0;
|
|
1333
|
-
}
|
|
1334
|
-
this._changeDetectorRef.detectChanges();
|
|
1335
|
-
}
|
|
1336
|
-
}, notification.duration);
|
|
1337
|
-
}, 200);
|
|
1338
|
-
});
|
|
1339
|
-
}
|
|
1340
|
-
ngOnDestroy() {
|
|
1341
|
-
this.subscription.unsubscribe();
|
|
1342
|
-
}
|
|
1343
|
-
get NotificationType() {
|
|
1344
|
-
return NotificationType;
|
|
1345
|
-
}
|
|
1346
|
-
/**
|
|
1347
|
-
* Hide the notification
|
|
1348
|
-
* @param id
|
|
1349
|
-
*/
|
|
1350
|
-
hideNotification(id) {
|
|
1351
|
-
var _a;
|
|
1352
|
-
(_a = Notification.getInstance(document.getElementById(id))) === null || _a === void 0 ? void 0 : _a.hide();
|
|
1353
|
-
}
|
|
1354
|
-
/**
|
|
1355
|
-
* Retrieve the icon name by notification type
|
|
1356
|
-
* @param notification the notification
|
|
1357
|
-
* @protected
|
|
1358
|
-
*/
|
|
1359
|
-
getNotificationIcon(notification) {
|
|
1360
|
-
switch (notification.type) {
|
|
1361
|
-
case NotificationType.Success:
|
|
1362
|
-
return 'check-circle';
|
|
1363
|
-
case NotificationType.Error:
|
|
1364
|
-
return 'close-circle';
|
|
1365
|
-
case NotificationType.Warning:
|
|
1366
|
-
return 'error';
|
|
1367
|
-
case NotificationType.Info:
|
|
1368
|
-
return 'info-circle';
|
|
1369
|
-
case NotificationType.Standard:
|
|
1370
|
-
default:
|
|
1371
|
-
return undefined;
|
|
1372
|
-
}
|
|
1373
|
-
}
|
|
1374
|
-
}
|
|
1375
|
-
NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: NotificationsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NotificationsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1376
|
-
NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: NotificationsComponent, selector: "it-notifications", inputs: { duration: "duration", position: "position", dismissible: "dismissible" }, ngImport: i0, template: "<div *ngFor=\"let notification of notifications\"\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\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n <it-icon *ngIf=\"!!notification.icon\" [name]=\"notification.icon\"></it-icon>\n <ng-container>{{notification.title}}</ng-container>\n </h2>\n <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n <button *ngIf=\"notification.dismissible\" type=\"button\" class=\"btn notification-close\"\n (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</div>\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1377
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: NotificationsComponent, decorators: [{
|
|
1378
|
-
type: Component,
|
|
1379
|
-
args: [{ selector: 'it-notifications', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let notification of notifications\"\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\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n <it-icon *ngIf=\"!!notification.icon\" [name]=\"notification.icon\"></it-icon>\n <ng-container>{{notification.title}}</ng-container>\n </h2>\n <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n <button *ngIf=\"notification.dismissible\" type=\"button\" class=\"btn notification-close\"\n (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</div>\n", styles: [".notification{z-index:10000}\n"] }]
|
|
1380
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NotificationsService }]; }, propDecorators: { duration: [{
|
|
1381
|
-
type: Input
|
|
1382
|
-
}], position: [{
|
|
1383
|
-
type: Input
|
|
1384
|
-
}], dismissible: [{
|
|
1385
|
-
type: Input
|
|
1386
|
-
}] } });
|
|
1387
|
-
|
|
1388
|
-
class AbstractFormComponent extends AbstractComponent {
|
|
1389
|
-
constructor(_translateService, _ngControl) {
|
|
1390
|
-
super();
|
|
1391
|
-
this._translateService = _translateService;
|
|
1392
|
-
this._ngControl = _ngControl;
|
|
1393
|
-
/**
|
|
1394
|
-
* Validation color display mode (validation triggered if field is touched or not pristine)
|
|
1395
|
-
* - <b>true</b>: Always show the validation color
|
|
1396
|
-
* - <b>false</b>: Never show validation color
|
|
1397
|
-
* - <b>only-valid</b>: Show only valid validation color
|
|
1398
|
-
* - <b>only-invalid</b>: Show only invalid validation color
|
|
1399
|
-
* @default <b>only-invalid</b>: Show only invalid validation color
|
|
1400
|
-
*/
|
|
1401
|
-
this.validationMode = 'only-invalid';
|
|
1402
|
-
this.onChange = (_) => {
|
|
1403
|
-
};
|
|
1404
|
-
this.onTouched = () => {
|
|
1405
|
-
};
|
|
1406
|
-
this.control = new FormControl();
|
|
1407
|
-
this._ngControl && (this._ngControl.valueAccessor = this);
|
|
1408
|
-
}
|
|
1409
|
-
/**
|
|
1410
|
-
* Set the disabled state
|
|
1411
|
-
*/
|
|
1412
|
-
set disabled(isDisabled) {
|
|
1413
|
-
this.setDisabledState(isTrueBooleanInput(isDisabled));
|
|
1414
|
-
}
|
|
1415
|
-
/**
|
|
1416
|
-
* Check if field is invalid (Validation failed)
|
|
1417
|
-
*/
|
|
1418
|
-
get isInvalid() {
|
|
1419
|
-
if (this.validationMode === 'only-valid' || (this.validationMode !== 'only-invalid' && isFalseBooleanInput(this.validationMode))) {
|
|
1420
|
-
return undefined;
|
|
1421
|
-
}
|
|
1422
|
-
if (this._ngControl) {
|
|
1423
|
-
return this._ngControl.invalid === true && (!this._ngControl.pristine || this._ngControl.touched === true);
|
|
1424
|
-
}
|
|
1425
|
-
return this.control.invalid && (!this.control.pristine || this.control.touched);
|
|
1426
|
-
}
|
|
1427
|
-
/**
|
|
1428
|
-
* Check if field is valid (Validation successful)
|
|
1429
|
-
*/
|
|
1430
|
-
get isValid() {
|
|
1431
|
-
if (this.validationMode === 'only-invalid' || (this.validationMode !== 'only-valid' && isFalseBooleanInput(this.validationMode))) {
|
|
1432
|
-
return undefined;
|
|
1433
|
-
}
|
|
1434
|
-
if (this._ngControl) {
|
|
1435
|
-
return this._ngControl.valid === true && (!this._ngControl.pristine || this._ngControl.touched === true);
|
|
1436
|
-
}
|
|
1437
|
-
return this.control.valid && (!this.control.pristine || this.control.touched);
|
|
1438
|
-
}
|
|
1439
|
-
/**
|
|
1440
|
-
* Return the invalid message string from TranslateService
|
|
1441
|
-
*/
|
|
1442
|
-
get invalidMessage() {
|
|
1443
|
-
if (this.control.hasError('required')) {
|
|
1444
|
-
return this._translateService.get('it.errors.required-field');
|
|
1445
|
-
}
|
|
1446
|
-
return this._translateService.get('it.errors.invalid-field');
|
|
1447
|
-
}
|
|
1448
|
-
ngOnInit() {
|
|
1449
|
-
var _a;
|
|
1450
|
-
if ((_a = this._ngControl) === null || _a === void 0 ? void 0 : _a.control) {
|
|
1451
|
-
this.control.setValidators(this._ngControl.control.validator);
|
|
1452
|
-
}
|
|
1453
|
-
}
|
|
1454
|
-
registerOnChange(fn) {
|
|
1455
|
-
this.control.valueChanges.subscribe(fn);
|
|
1456
|
-
this.onChange = fn;
|
|
1457
|
-
}
|
|
1458
|
-
registerOnTouched(fn) {
|
|
1459
|
-
this.onTouched = fn;
|
|
1460
|
-
}
|
|
1461
|
-
setDisabledState(isDisabled) {
|
|
1462
|
-
if (isDisabled) {
|
|
1463
|
-
return this.control.disable();
|
|
1464
|
-
}
|
|
1465
|
-
this.control.enable();
|
|
1466
|
-
}
|
|
1467
|
-
writeValue(value) {
|
|
1468
|
-
this.control.setValue(value, { emitEvent: false });
|
|
1469
|
-
this._changeDetectorRef.detectChanges();
|
|
1470
|
-
}
|
|
1471
|
-
/**
|
|
1472
|
-
* Mark the control as touched
|
|
1473
|
-
*/
|
|
1474
|
-
markAsTouched() {
|
|
1475
|
-
if (!this.control.touched) {
|
|
1476
|
-
this.onTouched();
|
|
1477
|
-
}
|
|
1478
|
-
}
|
|
1479
|
-
/**
|
|
1480
|
-
* Fired to check if form control is touched
|
|
1481
|
-
*/
|
|
1482
|
-
ngDoCheck() {
|
|
1483
|
-
var _a;
|
|
1484
|
-
if (!((_a = this._ngControl) === null || _a === void 0 ? void 0 : _a.control)) {
|
|
1485
|
-
return;
|
|
1486
|
-
}
|
|
1487
|
-
const ngControl = this._ngControl.control;
|
|
1488
|
-
if (this.control.touched !== ngControl.touched) {
|
|
1489
|
-
if (ngControl.touched) {
|
|
1490
|
-
this.control.markAsTouched();
|
|
1491
|
-
}
|
|
1492
|
-
else {
|
|
1493
|
-
this.control.markAsUntouched();
|
|
1494
|
-
}
|
|
1495
|
-
this._changeDetectorRef.detectChanges();
|
|
1496
|
-
}
|
|
1497
|
-
if (this.control.pristine !== ngControl.pristine) {
|
|
1498
|
-
if (ngControl.pristine) {
|
|
1499
|
-
this.control.markAsPristine();
|
|
1500
|
-
}
|
|
1501
|
-
else {
|
|
1502
|
-
this.control.markAsDirty();
|
|
1503
|
-
}
|
|
1504
|
-
this._changeDetectorRef.detectChanges();
|
|
1505
|
-
}
|
|
1506
|
-
}
|
|
1507
|
-
/**
|
|
1508
|
-
* Add the validators in control and parent control
|
|
1509
|
-
* @param validators the validators
|
|
1510
|
-
* @protected
|
|
1511
|
-
*/
|
|
1512
|
-
addValidators(validators) {
|
|
1513
|
-
if (!Array.isArray(validators)) {
|
|
1514
|
-
validators = [validators];
|
|
1515
|
-
}
|
|
1516
|
-
validators.forEach(validator => {
|
|
1517
|
-
var _a;
|
|
1518
|
-
if (!this.control.hasValidator(validator)) {
|
|
1519
|
-
this.control.addValidators(validator);
|
|
1520
|
-
}
|
|
1521
|
-
if (((_a = this._ngControl) === null || _a === void 0 ? void 0 : _a.control) && !this._ngControl.control.hasValidator(validator)) {
|
|
1522
|
-
this._ngControl.control.addValidators(validator);
|
|
1523
|
-
}
|
|
1524
|
-
});
|
|
1525
|
-
}
|
|
1526
|
-
/**
|
|
1527
|
-
* Reports whether the control with the given path has the error specified. <br/>
|
|
1528
|
-
* If the control is not present, false is returned.
|
|
1529
|
-
* @param errorCode The code of the error to check
|
|
1530
|
-
* @param path A list of control names that designates how to move from the current control
|
|
1531
|
-
* to the control that should be queried for errors.
|
|
1532
|
-
* @returns whether the given error is present in the control at the given path.
|
|
1533
|
-
*/
|
|
1534
|
-
hasError(errorCode, path) {
|
|
1535
|
-
if (this._ngControl) {
|
|
1536
|
-
return this._ngControl.hasError(errorCode, path);
|
|
1537
|
-
}
|
|
1538
|
-
return this.control.hasError(errorCode, path);
|
|
1539
|
-
}
|
|
1540
|
-
/**
|
|
1541
|
-
* Reports error data for the control with the given path.
|
|
1542
|
-
* @param errorCode The code of the error to check
|
|
1543
|
-
* @param path A list of control names that designates how to move from the current control
|
|
1544
|
-
* to the control that should be queried for errors.
|
|
1545
|
-
* @returns error data for that particular error. If the control or error is not present,
|
|
1546
|
-
* null is returned.
|
|
1547
|
-
*/
|
|
1548
|
-
getError(errorCode, path) {
|
|
1549
|
-
if (this._ngControl) {
|
|
1550
|
-
return this._ngControl.getError(errorCode, path);
|
|
1551
|
-
}
|
|
1552
|
-
return this.control.getError(errorCode, path);
|
|
1553
|
-
}
|
|
1554
|
-
}
|
|
1555
|
-
AbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AbstractFormComponent, deps: [{ token: i1$1.TranslateService }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1556
|
-
AbstractFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: AbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: "disabled" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
|
|
1557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AbstractFormComponent, decorators: [{
|
|
1558
|
-
type: Component,
|
|
1559
|
-
args: [{ template: '' }]
|
|
1560
|
-
}], ctorParameters: function () {
|
|
1561
|
-
return [{ type: i1$1.TranslateService }, { type: i2.NgControl, decorators: [{
|
|
1562
|
-
type: Self
|
|
1563
|
-
}, {
|
|
1564
|
-
type: Optional
|
|
1565
|
-
}] }];
|
|
1566
|
-
}, propDecorators: { label: [{
|
|
1567
|
-
type: Input
|
|
1568
|
-
}], validationMode: [{
|
|
1569
|
-
type: Input
|
|
1570
|
-
}], disabled: [{
|
|
1571
|
-
type: Input
|
|
1572
|
-
}] } });
|
|
1573
|
-
|
|
1574
|
-
/**
|
|
1575
|
-
* General Email Regex (RFC 5322 Official Standard)
|
|
1576
|
-
* http://emailregex.com/
|
|
1577
|
-
*/
|
|
1578
|
-
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])+)\])/;
|
|
1579
|
-
/**
|
|
1580
|
-
* Phone number Regex
|
|
1581
|
-
*/
|
|
1582
|
-
const PHONE_NUMBER_REGEX = /^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{3})(?: *x(\d+))?\s*$/;
|
|
1583
|
-
/**
|
|
1584
|
-
* URL Regex
|
|
1585
|
-
*/
|
|
1586
|
-
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,})/;
|
|
1587
|
-
/**
|
|
1588
|
-
* The italian tax code Regex (Codice Fiscale)
|
|
1589
|
-
*/
|
|
1590
|
-
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;
|
|
1591
|
-
/**
|
|
1592
|
-
* The VAT number Regex (Partita iva)
|
|
1593
|
-
*/
|
|
1594
|
-
const VAT_NUMBER_REGEX = /^[0-9]{11}$/;
|
|
1595
|
-
/**
|
|
1596
|
-
* Italian CAP Regex
|
|
1597
|
-
*/
|
|
1598
|
-
const CAP_REGEX = /^[0-9]{5}$/;
|
|
1599
|
-
|
|
1600
|
-
class ItValidators {
|
|
1601
|
-
/**
|
|
1602
|
-
* Static pattern validator with custom error
|
|
1603
|
-
* @param regex
|
|
1604
|
-
* @param error
|
|
1605
|
-
*/
|
|
1606
|
-
static customPattern(regex, error) {
|
|
1607
|
-
return (control) => {
|
|
1608
|
-
if (!control.value) {
|
|
1609
|
-
// if control is empty return no error
|
|
1610
|
-
return null;
|
|
1611
|
-
}
|
|
1612
|
-
// test the value of the control against the regexp supplied
|
|
1613
|
-
const valid = regex.test(control.value);
|
|
1614
|
-
// if true, return no error (no error), else return error passed in the second parameter
|
|
1615
|
-
return valid ? null : error;
|
|
1616
|
-
};
|
|
1617
|
-
}
|
|
1618
|
-
/**
|
|
1619
|
-
* Set Validator if the condition is satisfied
|
|
1620
|
-
* @param validator the validator to apply if the condition is true
|
|
1621
|
-
* @param condition the condition
|
|
1622
|
-
*/
|
|
1623
|
-
static conditional(validator, condition) {
|
|
1624
|
-
return formControl => {
|
|
1625
|
-
if (!formControl.parent) {
|
|
1626
|
-
return null;
|
|
1627
|
-
}
|
|
1628
|
-
if (condition(formControl)) {
|
|
1629
|
-
return validator(formControl);
|
|
1630
|
-
}
|
|
1631
|
-
return null;
|
|
1632
|
-
};
|
|
1633
|
-
}
|
|
1634
|
-
/**
|
|
1635
|
-
* Check whether our password and confirm password are a match
|
|
1636
|
-
* @param control
|
|
1637
|
-
* @param passwordControlName the password formControlName
|
|
1638
|
-
* @param confirmControlName the confirmPassword formControlName
|
|
1639
|
-
*/
|
|
1640
|
-
static passwordMatch(control, passwordControlName = 'password', confirmControlName = 'confirmPassword') {
|
|
1641
|
-
const confirmControl = control.get(confirmControlName); // confirmPassword form control
|
|
1642
|
-
if (!confirmControl) {
|
|
1643
|
-
return null;
|
|
1644
|
-
}
|
|
1645
|
-
const passwordControl = control.get(passwordControlName); // password form control
|
|
1646
|
-
const password = passwordControl === null || passwordControl === void 0 ? void 0 : passwordControl.value; // get password from our password form control
|
|
1647
|
-
// compare is the password match
|
|
1648
|
-
if ((password && !confirmControl.value) || (confirmControl.value && password !== confirmControl.value)) {
|
|
1649
|
-
// if they don't match, set an error in our confirmPassword form control
|
|
1650
|
-
confirmControl === null || confirmControl === void 0 ? void 0 : confirmControl.setErrors({ noPasswordMatch: true });
|
|
1651
|
-
confirmControl === null || confirmControl === void 0 ? void 0 : confirmControl.markAsTouched();
|
|
1652
|
-
return control;
|
|
1653
|
-
}
|
|
1654
|
-
if (password && (passwordControl === null || passwordControl === void 0 ? void 0 : passwordControl.touched)) {
|
|
1655
|
-
confirmControl === null || confirmControl === void 0 ? void 0 : confirmControl.markAsTouched();
|
|
1656
|
-
}
|
|
1657
|
-
return null;
|
|
1658
|
-
}
|
|
1659
|
-
/**
|
|
1660
|
-
* Password validator
|
|
1661
|
-
* @param minLength minimum password length - default 10
|
|
1662
|
-
* @param hasNumber check whether the entered password has a number - default true
|
|
1663
|
-
* @param hasCapitalCase check whether the entered password has upper case letter - default true
|
|
1664
|
-
* @param hasSmallCase check whether the entered password has a lower-case letter - default true
|
|
1665
|
-
* @param hasSpecialCharacters check whether the entered password has a special character - default true
|
|
1666
|
-
* @param required the field is required - default true
|
|
1667
|
-
*/
|
|
1668
|
-
static password(minLength = 10, hasNumber = true, hasCapitalCase = true, hasSmallCase = true, hasSpecialCharacters = true, required = true) {
|
|
1669
|
-
const validators = [Validators.minLength(minLength)];
|
|
1670
|
-
if (hasNumber) {
|
|
1671
|
-
validators.push(ItValidators.customPattern(/\d/, { hasNumber }));
|
|
1672
|
-
}
|
|
1673
|
-
if (hasCapitalCase) {
|
|
1674
|
-
validators.push(ItValidators.customPattern(/[A-Z]/, { hasCapitalCase }));
|
|
1675
|
-
}
|
|
1676
|
-
if (hasSmallCase) {
|
|
1677
|
-
validators.push(ItValidators.customPattern(/[a-z]/, { hasSmallCase }));
|
|
1678
|
-
}
|
|
1679
|
-
if (hasSpecialCharacters) {
|
|
1680
|
-
validators.push(ItValidators.customPattern(new RegExp(`[${ItValidators.SpecialCharacterPattern}]`), { hasSpecialCharacters }));
|
|
1681
|
-
}
|
|
1682
|
-
if (required) {
|
|
1683
|
-
validators.push(Validators.required);
|
|
1684
|
-
}
|
|
1685
|
-
return Validators.compose(validators);
|
|
1686
|
-
}
|
|
1687
|
-
/**
|
|
1688
|
-
* Email validator
|
|
1689
|
-
*/
|
|
1690
|
-
static get email() {
|
|
1691
|
-
return Validators.compose([
|
|
1692
|
-
Validators.email,
|
|
1693
|
-
ItValidators.customPattern(EMAIL_REGEX, { invalidEmail: true })
|
|
1694
|
-
]);
|
|
1695
|
-
}
|
|
1696
|
-
/**
|
|
1697
|
-
* Phone number validator
|
|
1698
|
-
*/
|
|
1699
|
-
static get tel() {
|
|
1700
|
-
return ItValidators.customPattern(PHONE_NUMBER_REGEX, { invalidTel: true });
|
|
1701
|
-
}
|
|
1702
|
-
/**
|
|
1703
|
-
* URL validator
|
|
1704
|
-
*/
|
|
1705
|
-
static get url() {
|
|
1706
|
-
return ItValidators.customPattern(URL_REGEX, { invalidUrl: true });
|
|
1707
|
-
}
|
|
1708
|
-
/**
|
|
1709
|
-
* Italian Tax Code validator
|
|
1710
|
-
*/
|
|
1711
|
-
static get taxCode() {
|
|
1712
|
-
return ItValidators.customPattern(ITALIAN_TAX_CODE_REGEX, { invalidTaxCode: true });
|
|
1713
|
-
}
|
|
1714
|
-
/**
|
|
1715
|
-
* VAT Number validator
|
|
1716
|
-
*/
|
|
1717
|
-
static get vatNumber() {
|
|
1718
|
-
return ItValidators.customPattern(VAT_NUMBER_REGEX, { invalidVatNumber: true });
|
|
1719
|
-
}
|
|
1720
|
-
/**
|
|
1721
|
-
* Italian Postal Code validator (CAP)
|
|
1722
|
-
*/
|
|
1723
|
-
static get cap() {
|
|
1724
|
-
return ItValidators.customPattern(CAP_REGEX, { invalidCap: true });
|
|
1725
|
-
}
|
|
1726
|
-
/**
|
|
1727
|
-
* Check if value is a valid RegExp
|
|
1728
|
-
*/
|
|
1729
|
-
static get regExp() {
|
|
1730
|
-
return (control) => {
|
|
1731
|
-
try {
|
|
1732
|
-
if (control === null || control === void 0 ? void 0 : control.value) {
|
|
1733
|
-
new RegExp(control.value);
|
|
1734
|
-
}
|
|
1735
|
-
}
|
|
1736
|
-
catch (e) {
|
|
1737
|
-
return { invalidRegex: true };
|
|
1738
|
-
}
|
|
1739
|
-
return null;
|
|
1740
|
-
};
|
|
1741
|
-
}
|
|
1742
|
-
}
|
|
1743
|
-
ItValidators.SpecialCharacterPattern = '!@#$%&*_+=;:|,.';
|
|
1744
|
-
|
|
1745
|
-
class MarkMatchingTextPipe {
|
|
1746
|
-
constructor(domSanitizer) {
|
|
1747
|
-
this.domSanitizer = domSanitizer;
|
|
1748
|
-
}
|
|
1749
|
-
transform(allString, searchString) {
|
|
1750
|
-
if (!searchString) {
|
|
1751
|
-
return allString;
|
|
1752
|
-
}
|
|
1753
|
-
else if (!allString) {
|
|
1754
|
-
return "";
|
|
1755
|
-
}
|
|
1756
|
-
// Check if search string is a substring of pivot string (no case-sensitive)
|
|
1757
|
-
const idxOfMatchString = allString.toLowerCase().indexOf(searchString.toLowerCase());
|
|
1758
|
-
if (idxOfMatchString !== -1) {
|
|
1759
|
-
// retrieve the exactly substring
|
|
1760
|
-
const matchingString = allString.substring(idxOfMatchString, idxOfMatchString + searchString.length);
|
|
1761
|
-
// Replace original string marking as <strong> (bold) the matchinng substring
|
|
1762
|
-
const regEx = new RegExp('(' + matchingString + ')', 'gi');
|
|
1763
|
-
const res = allString.replace(regEx, '<mark>$1</mark>');
|
|
1764
|
-
return this.domSanitizer.bypassSecurityTrustHtml(res);
|
|
1765
|
-
}
|
|
1766
|
-
return allString;
|
|
1767
|
-
}
|
|
1768
|
-
}
|
|
1769
|
-
MarkMatchingTextPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: MarkMatchingTextPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1770
|
-
MarkMatchingTextPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: MarkMatchingTextPipe, name: "markMatchingText" });
|
|
1771
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: MarkMatchingTextPipe, decorators: [{
|
|
1772
|
-
type: Pipe,
|
|
1773
|
-
args: [{
|
|
1774
|
-
name: 'markMatchingText'
|
|
1775
|
-
}]
|
|
1776
|
-
}], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; } });
|
|
1777
|
-
|
|
1778
|
-
class InputComponent extends AbstractFormComponent {
|
|
1779
|
-
constructor() {
|
|
1780
|
-
super(...arguments);
|
|
1781
|
-
/**
|
|
1782
|
-
* The input type
|
|
1783
|
-
* @default text
|
|
1784
|
-
*/
|
|
1785
|
-
this.type = 'text';
|
|
1786
|
-
/**
|
|
1787
|
-
* The input placeholder
|
|
1788
|
-
*/
|
|
1789
|
-
this.placeholder = '';
|
|
1790
|
-
/**
|
|
1791
|
-
* The max date value [Used only in type = 'date']
|
|
1792
|
-
* @default '9999-12-31'
|
|
1793
|
-
* @example 'yyyy-mm-dd'
|
|
1794
|
-
*/
|
|
1795
|
-
this.maxDate = '9999-12-31';
|
|
1796
|
-
/**
|
|
1797
|
-
* Time span [ms] has passed without another source emission, to delay data filtering.
|
|
1798
|
-
* Useful when the user is typing multiple letters
|
|
1799
|
-
* @default 300 [ms]
|
|
1800
|
-
*/
|
|
1801
|
-
this.autocompleteDebounceTime = 300;
|
|
1802
|
-
/**
|
|
1803
|
-
* Fired when the Autocomplete Item has been selected
|
|
1804
|
-
*/
|
|
1805
|
-
this.autocompleteSelectedEvent = new EventEmitter();
|
|
1806
|
-
this.showAutocompletion = false;
|
|
1807
|
-
/** Observable da cui vengono emessi i risultati dell'auto completamento */
|
|
1808
|
-
this.autocompleteResults$ = new Observable();
|
|
1809
|
-
}
|
|
1810
|
-
get isActiveLabel() {
|
|
1811
|
-
const value = this.control.value;
|
|
1812
|
-
if ((!!value && value !== 0) || value === 0 || !!this.placeholder) {
|
|
1813
|
-
return true;
|
|
1814
|
-
}
|
|
1815
|
-
if (this.type === 'number' && (isTrueBooleanInput(this.currency) || isTrueBooleanInput(this.percentage))) {
|
|
1816
|
-
return true;
|
|
1817
|
-
}
|
|
1818
|
-
return this.type === 'date' || this.type === 'time' || this.type === 'color';
|
|
1819
|
-
}
|
|
1820
|
-
/**
|
|
1821
|
-
* Check is readonly field
|
|
1822
|
-
*/
|
|
1823
|
-
get isReadonly() {
|
|
1824
|
-
return this.readonly === 'plaintext' || isTrueBooleanInput(this.readonly);
|
|
1825
|
-
}
|
|
1826
|
-
/**
|
|
1827
|
-
* Return the invalid message string from TranslateService
|
|
1828
|
-
*/
|
|
1829
|
-
get invalidMessage() {
|
|
1830
|
-
if (this.hasError('min') && this.min) {
|
|
1831
|
-
return this._translateService.get('it.errors.min-invalid', {
|
|
1832
|
-
min: this.min
|
|
1833
|
-
});
|
|
1834
|
-
}
|
|
1835
|
-
if (this.hasError('max') && this.max) {
|
|
1836
|
-
return this._translateService.get('it.errors.max-invalid', {
|
|
1837
|
-
max: this.max
|
|
1838
|
-
});
|
|
1839
|
-
}
|
|
1840
|
-
if (this.hasError('minlength')) {
|
|
1841
|
-
const error = this.getError('minlength');
|
|
1842
|
-
return this._translateService.get('it.errors.min-length-invalid', { min: error.requiredLength });
|
|
1843
|
-
}
|
|
1844
|
-
if (this.hasError('maxlength')) {
|
|
1845
|
-
const error = this.getError('maxlength');
|
|
1846
|
-
return this._translateService.get('it.errors.max-length-invalid', { max: error.requiredLength });
|
|
1847
|
-
}
|
|
1848
|
-
if (this.hasError('email') || this.hasError('invalidEmail')) {
|
|
1849
|
-
return this._translateService.get('it.errors.email-invalid');
|
|
1850
|
-
}
|
|
1851
|
-
if (this.hasError('invalidTel')) {
|
|
1852
|
-
return this._translateService.get('it.errors.tel-invalid');
|
|
1853
|
-
}
|
|
1854
|
-
if (this.hasError('invalidUrl')) {
|
|
1855
|
-
return this._translateService.get('it.errors.url-invalid');
|
|
1856
|
-
}
|
|
1857
|
-
if (this.hasError('invalidTaxCode')) {
|
|
1858
|
-
return this._translateService.get('it.errors.tax-code-invalid');
|
|
1859
|
-
}
|
|
1860
|
-
if (this.hasError('invalidVatNumber')) {
|
|
1861
|
-
return this._translateService.get('it.errors.vat-number-invalid');
|
|
1862
|
-
}
|
|
1863
|
-
if (this.hasError('invalidCap')) {
|
|
1864
|
-
return this._translateService.get('it.errors.cap-invalid');
|
|
1865
|
-
}
|
|
1866
|
-
if (this.hasError('invalidRegex')) {
|
|
1867
|
-
return this._translateService.get('it.errors.regex-invalid');
|
|
1868
|
-
}
|
|
1869
|
-
if (this.hasError('pattern')) {
|
|
1870
|
-
const error = this.getError('pattern');
|
|
1871
|
-
return this._translateService.get('it.errors.pattern-invalid', { pattern: error.requiredPattern });
|
|
1872
|
-
}
|
|
1873
|
-
return super.invalidMessage;
|
|
1874
|
-
}
|
|
1875
|
-
ngOnInit() {
|
|
1876
|
-
super.ngOnInit();
|
|
1877
|
-
const validators = [];
|
|
1878
|
-
switch (this.type) {
|
|
1879
|
-
case 'number':
|
|
1880
|
-
if (isTrueBooleanInput(this.percentage)) {
|
|
1881
|
-
this.min = this.min || 0;
|
|
1882
|
-
this.max = this.max || 100;
|
|
1883
|
-
}
|
|
1884
|
-
// Dynamic min/max validators
|
|
1885
|
-
validators.push((control) => this.min ? Validators.min(this.min)(control) : null);
|
|
1886
|
-
validators.push((control) => this.max ? Validators.max(this.max)(control) : null);
|
|
1887
|
-
break;
|
|
1888
|
-
case 'email':
|
|
1889
|
-
validators.push(ItValidators.email);
|
|
1890
|
-
break;
|
|
1891
|
-
case 'tel':
|
|
1892
|
-
validators.push(ItValidators.tel);
|
|
1893
|
-
break;
|
|
1894
|
-
case 'url':
|
|
1895
|
-
validators.push(ItValidators.url);
|
|
1896
|
-
break;
|
|
1897
|
-
}
|
|
1898
|
-
this.addValidators(validators);
|
|
1899
|
-
this.autocompleteResults$ = this.getAutocompleteResults$();
|
|
1900
|
-
}
|
|
1901
|
-
/**
|
|
1902
|
-
* Increment or decrease the input number value of step
|
|
1903
|
-
* @param decrease true to decrease value
|
|
1904
|
-
*/
|
|
1905
|
-
incrementNumber(decrease = false) {
|
|
1906
|
-
var _a;
|
|
1907
|
-
if (this.type !== 'number') {
|
|
1908
|
-
return;
|
|
1909
|
-
}
|
|
1910
|
-
const step = (this.step === 'any' ? 1 : ((_a = this.step) !== null && _a !== void 0 ? _a : 1));
|
|
1911
|
-
let value = Number(this.control.value);
|
|
1912
|
-
value = (isNaN(value) ? 0 : value) + (decrease ? -step : step);
|
|
1913
|
-
value = Math.round(value * 1e12) / 1e12; // prevent js decimal error
|
|
1914
|
-
if (this.min !== undefined && value < this.min) {
|
|
1915
|
-
value = this.min;
|
|
1916
|
-
}
|
|
1917
|
-
else if (this.max !== undefined && value > this.max) {
|
|
1918
|
-
value = this.max;
|
|
1919
|
-
}
|
|
1920
|
-
this.control.setValue(value);
|
|
1921
|
-
}
|
|
1922
|
-
/**
|
|
1923
|
-
* Create the autocomplete list
|
|
1924
|
-
*/
|
|
1925
|
-
getAutocompleteResults$() {
|
|
1926
|
-
if (this.type !== 'search') {
|
|
1927
|
-
return of({ searchedValue: '', relatedEntries: [] });
|
|
1928
|
-
}
|
|
1929
|
-
return this.control.valueChanges.pipe(debounceTime(this.autocompleteDebounceTime), // Delay filter data after time span has passed without another source emission, useful when the user is typing multiple letters
|
|
1930
|
-
distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value
|
|
1931
|
-
switchMap(searchedValue => {
|
|
1932
|
-
if (!this.autocompleteData) {
|
|
1933
|
-
return of({ searchedValue, relatedEntries: [] });
|
|
1934
|
-
}
|
|
1935
|
-
const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue);
|
|
1936
|
-
return autoCompleteData$.pipe(map(autocompleteData => {
|
|
1937
|
-
if (!searchedValue) {
|
|
1938
|
-
return { searchedValue, relatedEntries: [] };
|
|
1939
|
-
}
|
|
1940
|
-
const lowercaseValue = searchedValue.toLowerCase();
|
|
1941
|
-
const relatedEntries = autocompleteData.filter(item => { var _a; return (_a = item.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(lowercaseValue); });
|
|
1942
|
-
return { searchedValue, relatedEntries };
|
|
1943
|
-
}));
|
|
1944
|
-
}));
|
|
1945
|
-
}
|
|
1946
|
-
onEntryClick(entry, event) {
|
|
1947
|
-
// Se non è stato definito un link associato all'elemento dell'autocomplete, probabilmente il desiderata
|
|
1948
|
-
// non è effettuare la navigazione al default '#', pertanto in tal caso meglio annullare la navigazione.
|
|
1949
|
-
if (!entry.link) {
|
|
1950
|
-
event.preventDefault();
|
|
1951
|
-
}
|
|
1952
|
-
this.autocompleteSelectedEvent.next(entry);
|
|
1953
|
-
this.control.setValue(entry.value);
|
|
1954
|
-
this.showAutocompletion = false;
|
|
1955
|
-
}
|
|
1956
|
-
autocompleteItemTrackByValueFn(index, item) {
|
|
1957
|
-
return item.value;
|
|
1958
|
-
}
|
|
1959
|
-
onKeyDown() {
|
|
1960
|
-
this.showAutocompletion = this.type === 'search';
|
|
1961
|
-
}
|
|
1962
|
-
}
|
|
1963
|
-
InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1964
|
-
InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: InputComponent, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: "currency", percentage: "percentage", adaptive: "adaptive", autocompleteData: "autocompleteData", autocompleteDebounceTime: "autocompleteDebounceTime" }, outputs: { autocompleteSelectedEvent: "autocompleteSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n <div class=\"input-group\">\n <div class=\"input-group-prepend\" [class.d-none]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n <div #prepend>\n <ng-content select=\"[prepend]\"></ng-content>\n </div>\n <div class=\"input-group-text\" #prependText>\n <ng-content select=\"[prependText]\"></ng-content>\n </div>\n </div>\n\n <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"isActiveLabel\"\n [class.empty-prepend-label]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n {{label}}\n </label>\n\n <span *ngIf=\"type === 'number'\"\n class=\"input-number\"\n [class.input-number-currency]=\"currency\"\n [class.input-number-percentage]=\"percentage\"\n [class.input-number-adaptive]=\"adaptive\">\n\n <input type=\"number\"\n [id]=\"id\"\n [step]=\"step ?? null\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n\n <button type=\"button\" class=\"input-number-add\" (click)=\"incrementNumber()\">\n <span class=\"visually-hidden\">{{'it.form.increase-value'}}</span>\n </button>\n <button type=\"button\" class=\"input-number-sub\" (click)=\"incrementNumber(true)\">\n <span class=\"visually-hidden\">{{'it.form.decrease-value'}}</span>\n </button>\n </span>\n\n <input *ngIf=\"type !== 'number'\"\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.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n (keydown)=\"onKeyDown()\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\">\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 <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n\n <!-- INIZIO gestione AUTOCOMPLETAMENTO -->\n <ng-container *ngIf=\"type === 'search'\">\n <!-- Icona lente per autocompletamento -->\n <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n <it-icon name=\"search\" size=\"sm\"></it-icon>\n </span>\n\n <ng-container *ngIf=\"autocompleteResults$ | async as autocomplete\">\n <!-- Lista di autocompletamento -->\n <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n <li *ngFor=\"let entry of autocomplete.relatedEntries; trackBy: autocompleteItemTrackByValueFn\"\n (click)=\"onEntryClick(entry, $event)\">\n <a [href]=\"entry.link\">\n <ng-container *ngTemplateOutlet=\"autocompleteItemTemplate\"></ng-container>\n </a>\n <ng-template #autocompleteItemTemplate>\n <div class=\"avatar size-sm\" *ngIf=\"entry.avatarSrcPath\">\n <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\">\n </div>\n <it-icon *ngIf=\"entry.icon\" [name]=\"entry.icon\" size=\"sm\"></it-icon>\n <span class=\"autocomplete-list-text\">\n <span [innerHTML]=\"entry.value | markMatchingText: autocomplete.searchedValue\"></span>\n <em *ngIf=\"entry.label\">{{entry.label}}</em>\n </span>\n </ng-template>\n </li>\n </ul>\n </ng-container>\n </ng-container>\n <!-- FINE gestione AUTOCOMPLETAMENTO -->\n\n <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\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 button.input-number-add{top:0}.form-group .input-number button.input-number-sub{bottom:0}.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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: MarkMatchingTextPipe, name: "markMatchingText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1965
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: InputComponent, decorators: [{
|
|
1966
|
-
type: Component,
|
|
1967
|
-
args: [{ selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n <div class=\"input-group\">\n <div class=\"input-group-prepend\" [class.d-none]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n <div #prepend>\n <ng-content select=\"[prepend]\"></ng-content>\n </div>\n <div class=\"input-group-text\" #prependText>\n <ng-content select=\"[prependText]\"></ng-content>\n </div>\n </div>\n\n <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"isActiveLabel\"\n [class.empty-prepend-label]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n {{label}}\n </label>\n\n <span *ngIf=\"type === 'number'\"\n class=\"input-number\"\n [class.input-number-currency]=\"currency\"\n [class.input-number-percentage]=\"percentage\"\n [class.input-number-adaptive]=\"adaptive\">\n\n <input type=\"number\"\n [id]=\"id\"\n [step]=\"step ?? null\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n\n <button type=\"button\" class=\"input-number-add\" (click)=\"incrementNumber()\">\n <span class=\"visually-hidden\">{{'it.form.increase-value'}}</span>\n </button>\n <button type=\"button\" class=\"input-number-sub\" (click)=\"incrementNumber(true)\">\n <span class=\"visually-hidden\">{{'it.form.decrease-value'}}</span>\n </button>\n </span>\n\n <input *ngIf=\"type !== 'number'\"\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.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n (keydown)=\"onKeyDown()\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\">\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 <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n\n <!-- INIZIO gestione AUTOCOMPLETAMENTO -->\n <ng-container *ngIf=\"type === 'search'\">\n <!-- Icona lente per autocompletamento -->\n <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n <it-icon name=\"search\" size=\"sm\"></it-icon>\n </span>\n\n <ng-container *ngIf=\"autocompleteResults$ | async as autocomplete\">\n <!-- Lista di autocompletamento -->\n <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n <li *ngFor=\"let entry of autocomplete.relatedEntries; trackBy: autocompleteItemTrackByValueFn\"\n (click)=\"onEntryClick(entry, $event)\">\n <a [href]=\"entry.link\">\n <ng-container *ngTemplateOutlet=\"autocompleteItemTemplate\"></ng-container>\n </a>\n <ng-template #autocompleteItemTemplate>\n <div class=\"avatar size-sm\" *ngIf=\"entry.avatarSrcPath\">\n <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\">\n </div>\n <it-icon *ngIf=\"entry.icon\" [name]=\"entry.icon\" size=\"sm\"></it-icon>\n <span class=\"autocomplete-list-text\">\n <span [innerHTML]=\"entry.value | markMatchingText: autocomplete.searchedValue\"></span>\n <em *ngIf=\"entry.label\">{{entry.label}}</em>\n </span>\n </ng-template>\n </li>\n </ul>\n </ng-container>\n </ng-container>\n <!-- FINE gestione AUTOCOMPLETAMENTO -->\n\n <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\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 button.input-number-add{top:0}.form-group .input-number button.input-number-sub{bottom:0}.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"] }]
|
|
1968
|
-
}], propDecorators: { type: [{
|
|
1969
|
-
type: Input
|
|
1970
|
-
}], placeholder: [{
|
|
1971
|
-
type: Input
|
|
1972
|
-
}], description: [{
|
|
1973
|
-
type: Input
|
|
1974
|
-
}], readonly: [{
|
|
1975
|
-
type: Input
|
|
1976
|
-
}], maxDate: [{
|
|
1977
|
-
type: Input
|
|
1978
|
-
}], minDate: [{
|
|
1979
|
-
type: Input
|
|
1980
|
-
}], max: [{
|
|
1981
|
-
type: Input
|
|
1982
|
-
}], min: [{
|
|
1983
|
-
type: Input
|
|
1984
|
-
}], step: [{
|
|
1985
|
-
type: Input
|
|
1986
|
-
}], currency: [{
|
|
1987
|
-
type: Input
|
|
1988
|
-
}], percentage: [{
|
|
1989
|
-
type: Input
|
|
1990
|
-
}], adaptive: [{
|
|
1991
|
-
type: Input
|
|
1992
|
-
}], autocompleteData: [{
|
|
1993
|
-
type: Input
|
|
1994
|
-
}], autocompleteDebounceTime: [{
|
|
1995
|
-
type: Input
|
|
1996
|
-
}], autocompleteSelectedEvent: [{
|
|
1997
|
-
type: Output
|
|
1998
|
-
}] } });
|
|
1999
|
-
|
|
2000
|
-
class PaginationComponent {
|
|
2001
|
-
constructor() {
|
|
2002
|
-
/**
|
|
2003
|
-
* Number of pages closest to the current one to display
|
|
2004
|
-
* @default 5
|
|
2005
|
-
*/
|
|
2006
|
-
this.visiblePages = 5;
|
|
2007
|
-
/**
|
|
2008
|
-
* Available Changer values
|
|
2009
|
-
* @default [10, 25, 50, 100]
|
|
2010
|
-
*/
|
|
2011
|
-
this.changerValues = [10, 25, 50, 100];
|
|
2012
|
-
/**
|
|
2013
|
-
* Fired when page is changed. Emit the new index of page
|
|
2014
|
-
*/
|
|
2015
|
-
this.pageEvent = new EventEmitter();
|
|
2016
|
-
/**
|
|
2017
|
-
* Fired when changer is changed. Emit the new changer value
|
|
2018
|
-
*/
|
|
2019
|
-
this.changerEvent = new EventEmitter();
|
|
2020
|
-
/**
|
|
2021
|
-
* The pages
|
|
2022
|
-
* @protected
|
|
2023
|
-
*/
|
|
2024
|
-
this.pages = [];
|
|
2025
|
-
/**
|
|
2026
|
-
* Jump to page input
|
|
2027
|
-
* @protected
|
|
2028
|
-
*/
|
|
2029
|
-
this.jumpToPage = new FormControl(null);
|
|
2030
|
-
this.jumpToPage.valueChanges.pipe(debounceTime(300), // Delay filter data after time span has passed without another source emission
|
|
2031
|
-
distinctUntilChanged(), filter(value => !!value && this.jumpToPage.valid)).subscribe(value => {
|
|
2032
|
-
this.pageEvent.emit(value - 1);
|
|
2033
|
-
});
|
|
2034
|
-
}
|
|
2035
|
-
get isSimpleMode() {
|
|
2036
|
-
return isTrueBooleanInput(this.simpleMode);
|
|
2037
|
-
}
|
|
2038
|
-
get isTextLinks() {
|
|
2039
|
-
return isTrueBooleanInput(this.textLinks);
|
|
2040
|
-
}
|
|
2041
|
-
get isShowJumpToPage() {
|
|
2042
|
-
return isTrueBooleanInput(this.showJumpToPage);
|
|
2043
|
-
}
|
|
2044
|
-
ngOnChanges(changes) {
|
|
2045
|
-
this.pages = this.calculatePages();
|
|
2046
|
-
if (changes['currentPage']) {
|
|
2047
|
-
this.jumpToPage.setValue(null, { emitEvent: false });
|
|
2048
|
-
}
|
|
2049
|
-
}
|
|
2050
|
-
/**
|
|
2051
|
-
* Create array to generate pagination of `visiblePages` element
|
|
2052
|
-
*/
|
|
2053
|
-
calculatePages() {
|
|
2054
|
-
if (this.isSimpleMode) {
|
|
2055
|
-
return [this.currentPage];
|
|
2056
|
-
}
|
|
2057
|
-
const length = this.pageNumbers > this.visiblePages ? this.visiblePages : this.pageNumbers;
|
|
2058
|
-
const halfVisiblePages = Math.floor(this.visiblePages / 2);
|
|
2059
|
-
let start = (this.currentPage > halfVisiblePages && this.pageNumbers > this.visiblePages) ?
|
|
2060
|
-
this.currentPage - halfVisiblePages + 1 : 1;
|
|
2061
|
-
if (this.pageNumbers > this.visiblePages) {
|
|
2062
|
-
if ((this.currentPage + 1) >= this.pageNumbers) {
|
|
2063
|
-
start -= halfVisiblePages;
|
|
2064
|
-
}
|
|
2065
|
-
else if (this.currentPage >= (this.pageNumbers - halfVisiblePages)) {
|
|
2066
|
-
start -= (this.pageNumbers - (this.currentPage + 1));
|
|
2067
|
-
}
|
|
2068
|
-
}
|
|
2069
|
-
return Array.from({ length }, (_, i) => i + start);
|
|
2070
|
-
}
|
|
2071
|
-
/**
|
|
2072
|
-
* On click page change
|
|
2073
|
-
* @param event click event
|
|
2074
|
-
* @param newPage the new page of table
|
|
2075
|
-
*/
|
|
2076
|
-
pageChange(event, newPage) {
|
|
2077
|
-
event.preventDefault();
|
|
2078
|
-
this.pageEvent.emit(newPage - 1); // emit new page index
|
|
2079
|
-
}
|
|
2080
|
-
/**
|
|
2081
|
-
* On click changer
|
|
2082
|
-
* @param event click event
|
|
2083
|
-
* @param value the new changer value
|
|
2084
|
-
*/
|
|
2085
|
-
changerChange(event, value) {
|
|
2086
|
-
event.preventDefault();
|
|
2087
|
-
this.changerEvent.emit(value); // emit new changer value
|
|
2088
|
-
}
|
|
2089
|
-
}
|
|
2090
|
-
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2091
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: PaginationComponent, selector: "it-pagination[currentPage][pageNumbers]", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: "simpleMode", textLinks: "textLinks", currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: "showJumpToPage" }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"pagination-wrapper\"\n [class.justify-content-center]=\"alignment==='center'\"\n [class.justify-content-end]=\"alignment==='end'\"\n [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n\n <ul *ngIf=\"pages.length\" class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n <a class=\"page-link\" [class.text]=\"isTextLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n <it-icon *ngIf=\"!isTextLinks\" name=\"chevron-left\" color=\"primary\"></it-icon>\n <span class=\"visually-hidden\">\n {{(isTextLinks ? 'it.core.page' : 'it.core.previous-page') | translate}}\n </span>\n <ng-container *ngIf=\"isTextLinks\">{{'it.core.previous' | translate}}</ng-container>\n </a>\n </li>\n\n <ng-container *ngIf=\"isSimpleMode; else defaultView\">\n <li class=\"page-item\"><span class=\"page-link\" aria-current=\"page\">{{currentPage + 1}}</span></li>\n <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n <li class=\"page-item\"><span class=\"page-link\">{{pageNumbers}}</span></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 </ng-container>\n <ng-template #defaultView>\n <ng-container *ngIf=\"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 <li class=\"page-item\" *ngIf=\"pages[0] >= 3\">\n <span class=\"page-link\">...</span>\n </li>\n </ng-container>\n\n <li class=\"page-item\" *ngFor=\"let page of pages\">\n <a class=\"page-link\" aria-current=\"page\" *ngIf=\"page === (currentPage + 1); else inactivePage\">\n <span class=\"d-inline-block d-sm-none\">{{'it.core.page'|translate}}</span> {{page}}\n </a>\n <ng-template #inactivePage>\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{page}}</a>\n </ng-template>\n </li>\n\n <ng-container *ngIf=\"pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers\">\n <li class=\"page-item\" *ngIf=\"pages[pages.length - 1] < (pageNumbers - 1)\">\n <span class=\"page-link\">...</span>\n </li>\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{pageNumbers}}</a>\n </li>\n </ng-container>\n </ng-template>\n\n <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n <a class=\"page-link\" [class.text]=\"isTextLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n <span class=\"visually-hidden\">\n {{(isTextLinks ? 'it.core.page' : 'it.core.next-page') | translate}}\n </span>\n <ng-container *ngIf=\"isTextLinks\">{{'it.core.next' | translate}}</ng-container>\n <it-icon *ngIf=\"!isTextLinks\" name=\"chevron-right\" color=\"primary\"></it-icon>\n </a>\n </li>\n </ul>\n\n <it-dropdown *ngIf=\"currentChanger !== undefined\">\n <span button>{{currentChanger}} / {{'it.core.page' | translate | lowercase}}</span>\n <ng-container list>\n <it-dropdown-item *ngFor=\"let value of changerValues\" href=\"#\" externalLink=\"true\"\n (click)=\"changerChange($event, value)\">\n {{value}} / {{'it.core.page' | translate | lowercase}}\n </it-dropdown-item>\n </ng-container>\n </it-dropdown>\n\n <it-input *ngIf=\"isShowJumpToPage\" type=\"number\" [min]=\"1\" [max]=\"pageNumbers\"\n [label]=\"('it.core.go-to' | translate) + '...'\" [formControl]=\"jumpToPage\"></it-input>\n\n <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n <ng-content></ng-content>\n </p>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DropdownComponent, selector: "it-dropdown", inputs: ["color", "direction", "fullWidth", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "component", type: InputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "adaptive", "autocompleteData", "autocompleteDebounceTime"], outputs: ["autocompleteSelectedEvent"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
2093
|
-
type: Component,
|
|
2094
|
-
args: [{ selector: 'it-pagination[currentPage][pageNumbers]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"pagination-wrapper\"\n [class.justify-content-center]=\"alignment==='center'\"\n [class.justify-content-end]=\"alignment==='end'\"\n [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n\n <ul *ngIf=\"pages.length\" class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n <a class=\"page-link\" [class.text]=\"isTextLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n <it-icon *ngIf=\"!isTextLinks\" name=\"chevron-left\" color=\"primary\"></it-icon>\n <span class=\"visually-hidden\">\n {{(isTextLinks ? 'it.core.page' : 'it.core.previous-page') | translate}}\n </span>\n <ng-container *ngIf=\"isTextLinks\">{{'it.core.previous' | translate}}</ng-container>\n </a>\n </li>\n\n <ng-container *ngIf=\"isSimpleMode; else defaultView\">\n <li class=\"page-item\"><span class=\"page-link\" aria-current=\"page\">{{currentPage + 1}}</span></li>\n <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n <li class=\"page-item\"><span class=\"page-link\">{{pageNumbers}}</span></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 </ng-container>\n <ng-template #defaultView>\n <ng-container *ngIf=\"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 <li class=\"page-item\" *ngIf=\"pages[0] >= 3\">\n <span class=\"page-link\">...</span>\n </li>\n </ng-container>\n\n <li class=\"page-item\" *ngFor=\"let page of pages\">\n <a class=\"page-link\" aria-current=\"page\" *ngIf=\"page === (currentPage + 1); else inactivePage\">\n <span class=\"d-inline-block d-sm-none\">{{'it.core.page'|translate}}</span> {{page}}\n </a>\n <ng-template #inactivePage>\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{page}}</a>\n </ng-template>\n </li>\n\n <ng-container *ngIf=\"pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers\">\n <li class=\"page-item\" *ngIf=\"pages[pages.length - 1] < (pageNumbers - 1)\">\n <span class=\"page-link\">...</span>\n </li>\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{pageNumbers}}</a>\n </li>\n </ng-container>\n </ng-template>\n\n <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n <a class=\"page-link\" [class.text]=\"isTextLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n <span class=\"visually-hidden\">\n {{(isTextLinks ? 'it.core.page' : 'it.core.next-page') | translate}}\n </span>\n <ng-container *ngIf=\"isTextLinks\">{{'it.core.next' | translate}}</ng-container>\n <it-icon *ngIf=\"!isTextLinks\" name=\"chevron-right\" color=\"primary\"></it-icon>\n </a>\n </li>\n </ul>\n\n <it-dropdown *ngIf=\"currentChanger !== undefined\">\n <span button>{{currentChanger}} / {{'it.core.page' | translate | lowercase}}</span>\n <ng-container list>\n <it-dropdown-item *ngFor=\"let value of changerValues\" href=\"#\" externalLink=\"true\"\n (click)=\"changerChange($event, value)\">\n {{value}} / {{'it.core.page' | translate | lowercase}}\n </it-dropdown-item>\n </ng-container>\n </it-dropdown>\n\n <it-input *ngIf=\"isShowJumpToPage\" type=\"number\" [min]=\"1\" [max]=\"pageNumbers\"\n [label]=\"('it.core.go-to' | translate) + '...'\" [formControl]=\"jumpToPage\"></it-input>\n\n <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n <ng-content></ng-content>\n </p>\n</nav>\n" }]
|
|
2095
|
-
}], ctorParameters: function () { return []; }, propDecorators: { currentPage: [{
|
|
2096
|
-
type: Input
|
|
2097
|
-
}], pageNumbers: [{
|
|
2098
|
-
type: Input
|
|
2099
|
-
}], visiblePages: [{
|
|
2100
|
-
type: Input
|
|
2101
|
-
}], alignment: [{
|
|
2102
|
-
type: Input
|
|
2103
|
-
}], simpleMode: [{
|
|
2104
|
-
type: Input
|
|
2105
|
-
}], textLinks: [{
|
|
2106
|
-
type: Input
|
|
2107
|
-
}], currentChanger: [{
|
|
2108
|
-
type: Input
|
|
2109
|
-
}], changerValues: [{
|
|
2110
|
-
type: Input
|
|
2111
|
-
}], showJumpToPage: [{
|
|
2112
|
-
type: Input
|
|
2113
|
-
}], pageEvent: [{
|
|
2114
|
-
type: Output
|
|
2115
|
-
}], changerEvent: [{
|
|
2116
|
-
type: Output
|
|
2117
|
-
}] } });
|
|
2118
|
-
|
|
2119
|
-
class PopoverDirective {
|
|
2120
|
-
constructor(_elementRef) {
|
|
2121
|
-
this._elementRef = _elementRef;
|
|
2122
|
-
/**
|
|
2123
|
-
* This event fires immediately when the show method is called.
|
|
2124
|
-
*/
|
|
2125
|
-
this.showEvent = new EventEmitter();
|
|
2126
|
-
/**
|
|
2127
|
-
* This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
|
|
2128
|
-
*/
|
|
2129
|
-
this.shownEvent = new EventEmitter();
|
|
2130
|
-
/**
|
|
2131
|
-
* This event fires immediately when the hide method is called.
|
|
2132
|
-
*/
|
|
2133
|
-
this.hideEvent = new EventEmitter();
|
|
2134
|
-
/**
|
|
2135
|
-
* This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
|
|
2136
|
-
*/
|
|
2137
|
-
this.hiddenEvent = new EventEmitter();
|
|
2138
|
-
/**
|
|
2139
|
-
* This event fires after the show event when the tooltip template has been added to the DOM.
|
|
2140
|
-
*/
|
|
2141
|
-
this.insertedEvent = new EventEmitter();
|
|
2142
|
-
this.element = this._elementRef.nativeElement;
|
|
2143
|
-
}
|
|
2144
|
-
/**
|
|
2145
|
-
* Define the popover content
|
|
2146
|
-
* @param content the popover content
|
|
2147
|
-
*/
|
|
2148
|
-
set content(content) {
|
|
2149
|
-
this.element.setAttribute('data-bs-content', content);
|
|
2150
|
-
}
|
|
2151
|
-
/**
|
|
2152
|
-
* Define the popover title
|
|
2153
|
-
* @param title the popover title
|
|
2154
|
-
*/
|
|
2155
|
-
set popoverTitle(title) {
|
|
2156
|
-
if (title) {
|
|
2157
|
-
this.element.setAttribute('title', title);
|
|
2158
|
-
this.element.setAttribute('data-bs-original-title', title);
|
|
2159
|
-
}
|
|
2160
|
-
}
|
|
2161
|
-
/**
|
|
2162
|
-
* Define the popover placement
|
|
2163
|
-
* @param placement
|
|
2164
|
-
*/
|
|
2165
|
-
set popoverPlacement(placement) {
|
|
2166
|
-
this.element.setAttribute('data-bs-placement', placement);
|
|
2167
|
-
}
|
|
2168
|
-
/**
|
|
2169
|
-
* Appends the popover to a specific element.
|
|
2170
|
-
* @param container
|
|
2171
|
-
*/
|
|
2172
|
-
set popoverContainer(container) {
|
|
2173
|
-
if (container) {
|
|
2174
|
-
this.element.setAttribute('data-container', container);
|
|
2175
|
-
}
|
|
2176
|
-
}
|
|
2177
|
-
/**
|
|
2178
|
-
* Indicates whether the title contains html
|
|
2179
|
-
* @param html true if contain html
|
|
2180
|
-
*/
|
|
2181
|
-
set popoverHtml(html) {
|
|
2182
|
-
this.element.setAttribute('data-bs-html', isTrueBooleanInput(html) ? 'true' : 'false');
|
|
2183
|
-
}
|
|
2184
|
-
/**
|
|
2185
|
-
* How popover is triggered
|
|
2186
|
-
* - 'hover': To open the Popover on hover of the mouse over the element
|
|
2187
|
-
* - 'focus': To ignore popovers on the user's next click of an element other than the toggle element.
|
|
2188
|
-
* @param trigger
|
|
2189
|
-
*/
|
|
2190
|
-
set popoverTrigger(trigger) {
|
|
2191
|
-
if (trigger) {
|
|
2192
|
-
this.element.setAttribute('data-bs-trigger', trigger);
|
|
2193
|
-
}
|
|
2194
|
-
}
|
|
2195
|
-
ngAfterViewInit() {
|
|
2196
|
-
this.element.setAttribute('data-bs-toggle', 'popover');
|
|
2197
|
-
this.popover = Popover.getOrCreateInstance(this.element);
|
|
2198
|
-
this.element.addEventListener('show.bs.popover', event => this.showEvent.emit(event));
|
|
2199
|
-
this.element.addEventListener('shown.bs.popover', event => this.shownEvent.emit(event));
|
|
2200
|
-
this.element.addEventListener('hide.bs.popover', event => this.hideEvent.emit(event));
|
|
2201
|
-
this.element.addEventListener('hidden.bs.popover', event => this.hiddenEvent.emit(event));
|
|
2202
|
-
this.element.addEventListener('inserted.bs.popover', event => this.insertedEvent.emit(event));
|
|
2203
|
-
}
|
|
2204
|
-
ngOnDestroy() {
|
|
2205
|
-
this.dispose();
|
|
2206
|
-
}
|
|
2207
|
-
/**
|
|
2208
|
-
* Shows the popover of an item.
|
|
2209
|
-
*/
|
|
2210
|
-
show() {
|
|
2211
|
-
var _a;
|
|
2212
|
-
(_a = this.popover) === null || _a === void 0 ? void 0 : _a.show();
|
|
2213
|
-
}
|
|
2214
|
-
/**
|
|
2215
|
-
* Hide the popover of an element.
|
|
2216
|
-
*/
|
|
2217
|
-
hide() {
|
|
2218
|
-
var _a;
|
|
2219
|
-
(_a = this.popover) === null || _a === void 0 ? void 0 : _a.hide();
|
|
2220
|
-
}
|
|
2221
|
-
/**
|
|
2222
|
-
* Activate / Deactivate the popover of an element
|
|
2223
|
-
*/
|
|
2224
|
-
toggle() {
|
|
2225
|
-
var _a;
|
|
2226
|
-
(_a = this.popover) === null || _a === void 0 ? void 0 : _a.toggle();
|
|
2227
|
-
}
|
|
2228
|
-
/**
|
|
2229
|
-
* Hides and destroys the popover of an element.
|
|
2230
|
-
*/
|
|
2231
|
-
dispose() {
|
|
2232
|
-
var _a;
|
|
2233
|
-
(_a = this.popover) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
2234
|
-
}
|
|
2235
|
-
/**
|
|
2236
|
-
* Gives the popover of an element a chance to be shown.
|
|
2237
|
-
*/
|
|
2238
|
-
enable() {
|
|
2239
|
-
var _a;
|
|
2240
|
-
(_a = this.popover) === null || _a === void 0 ? void 0 : _a.enable();
|
|
2241
|
-
}
|
|
2242
|
-
/**
|
|
2243
|
-
* Removes the ability to show the popover of an element.
|
|
2244
|
-
*/
|
|
2245
|
-
disable() {
|
|
2246
|
-
var _a;
|
|
2247
|
-
(_a = this.popover) === null || _a === void 0 ? void 0 : _a.disable();
|
|
2248
|
-
}
|
|
2249
|
-
/**
|
|
2250
|
-
* Toggles the possibility that the popover of an element is shown or hidden.
|
|
2251
|
-
*/
|
|
2252
|
-
toggleEnabled() {
|
|
2253
|
-
var _a;
|
|
2254
|
-
(_a = this.popover) === null || _a === void 0 ? void 0 : _a.disable();
|
|
2255
|
-
}
|
|
2256
|
-
/**
|
|
2257
|
-
* Updates the position of an element's popover.
|
|
2258
|
-
*/
|
|
2259
|
-
update() {
|
|
2260
|
-
var _a;
|
|
2261
|
-
(_a = this.popover) === null || _a === void 0 ? void 0 : _a.disable();
|
|
2262
|
-
}
|
|
2263
|
-
}
|
|
2264
|
-
PopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2265
|
-
PopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: PopoverDirective, selector: "[itPopover]", inputs: { content: ["itPopover", "content"], popoverTitle: "popoverTitle", popoverPlacement: "popoverPlacement", popoverContainer: "popoverContainer", popoverHtml: "popoverHtml", popoverTrigger: "popoverTrigger" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itPopover"], ngImport: i0 });
|
|
2266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PopoverDirective, decorators: [{
|
|
2267
|
-
type: Directive,
|
|
2268
|
-
args: [{
|
|
2269
|
-
selector: '[itPopover]',
|
|
2270
|
-
exportAs: 'itPopover'
|
|
2271
|
-
}]
|
|
2272
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { content: [{
|
|
2273
|
-
type: Input,
|
|
2274
|
-
args: ['itPopover']
|
|
2275
|
-
}], popoverTitle: [{
|
|
2276
|
-
type: Input
|
|
2277
|
-
}], popoverPlacement: [{
|
|
2278
|
-
type: Input
|
|
2279
|
-
}], popoverContainer: [{
|
|
2280
|
-
type: Input
|
|
2281
|
-
}], popoverHtml: [{
|
|
2282
|
-
type: Input
|
|
2283
|
-
}], popoverTrigger: [{
|
|
2284
|
-
type: Input
|
|
2285
|
-
}], showEvent: [{
|
|
2286
|
-
type: Output
|
|
2287
|
-
}], shownEvent: [{
|
|
2288
|
-
type: Output
|
|
2289
|
-
}], hideEvent: [{
|
|
2290
|
-
type: Output
|
|
2291
|
-
}], hiddenEvent: [{
|
|
2292
|
-
type: Output
|
|
2293
|
-
}], insertedEvent: [{
|
|
2294
|
-
type: Output
|
|
2295
|
-
}] } });
|
|
2296
|
-
|
|
2297
|
-
class RatingComponent extends AbstractFormComponent {
|
|
2298
|
-
constructor() {
|
|
2299
|
-
super(...arguments);
|
|
2300
|
-
/**
|
|
2301
|
-
* Number of stars to show
|
|
2302
|
-
* @default 5
|
|
2303
|
-
*/
|
|
2304
|
-
this.starCount = 5;
|
|
2305
|
-
this.stars = this.generateStars();
|
|
2306
|
-
}
|
|
2307
|
-
ngOnChanges(changes) {
|
|
2308
|
-
super.ngOnChanges(changes);
|
|
2309
|
-
if (changes['starCount'] || !this.stars.length) {
|
|
2310
|
-
this.stars = this.generateStars();
|
|
2311
|
-
}
|
|
2312
|
-
}
|
|
2313
|
-
ngOnInit() {
|
|
2314
|
-
super.ngOnInit();
|
|
2315
|
-
if (!this.control.value && !!this.value) {
|
|
2316
|
-
this.writeValue(this.value);
|
|
2317
|
-
this.onChange(this.value);
|
|
2318
|
-
}
|
|
2319
|
-
}
|
|
2320
|
-
/**
|
|
2321
|
-
* Generate the array of stars
|
|
2322
|
-
* @private
|
|
2323
|
-
*/
|
|
2324
|
-
generateStars() {
|
|
2325
|
-
return Array.from({ length: this.starCount }, (_, i) => i + 1).reverse();
|
|
2326
|
-
}
|
|
2327
|
-
}
|
|
2328
|
-
RatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2329
|
-
RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: RatingComponent, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\"\n [class.rating-label]=\"!!label\"\n [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 <ng-container *ngFor=\"let starValue of stars\">\n <input [id]=\"id + '-' + starValue\"\n type=\"radio\"\n [name]=\"id\"\n [value]=\"starValue\"\n [attr.aria-hidden]=\"control.disabled\"\n [formControl]=\"control\" />\n\n <label class=\"full\" [for]=\"id + '-' + starValue\">\n <it-icon name=\"star-full\" size=\"sm\"></it-icon>\n <span class=\"visually-hidden\">\n {{'it.core.rate-star'|translate : { current: starValue, total: stars.length } }}\n </span>\n </label>\n </ng-container>\n\n</fieldset>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2330
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RatingComponent, decorators: [{
|
|
2331
|
-
type: Component,
|
|
2332
|
-
args: [{ selector: 'it-rating', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"rating\"\n [class.rating-label]=\"!!label\"\n [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 <ng-container *ngFor=\"let starValue of stars\">\n <input [id]=\"id + '-' + starValue\"\n type=\"radio\"\n [name]=\"id\"\n [value]=\"starValue\"\n [attr.aria-hidden]=\"control.disabled\"\n [formControl]=\"control\" />\n\n <label class=\"full\" [for]=\"id + '-' + starValue\">\n <it-icon name=\"star-full\" size=\"sm\"></it-icon>\n <span class=\"visually-hidden\">\n {{'it.core.rate-star'|translate : { current: starValue, total: stars.length } }}\n </span>\n </label>\n </ng-container>\n\n</fieldset>\n" }]
|
|
2333
|
-
}], propDecorators: { value: [{
|
|
2334
|
-
type: Input
|
|
2335
|
-
}], starCount: [{
|
|
2336
|
-
type: Input
|
|
2337
|
-
}] } });
|
|
2338
|
-
|
|
2339
|
-
class SpinnerComponent {
|
|
2340
|
-
constructor() {
|
|
2341
|
-
/**
|
|
2342
|
-
* The spinner is active
|
|
2343
|
-
*/
|
|
2344
|
-
this.active = true;
|
|
2345
|
-
}
|
|
2346
|
-
get isActive() {
|
|
2347
|
-
return isTrueBooleanInput(this.active);
|
|
2348
|
-
}
|
|
2349
|
-
get isSmall() {
|
|
2350
|
-
return isTrueBooleanInput(this.small);
|
|
2351
|
-
}
|
|
2352
|
-
get isDouble() {
|
|
2353
|
-
return isTrueBooleanInput(this.double);
|
|
2354
|
-
}
|
|
2355
|
-
}
|
|
2356
|
-
SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2357
|
-
SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: SpinnerComponent, selector: "it-spinner", inputs: { active: "active", small: "small", double: "double" }, ngImport: i0, template: "<div class=\"progress-spinner\"\n [class.progress-spinner-double]=\"isDouble\"\n [class.progress-spinner-active]=\"isActive\"\n [class.size-sm]=\"isSmall\">\n <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n <span class=\"visually-hidden\">{{'it.core.loading'|translate}}...</span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
2359
|
-
type: Component,
|
|
2360
|
-
args: [{ selector: 'it-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"progress-spinner\"\n [class.progress-spinner-double]=\"isDouble\"\n [class.progress-spinner-active]=\"isActive\"\n [class.size-sm]=\"isSmall\">\n <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n <span class=\"visually-hidden\">{{'it.core.loading'|translate}}...</span>\n</div>\n" }]
|
|
2361
|
-
}], propDecorators: { active: [{
|
|
2362
|
-
type: Input
|
|
2363
|
-
}], small: [{
|
|
2364
|
-
type: Input
|
|
2365
|
-
}], double: [{
|
|
2366
|
-
type: Input
|
|
2367
|
-
}] } });
|
|
2368
|
-
|
|
2369
|
-
class SteppersItemComponent extends AbstractComponent {
|
|
2370
|
-
}
|
|
2371
|
-
SteppersItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SteppersItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2372
|
-
SteppersItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: SteppersItemComponent, selector: "it-steppers-item[label]", inputs: { label: "label", icon: "icon" }, 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 });
|
|
2373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SteppersItemComponent, decorators: [{
|
|
2374
|
-
type: Component,
|
|
2375
|
-
args: [{ selector: 'it-steppers-item[label]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
2376
|
-
}], propDecorators: { label: [{
|
|
2377
|
-
type: Input
|
|
2378
|
-
}], icon: [{
|
|
2379
|
-
type: Input
|
|
2380
|
-
}], htmlContent: [{
|
|
2381
|
-
type: ViewChild,
|
|
2382
|
-
args: [TemplateRef]
|
|
2383
|
-
}] } });
|
|
2384
|
-
|
|
2385
|
-
class SteppersContainerComponent {
|
|
2386
|
-
constructor(_changeDetectorRef) {
|
|
2387
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
2388
|
-
/**
|
|
2389
|
-
* Show the stepper header
|
|
2390
|
-
* @default true
|
|
2391
|
-
*/
|
|
2392
|
-
this.showHeader = true;
|
|
2393
|
-
/**
|
|
2394
|
-
* Show the back button
|
|
2395
|
-
* @default true
|
|
2396
|
-
*/
|
|
2397
|
-
this.showBackButton = true;
|
|
2398
|
-
/**
|
|
2399
|
-
* Show the forward button
|
|
2400
|
-
* @default true
|
|
2401
|
-
*/
|
|
2402
|
-
this.showForwardButton = true;
|
|
2403
|
-
/**
|
|
2404
|
-
* Show the confirm button
|
|
2405
|
-
* @default false
|
|
2406
|
-
*/
|
|
2407
|
-
this.showConfirmButton = false;
|
|
2408
|
-
/**
|
|
2409
|
-
* Show the save button
|
|
2410
|
-
* @default false
|
|
2411
|
-
*/
|
|
2412
|
-
this.showSaveButton = false;
|
|
2413
|
-
this.backClick = new EventEmitter();
|
|
2414
|
-
this.forwardClick = new EventEmitter();
|
|
2415
|
-
this.confirmClick = new EventEmitter();
|
|
2416
|
-
this.saveClick = new EventEmitter();
|
|
2417
|
-
}
|
|
2418
|
-
get isShowHeader() {
|
|
2419
|
-
return isTrueBooleanInput(this.showHeader);
|
|
2420
|
-
}
|
|
2421
|
-
get isSteppersNumber() {
|
|
2422
|
-
return isTrueBooleanInput(this.steppersNumber);
|
|
2423
|
-
}
|
|
2424
|
-
get isDark() {
|
|
2425
|
-
return isTrueBooleanInput(this.dark);
|
|
2426
|
-
}
|
|
2427
|
-
get isShowBackButton() {
|
|
2428
|
-
return isTrueBooleanInput(this.showBackButton);
|
|
2429
|
-
}
|
|
2430
|
-
get isShowForwardButton() {
|
|
2431
|
-
return isTrueBooleanInput(this.showForwardButton);
|
|
2432
|
-
}
|
|
2433
|
-
get isShowConfirmButton() {
|
|
2434
|
-
return isTrueBooleanInput(this.showConfirmButton);
|
|
2435
|
-
}
|
|
2436
|
-
get isConfirmLoading() {
|
|
2437
|
-
return isTrueBooleanInput(this.confirmLoading);
|
|
2438
|
-
}
|
|
2439
|
-
get isShowSaveButton() {
|
|
2440
|
-
return isTrueBooleanInput(this.showSaveButton);
|
|
2441
|
-
}
|
|
2442
|
-
get isSaveLoading() {
|
|
2443
|
-
return isTrueBooleanInput(this.saveLoading);
|
|
2444
|
-
}
|
|
2445
|
-
ngAfterViewInit() {
|
|
2446
|
-
var _a;
|
|
2447
|
-
(_a = this.steps) === null || _a === void 0 ? void 0 : _a.changes.pipe(// When steps changes (dynamic add/remove)
|
|
2448
|
-
startWith(undefined)).subscribe(() => {
|
|
2449
|
-
var _a, _b;
|
|
2450
|
-
(_a = this.stepsSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
|
|
2451
|
-
this.stepsSubscriptions = (_b = this.steps) === null || _b === void 0 ? void 0 : _b.map(step => step.valueChanges.subscribe(() => {
|
|
2452
|
-
this._changeDetectorRef.detectChanges(); // DetectChanges when step attributes changes
|
|
2453
|
-
}));
|
|
2454
|
-
this._changeDetectorRef.detectChanges(); // Force update html render
|
|
2455
|
-
});
|
|
2456
|
-
}
|
|
2457
|
-
ngOnDestroy() {
|
|
2458
|
-
var _a;
|
|
2459
|
-
(_a = this.stepsSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(step => step.unsubscribe());
|
|
2460
|
-
}
|
|
2461
|
-
}
|
|
2462
|
-
SteppersContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SteppersContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2463
|
-
SteppersContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: SteppersContainerComponent, selector: "it-steppers-container[activeStep]", inputs: { activeStep: "activeStep", showHeader: "showHeader", dark: "dark", steppersNumber: "steppersNumber", progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: "showBackButton", showForwardButton: "showForwardButton", showConfirmButton: "showConfirmButton", confirmLoading: "confirmLoading", showSaveButton: "showSaveButton", saveLoading: "saveLoading" }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: SteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"isDark\">\n <div *ngIf=\"isShowHeader\" class=\"steppers-header\">\n <ul>\n <li *ngFor=\"let step of steps; let i = index\"\n [class.confirmed]=\"i < activeStep\"\n [class.active]=\"i === activeStep\"\n [class.no-line]=\"i === activeStep && isSteppersNumber\">\n\n <it-icon *ngIf=\"step.icon && !isSteppersNumber\" [name]=\"step.icon\"></it-icon>\n <span *ngIf=\"isSteppersNumber\" class=\"steppers-number\">\n <ng-container *ngIf=\"i < activeStep; else showNumber\">\n <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n </ng-container>\n <ng-template #showNumber>\n <span class=\"visually-hidden\">{{'it.core.step' | translate}} </span>{{i + 1}}\n </ng-template>\n </span>\n\n {{step.label}}\n\n <ng-container *ngIf=\"i < activeStep && !isSteppersNumber\">\n <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n </ng-container>\n <span *ngIf=\"i === activeStep\" class=\"visually-hidden\">{{'it.core.active' | translate}}</span>\n </li>\n </ul>\n <span class=\"steppers-index\" aria-hidden=\"true\">\n <ng-container\n *ngIf=\"!isSteppersNumber; else showNumbers\">{{(activeStep + 1) + '/' + steps?.length}}</ng-container>\n <ng-template #showNumbers>\n <span *ngFor=\"let step of steps; let i = index\" [class.active]=\"i === activeStep\">{{i + 1}}</span>\n </ng-template>\n </span>\n </div>\n\n <div *ngIf=\"steps?.get(activeStep) as step\" class=\"steppers-content\" aria-live=\"polite\">\n <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n </div>\n\n <nav *ngIf=\"isShowBackButton || isShowSaveButton || isShowForwardButton || isShowConfirmButton || !!progressStyle\"\n class=\"steppers-nav\">\n <button *ngIf=\"isShowBackButton\" type=\"button\" itButton=\"outline-primary\" size=\"sm\" class=\"steppers-btn-prev\"\n (click)=\"backClick.emit(activeStep)\">\n <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n {{'it.core.back' | translate}}\n </button>\n\n <ng-container *ngIf=\"!!progressStyle\">\n <ul *ngIf=\"progressStyle === 'dots'; else progressBar\" class=\"steppers-dots\">\n <li *ngFor=\"let step of steps; let i = index\" [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 </ul>\n\n <ng-template #progressBar>\n <div class=\"steppers-progress\">\n <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep/(steps?.length||1)) * 100\"></it-progress-bar>\n </div>\n </ng-template>\n </ng-container>\n\n <button *ngIf=\"isShowSaveButton\" type=\"button\" itButton=\"primary\" size=\"sm\" class=\"steppers-btn-save\"\n [progress]=\"isSaveLoading\" [disabled]=\"isSaveLoading\" (click)=\"saveClick.emit(activeStep)\">\n {{'it.general.save' | translate}}\n </button>\n\n <button *ngIf=\"isShowForwardButton\" type=\"button\" itButton=\"outline-primary\" size=\"sm\" class=\"steppers-btn-next\"\n (click)=\"forwardClick.emit(activeStep)\">\n {{'it.core.forward' | translate}}\n <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n </button>\n\n <button *ngIf=\"isShowConfirmButton\" type=\"button\" itButton=\"primary\" size=\"sm\"\n class=\"steppers-btn-confirm d-lg-block\"\n [progress]=\"isConfirmLoading\" [disabled]=\"isConfirmLoading\"\n (click)=\"confirmClick.emit(activeStep)\">\n {{'it.core.confirm' | translate}}\n </button>\n </nav>\n</div>\n\n<ng-template #checkIcon>\n <it-icon name=\"check\" class=\"steppers-success\"></it-icon>\n <span class=\"visually-hidden\">{{'it.core.confirmed' | translate}}</span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SteppersContainerComponent, decorators: [{
|
|
2465
|
-
type: Component,
|
|
2466
|
-
args: [{ selector: 'it-steppers-container[activeStep]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"steppers\" [class.bg-dark]=\"isDark\">\n <div *ngIf=\"isShowHeader\" class=\"steppers-header\">\n <ul>\n <li *ngFor=\"let step of steps; let i = index\"\n [class.confirmed]=\"i < activeStep\"\n [class.active]=\"i === activeStep\"\n [class.no-line]=\"i === activeStep && isSteppersNumber\">\n\n <it-icon *ngIf=\"step.icon && !isSteppersNumber\" [name]=\"step.icon\"></it-icon>\n <span *ngIf=\"isSteppersNumber\" class=\"steppers-number\">\n <ng-container *ngIf=\"i < activeStep; else showNumber\">\n <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n </ng-container>\n <ng-template #showNumber>\n <span class=\"visually-hidden\">{{'it.core.step' | translate}} </span>{{i + 1}}\n </ng-template>\n </span>\n\n {{step.label}}\n\n <ng-container *ngIf=\"i < activeStep && !isSteppersNumber\">\n <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n </ng-container>\n <span *ngIf=\"i === activeStep\" class=\"visually-hidden\">{{'it.core.active' | translate}}</span>\n </li>\n </ul>\n <span class=\"steppers-index\" aria-hidden=\"true\">\n <ng-container\n *ngIf=\"!isSteppersNumber; else showNumbers\">{{(activeStep + 1) + '/' + steps?.length}}</ng-container>\n <ng-template #showNumbers>\n <span *ngFor=\"let step of steps; let i = index\" [class.active]=\"i === activeStep\">{{i + 1}}</span>\n </ng-template>\n </span>\n </div>\n\n <div *ngIf=\"steps?.get(activeStep) as step\" class=\"steppers-content\" aria-live=\"polite\">\n <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n </div>\n\n <nav *ngIf=\"isShowBackButton || isShowSaveButton || isShowForwardButton || isShowConfirmButton || !!progressStyle\"\n class=\"steppers-nav\">\n <button *ngIf=\"isShowBackButton\" type=\"button\" itButton=\"outline-primary\" size=\"sm\" class=\"steppers-btn-prev\"\n (click)=\"backClick.emit(activeStep)\">\n <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n {{'it.core.back' | translate}}\n </button>\n\n <ng-container *ngIf=\"!!progressStyle\">\n <ul *ngIf=\"progressStyle === 'dots'; else progressBar\" class=\"steppers-dots\">\n <li *ngFor=\"let step of steps; let i = index\" [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 </ul>\n\n <ng-template #progressBar>\n <div class=\"steppers-progress\">\n <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep/(steps?.length||1)) * 100\"></it-progress-bar>\n </div>\n </ng-template>\n </ng-container>\n\n <button *ngIf=\"isShowSaveButton\" type=\"button\" itButton=\"primary\" size=\"sm\" class=\"steppers-btn-save\"\n [progress]=\"isSaveLoading\" [disabled]=\"isSaveLoading\" (click)=\"saveClick.emit(activeStep)\">\n {{'it.general.save' | translate}}\n </button>\n\n <button *ngIf=\"isShowForwardButton\" type=\"button\" itButton=\"outline-primary\" size=\"sm\" class=\"steppers-btn-next\"\n (click)=\"forwardClick.emit(activeStep)\">\n {{'it.core.forward' | translate}}\n <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n </button>\n\n <button *ngIf=\"isShowConfirmButton\" type=\"button\" itButton=\"primary\" size=\"sm\"\n class=\"steppers-btn-confirm d-lg-block\"\n [progress]=\"isConfirmLoading\" [disabled]=\"isConfirmLoading\"\n (click)=\"confirmClick.emit(activeStep)\">\n {{'it.core.confirm' | translate}}\n </button>\n </nav>\n</div>\n\n<ng-template #checkIcon>\n <it-icon name=\"check\" class=\"steppers-success\"></it-icon>\n <span class=\"visually-hidden\">{{'it.core.confirmed' | translate}}</span>\n</ng-template>\n" }]
|
|
2467
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { activeStep: [{
|
|
2468
|
-
type: Input
|
|
2469
|
-
}], showHeader: [{
|
|
2470
|
-
type: Input
|
|
2471
|
-
}], dark: [{
|
|
2472
|
-
type: Input
|
|
2473
|
-
}], steppersNumber: [{
|
|
2474
|
-
type: Input
|
|
2475
|
-
}], progressStyle: [{
|
|
2476
|
-
type: Input
|
|
2477
|
-
}], progressColor: [{
|
|
2478
|
-
type: Input
|
|
2479
|
-
}], showBackButton: [{
|
|
2480
|
-
type: Input
|
|
2481
|
-
}], showForwardButton: [{
|
|
2482
|
-
type: Input
|
|
2483
|
-
}], showConfirmButton: [{
|
|
2484
|
-
type: Input
|
|
2485
|
-
}], confirmLoading: [{
|
|
2486
|
-
type: Input
|
|
2487
|
-
}], showSaveButton: [{
|
|
2488
|
-
type: Input
|
|
2489
|
-
}], saveLoading: [{
|
|
2490
|
-
type: Input
|
|
2491
|
-
}], steps: [{
|
|
2492
|
-
type: ContentChildren,
|
|
2493
|
-
args: [SteppersItemComponent]
|
|
2494
|
-
}], backClick: [{
|
|
2495
|
-
type: Output
|
|
2496
|
-
}], forwardClick: [{
|
|
2497
|
-
type: Output
|
|
2498
|
-
}], confirmClick: [{
|
|
2499
|
-
type: Output
|
|
2500
|
-
}], saveClick: [{
|
|
2501
|
-
type: Output
|
|
2502
|
-
}] } });
|
|
2503
|
-
|
|
2504
|
-
class TabItemComponent extends AbstractComponent {
|
|
2505
|
-
constructor() {
|
|
2506
|
-
super(...arguments);
|
|
2507
|
-
/**
|
|
2508
|
-
* Custom class
|
|
2509
|
-
*/
|
|
2510
|
-
this.class = '';
|
|
2511
|
-
}
|
|
2512
|
-
ngAfterViewInit() {
|
|
2513
|
-
super.ngAfterViewInit();
|
|
2514
|
-
this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
|
|
2515
|
-
}
|
|
2516
|
-
}
|
|
2517
|
-
TabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2518
|
-
TabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: TabItemComponent, selector: "it-tab-item", inputs: { label: "label", icon: "icon", active: "active", disabled: "disabled", 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 });
|
|
2519
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TabItemComponent, decorators: [{
|
|
2520
|
-
type: Component,
|
|
2521
|
-
args: [{ selector: 'it-tab-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
2522
|
-
}], propDecorators: { label: [{
|
|
2523
|
-
type: Input
|
|
2524
|
-
}], icon: [{
|
|
2525
|
-
type: Input
|
|
2526
|
-
}], active: [{
|
|
2527
|
-
type: Input
|
|
2528
|
-
}], disabled: [{
|
|
2529
|
-
type: Input
|
|
2530
|
-
}], class: [{
|
|
2531
|
-
type: Input
|
|
2532
|
-
}], htmlContent: [{
|
|
2533
|
-
type: ViewChild,
|
|
2534
|
-
args: [TemplateRef]
|
|
2535
|
-
}] } });
|
|
2536
|
-
|
|
2537
|
-
class TabContainerComponent extends AbstractComponent {
|
|
2538
|
-
isTrueBooleanInput(booleanInput) {
|
|
2539
|
-
return isTrueBooleanInput(booleanInput);
|
|
2540
|
-
}
|
|
2541
|
-
ngAfterViewInit() {
|
|
2542
|
-
var _a;
|
|
2543
|
-
super.ngAfterViewInit();
|
|
2544
|
-
(_a = this.tabs) === null || _a === void 0 ? void 0 : _a.changes.pipe(// When tabs changes (dynamic add/remove)
|
|
2545
|
-
startWith(undefined), tap(() => {
|
|
2546
|
-
var _a, _b;
|
|
2547
|
-
(_a = this.tabSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
|
|
2548
|
-
this.tabSubscriptions = (_b = this.tabs) === null || _b === void 0 ? void 0 : _b.map(tab => tab.valueChanges.subscribe(() => {
|
|
2549
|
-
this._changeDetectorRef.detectChanges(); // DetectChanges when tab-item attributes changes
|
|
2550
|
-
}));
|
|
2551
|
-
this._changeDetectorRef.detectChanges(); // Force update html render
|
|
2552
|
-
}), switchMap(() => { var _a; return ((_a = this.tabNavLinks) === null || _a === void 0 ? void 0 : _a.changes.pipe(startWith(undefined))) || of(undefined); })).subscribe(() => {
|
|
2553
|
-
var _a;
|
|
2554
|
-
// Init tabs from bootstrap-italia
|
|
2555
|
-
(_a = this.tabNavLinks) === null || _a === void 0 ? void 0 : _a.forEach(tabNavLink => {
|
|
2556
|
-
const triggerEl = tabNavLink.nativeElement, tabTrigger = Tab.getOrCreateInstance(triggerEl);
|
|
2557
|
-
if (triggerEl.getAttribute('tab-listener') !== 'true') {
|
|
2558
|
-
triggerEl.addEventListener('click', event => {
|
|
2559
|
-
event.preventDefault();
|
|
2560
|
-
tabTrigger.show();
|
|
2561
|
-
});
|
|
2562
|
-
triggerEl.setAttribute('tab-listener', 'true'); // Prevents multiple insertion of the listener
|
|
2563
|
-
}
|
|
2564
|
-
});
|
|
2565
|
-
});
|
|
2566
|
-
}
|
|
2567
|
-
ngOnDestroy() {
|
|
2568
|
-
var _a;
|
|
2569
|
-
(_a = this.tabSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(sub => sub.unsubscribe());
|
|
2570
|
-
}
|
|
2571
|
-
}
|
|
2572
|
-
TabContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TabContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2573
|
-
TabContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: TabContainerComponent, selector: "it-tab-container", inputs: { auto: "auto", iconText: "iconText", dark: "dark" }, queries: [{ propertyName: "tabs", predicate: TabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"nav nav-tabs\"\n [class.auto]=\"isTrueBooleanInput(auto)\"\n [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n role=\"tablist\">\n\n <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n <a #tabNavLinks [id]=\"tab.id+'-tab-link'\"\n role=\"tab\"\n class=\"nav-link\"\n [class.active]=\"isTrueBooleanInput(tab.active)\"\n [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n [attr.href]=\"'#'+tab.id+'-tab'\"\n [attr.aria-controls]=\"tab.id+'-tab'\">\n <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n {{tab.label}}\n </a>\n </li>\n</ul>\n\n<div class=\"tab-content\">\n <div *ngFor=\"let tab of tabs\"\n [id]=\"tab.id+'-tab'\"\n class=\"tab-pane p-4 fade {{tab.class ?? ''}}\"\n [class.active]=\"isTrueBooleanInput(tab.active)\"\n [class.show]=\"isTrueBooleanInput(tab.active)\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TabContainerComponent, decorators: [{
|
|
2575
|
-
type: Component,
|
|
2576
|
-
args: [{ selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"nav nav-tabs\"\n [class.auto]=\"isTrueBooleanInput(auto)\"\n [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n role=\"tablist\">\n\n <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n <a #tabNavLinks [id]=\"tab.id+'-tab-link'\"\n role=\"tab\"\n class=\"nav-link\"\n [class.active]=\"isTrueBooleanInput(tab.active)\"\n [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n [attr.href]=\"'#'+tab.id+'-tab'\"\n [attr.aria-controls]=\"tab.id+'-tab'\">\n <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n {{tab.label}}\n </a>\n </li>\n</ul>\n\n<div class=\"tab-content\">\n <div *ngFor=\"let tab of tabs\"\n [id]=\"tab.id+'-tab'\"\n class=\"tab-pane p-4 fade {{tab.class ?? ''}}\"\n [class.active]=\"isTrueBooleanInput(tab.active)\"\n [class.show]=\"isTrueBooleanInput(tab.active)\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n </div>\n</div>\n" }]
|
|
2577
|
-
}], propDecorators: { auto: [{
|
|
2578
|
-
type: Input
|
|
2579
|
-
}], iconText: [{
|
|
2580
|
-
type: Input
|
|
2581
|
-
}], dark: [{
|
|
2582
|
-
type: Input
|
|
2583
|
-
}], tabs: [{
|
|
2584
|
-
type: ContentChildren,
|
|
2585
|
-
args: [TabItemComponent]
|
|
2586
|
-
}], tabNavLinks: [{
|
|
2587
|
-
type: ViewChildren,
|
|
2588
|
-
args: ['tabNavLinks']
|
|
2589
|
-
}] } });
|
|
2590
|
-
|
|
2591
|
-
class TableComponent {
|
|
2592
|
-
constructor() {
|
|
2593
|
-
/**
|
|
2594
|
-
* Responsive tables allow you to scroll tables horizontally with ease.
|
|
2595
|
-
* @default responsive
|
|
2596
|
-
*/
|
|
2597
|
-
this.responsive = 'responsive';
|
|
2598
|
-
}
|
|
2599
|
-
get isStriped() {
|
|
2600
|
-
return isTrueBooleanInput(this.striped);
|
|
2601
|
-
}
|
|
2602
|
-
get isHover() {
|
|
2603
|
-
return isTrueBooleanInput(this.hover);
|
|
2604
|
-
}
|
|
2605
|
-
get isBordered() {
|
|
2606
|
-
return isTrueBooleanInput(this.bordered);
|
|
2607
|
-
}
|
|
2608
|
-
get isBorderless() {
|
|
2609
|
-
return isTrueBooleanInput(this.borderless);
|
|
2610
|
-
}
|
|
2611
|
-
get isCompact() {
|
|
2612
|
-
return isTrueBooleanInput(this.compact);
|
|
2613
|
-
}
|
|
2614
|
-
get isCaptionTop() {
|
|
2615
|
-
return isTrueBooleanInput(this.captionTop);
|
|
2616
|
-
}
|
|
2617
|
-
}
|
|
2618
|
-
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2619
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: TableComponent, selector: "it-table", inputs: { color: "color", headColor: "headColor", alignment: "alignment", striped: "striped", hover: "hover", bordered: "bordered", borderless: "borderless", compact: "compact", captionTop: "captionTop", responsive: "responsive" }, ngImport: i0, template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n <table class=\"table{{color ? ' table-' + color : '' }}{{alignment ? ' ' + alignment : '' }}\"\n [class.table-striped]=\"isStriped\"\n [class.table-hover]=\"isHover\"\n [class.table-bordered]=\"isBordered\"\n [class.table-borderless]=\"isBorderless\"\n [class.table-sm]=\"isCompact\"\n [class.caption-top]=\"isCaptionTop\">\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 });
|
|
2620
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
2621
|
-
type: Component,
|
|
2622
|
-
args: [{ selector: 'it-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n <table class=\"table{{color ? ' table-' + color : '' }}{{alignment ? ' ' + alignment : '' }}\"\n [class.table-striped]=\"isStriped\"\n [class.table-hover]=\"isHover\"\n [class.table-bordered]=\"isBordered\"\n [class.table-borderless]=\"isBorderless\"\n [class.table-sm]=\"isCompact\"\n [class.caption-top]=\"isCaptionTop\">\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"] }]
|
|
2623
|
-
}], propDecorators: { color: [{
|
|
2624
|
-
type: Input
|
|
2625
|
-
}], headColor: [{
|
|
2626
|
-
type: Input
|
|
2627
|
-
}], alignment: [{
|
|
2628
|
-
type: Input
|
|
2629
|
-
}], striped: [{
|
|
2630
|
-
type: Input
|
|
2631
|
-
}], hover: [{
|
|
2632
|
-
type: Input
|
|
2633
|
-
}], bordered: [{
|
|
2634
|
-
type: Input
|
|
2635
|
-
}], borderless: [{
|
|
2636
|
-
type: Input
|
|
2637
|
-
}], compact: [{
|
|
2638
|
-
type: Input
|
|
2639
|
-
}], captionTop: [{
|
|
2640
|
-
type: Input
|
|
2641
|
-
}], responsive: [{
|
|
2642
|
-
type: Input
|
|
2643
|
-
}] } });
|
|
2644
|
-
|
|
2645
|
-
class TooltipDirective {
|
|
2646
|
-
constructor(_elementRef) {
|
|
2647
|
-
this._elementRef = _elementRef;
|
|
2648
|
-
/**
|
|
2649
|
-
* This event fires immediately when the show method is called.
|
|
2650
|
-
*/
|
|
2651
|
-
this.showEvent = new EventEmitter();
|
|
2652
|
-
/**
|
|
2653
|
-
* This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
|
|
2654
|
-
*/
|
|
2655
|
-
this.shownEvent = new EventEmitter();
|
|
2656
|
-
/**
|
|
2657
|
-
* This event fires immediately when the hide method is called.
|
|
2658
|
-
*/
|
|
2659
|
-
this.hideEvent = new EventEmitter();
|
|
2660
|
-
/**
|
|
2661
|
-
* This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
|
|
2662
|
-
*/
|
|
2663
|
-
this.hiddenEvent = new EventEmitter();
|
|
2664
|
-
/**
|
|
2665
|
-
* This event fires after the show event when the tooltip template has been added to the DOM.
|
|
2666
|
-
*/
|
|
2667
|
-
this.insertedEvent = new EventEmitter();
|
|
2668
|
-
this.element = this._elementRef.nativeElement;
|
|
2669
|
-
}
|
|
2670
|
-
/**
|
|
2671
|
-
* Define the tooltip title
|
|
2672
|
-
* @param title the tooltip title
|
|
2673
|
-
*/
|
|
2674
|
-
set title(title) {
|
|
2675
|
-
if (title) {
|
|
2676
|
-
// this.element.setAttribute("title", title);
|
|
2677
|
-
this.element.setAttribute('data-bs-original-title', title);
|
|
2678
|
-
}
|
|
2679
|
-
}
|
|
2680
|
-
/**
|
|
2681
|
-
* Define the tooltip placement
|
|
2682
|
-
* @param placement
|
|
2683
|
-
*/
|
|
2684
|
-
set tooltipPlacement(placement) {
|
|
2685
|
-
this.element.setAttribute('data-bs-placement', placement);
|
|
2686
|
-
}
|
|
2687
|
-
/**
|
|
2688
|
-
* Indicates whether the title contains html
|
|
2689
|
-
* @param html true if contain html
|
|
2690
|
-
*/
|
|
2691
|
-
set tooltipHtml(html) {
|
|
2692
|
-
this.element.setAttribute('data-bs-html', isTrueBooleanInput(html) ? 'true' : 'false');
|
|
2693
|
-
}
|
|
2694
|
-
ngAfterViewInit() {
|
|
2695
|
-
this.element.setAttribute('data-bs-toggle', 'tooltip');
|
|
2696
|
-
this.tooltip = Tooltip.getOrCreateInstance(this.element);
|
|
2697
|
-
this.element.addEventListener('show.bs.tooltip', event => this.showEvent.emit(event));
|
|
2698
|
-
this.element.addEventListener('shown.bs.tooltip', event => this.shownEvent.emit(event));
|
|
2699
|
-
this.element.addEventListener('hide.bs.tooltip', event => this.hideEvent.emit(event));
|
|
2700
|
-
this.element.addEventListener('hidden.bs.tooltip', event => this.hiddenEvent.emit(event));
|
|
2701
|
-
this.element.addEventListener('inserted.bs.tooltip', event => this.insertedEvent.emit(event));
|
|
2702
|
-
}
|
|
2703
|
-
ngOnDestroy() {
|
|
2704
|
-
this.dispose();
|
|
2705
|
-
}
|
|
2706
|
-
/**
|
|
2707
|
-
* Shows the tooltip of an item.
|
|
2708
|
-
*/
|
|
2709
|
-
show() {
|
|
2710
|
-
var _a;
|
|
2711
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.show();
|
|
2712
|
-
}
|
|
2713
|
-
/**
|
|
2714
|
-
* Hide the tooltip of an element.
|
|
2715
|
-
*/
|
|
2716
|
-
hide() {
|
|
2717
|
-
var _a;
|
|
2718
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.hide();
|
|
2719
|
-
}
|
|
2720
|
-
/**
|
|
2721
|
-
* Activate / Deactivate the tooltip of an element
|
|
2722
|
-
*/
|
|
2723
|
-
toggle() {
|
|
2724
|
-
var _a;
|
|
2725
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.toggle();
|
|
2726
|
-
}
|
|
2727
|
-
/**
|
|
2728
|
-
* Hides and destroys the tooltip of an element.
|
|
2729
|
-
*/
|
|
2730
|
-
dispose() {
|
|
2731
|
-
var _a;
|
|
2732
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
2733
|
-
}
|
|
2734
|
-
/**
|
|
2735
|
-
* Gives the tooltip of an element a chance to be shown.
|
|
2736
|
-
*/
|
|
2737
|
-
enable() {
|
|
2738
|
-
var _a;
|
|
2739
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.enable();
|
|
2740
|
-
}
|
|
2741
|
-
/**
|
|
2742
|
-
* Removes the ability to show the tooltip of an element.
|
|
2743
|
-
*/
|
|
2744
|
-
disable() {
|
|
2745
|
-
var _a;
|
|
2746
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.disable();
|
|
2747
|
-
}
|
|
2748
|
-
/**
|
|
2749
|
-
* Toggles the possibility that the tooltip of an element is shown or hidden.
|
|
2750
|
-
*/
|
|
2751
|
-
toggleEnabled() {
|
|
2752
|
-
var _a;
|
|
2753
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.disable();
|
|
2754
|
-
}
|
|
2755
|
-
/**
|
|
2756
|
-
* Updates the position of an element's tooltip.
|
|
2757
|
-
*/
|
|
2758
|
-
update() {
|
|
2759
|
-
var _a;
|
|
2760
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.disable();
|
|
2761
|
-
}
|
|
2762
|
-
}
|
|
2763
|
-
TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2764
|
-
TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: TooltipDirective, selector: "[itTooltip]", inputs: { title: ["itTooltip", "title"], tooltipPlacement: "tooltipPlacement", tooltipHtml: "tooltipHtml" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itTooltip"], ngImport: i0 });
|
|
2765
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
2766
|
-
type: Directive,
|
|
2767
|
-
args: [{
|
|
2768
|
-
selector: '[itTooltip]',
|
|
2769
|
-
exportAs: 'itTooltip'
|
|
2770
|
-
}]
|
|
2771
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { title: [{
|
|
2772
|
-
type: Input,
|
|
2773
|
-
args: ['itTooltip']
|
|
2774
|
-
}], tooltipPlacement: [{
|
|
2775
|
-
type: Input
|
|
2776
|
-
}], tooltipHtml: [{
|
|
2777
|
-
type: Input
|
|
2778
|
-
}], showEvent: [{
|
|
2779
|
-
type: Output
|
|
2780
|
-
}], shownEvent: [{
|
|
2781
|
-
type: Output
|
|
2782
|
-
}], hideEvent: [{
|
|
2783
|
-
type: Output
|
|
2784
|
-
}], hiddenEvent: [{
|
|
2785
|
-
type: Output
|
|
2786
|
-
}], insertedEvent: [{
|
|
2787
|
-
type: Output
|
|
2788
|
-
}] } });
|
|
2789
|
-
|
|
2790
|
-
class CheckboxComponent extends AbstractFormComponent {
|
|
2791
|
-
get isIndeterminate() {
|
|
2792
|
-
return isTrueBooleanInput(this.indeterminate);
|
|
2793
|
-
}
|
|
2794
|
-
get isGroup() {
|
|
2795
|
-
return isTrueBooleanInput(this.group);
|
|
2796
|
-
}
|
|
2797
|
-
ngOnInit() {
|
|
2798
|
-
super.ngOnInit();
|
|
2799
|
-
if (this.control.value || this.checked === undefined) {
|
|
2800
|
-
return;
|
|
2801
|
-
}
|
|
2802
|
-
const value = isTrueBooleanInput(this.checked);
|
|
2803
|
-
this.writeValue(value);
|
|
2804
|
-
return this.onChange(value);
|
|
2805
|
-
}
|
|
2806
|
-
}
|
|
2807
|
-
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2808
|
-
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: CheckboxComponent, selector: "it-checkbox", inputs: { toggle: "toggle", inline: "inline", group: "group", checked: "checked", indeterminate: "indeterminate" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n <div class=\"form-check\"\n [class.form-check-group]=\"isGroup\"\n [class.form-check-inline]=\"inline\">\n\n <div *ngIf=\"toggle; else defaultStyle\" class=\"toggles\">\n <label [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n <input [id]=\"id\"\n type=\"checkbox\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\">\n <span class=\"lever\"></span>\n </label>\n </div>\n\n <ng-template #defaultStyle>\n <input [id]=\"id\"\n type=\"checkbox\"\n class=\"form-check-input\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [class.semi-checked]=\"isIndeterminate\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\">\n <label class=\"form-check-label\" [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n </label>\n </ng-template>\n\n <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n\n <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n </div>\n\n <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #error>\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n</ng-template>\n\n<ng-template #htmlLabel>\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customLabel.hasChildNodes()\">{{label}}</ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2810
|
-
type: Component,
|
|
2811
|
-
args: [{ selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"form-check\"\n [class.form-check-group]=\"isGroup\"\n [class.form-check-inline]=\"inline\">\n\n <div *ngIf=\"toggle; else defaultStyle\" class=\"toggles\">\n <label [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n <input [id]=\"id\"\n type=\"checkbox\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\">\n <span class=\"lever\"></span>\n </label>\n </div>\n\n <ng-template #defaultStyle>\n <input [id]=\"id\"\n type=\"checkbox\"\n class=\"form-check-input\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [class.semi-checked]=\"isIndeterminate\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\">\n <label class=\"form-check-label\" [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n </label>\n </ng-template>\n\n <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n\n <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n </div>\n\n <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #error>\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n</ng-template>\n\n<ng-template #htmlLabel>\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customLabel.hasChildNodes()\">{{label}}</ng-container>\n</ng-template>\n" }]
|
|
2812
|
-
}], propDecorators: { toggle: [{
|
|
2813
|
-
type: Input
|
|
2814
|
-
}], inline: [{
|
|
2815
|
-
type: Input
|
|
2816
|
-
}], group: [{
|
|
2817
|
-
type: Input
|
|
2818
|
-
}], checked: [{
|
|
2819
|
-
type: Input
|
|
2820
|
-
}], indeterminate: [{
|
|
2821
|
-
type: Input
|
|
2822
|
-
}] } });
|
|
2823
|
-
|
|
2824
|
-
class PasswordInputComponent extends AbstractFormComponent {
|
|
2825
|
-
constructor() {
|
|
2826
|
-
super(...arguments);
|
|
2827
|
-
/**
|
|
2828
|
-
* The field is required
|
|
2829
|
-
* @default true
|
|
2830
|
-
*/
|
|
2831
|
-
this.required = true;
|
|
2832
|
-
/**
|
|
2833
|
-
* The password minimum length
|
|
2834
|
-
* @default 10
|
|
2835
|
-
*/
|
|
2836
|
-
this.minLength = 10;
|
|
2837
|
-
/**
|
|
2838
|
-
* The password must contain at least one number
|
|
2839
|
-
* @default true
|
|
2840
|
-
*/
|
|
2841
|
-
this.useNumber = true;
|
|
2842
|
-
/**
|
|
2843
|
-
* The password must contain at least one uppercase character
|
|
2844
|
-
* @default true
|
|
2845
|
-
*/
|
|
2846
|
-
this.useCapitalCase = true;
|
|
2847
|
-
/**
|
|
2848
|
-
* The password must contain at least one lowercase character
|
|
2849
|
-
* @default true
|
|
2850
|
-
*/
|
|
2851
|
-
this.useSmallCase = true;
|
|
2852
|
-
/**
|
|
2853
|
-
* The password must contain at least one special character
|
|
2854
|
-
* @default true
|
|
2855
|
-
*/
|
|
2856
|
-
this.useSpecialCharacters = true;
|
|
2857
|
-
/**
|
|
2858
|
-
* The input placeholder
|
|
2859
|
-
*/
|
|
2860
|
-
this.placeholder = '';
|
|
2861
|
-
/**
|
|
2862
|
-
* Is the confirmation password field
|
|
2863
|
-
* @default false
|
|
2864
|
-
*/
|
|
2865
|
-
this.confirmPasswordField = false;
|
|
2866
|
-
}
|
|
2867
|
-
ngOnInit() {
|
|
2868
|
-
super.ngOnInit();
|
|
2869
|
-
if (!this.isConfirmPasswordField) {
|
|
2870
|
-
this.addValidators(ItValidators.password(this.minLength, this.useNumber, this.useCapitalCase, this.useSmallCase, this.useSpecialCharacters, this.required));
|
|
2871
|
-
}
|
|
2872
|
-
else if (this.required) {
|
|
2873
|
-
this.addValidators(Validators.required);
|
|
2874
|
-
}
|
|
2875
|
-
}
|
|
2876
|
-
ngAfterViewInit() {
|
|
2877
|
-
super.ngAfterViewInit();
|
|
2878
|
-
if (this.inputElement) {
|
|
2879
|
-
this.inputPasswordBs = InputPassword.getOrCreateInstance(this.inputElement.nativeElement, {
|
|
2880
|
-
showText: this.isStrengthMeter,
|
|
2881
|
-
minimumLength: this.minLength
|
|
2882
|
-
});
|
|
2883
|
-
}
|
|
2884
|
-
}
|
|
2885
|
-
get isStrengthMeter() {
|
|
2886
|
-
return !this.isConfirmPasswordField && isTrueBooleanInput(this.showStrengthMeter);
|
|
2887
|
-
}
|
|
2888
|
-
get isConfirmPasswordField() {
|
|
2889
|
-
return isTrueBooleanInput(this.confirmPasswordField);
|
|
2890
|
-
}
|
|
2891
|
-
/**
|
|
2892
|
-
* Return the invalid message string from TranslateService
|
|
2893
|
-
*/
|
|
2894
|
-
get invalidMessage() {
|
|
2895
|
-
if (this.hasError('noPasswordMatch')) {
|
|
2896
|
-
return this._translateService.get('it.errors.password-no-match');
|
|
2897
|
-
}
|
|
2898
|
-
if (this.hasError('minlength')) {
|
|
2899
|
-
return this._translateService.get('it.errors.password-min-length', {
|
|
2900
|
-
minLength: this.minLength
|
|
2901
|
-
});
|
|
2902
|
-
}
|
|
2903
|
-
if (this.hasError('hasNumber')) {
|
|
2904
|
-
return this._translateService.get('it.errors.password-number');
|
|
2905
|
-
}
|
|
2906
|
-
if (this.hasError('hasCapitalCase')) {
|
|
2907
|
-
return this._translateService.get('it.errors.password-capital-case');
|
|
2908
|
-
}
|
|
2909
|
-
if (this.hasError('hasSmallCase')) {
|
|
2910
|
-
return this._translateService.get('it.errors.password-capital-case');
|
|
2911
|
-
}
|
|
2912
|
-
if (this.hasError('hasSpecialCharacters')) {
|
|
2913
|
-
return this._translateService.get('it.errors.password-special-character');
|
|
2914
|
-
}
|
|
2915
|
-
return super.invalidMessage;
|
|
2916
|
-
}
|
|
2917
|
-
/**
|
|
2918
|
-
* Retrieve the default StrengthMeter description message from TranslateService
|
|
2919
|
-
*/
|
|
2920
|
-
get strengthMeterDescription() {
|
|
2921
|
-
const keys = ['it.form.password-strength-meter.description.default'];
|
|
2922
|
-
if (this.useNumber) {
|
|
2923
|
-
keys.push('it.form.password-strength-meter.description.number');
|
|
2924
|
-
}
|
|
2925
|
-
if (this.useCapitalCase) {
|
|
2926
|
-
keys.push('it.form.password-strength-meter.description.capital-case');
|
|
2927
|
-
}
|
|
2928
|
-
if (this.useSpecialCharacters) {
|
|
2929
|
-
keys.push('it.form.password-strength-meter.description.special-character');
|
|
2930
|
-
}
|
|
2931
|
-
return this._translateService.get(keys, { minLength: this.minLength }).pipe(map(labels => Object.values(labels).join(', ')));
|
|
2932
|
-
}
|
|
2933
|
-
}
|
|
2934
|
-
PasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2935
|
-
PasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: PasswordInputComponent, selector: "it-password-input", inputs: { required: "required", minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: "showStrengthMeter", confirmPasswordField: "confirmPasswordField" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n <input [id]=\"id\" #input\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]=\"isConfirmPasswordField ? 'off' : undefined\">\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 <div *ngIf=\"isInvalid\" [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\n\n <small *ngIf=\"description !== undefined && !isStrengthMeter\" [id]=\"id + '-description'\" class=\"form-text\">\n {{description !== true ? description : (strengthMeterDescription | async)}}\n </small>\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 <div *ngIf=\"isStrengthMeter\" class=\"password-strength-meter\">\n <small [id]=\"id + '-description'\" 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\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\"\n aria-valuemax=\"100\"></div>\n </div>\n </div>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
2937
|
-
type: Component,
|
|
2938
|
-
args: [{ selector: 'it-password-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n <input [id]=\"id\" #input\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]=\"isConfirmPasswordField ? 'off' : undefined\">\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 <div *ngIf=\"isInvalid\" [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\n\n <small *ngIf=\"description !== undefined && !isStrengthMeter\" [id]=\"id + '-description'\" class=\"form-text\">\n {{description !== true ? description : (strengthMeterDescription | async)}}\n </small>\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 <div *ngIf=\"isStrengthMeter\" class=\"password-strength-meter\">\n <small [id]=\"id + '-description'\" 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\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\"\n aria-valuemax=\"100\"></div>\n </div>\n </div>\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"] }]
|
|
2939
|
-
}], propDecorators: { required: [{
|
|
2940
|
-
type: Input
|
|
2941
|
-
}], minLength: [{
|
|
2942
|
-
type: Input
|
|
2943
|
-
}], useNumber: [{
|
|
2944
|
-
type: Input
|
|
2945
|
-
}], useCapitalCase: [{
|
|
2946
|
-
type: Input
|
|
2947
|
-
}], useSmallCase: [{
|
|
2948
|
-
type: Input
|
|
2949
|
-
}], useSpecialCharacters: [{
|
|
2950
|
-
type: Input
|
|
2951
|
-
}], placeholder: [{
|
|
2952
|
-
type: Input
|
|
2953
|
-
}], description: [{
|
|
2954
|
-
type: Input
|
|
2955
|
-
}], showStrengthMeter: [{
|
|
2956
|
-
type: Input
|
|
2957
|
-
}], confirmPasswordField: [{
|
|
2958
|
-
type: Input
|
|
2959
|
-
}], inputElement: [{
|
|
2960
|
-
type: ViewChild,
|
|
2961
|
-
args: ['input']
|
|
2962
|
-
}] } });
|
|
2963
|
-
|
|
2964
|
-
class RadioButtonComponent extends AbstractFormComponent {
|
|
2965
|
-
constructor() {
|
|
2966
|
-
super(...arguments);
|
|
2967
|
-
/**
|
|
2968
|
-
* If show radio inline
|
|
2969
|
-
* @default false
|
|
2970
|
-
*/
|
|
2971
|
-
this.inline = false;
|
|
2972
|
-
/**
|
|
2973
|
-
* If is radio group
|
|
2974
|
-
* @default false
|
|
2975
|
-
*/
|
|
2976
|
-
this.group = false;
|
|
2977
|
-
}
|
|
2978
|
-
get isInline() {
|
|
2979
|
-
return isTrueBooleanInput(this.inline);
|
|
2980
|
-
}
|
|
2981
|
-
get isGroup() {
|
|
2982
|
-
return isTrueBooleanInput(this.group);
|
|
2983
|
-
}
|
|
2984
|
-
get name() {
|
|
2985
|
-
var _a, _b, _c;
|
|
2986
|
-
let name = '';
|
|
2987
|
-
if (this._ngControl) {
|
|
2988
|
-
name = ((_a = this._ngControl.name) === null || _a === void 0 ? void 0 : _a.toString()) || '';
|
|
2989
|
-
// Retrieve parent name, prevent duplicate name inside FormArray or nested FormGroup
|
|
2990
|
-
let control = (_b = this._ngControl.control) === null || _b === void 0 ? void 0 : _b.parent;
|
|
2991
|
-
while (control === null || control === void 0 ? void 0 : control.parent) {
|
|
2992
|
-
const controls = ((_c = control === null || control === void 0 ? void 0 : control.parent) === null || _c === void 0 ? void 0 : _c.controls) || {};
|
|
2993
|
-
const parentName = Object.keys(controls).find(name => control === controls[name]) || null;
|
|
2994
|
-
if (!parentName) {
|
|
2995
|
-
break;
|
|
2996
|
-
}
|
|
2997
|
-
name = `${parentName}.${name}`; // parent.0.radioName
|
|
2998
|
-
control = control.parent;
|
|
2999
|
-
}
|
|
3000
|
-
}
|
|
3001
|
-
return name;
|
|
3002
|
-
}
|
|
3003
|
-
ngOnInit() {
|
|
3004
|
-
super.ngOnInit();
|
|
3005
|
-
if (this.control.value || !this.value || isFalseBooleanInput(this.checked)) {
|
|
3006
|
-
return;
|
|
3007
|
-
}
|
|
3008
|
-
this.writeValue(this.value);
|
|
3009
|
-
return this.onChange(this.value);
|
|
3010
|
-
}
|
|
3011
|
-
}
|
|
3012
|
-
RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3013
|
-
RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: RadioButtonComponent, selector: "it-radio-button[value]", inputs: { value: "value", inline: "inline", group: "group", checked: "checked" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n <div class=\"form-check\"\n [class.form-check-group]=\"isGroup\"\n [class.form-check-inline]=\"isInline\">\n\n <input\n [id]=\"id\"\n type=\"radio\"\n [value]=\"value\"\n class=\"form-check-input\"\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 <ng-container *ngIf=\"!customLabel.hasChildNodes()\">{{label}}</ng-container>\n </label>\n\n <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n\n <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\n\n </div>\n\n <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3014
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
3015
|
-
type: Component,
|
|
3016
|
-
args: [{ selector: 'it-radio-button[value]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"form-check\"\n [class.form-check-group]=\"isGroup\"\n [class.form-check-inline]=\"isInline\">\n\n <input\n [id]=\"id\"\n type=\"radio\"\n [value]=\"value\"\n class=\"form-check-input\"\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 <ng-container *ngIf=\"!customLabel.hasChildNodes()\">{{label}}</ng-container>\n </label>\n\n <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n\n <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\n\n </div>\n\n <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\n</ng-container>\n" }]
|
|
3017
|
-
}], propDecorators: { value: [{
|
|
3018
|
-
type: Input
|
|
3019
|
-
}], inline: [{
|
|
3020
|
-
type: Input
|
|
3021
|
-
}], group: [{
|
|
3022
|
-
type: Input
|
|
3023
|
-
}], checked: [{
|
|
3024
|
-
type: Input
|
|
3025
|
-
}] } });
|
|
3026
|
-
|
|
3027
|
-
class SelectComponent extends AbstractFormComponent {
|
|
3028
|
-
ngOnInit() {
|
|
3029
|
-
var _a, _b;
|
|
3030
|
-
super.ngOnInit();
|
|
3031
|
-
if (this.control.value) {
|
|
3032
|
-
return;
|
|
3033
|
-
}
|
|
3034
|
-
const selectedOption = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(this.optionIsSelected);
|
|
3035
|
-
if (selectedOption) {
|
|
3036
|
-
this.writeValue(selectedOption.value);
|
|
3037
|
-
return this.onChange(selectedOption.value);
|
|
3038
|
-
}
|
|
3039
|
-
const selectedGroupOption = (_b = this.groups) === null || _b === void 0 ? void 0 : _b.flatMap(g => g.options).find(this.optionIsSelected);
|
|
3040
|
-
if (selectedGroupOption) {
|
|
3041
|
-
this.writeValue(selectedGroupOption.value);
|
|
3042
|
-
this.onChange(selectedGroupOption.value);
|
|
3043
|
-
}
|
|
3044
|
-
}
|
|
3045
|
-
/**
|
|
3046
|
-
* Check if the option is selected
|
|
3047
|
-
* @param option the option
|
|
3048
|
-
*/
|
|
3049
|
-
optionIsSelected(option) {
|
|
3050
|
-
if (option.selected === true) {
|
|
3051
|
-
return true;
|
|
3052
|
-
}
|
|
3053
|
-
if (typeof option.selected === 'function') {
|
|
3054
|
-
return option.selected(this.control.value);
|
|
3055
|
-
}
|
|
3056
|
-
return false;
|
|
3057
|
-
}
|
|
3058
|
-
/**
|
|
3059
|
-
* Check if the option is disabled
|
|
3060
|
-
* @param option the option
|
|
3061
|
-
*/
|
|
3062
|
-
optionIsDisabled(option) {
|
|
3063
|
-
if (option.disabled === true) {
|
|
3064
|
-
return true;
|
|
3065
|
-
}
|
|
3066
|
-
if (typeof option.disabled === 'function') {
|
|
3067
|
-
return option.disabled(this.control.value);
|
|
3068
|
-
}
|
|
3069
|
-
return false;
|
|
3070
|
-
}
|
|
3071
|
-
}
|
|
3072
|
-
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3073
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: SelectComponent, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n <label [for]=\"id\">{{label}}</label>\n <select [id]=\"id\" [formControl]=\"control\" [attr.aria-describedby]=\"id + '-description'\">\n <ng-container *ngIf=\"options\">\n <option *ngFor=\"let option of options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n {{option.text ?? option.value}}\n </option>\n </ng-container>\n\n <ng-container *ngIf=\"groups\">\n <optgroup *ngFor=\"let group of groups\" [label]=\"group.label\">\n <option *ngFor=\"let option of group.options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n {{option.text ?? option.value}}\n </option>\n </optgroup>\n </ng-container>\n </select>\n <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
3074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectComponent, decorators: [{
|
|
3075
|
-
type: Component,
|
|
3076
|
-
args: [{ selector: 'it-select', template: "<div class=\"select-wrapper\">\n <label [for]=\"id\">{{label}}</label>\n <select [id]=\"id\" [formControl]=\"control\" [attr.aria-describedby]=\"id + '-description'\">\n <ng-container *ngIf=\"options\">\n <option *ngFor=\"let option of options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n {{option.text ?? option.value}}\n </option>\n </ng-container>\n\n <ng-container *ngIf=\"groups\">\n <optgroup *ngFor=\"let group of groups\" [label]=\"group.label\">\n <option *ngFor=\"let option of group.options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n {{option.text ?? option.value}}\n </option>\n </optgroup>\n </ng-container>\n </select>\n <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
|
|
3077
|
-
}], propDecorators: { options: [{
|
|
3078
|
-
type: Input
|
|
3079
|
-
}], groups: [{
|
|
3080
|
-
type: Input
|
|
3081
|
-
}], description: [{
|
|
3082
|
-
type: Input
|
|
3083
|
-
}] } });
|
|
3084
|
-
|
|
3085
|
-
class TextareaComponent extends AbstractFormComponent {
|
|
3086
|
-
constructor() {
|
|
3087
|
-
super(...arguments);
|
|
3088
|
-
/**
|
|
3089
|
-
* Textarea Rows
|
|
3090
|
-
* @default 3
|
|
3091
|
-
*/
|
|
3092
|
-
this.rows = 3;
|
|
3093
|
-
/**
|
|
3094
|
-
* The textarea placeholder
|
|
3095
|
-
*/
|
|
3096
|
-
this.placeholder = '';
|
|
3097
|
-
}
|
|
3098
|
-
/**
|
|
3099
|
-
* Return the invalid message string from TranslateService
|
|
3100
|
-
*/
|
|
3101
|
-
get invalidMessage() {
|
|
3102
|
-
if (this.control.hasError('maxlength')) {
|
|
3103
|
-
const error = this.getError('maxlength');
|
|
3104
|
-
return this._translateService.get('it.errors.max-length-invalid', { max: error.requiredLength });
|
|
3105
|
-
}
|
|
3106
|
-
if (this.control.hasError('pattern')) {
|
|
3107
|
-
const error = this.getError('pattern');
|
|
3108
|
-
return this._translateService.get('it.errors.pattern-invalid', { pattern: error.requiredPattern });
|
|
3109
|
-
}
|
|
3110
|
-
return super.invalidMessage;
|
|
3111
|
-
}
|
|
3112
|
-
}
|
|
3113
|
-
TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3114
|
-
TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: TextareaComponent, selector: "it-textarea", inputs: { rows: "rows", placeholder: "placeholder", description: "description" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n <textarea\n [id]=\"id\"\n [rows]=\"rows\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n (blur)=\"markAsTouched()\"></textarea>\n\n <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError><ng-content select=\"[error]\"></ng-content></div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
3116
|
-
type: Component,
|
|
3117
|
-
args: [{ selector: 'it-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n <textarea\n [id]=\"id\"\n [rows]=\"rows\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n (blur)=\"markAsTouched()\"></textarea>\n\n <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError><ng-content select=\"[error]\"></ng-content></div>\n <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n </div>\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"] }]
|
|
3118
|
-
}], propDecorators: { rows: [{
|
|
3119
|
-
type: Input
|
|
3120
|
-
}], placeholder: [{
|
|
3121
|
-
type: Input
|
|
3122
|
-
}], description: [{
|
|
3123
|
-
type: Input
|
|
3124
|
-
}] } });
|
|
3125
|
-
|
|
3126
|
-
class FileUtils {
|
|
3127
|
-
/**
|
|
3128
|
-
* Return the file size string
|
|
3129
|
-
* @param file the file
|
|
3130
|
-
* @param decimals decimal to show
|
|
3131
|
-
*/
|
|
3132
|
-
static getFileSizeString(file, decimals = 2) {
|
|
3133
|
-
const bytes = file.size;
|
|
3134
|
-
if (!+bytes) {
|
|
3135
|
-
return '0 Bytes';
|
|
3136
|
-
}
|
|
3137
|
-
const k = 1024;
|
|
3138
|
-
const dm = decimals < 0 ? 0 : decimals;
|
|
3139
|
-
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
|
3140
|
-
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
3141
|
-
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
|
3142
|
-
}
|
|
3143
|
-
/**
|
|
3144
|
-
* Convert a file to base64 string
|
|
3145
|
-
* @param file the base64 string
|
|
3146
|
-
*/
|
|
3147
|
-
static fileToBase64(file) {
|
|
3148
|
-
const reader = new FileReader();
|
|
3149
|
-
reader.readAsDataURL(file);
|
|
3150
|
-
return new Observable(observer => {
|
|
3151
|
-
reader.onload = (e) => {
|
|
3152
|
-
const target = e.target;
|
|
3153
|
-
if (!target || !target.result || target.result instanceof ArrayBuffer) {
|
|
3154
|
-
return observer.error('Error on parse');
|
|
3155
|
-
}
|
|
3156
|
-
observer.next(target.result);
|
|
3157
|
-
observer.complete();
|
|
3158
|
-
};
|
|
3159
|
-
reader.onerror = error => {
|
|
3160
|
-
observer.error(error);
|
|
3161
|
-
};
|
|
3162
|
-
});
|
|
3163
|
-
}
|
|
3164
|
-
/**
|
|
3165
|
-
* Convert base64 to Blob
|
|
3166
|
-
* @param base64 the base64 string
|
|
3167
|
-
* @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')
|
|
3168
|
-
*/
|
|
3169
|
-
static base64ToBlob(base64, mimeType) {
|
|
3170
|
-
const byteString = window.atob(base64);
|
|
3171
|
-
const arrayBuffer = new ArrayBuffer(byteString.length);
|
|
3172
|
-
const int8Array = new Uint8Array(arrayBuffer);
|
|
3173
|
-
for (let i = 0; i < byteString.length; i++) {
|
|
3174
|
-
int8Array[i] = byteString.charCodeAt(i);
|
|
3175
|
-
}
|
|
3176
|
-
return new Blob([int8Array], { type: mimeType });
|
|
3177
|
-
}
|
|
3178
|
-
/**
|
|
3179
|
-
* Convert base64 to File
|
|
3180
|
-
* @param base64 the base64 string
|
|
3181
|
-
* @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')
|
|
3182
|
-
* @param filename the file name
|
|
3183
|
-
*/
|
|
3184
|
-
static base64ToFile(base64, mimeType, filename) {
|
|
3185
|
-
const fileBlob = FileUtils.base64ToBlob(base64, mimeType);
|
|
3186
|
-
return new File([fileBlob], filename, { type: mimeType });
|
|
3187
|
-
}
|
|
3188
|
-
/**
|
|
3189
|
-
* Extract the MIME type from base64 string
|
|
3190
|
-
* @param base64 the base64 string
|
|
3191
|
-
*/
|
|
3192
|
-
static getMimeTypeFromBase64(base64) {
|
|
3193
|
-
const mime = base64.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
|
|
3194
|
-
return (mime && mime.length) ? mime[1] : undefined;
|
|
3195
|
-
}
|
|
3196
|
-
}
|
|
3197
|
-
|
|
3198
|
-
class UploadDragDropComponent extends AbstractComponent {
|
|
3199
|
-
constructor() {
|
|
3200
|
-
super(...arguments);
|
|
3201
|
-
/**
|
|
3202
|
-
* The accepted file type to upload <br>
|
|
3203
|
-
* 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
|
|
3204
|
-
* @example application/pdf,image/png
|
|
3205
|
-
* @default *
|
|
3206
|
-
*/
|
|
3207
|
-
this.accept = '*';
|
|
3208
|
-
/**
|
|
3209
|
-
* Fired when file start to upload
|
|
3210
|
-
*/
|
|
3211
|
-
this.fileStartUpload = new EventEmitter();
|
|
3212
|
-
this.isDragover = false;
|
|
3213
|
-
this.isLoading = false;
|
|
3214
|
-
this.isSuccess = false;
|
|
3215
|
-
}
|
|
3216
|
-
ngAfterViewInit() {
|
|
3217
|
-
super.ngAfterViewInit();
|
|
3218
|
-
if (this.donutElement) {
|
|
3219
|
-
this.donut = ProgressDonut.getOrCreateInstance(this.donutElement.nativeElement);
|
|
3220
|
-
}
|
|
3221
|
-
}
|
|
3222
|
-
// Dragover listener
|
|
3223
|
-
onDragOver(evt) {
|
|
3224
|
-
evt.preventDefault();
|
|
3225
|
-
evt.stopPropagation();
|
|
3226
|
-
this.isDragover = !this.isLoading;
|
|
3227
|
-
}
|
|
3228
|
-
// Dragleave listener
|
|
3229
|
-
onDragLeave(evt) {
|
|
3230
|
-
evt.preventDefault();
|
|
3231
|
-
evt.stopPropagation();
|
|
3232
|
-
this.isDragover = false;
|
|
3233
|
-
}
|
|
3234
|
-
// Drop leave listener
|
|
3235
|
-
onDrop(evt) {
|
|
3236
|
-
var _a;
|
|
3237
|
-
evt.preventDefault();
|
|
3238
|
-
evt.stopPropagation();
|
|
3239
|
-
this.isDragover = false;
|
|
3240
|
-
const files = (_a = evt.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
|
|
3241
|
-
if (this.isLoading || !(files === null || files === void 0 ? void 0 : files.length)) {
|
|
3242
|
-
return;
|
|
3243
|
-
}
|
|
3244
|
-
this.start(files[0]);
|
|
3245
|
-
}
|
|
3246
|
-
/**
|
|
3247
|
-
* On load file from input
|
|
3248
|
-
* @param event
|
|
3249
|
-
*/
|
|
3250
|
-
onLoadFile(event) {
|
|
3251
|
-
var _a;
|
|
3252
|
-
const files = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files;
|
|
3253
|
-
if (!(files === null || files === void 0 ? void 0 : files.length)) {
|
|
3254
|
-
return;
|
|
3255
|
-
}
|
|
3256
|
-
this.start(files[0]);
|
|
3257
|
-
}
|
|
3258
|
-
/**
|
|
3259
|
-
* Start the upload file
|
|
3260
|
-
* @param file
|
|
3261
|
-
*/
|
|
3262
|
-
start(file) {
|
|
3263
|
-
var _a;
|
|
3264
|
-
if (this.accept !== '*' && !this.accept.includes(file.type)) {
|
|
3265
|
-
return;
|
|
3266
|
-
}
|
|
3267
|
-
this.reset();
|
|
3268
|
-
this.isLoading = true;
|
|
3269
|
-
const splitName = file.name.split('.');
|
|
3270
|
-
this.filename = splitName[0];
|
|
3271
|
-
this.extension = (_a = splitName[1]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
|
|
3272
|
-
this.fileSize = FileUtils.getFileSizeString(file);
|
|
3273
|
-
this.fileStartUpload.emit(file);
|
|
3274
|
-
}
|
|
3275
|
-
/**
|
|
3276
|
-
* Percentage of upload
|
|
3277
|
-
* @param value the percentage [0 - 100]
|
|
3278
|
-
*/
|
|
3279
|
-
progress(value) {
|
|
3280
|
-
var _a;
|
|
3281
|
-
if (!this.isLoading) {
|
|
3282
|
-
return;
|
|
3283
|
-
}
|
|
3284
|
-
if (value >= 100) {
|
|
3285
|
-
this.success();
|
|
3286
|
-
}
|
|
3287
|
-
else {
|
|
3288
|
-
(_a = this.donut) === null || _a === void 0 ? void 0 : _a.set(((value < 0) ? 0 : value) / 100);
|
|
3289
|
-
}
|
|
3290
|
-
}
|
|
3291
|
-
/**
|
|
3292
|
-
* Upload success
|
|
3293
|
-
*/
|
|
3294
|
-
success() {
|
|
3295
|
-
this.isLoading = false;
|
|
3296
|
-
this.isSuccess = true;
|
|
3297
|
-
this._changeDetectorRef.detectChanges();
|
|
3298
|
-
}
|
|
3299
|
-
/**
|
|
3300
|
-
* Reset file uploader
|
|
3301
|
-
*/
|
|
3302
|
-
reset() {
|
|
3303
|
-
var _a;
|
|
3304
|
-
this.isLoading = false;
|
|
3305
|
-
this.isSuccess = false;
|
|
3306
|
-
this.filename = this.extension = this.fileSize = undefined;
|
|
3307
|
-
(_a = this.donut) === null || _a === void 0 ? void 0 : _a.set(0);
|
|
3308
|
-
this._changeDetectorRef.detectChanges();
|
|
3309
|
-
}
|
|
3310
|
-
}
|
|
3311
|
-
UploadDragDropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: UploadDragDropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3312
|
-
UploadDragDropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: UploadDragDropComponent, 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 src=\"/bootstrap-italia/dist/assets/upload-drag-drop-icon.svg\" alt=\"drag-drop-icon\" aria-hidden=\"true\">\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 <p *ngIf=\"isLoading\">{{'it.form.upload-loading'|translate}}</p>\n <p *ngIf=\"isSuccess\">{{'it.form.upload-complete'|translate}}</p>\n <p *ngIf=\"!isLoading && !isSuccess\">{{'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 </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: UploadDragDropComponent, decorators: [{
|
|
3314
|
-
type: Component,
|
|
3315
|
-
args: [{ selector: 'it-upload-drag-drop', exportAs: 'itUploadDragDrop', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n <div class=\"upload-dragdrop-image\">\n <img src=\"/bootstrap-italia/dist/assets/upload-drag-drop-icon.svg\" alt=\"drag-drop-icon\" aria-hidden=\"true\">\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 <p *ngIf=\"isLoading\">{{'it.form.upload-loading'|translate}}</p>\n <p *ngIf=\"isSuccess\">{{'it.form.upload-complete'|translate}}</p>\n <p *ngIf=\"!isLoading && !isSuccess\">{{'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 </div>\n</div>\n" }]
|
|
3316
|
-
}], propDecorators: { accept: [{
|
|
3317
|
-
type: Input
|
|
3318
|
-
}], fileStartUpload: [{
|
|
3319
|
-
type: Output
|
|
3320
|
-
}], donutElement: [{
|
|
3321
|
-
type: ViewChild,
|
|
3322
|
-
args: ['donutElement']
|
|
3323
|
-
}], onDragOver: [{
|
|
3324
|
-
type: HostListener,
|
|
3325
|
-
args: ['dragover', ['$event']]
|
|
3326
|
-
}], onDragLeave: [{
|
|
3327
|
-
type: HostListener,
|
|
3328
|
-
args: ['dragleave', ['$event']]
|
|
3329
|
-
}], onDrop: [{
|
|
3330
|
-
type: HostListener,
|
|
3331
|
-
args: ['drop', ['$event']]
|
|
3332
|
-
}] } });
|
|
3333
|
-
|
|
3334
|
-
class UploadFileListComponent extends AbstractComponent {
|
|
3335
|
-
constructor() {
|
|
3336
|
-
super(...arguments);
|
|
3337
|
-
/**
|
|
3338
|
-
* The accepted file type to upload <br>
|
|
3339
|
-
* 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
|
|
3340
|
-
* @example application/pdf,image/png
|
|
3341
|
-
* @default *
|
|
3342
|
-
*/
|
|
3343
|
-
this.accept = '*';
|
|
3344
|
-
/**
|
|
3345
|
-
* If upload multiple files
|
|
3346
|
-
*/
|
|
3347
|
-
this.multiple = true;
|
|
3348
|
-
/**
|
|
3349
|
-
* Fired when upload new files
|
|
3350
|
-
*/
|
|
3351
|
-
this.uploadFiles = new EventEmitter();
|
|
3352
|
-
/**
|
|
3353
|
-
* Fired on delete item button click
|
|
3354
|
-
*/
|
|
3355
|
-
this.deleteItem = new EventEmitter();
|
|
3356
|
-
/**
|
|
3357
|
-
* Cache to preview image
|
|
3358
|
-
*/
|
|
3359
|
-
this.previewImages = new Map();
|
|
3360
|
-
}
|
|
3361
|
-
ngOnInit() {
|
|
3362
|
-
if (this.isImageList && this.accept === '*') {
|
|
3363
|
-
this.accept = 'image/*';
|
|
3364
|
-
}
|
|
3365
|
-
}
|
|
3366
|
-
ngOnChanges(changes) {
|
|
3367
|
-
if (changes['fileList'] && this.isImageList) {
|
|
3368
|
-
const images$ = this.fileList.map(item => FileUtils.fileToBase64(item.file).pipe(take(1), tap(base64 => this.previewImages.set(item.id, base64))));
|
|
3369
|
-
forkJoin(images$).subscribe(() => {
|
|
3370
|
-
this._changeDetectorRef.detectChanges();
|
|
3371
|
-
super.ngOnChanges(changes);
|
|
3372
|
-
});
|
|
3373
|
-
}
|
|
3374
|
-
else {
|
|
3375
|
-
super.ngOnChanges(changes);
|
|
3376
|
-
}
|
|
3377
|
-
}
|
|
3378
|
-
get isMultipleInput() {
|
|
3379
|
-
return isTrueBooleanInput(this.multiple);
|
|
3380
|
-
}
|
|
3381
|
-
get isImageList() {
|
|
3382
|
-
return isTrueBooleanInput(this.images);
|
|
3383
|
-
}
|
|
3384
|
-
get isHideLoadButton() {
|
|
3385
|
-
return isTrueBooleanInput(this.hideLoadButton);
|
|
3386
|
-
}
|
|
3387
|
-
/**
|
|
3388
|
-
* On load file from input
|
|
3389
|
-
* @param event
|
|
3390
|
-
*/
|
|
3391
|
-
onLoadFiles(event) {
|
|
3392
|
-
var _a;
|
|
3393
|
-
const files = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files;
|
|
3394
|
-
if (!files || !files.length) {
|
|
3395
|
-
return;
|
|
3396
|
-
}
|
|
3397
|
-
this.uploadFiles.emit(files);
|
|
3398
|
-
}
|
|
3399
|
-
/**
|
|
3400
|
-
* Get the file size string
|
|
3401
|
-
* @param file
|
|
3402
|
-
*/
|
|
3403
|
-
getFileSize(file) {
|
|
3404
|
-
return FileUtils.getFileSizeString(file);
|
|
3405
|
-
}
|
|
3406
|
-
}
|
|
3407
|
-
UploadFileListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: UploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3408
|
-
UploadFileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: UploadFileListComponent, selector: "it-upload-file-list[fileList]", inputs: { fileList: "fileList", accept: "accept", multiple: "multiple", images: "images", hideLoadButton: "hideLoadButton" }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isHideLoadButton\">\n <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"isMultipleInput\"\n (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</ng-container>\n\n<ul class=\"upload-file-list\" [class.upload-file-list-image]=\"isImageList\" *ngIf=\"fileList.length\">\n <li *ngFor=\"let item of fileList\" 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\n <div class=\"upload-image\" *ngIf=\"isImageList; else icon\">\n <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n </div>\n <ng-template #icon>\n <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n </ng-template>\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\n <button *ngIf=\"item.removable && (!item.progress || item.progress < 100)\" 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 <button *ngIf=\"(!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)\" 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 <it-progress-bar *ngIf=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n [value]=\"item.progress\"></it-progress-bar>\n </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "directive", type: TooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
3409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: UploadFileListComponent, decorators: [{
|
|
3410
|
-
type: Component,
|
|
3411
|
-
args: [{ selector: 'it-upload-file-list[fileList]', template: "<ng-container *ngIf=\"!isHideLoadButton\">\n <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"isMultipleInput\"\n (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</ng-container>\n\n<ul class=\"upload-file-list\" [class.upload-file-list-image]=\"isImageList\" *ngIf=\"fileList.length\">\n <li *ngFor=\"let item of fileList\" 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\n <div class=\"upload-image\" *ngIf=\"isImageList; else icon\">\n <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n </div>\n <ng-template #icon>\n <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n </ng-template>\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\n <button *ngIf=\"item.removable && (!item.progress || item.progress < 100)\" 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 <button *ngIf=\"(!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)\" 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 <it-progress-bar *ngIf=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n [value]=\"item.progress\"></it-progress-bar>\n </li>\n</ul>\n" }]
|
|
3412
|
-
}], propDecorators: { fileList: [{
|
|
3413
|
-
type: Input
|
|
3414
|
-
}], accept: [{
|
|
3415
|
-
type: Input
|
|
3416
|
-
}], multiple: [{
|
|
3417
|
-
type: Input
|
|
3418
|
-
}], images: [{
|
|
3419
|
-
type: Input
|
|
3420
|
-
}], hideLoadButton: [{
|
|
3421
|
-
type: Input
|
|
3422
|
-
}], uploadFiles: [{
|
|
3423
|
-
type: Output
|
|
3424
|
-
}], deleteItem: [{
|
|
3425
|
-
type: Output
|
|
3426
|
-
}] } });
|
|
3427
|
-
|
|
3428
|
-
class BackButtonComponent {
|
|
3429
|
-
constructor(_location) {
|
|
3430
|
-
this._location = _location;
|
|
3431
|
-
/**
|
|
3432
|
-
* Back button style
|
|
3433
|
-
* - <b>link</b>: use a link with icon and text
|
|
3434
|
-
* - <b>button</b>: use a button with icon and text
|
|
3435
|
-
* @default button
|
|
3436
|
-
*/
|
|
3437
|
-
this.buttonStyle = 'button';
|
|
3438
|
-
/**
|
|
3439
|
-
* Button direction
|
|
3440
|
-
* - <b>left</b>: Back direction
|
|
3441
|
-
* - <b>up</b>: Upper direction
|
|
3442
|
-
* @default left
|
|
3443
|
-
*/
|
|
3444
|
-
this.direction = 'left';
|
|
3445
|
-
/**
|
|
3446
|
-
* Show/Hide icon
|
|
3447
|
-
* @default true
|
|
3448
|
-
*/
|
|
3449
|
-
this.showIcon = true;
|
|
3450
|
-
/**
|
|
3451
|
-
* Show/Hide text
|
|
3452
|
-
* @default true
|
|
3453
|
-
*/
|
|
3454
|
-
this.showText = true;
|
|
3455
|
-
}
|
|
3456
|
-
get isShowIcon() {
|
|
3457
|
-
return isTrueBooleanInput(this.showIcon);
|
|
3458
|
-
}
|
|
3459
|
-
get isShowText() {
|
|
3460
|
-
return isTrueBooleanInput(this.showText);
|
|
3461
|
-
}
|
|
3462
|
-
/**
|
|
3463
|
-
* Go back function
|
|
3464
|
-
*/
|
|
3465
|
-
goBack(event) {
|
|
3466
|
-
event.preventDefault();
|
|
3467
|
-
if (this.backFn) {
|
|
3468
|
-
return this.backFn(this._location);
|
|
3469
|
-
}
|
|
3470
|
-
this._location.back();
|
|
3471
|
-
}
|
|
3472
|
-
}
|
|
3473
|
-
BackButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BackButtonComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
|
|
3474
|
-
BackButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: BackButtonComponent, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: "showIcon", showText: "showText", backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "<a *ngIf=\"buttonStyle === 'link'\" href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<button *ngIf=\"buttonStyle === 'button'\" itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n\n<ng-template #content>\n <it-icon *ngIf=\"isShowIcon\"\n size=\"sm\"\n [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n [class.me-2]=\"isShowText\"></it-icon>\n\n <span [class.visually-hidden]=\"!isShowText\">\n {{(direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate}}\n </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BackButtonComponent, decorators: [{
|
|
3476
|
-
type: Component,
|
|
3477
|
-
args: [{ selector: 'it-back-button', exportAs: 'itBackButton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a *ngIf=\"buttonStyle === 'link'\" href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<button *ngIf=\"buttonStyle === 'button'\" itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n\n<ng-template #content>\n <it-icon *ngIf=\"isShowIcon\"\n size=\"sm\"\n [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n [class.me-2]=\"isShowText\"></it-icon>\n\n <span [class.visually-hidden]=\"!isShowText\">\n {{(direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate}}\n </span>\n</ng-template>\n" }]
|
|
3478
|
-
}], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { buttonStyle: [{
|
|
3479
|
-
type: Input
|
|
3480
|
-
}], direction: [{
|
|
3481
|
-
type: Input
|
|
3482
|
-
}], showIcon: [{
|
|
3483
|
-
type: Input
|
|
3484
|
-
}], showText: [{
|
|
3485
|
-
type: Input
|
|
3486
|
-
}], backFn: [{
|
|
3487
|
-
type: Input
|
|
3488
|
-
}] } });
|
|
3489
|
-
|
|
3490
|
-
class BackToTopComponent extends AbstractComponent {
|
|
3491
|
-
get isSmall() {
|
|
3492
|
-
return isTrueBooleanInput(this.small);
|
|
3493
|
-
}
|
|
3494
|
-
get isShadow() {
|
|
3495
|
-
return isTrueBooleanInput(this.shadow);
|
|
3496
|
-
}
|
|
3497
|
-
get isDark() {
|
|
3498
|
-
return isTrueBooleanInput(this.dark);
|
|
3499
|
-
}
|
|
3500
|
-
ngAfterViewInit() {
|
|
3501
|
-
super.ngAfterViewInit();
|
|
3502
|
-
if (this.backToTopElement) {
|
|
3503
|
-
const element = this.backToTopElement.nativeElement;
|
|
3504
|
-
this.backToTop = BackToTop.getOrCreateInstance(element);
|
|
3505
|
-
}
|
|
3506
|
-
}
|
|
3507
|
-
/**
|
|
3508
|
-
* Show button
|
|
3509
|
-
*/
|
|
3510
|
-
show() {
|
|
3511
|
-
var _a;
|
|
3512
|
-
(_a = this.backToTop) === null || _a === void 0 ? void 0 : _a.show();
|
|
3513
|
-
}
|
|
3514
|
-
/**
|
|
3515
|
-
* Hide the button
|
|
3516
|
-
*/
|
|
3517
|
-
hide() {
|
|
3518
|
-
var _a;
|
|
3519
|
-
(_a = this.backToTop) === null || _a === void 0 ? void 0 : _a.hide();
|
|
3520
|
-
}
|
|
3521
|
-
/**
|
|
3522
|
-
* Activates the scroll animation towards the Y coordinate indicated by the positionTop option
|
|
3523
|
-
*/
|
|
3524
|
-
scrollToTop() {
|
|
3525
|
-
var _a;
|
|
3526
|
-
(_a = this.backToTop) === null || _a === void 0 ? void 0 : _a.scrollToTop();
|
|
3527
|
-
}
|
|
3528
|
-
/**
|
|
3529
|
-
* Eliminate component features
|
|
3530
|
-
*/
|
|
3531
|
-
dispose() {
|
|
3532
|
-
var _a;
|
|
3533
|
-
(_a = this.backToTop) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
3534
|
-
}
|
|
3535
|
-
}
|
|
3536
|
-
BackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3537
|
-
BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: BackToTopComponent, selector: "it-back-to-top", inputs: { small: "small", shadow: "shadow", dark: "dark" }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a #backToTop [id]=\"id\"\n href=\"#\"\n aria-hidden=\"true\"\n class=\"back-to-top\"\n [class.back-to-top-small]=\"isSmall\"\n [class.shadow]=\"isShadow\"\n [class.dark]=\"isDark\">\n\n <it-icon name=\"arrow-up\" [color]=\"isDark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BackToTopComponent, decorators: [{
|
|
3539
|
-
type: Component,
|
|
3540
|
-
args: [{ selector: 'it-back-to-top', exportAs: 'itBackToTop', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a #backToTop [id]=\"id\"\n href=\"#\"\n aria-hidden=\"true\"\n class=\"back-to-top\"\n [class.back-to-top-small]=\"isSmall\"\n [class.shadow]=\"isShadow\"\n [class.dark]=\"isDark\">\n\n <it-icon name=\"arrow-up\" [color]=\"isDark ? 'secondary' : 'light'\"></it-icon>\n</a>\n" }]
|
|
3541
|
-
}], propDecorators: { small: [{
|
|
3542
|
-
type: Input
|
|
3543
|
-
}], shadow: [{
|
|
3544
|
-
type: Input
|
|
3545
|
-
}], dark: [{
|
|
3546
|
-
type: Input
|
|
3547
|
-
}], backToTopElement: [{
|
|
3548
|
-
type: ViewChild,
|
|
3549
|
-
args: ['backToTop']
|
|
3550
|
-
}] } });
|
|
3551
|
-
|
|
3552
|
-
class BreadcrumbItemComponent extends LinkComponent {
|
|
3553
|
-
get isActive() {
|
|
3554
|
-
return isTrueBooleanInput(this.active);
|
|
3555
|
-
}
|
|
3556
|
-
}
|
|
3557
|
-
BreadcrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3558
|
-
BreadcrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: BreadcrumbItemComponent, selector: "it-breadcrumb-item", inputs: { active: "active", 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 });
|
|
3559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
|
|
3560
|
-
type: Component,
|
|
3561
|
-
args: [{ selector: 'it-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
3562
|
-
}], propDecorators: { active: [{
|
|
3563
|
-
type: Input
|
|
3564
|
-
}], iconName: [{
|
|
3565
|
-
type: Input
|
|
3566
|
-
}], htmlContent: [{
|
|
3567
|
-
type: ViewChild,
|
|
3568
|
-
args: [TemplateRef]
|
|
3569
|
-
}] } });
|
|
3570
|
-
|
|
3571
|
-
class BreadcrumbComponent {
|
|
3572
|
-
constructor(_changeDetectorRef) {
|
|
3573
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
3574
|
-
/**
|
|
3575
|
-
* The character to use as separator
|
|
3576
|
-
* @default /
|
|
3577
|
-
*/
|
|
3578
|
-
this.separator = '/';
|
|
3579
|
-
}
|
|
3580
|
-
get isDark() {
|
|
3581
|
-
return isTrueBooleanInput(this.dark);
|
|
3582
|
-
}
|
|
3583
|
-
ngAfterViewInit() {
|
|
3584
|
-
var _a;
|
|
3585
|
-
(_a = this.items) === null || _a === void 0 ? void 0 : _a.changes.pipe(// When breadcrumb items changes (dynamic add/remove)
|
|
3586
|
-
startWith(undefined)).subscribe(() => {
|
|
3587
|
-
var _a, _b;
|
|
3588
|
-
(_a = this.itemSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
|
|
3589
|
-
this.itemSubscriptions = (_b = this.items) === null || _b === void 0 ? void 0 : _b.map(item => item.valueChanges.subscribe(() => {
|
|
3590
|
-
this._changeDetectorRef.detectChanges(); // DetectChanges when breadcrumb item attributes changes
|
|
3591
|
-
}));
|
|
3592
|
-
this._changeDetectorRef.detectChanges(); // Force update html render
|
|
3593
|
-
});
|
|
3594
|
-
}
|
|
3595
|
-
ngOnDestroy() {
|
|
3596
|
-
var _a;
|
|
3597
|
-
(_a = this.itemSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(item => item.unsubscribe());
|
|
3598
|
-
}
|
|
3599
|
-
/**
|
|
3600
|
-
* Check if index is last item
|
|
3601
|
-
* @param index
|
|
3602
|
-
*/
|
|
3603
|
-
isLastItem(index) {
|
|
3604
|
-
return !!this.items && index >= (this.items.length - 1);
|
|
3605
|
-
}
|
|
3606
|
-
}
|
|
3607
|
-
BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3608
|
-
BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: BreadcrumbComponent, selector: "it-breadcrumb", inputs: { separator: "separator", dark: "dark" }, queries: [{ propertyName: "items", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path'|translate\">\n <ol class=\"breadcrumb\" [class.dark]=\"isDark\" [class.px-3]=\"isDark\">\n <li *ngFor=\"let item of items; let i = index\"\n class=\"breadcrumb-item\"\n [class.active]=\"item.isActive\"\n [attr.aria-current]=\"item.isActive ? 'page' : null\">\n\n <it-icon *ngIf=\"item.iconName\"\n [name]=\"item.iconName\"\n [color]=\"isDark ? 'white' : 'secondary'\"\n size=\"sm\"\n svgClass=\"align-top me-1\"></it-icon>\n\n <it-link *ngIf=\"!item.isActive && !isLastItem(i); else activeContent\"\n [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </it-link>\n\n <ng-template #activeContent>\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </ng-template>\n\n <span *ngIf=\"!isLastItem(i)\" class=\"separator\">{{separator}}</span>\n </li>\n </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3609
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
3610
|
-
type: Component,
|
|
3611
|
-
args: [{ selector: 'it-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path'|translate\">\n <ol class=\"breadcrumb\" [class.dark]=\"isDark\" [class.px-3]=\"isDark\">\n <li *ngFor=\"let item of items; let i = index\"\n class=\"breadcrumb-item\"\n [class.active]=\"item.isActive\"\n [attr.aria-current]=\"item.isActive ? 'page' : null\">\n\n <it-icon *ngIf=\"item.iconName\"\n [name]=\"item.iconName\"\n [color]=\"isDark ? 'white' : 'secondary'\"\n size=\"sm\"\n svgClass=\"align-top me-1\"></it-icon>\n\n <it-link *ngIf=\"!item.isActive && !isLastItem(i); else activeContent\"\n [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </it-link>\n\n <ng-template #activeContent>\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </ng-template>\n\n <span *ngIf=\"!isLastItem(i)\" class=\"separator\">{{separator}}</span>\n </li>\n </ol>\n</nav>\n" }]
|
|
3612
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { separator: [{
|
|
3613
|
-
type: Input
|
|
3614
|
-
}], dark: [{
|
|
3615
|
-
type: Input
|
|
3616
|
-
}], items: [{
|
|
3617
|
-
type: ContentChildren,
|
|
3618
|
-
args: [BreadcrumbItemComponent]
|
|
3619
|
-
}] } });
|
|
3620
|
-
|
|
3621
|
-
class HeaderComponent extends AbstractComponent {
|
|
3622
|
-
/**
|
|
3623
|
-
* TODO: complete header
|
|
3624
|
-
*/
|
|
3625
|
-
constructor() {
|
|
3626
|
-
super();
|
|
3627
|
-
this.showSlim = true;
|
|
3628
|
-
this.loginStyle = 'full';
|
|
3629
|
-
this.smallHeader = true;
|
|
3630
|
-
this.showSearch = true;
|
|
3631
|
-
this.loginClick = new EventEmitter();
|
|
3632
|
-
this.searchClick = new EventEmitter();
|
|
3633
|
-
}
|
|
3634
|
-
get isLight() {
|
|
3635
|
-
return isTrueBooleanInput(this.light);
|
|
3636
|
-
}
|
|
3637
|
-
get isShowSlim() {
|
|
3638
|
-
return isTrueBooleanInput(this.showSlim);
|
|
3639
|
-
}
|
|
3640
|
-
get isSmallHeader() {
|
|
3641
|
-
return isTrueBooleanInput(this.smallHeader);
|
|
3642
|
-
}
|
|
3643
|
-
get isShowSearch() {
|
|
3644
|
-
return isTrueBooleanInput(this.showSearch);
|
|
3645
|
-
}
|
|
3646
|
-
}
|
|
3647
|
-
HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3648
|
-
HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: HeaderComponent, selector: "it-header", inputs: { light: "light", showSlim: "showSlim", slimTitle: "slimTitle", loginStyle: "loginStyle", smallHeader: "smallHeader", showSearch: "showSearch" }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, usesInheritance: true, ngImport: i0, template: "<header class=\"it-header-wrapper\">\n <div *ngIf=\"isShowSlim\" class=\"it-header-slim-wrapper\" [class.theme-light]=\"isLight\">\n <div class=\"container\">\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=\"#\">{{slimTitle}}</a>\n <div class=\"nav-mobile\">\n <nav [attr.aria-label]=\"'it.navigation.secondary-navigation'|translate\">\n <a class=\"it-opener d-lg-none\" data-bs-toggle=\"collapse\" href=\"#menuC1\" role=\"button\"\n aria-expanded=\"false\" 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 <!-- TODO: add language dropdown -->\n <ng-content select=\"[slimRightZone]\"></ng-content>\n <div *ngIf=\"loginStyle === 'default'\" class=\"it-access-top-wrapper\">\n <a class=\"btn btn-primary btn-sm\" (click)=\"loginClick.emit($event)\">\n {{'it.navigation.login'|translate}}\n </a>\n </div>\n </div>\n <button *ngIf=\"loginStyle === 'full'\" itButton=\"primary\" class=\"btn-full\" (click)=\"loginClick.emit($event)\">\n <span class=\"rounded-icon\">\n <it-icon name=\"user\" color=\"primary\"></it-icon>\n <span class=\"d-none d-lg-block\">{{'it.navigation.full-login'|translate}}</span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"it-nav-wrapper\">\n <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"isSmallHeader\">\n <div class=\"container-fluid\">\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 <div class=\"it-search-wrapper\" *ngIf=\"isShowSearch\">\n <span class=\"d-none d-md-block\">{{'it.navigation.search'|translate}}</span>\n <a class=\"search-link rounded-icon\" [attr.aria-label]=\"'it.navigation.website-search'|translate\" (click)=\"searchClick.emit($event)\">\n <it-icon name=\"search\"></it-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- TODO: complete header -->\n </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
3650
|
-
type: Component,
|
|
3651
|
-
args: [{ selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"it-header-wrapper\">\n <div *ngIf=\"isShowSlim\" class=\"it-header-slim-wrapper\" [class.theme-light]=\"isLight\">\n <div class=\"container\">\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=\"#\">{{slimTitle}}</a>\n <div class=\"nav-mobile\">\n <nav [attr.aria-label]=\"'it.navigation.secondary-navigation'|translate\">\n <a class=\"it-opener d-lg-none\" data-bs-toggle=\"collapse\" href=\"#menuC1\" role=\"button\"\n aria-expanded=\"false\" 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 <!-- TODO: add language dropdown -->\n <ng-content select=\"[slimRightZone]\"></ng-content>\n <div *ngIf=\"loginStyle === 'default'\" class=\"it-access-top-wrapper\">\n <a class=\"btn btn-primary btn-sm\" (click)=\"loginClick.emit($event)\">\n {{'it.navigation.login'|translate}}\n </a>\n </div>\n </div>\n <button *ngIf=\"loginStyle === 'full'\" itButton=\"primary\" class=\"btn-full\" (click)=\"loginClick.emit($event)\">\n <span class=\"rounded-icon\">\n <it-icon name=\"user\" color=\"primary\"></it-icon>\n <span class=\"d-none d-lg-block\">{{'it.navigation.full-login'|translate}}</span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"it-nav-wrapper\">\n <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"isSmallHeader\">\n <div class=\"container-fluid\">\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 <div class=\"it-search-wrapper\" *ngIf=\"isShowSearch\">\n <span class=\"d-none d-md-block\">{{'it.navigation.search'|translate}}</span>\n <a class=\"search-link rounded-icon\" [attr.aria-label]=\"'it.navigation.website-search'|translate\" (click)=\"searchClick.emit($event)\">\n <it-icon name=\"search\"></it-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- TODO: complete header -->\n </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
|
|
3652
|
-
}], ctorParameters: function () { return []; }, propDecorators: { light: [{
|
|
3653
|
-
type: Input
|
|
3654
|
-
}], showSlim: [{
|
|
3655
|
-
type: Input
|
|
3656
|
-
}], slimTitle: [{
|
|
3657
|
-
type: Input
|
|
3658
|
-
}], loginStyle: [{
|
|
3659
|
-
type: Input
|
|
3660
|
-
}], smallHeader: [{
|
|
3661
|
-
type: Input
|
|
3662
|
-
}], showSearch: [{
|
|
3663
|
-
type: Input
|
|
3664
|
-
}], loginClick: [{
|
|
3665
|
-
type: Output
|
|
3666
|
-
}], searchClick: [{
|
|
3667
|
-
type: Output
|
|
3668
|
-
}] } });
|
|
3669
|
-
|
|
3670
|
-
class LanguageSwitcherComponent {
|
|
3671
|
-
constructor(translateService) {
|
|
3672
|
-
this.translateService = translateService;
|
|
3673
|
-
this.currentLang$ = translateService.onLangChange.pipe(startWith({ lang: translateService.currentLang }), map(event => { var _a; return (_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.find(l => l.code === event.lang); }));
|
|
3674
|
-
}
|
|
3675
|
-
ngOnInit() {
|
|
3676
|
-
if (!this.availableLanguages) {
|
|
3677
|
-
this.availableLanguages = this.translateService.getLangs().map(lang => (Object.assign(Object.assign({ code: lang, label: lang }, (lang === 'it' && { label: 'ITA' })), (lang === 'en' && { label: 'ENG' }))));
|
|
3678
|
-
}
|
|
3679
|
-
}
|
|
3680
|
-
/**
|
|
3681
|
-
* Change the current language
|
|
3682
|
-
* @param lang the language code
|
|
3683
|
-
*/
|
|
3684
|
-
changeLanguage(lang) {
|
|
3685
|
-
this.translateService.use(lang);
|
|
3686
|
-
}
|
|
3687
|
-
}
|
|
3688
|
-
LanguageSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: LanguageSwitcherComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3689
|
-
LanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: LanguageSwitcherComponent, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages" }, ngImport: i0, template: "<it-dropdown>\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 <ng-container list>\n <it-dropdown-item *ngFor=\"let lang of availableLanguages\" (click)=\"changeLanguage(lang.code)\"\n [active]=\"lang.code === (currentLang$ | async)?.code\">\n {{lang.label}}\n <span class=\"visually-hidden\" *ngIf=\"lang.code === (currentLang$ | async)?.code\">\n {{'it.utils.selected' | translate}}\n </span>\n </it-dropdown-item>\n </ng-container>\n</it-dropdown>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "it-dropdown", inputs: ["color", "direction", "fullWidth", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
|
|
3691
|
-
type: Component,
|
|
3692
|
-
args: [{ selector: 'it-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<it-dropdown>\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 <ng-container list>\n <it-dropdown-item *ngFor=\"let lang of availableLanguages\" (click)=\"changeLanguage(lang.code)\"\n [active]=\"lang.code === (currentLang$ | async)?.code\">\n {{lang.label}}\n <span class=\"visually-hidden\" *ngIf=\"lang.code === (currentLang$ | async)?.code\">\n {{'it.utils.selected' | translate}}\n </span>\n </it-dropdown-item>\n </ng-container>\n</it-dropdown>\n" }]
|
|
3693
|
-
}], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; }, propDecorators: { availableLanguages: [{
|
|
3694
|
-
type: Input
|
|
3695
|
-
}] } });
|
|
3696
|
-
|
|
3697
|
-
class ErrorPageComponent {
|
|
3698
|
-
constructor(route) {
|
|
3699
|
-
this.route = route;
|
|
3700
|
-
/**
|
|
3701
|
-
* Show/Hide error code
|
|
3702
|
-
* @default true - show
|
|
3703
|
-
*/
|
|
3704
|
-
this.showErrorCode = true;
|
|
3705
|
-
/**
|
|
3706
|
-
* Show/Hide back button
|
|
3707
|
-
* @default true - show
|
|
3708
|
-
*/
|
|
3709
|
-
this.showBackButton = true;
|
|
3710
|
-
/**
|
|
3711
|
-
* Show/Hide home button
|
|
3712
|
-
* @default true - show
|
|
3713
|
-
*/
|
|
3714
|
-
this.showHomeButton = true;
|
|
3715
|
-
this.route.data.subscribe(data => {
|
|
3716
|
-
if (!this.errorCode && data['errorCode']) {
|
|
3717
|
-
this.errorCode = data['errorCode']; // Get errorCode from route data
|
|
3718
|
-
}
|
|
3719
|
-
if (data['showErrorCode'] !== undefined) {
|
|
3720
|
-
this.showErrorCode = data['showErrorCode']; // Get showErrorCode from route data
|
|
3721
|
-
}
|
|
3722
|
-
if (!this.errorTitle && data['errorTitle']) {
|
|
3723
|
-
this.errorTitle = data['errorTitle']; // Get errorTitle from route data
|
|
3724
|
-
}
|
|
3725
|
-
if (!this.errorDescription && data['errorDescription']) {
|
|
3726
|
-
this.errorDescription = data['errorDescription']; // Get errorDescription from route data
|
|
3727
|
-
}
|
|
3728
|
-
if (data['showBackButton'] !== undefined) {
|
|
3729
|
-
this.showBackButton = data['showBackButton']; // Get showBackButton from route data
|
|
3730
|
-
}
|
|
3731
|
-
if (data['showHomeButton'] !== undefined) {
|
|
3732
|
-
this.showHomeButton = data['showHomeButton']; // Get showHomeButton from route data
|
|
3733
|
-
}
|
|
3734
|
-
});
|
|
3735
|
-
}
|
|
3736
|
-
get isDefaultErrorCode() {
|
|
3737
|
-
return this.errorCode === 404 || this.errorCode === 403 || this.errorCode === 500;
|
|
3738
|
-
}
|
|
3739
|
-
get isShowErrorCode() {
|
|
3740
|
-
return isTrueBooleanInput(this.showErrorCode);
|
|
3741
|
-
}
|
|
3742
|
-
get isShowBackButton() {
|
|
3743
|
-
return isTrueBooleanInput(this.showBackButton);
|
|
3744
|
-
}
|
|
3745
|
-
get isShowHomeButton() {
|
|
3746
|
-
return isTrueBooleanInput(this.showHomeButton);
|
|
3747
|
-
}
|
|
3748
|
-
}
|
|
3749
|
-
ErrorPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ErrorPageComponent, deps: [{ token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
3750
|
-
ErrorPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: ErrorPageComponent, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: "showErrorCode", errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: "showBackButton", showHomeButton: "showHomeButton" }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n <h1 *ngIf=\"errorCode && isShowErrorCode\">{{errorCode}}</h1>\n <h2>\n <ng-container *ngIf=\"!errorTitle && isDefaultErrorCode; else customTitle\">\n {{'it.utils.error-page.' + errorCode + '.title' | translate}}\n </ng-container>\n <ng-template #customTitle>{{(errorTitle || 'it.errors.generic') | translate}}</ng-template>\n </h2>\n\n <p class=\"mt-3 w-75 mx-auto\">\n <ng-container\n *ngIf=\"!errorDescription && isDefaultErrorCode; else customDescription\">\n {{'it.utils.error-page.' + errorCode + '.description' | translate}}\n </ng-container>\n <ng-template #customDescription>\n {{(errorDescription || 'it.errors.generic-support-message') | translate}}\n </ng-template>\n </p>\n\n <div class=\"mt-5\" *ngIf=\"isShowBackButton || isShowHomeButton\">\n <it-back-button *ngIf=\"isShowBackButton\"></it-back-button>\n <a *ngIf=\"isShowHomeButton\" itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\"\n title=\"{{'it.utils.error-page.go-to-homepage' | translate}}\">\n {{'it.utils.error-page.go-to-homepage' | translate}}\n </a>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: BackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ErrorPageComponent, decorators: [{
|
|
3752
|
-
type: Component,
|
|
3753
|
-
args: [{ selector: 'it-error-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container text-center mt-5\">\n <h1 *ngIf=\"errorCode && isShowErrorCode\">{{errorCode}}</h1>\n <h2>\n <ng-container *ngIf=\"!errorTitle && isDefaultErrorCode; else customTitle\">\n {{'it.utils.error-page.' + errorCode + '.title' | translate}}\n </ng-container>\n <ng-template #customTitle>{{(errorTitle || 'it.errors.generic') | translate}}</ng-template>\n </h2>\n\n <p class=\"mt-3 w-75 mx-auto\">\n <ng-container\n *ngIf=\"!errorDescription && isDefaultErrorCode; else customDescription\">\n {{'it.utils.error-page.' + errorCode + '.description' | translate}}\n </ng-container>\n <ng-template #customDescription>\n {{(errorDescription || 'it.errors.generic-support-message') | translate}}\n </ng-template>\n </p>\n\n <div class=\"mt-5\" *ngIf=\"isShowBackButton || isShowHomeButton\">\n <it-back-button *ngIf=\"isShowBackButton\"></it-back-button>\n <a *ngIf=\"isShowHomeButton\" itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\"\n title=\"{{'it.utils.error-page.go-to-homepage' | translate}}\">\n {{'it.utils.error-page.go-to-homepage' | translate}}\n </a>\n </div>\n</div>\n" }]
|
|
3754
|
-
}], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }]; }, propDecorators: { errorCode: [{
|
|
3755
|
-
type: Input
|
|
3756
|
-
}], showErrorCode: [{
|
|
3757
|
-
type: Input
|
|
3758
|
-
}], errorTitle: [{
|
|
3759
|
-
type: Input
|
|
3760
|
-
}], errorDescription: [{
|
|
3761
|
-
type: Input
|
|
3762
|
-
}], showBackButton: [{
|
|
3763
|
-
type: Input
|
|
3764
|
-
}], showHomeButton: [{
|
|
3765
|
-
type: Input
|
|
3766
|
-
}] } });
|
|
3767
|
-
|
|
3768
|
-
class ChipComponent {
|
|
3769
|
-
constructor() {
|
|
3770
|
-
this._label = '';
|
|
3771
|
-
this._showCloseButton = false;
|
|
3772
|
-
this._size = '';
|
|
3773
|
-
this._color = undefined;
|
|
3774
|
-
this._disabled = false;
|
|
3775
|
-
this._icon = undefined;
|
|
3776
|
-
this._avatar = undefined;
|
|
3777
|
-
this._altAvatar = '';
|
|
3778
|
-
/**
|
|
3779
|
-
* Evento emesso al click sul bottone di chiusura
|
|
3780
|
-
*/
|
|
3781
|
-
this.closeEvent = new EventEmitter();
|
|
3782
|
-
this.iconClose = 'close';
|
|
3783
|
-
}
|
|
3784
|
-
/**
|
|
3785
|
-
* Indica la label
|
|
3786
|
-
*/
|
|
3787
|
-
set label(value) { this._label = value; }
|
|
3788
|
-
get label() { return this._label; }
|
|
3789
|
-
/**
|
|
3790
|
-
* Indica se mostrate il pulante di chisura
|
|
3791
|
-
*/
|
|
3792
|
-
set showCloseButton(value) { this._showCloseButton = value; }
|
|
3793
|
-
get showCloseButton() { return this._showCloseButton; }
|
|
3794
|
-
/**
|
|
3795
|
-
* Indica il size
|
|
3796
|
-
*/
|
|
3797
|
-
set size(value) { this._size = value; }
|
|
3798
|
-
get size() { return this._size; }
|
|
3799
|
-
/**
|
|
3800
|
-
* Indica il colore della chip
|
|
3801
|
-
*/
|
|
3802
|
-
set color(value) { this._color = value; }
|
|
3803
|
-
get color() { return this._color; }
|
|
3804
|
-
/**
|
|
3805
|
-
* Indica se la chip è disabilitata
|
|
3806
|
-
*/
|
|
3807
|
-
set disabled(value) { this._disabled = value; }
|
|
3808
|
-
get disabled() { return this._disabled; }
|
|
3809
|
-
/**
|
|
3810
|
-
* Indica il nome dell'icona, se valorizzata viene mostrata
|
|
3811
|
-
*/
|
|
3812
|
-
set icon(value) { this._icon = value; }
|
|
3813
|
-
get icon() { return this._icon; }
|
|
3814
|
-
/**
|
|
3815
|
-
* Indica l'url dell'avatar, se valorizzata viene mostrata
|
|
3816
|
-
*/
|
|
3817
|
-
set avatar(value) { this._avatar = value; }
|
|
3818
|
-
get avatar() { return this._avatar; }
|
|
3819
|
-
/**
|
|
3820
|
-
* Indica il valore da aggiungere al parametro alt, di default ''
|
|
3821
|
-
*/
|
|
3822
|
-
set altAvatar(value) { this._altAvatar = value; }
|
|
3823
|
-
get altAvatar() { return this._altAvatar; }
|
|
3824
|
-
clickToClose() {
|
|
3825
|
-
this.closeEvent.emit();
|
|
3826
|
-
}
|
|
3827
|
-
}
|
|
3828
|
-
ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3829
|
-
ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: ChipComponent, 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 class=\"chip\" [ngClass]=\"[!showCloseButton ? 'chip-simple': 'alert', size === 'lg' ? 'chip-lg': '', color ? 'chip-' + color : '', disabled ? 'chip-disabled' : '']\">\n <svg *ngIf=\"icon\" class=\"icon icon-xs\"><use [attr.href]=\"'./bootstrap-italia/dist/svg/sprites.svg#it-' + icon\" [attr.xlink:href]=\"'./bootstrap-italia/dist/svg/sprites.svg#it-' + icon\"></use></svg>\n <div *ngIf=\"avatar\" class=\"avatar size-xs\">\n <img [src]=\"avatar\" [alt]=\"altAvatar\">\n </div>\n <span class=\"chip-label\">{{ label }}</span>\n <button *ngIf=\"showCloseButton\" (click)=\"clickToClose()\" [disabled]=\"disabled\">\n <svg class=\"icon\"><use href=\"./bootstrap-italia/dist/svg/sprites.svg#it-close\" xlink:href=\"./bootstrap-italia/dist/svg/sprites.svg#it-close\"></use></svg>\n <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ChipComponent, decorators: [{
|
|
3831
|
-
type: Component,
|
|
3832
|
-
args: [{ selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chip\" [ngClass]=\"[!showCloseButton ? 'chip-simple': 'alert', size === 'lg' ? 'chip-lg': '', color ? 'chip-' + color : '', disabled ? 'chip-disabled' : '']\">\n <svg *ngIf=\"icon\" class=\"icon icon-xs\"><use [attr.href]=\"'./bootstrap-italia/dist/svg/sprites.svg#it-' + icon\" [attr.xlink:href]=\"'./bootstrap-italia/dist/svg/sprites.svg#it-' + icon\"></use></svg>\n <div *ngIf=\"avatar\" class=\"avatar size-xs\">\n <img [src]=\"avatar\" [alt]=\"altAvatar\">\n </div>\n <span class=\"chip-label\">{{ label }}</span>\n <button *ngIf=\"showCloseButton\" (click)=\"clickToClose()\" [disabled]=\"disabled\">\n <svg class=\"icon\"><use href=\"./bootstrap-italia/dist/svg/sprites.svg#it-close\" xlink:href=\"./bootstrap-italia/dist/svg/sprites.svg#it-close\"></use></svg>\n <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n </button>\n</div>\n" }]
|
|
3833
|
-
}], propDecorators: { label: [{
|
|
3834
|
-
type: Input
|
|
3835
|
-
}], showCloseButton: [{
|
|
3836
|
-
type: Input
|
|
3837
|
-
}], size: [{
|
|
3838
|
-
type: Input
|
|
3839
|
-
}], color: [{
|
|
3840
|
-
type: Input
|
|
3841
|
-
}], disabled: [{
|
|
3842
|
-
type: Input
|
|
3843
|
-
}], icon: [{
|
|
3844
|
-
type: Input
|
|
3845
|
-
}], avatar: [{
|
|
3846
|
-
type: Input
|
|
3847
|
-
}], altAvatar: [{
|
|
3848
|
-
type: Input
|
|
3849
|
-
}], closeEvent: [{
|
|
3850
|
-
type: Output
|
|
3851
|
-
}] } });
|
|
3852
|
-
|
|
3853
|
-
class ForwardDirective {
|
|
3854
|
-
constructor(document) {
|
|
3855
|
-
this.document = document;
|
|
3856
|
-
this._itForward = undefined;
|
|
3857
|
-
}
|
|
3858
|
-
/**
|
|
3859
|
-
* Indica, se HTMLElement, l'elemento a cui navigare, o se stringa, il selettore che selezionerà l'elemento a cui navigare.
|
|
3860
|
-
*/
|
|
3861
|
-
set itForward(value) { this._itForward = value; }
|
|
3862
|
-
get itForward() { return this._itForward; }
|
|
3863
|
-
onClick(event) {
|
|
3864
|
-
var _a, _b;
|
|
3865
|
-
event.preventDefault();
|
|
3866
|
-
if (this.itForward) {
|
|
3867
|
-
if (typeof this.itForward === 'string') {
|
|
3868
|
-
(_b = (_a = this.document) === null || _a === void 0 ? void 0 : _a.querySelector(this.itForward)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
|
|
3869
|
-
behavior: 'smooth',
|
|
3870
|
-
block: 'start',
|
|
3871
|
-
inline: "nearest"
|
|
3872
|
-
});
|
|
3873
|
-
}
|
|
3874
|
-
else if (this.itForward instanceof HTMLElement) {
|
|
3875
|
-
this.itForward.scrollIntoView({
|
|
3876
|
-
behavior: 'smooth',
|
|
3877
|
-
block: 'start',
|
|
3878
|
-
inline: "nearest"
|
|
3879
|
-
});
|
|
3880
|
-
}
|
|
3881
|
-
}
|
|
3882
|
-
}
|
|
3883
|
-
}
|
|
3884
|
-
ForwardDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ForwardDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3885
|
-
ForwardDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: ForwardDirective, selector: "[itForward]", inputs: { itForward: "itForward" }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "forward" }, ngImport: i0 });
|
|
3886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ForwardDirective, decorators: [{
|
|
3887
|
-
type: Directive,
|
|
3888
|
-
args: [{
|
|
3889
|
-
selector: '[itForward]',
|
|
3890
|
-
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
|
|
3891
|
-
host: { 'class': 'forward' }
|
|
3892
|
-
}]
|
|
3893
|
-
}], ctorParameters: function () {
|
|
3894
|
-
return [{ type: Document, decorators: [{
|
|
3895
|
-
type: Inject,
|
|
3896
|
-
args: [DOCUMENT]
|
|
3897
|
-
}] }];
|
|
3898
|
-
}, propDecorators: { itForward: [{
|
|
3899
|
-
type: Input
|
|
3900
|
-
}], onClick: [{
|
|
3901
|
-
type: HostListener,
|
|
3902
|
-
args: ['click', ['$event']]
|
|
3903
|
-
}] } });
|
|
3904
|
-
|
|
3905
|
-
class DimmerComponent {
|
|
3906
|
-
constructor(elementRef) {
|
|
3907
|
-
this.elementRef = elementRef;
|
|
3908
|
-
this._active = false;
|
|
3909
|
-
this._color = '';
|
|
3910
|
-
}
|
|
3911
|
-
/**
|
|
3912
|
-
* Dimmer status
|
|
3913
|
-
* @default false
|
|
3914
|
-
*/
|
|
3915
|
-
set active(value) { this._active = value; }
|
|
3916
|
-
;
|
|
3917
|
-
get active() { return this._active; }
|
|
3918
|
-
/**
|
|
3919
|
-
* Colore del dimmer
|
|
3920
|
-
* @default ''
|
|
3921
|
-
*/
|
|
3922
|
-
set color(value) { this._color = value; }
|
|
3923
|
-
;
|
|
3924
|
-
get color() { return this._color; }
|
|
3925
|
-
ngOnInit() {
|
|
3926
|
-
var _a, _b, _c, _d;
|
|
3927
|
-
(_d = (_c = (_b = (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.add('dimmable');
|
|
3928
|
-
}
|
|
3929
|
-
}
|
|
3930
|
-
DimmerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DimmerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3931
|
-
DimmerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: DimmerComponent, selector: "it-dimmer", inputs: { active: "active", color: "color" }, ngImport: i0, template: "<div class=\"dimmer\" *ngIf=\"active\" @fade [ngClass]=\"[color]\">\n <div class=\"dimmer-inner\">\n <ng-content></ng-content>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
3932
|
-
trigger('fade', [
|
|
3933
|
-
transition(':enter', [
|
|
3934
|
-
style({ opacity: 0 }),
|
|
3935
|
-
animate('150ms', style({ opacity: 0.92 })),
|
|
3936
|
-
]),
|
|
3937
|
-
transition(':leave', [
|
|
3938
|
-
animate('150ms', style({ opacity: 0 })),
|
|
3939
|
-
]),
|
|
3940
|
-
])
|
|
3941
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3942
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DimmerComponent, decorators: [{
|
|
3943
|
-
type: Component,
|
|
3944
|
-
args: [{ selector: 'it-dimmer', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3945
|
-
trigger('fade', [
|
|
3946
|
-
transition(':enter', [
|
|
3947
|
-
style({ opacity: 0 }),
|
|
3948
|
-
animate('150ms', style({ opacity: 0.92 })),
|
|
3949
|
-
]),
|
|
3950
|
-
transition(':leave', [
|
|
3951
|
-
animate('150ms', style({ opacity: 0 })),
|
|
3952
|
-
]),
|
|
3953
|
-
])
|
|
3954
|
-
], template: "<div class=\"dimmer\" *ngIf=\"active\" @fade [ngClass]=\"[color]\">\n <div class=\"dimmer-inner\">\n <ng-content></ng-content>\n </div>\n</div>" }]
|
|
3955
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { active: [{
|
|
3956
|
-
type: Input
|
|
3957
|
-
}], color: [{
|
|
3958
|
-
type: Input
|
|
3959
|
-
}] } });
|
|
3960
|
-
|
|
3961
|
-
class DimmerButtonsComponent {
|
|
3962
|
-
constructor() {
|
|
3963
|
-
this._hasOneButton = false;
|
|
3964
|
-
}
|
|
3965
|
-
/**
|
|
3966
|
-
* Indica se abbiamo 1 solo bottone
|
|
3967
|
-
* @default false
|
|
3968
|
-
*/
|
|
3969
|
-
set hasOneButton(value) { this._hasOneButton = value; }
|
|
3970
|
-
;
|
|
3971
|
-
get hasOneButton() { return this._hasOneButton; }
|
|
3972
|
-
}
|
|
3973
|
-
DimmerButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DimmerButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3974
|
-
DimmerButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: DimmerButtonsComponent, 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>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3975
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DimmerButtonsComponent, decorators: [{
|
|
3976
|
-
type: Component,
|
|
3977
|
-
args: [{ selector: 'it-dimmer-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{'single-button': hasOneButton}\">\n <ng-content></ng-content>\n</div>" }]
|
|
3978
|
-
}], propDecorators: { hasOneButton: [{
|
|
3979
|
-
type: Input
|
|
3980
|
-
}] } });
|
|
3981
|
-
|
|
3982
|
-
class DimmerIconComponent {
|
|
3983
|
-
}
|
|
3984
|
-
DimmerIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DimmerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3985
|
-
DimmerIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: DimmerIconComponent, selector: "it-dimmer-icon", ngImport: i0, template: "<div class=\"dimmer-icon\">\n <ng-content></ng-content>\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DimmerIconComponent, decorators: [{
|
|
3987
|
-
type: Component,
|
|
3988
|
-
args: [{ selector: 'it-dimmer-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dimmer-icon\">\n <ng-content></ng-content>\n</div>" }]
|
|
3989
|
-
}] });
|
|
3990
|
-
|
|
3991
|
-
/**
|
|
3992
|
-
* Core components
|
|
3993
|
-
*/
|
|
3994
|
-
const core = [
|
|
3995
|
-
AccordionComponent,
|
|
3996
|
-
AlertComponent,
|
|
3997
|
-
BadgeDirective,
|
|
3998
|
-
ButtonDirective,
|
|
3999
|
-
CalloutComponent,
|
|
4000
|
-
CardComponent,
|
|
4001
|
-
CarouselComponent,
|
|
4002
|
-
CarouselItemComponent,
|
|
4003
|
-
ChipComponent,
|
|
4004
|
-
CollapseComponent,
|
|
4005
|
-
DimmerButtonsComponent,
|
|
4006
|
-
DimmerComponent,
|
|
4007
|
-
DimmerIconComponent,
|
|
4008
|
-
DropdownComponent,
|
|
4009
|
-
DropdownItemComponent,
|
|
4010
|
-
ForwardDirective,
|
|
4011
|
-
LinkComponent,
|
|
4012
|
-
ListComponent,
|
|
4013
|
-
ListItemComponent,
|
|
4014
|
-
ModalComponent,
|
|
4015
|
-
NotificationsComponent,
|
|
4016
|
-
PaginationComponent,
|
|
4017
|
-
PopoverDirective,
|
|
4018
|
-
ProgressBarComponent,
|
|
4019
|
-
ProgressButtonComponent,
|
|
4020
|
-
RatingComponent,
|
|
4021
|
-
SpinnerComponent,
|
|
4022
|
-
SteppersContainerComponent,
|
|
4023
|
-
SteppersItemComponent,
|
|
4024
|
-
TabContainerComponent,
|
|
4025
|
-
TabItemComponent,
|
|
4026
|
-
TableComponent,
|
|
4027
|
-
TooltipDirective
|
|
4028
|
-
];
|
|
4029
|
-
/**
|
|
4030
|
-
* Form components
|
|
4031
|
-
*/
|
|
4032
|
-
const form = [
|
|
4033
|
-
CheckboxComponent,
|
|
4034
|
-
InputComponent,
|
|
4035
|
-
PasswordInputComponent,
|
|
4036
|
-
RadioButtonComponent,
|
|
4037
|
-
SelectComponent,
|
|
4038
|
-
TextareaComponent,
|
|
4039
|
-
UploadDragDropComponent,
|
|
4040
|
-
UploadFileListComponent
|
|
4041
|
-
];
|
|
4042
|
-
/**
|
|
4043
|
-
* Navigation Components
|
|
4044
|
-
*/
|
|
4045
|
-
const navigation = [
|
|
4046
|
-
BackButtonComponent,
|
|
4047
|
-
BackToTopComponent,
|
|
4048
|
-
BreadcrumbComponent,
|
|
4049
|
-
BreadcrumbItemComponent,
|
|
4050
|
-
HeaderComponent
|
|
4051
|
-
];
|
|
4052
|
-
/**
|
|
4053
|
-
* Utils components
|
|
4054
|
-
*/
|
|
4055
|
-
const utils = [
|
|
4056
|
-
IconComponent,
|
|
4057
|
-
ErrorPageComponent,
|
|
4058
|
-
LanguageSwitcherComponent,
|
|
4059
|
-
MarkMatchingTextPipe
|
|
4060
|
-
];
|
|
4061
|
-
class ComponentsModule {
|
|
4062
|
-
}
|
|
4063
|
-
ComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4064
|
-
ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: ComponentsModule, declarations: [AccordionComponent,
|
|
4065
|
-
AlertComponent,
|
|
4066
|
-
BadgeDirective,
|
|
4067
|
-
ButtonDirective,
|
|
4068
|
-
CalloutComponent,
|
|
4069
|
-
CardComponent,
|
|
4070
|
-
CarouselComponent,
|
|
4071
|
-
CarouselItemComponent,
|
|
4072
|
-
ChipComponent,
|
|
4073
|
-
CollapseComponent,
|
|
4074
|
-
DimmerButtonsComponent,
|
|
4075
|
-
DimmerComponent,
|
|
4076
|
-
DimmerIconComponent,
|
|
4077
|
-
DropdownComponent,
|
|
4078
|
-
DropdownItemComponent,
|
|
4079
|
-
ForwardDirective,
|
|
4080
|
-
LinkComponent,
|
|
4081
|
-
ListComponent,
|
|
4082
|
-
ListItemComponent,
|
|
4083
|
-
ModalComponent,
|
|
4084
|
-
NotificationsComponent,
|
|
4085
|
-
PaginationComponent,
|
|
4086
|
-
PopoverDirective,
|
|
4087
|
-
ProgressBarComponent,
|
|
4088
|
-
ProgressButtonComponent,
|
|
4089
|
-
RatingComponent,
|
|
4090
|
-
SpinnerComponent,
|
|
4091
|
-
SteppersContainerComponent,
|
|
4092
|
-
SteppersItemComponent,
|
|
4093
|
-
TabContainerComponent,
|
|
4094
|
-
TabItemComponent,
|
|
4095
|
-
TableComponent,
|
|
4096
|
-
TooltipDirective, CheckboxComponent,
|
|
4097
|
-
InputComponent,
|
|
4098
|
-
PasswordInputComponent,
|
|
4099
|
-
RadioButtonComponent,
|
|
4100
|
-
SelectComponent,
|
|
4101
|
-
TextareaComponent,
|
|
4102
|
-
UploadDragDropComponent,
|
|
4103
|
-
UploadFileListComponent, BackButtonComponent,
|
|
4104
|
-
BackToTopComponent,
|
|
4105
|
-
BreadcrumbComponent,
|
|
4106
|
-
BreadcrumbItemComponent,
|
|
4107
|
-
HeaderComponent, IconComponent,
|
|
4108
|
-
ErrorPageComponent,
|
|
4109
|
-
LanguageSwitcherComponent,
|
|
4110
|
-
MarkMatchingTextPipe], imports: [CommonModule,
|
|
4111
|
-
TranslateModule,
|
|
4112
|
-
ReactiveFormsModule,
|
|
4113
|
-
NgIf,
|
|
4114
|
-
NgForOf,
|
|
4115
|
-
RouterLink], exports: [AccordionComponent,
|
|
4116
|
-
AlertComponent,
|
|
4117
|
-
BadgeDirective,
|
|
4118
|
-
ButtonDirective,
|
|
4119
|
-
CalloutComponent,
|
|
4120
|
-
CardComponent,
|
|
4121
|
-
CarouselComponent,
|
|
4122
|
-
CarouselItemComponent,
|
|
4123
|
-
ChipComponent,
|
|
4124
|
-
CollapseComponent,
|
|
4125
|
-
DimmerButtonsComponent,
|
|
4126
|
-
DimmerComponent,
|
|
4127
|
-
DimmerIconComponent,
|
|
4128
|
-
DropdownComponent,
|
|
4129
|
-
DropdownItemComponent,
|
|
4130
|
-
ForwardDirective,
|
|
4131
|
-
LinkComponent,
|
|
4132
|
-
ListComponent,
|
|
4133
|
-
ListItemComponent,
|
|
4134
|
-
ModalComponent,
|
|
4135
|
-
NotificationsComponent,
|
|
4136
|
-
PaginationComponent,
|
|
4137
|
-
PopoverDirective,
|
|
4138
|
-
ProgressBarComponent,
|
|
4139
|
-
ProgressButtonComponent,
|
|
4140
|
-
RatingComponent,
|
|
4141
|
-
SpinnerComponent,
|
|
4142
|
-
SteppersContainerComponent,
|
|
4143
|
-
SteppersItemComponent,
|
|
4144
|
-
TabContainerComponent,
|
|
4145
|
-
TabItemComponent,
|
|
4146
|
-
TableComponent,
|
|
4147
|
-
TooltipDirective, CheckboxComponent,
|
|
4148
|
-
InputComponent,
|
|
4149
|
-
PasswordInputComponent,
|
|
4150
|
-
RadioButtonComponent,
|
|
4151
|
-
SelectComponent,
|
|
4152
|
-
TextareaComponent,
|
|
4153
|
-
UploadDragDropComponent,
|
|
4154
|
-
UploadFileListComponent, BackButtonComponent,
|
|
4155
|
-
BackToTopComponent,
|
|
4156
|
-
BreadcrumbComponent,
|
|
4157
|
-
BreadcrumbItemComponent,
|
|
4158
|
-
HeaderComponent, IconComponent,
|
|
4159
|
-
ErrorPageComponent,
|
|
4160
|
-
LanguageSwitcherComponent,
|
|
4161
|
-
MarkMatchingTextPipe] });
|
|
4162
|
-
ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
|
|
4163
|
-
TranslateModule,
|
|
4164
|
-
ReactiveFormsModule] });
|
|
4165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: ComponentsModule, decorators: [{
|
|
4166
|
-
type: NgModule,
|
|
4167
|
-
args: [{
|
|
4168
|
-
declarations: [
|
|
4169
|
-
...core,
|
|
4170
|
-
...form,
|
|
4171
|
-
...navigation,
|
|
4172
|
-
...utils
|
|
4173
|
-
],
|
|
4174
|
-
imports: [
|
|
4175
|
-
CommonModule,
|
|
4176
|
-
TranslateModule,
|
|
4177
|
-
ReactiveFormsModule,
|
|
4178
|
-
NgIf,
|
|
4179
|
-
NgForOf,
|
|
4180
|
-
RouterLink
|
|
4181
|
-
],
|
|
4182
|
-
exports: [
|
|
4183
|
-
...core,
|
|
4184
|
-
...form,
|
|
4185
|
-
...navigation,
|
|
4186
|
-
...utils
|
|
4187
|
-
]
|
|
4188
|
-
}]
|
|
4189
|
-
}] });
|
|
4190
|
-
|
|
4191
|
-
class DesignAngularKitModule {
|
|
4192
|
-
constructor(translateService) {
|
|
4193
|
-
this.translateService = translateService;
|
|
4194
|
-
translateService.addLangs(['it', 'en']); // Adds 'it' and 'eng' as available languages.
|
|
4195
|
-
translateService.use('it');
|
|
4196
|
-
}
|
|
4197
|
-
static forRoot(initConfig) {
|
|
4198
|
-
return {
|
|
4199
|
-
ngModule: DesignAngularKitModule,
|
|
4200
|
-
providers: [
|
|
4201
|
-
{
|
|
4202
|
-
provide: DESIGN_ANGULAR_KIT_CONFIG,
|
|
4203
|
-
useValue: new DesignAngularKitConfig(initConfig)
|
|
4204
|
-
}
|
|
4205
|
-
]
|
|
4206
|
-
};
|
|
4207
|
-
}
|
|
4208
|
-
}
|
|
4209
|
-
DesignAngularKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DesignAngularKitModule, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4210
|
-
DesignAngularKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: DesignAngularKitModule, imports: [ComponentsModule,
|
|
4211
|
-
HttpClientModule, i1$1.TranslateModule], exports: [ComponentsModule,
|
|
4212
|
-
TranslateModule] });
|
|
4213
|
-
DesignAngularKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DesignAngularKitModule, imports: [ComponentsModule,
|
|
4214
|
-
HttpClientModule,
|
|
4215
|
-
TranslateModule.forChild({
|
|
4216
|
-
loader: {
|
|
4217
|
-
provide: TranslateLoader,
|
|
4218
|
-
useFactory: (http) => new TranslateHttpLoader(http, '/bootstrap-italia/i18n/'),
|
|
4219
|
-
deps: [HttpClient]
|
|
4220
|
-
},
|
|
4221
|
-
extend: true,
|
|
4222
|
-
isolate: false,
|
|
4223
|
-
defaultLanguage: 'it'
|
|
4224
|
-
}), ComponentsModule,
|
|
4225
|
-
TranslateModule] });
|
|
4226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: DesignAngularKitModule, decorators: [{
|
|
4227
|
-
type: NgModule,
|
|
4228
|
-
args: [{
|
|
4229
|
-
declarations: [],
|
|
4230
|
-
imports: [
|
|
4231
|
-
ComponentsModule,
|
|
4232
|
-
HttpClientModule,
|
|
4233
|
-
TranslateModule.forChild({
|
|
4234
|
-
loader: {
|
|
4235
|
-
provide: TranslateLoader,
|
|
4236
|
-
useFactory: (http) => new TranslateHttpLoader(http, '/bootstrap-italia/i18n/'),
|
|
4237
|
-
deps: [HttpClient]
|
|
4238
|
-
},
|
|
4239
|
-
extend: true,
|
|
4240
|
-
isolate: false,
|
|
4241
|
-
defaultLanguage: 'it'
|
|
4242
|
-
})
|
|
4243
|
-
],
|
|
4244
|
-
exports: [
|
|
4245
|
-
ComponentsModule,
|
|
4246
|
-
TranslateModule
|
|
4247
|
-
]
|
|
4248
|
-
}]
|
|
4249
|
-
}], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
|
|
4250
|
-
|
|
4251
|
-
const IconNameArray = [
|
|
4252
|
-
'arrow-down',
|
|
4253
|
-
'arrow-down-circle',
|
|
4254
|
-
'arrow-down-triangle',
|
|
4255
|
-
'arrow-left',
|
|
4256
|
-
'arrow-left-circle',
|
|
4257
|
-
'arrow-left-triangle',
|
|
4258
|
-
'arrow-right',
|
|
4259
|
-
'arrow-right-circle',
|
|
4260
|
-
'arrow-right-triangle',
|
|
4261
|
-
'arrow-up',
|
|
4262
|
-
'arrow-up-circle',
|
|
4263
|
-
'arrow-up-triangle',
|
|
4264
|
-
'ban',
|
|
4265
|
-
'bookmark',
|
|
4266
|
-
'box',
|
|
4267
|
-
'burger',
|
|
4268
|
-
'calendar',
|
|
4269
|
-
'camera',
|
|
4270
|
-
'card',
|
|
4271
|
-
'chart-line',
|
|
4272
|
-
'check',
|
|
4273
|
-
'check-circle',
|
|
4274
|
-
'chevron-left',
|
|
4275
|
-
'chevron-right',
|
|
4276
|
-
'clip',
|
|
4277
|
-
'clock',
|
|
4278
|
-
'close',
|
|
4279
|
-
'close-big',
|
|
4280
|
-
'close-circle',
|
|
4281
|
-
'comment',
|
|
4282
|
-
'copy',
|
|
4283
|
-
'delete',
|
|
4284
|
-
'download',
|
|
4285
|
-
'error',
|
|
4286
|
-
'exchange-circle',
|
|
4287
|
-
'expand',
|
|
4288
|
-
'external-link',
|
|
4289
|
-
'flag',
|
|
4290
|
-
'folder',
|
|
4291
|
-
'fullscreen',
|
|
4292
|
-
'funnel',
|
|
4293
|
-
'hearing',
|
|
4294
|
-
'help',
|
|
4295
|
-
'help-circle',
|
|
4296
|
-
'horn',
|
|
4297
|
-
'inbox',
|
|
4298
|
-
'info-circle',
|
|
4299
|
-
'key',
|
|
4300
|
-
'link',
|
|
4301
|
-
'list',
|
|
4302
|
-
'locked',
|
|
4303
|
-
'logout',
|
|
4304
|
-
'mail',
|
|
4305
|
-
'mail-open',
|
|
4306
|
-
'map-marker',
|
|
4307
|
-
'map-marker-circle',
|
|
4308
|
-
'map-marker-minus',
|
|
4309
|
-
'map-marker-plus',
|
|
4310
|
-
'maximize',
|
|
4311
|
-
'maximize-alt',
|
|
4312
|
-
'minimize',
|
|
4313
|
-
'minus',
|
|
4314
|
-
'minus-circle',
|
|
4315
|
-
'more-actions',
|
|
4316
|
-
'more-items',
|
|
4317
|
-
'note',
|
|
4318
|
-
'pa',
|
|
4319
|
-
'password-invisible',
|
|
4320
|
-
'password-visible',
|
|
4321
|
-
'pencil',
|
|
4322
|
-
'piattaforme',
|
|
4323
|
-
'pin',
|
|
4324
|
-
'plug',
|
|
4325
|
-
'plus',
|
|
4326
|
-
'plus-circle',
|
|
4327
|
-
'presentation',
|
|
4328
|
-
'print',
|
|
4329
|
-
'refresh',
|
|
4330
|
-
'restore',
|
|
4331
|
-
'rss',
|
|
4332
|
-
'rss-square',
|
|
4333
|
-
'search',
|
|
4334
|
-
'settings',
|
|
4335
|
-
'share',
|
|
4336
|
-
'software',
|
|
4337
|
-
'star-full',
|
|
4338
|
-
'star-outline',
|
|
4339
|
-
'telephone',
|
|
4340
|
-
'tool',
|
|
4341
|
-
'unlocked',
|
|
4342
|
-
'upload',
|
|
4343
|
-
'user',
|
|
4344
|
-
'video',
|
|
4345
|
-
'warning',
|
|
4346
|
-
'warning-circle',
|
|
4347
|
-
'wifi',
|
|
4348
|
-
'zoom-in',
|
|
4349
|
-
'zoom-out',
|
|
4350
|
-
// Files
|
|
4351
|
-
'file',
|
|
4352
|
-
'files',
|
|
4353
|
-
'file-audio',
|
|
4354
|
-
'file-compressed',
|
|
4355
|
-
'file-csv',
|
|
4356
|
-
'file-json',
|
|
4357
|
-
'file-odp',
|
|
4358
|
-
'file-ods',
|
|
4359
|
-
'file-odt',
|
|
4360
|
-
'file-pdf',
|
|
4361
|
-
'file-pdf-ext',
|
|
4362
|
-
'file-sheet',
|
|
4363
|
-
'file-slides',
|
|
4364
|
-
'file-txt',
|
|
4365
|
-
'file-video',
|
|
4366
|
-
'file-xml',
|
|
4367
|
-
// Platforms
|
|
4368
|
-
'behance',
|
|
4369
|
-
'facebook',
|
|
4370
|
-
'facebook-square',
|
|
4371
|
-
'figma',
|
|
4372
|
-
'figma-square',
|
|
4373
|
-
'flickr',
|
|
4374
|
-
'flickr-square',
|
|
4375
|
-
'github',
|
|
4376
|
-
'instagram',
|
|
4377
|
-
'linkedin',
|
|
4378
|
-
'linkedin-square',
|
|
4379
|
-
'mastodon',
|
|
4380
|
-
'mastodon-square',
|
|
4381
|
-
'medium',
|
|
4382
|
-
'medium-square',
|
|
4383
|
-
'pinterest',
|
|
4384
|
-
'pinterest-square',
|
|
4385
|
-
'quora',
|
|
4386
|
-
'quora-square',
|
|
4387
|
-
'reddit',
|
|
4388
|
-
'reddit-square',
|
|
4389
|
-
'slack',
|
|
4390
|
-
'slack-square',
|
|
4391
|
-
'snapchat',
|
|
4392
|
-
'snapchat-square',
|
|
4393
|
-
'stackexchange',
|
|
4394
|
-
'stackexchange-square',
|
|
4395
|
-
'stackoverflow',
|
|
4396
|
-
'stackoverflow-square',
|
|
4397
|
-
'telegram',
|
|
4398
|
-
'tiktok',
|
|
4399
|
-
'tiktok-square',
|
|
4400
|
-
'twitter',
|
|
4401
|
-
'twitter-square',
|
|
4402
|
-
'vimeo',
|
|
4403
|
-
'vimeo-square',
|
|
4404
|
-
'whatsapp',
|
|
4405
|
-
'whatsapp-square',
|
|
4406
|
-
'youtube',
|
|
4407
|
-
'google',
|
|
4408
|
-
// Extra
|
|
4409
|
-
'designers-italia',
|
|
4410
|
-
'team-digitale'
|
|
4411
|
-
];
|
|
4412
|
-
|
|
4413
|
-
/*
|
|
4414
|
-
* Public API Surface of design-angular-kit
|
|
4415
|
-
*/
|
|
4416
|
-
|
|
4417
|
-
/**
|
|
4418
|
-
* Generated bundle index. Do not edit.
|
|
4419
|
-
*/
|
|
4420
|
-
|
|
4421
|
-
export { AccordionComponent, AlertComponent, BackButtonComponent, BackToTopComponent, BadgeDirective, BreadcrumbComponent, BreadcrumbItemComponent, ButtonDirective, CAP_REGEX, CalloutComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, ChipComponent, CollapseComponent, ComponentsModule, DESIGN_ANGULAR_KIT_CONFIG, DesignAngularKitConfig, DesignAngularKitModule, DimmerButtonsComponent, DimmerComponent, DimmerIconComponent, DropdownComponent, DropdownItemComponent, EMAIL_REGEX, ErrorPageComponent, FileUtils, ForwardDirective, HeaderComponent, ITALIAN_TAX_CODE_REGEX, IconComponent, IconNameArray, InputComponent, ItValidators, LanguageSwitcherComponent, LinkComponent, ListComponent, ListItemComponent, MarkMatchingTextPipe, ModalComponent, NotificationPosition, NotificationType, NotificationsComponent, NotificationsService, PHONE_NUMBER_REGEX, PaginationComponent, PasswordInputComponent, PopoverDirective, ProgressBarComponent, ProgressButtonComponent, RadioButtonComponent, RatingComponent, SelectComponent, SpinnerComponent, SteppersContainerComponent, SteppersItemComponent, TabContainerComponent, TabItemComponent, TableComponent, TextareaComponent, TooltipDirective, URL_REGEX, UploadDragDropComponent, UploadFileListComponent, VAT_NUMBER_REGEX };
|
|
4422
|
-
//# sourceMappingURL=design-angular-kit.mjs.map
|