xaml-ui 1.0.13 → 1.0.15

package/fesm2022/xaml-ui.mjs

@@ -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;
@@ -2647,25 +2749,25 @@ class NumberBoxComponent extends FrameworkElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberBoxComponent, isStandalone: true, selector: "NumberBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", NumberFormatter: "NumberFormatter", Unit: "Unit", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "click": "onClick()", "focusin": "onFocusIn()", "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_flyout", first: true, predicate: ["flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
     <div class="icon">&#xEC8F;</div>
-    <input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
+    <input class="text-box" #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
     <Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
       <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
       <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,
             args: [{ selector: 'NumberBox', template: `<label>
     <div class="icon">&#xEC8F;</div>
-    <input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
+    <input class="text-box" #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
     <Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
       <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
       <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