@arsedizioni/ars-utils 21.2.297 → 21.2.299
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, inject, Renderer2, ElementRef, afterNextRender, Directive, output, ChangeDetectorRef, signal, ChangeDetectionStrategy, Component, Injectable, DestroyRef, viewChild, NgModule,
|
|
2
|
+
import { input, inject, Renderer2, ElementRef, afterNextRender, Directive, output, ChangeDetectorRef, signal, ChangeDetectionStrategy, Component, Injectable, DestroyRef, viewChild, NgModule, effect, Input, Optional, Self, computed, booleanAttribute, HostBinding, ViewChild, model } from '@angular/core';
|
|
3
3
|
import * as i14 from '@angular/material/paginator';
|
|
4
4
|
import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';
|
|
5
5
|
import { DialogService, OtpInputComponent, PaginatorIntl, UIService } from '@arsedizioni/ars-utils/ui';
|
|
@@ -41,6 +41,7 @@ import { MatListModule } from '@angular/material/list';
|
|
|
41
41
|
import * as i10 from '@angular/material/menu';
|
|
42
42
|
import { MatMenuModule } from '@angular/material/menu';
|
|
43
43
|
import * as i2 from '@ngbracket/ngx-layout/extended';
|
|
44
|
+
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
44
45
|
import * as i7$1 from '@angular/material/badge';
|
|
45
46
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
46
47
|
import * as i4$1 from '@angular/material/chips';
|
|
@@ -1668,9 +1669,18 @@ class ButtonSelectorComponent {
|
|
|
1668
1669
|
get value() {
|
|
1669
1670
|
return this._value;
|
|
1670
1671
|
}
|
|
1671
|
-
/** True when the control is disabled, either via `[disabled]` input or via the Angular form layer. */
|
|
1672
1672
|
get disabled() {
|
|
1673
|
-
|
|
1673
|
+
if (this.ngControl && this.ngControl.disabled != null) {
|
|
1674
|
+
return this.ngControl.disabled;
|
|
1675
|
+
}
|
|
1676
|
+
return this._disabled;
|
|
1677
|
+
}
|
|
1678
|
+
set disabled(value) {
|
|
1679
|
+
this._disabled = coerceBooleanProperty(value);
|
|
1680
|
+
if (this.focused) {
|
|
1681
|
+
this.focused = false;
|
|
1682
|
+
this.stateChanges.next();
|
|
1683
|
+
}
|
|
1674
1684
|
}
|
|
1675
1685
|
constructor(ngControl) {
|
|
1676
1686
|
this.ngControl = ngControl;
|
|
@@ -1681,10 +1691,7 @@ class ButtonSelectorComponent {
|
|
|
1681
1691
|
this.stateChanges = new Subject();
|
|
1682
1692
|
this.focused = false;
|
|
1683
1693
|
this._value = undefined;
|
|
1684
|
-
|
|
1685
|
-
this._disabledInput = input(false, { ...(ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
|
|
1686
|
-
/** @internal Internal signal tracking the current disabled state. */
|
|
1687
|
-
this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1694
|
+
this._disabled = false;
|
|
1688
1695
|
this.propagateChange = () => { };
|
|
1689
1696
|
this.propagateTouched = () => { };
|
|
1690
1697
|
this.id = `button-selector--${SystemUtils.generateUUID()}`;
|
|
@@ -1709,10 +1716,6 @@ class ButtonSelectorComponent {
|
|
|
1709
1716
|
if (this.ngControl != null) {
|
|
1710
1717
|
this.ngControl.valueAccessor = this;
|
|
1711
1718
|
}
|
|
1712
|
-
// Sync the disabled input signal into the internal disabled state signal
|
|
1713
|
-
effect(() => {
|
|
1714
|
-
this._disabled.set(this._disabledInput());
|
|
1715
|
-
});
|
|
1716
1719
|
// Pre-select the first option whenever options change and autoSelect is enabled
|
|
1717
1720
|
effect(() => {
|
|
1718
1721
|
if (this.autoSelect()) {
|
|
@@ -1759,7 +1762,7 @@ class ButtonSelectorComponent {
|
|
|
1759
1762
|
* @param isDisabled - Whether the control should be disabled.
|
|
1760
1763
|
*/
|
|
1761
1764
|
setDisabledState(isDisabled) {
|
|
1762
|
-
this._disabled
|
|
1765
|
+
this._disabled = isDisabled;
|
|
1763
1766
|
if (isDisabled && this.focused) {
|
|
1764
1767
|
this.focused = false;
|
|
1765
1768
|
this.stateChanges.next();
|
|
@@ -1801,7 +1804,7 @@ class ButtonSelectorComponent {
|
|
|
1801
1804
|
this.writeValue(undefined);
|
|
1802
1805
|
}
|
|
1803
1806
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ButtonSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ButtonSelectorComponent, isStandalone: true, selector: "button-selector", inputs: {
|
|
1807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ButtonSelectorComponent, isStandalone: true, selector: "button-selector", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelSelected: { classPropertyName: "labelSelected", publicName: "labelSelected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", selected: "selected" }, host: { properties: { "id": "id", "attr.aria-describedBy": "describedBy" } }, ngImport: i0, template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n [matMenuTriggerFor]=\"optionsMenu\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n @if(current()) {\r\n <div style=\"text-align: left;\"\r\n [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n @if(labelSelected() || label()) {\r\n <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n </div>\r\n } @else {\r\n <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n </div>\r\n }\r\n </div>\r\n } @else if(labelSelected() || label()) {\r\n <div class=\"truncated\" style=\"text-align: left;\"\r\n [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n {{labelSelected() ?? label()}}</div>\r\n }\r\n </div>\r\n <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </div>\r\n </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n @for (o of options(); track o) {\r\n <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n {{o.name}}\r\n @if(o.bag) {\r\n ({{o.bag}})\r\n }\r\n </button>\r\n }\r\n</mat-menu>", styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.DefaultShowHideDirective, selector: " [fxShow], [fxShow.print], [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl], [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl], [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg], [fxHide], [fxHide.print], [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl], [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl], [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1805
1808
|
}
|
|
1806
1809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ButtonSelectorComponent, decorators: [{
|
|
1807
1810
|
type: Component,
|
|
@@ -1814,7 +1817,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
1814
1817
|
type: Optional
|
|
1815
1818
|
}, {
|
|
1816
1819
|
type: Self
|
|
1817
|
-
}] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], selected: [{ type: i0.Output, args: ["selected"] }],
|
|
1820
|
+
}] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], selected: [{ type: i0.Output, args: ["selected"] }], disabled: [{
|
|
1821
|
+
type: Input
|
|
1822
|
+
}], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSelected", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }] } });
|
|
1818
1823
|
|
|
1819
1824
|
class ButtonToggleComponent {
|
|
1820
1825
|
constructor() {
|
|
@@ -1887,9 +1892,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
1887
1892
|
}], ctorParameters: () => [] });
|
|
1888
1893
|
|
|
1889
1894
|
class ChipsSelectorComponent {
|
|
1890
|
-
/** True when the control is disabled, either via `[disabled]` input or via the Angular form layer. */
|
|
1891
1895
|
get disabled() {
|
|
1892
|
-
|
|
1896
|
+
if (this.ngControl && this.ngControl.disabled != null) {
|
|
1897
|
+
return this.ngControl.disabled;
|
|
1898
|
+
}
|
|
1899
|
+
return this._disabled;
|
|
1900
|
+
}
|
|
1901
|
+
set disabled(value) {
|
|
1902
|
+
this._disabled = coerceBooleanProperty(value);
|
|
1903
|
+
if (this.focused) {
|
|
1904
|
+
this.focused = false;
|
|
1905
|
+
this.stateChanges.next();
|
|
1906
|
+
}
|
|
1893
1907
|
}
|
|
1894
1908
|
/** True when the label should float above the field (focused or has a value). */
|
|
1895
1909
|
get shouldLabelFloat() {
|
|
@@ -1968,10 +1982,7 @@ class ChipsSelectorComponent {
|
|
|
1968
1982
|
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1969
1983
|
/** Placeholder text shown when no value is selected. */
|
|
1970
1984
|
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1971
|
-
|
|
1972
|
-
this._disabledInput = input(false, { ...(ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
|
|
1973
|
-
/** @internal Internal signal tracking the current disabled state (updated by the form layer and the input). */
|
|
1974
|
-
this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1985
|
+
this._disabled = false;
|
|
1975
1986
|
this.id = `chips-selector--${SystemUtils.generateUUID()}`;
|
|
1976
1987
|
this.describedBy = '';
|
|
1977
1988
|
this._value = [];
|
|
@@ -1983,10 +1994,6 @@ class ChipsSelectorComponent {
|
|
|
1983
1994
|
if (this.ngControl != null) {
|
|
1984
1995
|
this.ngControl.valueAccessor = this;
|
|
1985
1996
|
}
|
|
1986
|
-
// Sync the disabled input signal into the internal disabled state signal
|
|
1987
|
-
effect(() => {
|
|
1988
|
-
this._disabled.set(this._disabledInput());
|
|
1989
|
-
});
|
|
1990
1997
|
// Notify state changes whenever required or placeholder inputs change
|
|
1991
1998
|
effect(() => {
|
|
1992
1999
|
this.required();
|
|
@@ -2093,7 +2100,7 @@ class ChipsSelectorComponent {
|
|
|
2093
2100
|
* @param isDisabled - Whether the control should be disabled.
|
|
2094
2101
|
*/
|
|
2095
2102
|
setDisabledState(isDisabled) {
|
|
2096
|
-
this._disabled
|
|
2103
|
+
this._disabled = isDisabled;
|
|
2097
2104
|
if (isDisabled && this.focused) {
|
|
2098
2105
|
this.focused = false;
|
|
2099
2106
|
this.stateChanges.next();
|
|
@@ -2137,7 +2144,7 @@ class ChipsSelectorComponent {
|
|
|
2137
2144
|
}
|
|
2138
2145
|
}
|
|
2139
2146
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ChipsSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ChipsSelectorComponent, isStandalone: true, selector: "chips-selector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedDisplayMode: { classPropertyName: "collapsedDisplayMode", publicName: "collapsedDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, collapseAt: { classPropertyName: "collapseAt", publicName: "collapseAt", isSignal: true, isRequired: false, transformFunction: null }, collapseAtContainer: { classPropertyName: "collapseAtContainer", publicName: "collapseAtContainer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, mustSelect: { classPropertyName: "mustSelect", publicName: "mustSelect", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, padAt: { classPropertyName: "padAt", publicName: "padAt", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null },
|
|
2147
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ChipsSelectorComponent, isStandalone: true, selector: "chips-selector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedDisplayMode: { classPropertyName: "collapsedDisplayMode", publicName: "collapsedDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, collapseAt: { classPropertyName: "collapseAt", publicName: "collapseAt", isSignal: true, isRequired: false, transformFunction: null }, collapseAtContainer: { classPropertyName: "collapseAtContainer", publicName: "collapseAtContainer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, mustSelect: { classPropertyName: "mustSelect", publicName: "mustSelect", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, padAt: { classPropertyName: "padAt", publicName: "padAt", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "id": "id", "class.floating": "shouldLabelFloat", "attr.aria-describedBy": "describedBy" } }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"chips-selector\">\r\n @if(containerWidth() > 0) {\r\n @if(collapsed()) {\r\n @if(collapsedDisplayMode() === 'dropdown') {\r\n <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\r\n @if(label()) {\r\n <mat-label>{{label()}}</mat-label>\r\n }\r\n <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\r\n <mat-select-trigger>\r\n @if (value && (value.length || 0) > 0) {\r\n {{value[0].shortName ?? value[0].name}}\r\n }\r\n @if (value && (value.length || 0) > 1) {\r\n <span class=\"collapsed-additional-selection\">\r\n (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\r\n </span>\r\n }\r\n </mat-select-trigger>\r\n @for (o of options(); track o) {\r\n <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\r\n {{o.name}}\r\n @if(o.bag) {\r\n ({{o.bag}})\r\n }\r\n </mat-option>\r\n }\r\n </mat-select>\r\n @if (value && (value.length || 0) > 0) {\r\n <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n } @else {\r\n <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [(ngModel)]=\"singleSelection\"\r\n name=\"value\" (selected)=\"updateValue()\"></button-selector>\r\n\r\n }\r\n } @else {\r\n <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\r\n [(ngModel)]=\"selection\" (change)=\"updateValue()\">\r\n @for (o of options(); track o; let i = $index) {\r\n <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\r\n [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\r\n o.name}}</mat-chip-option>\r\n }\r\n </mat-chip-listbox>\r\n }\r\n }\r\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i8$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ButtonSelectorComponent, selector: "button-selector", inputs: ["disabled", "width", "border", "borderRadius", "label", "labelSelected", "options", "autoSelect"], outputs: ["changed", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2141
2148
|
}
|
|
2142
2149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ChipsSelectorComponent, decorators: [{
|
|
2143
2150
|
type: Component,
|
|
@@ -2153,9 +2160,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
2153
2160
|
type: Optional
|
|
2154
2161
|
}, {
|
|
2155
2162
|
type: Self
|
|
2156
|
-
}] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], collapsedDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedDisplayMode", required: false }] }], collapseAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAt", required: false }] }], collapseAtContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAtContainer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], mustSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "mustSelect", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], padAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "padAt", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }],
|
|
2163
|
+
}] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], collapsedDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedDisplayMode", required: false }] }], collapseAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAt", required: false }] }], collapseAtContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAtContainer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], mustSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "mustSelect", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], padAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "padAt", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{
|
|
2164
|
+
type: Input
|
|
2165
|
+
}] } });
|
|
2157
2166
|
|
|
2158
2167
|
class FileInputComponent {
|
|
2168
|
+
// Initialize
|
|
2159
2169
|
static { this.nextId = 0; }
|
|
2160
2170
|
set value(value) {
|
|
2161
2171
|
this._value = value;
|
|
@@ -2163,42 +2173,50 @@ class FileInputComponent {
|
|
|
2163
2173
|
this.stateChanges.next();
|
|
2164
2174
|
this.changed.emit(this._value);
|
|
2165
2175
|
}
|
|
2166
|
-
/** The current FileInfo value. */
|
|
2167
2176
|
get value() {
|
|
2168
2177
|
return this._value;
|
|
2169
2178
|
}
|
|
2170
|
-
/** Size of the current file in bytes. */
|
|
2171
2179
|
get size() {
|
|
2172
2180
|
return this._value?.file?.size;
|
|
2173
2181
|
}
|
|
2174
|
-
/** True when the control is required (implements `MatFormFieldControl.required`). */
|
|
2175
2182
|
get required() {
|
|
2176
|
-
return this.
|
|
2183
|
+
return this._required;
|
|
2184
|
+
}
|
|
2185
|
+
set required(value) {
|
|
2186
|
+
this._required = coerceBooleanProperty(value);
|
|
2187
|
+
this.stateChanges.next();
|
|
2188
|
+
}
|
|
2189
|
+
get disabled() {
|
|
2190
|
+
if (this.ngControl && this.ngControl.disabled != null) {
|
|
2191
|
+
return this.ngControl.disabled;
|
|
2192
|
+
}
|
|
2193
|
+
return this._disabled;
|
|
2194
|
+
}
|
|
2195
|
+
set disabled(value) {
|
|
2196
|
+
this._disabled = coerceBooleanProperty(value);
|
|
2197
|
+
if (this.focused) {
|
|
2198
|
+
this.focused = false;
|
|
2199
|
+
this.stateChanges.next();
|
|
2200
|
+
}
|
|
2177
2201
|
}
|
|
2178
|
-
/** The effective placeholder label shown in the form field (implements `MatFormFieldControl.placeholder`). */
|
|
2179
2202
|
get placeholder() {
|
|
2180
2203
|
return this._placeholder();
|
|
2181
2204
|
}
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2205
|
+
set placeholder(value) {
|
|
2206
|
+
this._placeholder.set(value);
|
|
2207
|
+
this.stateChanges.next();
|
|
2185
2208
|
}
|
|
2186
|
-
/** True when no file is selected. */
|
|
2187
2209
|
get empty() {
|
|
2188
2210
|
return !this._value || !this._value.file;
|
|
2189
2211
|
}
|
|
2190
|
-
/** True when the control has validation errors and has been touched. */
|
|
2191
2212
|
get errorState() {
|
|
2192
|
-
return
|
|
2213
|
+
return this.ngControl.errors != null && this.ngControl.touched;
|
|
2193
2214
|
}
|
|
2194
|
-
/** True when the label should float above the field. */
|
|
2195
2215
|
get shouldLabelFloat() {
|
|
2196
2216
|
return this.focused || !this.empty;
|
|
2197
2217
|
}
|
|
2198
2218
|
constructor(ngControl) {
|
|
2199
2219
|
this.ngControl = ngControl;
|
|
2200
|
-
/** Reference to the hidden native file input element. */
|
|
2201
|
-
this.__file = viewChild.required('__file');
|
|
2202
2220
|
this.renderer = inject(Renderer2);
|
|
2203
2221
|
this.uiService = inject(UIService);
|
|
2204
2222
|
this.stateChanges = new Subject();
|
|
@@ -2208,25 +2226,16 @@ class FileInputComponent {
|
|
|
2208
2226
|
this.canCapture = signal(false, ...(ngDevMode ? [{ debugName: "canCapture" }] : /* istanbul ignore next */ []));
|
|
2209
2227
|
/** Size in MB of the currently selected file. */
|
|
2210
2228
|
this.fileSize = signal(0, ...(ngDevMode ? [{ debugName: "fileSize" }] : /* istanbul ignore next */ []));
|
|
2211
|
-
/** Internal placeholder text, derived from the input and camera availability. */
|
|
2212
2229
|
this._placeholder = signal('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : /* istanbul ignore next */ []));
|
|
2213
2230
|
this._value = new FileInfo();
|
|
2214
|
-
|
|
2215
|
-
this.
|
|
2231
|
+
this._required = false;
|
|
2232
|
+
this._disabled = false;
|
|
2216
2233
|
this.maxSizeMb = input(5, ...(ngDevMode ? [{ debugName: "maxSizeMb" }] : /* istanbul ignore next */ []));
|
|
2217
2234
|
this.minSizeMb = input(0, ...(ngDevMode ? [{ debugName: "minSizeMb" }] : /* istanbul ignore next */ []));
|
|
2218
2235
|
this.isNew = input(false, ...(ngDevMode ? [{ debugName: "isNew" }] : /* istanbul ignore next */ []));
|
|
2219
2236
|
this.canPreview = input(false, ...(ngDevMode ? [{ debugName: "canPreview" }] : /* istanbul ignore next */ []));
|
|
2220
2237
|
this.appearance = input(this.uiService.appearance(), ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2221
2238
|
this.accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
2222
|
-
/** @internal Input signal for the required state (bound via the `[required]` attribute). */
|
|
2223
|
-
this._requiredInput = input(false, { ...(ngDevMode ? { debugName: "_requiredInput" } : /* istanbul ignore next */ {}), alias: 'required', transform: booleanAttribute });
|
|
2224
|
-
/** @internal Input signal for the placeholder text (bound via the `[placeholder]` attribute). */
|
|
2225
|
-
this._placeholderInput = input('', { ...(ngDevMode ? { debugName: "_placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
|
|
2226
|
-
/** @internal Input signal for the disabled state (bound via the `[disabled]` attribute). */
|
|
2227
|
-
this._disabledInput = input(false, { ...(ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
|
|
2228
|
-
/** @internal Internal signal tracking the current disabled state. */
|
|
2229
|
-
this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
2230
2239
|
this.id = `${this.controlType}-${FileInputComponent.nextId++}`;
|
|
2231
2240
|
this.describedBy = '';
|
|
2232
2241
|
this.changed = output();
|
|
@@ -2237,35 +2246,12 @@ class FileInputComponent {
|
|
|
2237
2246
|
if (this.ngControl != null) {
|
|
2238
2247
|
this.ngControl.valueAccessor = this;
|
|
2239
2248
|
}
|
|
2240
|
-
// Sync the disabled input into the internal disabled signal
|
|
2241
|
-
effect(() => {
|
|
2242
|
-
this._disabled.set(this._disabledInput());
|
|
2243
|
-
});
|
|
2244
|
-
// Notify state changes when required changes
|
|
2245
|
-
effect(() => {
|
|
2246
|
-
this._requiredInput();
|
|
2247
|
-
this.stateChanges.next();
|
|
2248
|
-
});
|
|
2249
|
-
// Sync placeholder input into internal signal; setupDevices may override it when empty
|
|
2250
|
-
effect(() => {
|
|
2251
|
-
const p = this._placeholderInput();
|
|
2252
|
-
if (p) {
|
|
2253
|
-
this._placeholder.set(p);
|
|
2254
|
-
}
|
|
2255
|
-
});
|
|
2256
|
-
// Detect camera availability and set the default placeholder after the first render
|
|
2257
|
-
afterNextRender(() => {
|
|
2258
|
-
this.setupDevices();
|
|
2259
|
-
});
|
|
2260
2249
|
}
|
|
2261
|
-
|
|
2262
|
-
this.
|
|
2263
|
-
}
|
|
2264
|
-
ngDoCheck() {
|
|
2265
|
-
this.updateInputDirtyCheck();
|
|
2250
|
+
async ngOnInit() {
|
|
2251
|
+
await this.setupDevices();
|
|
2266
2252
|
}
|
|
2267
2253
|
/**
|
|
2268
|
-
* Detects camera availability and
|
|
2254
|
+
* Detects camera availability and updates the placeholder accordingly.
|
|
2269
2255
|
*/
|
|
2270
2256
|
async setupDevices() {
|
|
2271
2257
|
this.canCapture.set(false);
|
|
@@ -2278,13 +2264,18 @@ class FileInputComponent {
|
|
|
2278
2264
|
}
|
|
2279
2265
|
catch { }
|
|
2280
2266
|
}
|
|
2281
|
-
|
|
2282
|
-
if (!current || current === 'Seleziona file') {
|
|
2267
|
+
if (!this.placeholder || this.placeholder === 'Seleziona file') {
|
|
2283
2268
|
this._placeholder.set(this.canCapture()
|
|
2284
2269
|
? 'Seleziona file o acquisisci con fotocamera'
|
|
2285
2270
|
: 'Seleziona file');
|
|
2286
2271
|
}
|
|
2287
2272
|
}
|
|
2273
|
+
ngOnDestroy() {
|
|
2274
|
+
this.stateChanges.complete();
|
|
2275
|
+
}
|
|
2276
|
+
ngDoCheck() {
|
|
2277
|
+
this.updateInputDirtyCheck();
|
|
2278
|
+
}
|
|
2288
2279
|
/**
|
|
2289
2280
|
* Writes a new value to the component (called by the form layer).
|
|
2290
2281
|
* @param value - The new file info to display.
|
|
@@ -2314,15 +2305,10 @@ class FileInputComponent {
|
|
|
2314
2305
|
this.describedBy = ids.join(' ');
|
|
2315
2306
|
}
|
|
2316
2307
|
/**
|
|
2317
|
-
* Updates the disabled state
|
|
2308
|
+
* Updates the disabled state of the underlying native element.
|
|
2318
2309
|
* @param isDisabled - Whether the control should be disabled.
|
|
2319
2310
|
*/
|
|
2320
2311
|
setDisabledState(isDisabled) {
|
|
2321
|
-
this._disabled.set(isDisabled);
|
|
2322
|
-
if (isDisabled && this.focused) {
|
|
2323
|
-
this.focused = false;
|
|
2324
|
-
this.stateChanges.next();
|
|
2325
|
-
}
|
|
2326
2312
|
if (!SystemUtils.isBrowser())
|
|
2327
2313
|
return;
|
|
2328
2314
|
const elem = document.getElementById(this.id);
|
|
@@ -2367,7 +2353,7 @@ class FileInputComponent {
|
|
|
2367
2353
|
(!this.maxSizeMb() || fileSizeMb <= this.maxSizeMb()) &&
|
|
2368
2354
|
(!this.minSizeMb() || fileSizeMb >= this.minSizeMb());
|
|
2369
2355
|
this.writeValue(fileInfo);
|
|
2370
|
-
this.fileName
|
|
2356
|
+
this.fileName = f.name;
|
|
2371
2357
|
this.fileSize.set(Math.round(fileSizeMb));
|
|
2372
2358
|
}
|
|
2373
2359
|
}
|
|
@@ -2383,13 +2369,13 @@ class FileInputComponent {
|
|
|
2383
2369
|
*/
|
|
2384
2370
|
clearFile() {
|
|
2385
2371
|
if (this.hasFile()) {
|
|
2386
|
-
this.fileName
|
|
2372
|
+
this.fileName = undefined;
|
|
2387
2373
|
this.fileSize.set(0);
|
|
2388
2374
|
const fi = new FileInfo();
|
|
2389
2375
|
fi.file = undefined;
|
|
2390
2376
|
fi.valid = !this.required;
|
|
2391
2377
|
this.writeValue(fi);
|
|
2392
|
-
this.__file
|
|
2378
|
+
this.__file.nativeElement.value = '';
|
|
2393
2379
|
}
|
|
2394
2380
|
}
|
|
2395
2381
|
/**
|
|
@@ -2407,21 +2393,36 @@ class FileInputComponent {
|
|
|
2407
2393
|
this.preview.emit();
|
|
2408
2394
|
}
|
|
2409
2395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: {
|
|
2396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: false, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, minSizeMb: { classPropertyName: "minSizeMb", publicName: "minSizeMb", isSignal: true, isRequired: false, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, canPreview: { classPropertyName: "canPreview", publicName: "canPreview", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", download: "download", preview: "preview" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedBy": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: FileInputComponent }], viewQueries: [{ propertyName: "__file", first: true, predicate: ["__file"], descendants: true }], ngImport: i0, template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n <mat-label>{{placeholder}}</mat-label>\r\n <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n <input name=\"_fileName\" #_fileName=\"ngModel\" [(ngModel)]=\"fileName\" [id]=\"id\" matInput readonly [required]=\"required\"\r\n fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n @if (hasFile()) {\r\n <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (!disabled) {\r\n <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew() && canPreview()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n <mat-icon>preview</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n <mat-icon>save_alt</mat-icon>\r\n </button>\r\n }\r\n @if (hasFile() && fileSize() > 0) {\r\n <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n }\r\n @if (hasFile() && fileSize() == 0) {\r\n <mat-hint align=\"start\">\r\n > 1 MB</mat-hint>\r\n } @if (maxSizeMb()) {\r\n <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n </mat-hint>\r\n }\r\n @if (_fileName.invalid && !hasFile()) {\r\n <mat-error>Obbligatorio.</mat-error>\r\n }\r\n @if (_fileName.invalid && hasFile()) {\r\n <mat-error>Dimensione non consentita.</mat-error>\r\n }\r\n</mat-form-field>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FileSizeValidatorDirective, selector: "[fileSize]", inputs: ["maxSizeMb", "minSizeMb", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2411
2397
|
}
|
|
2412
2398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2413
2399
|
type: Component,
|
|
2414
2400
|
args: [{ selector: 'file-input', providers: [{ provide: MatFormFieldControl, useExisting: FileInputComponent }], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, MatInputModule, FormsModule, FileSizeValidatorDirective, MatButtonModule,
|
|
2415
|
-
MatIconModule, MatTooltipModule],
|
|
2416
|
-
'[id]': 'id',
|
|
2417
|
-
'[class.floating]': 'shouldLabelFloat',
|
|
2418
|
-
'[attr.aria-describedBy]': 'describedBy',
|
|
2419
|
-
}, template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n <mat-label>{{_placeholder()}}</mat-label>\r\n <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n <input name=\"_fileName\" #_fileName=\"ngModel\" [ngModel]=\"fileName()\" (ngModelChange)=\"fileName.set($event)\"\r\n [id]=\"id\" matInput readonly [required]=\"required\"\r\n fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n @if (hasFile()) {\r\n <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (!disabled) {\r\n <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew() && canPreview()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n <mat-icon>preview</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n <mat-icon>save_alt</mat-icon>\r\n </button>\r\n }\r\n @if (hasFile() && fileSize() > 0) {\r\n <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n }\r\n @if (hasFile() && fileSize() == 0) {\r\n <mat-hint align=\"start\">\r\n > 1 MB</mat-hint>\r\n } @if (maxSizeMb()) {\r\n <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n </mat-hint>\r\n }\r\n @if (_fileName.invalid && !hasFile()) {\r\n <mat-error>Obbligatorio.</mat-error>\r\n }\r\n @if (_fileName.invalid && hasFile()) {\r\n <mat-error>Dimensione non consentita.</mat-error>\r\n }\r\n</mat-form-field>" }]
|
|
2401
|
+
MatIconModule, MatTooltipModule], template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n <mat-label>{{placeholder}}</mat-label>\r\n <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n <input name=\"_fileName\" #_fileName=\"ngModel\" [(ngModel)]=\"fileName\" [id]=\"id\" matInput readonly [required]=\"required\"\r\n fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n @if (hasFile()) {\r\n <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (!disabled) {\r\n <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew() && canPreview()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n <mat-icon>preview</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n <mat-icon>save_alt</mat-icon>\r\n </button>\r\n }\r\n @if (hasFile() && fileSize() > 0) {\r\n <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n }\r\n @if (hasFile() && fileSize() == 0) {\r\n <mat-hint align=\"start\">\r\n > 1 MB</mat-hint>\r\n } @if (maxSizeMb()) {\r\n <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n </mat-hint>\r\n }\r\n @if (_fileName.invalid && !hasFile()) {\r\n <mat-error>Obbligatorio.</mat-error>\r\n }\r\n @if (_fileName.invalid && hasFile()) {\r\n <mat-error>Dimensione non consentita.</mat-error>\r\n }\r\n</mat-form-field>" }]
|
|
2420
2402
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2421
2403
|
type: Optional
|
|
2422
2404
|
}, {
|
|
2423
2405
|
type: Self
|
|
2424
|
-
}] }], propDecorators: { __file: [{
|
|
2406
|
+
}] }], propDecorators: { __file: [{
|
|
2407
|
+
type: ViewChild,
|
|
2408
|
+
args: ['__file']
|
|
2409
|
+
}], required: [{
|
|
2410
|
+
type: Input
|
|
2411
|
+
}], disabled: [{
|
|
2412
|
+
type: Input
|
|
2413
|
+
}], placeholder: [{
|
|
2414
|
+
type: Input
|
|
2415
|
+
}], fileName: [{
|
|
2416
|
+
type: Input
|
|
2417
|
+
}], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], minSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSizeMb", required: false }] }], isNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNew", required: false }] }], canPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPreview", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], id: [{
|
|
2418
|
+
type: HostBinding
|
|
2419
|
+
}], shouldLabelFloat: [{
|
|
2420
|
+
type: HostBinding,
|
|
2421
|
+
args: ['class.floating']
|
|
2422
|
+
}], describedBy: [{
|
|
2423
|
+
type: HostBinding,
|
|
2424
|
+
args: ['attr.aria-describedBy']
|
|
2425
|
+
}], changed: [{ type: i0.Output, args: ["changed"] }], download: [{ type: i0.Output, args: ["download"] }], preview: [{ type: i0.Output, args: ["preview"] }] } });
|
|
2425
2426
|
|
|
2426
2427
|
class FilePreviewComponent {
|
|
2427
2428
|
constructor() {
|