@arsedizioni/ars-utils 18.3.31 → 18.3.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/ui.application/ui/components/button-selector/button-selector.component.mjs +8 -8
- package/esm2022/ui.application/ui/components/chips-selector/chips-selector.component.mjs +16 -33
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs +20 -37
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs.map +1 -1
- package/package.json +1 -1
- package/ui.application/ui/components/button-selector/button-selector.component.d.ts +1 -1
- package/ui.application/ui/components/chips-selector/chips-selector.component.d.ts +3 -6
|
@@ -2038,7 +2038,7 @@ class ButtonSelectorComponent {
|
|
|
2038
2038
|
this.propagateChange(this._value);
|
|
2039
2039
|
this.stateChanges.next();
|
|
2040
2040
|
this.changed.emit(this._value);
|
|
2041
|
-
this.current
|
|
2041
|
+
this.current.set(this._value);
|
|
2042
2042
|
}
|
|
2043
2043
|
get value() {
|
|
2044
2044
|
return this._value;
|
|
@@ -2070,13 +2070,13 @@ class ButtonSelectorComponent {
|
|
|
2070
2070
|
this.id = `button-selector--${SystemUtils.generateUUID()}`;
|
|
2071
2071
|
this.describedBy = '';
|
|
2072
2072
|
this.renderer = inject(Renderer2);
|
|
2073
|
-
this.current = null;
|
|
2073
|
+
this.current = signal(null);
|
|
2074
2074
|
this.width = input(-1);
|
|
2075
2075
|
this.border = input(-1);
|
|
2076
2076
|
this.borderRadius = input("9999px");
|
|
2077
2077
|
this.label = input(null);
|
|
2078
2078
|
this.labelSelected = input(null);
|
|
2079
|
-
this.options = input(
|
|
2079
|
+
this.options = input([]);
|
|
2080
2080
|
this.autoSelect = input(false);
|
|
2081
2081
|
if (this.ngControl != null) {
|
|
2082
2082
|
this.ngControl.valueAccessor = this;
|
|
@@ -2086,7 +2086,7 @@ class ButtonSelectorComponent {
|
|
|
2086
2086
|
if (this.autoSelect()) {
|
|
2087
2087
|
const options = this.options();
|
|
2088
2088
|
if (options && options.length > 0 && options[0].value) {
|
|
2089
|
-
this.current
|
|
2089
|
+
this.current.set(options[0]);
|
|
2090
2090
|
}
|
|
2091
2091
|
}
|
|
2092
2092
|
}
|
|
@@ -2140,12 +2140,12 @@ class ButtonSelectorComponent {
|
|
|
2140
2140
|
this.writeValue(null);
|
|
2141
2141
|
}
|
|
2142
2142
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ButtonSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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": "this.id", "attr.aria-describedBy": "this.describedBy" } }, ngImport: i0, template: "<button mat-stroked-button class=\"menu-selector-button\" [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'border-radius': borderRadius(),\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\r\n}\" [attr.aria-label]=\"label()\" [matMenuTriggerFor]=\"optionsMenu\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n @if(current) {\r\n <div class=\"truncated\" style=\"text-align: left;\"\r\n [ngStyle]=\"{'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')}\">\r\n <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n <div fxHide.xs class=\"small\" >{{current
|
|
2143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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": "this.id", "attr.aria-describedBy": "this.describedBy" } }, ngImport: i0, template: "<button mat-stroked-button class=\"menu-selector-button\" [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'border-radius': borderRadius(),\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\r\n}\" [attr.aria-label]=\"label()\" [matMenuTriggerFor]=\"optionsMenu\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n @if(current()) {\r\n <div class=\"truncated\" style=\"text-align: left;\"\r\n [ngStyle]=\"{'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')}\">\r\n <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n <div fxHide.xs class=\"small\" >{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\"><div>{{current()?.shortName ?? current()?.name ?? ''}}</div></div>\r\n </div>\r\n } @else {\r\n <div class=\"truncated\" style=\"text-align: left;\"\r\n [ngStyle]=\"{'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')}\">\r\n {{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\" xPosition=\"before\">\r\n @for (o of options(); track $index) {\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}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.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[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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 }); }
|
|
2144
2144
|
}
|
|
2145
2145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ButtonSelectorComponent, decorators: [{
|
|
2146
2146
|
type: Component,
|
|
2147
2147
|
args: [{ selector: 'button-selector', standalone: true, imports: [NgStyle, NgClass, FlexLayoutModule, MatIconModule, MatButtonModule,
|
|
2148
|
-
MatMenuModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-stroked-button class=\"menu-selector-button\" [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'border-radius': borderRadius(),\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\r\n}\" [attr.aria-label]=\"label()\" [matMenuTriggerFor]=\"optionsMenu\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n @if(current) {\r\n <div class=\"truncated\" style=\"text-align: left;\"\r\n [ngStyle]=\"{'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')}\">\r\n <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n <div fxHide.xs class=\"small\" >{{current
|
|
2148
|
+
MatMenuModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-stroked-button class=\"menu-selector-button\" [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'border-radius': borderRadius(),\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\r\n}\" [attr.aria-label]=\"label()\" [matMenuTriggerFor]=\"optionsMenu\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n @if(current()) {\r\n <div class=\"truncated\" style=\"text-align: left;\"\r\n [ngStyle]=\"{'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')}\">\r\n <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n <div fxHide.xs class=\"small\" >{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\"><div>{{current()?.shortName ?? current()?.name ?? ''}}</div></div>\r\n </div>\r\n } @else {\r\n <div class=\"truncated\" style=\"text-align: left;\"\r\n [ngStyle]=\"{'min-width': width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')}\">\r\n {{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\" xPosition=\"before\">\r\n @for (o of options(); track $index) {\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}\n"] }]
|
|
2149
2149
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2150
2150
|
type: Optional
|
|
2151
2151
|
}, {
|
|
@@ -2171,23 +2171,17 @@ class ChipsSelectorComponent {
|
|
|
2171
2171
|
if (this.changesEnabled) {
|
|
2172
2172
|
this.changed.emit(this._value);
|
|
2173
2173
|
}
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
if (this._value?.findIndex((x) => x.value === n.value) !== -1) {
|
|
2179
|
-
this.selection.push(n);
|
|
2180
|
-
}
|
|
2181
|
-
});
|
|
2182
|
-
}
|
|
2183
|
-
}
|
|
2184
|
-
else {
|
|
2185
|
-
(this.options() ?? []).forEach(n => {
|
|
2174
|
+
this.selection = [];
|
|
2175
|
+
this.singleSelection = null;
|
|
2176
|
+
if (this._value) {
|
|
2177
|
+
this.options().forEach(n => {
|
|
2186
2178
|
if (this._value?.findIndex((x) => x.value === n.value) !== -1) {
|
|
2187
|
-
this.selection
|
|
2188
|
-
return;
|
|
2179
|
+
this.selection.push(n);
|
|
2189
2180
|
}
|
|
2190
2181
|
});
|
|
2182
|
+
if (this.selection.length > 0) {
|
|
2183
|
+
this.singleSelection = this.selection[0];
|
|
2184
|
+
}
|
|
2191
2185
|
}
|
|
2192
2186
|
}
|
|
2193
2187
|
get value() {
|
|
@@ -2239,12 +2233,12 @@ class ChipsSelectorComponent {
|
|
|
2239
2233
|
this.unsubscribe = new Subject();
|
|
2240
2234
|
this.changeDetector = inject(ChangeDetectorRef);
|
|
2241
2235
|
this.changesEnabled = false;
|
|
2242
|
-
this.options = input(
|
|
2236
|
+
this.options = input([]);
|
|
2243
2237
|
this.collapsedWidth = input(-1);
|
|
2244
2238
|
this.collapsedDisplayMode = input('dropdown');
|
|
2245
2239
|
this.collapseAt = input(-1);
|
|
2246
2240
|
this.collapseAtContainer = input(false);
|
|
2247
|
-
this.label = input(
|
|
2241
|
+
this.label = input('');
|
|
2248
2242
|
this.multiple = input(false);
|
|
2249
2243
|
this.mode = input('dinamyc');
|
|
2250
2244
|
this.collapsed = computed(() => {
|
|
@@ -2261,6 +2255,8 @@ class ChipsSelectorComponent {
|
|
|
2261
2255
|
this.id = `chips-selector--${SystemUtils.generateUUID()}`;
|
|
2262
2256
|
this.describedBy = '';
|
|
2263
2257
|
this.renderer = inject(Renderer2);
|
|
2258
|
+
this.selection = [];
|
|
2259
|
+
this.singleSelection = null;
|
|
2264
2260
|
if (this.ngControl != null) {
|
|
2265
2261
|
this.ngControl.valueAccessor = this;
|
|
2266
2262
|
}
|
|
@@ -2304,19 +2300,6 @@ class ChipsSelectorComponent {
|
|
|
2304
2300
|
}, 100);
|
|
2305
2301
|
}
|
|
2306
2302
|
}
|
|
2307
|
-
/**
|
|
2308
|
-
* Update current value with a little delay
|
|
2309
|
-
*/
|
|
2310
|
-
updateValue() {
|
|
2311
|
-
setTimeout(() => {
|
|
2312
|
-
if (!this.multiple() || (this.collapsed() && this.collapsedDisplayMode() === "button")) {
|
|
2313
|
-
this.writeValue([this.selection]);
|
|
2314
|
-
}
|
|
2315
|
-
else {
|
|
2316
|
-
this.writeValue(this.selection);
|
|
2317
|
-
}
|
|
2318
|
-
}, 250);
|
|
2319
|
-
}
|
|
2320
2303
|
writeValue(value) {
|
|
2321
2304
|
if (this.value !== value) {
|
|
2322
2305
|
this.value = value;
|
|
@@ -2370,14 +2353,14 @@ class ChipsSelectorComponent {
|
|
|
2370
2353
|
}
|
|
2371
2354
|
}
|
|
2372
2355
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ChipsSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2373
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, outputs: { changed: "changed" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedBy": "this.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 [ngStyle]=\"{'min-width': collapsedWidth() > 0 ? collapsedWidth()+'.px' : '100%'}\"\r\n subscriptSizing=\"dynamic\">\r\n @if(label()) {\r\n <mat-label>{{label()}}</mat-label>\r\n }\r\n <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"
|
|
2356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, outputs: { changed: "changed" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedBy": "this.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 [ngStyle]=\"{'min-width': collapsedWidth() > 0 ? collapsedWidth()+'.px' : '100%'}\"\r\n subscriptSizing=\"dynamic\">\r\n @if(label()) {\r\n <mat-label>{{label()}}</mat-label>\r\n }\r\n <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"writeValue(multiple() ? selection : [selection])\">\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.value) {\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)=\"writeValue([singleSelection])\"></button-selector>\r\n\r\n }\r\n } @else {\r\n <mat-chip-listbox [multiple]=\"multiple()\" [(ngModel)]=\"selection\" (change)=\"writeValue(multiple() ? selection : [selection])\">\r\n @for (o of options(); track o.value) {\r\n <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.bagInfo ?? ''\" [value]=\"o\" [disabled]=\"o.disabled\">{{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}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { 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: i4$1.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6$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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i9$2.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 }); }
|
|
2374
2357
|
}
|
|
2375
2358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ChipsSelectorComponent, decorators: [{
|
|
2376
2359
|
type: Component,
|
|
2377
2360
|
args: [{ selector: 'chips-selector', standalone: true, imports: [NgStyle, NgClass, FlexLayoutModule, FormsModule, MatFormFieldModule, MatSelectModule,
|
|
2378
2361
|
MatChipsModule, MatIconModule, MatButtonModule, MatBadgeModule, MatTooltipModule,
|
|
2379
2362
|
ButtonSelectorComponent
|
|
2380
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, 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 [ngStyle]=\"{'min-width': collapsedWidth() > 0 ? collapsedWidth()+'.px' : '100%'}\"\r\n subscriptSizing=\"dynamic\">\r\n @if(label()) {\r\n <mat-label>{{label()}}</mat-label>\r\n }\r\n <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"
|
|
2363
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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 [ngStyle]=\"{'min-width': collapsedWidth() > 0 ? collapsedWidth()+'.px' : '100%'}\"\r\n subscriptSizing=\"dynamic\">\r\n @if(label()) {\r\n <mat-label>{{label()}}</mat-label>\r\n }\r\n <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"writeValue(multiple() ? selection : [selection])\">\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.value) {\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)=\"writeValue([singleSelection])\"></button-selector>\r\n\r\n }\r\n } @else {\r\n <mat-chip-listbox [multiple]=\"multiple()\" [(ngModel)]=\"selection\" (change)=\"writeValue(multiple() ? selection : [selection])\">\r\n @for (o of options(); track o.value) {\r\n <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.bagInfo ?? ''\" [value]=\"o\" [disabled]=\"o.disabled\">{{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}\n"] }]
|
|
2381
2364
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2382
2365
|
type: Optional
|
|
2383
2366
|
}, {
|