xaml-ui 1.0.12 → 1.0.14

package/fesm2022/xaml-ui.mjs

@@ -1921,6 +1921,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['xaml-dialog-presenter']
             }] } });
 
+class TextBlockComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.FontWeight = 'Normal';
+        this.TextAlignment = 'Left';
+        this.TextTrimming = 'None';
+        this.TextWrapping = 'NoWrap';
+    }
+    get width() {
+        if (this.Width !== undefined)
+            return this.Width;
+        return this.HorizontalAlignment === 'Stretch' || this.TextTrimming !== 'None' ? undefined : 'min-content';
+    }
+    get minWidth() {
+        if (this.MinWidth !== undefined)
+            return this.MinWidth;
+        return this.MaxWidth === undefined && this.HorizontalAlignment === 'Stretch' && this.TextTrimming === 'None' ? 'min-content' : undefined;
+    }
+    get fontWeight() {
+        return TextBlockComponent.ToFontWeight(this.FontWeight);
+    }
+    static ToFontWeight(value) {
+        switch (value) {
+            case 'Black':
+                return 900;
+            case 'Bold':
+                return 700;
+            case 'ExtraBlack':
+                return 950;
+            case 'ExtraBold':
+                return 800;
+            case 'ExtraLight':
+                return 200;
+            case 'Light':
+                return 300;
+            case 'Medium':
+                return 500;
+            case 'Normal':
+                return 400;
+            case 'SemiBold':
+                return 600;
+            case 'SemiLight':
+                return 350;
+            case 'Thin':
+                return 100;
+        }
+    }
+    get userSelect() {
+        return this.IsTextSelectionEnabled === 'True' ? 'text' : 'none';
+    }
+    get textDecorationLine() {
+        switch (this.TextDecorations) {
+            case 'None':
+                return 'none';
+            case 'Strikethrough':
+                return 'line-through';
+            case 'Underline':
+                return 'underline';
+            default:
+                return undefined;
+        }
+    }
+    get textOverflow() {
+        switch (this.TextTrimming) {
+            case 'None':
+            case 'Clip':
+                return 'clip';
+            case 'CharacterEllipsis':
+                return 'Ellipsis';
+            default:
+                return undefined;
+        }
+    }
+    get whiteSpace() {
+        switch (this.TextWrapping) {
+            case 'NoWrap':
+                return 'nowrap';
+            case 'Wrap':
+                return 'pre-line';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBlockComponent, isStandalone: true, selector: "TextBlock", inputs: { FontFamily: "FontFamily", Text: "Text", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Foreground: "Foreground", TextAlignment: "TextAlignment", IsTextSelectionEnabled: "IsTextSelectionEnabled", TextDecorations: "TextDecorations", TextTrimming: "TextTrimming", TextWrapping: "TextWrapping" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.text-align": "this.TextAlignment", "style.font-weight": "this.fontWeight", "style.user-select": "this.userSelect", "style.text-decoration-line": "this.textDecorationLine", "style.text-overflow": "this.textOverflow", "style.white-space": "this.whiteSpace" } }, usesInheritance: true, ngImport: i0, template: `<ng-container>
+    <ng-content *ngIf="Text === undefined"/>
+    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
+  </ng-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TextBlock',
+                    imports: [CommonModule],
+                    template: `<ng-container>
+    <ng-content *ngIf="Text === undefined"/>
+    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
+  </ng-container>`
+                }]
+        }], propDecorators: { FontFamily: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-family']
+            }], Text: [{
+                type: Input
+            }], FontSize: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-size']
+            }], FontStyle: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-style']
+            }], FontWeight: [{
+                type: Input
+            }], Foreground: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.color']
+            }], TextAlignment: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.text-align']
+            }], IsTextSelectionEnabled: [{
+                type: Input
+            }], TextDecorations: [{
+                type: Input
+            }], TextTrimming: [{
+                type: Input
+            }], TextWrapping: [{
+                type: Input
+            }], fontWeight: [{
+                type: HostBinding,
+                args: ['style.font-weight']
+            }], userSelect: [{
+                type: HostBinding,
+                args: ['style.user-select']
+            }], textDecorationLine: [{
+                type: HostBinding,
+                args: ['style.text-decoration-line']
+            }], textOverflow: [{
+                type: HostBinding,
+                args: ['style.text-overflow']
+            }], whiteSpace: [{
+                type: HostBinding,
+                args: ['style.white-space']
+            }] } });
+
 var ContentDialogResult;
 (function (ContentDialogResult) {
     ContentDialogResult[ContentDialogResult["None"] = 0] = "None";
@@ -1981,7 +2132,7 @@ class ContentDialog extends Dialog {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ContentDialog, isStandalone: true, selector: "ContentDialog", inputs: { Title: "Title", PrimaryButtonText: "PrimaryButtonText", IsPrimaryButtonEnabled: "IsPrimaryButtonEnabled", SecondaryButtonText: "SecondaryButtonText", IsSecondaryButtonEnabled: "IsSecondaryButtonEnabled", CloseButtonText: "CloseButtonText", Content: "Content", DefaultButton: "DefaultButton" }, outputs: { PrimaryButtonClicked: "PrimaryButtonClicked", SecondaryButtonClicked: "SecondaryButtonClicked", CloseButtonClicked: "CloseButtonClicked" }, usesInheritance: true, ngImport: i0, template: `<ng-template #template>
     <DialogPresenter>
       <div Header>{{Title}}</div>
-      {{Content}}
+      <TextBlock TextWrapping="Wrap">{{Content}}</TextBlock>
       <ng-content/>
       <Grid RowDefinitions="auto" Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
         <Button *ngIf="PrimaryButtonText !== undefined" [IsEnabled]="IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{PrimaryButtonText}}</Button>
@@ -1989,14 +2140,14 @@ class ContentDialog extends Dialog {
         <Button *ngIf="CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{CloseButtonText}}</Button>
       </Grid>
     </DialogPresenter>
-  </ng-template>`, isInline: true, styles: [""], dependencies: [{ kind: "component", type: DialogPresenter, selector: "DialogPresenter", inputs: ["IsVisible"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  </ng-template>`, isInline: true, styles: [""], dependencies: [{ kind: "component", type: DialogPresenter, selector: "DialogPresenter", inputs: ["IsVisible"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContentDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ContentDialog', template: `<ng-template #template>
     <DialogPresenter>
       <div Header>{{Title}}</div>
-      {{Content}}
+      <TextBlock TextWrapping="Wrap">{{Content}}</TextBlock>
       <ng-content/>
       <Grid RowDefinitions="auto" Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
         <Button *ngIf="PrimaryButtonText !== undefined" [IsEnabled]="IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{PrimaryButtonText}}</Button>
@@ -2004,7 +2155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
         <Button *ngIf="CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{CloseButtonText}}</Button>
       </Grid>
     </DialogPresenter>
-  </ng-template>`, imports: [DialogPresenter, GridModule, ButtonComponent, CommonModule] }]
+  </ng-template>`, imports: [DialogPresenter, GridModule, ButtonComponent, CommonModule, TextBlockComponent] }]
         }], propDecorators: { Title: [{
                 type: Input
             }], PrimaryButtonText: [{
@@ -2127,157 +2278,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }], ctorParameters: () => [{ type: ItemContainerComponent }, { type: i0.ViewContainerRef }] });
 
-class TextBlockComponent extends FrameworkElementComponent {
-    constructor() {
-        super(...arguments);
-        this.FontWeight = 'Normal';
-        this.TextAlignment = 'Left';
-        this.TextTrimming = 'None';
-        this.TextWrapping = 'NoWrap';
-    }
-    get width() {
-        if (this.Width !== undefined)
-            return this.Width;
-        return this.HorizontalAlignment === 'Stretch' || this.TextTrimming !== 'None' ? undefined : 'min-content';
-    }
-    get minWidth() {
-        if (this.MinWidth !== undefined)
-            return this.MinWidth;
-        return this.MaxWidth === undefined && this.HorizontalAlignment === 'Stretch' && this.TextTrimming === 'None' ? 'min-content' : undefined;
-    }
-    get fontWeight() {
-        return TextBlockComponent.ToFontWeight(this.FontWeight);
-    }
-    static ToFontWeight(value) {
-        switch (value) {
-            case 'Black':
-                return 900;
-            case 'Bold':
-                return 700;
-            case 'ExtraBlack':
-                return 950;
-            case 'ExtraBold':
-                return 800;
-            case 'ExtraLight':
-                return 200;
-            case 'Light':
-                return 300;
-            case 'Medium':
-                return 500;
-            case 'Normal':
-                return 400;
-            case 'SemiBold':
-                return 600;
-            case 'SemiLight':
-                return 350;
-            case 'Thin':
-                return 100;
-        }
-    }
-    get userSelect() {
-        return this.IsTextSelectionEnabled === 'True' ? 'text' : 'none';
-    }
-    get textDecorationLine() {
-        switch (this.TextDecorations) {
-            case 'None':
-                return 'none';
-            case 'Strikethrough':
-                return 'line-through';
-            case 'Underline':
-                return 'underline';
-            default:
-                return undefined;
-        }
-    }
-    get textOverflow() {
-        switch (this.TextTrimming) {
-            case 'None':
-            case 'Clip':
-                return 'clip';
-            case 'CharacterEllipsis':
-                return 'Ellipsis';
-            default:
-                return undefined;
-        }
-    }
-    get whiteSpace() {
-        switch (this.TextWrapping) {
-            case 'NoWrap':
-                return 'nowrap';
-            case 'Wrap':
-                return 'normal';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBlockComponent, isStandalone: true, selector: "TextBlock", inputs: { FontFamily: "FontFamily", Text: "Text", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Foreground: "Foreground", TextAlignment: "TextAlignment", IsTextSelectionEnabled: "IsTextSelectionEnabled", TextDecorations: "TextDecorations", TextTrimming: "TextTrimming", TextWrapping: "TextWrapping" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.text-align": "this.TextAlignment", "style.font-weight": "this.fontWeight", "style.user-select": "this.userSelect", "style.text-decoration-line": "this.textDecorationLine", "style.text-overflow": "this.textOverflow", "style.white-space": "this.whiteSpace" } }, usesInheritance: true, ngImport: i0, template: `<ng-container>
-    <ng-content *ngIf="Text === undefined"/>
-    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
-  </ng-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TextBlock',
-                    imports: [CommonModule],
-                    template: `<ng-container>
-    <ng-content *ngIf="Text === undefined"/>
-    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
-  </ng-container>`
-                }]
-        }], propDecorators: { FontFamily: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-family']
-            }], Text: [{
-                type: Input
-            }], FontSize: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-size']
-            }], FontStyle: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-style']
-            }], FontWeight: [{
-                type: Input
-            }], Foreground: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.color']
-            }], TextAlignment: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.text-align']
-            }], IsTextSelectionEnabled: [{
-                type: Input
-            }], TextDecorations: [{
-                type: Input
-            }], TextTrimming: [{
-                type: Input
-            }], TextWrapping: [{
-                type: Input
-            }], fontWeight: [{
-                type: HostBinding,
-                args: ['style.font-weight']
-            }], userSelect: [{
-                type: HostBinding,
-                args: ['style.user-select']
-            }], textDecorationLine: [{
-                type: HostBinding,
-                args: ['style.text-decoration-line']
-            }], textOverflow: [{
-                type: HostBinding,
-                args: ['style.text-overflow']
-            }], whiteSpace: [{
-                type: HostBinding,
-                args: ['style.white-space']
-            }] } });
-
 class FontIconComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
@@ -2520,6 +2520,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }] });
 
+class ProgressBarComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.Minimum = 0;
+        this.Maximum = 1;
+        this.Value = 0;
+        this.IsIndeterminate = false;
+    }
+    get indicatorStyle() {
+        if (this.IsIndeterminate) {
+            return {};
+        }
+        else {
+            let width = ((this.Value - this.Minimum) / (this.Maximum - this.Minimum)) * 100;
+            return {
+                width: width + '%'
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ProgressBarComponent, isStandalone: true, selector: "ProgressBar", inputs: { Minimum: "Minimum", Maximum: "Maximum", Value: "Value", IsIndeterminate: "IsIndeterminate" }, host: { properties: { "class.indeterminate": "this.IsIndeterminate" } }, usesInheritance: true, ngImport: i0, template: `<div class="indicator" [ngStyle]="indicatorStyle"></div>`, isInline: true, styles: [":host{width:100%;height:4px;display:flex;align-items:center;overflow:hidden;position:relative}:host .indicator{height:100%;background:var(--AccentFillColorDefault);border-radius:var(--ControlCornerRadius);transition:width var(--ControlNormalAnimationDuration, .25s) cubic-bezier(.4,0,.2,1)}:host.indeterminate .indicator{position:absolute;left:0;width:30%;animation:indeterminate-bar 1.2s infinite linear}@keyframes indeterminate-bar{0%{left:-30%}to{left:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ProgressBar', standalone: true, imports: [CommonModule], template: `<div class="indicator" [ngStyle]="indicatorStyle"></div>`, styles: [":host{width:100%;height:4px;display:flex;align-items:center;overflow:hidden;position:relative}:host .indicator{height:100%;background:var(--AccentFillColorDefault);border-radius:var(--ControlCornerRadius);transition:width var(--ControlNormalAnimationDuration, .25s) cubic-bezier(.4,0,.2,1)}:host.indeterminate .indicator{position:absolute;left:0;width:30%;animation:indeterminate-bar 1.2s infinite linear}@keyframes indeterminate-bar{0%{left:-30%}to{left:100%}}\n"] }]
+        }], propDecorators: { Minimum: [{
+                type: Input
+            }], Maximum: [{
+                type: Input
+            }], Value: [{
+                type: Input
+            }], IsIndeterminate: [{
+                type: HostBinding,
+                args: ['class.indeterminate']
+            }, {
+                type: Input
+            }] } });
+
+class ProgressRingComponent extends FrameworkElementComponent {
+    get indeterminateClass() {
+        return this.IsIndeterminate;
+    }
+    constructor() {
+        super();
+        this.Minimum = 0;
+        this.Maximum = 1;
+        this.Value = 0;
+        this.IsIndeterminate = false;
+        this._size = 40;
+        this._radius = 16;
+        this._strokeWidth = 4;
+        this._circumference = 2 * Math.PI * this._radius;
+        this.Width = this._size + 'px';
+        this.Height = this._size + 'px';
+    }
+    get dashOffset() {
+        let progress = (this.Value - this.Minimum) / (this.Maximum - this.Minimum);
+        return this._circumference * (1 - progress);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ProgressRingComponent, isStandalone: true, selector: "ProgressRing", inputs: { Minimum: "Minimum", Maximum: "Maximum", Value: "Value", IsIndeterminate: "IsIndeterminate" }, host: { properties: { "class.indeterminate": "this.indeterminateClass" } }, usesInheritance: true, ngImport: i0, template: `
+    <svg class="progress-ring-svg" [attr.viewBox]="'0 0 ' + _size + ' ' + _size" [style.width]="Width" [style.height]="Height">
+      <circle class="progress-ring-indicator" 
+        [attr.cx]="_size/2" 
+        [attr.cy]="_size/2" 
+        [attr.r]="_radius" 
+        fill="none" 
+        [attr.stroke-width]="_strokeWidth"
+        [attr.stroke-dasharray]="_circumference"
+        [attr.stroke-dashoffset]="IsIndeterminate ? null : dashOffset"
+      />
+    </svg>
+  `, isInline: true, styles: [":host{display:grid;align-items:center;justify-content:center}:host.indeterminate .progress-ring-indicator{animation:progress-ring-spin 1s linear infinite;stroke-dasharray:20 100;stroke-dashoffset:0;transform-origin:center}@keyframes progress-ring-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-ring-svg{transform:rotate(-90deg)}.progress-ring-indicator{stroke:var(--AccentFillColorDefault);transition:stroke-dashoffset var(--ControlNormalAnimationDuration) cubic-bezier(.4,0,.2,1);stroke-linecap:round}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressRingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ProgressRing', standalone: true, imports: [CommonModule], template: `
+    <svg class="progress-ring-svg" [attr.viewBox]="'0 0 ' + _size + ' ' + _size" [style.width]="Width" [style.height]="Height">
+      <circle class="progress-ring-indicator" 
+        [attr.cx]="_size/2" 
+        [attr.cy]="_size/2" 
+        [attr.r]="_radius" 
+        fill="none" 
+        [attr.stroke-width]="_strokeWidth"
+        [attr.stroke-dasharray]="_circumference"
+        [attr.stroke-dashoffset]="IsIndeterminate ? null : dashOffset"
+      />
+    </svg>
+  `, styles: [":host{display:grid;align-items:center;justify-content:center}:host.indeterminate .progress-ring-indicator{animation:progress-ring-spin 1s linear infinite;stroke-dasharray:20 100;stroke-dashoffset:0;transform-origin:center}@keyframes progress-ring-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-ring-svg{transform:rotate(-90deg)}.progress-ring-indicator{stroke:var(--AccentFillColorDefault);transition:stroke-dashoffset var(--ControlNormalAnimationDuration) cubic-bezier(.4,0,.2,1);stroke-linecap:round}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { Minimum: [{
+                type: Input
+            }], Maximum: [{
+                type: Input
+            }], Value: [{
+                type: Input
+            }], IsIndeterminate: [{
+                type: Input
+            }], indeterminateClass: [{
+                type: HostBinding,
+                args: ['class.indeterminate']
+            }] } });
+
 class NumberBoxComponent extends FrameworkElementComponent {
     get flyoutTarget() {
         return this._input?.nativeElement;
@@ -2653,7 +2755,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
     </Flyout>
     <div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>    
-  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "Foreground", "FontWeight", "Glyph"] }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }] }); }
+  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "Foreground", "FontWeight", "Glyph"] }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, decorators: [{
             type: Component,
@@ -2665,7 +2767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
     </Flyout>
     <div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>    
-  </label>`, imports: [CommonModule, RepeatButtonComponent, FontIconComponent, FlyoutComponent], styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"] }]
+  </label>`, imports: [CommonModule, RepeatButtonComponent, FontIconComponent, FlyoutComponent], styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { IsEnabled: [{
                 type: Input
             }], PlaceholderText: [{
@@ -2716,6 +2818,7 @@ class TextBoxComponent extends FrameworkElementComponent {
         this.PlaceholderText = '';
         this.TextAlignment = 'Left';
         this.TextWrapping = 'NoWrap';
+        this.UpdateTrigger = 'PropertyChanged';
         this._text = '';
         this.TextChange = new EventEmitter();
     }
@@ -2729,6 +2832,14 @@ class TextBoxComponent extends FrameworkElementComponent {
         this.TextChange.emit(value);
     }
     onInput(event) {
+        if (this.UpdateTrigger == 'PropertyChanged')
+            this.update(event);
+    }
+    onBlur(event) {
+        if (this.UpdateTrigger == 'LostFocus')
+            this.update(event);
+    }
+    update(event) {
         this.Text = (event.target).value;
     }
     get disabled() {
@@ -2746,13 +2857,13 @@ class TextBoxComponent extends FrameworkElementComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBoxComponent, isStandalone: true, selector: "TextBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping", Text: "Text" }, outputs: { TextChange: "TextChange" }, host: { listeners: { "click": "onClick()", "contextmenu": "onContextMenu($event)" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<input #input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onInput($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBoxComponent, isStandalone: true, selector: "TextBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping", UpdateTrigger: "UpdateTrigger", Text: "Text" }, outputs: { TextChange: "TextChange" }, host: { listeners: { "click": "onClick()", "contextmenu": "onContextMenu($event)" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" (blur)="onBlur($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" (blur)="onBlur($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input #input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onInput($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n"] }]
+            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" (blur)="onBlur($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" (blur)="onBlur($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], PlaceholderText: [{
@@ -2761,6 +2872,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], TextWrapping: [{
                 type: Input
+            }], UpdateTrigger: [{
+                type: Input
             }], _input: [{
                 type: ViewChild,
                 args: ['input']
@@ -2788,5 +2901,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupTemplate, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleMenuFlyoutItemComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
+export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupTemplate, ProgressBarComponent, ProgressRingComponent, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleMenuFlyoutItemComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
 //# sourceMappingURL=xaml-ui.mjs.map