@vality/matez 22.0.1-d9bef0b.0 → 22.0.1-e3dd6ce.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.
|
@@ -1483,7 +1483,16 @@ class ValueComponent {
|
|
|
1483
1483
|
inline = false;
|
|
1484
1484
|
emptySymbol = '―';
|
|
1485
1485
|
highlight;
|
|
1486
|
-
value$ = combineLatest([
|
|
1486
|
+
value$ = combineLatest([
|
|
1487
|
+
toObservable(this.value),
|
|
1488
|
+
toObservable(this.lazyValue),
|
|
1489
|
+
toObservable(this.lazyVisible),
|
|
1490
|
+
]).pipe(switchMap(([value, lazyValue, lazyVisible]) => {
|
|
1491
|
+
if (lazyVisible && isObservable(lazyValue)) {
|
|
1492
|
+
return lazyValue;
|
|
1493
|
+
}
|
|
1494
|
+
return of(value);
|
|
1495
|
+
}), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
1487
1496
|
valueText$ = this.value$.pipe(map((value) => runInInjectionContext(this.injector, () => valueToString(value))), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
1488
1497
|
inProgress$ = combineLatest([
|
|
1489
1498
|
toObservable(this.progress),
|
|
@@ -1510,7 +1519,7 @@ class ValueComponent {
|
|
|
1510
1519
|
});
|
|
1511
1520
|
}
|
|
1512
1521
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1513
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ValueComponent, isStandalone: true, selector: "v-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, lazyValue: { classPropertyName: "lazyValue", publicName: "lazyValue", isSignal: true, isRequired: false, transformFunction: null }, lazyVisible: { classPropertyName: "lazyVisible", publicName: "lazyVisible", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptySymbol: { classPropertyName: "emptySymbol", publicName: "emptySymbol", isSignal: false, isRequired: false, transformFunction: (v) => (v === false ? '' : typeof v === 'string' ? v : '―') }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { lazyVisible: "lazyVisibleChange" }, host: { properties: { "class.inline": "inline" } }, ngImport: i0, template: "@if (
|
|
1522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ValueComponent, isStandalone: true, selector: "v-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, lazyValue: { classPropertyName: "lazyValue", publicName: "lazyValue", isSignal: true, isRequired: false, transformFunction: null }, lazyVisible: { classPropertyName: "lazyVisible", publicName: "lazyVisible", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptySymbol: { classPropertyName: "emptySymbol", publicName: "emptySymbol", isSignal: false, isRequired: false, transformFunction: (v) => (v === false ? '' : typeof v === 'string' ? v : '―') }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { lazyVisible: "lazyVisibleChange" }, host: { properties: { "class.inline": "inline" } }, ngImport: i0, template: "@if (value$ | async; as v) {\n <div class=\"flex gap-1 items-center\">\n @if (lazyValue() && !lazyVisible()) {\n <button\n class=\"button ml-[-8px] mr-[-8px]\"\n mat-icon-button\n (click)=\"lazyVisible.set(true)\"\n >\n <mat-icon>sync</mat-icon>\n </button>\n }\n @if (v.error) {\n <mat-icon\n [matTooltip]=\"\n v.error?.['error']?.['message'] || v.error?.['message'] || (v.error | json)\n \"\n >error</mat-icon\n >\n }\n @if (v.prefix) {\n <button\n class=\"action ml-[-16px]\"\n mat-icon-button\n (click)=\"v.prefix.click ? v.prefix.click($event) : undefined\"\n >\n <mat-icon>{{ v.prefix.icon }}</mat-icon>\n </button>\n }\n <div\n [ngClass]=\"{ wrapper__action: v.click || v.link }\"\n class=\"wrapper\"\n (click)=\"click($event)\"\n >\n @if (v.template) {\n <ng-container *ngTemplateOutlet=\"v.template; context: {}\"></ng-container>\n } @else {\n @if (v.color) {\n <v-tag [color]=\"v.color\">\n <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n </v-tag>\n } @else {\n <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n }\n\n <ng-template #tooltipTemplate>\n @if (v.tooltip) {\n <span\n [matTooltip]=\"v.tooltip\"\n class=\"tooltip\"\n matTooltipClass=\"tooltip-content\"\n >\n <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n </span>\n } @else {\n <span [title]=\"v.value\">\n <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n </span>\n }\n </ng-template>\n\n <ng-template #valueTemplate>\n @switch (v.type) {\n @case ('menu') {\n <v-menu-value [value]=\"v\"></v-menu-value>\n }\n @case ('toggle') {\n <v-toggle-value [value]=\"v\"></v-toggle-value>\n }\n @default {\n @let valueText = valueText$ | async;\n @if (inProgress$ | async) {\n <v-content-loading [hiddenText]=\"valueText\"></v-content-loading>\n } @else if (valueText) {\n <span\n [ngClass]=\"{ value__click: v.click, value__link: v.link }\"\n [vHighlightSearch]=\"highlight\"\n [vHighlightText]=\"valueText\"\n vHighlight\n ></span>\n } @else if (emptySymbol) {\n <span class=\"text-[var(--mat-sys-outline)]\">{{ emptySymbol }}</span>\n }\n }\n }\n </ng-template>\n }\n\n @if (v.description) {\n <div\n [title]=\"v.description\"\n [vHighlightSearch]=\"highlight\"\n [vHighlightText]=\"v.description\"\n class=\"description text-[var(--mat-sys-outline)] text-xs\"\n vHighlight\n ></div>\n }\n </div>\n @if (v.postfix) {\n <button\n class=\"action ml-auto mr-[-16px]\"\n mat-icon-button\n (click)=\"v.postfix.click ? v.postfix.click($event) : undefined\"\n >\n <mat-icon>{{ v.postfix.icon }}</mat-icon>\n </button>\n }\n </div>\n} @else if (lazyValue() && !lazyVisible()) {\n <button class=\"button ml-[-8px]\" mat-icon-button (click)=\"lazyVisible.set(true)\">\n <mat-icon>sync</mat-icon>\n </button>\n} @else {\n <v-content-loading></v-content-loading>\n}\n", styles: [":host{cursor:default;text-align:left}.action{opacity:.1;transition:opacity .2s ease-in-out}.action:hover{opacity:1}::ng-deep .inline,::ng-deep .inline *{white-space:nowrap}.tooltip{text-decoration:underline;text-decoration-style:dotted}::ng-deep .tooltip-content{white-space:pre-line}.wrapper__action{cursor:pointer}.value__click,.value__link{color:var(--mat-sys-primary)}.value__click:hover{text-decoration:underline;text-decoration-style:dashed}.value__link:hover{text-decoration:underline}.description{overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: TagComponent, selector: "v-tag", inputs: ["color", "icon", "progress"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MenuValueComponent, selector: "v-menu-value", inputs: ["value"] }, { kind: "component", type: ContentLoadingComponent, selector: "v-content-loading", inputs: ["width", "textSize", "hiddenText"] }, { kind: "directive", type: HighlightDirective, selector: "[vHighlight]", inputs: ["vHighlightText", "vHighlightSearch"] }, { kind: "component", type: ToggleValueComponent, selector: "v-toggle-value", inputs: ["value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1514
1523
|
}
|
|
1515
1524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValueComponent, decorators: [{
|
|
1516
1525
|
type: Component,
|
|
@@ -1526,7 +1535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
1526
1535
|
MatButtonModule,
|
|
1527
1536
|
], host: {
|
|
1528
1537
|
'[class.inline]': 'inline',
|
|
1529
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (
|
|
1538
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (value$ | async; as v) {\n <div class=\"flex gap-1 items-center\">\n @if (lazyValue() && !lazyVisible()) {\n <button\n class=\"button ml-[-8px] mr-[-8px]\"\n mat-icon-button\n (click)=\"lazyVisible.set(true)\"\n >\n <mat-icon>sync</mat-icon>\n </button>\n }\n @if (v.error) {\n <mat-icon\n [matTooltip]=\"\n v.error?.['error']?.['message'] || v.error?.['message'] || (v.error | json)\n \"\n >error</mat-icon\n >\n }\n @if (v.prefix) {\n <button\n class=\"action ml-[-16px]\"\n mat-icon-button\n (click)=\"v.prefix.click ? v.prefix.click($event) : undefined\"\n >\n <mat-icon>{{ v.prefix.icon }}</mat-icon>\n </button>\n }\n <div\n [ngClass]=\"{ wrapper__action: v.click || v.link }\"\n class=\"wrapper\"\n (click)=\"click($event)\"\n >\n @if (v.template) {\n <ng-container *ngTemplateOutlet=\"v.template; context: {}\"></ng-container>\n } @else {\n @if (v.color) {\n <v-tag [color]=\"v.color\">\n <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n </v-tag>\n } @else {\n <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n }\n\n <ng-template #tooltipTemplate>\n @if (v.tooltip) {\n <span\n [matTooltip]=\"v.tooltip\"\n class=\"tooltip\"\n matTooltipClass=\"tooltip-content\"\n >\n <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n </span>\n } @else {\n <span [title]=\"v.value\">\n <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n </span>\n }\n </ng-template>\n\n <ng-template #valueTemplate>\n @switch (v.type) {\n @case ('menu') {\n <v-menu-value [value]=\"v\"></v-menu-value>\n }\n @case ('toggle') {\n <v-toggle-value [value]=\"v\"></v-toggle-value>\n }\n @default {\n @let valueText = valueText$ | async;\n @if (inProgress$ | async) {\n <v-content-loading [hiddenText]=\"valueText\"></v-content-loading>\n } @else if (valueText) {\n <span\n [ngClass]=\"{ value__click: v.click, value__link: v.link }\"\n [vHighlightSearch]=\"highlight\"\n [vHighlightText]=\"valueText\"\n vHighlight\n ></span>\n } @else if (emptySymbol) {\n <span class=\"text-[var(--mat-sys-outline)]\">{{ emptySymbol }}</span>\n }\n }\n }\n </ng-template>\n }\n\n @if (v.description) {\n <div\n [title]=\"v.description\"\n [vHighlightSearch]=\"highlight\"\n [vHighlightText]=\"v.description\"\n class=\"description text-[var(--mat-sys-outline)] text-xs\"\n vHighlight\n ></div>\n }\n </div>\n @if (v.postfix) {\n <button\n class=\"action ml-auto mr-[-16px]\"\n mat-icon-button\n (click)=\"v.postfix.click ? v.postfix.click($event) : undefined\"\n >\n <mat-icon>{{ v.postfix.icon }}</mat-icon>\n </button>\n }\n </div>\n} @else if (lazyValue() && !lazyVisible()) {\n <button class=\"button ml-[-8px]\" mat-icon-button (click)=\"lazyVisible.set(true)\">\n <mat-icon>sync</mat-icon>\n </button>\n} @else {\n <v-content-loading></v-content-loading>\n}\n", styles: [":host{cursor:default;text-align:left}.action{opacity:.1;transition:opacity .2s ease-in-out}.action:hover{opacity:1}::ng-deep .inline,::ng-deep .inline *{white-space:nowrap}.tooltip{text-decoration:underline;text-decoration-style:dotted}::ng-deep .tooltip-content{white-space:pre-line}.wrapper__action{cursor:pointer}.value__click,.value__link{color:var(--mat-sys-primary)}.value__click:hover{text-decoration:underline;text-decoration-style:dashed}.value__link:hover{text-decoration:underline}.description{overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
1530
1539
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], lazyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValue", required: false }] }], lazyVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyVisible", required: false }] }, { type: i0.Output, args: ["lazyVisibleChange"] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], inline: [{
|
|
1531
1540
|
type: Input,
|
|
1532
1541
|
args: [{ transform: booleanAttribute }]
|