xaml-ui 1.0.13 → 1.0.14
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/fesm2022/xaml-ui.mjs +120 -7
- package/fesm2022/xaml-ui.mjs.map +1 -1
- package/lib/Common.d.ts +1 -0
- package/lib/status-and-info/ProgressBar.d.ts +15 -0
- package/lib/status-and-info/ProgressRing.d.ts +17 -0
- package/lib/text/TextBox.d.ts +5 -2
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
package/fesm2022/xaml-ui.mjs
CHANGED
|
@@ -2520,6 +2520,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2520
2520
|
}]
|
|
2521
2521
|
}] });
|
|
2522
2522
|
|
|
2523
|
+
class ProgressBarComponent extends FrameworkElementComponent {
|
|
2524
|
+
constructor() {
|
|
2525
|
+
super(...arguments);
|
|
2526
|
+
this.Minimum = 0;
|
|
2527
|
+
this.Maximum = 1;
|
|
2528
|
+
this.Value = 0;
|
|
2529
|
+
this.IsIndeterminate = false;
|
|
2530
|
+
}
|
|
2531
|
+
get indicatorStyle() {
|
|
2532
|
+
if (this.IsIndeterminate) {
|
|
2533
|
+
return {};
|
|
2534
|
+
}
|
|
2535
|
+
else {
|
|
2536
|
+
let width = ((this.Value - this.Minimum) / (this.Maximum - this.Minimum)) * 100;
|
|
2537
|
+
return {
|
|
2538
|
+
width: width + '%'
|
|
2539
|
+
};
|
|
2540
|
+
}
|
|
2541
|
+
}
|
|
2542
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2543
|
+
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"] }] }); }
|
|
2544
|
+
}
|
|
2545
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
2546
|
+
type: Component,
|
|
2547
|
+
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"] }]
|
|
2548
|
+
}], propDecorators: { Minimum: [{
|
|
2549
|
+
type: Input
|
|
2550
|
+
}], Maximum: [{
|
|
2551
|
+
type: Input
|
|
2552
|
+
}], Value: [{
|
|
2553
|
+
type: Input
|
|
2554
|
+
}], IsIndeterminate: [{
|
|
2555
|
+
type: HostBinding,
|
|
2556
|
+
args: ['class.indeterminate']
|
|
2557
|
+
}, {
|
|
2558
|
+
type: Input
|
|
2559
|
+
}] } });
|
|
2560
|
+
|
|
2561
|
+
class ProgressRingComponent extends FrameworkElementComponent {
|
|
2562
|
+
get indeterminateClass() {
|
|
2563
|
+
return this.IsIndeterminate;
|
|
2564
|
+
}
|
|
2565
|
+
constructor() {
|
|
2566
|
+
super();
|
|
2567
|
+
this.Minimum = 0;
|
|
2568
|
+
this.Maximum = 1;
|
|
2569
|
+
this.Value = 0;
|
|
2570
|
+
this.IsIndeterminate = false;
|
|
2571
|
+
this._size = 40;
|
|
2572
|
+
this._radius = 16;
|
|
2573
|
+
this._strokeWidth = 4;
|
|
2574
|
+
this._circumference = 2 * Math.PI * this._radius;
|
|
2575
|
+
this.Width = this._size + 'px';
|
|
2576
|
+
this.Height = this._size + 'px';
|
|
2577
|
+
}
|
|
2578
|
+
get dashOffset() {
|
|
2579
|
+
let progress = (this.Value - this.Minimum) / (this.Maximum - this.Minimum);
|
|
2580
|
+
return this._circumference * (1 - progress);
|
|
2581
|
+
}
|
|
2582
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2583
|
+
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: `
|
|
2584
|
+
<svg class="progress-ring-svg" [attr.viewBox]="'0 0 ' + _size + ' ' + _size" [style.width]="Width" [style.height]="Height">
|
|
2585
|
+
<circle class="progress-ring-indicator"
|
|
2586
|
+
[attr.cx]="_size/2"
|
|
2587
|
+
[attr.cy]="_size/2"
|
|
2588
|
+
[attr.r]="_radius"
|
|
2589
|
+
fill="none"
|
|
2590
|
+
[attr.stroke-width]="_strokeWidth"
|
|
2591
|
+
[attr.stroke-dasharray]="_circumference"
|
|
2592
|
+
[attr.stroke-dashoffset]="IsIndeterminate ? null : dashOffset"
|
|
2593
|
+
/>
|
|
2594
|
+
</svg>
|
|
2595
|
+
`, 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 }] }); }
|
|
2596
|
+
}
|
|
2597
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressRingComponent, decorators: [{
|
|
2598
|
+
type: Component,
|
|
2599
|
+
args: [{ selector: 'ProgressRing', standalone: true, imports: [CommonModule], template: `
|
|
2600
|
+
<svg class="progress-ring-svg" [attr.viewBox]="'0 0 ' + _size + ' ' + _size" [style.width]="Width" [style.height]="Height">
|
|
2601
|
+
<circle class="progress-ring-indicator"
|
|
2602
|
+
[attr.cx]="_size/2"
|
|
2603
|
+
[attr.cy]="_size/2"
|
|
2604
|
+
[attr.r]="_radius"
|
|
2605
|
+
fill="none"
|
|
2606
|
+
[attr.stroke-width]="_strokeWidth"
|
|
2607
|
+
[attr.stroke-dasharray]="_circumference"
|
|
2608
|
+
[attr.stroke-dashoffset]="IsIndeterminate ? null : dashOffset"
|
|
2609
|
+
/>
|
|
2610
|
+
</svg>
|
|
2611
|
+
`, 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"] }]
|
|
2612
|
+
}], ctorParameters: () => [], propDecorators: { Minimum: [{
|
|
2613
|
+
type: Input
|
|
2614
|
+
}], Maximum: [{
|
|
2615
|
+
type: Input
|
|
2616
|
+
}], Value: [{
|
|
2617
|
+
type: Input
|
|
2618
|
+
}], IsIndeterminate: [{
|
|
2619
|
+
type: Input
|
|
2620
|
+
}], indeterminateClass: [{
|
|
2621
|
+
type: HostBinding,
|
|
2622
|
+
args: ['class.indeterminate']
|
|
2623
|
+
}] } });
|
|
2624
|
+
|
|
2523
2625
|
class NumberBoxComponent extends FrameworkElementComponent {
|
|
2524
2626
|
get flyoutTarget() {
|
|
2525
2627
|
return this._input?.nativeElement;
|
|
@@ -2653,7 +2755,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
|
|
|
2653
2755
|
<RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50" (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph=""/></RepeatButton>
|
|
2654
2756
|
</Flyout>
|
|
2655
2757
|
<div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>
|
|
2656
|
-
</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}
|
|
2758
|
+
</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" }] }); }
|
|
2657
2759
|
}
|
|
2658
2760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, decorators: [{
|
|
2659
2761
|
type: Component,
|
|
@@ -2665,7 +2767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2665
2767
|
<RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50" (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph=""/></RepeatButton>
|
|
2666
2768
|
</Flyout>
|
|
2667
2769
|
<div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>
|
|
2668
|
-
</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}
|
|
2770
|
+
</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"] }]
|
|
2669
2771
|
}], ctorParameters: () => [], propDecorators: { IsEnabled: [{
|
|
2670
2772
|
type: Input
|
|
2671
2773
|
}], PlaceholderText: [{
|
|
@@ -2716,6 +2818,7 @@ class TextBoxComponent extends FrameworkElementComponent {
|
|
|
2716
2818
|
this.PlaceholderText = '';
|
|
2717
2819
|
this.TextAlignment = 'Left';
|
|
2718
2820
|
this.TextWrapping = 'NoWrap';
|
|
2821
|
+
this.UpdateTrigger = 'PropertyChanged';
|
|
2719
2822
|
this._text = '';
|
|
2720
2823
|
this.TextChange = new EventEmitter();
|
|
2721
2824
|
}
|
|
@@ -2729,6 +2832,14 @@ class TextBoxComponent extends FrameworkElementComponent {
|
|
|
2729
2832
|
this.TextChange.emit(value);
|
|
2730
2833
|
}
|
|
2731
2834
|
onInput(event) {
|
|
2835
|
+
if (this.UpdateTrigger == 'PropertyChanged')
|
|
2836
|
+
this.update(event);
|
|
2837
|
+
}
|
|
2838
|
+
onBlur(event) {
|
|
2839
|
+
if (this.UpdateTrigger == 'LostFocus')
|
|
2840
|
+
this.update(event);
|
|
2841
|
+
}
|
|
2842
|
+
update(event) {
|
|
2732
2843
|
this.Text = (event.target).value;
|
|
2733
2844
|
}
|
|
2734
2845
|
get disabled() {
|
|
@@ -2746,13 +2857,13 @@ class TextBoxComponent extends FrameworkElementComponent {
|
|
|
2746
2857
|
}, 0);
|
|
2747
2858
|
}
|
|
2748
2859
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2749
|
-
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}"/>
|
|
2750
|
-
<textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (
|
|
2860
|
+
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}"/>
|
|
2861
|
+
<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"] }] }); }
|
|
2751
2862
|
}
|
|
2752
2863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
|
|
2753
2864
|
type: Component,
|
|
2754
|
-
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}"/>
|
|
2755
|
-
<textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (
|
|
2865
|
+
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}"/>
|
|
2866
|
+
<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"] }]
|
|
2756
2867
|
}], propDecorators: { IsEnabled: [{
|
|
2757
2868
|
type: Input
|
|
2758
2869
|
}], PlaceholderText: [{
|
|
@@ -2761,6 +2872,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2761
2872
|
type: Input
|
|
2762
2873
|
}], TextWrapping: [{
|
|
2763
2874
|
type: Input
|
|
2875
|
+
}], UpdateTrigger: [{
|
|
2876
|
+
type: Input
|
|
2764
2877
|
}], _input: [{
|
|
2765
2878
|
type: ViewChild,
|
|
2766
2879
|
args: ['input']
|
|
@@ -2788,5 +2901,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2788
2901
|
* Generated bundle index. Do not edit.
|
|
2789
2902
|
*/
|
|
2790
2903
|
|
|
2791
|
-
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 };
|
|
2904
|
+
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 };
|
|
2792
2905
|
//# sourceMappingURL=xaml-ui.mjs.map
|