design-angular-kit 21.1.0 → 21.2.0
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.
|
@@ -728,6 +728,9 @@ class ItIconComponent {
|
|
|
728
728
|
if (this.color) {
|
|
729
729
|
iconClass += ` icon-${this.color}`;
|
|
730
730
|
}
|
|
731
|
+
else {
|
|
732
|
+
iconClass += ' icon-current-color';
|
|
733
|
+
}
|
|
731
734
|
if (this.padded) {
|
|
732
735
|
iconClass += ` icon-padded`;
|
|
733
736
|
}
|
|
@@ -746,11 +749,11 @@ class ItIconComponent {
|
|
|
746
749
|
this.assetBasePath = inject(IT_ASSET_BASE_PATH);
|
|
747
750
|
}
|
|
748
751
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
749
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", title: "title", labelWaria: "labelWaria" }, ngImport: i0, template: "<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n @if (title || labelWaria) {\n <title>{{ title || labelWaria }}</title>\n }\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
752
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", title: "title", labelWaria: "labelWaria" }, ngImport: i0, template: "<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n @if (title || labelWaria) {\n <title>{{ title || labelWaria }}</title>\n }\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}.icon-current-color{fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
750
753
|
}
|
|
751
754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItIconComponent, decorators: [{
|
|
752
755
|
type: Component,
|
|
753
|
-
args: [{ selector: 'it-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n @if (title || labelWaria) {\n <title>{{ title || labelWaria }}</title>\n }\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"] }]
|
|
756
|
+
args: [{ selector: 'it-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n @if (title || labelWaria) {\n <title>{{ title || labelWaria }}</title>\n }\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}.icon-current-color{fill:currentColor}\n"] }]
|
|
754
757
|
}], ctorParameters: () => [], propDecorators: { name: [{
|
|
755
758
|
type: Input,
|
|
756
759
|
args: [{ required: true }]
|
|
@@ -792,6 +795,13 @@ class ItAlertComponent extends ItAbstractComponent {
|
|
|
792
795
|
}
|
|
793
796
|
ngAfterViewInit() {
|
|
794
797
|
super.ngAfterViewInit();
|
|
798
|
+
// Hide empty heading to prevent accessibility issues (#547)
|
|
799
|
+
if (this.headingEl?.nativeElement) {
|
|
800
|
+
const el = this.headingEl.nativeElement;
|
|
801
|
+
if (el.textContent?.trim() === '') {
|
|
802
|
+
el.hidden = true;
|
|
803
|
+
}
|
|
804
|
+
}
|
|
795
805
|
if (this.alertElement) {
|
|
796
806
|
const element = this.alertElement.nativeElement;
|
|
797
807
|
this.alert = Alert.getOrCreateInstance(element);
|
|
@@ -813,11 +823,11 @@ class ItAlertComponent extends ItAbstractComponent {
|
|
|
813
823
|
this.alert?.dispose();
|
|
814
824
|
}
|
|
815
825
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
816
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n #alertElement\n class=\"alert alert-{{ color }}\"\n [class.alert-dismissible]=\"dismissible\"\n [class.fade]=\"dismissible\"\n [class.show]=\"dismissible\"\n role=\"alert\">\n <h4 class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n </h4>\n\n <ng-content></ng-content>\n\n @if (dismissible) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
826
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }, { propertyName: "headingEl", first: true, predicate: ["headingEl"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n #alertElement\n class=\"alert alert-{{ color }}\"\n [class.alert-dismissible]=\"dismissible\"\n [class.fade]=\"dismissible\"\n [class.show]=\"dismissible\"\n role=\"alert\">\n <h4 #headingEl class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n </h4>\n\n <ng-content></ng-content>\n\n @if (dismissible) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
817
827
|
}
|
|
818
828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItAlertComponent, decorators: [{
|
|
819
829
|
type: Component,
|
|
820
|
-
args: [{ selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent], template: "<div\n #alertElement\n class=\"alert alert-{{ color }}\"\n [class.alert-dismissible]=\"dismissible\"\n [class.fade]=\"dismissible\"\n [class.show]=\"dismissible\"\n role=\"alert\">\n <h4 class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n </h4>\n\n <ng-content></ng-content>\n\n @if (dismissible) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
|
|
830
|
+
args: [{ selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent], template: "<div\n #alertElement\n class=\"alert alert-{{ color }}\"\n [class.alert-dismissible]=\"dismissible\"\n [class.fade]=\"dismissible\"\n [class.show]=\"dismissible\"\n role=\"alert\">\n <h4 #headingEl class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n </h4>\n\n <ng-content></ng-content>\n\n @if (dismissible) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
|
|
821
831
|
}], propDecorators: { color: [{
|
|
822
832
|
type: Input
|
|
823
833
|
}], dismissible: [{
|
|
@@ -830,6 +840,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
830
840
|
}], alertElement: [{
|
|
831
841
|
type: ViewChild,
|
|
832
842
|
args: ['alertElement']
|
|
843
|
+
}], headingEl: [{
|
|
844
|
+
type: ViewChild,
|
|
845
|
+
args: ['headingEl']
|
|
833
846
|
}] } });
|
|
834
847
|
|
|
835
848
|
class ItLinkComponent extends ItAbstractComponent {
|
|
@@ -917,11 +930,11 @@ class ItDropdownItemComponent extends ItLinkComponent {
|
|
|
917
930
|
}
|
|
918
931
|
}
|
|
919
932
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
920
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item, li[itDropdownItem]", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition", mode: "mode" }, usesInheritance: true, ngImport: i0, template: "@if (isHostElement) {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <li>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </li>\n}\n\n<ng-template #content>\n @if (divider) {\n <span class=\"divider\"></span>\n } @else {\n <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n @if (iconName && iconPosition === 'left') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n <span><ng-content></ng-content></span>\n @if (iconName && iconPosition === 'right') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n @if (active) {\n <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n }\n </it-link>\n }\n</ng-template>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
933
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item, li[itDropdownItem]", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition", mode: "mode" }, usesInheritance: true, ngImport: i0, template: "@if (isHostElement) {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <li>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </li>\n}\n\n<ng-template #content>\n @if (divider) {\n <span class=\"divider\"></span>\n } @else {\n <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n @if (iconName && iconPosition === 'left') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n <span><ng-content></ng-content></span>\n @if (iconName && iconPosition === 'right') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n @if (active) {\n <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n }\n </it-link>\n }\n</ng-template>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}:host ::ng-deep svg.left{margin-right:8px}:host ::ng-deep svg.right{margin-left:8px}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
921
934
|
}
|
|
922
935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
|
|
923
936
|
type: Component,
|
|
924
|
-
args: [{ selector: 'it-dropdown-item, li[itDropdownItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItLinkComponent, NgTemplateOutlet], template: "@if (isHostElement) {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <li>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </li>\n}\n\n<ng-template #content>\n @if (divider) {\n <span class=\"divider\"></span>\n } @else {\n <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n @if (iconName && iconPosition === 'left') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n <span><ng-content></ng-content></span>\n @if (iconName && iconPosition === 'right') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n @if (active) {\n <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n }\n </it-link>\n }\n</ng-template>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
|
|
937
|
+
args: [{ selector: 'it-dropdown-item, li[itDropdownItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItLinkComponent, NgTemplateOutlet], template: "@if (isHostElement) {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <li>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </li>\n}\n\n<ng-template #content>\n @if (divider) {\n <span class=\"divider\"></span>\n } @else {\n <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n @if (iconName && iconPosition === 'left') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n <span><ng-content></ng-content></span>\n @if (iconName && iconPosition === 'right') {\n <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n }\n @if (active) {\n <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n }\n </it-link>\n }\n</ng-template>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}:host ::ng-deep svg.left{margin-right:8px}:host ::ng-deep svg.right{margin-left:8px}\n"] }]
|
|
925
938
|
}], propDecorators: { divider: [{
|
|
926
939
|
type: Input,
|
|
927
940
|
args: [{ transform: inputToBoolean }]
|
|
@@ -1714,11 +1727,11 @@ class ItCardComponent extends ItAbstractComponent {
|
|
|
1714
1727
|
this.shadow = 'sm';
|
|
1715
1728
|
}
|
|
1716
1729
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1717
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { inline: ["inline", "inline", inputToBoolean], mini: ["mini", "mini", inputToBoolean], border: ["border", "border", inputToBoolean], banner: ["banner", "banner", inputToBoolean], profile: ["profile", "profile", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], reverse: ["reverse", "reverse", inputToBoolean], fullHeight: ["fullHeight", "fullHeight", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], borderTop: ["borderTop", "borderTop", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass", shadow: "shadow" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n<article\n class=\"it-card rounded {{ cardClass }}\"\n [class.border]=\"border\"\n [class.rounded]=\"rounded\"\n [class.shadow-sm]=\"shadow === 'sm'\"\n [class.shadow-lg]=\"shadow === 'lg'\"\n [class.shadow]=\"shadow === 'normal'\"\n [class.it-card-image]=\"hasImage\"\n [class.it-card-height-full]=\"fullHeight\"\n [class.it-card-inline]=\"inline\"\n [class.it-card-inline-reverse]=\"reverse\"\n [class.it-card-inline-mini]=\"mini\"\n [class.it-card-banner]=\"banner\"\n [class.it-card-profile]=\"profile\"\n [class.it-card-border-top]=\"borderTop\"\n [class.it-card-border-top-secondary]=\"borderTop\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n</article>\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media(min-width:768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1730
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { inline: ["inline", "inline", inputToBoolean], mini: ["mini", "mini", inputToBoolean], border: ["border", "border", inputToBoolean], banner: ["banner", "banner", inputToBoolean], profile: ["profile", "profile", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], reverse: ["reverse", "reverse", inputToBoolean], fullHeight: ["fullHeight", "fullHeight", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], borderTop: ["borderTop", "borderTop", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass", noPadding: ["noPadding", "noPadding", inputToBoolean], shadow: "shadow" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n<article\n class=\"it-card rounded {{ cardClass }}\"\n [class.border]=\"border\"\n [class.rounded]=\"rounded\"\n [class.shadow-sm]=\"shadow === 'sm'\"\n [class.shadow-lg]=\"shadow === 'lg'\"\n [class.shadow]=\"shadow === 'normal'\"\n [class.it-card-image]=\"hasImage\"\n [class.it-card-height-full]=\"fullHeight\"\n [class.it-card-inline]=\"inline\"\n [class.it-card-inline-reverse]=\"reverse\"\n [class.it-card-inline-mini]=\"mini\"\n [class.it-card-banner]=\"banner\"\n [class.it-card-profile]=\"profile\"\n [class.it-card-border-top]=\"borderTop\"\n [class.it-card-border-top-secondary]=\"borderTop\"\n [class.p-0]=\"noPadding\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n</article>\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media(min-width:768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1718
1731
|
}
|
|
1719
1732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItCardComponent, decorators: [{
|
|
1720
1733
|
type: Component,
|
|
1721
|
-
args: [{ selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n<article\n class=\"it-card rounded {{ cardClass }}\"\n [class.border]=\"border\"\n [class.rounded]=\"rounded\"\n [class.shadow-sm]=\"shadow === 'sm'\"\n [class.shadow-lg]=\"shadow === 'lg'\"\n [class.shadow]=\"shadow === 'normal'\"\n [class.it-card-image]=\"hasImage\"\n [class.it-card-height-full]=\"fullHeight\"\n [class.it-card-inline]=\"inline\"\n [class.it-card-inline-reverse]=\"reverse\"\n [class.it-card-inline-mini]=\"mini\"\n [class.it-card-banner]=\"banner\"\n [class.it-card-profile]=\"profile\"\n [class.it-card-border-top]=\"borderTop\"\n [class.it-card-border-top-secondary]=\"borderTop\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n</article>\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media(min-width:768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
|
|
1734
|
+
args: [{ selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n<article\n class=\"it-card rounded {{ cardClass }}\"\n [class.border]=\"border\"\n [class.rounded]=\"rounded\"\n [class.shadow-sm]=\"shadow === 'sm'\"\n [class.shadow-lg]=\"shadow === 'lg'\"\n [class.shadow]=\"shadow === 'normal'\"\n [class.it-card-image]=\"hasImage\"\n [class.it-card-height-full]=\"fullHeight\"\n [class.it-card-inline]=\"inline\"\n [class.it-card-inline-reverse]=\"reverse\"\n [class.it-card-inline-mini]=\"mini\"\n [class.it-card-banner]=\"banner\"\n [class.it-card-profile]=\"profile\"\n [class.it-card-border-top]=\"borderTop\"\n [class.it-card-border-top-secondary]=\"borderTop\"\n [class.p-0]=\"noPadding\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n</article>\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media(min-width:768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
|
|
1722
1735
|
}], propDecorators: { inline: [{
|
|
1723
1736
|
type: Input,
|
|
1724
1737
|
args: [{ transform: inputToBoolean }]
|
|
@@ -1753,6 +1766,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
1753
1766
|
type: Input
|
|
1754
1767
|
}], bodyClass: [{
|
|
1755
1768
|
type: Input
|
|
1769
|
+
}], noPadding: [{
|
|
1770
|
+
type: Input,
|
|
1771
|
+
args: [{ transform: inputToBoolean }]
|
|
1756
1772
|
}], shadow: [{
|
|
1757
1773
|
type: Input
|
|
1758
1774
|
}] } });
|
|
@@ -1971,11 +1987,11 @@ class ItChipComponent {
|
|
|
1971
1987
|
this.closeEvent.emit();
|
|
1972
1988
|
}
|
|
1973
1989
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItChipComponent, isStandalone: true, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div\n class=\"chip\"\n [ngClass]=\"[\n !showCloseButton ? 'chip-simple' : 'alert',\n size === 'lg' ? 'chip-lg' : '',\n color ? 'chip-' + color : '',\n disabled ? 'chip-disabled' : '',\n ]\">\n @if (icon) {\n <svg class=\"icon icon-xs\">\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n </svg>\n }\n @if (avatar) {\n <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n }\n <span class=\"chip-label\">{{ label }}</span>\n @if (showCloseButton) {\n <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n <svg class=\"icon\">\n <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n </svg>\n <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1990
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItChipComponent, isStandalone: true, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { closeEvent: "closeEvent" }, host: { styleAttribute: "display: inline-block; vertical-align: middle" }, ngImport: i0, template: "<div\n class=\"chip\"\n [ngClass]=\"[\n !showCloseButton ? 'chip-simple' : 'alert',\n size === 'lg' ? 'chip-lg' : '',\n color ? 'chip-' + color : '',\n disabled ? 'chip-disabled' : '',\n ]\">\n @if (icon) {\n <svg class=\"icon icon-xs\">\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n </svg>\n }\n @if (avatar) {\n <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n }\n <span class=\"chip-label\">{{ label }}</span>\n @if (showCloseButton) {\n <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n <svg class=\"icon\">\n <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n </svg>\n <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1975
1991
|
}
|
|
1976
1992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItChipComponent, decorators: [{
|
|
1977
1993
|
type: Component,
|
|
1978
|
-
args: [{ selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TranslateModule], template: "<div\n class=\"chip\"\n [ngClass]=\"[\n !showCloseButton ? 'chip-simple' : 'alert',\n size === 'lg' ? 'chip-lg' : '',\n color ? 'chip-' + color : '',\n disabled ? 'chip-disabled' : '',\n ]\">\n @if (icon) {\n <svg class=\"icon icon-xs\">\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n </svg>\n }\n @if (avatar) {\n <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n }\n <span class=\"chip-label\">{{ label }}</span>\n @if (showCloseButton) {\n <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n <svg class=\"icon\">\n <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n </svg>\n <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n </button>\n }\n</div>\n" }]
|
|
1994
|
+
args: [{ selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TranslateModule], host: { style: 'display: inline-block; vertical-align: middle' }, template: "<div\n class=\"chip\"\n [ngClass]=\"[\n !showCloseButton ? 'chip-simple' : 'alert',\n size === 'lg' ? 'chip-lg' : '',\n color ? 'chip-' + color : '',\n disabled ? 'chip-disabled' : '',\n ]\">\n @if (icon) {\n <svg class=\"icon icon-xs\">\n <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n </svg>\n }\n @if (avatar) {\n <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n }\n <span class=\"chip-label\">{{ label }}</span>\n @if (showCloseButton) {\n <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n <svg class=\"icon\">\n <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n </svg>\n <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n </button>\n }\n</div>\n" }]
|
|
1979
1995
|
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
1980
1996
|
type: Input
|
|
1981
1997
|
}], showCloseButton: [{
|
|
@@ -2702,9 +2718,9 @@ class ItAbstractFormComponent extends ItAbstractComponent {
|
|
|
2702
2718
|
return undefined;
|
|
2703
2719
|
}
|
|
2704
2720
|
if (this._ngControl) {
|
|
2705
|
-
return this._ngControl.invalid === true &&
|
|
2721
|
+
return this._ngControl.invalid === true && this._ngControl.touched === true;
|
|
2706
2722
|
}
|
|
2707
|
-
return this.control.invalid &&
|
|
2723
|
+
return this.control.invalid && this.control.touched;
|
|
2708
2724
|
}
|
|
2709
2725
|
/**
|
|
2710
2726
|
* Check if field is valid (Validation successful)
|
|
@@ -2714,9 +2730,9 @@ class ItAbstractFormComponent extends ItAbstractComponent {
|
|
|
2714
2730
|
return undefined;
|
|
2715
2731
|
}
|
|
2716
2732
|
if (this._ngControl) {
|
|
2717
|
-
return this._ngControl.valid === true &&
|
|
2733
|
+
return this._ngControl.valid === true && this._ngControl.touched === true;
|
|
2718
2734
|
}
|
|
2719
|
-
return this.control.valid &&
|
|
2735
|
+
return this.control.valid && this.control.touched;
|
|
2720
2736
|
}
|
|
2721
2737
|
/**
|
|
2722
2738
|
* Return the invalid message string from TranslateService
|
|
@@ -3192,11 +3208,11 @@ class ItInputComponent extends ItAbstractFormComponent {
|
|
|
3192
3208
|
this.control.setValue(value);
|
|
3193
3209
|
}
|
|
3194
3210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3195
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n <div\n class=\"input-group\"\n [class.disabled]=\"!control.enabled\"\n [class.input-number]=\"type === 'number'\"\n [class.input-number-currency]=\"currency\"\n [class.input-number-percentage]=\"percentage\"\n [class.input-number-adaptive]=\"adaptive\">\n <span class=\"input-group-text\" #prependText>\n <ng-content select=\"[prependText]\"></ng-content>\n </span>\n @if (label) {\n <label\n [for]=\"id\"\n [class.active]=\"isActiveLabel\"\n [class.input-symbol-label]=\"percentage || currency\"\n [class.input-number-label]=\"type === 'number'\"\n [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n {{ label }}\n </label>\n }\n\n @if (type === 'number') {\n @if (currency || percentage) {\n <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n }\n <input\n type=\"number\"\n [id]=\"id\"\n [step]=\"step ?? null\"\n [min]=\"min ?? ''\"\n [max]=\"max ?? ''\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n <span class=\"input-group-text align-buttons flex-column\">\n <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n </button>\n <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n </button>\n </span>\n } @else {\n <input\n [id]=\"id\"\n [type]=\"type\"\n [max]=\"type === 'date' ? maxDate : undefined\"\n [min]=\"type === 'date' ? minDate : undefined\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n }\n\n <div class=\"input-group-append\">\n <ng-content select=\"[append]\"></ng-content>\n\n <div class=\"input-group-text\">\n <ng-content select=\"[appendText]\"></ng-content>\n </div>\n </div>\n </div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n <div\n class=\"input-group\"\n [class.disabled]=\"!control.enabled\"\n [class.input-number]=\"type === 'number'\"\n [class.input-number-currency]=\"currency\"\n [class.input-number-percentage]=\"percentage\"\n [class.input-number-adaptive]=\"adaptive\">\n <span class=\"input-group-text\" #prependText>\n <ng-content select=\"[prependText]\"></ng-content>\n </span>\n @if (label) {\n <label\n [for]=\"id\"\n [class.active]=\"isActiveLabel\"\n [class.input-symbol-label]=\"percentage || currency\"\n [class.input-number-label]=\"type === 'number'\"\n [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n {{ label }}\n </label>\n }\n\n @if (type === 'number') {\n @if (currency || percentage) {\n <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n }\n <input\n type=\"number\"\n [id]=\"id\"\n [step]=\"step ?? null\"\n [min]=\"min ?? ''\"\n [max]=\"max ?? ''\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"description ? id + '-description' : null\"\n (blur)=\"markAsTouched()\" />\n <span class=\"input-group-text align-buttons flex-column\">\n <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n </button>\n <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n </button>\n </span>\n } @else {\n <input\n [id]=\"id\"\n [type]=\"type\"\n [max]=\"type === 'date' ? maxDate : undefined\"\n [min]=\"type === 'date' ? minDate : undefined\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"description ? id + '-description' : null\"\n (blur)=\"markAsTouched()\" />\n }\n\n <div class=\"input-group-append\">\n <ng-content select=\"[append]\"></ng-content>\n\n <div class=\"input-group-text\">\n <ng-content select=\"[appendText]\"></ng-content>\n </div>\n </div>\n </div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3196
3212
|
}
|
|
3197
3213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItInputComponent, decorators: [{
|
|
3198
3214
|
type: Component,
|
|
3199
|
-
args: [{ selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TranslateModule, AsyncPipe], template: "<div class=\"form-group\">\n <div\n class=\"input-group\"\n [class.disabled]=\"!control.enabled\"\n [class.input-number]=\"type === 'number'\"\n [class.input-number-currency]=\"currency\"\n [class.input-number-percentage]=\"percentage\"\n [class.input-number-adaptive]=\"adaptive\">\n <span class=\"input-group-text\" #prependText>\n <ng-content select=\"[prependText]\"></ng-content>\n </span>\n @if (label) {\n <label\n [for]=\"id\"\n [class.active]=\"isActiveLabel\"\n [class.input-symbol-label]=\"percentage || currency\"\n [class.input-number-label]=\"type === 'number'\"\n [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n {{ label }}\n </label>\n }\n\n @if (type === 'number') {\n @if (currency || percentage) {\n <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n }\n <input\n type=\"number\"\n [id]=\"id\"\n [step]=\"step ?? null\"\n [min]=\"min ?? ''\"\n [max]=\"max ?? ''\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n <span class=\"input-group-text align-buttons flex-column\">\n <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n </button>\n <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n </button>\n </span>\n } @else {\n <input\n [id]=\"id\"\n [type]=\"type\"\n [max]=\"type === 'date' ? maxDate : undefined\"\n [min]=\"type === 'date' ? minDate : undefined\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"id + '-description'\"\n (blur)=\"markAsTouched()\" />\n }\n\n <div class=\"input-group-append\">\n <ng-content select=\"[append]\"></ng-content>\n\n <div class=\"input-group-text\">\n <ng-content select=\"[appendText]\"></ng-content>\n </div>\n </div>\n </div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
|
|
3215
|
+
args: [{ selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TranslateModule, AsyncPipe], template: "<div class=\"form-group\">\n <div\n class=\"input-group\"\n [class.disabled]=\"!control.enabled\"\n [class.input-number]=\"type === 'number'\"\n [class.input-number-currency]=\"currency\"\n [class.input-number-percentage]=\"percentage\"\n [class.input-number-adaptive]=\"adaptive\">\n <span class=\"input-group-text\" #prependText>\n <ng-content select=\"[prependText]\"></ng-content>\n </span>\n @if (label) {\n <label\n [for]=\"id\"\n [class.active]=\"isActiveLabel\"\n [class.input-symbol-label]=\"percentage || currency\"\n [class.input-number-label]=\"type === 'number'\"\n [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n {{ label }}\n </label>\n }\n\n @if (type === 'number') {\n @if (currency || percentage) {\n <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n }\n <input\n type=\"number\"\n [id]=\"id\"\n [step]=\"step ?? null\"\n [min]=\"min ?? ''\"\n [max]=\"max ?? ''\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"description ? id + '-description' : null\"\n (blur)=\"markAsTouched()\" />\n <span class=\"input-group-text align-buttons flex-column\">\n <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n </button>\n <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n </button>\n </span>\n } @else {\n <input\n [id]=\"id\"\n [type]=\"type\"\n [max]=\"type === 'date' ? maxDate : undefined\"\n [min]=\"type === 'date' ? minDate : undefined\"\n [class.form-control]=\"readonly !== 'plaintext'\"\n [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n [class.is-invalid]=\"isInvalid\"\n [class.just-validate-success-field]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [readonly]=\"isReadonly\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-describedby]=\"description ? id + '-description' : null\"\n (blur)=\"markAsTouched()\" />\n }\n\n <div class=\"input-group-append\">\n <ng-content select=\"[append]\"></ng-content>\n\n <div class=\"input-group-text\">\n <ng-content select=\"[appendText]\"></ng-content>\n </div>\n </div>\n </div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
|
|
3200
3216
|
}], propDecorators: { type: [{
|
|
3201
3217
|
type: Input
|
|
3202
3218
|
}], placeholder: [{
|
|
@@ -3312,11 +3328,11 @@ class ItPaginationComponent {
|
|
|
3312
3328
|
this.changerEvent.emit(value); // emit new changer value
|
|
3313
3329
|
}
|
|
3314
3330
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n class=\"pagination-wrapper\"\n [class.justify-content-center]=\"alignment === 'center'\"\n [class.justify-content-end]=\"alignment === 'end'\"\n [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n @if (pages.length) {\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"!(currentPage < 1) && pageChange($event, currentPage)\">\n @if (!textLinks) {\n <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n }\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.previous' | translate }}\n }\n </a>\n </li>\n @if (simpleMode) {\n <li class=\"page-item\">\n <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n </li>\n <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n <li class=\"page-item\">\n <span class=\"page-link\">{{ pageNumbers }}</span>\n </li>\n <li class=\"page-item visually-hidden\">\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n </a>\n </li>\n } @else {\n @if (pageNumbers > visiblePages && pages[0] >= 2) {\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n </li>\n @if (pages[0] >= 3) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n }\n @for (page of pages; track page) {\n <li class=\"page-item\">\n @if (page === currentPage + 1) {\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n </a>\n } @else {\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n }\n </li>\n }\n @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n @if (pages[pages.length - 1] < pageNumbers - 1) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n </li>\n }\n }\n <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n <a\n class=\"page-link\"\n [class.text]=\"textLinks\"\n href=\"#\"\n (click)=\"!(currentPage >= pageNumbers - 1) && pageChange($event, currentPage + 2)\">\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.next' | translate }}\n } @else {\n <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n }\n </a>\n </li>\n </ul>\n }\n\n @if (currentChanger !== undefined) {\n <it-dropdown>\n <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n <ng-container list>\n @for (value of changerValues; track value) {\n <
|
|
3331
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n class=\"pagination-wrapper\"\n [class.justify-content-center]=\"alignment === 'center'\"\n [class.justify-content-end]=\"alignment === 'end'\"\n [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n @if (pages.length) {\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"!(currentPage < 1) && pageChange($event, currentPage)\">\n @if (!textLinks) {\n <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n }\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.previous' | translate }}\n }\n </a>\n </li>\n @if (simpleMode) {\n <li class=\"page-item\">\n <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n </li>\n <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n <li class=\"page-item\">\n <span class=\"page-link\">{{ pageNumbers }}</span>\n </li>\n <li class=\"page-item visually-hidden\">\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n </a>\n </li>\n } @else {\n @if (pageNumbers > visiblePages && pages[0] >= 2) {\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n </li>\n @if (pages[0] >= 3) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n }\n @for (page of pages; track page) {\n <li class=\"page-item\">\n @if (page === currentPage + 1) {\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n </a>\n } @else {\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n }\n </li>\n }\n @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n @if (pages[pages.length - 1] < pageNumbers - 1) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n </li>\n }\n }\n <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n <a\n class=\"page-link\"\n [class.text]=\"textLinks\"\n href=\"#\"\n (click)=\"!(currentPage >= pageNumbers - 1) && pageChange($event, currentPage + 2)\">\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.next' | translate }}\n } @else {\n <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n }\n </a>\n </li>\n </ul>\n }\n\n @if (currentChanger !== undefined) {\n <it-dropdown>\n <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n <ng-container list>\n @for (value of changerValues; track value) {\n <li\n itDropdownItem\n href=\"#\"\n externalLink=\"true\"\n tabindex=\"-1\"\n (click)=\"changerChange($event, value)\"\n (keyup.enter)=\"changerChange($event, value)\">\n {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n </li>\n }\n </ng-container>\n </it-dropdown>\n }\n\n @if (showJumpToPage) {\n <it-input\n type=\"number\"\n [min]=\"1\"\n [max]=\"pageNumbers\"\n [label]=\"('it.core.go-to' | translate) + '...'\"\n [formControl]=\"jumpToPage\"></it-input>\n }\n\n <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n <ng-content></ng-content>\n </p>\n</nav>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item, li[itDropdownItem]", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3316
3332
|
}
|
|
3317
3333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItPaginationComponent, decorators: [{
|
|
3318
3334
|
type: Component,
|
|
3319
|
-
args: [{ selector: 'it-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, LowerCasePipe, ItDropdownModule, ItInputComponent, ReactiveFormsModule], template: "<nav\n class=\"pagination-wrapper\"\n [class.justify-content-center]=\"alignment === 'center'\"\n [class.justify-content-end]=\"alignment === 'end'\"\n [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n @if (pages.length) {\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"!(currentPage < 1) && pageChange($event, currentPage)\">\n @if (!textLinks) {\n <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n }\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.previous' | translate }}\n }\n </a>\n </li>\n @if (simpleMode) {\n <li class=\"page-item\">\n <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n </li>\n <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n <li class=\"page-item\">\n <span class=\"page-link\">{{ pageNumbers }}</span>\n </li>\n <li class=\"page-item visually-hidden\">\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n </a>\n </li>\n } @else {\n @if (pageNumbers > visiblePages && pages[0] >= 2) {\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n </li>\n @if (pages[0] >= 3) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n }\n @for (page of pages; track page) {\n <li class=\"page-item\">\n @if (page === currentPage + 1) {\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n </a>\n } @else {\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n }\n </li>\n }\n @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n @if (pages[pages.length - 1] < pageNumbers - 1) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n </li>\n }\n }\n <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n <a\n class=\"page-link\"\n [class.text]=\"textLinks\"\n href=\"#\"\n (click)=\"!(currentPage >= pageNumbers - 1) && pageChange($event, currentPage + 2)\">\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.next' | translate }}\n } @else {\n <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n }\n </a>\n </li>\n </ul>\n }\n\n @if (currentChanger !== undefined) {\n <it-dropdown>\n <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n <ng-container list>\n @for (value of changerValues; track value) {\n <
|
|
3335
|
+
args: [{ selector: 'it-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, LowerCasePipe, ItDropdownModule, ItInputComponent, ReactiveFormsModule], template: "<nav\n class=\"pagination-wrapper\"\n [class.justify-content-center]=\"alignment === 'center'\"\n [class.justify-content-end]=\"alignment === 'end'\"\n [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n @if (pages.length) {\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"!(currentPage < 1) && pageChange($event, currentPage)\">\n @if (!textLinks) {\n <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n }\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.previous' | translate }}\n }\n </a>\n </li>\n @if (simpleMode) {\n <li class=\"page-item\">\n <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n </li>\n <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n <li class=\"page-item\">\n <span class=\"page-link\">{{ pageNumbers }}</span>\n </li>\n <li class=\"page-item visually-hidden\">\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n </a>\n </li>\n } @else {\n @if (pageNumbers > visiblePages && pages[0] >= 2) {\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n </li>\n @if (pages[0] >= 3) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n }\n @for (page of pages; track page) {\n <li class=\"page-item\">\n @if (page === currentPage + 1) {\n <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n </a>\n } @else {\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n }\n </li>\n }\n @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n @if (pages[pages.length - 1] < pageNumbers - 1) {\n <li class=\"page-item\">\n <span class=\"page-link\">...</span>\n </li>\n }\n <li class=\"page-item\">\n <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n </li>\n }\n }\n <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n <a\n class=\"page-link\"\n [class.text]=\"textLinks\"\n href=\"#\"\n (click)=\"!(currentPage >= pageNumbers - 1) && pageChange($event, currentPage + 2)\">\n <span class=\"visually-hidden\">\n {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n </span>\n @if (textLinks) {\n {{ 'it.core.next' | translate }}\n } @else {\n <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n }\n </a>\n </li>\n </ul>\n }\n\n @if (currentChanger !== undefined) {\n <it-dropdown>\n <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n <ng-container list>\n @for (value of changerValues; track value) {\n <li\n itDropdownItem\n href=\"#\"\n externalLink=\"true\"\n tabindex=\"-1\"\n (click)=\"changerChange($event, value)\"\n (keyup.enter)=\"changerChange($event, value)\">\n {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n </li>\n }\n </ng-container>\n </it-dropdown>\n }\n\n @if (showJumpToPage) {\n <it-input\n type=\"number\"\n [min]=\"1\"\n [max]=\"pageNumbers\"\n [label]=\"('it.core.go-to' | translate) + '...'\"\n [formControl]=\"jumpToPage\"></it-input>\n }\n\n <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n <ng-content></ng-content>\n </p>\n</nav>\n" }]
|
|
3320
3336
|
}], ctorParameters: () => [], propDecorators: { currentPage: [{
|
|
3321
3337
|
type: Input,
|
|
3322
3338
|
args: [{ required: true }]
|
|
@@ -4403,11 +4419,11 @@ class ItCheckboxComponent extends ItAbstractFormComponent {
|
|
|
4403
4419
|
return this.onChange(value);
|
|
4404
4420
|
}
|
|
4405
4421
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n @if (toggle) {\n <div class=\"toggles\">\n <label [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\"\n (click)=\"$event.stopPropagation()\" />\n <span class=\"lever\"></span>\n </label>\n </div>\n } @else {\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [class.semi-checked]=\"indeterminate\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"group ? id + '-help' : undefined\"\n (click)=\"$event.stopPropagation()\" />\n <label class=\"form-check-label\" [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n </label>\n }\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n</ng-container>\n\n<ng-template #error>\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n</ng-template>\n\n<ng-template #htmlLabel>\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4422
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n @if (toggle) {\n <div class=\"toggles\">\n <label [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"group ? id + '-help' : null\"\n (click)=\"$event.stopPropagation()\" />\n <span class=\"lever\"></span>\n </label>\n </div>\n } @else {\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [class.semi-checked]=\"indeterminate\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"group ? id + '-help' : undefined\"\n (click)=\"$event.stopPropagation()\" />\n <label class=\"form-check-label\" [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n </label>\n }\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n</ng-container>\n\n<ng-template #error>\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n</ng-template>\n\n<ng-template #htmlLabel>\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4407
4423
|
}
|
|
4408
4424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItCheckboxComponent, decorators: [{
|
|
4409
4425
|
type: Component,
|
|
4410
|
-
args: [{ selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n @if (toggle) {\n <div class=\"toggles\">\n <label [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\"\n (click)=\"$event.stopPropagation()\" />\n <span class=\"lever\"></span>\n </label>\n </div>\n } @else {\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [class.semi-checked]=\"indeterminate\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"group ? id + '-help' : undefined\"\n (click)=\"$event.stopPropagation()\" />\n <label class=\"form-check-label\" [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n </label>\n }\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n</ng-container>\n\n<ng-template #error>\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n</ng-template>\n\n<ng-template #htmlLabel>\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n</ng-template>\n" }]
|
|
4426
|
+
args: [{ selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n @if (toggle) {\n <div class=\"toggles\">\n <label [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"group ? id + '-help' : null\"\n (click)=\"$event.stopPropagation()\" />\n <span class=\"lever\"></span>\n </label>\n </div>\n } @else {\n <input\n [id]=\"id\"\n type=\"checkbox\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [class.semi-checked]=\"indeterminate\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"group ? id + '-help' : undefined\"\n (click)=\"$event.stopPropagation()\" />\n <label class=\"form-check-label\" [for]=\"id\">\n <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n </label>\n }\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n </div>\n }\n</ng-container>\n\n<ng-template #error>\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n</ng-template>\n\n<ng-template #htmlLabel>\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n</ng-template>\n" }]
|
|
4411
4427
|
}], propDecorators: { toggle: [{
|
|
4412
4428
|
type: Input,
|
|
4413
4429
|
args: [{ transform: inputToBoolean }]
|
|
@@ -4527,11 +4543,11 @@ class ItPasswordInputComponent extends ItAbstractFormComponent {
|
|
|
4527
4543
|
return this._translateService.get(keys, { minLength: this.minLength }).pipe(map(labels => Object.values(labels).join(', ')));
|
|
4528
4544
|
}
|
|
4529
4545
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4530
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItPasswordInputComponent, isStandalone: true, selector: "it-password-input", inputs: { required: "required", minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: ["showStrengthMeter", "showStrengthMeter", inputToBoolean], confirmPasswordField: ["confirmPasswordField", "confirmPasswordField", inputToBoolean], autocomplete: "autocomplete" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n }\n <input\n #input\n [id]=\"id\"\n type=\"password\"\n class=\"form-control input-password\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [attr.aria-describedby]=\"id + '-description'\"\n [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n <span class=\"password-icon\" aria-hidden=\"true\">\n <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n </span>\n\n @if (isInvalid) {\n <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n\n @if (description !== undefined && !isStrengthMeter) {\n <small [id]=\"id + '-description'\" class=\"form-text\">\n {{ description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n }\n\n <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n {{ 'it.form.caps-inserted' | translate }}\n </small>\n\n @if (isStrengthMeter) {\n <div class=\"password-strength-meter\">\n <small\n [id]=\"id + '-description'\"\n class=\"form-text text-muted\"\n [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n <div class=\"password-meter progress rounded-0 position-absolute\">\n <div class=\"row position-absolute w-100 m-0\">\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n </div>\n <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n </div>\n </div>\n }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4546
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItPasswordInputComponent, isStandalone: true, selector: "it-password-input", inputs: { required: "required", minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: ["showStrengthMeter", "showStrengthMeter", inputToBoolean], confirmPasswordField: ["confirmPasswordField", "confirmPasswordField", inputToBoolean], autocomplete: "autocomplete" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n }\n <input\n #input\n [id]=\"id\"\n type=\"password\"\n class=\"form-control input-password\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [attr.aria-describedby]=\"description !== undefined || isStrengthMeter ? id + '-description' : null\"\n [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n <span class=\"password-icon\" aria-hidden=\"true\">\n <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n </span>\n\n @if (isInvalid) {\n <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n\n @if (description !== undefined && !isStrengthMeter) {\n <small [id]=\"id + '-description'\" class=\"form-text\">\n {{ description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n }\n\n <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n {{ 'it.form.caps-inserted' | translate }}\n </small>\n\n @if (isStrengthMeter) {\n <div class=\"password-strength-meter\">\n <small\n [id]=\"id + '-description'\"\n class=\"form-text text-muted\"\n [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n <div class=\"password-meter progress rounded-0 position-absolute\">\n <div class=\"row position-absolute w-100 m-0\">\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n </div>\n <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n </div>\n </div>\n }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4531
4547
|
}
|
|
4532
4548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItPasswordInputComponent, decorators: [{
|
|
4533
4549
|
type: Component,
|
|
4534
|
-
args: [{ selector: 'it-password-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, ItIconComponent, AsyncPipe, TranslateModule], template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n }\n <input\n #input\n [id]=\"id\"\n type=\"password\"\n class=\"form-control input-password\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [attr.aria-describedby]=\"id + '-description'\"\n [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n <span class=\"password-icon\" aria-hidden=\"true\">\n <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n </span>\n\n @if (isInvalid) {\n <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n\n @if (description !== undefined && !isStrengthMeter) {\n <small [id]=\"id + '-description'\" class=\"form-text\">\n {{ description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n }\n\n <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n {{ 'it.form.caps-inserted' | translate }}\n </small>\n\n @if (isStrengthMeter) {\n <div class=\"password-strength-meter\">\n <small\n [id]=\"id + '-description'\"\n class=\"form-text text-muted\"\n [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n <div class=\"password-meter progress rounded-0 position-absolute\">\n <div class=\"row position-absolute w-100 m-0\">\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n </div>\n <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n </div>\n </div>\n }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
|
|
4550
|
+
args: [{ selector: 'it-password-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, ItIconComponent, AsyncPipe, TranslateModule], template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n }\n <input\n #input\n [id]=\"id\"\n type=\"password\"\n class=\"form-control input-password\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [attr.aria-describedby]=\"description !== undefined || isStrengthMeter ? id + '-description' : null\"\n [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n <span class=\"password-icon\" aria-hidden=\"true\">\n <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n </span>\n\n @if (isInvalid) {\n <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n\n @if (description !== undefined && !isStrengthMeter) {\n <small [id]=\"id + '-description'\" class=\"form-text\">\n {{ description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n }\n\n <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n {{ 'it.form.caps-inserted' | translate }}\n </small>\n\n @if (isStrengthMeter) {\n <div class=\"password-strength-meter\">\n <small\n [id]=\"id + '-description'\"\n class=\"form-text text-muted\"\n [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n </small>\n <div class=\"password-meter progress rounded-0 position-absolute\">\n <div class=\"row position-absolute w-100 m-0\">\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n <div class=\"col-3 border-start border-end border-white\"></div>\n </div>\n <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n </div>\n </div>\n }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
|
|
4535
4551
|
}], propDecorators: { required: [{
|
|
4536
4552
|
type: Input
|
|
4537
4553
|
}], minLength: [{
|
|
@@ -4593,11 +4609,11 @@ class ItRadioButtonComponent extends ItAbstractFormComponent {
|
|
|
4593
4609
|
return this.onChange(this.value);
|
|
4594
4610
|
}
|
|
4595
4611
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4596
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItRadioButtonComponent, isStandalone: true, selector: "it-radio-button", inputs: { value: "value", inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], forceRadioName: "forceRadioName" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n <input\n [id]=\"id\"\n type=\"radio\"\n [value]=\"value\"\n [name]=\"name\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\" />\n\n <label class=\"form-check-label\" [for]=\"id\">\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n </label>\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4612
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItRadioButtonComponent, isStandalone: true, selector: "it-radio-button", inputs: { value: "value", inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], forceRadioName: "forceRadioName" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n <input\n [id]=\"id\"\n type=\"radio\"\n [value]=\"value\"\n [name]=\"name\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"group ? id + '-help' : null\" />\n\n <label class=\"form-check-label\" [for]=\"id\">\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n </label>\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4597
4613
|
}
|
|
4598
4614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItRadioButtonComponent, decorators: [{
|
|
4599
4615
|
type: Component,
|
|
4600
|
-
args: [{ selector: 'it-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n <input\n [id]=\"id\"\n type=\"radio\"\n [value]=\"value\"\n [name]=\"name\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"id + '-help'\" />\n\n <label class=\"form-check-label\" [for]=\"id\">\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n </label>\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</ng-container>\n" }]
|
|
4616
|
+
args: [{ selector: 'it-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n <input\n [id]=\"id\"\n type=\"radio\"\n [value]=\"value\"\n [name]=\"name\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n [formControl]=\"control\"\n [attr.aria-describedby]=\"group ? id + '-help' : null\" />\n\n <label class=\"form-check-label\" [for]=\"id\">\n <div #customLabel>\n <ng-content select=\"[label]\"></ng-content>\n </div>\n @if (!customLabel.hasChildNodes()) {\n {{ label }}\n }\n </label>\n\n @if (group) {\n <small [id]=\"id + '-help'\" class=\"form-text\">\n <ng-content></ng-content>\n </small>\n }\n\n @if (isInvalid && group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n </div>\n\n @if (isInvalid && !group) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</ng-container>\n" }]
|
|
4601
4617
|
}], propDecorators: { value: [{
|
|
4602
4618
|
type: Input,
|
|
4603
4619
|
args: [{ required: true }]
|
|
@@ -4763,11 +4779,11 @@ class ItSelectComponent extends ItAbstractFormComponent {
|
|
|
4763
4779
|
return false;
|
|
4764
4780
|
}
|
|
4765
4781
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4766
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n @if (label) {\n <label [for]=\"id\">{{ label }}</label>\n }\n <select\n [id]=\"id\"\n [formControl]=\"control\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n (blur)=\"markAsTouched()\"\n [attr.aria-describedby]=\"id + '-description'\">\n @if (defaultOption) {\n <option [ngValue]=\"null\" disabled selected>\n {{ defaultOption }}\n </option>\n }\n\n <ng-content></ng-content>\n\n @if (options) {\n @for (option of options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n }\n\n @if (groups) {\n @for (group of groups; track group) {\n <optgroup [label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
4782
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n @if (label) {\n <label [for]=\"id\">{{ label }}</label>\n }\n <select\n [id]=\"id\"\n [formControl]=\"control\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n (blur)=\"markAsTouched()\"\n [attr.aria-describedby]=\"description ? id + '-description' : null\">\n @if (defaultOption) {\n <option [ngValue]=\"null\" disabled selected>\n {{ defaultOption }}\n </option>\n }\n\n <ng-content></ng-content>\n\n @if (options) {\n @for (option of options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n }\n\n @if (groups) {\n @for (group of groups; track group) {\n <optgroup [label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
4767
4783
|
}
|
|
4768
4784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItSelectComponent, decorators: [{
|
|
4769
4785
|
type: Component,
|
|
4770
|
-
args: [{ selector: 'it-select', imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"select-wrapper\">\n @if (label) {\n <label [for]=\"id\">{{ label }}</label>\n }\n <select\n [id]=\"id\"\n [formControl]=\"control\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n (blur)=\"markAsTouched()\"\n [attr.aria-describedby]=\"id + '-description'\">\n @if (defaultOption) {\n <option [ngValue]=\"null\" disabled selected>\n {{ defaultOption }}\n </option>\n }\n\n <ng-content></ng-content>\n\n @if (options) {\n @for (option of options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n }\n\n @if (groups) {\n @for (group of groups; track group) {\n <optgroup [label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
|
|
4786
|
+
args: [{ selector: 'it-select', imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"select-wrapper\">\n @if (label) {\n <label [for]=\"id\">{{ label }}</label>\n }\n <select\n [id]=\"id\"\n [formControl]=\"control\"\n [class.is-invalid]=\"isInvalid\"\n [class.is-valid]=\"isValid\"\n (blur)=\"markAsTouched()\"\n [attr.aria-describedby]=\"description ? id + '-description' : null\">\n @if (defaultOption) {\n <option [ngValue]=\"null\" disabled selected>\n {{ defaultOption }}\n </option>\n }\n\n <ng-content></ng-content>\n\n @if (options) {\n @for (option of options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n }\n\n @if (groups) {\n @for (group of groups; track group) {\n <optgroup [label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n {{ option.text ?? option.value }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError>\n <ng-content select=\"[error]\"></ng-content>\n </div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
|
|
4771
4787
|
}], propDecorators: { options: [{
|
|
4772
4788
|
type: Input
|
|
4773
4789
|
}], groups: [{
|
|
@@ -5792,6 +5808,12 @@ class ItAutocompleteComponent extends ItAbstractFormComponent {
|
|
|
5792
5808
|
this.onChange(this.value);
|
|
5793
5809
|
}
|
|
5794
5810
|
}
|
|
5811
|
+
writeValue(value) {
|
|
5812
|
+
super.writeValue(value);
|
|
5813
|
+
if (!value && this._inputEl) {
|
|
5814
|
+
this.clear();
|
|
5815
|
+
}
|
|
5816
|
+
}
|
|
5795
5817
|
clear() {
|
|
5796
5818
|
this._inputEl.value = '';
|
|
5797
5819
|
}
|
|
@@ -5831,6 +5853,12 @@ class ItAutocompleteComponent extends ItAbstractFormComponent {
|
|
|
5831
5853
|
this.markAsTouched();
|
|
5832
5854
|
this._setAndCheck(ev.target.value);
|
|
5833
5855
|
};
|
|
5856
|
+
// Fix aria-labelledby: bootstrap-italia sets it to the input's id,
|
|
5857
|
+
// but it should point to the label element for proper accessible naming
|
|
5858
|
+
if (this.label) {
|
|
5859
|
+
const listbox = this.selectAutocompleteEl?.nativeElement.querySelector('ul[role="listbox"]');
|
|
5860
|
+
listbox?.setAttribute('aria-labelledby', this.id + '-label');
|
|
5861
|
+
}
|
|
5834
5862
|
}
|
|
5835
5863
|
}
|
|
5836
5864
|
ngAfterViewInit() {
|
|
@@ -5860,11 +5888,11 @@ class ItAutocompleteComponent extends ItAbstractFormComponent {
|
|
|
5860
5888
|
}
|
|
5861
5889
|
}
|
|
5862
5890
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5863
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { source: "source", required: "required", name: "name", description: "description", minLength: "minLength", defaultValue: "defaultValue", assistiveHintLabel: "assistiveHintLabel", noResultsLabel: "noResultsLabel", statusQueryTooShortLabel: "statusQueryTooShortLabel", statusNoResultsLabel: "statusNoResultsLabel", statusSelectedOptionLabel: "statusSelectedOptionLabel", statusResultsLabel: "statusResultsLabel" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "selectAutocompleteEl", first: true, predicate: ["selectAutocomplete"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n }\n <div #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError><ng-content select=\"[error]\"></ng-content></div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { source: "source", required: "required", name: "name", description: "description", minLength: "minLength", defaultValue: "defaultValue", assistiveHintLabel: "assistiveHintLabel", noResultsLabel: "noResultsLabel", statusQueryTooShortLabel: "statusQueryTooShortLabel", statusNoResultsLabel: "statusNoResultsLabel", statusSelectedOptionLabel: "statusSelectedOptionLabel", statusResultsLabel: "statusResultsLabel" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "selectAutocompleteEl", first: true, predicate: ["selectAutocomplete"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [id]=\"id + '-label'\" [class.active]=\"!!control.value\">{{ label }}</label>\n }\n <div #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError><ng-content select=\"[error]\"></ng-content></div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5864
5892
|
}
|
|
5865
5893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItAutocompleteComponent, decorators: [{
|
|
5866
5894
|
type: Component,
|
|
5867
|
-
args: [{ selector: 'it-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n }\n <div #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError><ng-content select=\"[error]\"></ng-content></div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n" }]
|
|
5895
|
+
args: [{ selector: 'it-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n @if (label) {\n <label [for]=\"id\" [id]=\"id + '-label'\" [class.active]=\"!!control.value\">{{ label }}</label>\n }\n <div #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n @if (description) {\n <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n }\n @if (isInvalid) {\n <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n <div #customError><ng-content select=\"[error]\"></ng-content></div>\n @if (!customError.hasChildNodes()) {\n {{ invalidMessage | async }}\n }\n </div>\n }\n</div>\n" }]
|
|
5868
5896
|
}], propDecorators: { source: [{
|
|
5869
5897
|
type: Input
|
|
5870
5898
|
}], required: [{
|
|
@@ -6215,8 +6243,28 @@ class ItHeaderComponent {
|
|
|
6215
6243
|
this.slimTitleLink = '#';
|
|
6216
6244
|
this.loginStyle = 'none';
|
|
6217
6245
|
this.expand = true;
|
|
6246
|
+
this.router = inject(Router);
|
|
6247
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
6218
6248
|
this.loginClick = new EventEmitter();
|
|
6219
6249
|
this.searchClick = new EventEmitter();
|
|
6250
|
+
/**
|
|
6251
|
+
* Force a synchronous change-detection pass on the header tree after
|
|
6252
|
+
* every router navigation. `routerLinkActive` adds/removes the CSS
|
|
6253
|
+
* `active` class via direct DOM manipulation, but the entire header
|
|
6254
|
+
* component tree uses OnPush change detection combined with sticky
|
|
6255
|
+
* positioning (HeaderSticky). Without an explicit CD cycle the browser
|
|
6256
|
+
* may not repaint the active-state border until the user interacts
|
|
6257
|
+
* with the page (see issue #589).
|
|
6258
|
+
*
|
|
6259
|
+
* As a UX improvement the mobile navbar is also auto-closed on
|
|
6260
|
+
* navigation so users do not have to dismiss it manually.
|
|
6261
|
+
*/
|
|
6262
|
+
this.router.events
|
|
6263
|
+
.pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed())
|
|
6264
|
+
.subscribe(() => {
|
|
6265
|
+
this.closeNavBar();
|
|
6266
|
+
this.cdr.detectChanges();
|
|
6267
|
+
});
|
|
6220
6268
|
}
|
|
6221
6269
|
ngAfterViewInit() {
|
|
6222
6270
|
this.updateListeners();
|
|
@@ -6557,6 +6605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
6557
6605
|
* @description Show a list of links to anchor of the document.
|
|
6558
6606
|
*/
|
|
6559
6607
|
class ItNavscrollComponent {
|
|
6608
|
+
static { this._nextId = 0; }
|
|
6560
6609
|
onScroll() {
|
|
6561
6610
|
const sectionContainer = this.#elementRef.nativeElement.querySelector('.it-page-sections-container');
|
|
6562
6611
|
this.#store.updateProgressBar(sectionContainer);
|
|
@@ -6569,10 +6618,17 @@ class ItNavscrollComponent {
|
|
|
6569
6618
|
#destroyRef;
|
|
6570
6619
|
#elementRef;
|
|
6571
6620
|
constructor() {
|
|
6621
|
+
this.accordionId = `navscroll-accordion-${ItNavscrollComponent._nextId++}`;
|
|
6572
6622
|
/**
|
|
6573
6623
|
* Header of the Navscroll
|
|
6574
6624
|
*/
|
|
6575
6625
|
this.header = '';
|
|
6626
|
+
/**
|
|
6627
|
+
* Whether the accordion starts expanded.
|
|
6628
|
+
* Only applies when headerAsAccordion is true.
|
|
6629
|
+
* @default true
|
|
6630
|
+
*/
|
|
6631
|
+
this.accordionExpanded = true;
|
|
6576
6632
|
/**
|
|
6577
6633
|
* Border position
|
|
6578
6634
|
* @default left
|
|
@@ -6595,6 +6651,7 @@ class ItNavscrollComponent {
|
|
|
6595
6651
|
this.selectedTitle = this.#store.selected.pipe(map(selected => selected?.title ?? ''));
|
|
6596
6652
|
this.progressBarValue = this.#store.progressBar;
|
|
6597
6653
|
this.isMobile = this.#store.isMobile;
|
|
6654
|
+
this.isNotMobile = this.#store.isMobile.pipe(map(v => !v));
|
|
6598
6655
|
this.#store.menuItemSelected
|
|
6599
6656
|
.pipe(takeUntilDestroyed(), withLatestFrom(this.isMobile), tap(v => {
|
|
6600
6657
|
const isMobile = v[1];
|
|
@@ -6623,7 +6680,7 @@ class ItNavscrollComponent {
|
|
|
6623
6680
|
this.#store.setMobile(window);
|
|
6624
6681
|
}
|
|
6625
6682
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItNavscrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6626
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItNavscrollComponent, isStandalone: true, selector: "it-navscroll", inputs: { header: "header", items: "items", borderPosition: "borderPosition", alignment: "alignment", theme: "theme", pageSectionsTemplate: "pageSectionsTemplate" }, host: { listeners: { "window:scroll": "onScroll()", "window:resize": "onResize()" } }, providers: [NavscrollStore], viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButtonRef"], descendants: true }], ngImport: i0, template: "<div class=\"container py-lg-5\">\n <div class=\"row\">\n <div class=\"col-12 col-lg-4\">\n
|
|
6683
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItNavscrollComponent, isStandalone: true, selector: "it-navscroll", inputs: { header: "header", headerAsAccordion: ["headerAsAccordion", "headerAsAccordion", inputToBoolean], hideNavigationOnMobile: ["hideNavigationOnMobile", "hideNavigationOnMobile", inputToBoolean], accordionExpanded: ["accordionExpanded", "accordionExpanded", inputToBoolean], items: "items", borderPosition: "borderPosition", alignment: "alignment", theme: "theme", pageSectionsTemplate: "pageSectionsTemplate" }, host: { listeners: { "window:scroll": "onScroll()", "window:resize": "onResize()" } }, providers: [NavscrollStore], viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButtonRef"], descendants: true }], ngImport: i0, template: "<div class=\"container py-lg-5\">\n <div class=\"row\">\n @if (!hideNavigationOnMobile || (isNotMobile | async)) {\n <div class=\"col-12 col-lg-4\">\n <div class=\"it-navscroll-sticky\" [ngClass]=\"{ 'it-navscroll-sticky-mobile': isMobile | async }\" data-bs-stackable=\"true\">\n <nav\n class=\"navbar it-navscroll-wrapper navbar-expand-lg\"\n [class.it-top-navscroll]=\"alignment === 'top'\"\n [class.it-bottom-navscroll]=\"alignment === 'bottom'\"\n [class.it-left-side]=\"borderPosition === 'left'\"\n [class.it-right-side]=\"borderPosition === 'right'\"\n [class.theme-dark-mobile]=\"theme === 'dark'\"\n [class.theme-dark-desktop]=\"theme === 'dark'\">\n <button\n class=\"custom-navbar-toggler\"\n type=\"button\"\n aria-controls=\"navbarNav\"\n [attr.aria-label]=\"'it.navigation.aria-label-toggle' | translate\"\n data-bs-toggle=\"navbarcollapsible\"\n data-bs-target=\"#navbarNav\"\n #toggleButtonRef>\n <span class=\"it-list\"></span>{{ selectedTitle | async }}\n </button>\n <div class=\"progress custom-navbar-progressbar\">\n <div\n class=\"progress-bar it-navscroll-progressbar\"\n role=\"progressbar\"\n [style.width.%]=\"progressBarValue | async\"\n [attr.aria-valuenow]=\"progressBarValue | async\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n </div>\n <div class=\"navbar-collapsable\" id=\"navbarNav\" tabindex=\"-1\">\n <div class=\"close-div visually-hidden\">\n <button class=\"btn close-menu\" type=\"button\"><span class=\"it-close\"></span>Chiudi</button>\n </div>\n <button type=\"button\" class=\"it-back-button btn w-100 text-start\">\n <svg class=\"icon icon-sm icon-primary align-top\">\n <use\n href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"\n xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"></use>\n </svg>\n <span>Indietro</span>\n </button>\n <div class=\"menu-wrapper\" tabindex=\"-1\">\n <div class=\"link-list-wrapper\">\n @if (headerAsAccordion) {\n <div class=\"accordion\" [id]=\"accordionId\">\n <div class=\"accordion-item\">\n <h3 class=\"accordion-header\" [id]=\"accordionId + '-heading'\">\n <button\n class=\"accordion-button\"\n [class.collapsed]=\"!accordionExpanded\"\n type=\"button\"\n data-bs-toggle=\"collapse\"\n [attr.data-bs-target]=\"'#' + accordionId + '-body'\"\n [attr.aria-expanded]=\"accordionExpanded\"\n [attr.aria-controls]=\"accordionId + '-body'\">\n {{ header }}\n </button>\n </h3>\n <div\n [id]=\"accordionId + '-body'\"\n class=\"accordion-collapse collapse\"\n [class.show]=\"accordionExpanded\"\n [attr.aria-labelledby]=\"accordionId + '-heading'\">\n <div class=\"accordion-body\">\n <it-navscroll-list-items [items]=\"items\"></it-navscroll-list-items>\n </div>\n </div>\n </div>\n </div>\n } @else {\n <h3>{{ header }}</h3>\n <div class=\"progress\">\n <div\n class=\"progress-bar it-navscroll-progressbar\"\n role=\"progressbar\"\n [style.width.%]=\"progressBarValue | async\"\n [attr.aria-valuenow]=\"progressBarValue | async\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n </div>\n <it-navscroll-list-items [items]=\"items\"></it-navscroll-list-items>\n }\n </div>\n </div>\n </div>\n </nav>\n </div>\n </div>\n }\n <div class=\"col-12 col-lg-8 it-page-sections-container\">\n <ng-container\n *ngTemplateOutlet=\"pageSectionsTemplate ? pageSectionsTemplate : defaultPageSectionsTemplate; context: { items: items }\">\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #defaultPageSectionsTemplate let-items=\"items\">\n @for (item of items; track item.href) {\n <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: 1 }\"></ng-container>\n }\n</ng-template>\n\n<ng-template #paragraphTemplate let-item=\"item\" let-level=\"level\" let-nextLevel=\"level+1\">\n @switch (level) {\n @case (1) {\n <h2 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h2>\n }\n @case (2) {\n <h3 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h3>\n }\n @case (3) {\n <h4 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h4>\n }\n @case (4) {\n <h5 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h5>\n }\n @default {\n <h6 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h6>\n }\n }\n @if (item.html) {\n <div [innerHTML]=\"item.html\"></div>\n } @else {\n <p>{{ item.text }}</p>\n }\n @for (item of item.childs; track item.href) {\n <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: nextLevel }\"></ng-container>\n }\n</ng-template>\n", styles: [".it-navscroll-sticky{position:sticky;top:0}.it-navscroll-sticky-mobile{z-index:1020}\n"], dependencies: [{ kind: "component", type: ItNavscrollListItemsComponent, selector: "it-navscroll-list-items", inputs: ["items"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6627
6684
|
}
|
|
6628
6685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItNavscrollComponent, decorators: [{
|
|
6629
6686
|
type: Component,
|
|
@@ -6637,9 +6694,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
6637
6694
|
TranslateModule,
|
|
6638
6695
|
AsyncPipe,
|
|
6639
6696
|
NgClass,
|
|
6640
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NavscrollStore], template: "<div class=\"container py-lg-5\">\n <div class=\"row\">\n <div class=\"col-12 col-lg-4\">\n
|
|
6697
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NavscrollStore], template: "<div class=\"container py-lg-5\">\n <div class=\"row\">\n @if (!hideNavigationOnMobile || (isNotMobile | async)) {\n <div class=\"col-12 col-lg-4\">\n <div class=\"it-navscroll-sticky\" [ngClass]=\"{ 'it-navscroll-sticky-mobile': isMobile | async }\" data-bs-stackable=\"true\">\n <nav\n class=\"navbar it-navscroll-wrapper navbar-expand-lg\"\n [class.it-top-navscroll]=\"alignment === 'top'\"\n [class.it-bottom-navscroll]=\"alignment === 'bottom'\"\n [class.it-left-side]=\"borderPosition === 'left'\"\n [class.it-right-side]=\"borderPosition === 'right'\"\n [class.theme-dark-mobile]=\"theme === 'dark'\"\n [class.theme-dark-desktop]=\"theme === 'dark'\">\n <button\n class=\"custom-navbar-toggler\"\n type=\"button\"\n aria-controls=\"navbarNav\"\n [attr.aria-label]=\"'it.navigation.aria-label-toggle' | translate\"\n data-bs-toggle=\"navbarcollapsible\"\n data-bs-target=\"#navbarNav\"\n #toggleButtonRef>\n <span class=\"it-list\"></span>{{ selectedTitle | async }}\n </button>\n <div class=\"progress custom-navbar-progressbar\">\n <div\n class=\"progress-bar it-navscroll-progressbar\"\n role=\"progressbar\"\n [style.width.%]=\"progressBarValue | async\"\n [attr.aria-valuenow]=\"progressBarValue | async\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n </div>\n <div class=\"navbar-collapsable\" id=\"navbarNav\" tabindex=\"-1\">\n <div class=\"close-div visually-hidden\">\n <button class=\"btn close-menu\" type=\"button\"><span class=\"it-close\"></span>Chiudi</button>\n </div>\n <button type=\"button\" class=\"it-back-button btn w-100 text-start\">\n <svg class=\"icon icon-sm icon-primary align-top\">\n <use\n href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"\n xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"></use>\n </svg>\n <span>Indietro</span>\n </button>\n <div class=\"menu-wrapper\" tabindex=\"-1\">\n <div class=\"link-list-wrapper\">\n @if (headerAsAccordion) {\n <div class=\"accordion\" [id]=\"accordionId\">\n <div class=\"accordion-item\">\n <h3 class=\"accordion-header\" [id]=\"accordionId + '-heading'\">\n <button\n class=\"accordion-button\"\n [class.collapsed]=\"!accordionExpanded\"\n type=\"button\"\n data-bs-toggle=\"collapse\"\n [attr.data-bs-target]=\"'#' + accordionId + '-body'\"\n [attr.aria-expanded]=\"accordionExpanded\"\n [attr.aria-controls]=\"accordionId + '-body'\">\n {{ header }}\n </button>\n </h3>\n <div\n [id]=\"accordionId + '-body'\"\n class=\"accordion-collapse collapse\"\n [class.show]=\"accordionExpanded\"\n [attr.aria-labelledby]=\"accordionId + '-heading'\">\n <div class=\"accordion-body\">\n <it-navscroll-list-items [items]=\"items\"></it-navscroll-list-items>\n </div>\n </div>\n </div>\n </div>\n } @else {\n <h3>{{ header }}</h3>\n <div class=\"progress\">\n <div\n class=\"progress-bar it-navscroll-progressbar\"\n role=\"progressbar\"\n [style.width.%]=\"progressBarValue | async\"\n [attr.aria-valuenow]=\"progressBarValue | async\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"></div>\n </div>\n <it-navscroll-list-items [items]=\"items\"></it-navscroll-list-items>\n }\n </div>\n </div>\n </div>\n </nav>\n </div>\n </div>\n }\n <div class=\"col-12 col-lg-8 it-page-sections-container\">\n <ng-container\n *ngTemplateOutlet=\"pageSectionsTemplate ? pageSectionsTemplate : defaultPageSectionsTemplate; context: { items: items }\">\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #defaultPageSectionsTemplate let-items=\"items\">\n @for (item of items; track item.href) {\n <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: 1 }\"></ng-container>\n }\n</ng-template>\n\n<ng-template #paragraphTemplate let-item=\"item\" let-level=\"level\" let-nextLevel=\"level+1\">\n @switch (level) {\n @case (1) {\n <h2 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h2>\n }\n @case (2) {\n <h3 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h3>\n }\n @case (3) {\n <h4 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h4>\n }\n @case (4) {\n <h5 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h5>\n }\n @default {\n <h6 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h6>\n }\n }\n @if (item.html) {\n <div [innerHTML]=\"item.html\"></div>\n } @else {\n <p>{{ item.text }}</p>\n }\n @for (item of item.childs; track item.href) {\n <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: nextLevel }\"></ng-container>\n }\n</ng-template>\n", styles: [".it-navscroll-sticky{position:sticky;top:0}.it-navscroll-sticky-mobile{z-index:1020}\n"] }]
|
|
6641
6698
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
6642
6699
|
type: Input
|
|
6700
|
+
}], headerAsAccordion: [{
|
|
6701
|
+
type: Input,
|
|
6702
|
+
args: [{ transform: inputToBoolean }]
|
|
6703
|
+
}], hideNavigationOnMobile: [{
|
|
6704
|
+
type: Input,
|
|
6705
|
+
args: [{ transform: inputToBoolean }]
|
|
6706
|
+
}], accordionExpanded: [{
|
|
6707
|
+
type: Input,
|
|
6708
|
+
args: [{ transform: inputToBoolean }]
|
|
6643
6709
|
}], items: [{
|
|
6644
6710
|
type: Input
|
|
6645
6711
|
}], borderPosition: [{
|