xaml-ui 1.0.3 → 1.0.4
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 +73 -72
- package/fesm2022/xaml-ui.mjs.map +1 -1
- package/lib/basic-input/CheckBox.d.ts +1 -1
- package/lib/basic-input/ComboBox.d.ts +2 -2
- package/lib/basic-input/RadioButton.d.ts +9 -7
- package/lib/basic-input/Slider.d.ts +1 -1
- package/lib/basic-input/ToggleButton.d.ts +1 -1
- package/lib/dialogs-and-flyouts/Flyout.d.ts +2 -2
- package/lib/primitives/Popup.d.ts +2 -2
- package/lib/primitives/Selector.d.ts +4 -4
- package/lib/scrolling/ScrollBar.d.ts +13 -13
- package/lib/scrolling/ScrollViewer.d.ts +2 -2
- package/lib/text/TextBox.d.ts +2 -2
- package/package.json +1 -1
- package/styles/XamlGlobals.css +124 -0
package/fesm2022/xaml-ui.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, TemplateRef, ViewChild,
|
|
2
|
+
import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, TemplateRef, ViewChild, Optional, Directive, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
|
|
@@ -108,11 +108,11 @@ class PanelComponent extends FrameworkElementComponent {
|
|
|
108
108
|
return this.BorderThickness !== undefined ? 'solid' : undefined;
|
|
109
109
|
}
|
|
110
110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PanelComponent, isStandalone: true, selector: "Border", inputs: { Background: "Background", CornerRadius: "CornerRadius", BorderThickness: "BorderThickness", BorderBrush: "BorderBrush" }, host: { properties: { "style.background": "this.Background", "style.border-radius": "this.CornerRadius", "style.border-width": "this.BorderThickness", "style.border-color": "this.BorderBrush", "style.border-style": "this.borderStyle" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid}\n"] }); }
|
|
111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PanelComponent, isStandalone: true, selector: "Border", inputs: { Background: "Background", CornerRadius: "CornerRadius", BorderThickness: "BorderThickness", BorderBrush: "BorderBrush" }, host: { properties: { "style.background": "this.Background", "style.border-radius": "this.CornerRadius", "style.border-width": "this.BorderThickness", "style.border-color": "this.BorderBrush", "style.border-style": "this.borderStyle" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
|
|
112
112
|
}
|
|
113
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PanelComponent, decorators: [{
|
|
114
114
|
type: Component,
|
|
115
|
-
args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid}\n"] }]
|
|
115
|
+
args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
|
|
116
116
|
}], propDecorators: { Background: [{
|
|
117
117
|
type: Input
|
|
118
118
|
}, {
|
|
@@ -140,11 +140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
140
140
|
|
|
141
141
|
class BorderComponent extends PanelComponent {
|
|
142
142
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BorderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BorderComponent, isStandalone: true, selector: "Border", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid}\n"] }); }
|
|
143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BorderComponent, isStandalone: true, selector: "Border", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
|
|
144
144
|
}
|
|
145
145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BorderComponent, decorators: [{
|
|
146
146
|
type: Component,
|
|
147
|
-
args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid}\n"] }]
|
|
147
|
+
args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
|
|
148
148
|
}] });
|
|
149
149
|
|
|
150
150
|
class ButtonComponent extends BorderComponent {
|
|
@@ -175,11 +175,11 @@ class ButtonComponent extends BorderComponent {
|
|
|
175
175
|
this._popup?.Show();
|
|
176
176
|
}
|
|
177
177
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent", "attr.type": "this.type", "attr.disabled": "this.disabled", "class.disabled": "this.disabled", "class.popup-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_popup", first: true, predicate: ["ButtonFlyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{
|
|
178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent", "attr.type": "this.type", "attr.disabled": "this.disabled", "class.disabled": "this.disabled", "class.popup-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_popup", first: true, predicate: ["ButtonFlyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}\n"] }); }
|
|
179
179
|
}
|
|
180
180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
181
181
|
type: Component,
|
|
182
|
-
args: [{ selector: 'Button', template: `<ng-content/>`, styles: [":host{
|
|
182
|
+
args: [{ selector: 'Button', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}\n"] }]
|
|
183
183
|
}], propDecorators: { IsEnabled: [{
|
|
184
184
|
type: Input
|
|
185
185
|
}], Click: [{
|
|
@@ -221,32 +221,32 @@ class CheckBoxComponent extends BorderComponent {
|
|
|
221
221
|
this.IsChecked = false;
|
|
222
222
|
this.IsCheckedChange = new EventEmitter();
|
|
223
223
|
}
|
|
224
|
-
|
|
224
|
+
onChange(event) {
|
|
225
225
|
this.IsChecked = (event.target).checked;
|
|
226
226
|
this.IsCheckedChange.emit(this.IsChecked);
|
|
227
227
|
}
|
|
228
228
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
229
229
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CheckBoxComponent, isStandalone: true, selector: "CheckBox", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
|
|
230
|
-
<input type="checkbox" [checked]="IsChecked" (change)="
|
|
230
|
+
<input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
231
231
|
<div class="checkBox">
|
|
232
232
|
<div class="checkMark"></div>
|
|
233
233
|
</div>
|
|
234
234
|
<div class="content">
|
|
235
235
|
<ng-content/>
|
|
236
236
|
</div>
|
|
237
|
-
</label>`, isInline: true, styles: [":host{
|
|
237
|
+
</label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid;color:var(--TextOnAccentFillColorPrimary);animation:fade-in-animation var(--ControlNormalAnimationDuration) ease-out forwards}@keyframes fade-in-animation{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):active+.checkBox{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:var(--TextOnAccentFillColorSecondary)}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:var(--TextOnAccentFillColorDisabled)}.checkBox{display:grid;width:20px;height:20px;border-radius:var(--ControlCornerRadius);border-style:solid;border-width:var(--ControlBorderThickness)}.checkMark{display:none;font-family:var(--SymbolFontFamily);font-size:12pt;align-self:center;justify-self:center;color:var(--TextOnAccentFillColorPrimary)}@media (prefers-color-scheme: dark){.checkMark{color:var(--TextOnAccentFillColorPrimaryDark)}}.content{align-self:center}\n"] }); }
|
|
238
238
|
}
|
|
239
239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBoxComponent, decorators: [{
|
|
240
240
|
type: Component,
|
|
241
241
|
args: [{ selector: 'CheckBox', template: `<label class="container">
|
|
242
|
-
<input type="checkbox" [checked]="IsChecked" (change)="
|
|
242
|
+
<input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
243
243
|
<div class="checkBox">
|
|
244
244
|
<div class="checkMark"></div>
|
|
245
245
|
</div>
|
|
246
246
|
<div class="content">
|
|
247
247
|
<ng-content/>
|
|
248
248
|
</div>
|
|
249
|
-
</label>`, styles: [":host{
|
|
249
|
+
</label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid;color:var(--TextOnAccentFillColorPrimary);animation:fade-in-animation var(--ControlNormalAnimationDuration) ease-out forwards}@keyframes fade-in-animation{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):active+.checkBox{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:var(--TextOnAccentFillColorSecondary)}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:var(--TextOnAccentFillColorDisabled)}.checkBox{display:grid;width:20px;height:20px;border-radius:var(--ControlCornerRadius);border-style:solid;border-width:var(--ControlBorderThickness)}.checkMark{display:none;font-family:var(--SymbolFontFamily);font-size:12pt;align-self:center;justify-self:center;color:var(--TextOnAccentFillColorPrimary)}@media (prefers-color-scheme: dark){.checkMark{color:var(--TextOnAccentFillColorPrimaryDark)}}.content{align-self:center}\n"] }]
|
|
250
250
|
}], propDecorators: { IsEnabled: [{
|
|
251
251
|
type: Input
|
|
252
252
|
}], IsChecked: [{
|
|
@@ -512,7 +512,7 @@ class ScrollBarComponent extends FrameworkElementComponent {
|
|
|
512
512
|
<div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
|
|
513
513
|
<div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
|
|
514
514
|
</div>
|
|
515
|
-
<div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, isInline: true, styles: [":host{
|
|
515
|
+
<div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover{background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
516
516
|
}
|
|
517
517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollBarComponent, decorators: [{
|
|
518
518
|
type: Component,
|
|
@@ -520,7 +520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
520
520
|
<div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
|
|
521
521
|
<div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
|
|
522
522
|
</div>
|
|
523
|
-
<div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, styles: [":host{
|
|
523
|
+
<div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover{background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"] }]
|
|
524
524
|
}], propDecorators: { Orientation: [{
|
|
525
525
|
type: Input
|
|
526
526
|
}], ViewportSize: [{
|
|
@@ -651,11 +651,11 @@ class StackPanelComponent extends PanelComponent {
|
|
|
651
651
|
return this.Orientation === 'Horizontal' ? 'row' : 'column';
|
|
652
652
|
}
|
|
653
653
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: StackPanelComponent, isStandalone: true, selector: "StackPanel", inputs: { Orientation: "Orientation", Spacing: "Spacing" }, host: { properties: { "style.gap": "this.Spacing", "style.flex-direction": "this.flexDirection" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:flex}\n"] }); }
|
|
654
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: StackPanelComponent, isStandalone: true, selector: "StackPanel", inputs: { Orientation: "Orientation", Spacing: "Spacing" }, host: { properties: { "style.gap": "this.Spacing", "style.flex-direction": "this.flexDirection" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:flex;position:relative}\n"] }); }
|
|
655
655
|
}
|
|
656
656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanelComponent, decorators: [{
|
|
657
657
|
type: Component,
|
|
658
|
-
args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:flex}\n"] }]
|
|
658
|
+
args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:flex;position:relative}\n"] }]
|
|
659
659
|
}], propDecorators: { Orientation: [{
|
|
660
660
|
type: Input
|
|
661
661
|
}], Spacing: [{
|
|
@@ -670,7 +670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
670
670
|
|
|
671
671
|
class ListViewComponent extends SelectorComponent {
|
|
672
672
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
673
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n <StackPanel Padding=\"2px 0\">\n <div *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\">\n <div class=\"item-selector\"></div>\n <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n </ng-container>\n <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n </div>\n </StackPanel>\n </ScrollViewer>", isInline: true, styles: [":host{
|
|
673
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n <StackPanel Padding=\"2px 0\">\n <div *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\">\n <div class=\"item-selector\"></div>\n <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n </ng-container>\n <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n </div>\n </StackPanel>\n </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "component", type: StackPanelComponent, selector: "StackPanel", inputs: ["Orientation", "Spacing"] }] }); }
|
|
674
674
|
}
|
|
675
675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
676
676
|
type: Component,
|
|
@@ -681,7 +681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
681
681
|
<div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
|
|
682
682
|
</div>
|
|
683
683
|
</StackPanel>
|
|
684
|
-
</ScrollViewer>`, styles: [":host{
|
|
684
|
+
</ScrollViewer>`, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"] }]
|
|
685
685
|
}] });
|
|
686
686
|
|
|
687
687
|
class PopupComponent {
|
|
@@ -731,7 +731,7 @@ class PopupComponent {
|
|
|
731
731
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PopupComponent, isStandalone: true, selector: "Popup", inputs: { IsOpen: "IsOpen", VerticalOffset: "VerticalOffset", HorizontalOffset: "HorizontalOffset" }, outputs: { IsOpenChange: "IsOpenChange" }, host: { classAttribute: "popup" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" (contextmenu)="onBackdropClick($event)" *ngIf="IsOpen"></div>
|
|
732
732
|
<div #container class="popup-container" [ngClass]="containerClass">
|
|
733
733
|
<div class="popup-content" *ngIf="isRendered"><ng-content/></div>
|
|
734
|
-
</div>`, isInline: true, styles: [":host{
|
|
734
|
+
</div>`, isInline: true, styles: [":host{position:relative}:host{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
735
735
|
}
|
|
736
736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, decorators: [{
|
|
737
737
|
type: Component,
|
|
@@ -740,7 +740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
740
740
|
<div class="popup-content" *ngIf="isRendered"><ng-content/></div>
|
|
741
741
|
</div>`, host: {
|
|
742
742
|
class: 'popup'
|
|
743
|
-
}, styles: [":host{
|
|
743
|
+
}, styles: [":host{position:relative}:host{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{position:fixed;inset:0}\n"] }]
|
|
744
744
|
}], propDecorators: { IsOpen: [{
|
|
745
745
|
type: Input
|
|
746
746
|
}], IsOpenChange: [{
|
|
@@ -756,11 +756,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
756
756
|
|
|
757
757
|
class DropDownButtonComponent extends ButtonComponent {
|
|
758
758
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
759
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DropDownButtonComponent, isStandalone: true, selector: "DropDownButton", usesInheritance: true, ngImport: i0, template: `<div class="drop-down-glyph"></div><ng-content/>`, isInline: true, styles: [":host{
|
|
759
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DropDownButtonComponent, isStandalone: true, selector: "DropDownButton", usesInheritance: true, ngImport: i0, template: `<div class="drop-down-glyph"></div><ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}\n", ".drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;position:absolute;right:12px;top:0;bottom:0;align-content:center;transition:transform var(--ControlNormalAnimationDuration)}:host:active:not(.popup-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }); }
|
|
760
760
|
}
|
|
761
761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, decorators: [{
|
|
762
762
|
type: Component,
|
|
763
|
-
args: [{ selector: 'DropDownButton', template: `<div class="drop-down-glyph"></div><ng-content/>`, styles: [":host{
|
|
763
|
+
args: [{ selector: 'DropDownButton', template: `<div class="drop-down-glyph"></div><ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}\n", ".drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;position:absolute;right:12px;top:0;bottom:0;align-content:center;transition:transform var(--ControlNormalAnimationDuration)}:host:active:not(.popup-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }]
|
|
764
764
|
}] });
|
|
765
765
|
|
|
766
766
|
class ComboBoxComponent extends SelectorComponent {
|
|
@@ -811,40 +811,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
811
811
|
}] } });
|
|
812
812
|
|
|
813
813
|
class RadioButtonComponent extends BorderComponent {
|
|
814
|
-
|
|
815
|
-
|
|
814
|
+
onChange(event) {
|
|
815
|
+
this.IsChecked = (event.target).checked;
|
|
816
|
+
this.IsCheckedChange.emit(this.IsChecked);
|
|
817
|
+
}
|
|
818
|
+
constructor(_group) {
|
|
819
|
+
super();
|
|
820
|
+
this._group = _group;
|
|
816
821
|
this.IsEnabled = true;
|
|
817
822
|
this.IsChecked = false;
|
|
818
823
|
this.IsCheckedChange = new EventEmitter();
|
|
819
824
|
this.Group = "";
|
|
825
|
+
if (this._group)
|
|
826
|
+
this._group.registerOption(this);
|
|
820
827
|
}
|
|
821
|
-
|
|
822
|
-
this.IsChecked = (event.target).checked;
|
|
823
|
-
this.IsCheckedChange.emit(this.IsChecked);
|
|
824
|
-
}
|
|
825
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
828
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, deps: [{ token: RadioButtonGroup, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
826
829
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonComponent, isStandalone: true, selector: "RadioButton", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked", Group: "Group", Value: "Value" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
|
|
827
|
-
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="
|
|
830
|
+
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
828
831
|
<div class="radioButton">
|
|
829
832
|
<div class="circle"></div>
|
|
830
833
|
</div>
|
|
831
834
|
<div class="content">
|
|
832
835
|
<ng-content/>
|
|
833
836
|
</div>
|
|
834
|
-
</label>`, isInline: true, styles: [":host{
|
|
837
|
+
</label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }); }
|
|
835
838
|
}
|
|
836
839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
837
840
|
type: Component,
|
|
838
841
|
args: [{ selector: 'RadioButton', template: `<label class="container">
|
|
839
|
-
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="
|
|
842
|
+
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
840
843
|
<div class="radioButton">
|
|
841
844
|
<div class="circle"></div>
|
|
842
845
|
</div>
|
|
843
846
|
<div class="content">
|
|
844
847
|
<ng-content/>
|
|
845
848
|
</div>
|
|
846
|
-
</label>`, styles: [":host{
|
|
847
|
-
}],
|
|
849
|
+
</label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }]
|
|
850
|
+
}], ctorParameters: () => [{ type: RadioButtonGroup, decorators: [{
|
|
851
|
+
type: Optional
|
|
852
|
+
}] }], propDecorators: { IsEnabled: [{
|
|
848
853
|
type: Input
|
|
849
854
|
}], IsChecked: [{
|
|
850
855
|
type: Input
|
|
@@ -859,11 +864,12 @@ class RadioButtonGroup extends StackPanelComponent {
|
|
|
859
864
|
constructor() {
|
|
860
865
|
super(...arguments);
|
|
861
866
|
this.ValueChange = new EventEmitter();
|
|
867
|
+
this._children = [];
|
|
862
868
|
}
|
|
863
869
|
set Value(value) {
|
|
864
870
|
if (this._children) {
|
|
865
871
|
for (let item of this._children) {
|
|
866
|
-
if (item.Value
|
|
872
|
+
if (item.Value === value) {
|
|
867
873
|
item.IsChecked = true;
|
|
868
874
|
break;
|
|
869
875
|
}
|
|
@@ -876,33 +882,28 @@ class RadioButtonGroup extends StackPanelComponent {
|
|
|
876
882
|
get Value() {
|
|
877
883
|
return this._value;
|
|
878
884
|
}
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
});
|
|
891
|
-
}
|
|
885
|
+
registerOption(child) {
|
|
886
|
+
child.Group = 'xaml-radio-button-group-' + this._id;
|
|
887
|
+
if (child.Value === undefined)
|
|
888
|
+
child.Value = this._children.length;
|
|
889
|
+
if (child.Value === this.Value)
|
|
890
|
+
child.IsChecked = true;
|
|
891
|
+
child.IsCheckedChange.subscribe(p => {
|
|
892
|
+
this.Value = child.Value;
|
|
893
|
+
this.ValueChange.emit(child.Value);
|
|
894
|
+
});
|
|
895
|
+
this._children.push(child);
|
|
892
896
|
}
|
|
893
897
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
894
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroup, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" },
|
|
898
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroup, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:contents}\n"] }); }
|
|
895
899
|
}
|
|
896
900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, decorators: [{
|
|
897
901
|
type: Component,
|
|
898
|
-
args: [{ selector: 'RadioButtonGroup', template: `<ng-
|
|
902
|
+
args: [{ selector: 'RadioButtonGroup', template: `<ng-content/>`, styles: [":host{display:contents}\n"] }]
|
|
899
903
|
}], propDecorators: { Value: [{
|
|
900
904
|
type: Input
|
|
901
905
|
}], ValueChange: [{
|
|
902
906
|
type: Output
|
|
903
|
-
}], _children: [{
|
|
904
|
-
type: ContentChildren,
|
|
905
|
-
args: [RadioButtonComponent]
|
|
906
907
|
}] } });
|
|
907
908
|
|
|
908
909
|
class SliderComponent extends FrameworkElementComponent {
|
|
@@ -916,7 +917,7 @@ class SliderComponent extends FrameworkElementComponent {
|
|
|
916
917
|
this.IsEnabled = true;
|
|
917
918
|
this.Orientation = 'Horizontal';
|
|
918
919
|
}
|
|
919
|
-
|
|
920
|
+
onChange(event) {
|
|
920
921
|
this.Value = parseFloat(event.target.value);
|
|
921
922
|
this.ValueChange.emit(this.Value);
|
|
922
923
|
}
|
|
@@ -926,9 +927,9 @@ class SliderComponent extends FrameworkElementComponent {
|
|
|
926
927
|
[max]="Maximum"
|
|
927
928
|
[value]="Value"
|
|
928
929
|
[step]="StepFrequency"
|
|
929
|
-
(change)="
|
|
930
|
+
(change)="onChange($event)"
|
|
930
931
|
[disabled]="!IsEnabled"
|
|
931
|
-
[className]="Orientation.toLowerCase()">`, isInline: true, styles: [":host{
|
|
932
|
+
[className]="Orientation.toLowerCase()">`, isInline: true, styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled{background-color:var(--ControlStrongFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"] }); }
|
|
932
933
|
}
|
|
933
934
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, decorators: [{
|
|
934
935
|
type: Component,
|
|
@@ -937,9 +938,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
937
938
|
[max]="Maximum"
|
|
938
939
|
[value]="Value"
|
|
939
940
|
[step]="StepFrequency"
|
|
940
|
-
(change)="
|
|
941
|
+
(change)="onChange($event)"
|
|
941
942
|
[disabled]="!IsEnabled"
|
|
942
|
-
[className]="Orientation.toLowerCase()">`, styles: [":host{
|
|
943
|
+
[className]="Orientation.toLowerCase()">`, styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled{background-color:var(--ControlStrongFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"] }]
|
|
943
944
|
}], propDecorators: { Minimum: [{
|
|
944
945
|
type: Input
|
|
945
946
|
}], Maximum: [{
|
|
@@ -969,11 +970,11 @@ class ToggleButtonComponent extends ButtonComponent {
|
|
|
969
970
|
this.IsCheckedChange.emit(this.IsChecked);
|
|
970
971
|
}
|
|
971
972
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
972
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButtonComponent, isStandalone: true, selector: "ToggleButton", inputs: { IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{
|
|
973
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButtonComponent, isStandalone: true, selector: "ToggleButton", inputs: { IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}\n"] }); }
|
|
973
974
|
}
|
|
974
975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
975
976
|
type: Component,
|
|
976
|
-
args: [{ selector: 'ToggleButton', template: `<ng-content/>`, styles: [":host{
|
|
977
|
+
args: [{ selector: 'ToggleButton', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}\n"] }]
|
|
977
978
|
}], propDecorators: { IsChecked: [{
|
|
978
979
|
type: Input
|
|
979
980
|
}, {
|
|
@@ -989,33 +990,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
989
990
|
class ToggleSwitchComponent extends CheckBoxComponent {
|
|
990
991
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
991
992
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleSwitchComponent, isStandalone: true, selector: "ToggleSwitch", usesInheritance: true, ngImport: i0, template: `<label class="container">
|
|
992
|
-
<input type="checkbox" [checked]="IsChecked" (change)="
|
|
993
|
+
<input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
993
994
|
<div class="slider">
|
|
994
995
|
<div class="thumb"></div>
|
|
995
996
|
</div>
|
|
996
997
|
<div class="content"><ng-content/></div>
|
|
997
|
-
</label>`, isInline: true, styles: [":host{
|
|
998
|
+
</label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):active:not(:disabled)+.slider{background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):disabled+.slider{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input:not(:checked):disabled+.slider>.thumb{background-color:var(--TextFillColorDisabled)}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:active:not(:disabled)+.slider{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input:checked:active:not(:disabled)+.slider>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:disabled+.slider{background-color:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled)}input:checked:disabled+.slider>.thumb{background-color:var(--TextOnAccentFillColorDisabled)}input:checked+.slider>.thumb{transform:translate(22px)}input:not(:disabled):active+.slider>.thumb{width:17px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):hover+.slider>.thumb{width:14px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):checked:hover+.slider>.thumb{transform:translate(21px)}input:not(:disabled):checked:active+.slider>.thumb{transform:translate(18px);width:17px;height:14px}.slider{display:grid;width:40px;height:18px;border-radius:10px;border-style:solid;border-width:1.5px;transition:background-color var(--ControlNormalAnimationDuration);background-color:var(--ControlAltFillColorSecondary)}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform var(--ControlNormalAnimationDuration);transition:width var(--ControlFastAnimationDuration);transition:margin-left var(--ControlFastAnimationDuration)}\n"] }); }
|
|
998
999
|
}
|
|
999
1000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
|
|
1000
1001
|
type: Component,
|
|
1001
1002
|
args: [{ selector: 'ToggleSwitch', template: `<label class="container">
|
|
1002
|
-
<input type="checkbox" [checked]="IsChecked" (change)="
|
|
1003
|
+
<input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
1003
1004
|
<div class="slider">
|
|
1004
1005
|
<div class="thumb"></div>
|
|
1005
1006
|
</div>
|
|
1006
1007
|
<div class="content"><ng-content/></div>
|
|
1007
|
-
</label>`, styles: [":host{
|
|
1008
|
+
</label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):active:not(:disabled)+.slider{background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):disabled+.slider{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input:not(:checked):disabled+.slider>.thumb{background-color:var(--TextFillColorDisabled)}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:active:not(:disabled)+.slider{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input:checked:active:not(:disabled)+.slider>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:disabled+.slider{background-color:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled)}input:checked:disabled+.slider>.thumb{background-color:var(--TextOnAccentFillColorDisabled)}input:checked+.slider>.thumb{transform:translate(22px)}input:not(:disabled):active+.slider>.thumb{width:17px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):hover+.slider>.thumb{width:14px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):checked:hover+.slider>.thumb{transform:translate(21px)}input:not(:disabled):checked:active+.slider>.thumb{transform:translate(18px);width:17px;height:14px}.slider{display:grid;width:40px;height:18px;border-radius:10px;border-style:solid;border-width:1.5px;transition:background-color var(--ControlNormalAnimationDuration);background-color:var(--ControlAltFillColorSecondary)}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform var(--ControlNormalAnimationDuration);transition:width var(--ControlFastAnimationDuration);transition:margin-left var(--ControlFastAnimationDuration)}\n"] }]
|
|
1008
1009
|
}] });
|
|
1009
1010
|
|
|
1010
1011
|
class ListBoxComponent extends SelectorComponent {
|
|
1011
1012
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1012
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\">\n <ng-container *ngIf=\"ItemTemplate\">\n <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n </ng-container>\n <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\n </div>", isInline: true, styles: [":host{
|
|
1013
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\">\n <ng-container *ngIf=\"ItemTemplate\">\n <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n </ng-container>\n <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\n </div>", isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1013
1014
|
}
|
|
1014
1015
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, decorators: [{
|
|
1015
1016
|
type: Component,
|
|
1016
1017
|
args: [{ selector: 'ListBox', imports: [CommonModule], template: `<div *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick($event, index, item)" [id]="'xaml-selector-'+_id+'-item-'+index" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">
|
|
1017
1018
|
${SelectorItemTemplate}
|
|
1018
|
-
</div>`, styles: [":host{
|
|
1019
|
+
</div>`, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"] }]
|
|
1019
1020
|
}] });
|
|
1020
1021
|
|
|
1021
1022
|
class FlyoutComponent extends PopupComponent {
|
|
@@ -1158,14 +1159,14 @@ class FlyoutComponent extends PopupComponent {
|
|
|
1158
1159
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutComponent, isStandalone: true, selector: "Flyout", inputs: { Placement: "Placement" }, usesInheritance: true, ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
|
|
1159
1160
|
<div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
|
|
1160
1161
|
<div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered"><ng-content/></div>
|
|
1161
|
-
</div>`, isInline: true, styles: [":host{
|
|
1162
|
+
</div>`, isInline: true, styles: [":host{position:relative}:host{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1162
1163
|
}
|
|
1163
1164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, decorators: [{
|
|
1164
1165
|
type: Component,
|
|
1165
1166
|
args: [{ selector: 'Flyout', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
|
|
1166
1167
|
<div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
|
|
1167
1168
|
<div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered"><ng-content/></div>
|
|
1168
|
-
</div>`, styles: [":host{
|
|
1169
|
+
</div>`, styles: [":host{position:relative}:host{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{position:fixed;inset:0}\n"] }]
|
|
1169
1170
|
}], propDecorators: { Placement: [{
|
|
1170
1171
|
type: Input
|
|
1171
1172
|
}] } });
|
|
@@ -1357,11 +1358,11 @@ class GridComponent extends PanelComponent {
|
|
|
1357
1358
|
return this.Orientation == 'Horizontal' ? 'row' : 'column';
|
|
1358
1359
|
}
|
|
1359
1360
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1360
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridComponent, isStandalone: false, selector: "Grid", inputs: { ColumnDefinitions: "ColumnDefinitions", RowDefinitions: "RowDefinitions", ColumnSpacing: "ColumnSpacing", RowSpacing: "RowSpacing", Orientation: "Orientation" }, host: { properties: { "style.grid-template-columns": "this.ColumnDefinitions", "style.grid-template-rows": "this.RowDefinitions", "style.column-gap": "this.ColumnSpacing", "style.row-gap": "this.RowSpacing", "style.grid-auto-flow": "this.gridAutoFlow" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid}\n"] }); }
|
|
1361
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridComponent, isStandalone: false, selector: "Grid", inputs: { ColumnDefinitions: "ColumnDefinitions", RowDefinitions: "RowDefinitions", ColumnSpacing: "ColumnSpacing", RowSpacing: "RowSpacing", Orientation: "Orientation" }, host: { properties: { "style.grid-template-columns": "this.ColumnDefinitions", "style.grid-template-rows": "this.RowDefinitions", "style.column-gap": "this.ColumnSpacing", "style.row-gap": "this.RowSpacing", "style.grid-auto-flow": "this.gridAutoFlow" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
|
|
1361
1362
|
}
|
|
1362
1363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, decorators: [{
|
|
1363
1364
|
type: Component,
|
|
1364
|
-
args: [{ selector: 'Grid', template: `<ng-content/>`, standalone: false, styles: [":host{display:grid}\n"] }]
|
|
1365
|
+
args: [{ selector: 'Grid', template: `<ng-content/>`, standalone: false, styles: [":host{display:grid;position:relative}\n"] }]
|
|
1365
1366
|
}], propDecorators: { ColumnDefinitions: [{
|
|
1366
1367
|
type: Input
|
|
1367
1368
|
}, {
|
|
@@ -1588,12 +1589,12 @@ class TextBoxComponent extends FrameworkElementComponent {
|
|
|
1588
1589
|
}
|
|
1589
1590
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1590
1591
|
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: { "contextmenu": "onContextMenu($event)" } }, usesInheritance: true, ngImport: i0, template: `<input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
|
|
1591
|
-
<textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{
|
|
1592
|
+
<textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{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);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1592
1593
|
}
|
|
1593
1594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
|
|
1594
1595
|
type: Component,
|
|
1595
1596
|
args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
|
|
1596
|
-
<textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{
|
|
1597
|
+
<textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{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);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n"] }]
|
|
1597
1598
|
}], propDecorators: { IsEnabled: [{
|
|
1598
1599
|
type: Input
|
|
1599
1600
|
}], PlaceholderText: [{
|