xaml-ui 1.0.3 → 1.0.5
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 +978 -417
- package/fesm2022/xaml-ui.mjs.map +1 -1
- package/lib/Color.d.ts +17 -0
- package/lib/basic-input/Button.d.ts +2 -2
- package/lib/basic-input/CheckBox.d.ts +1 -1
- package/lib/basic-input/ColorPicker.d.ts +20 -0
- package/lib/basic-input/ComboBox.d.ts +2 -2
- package/lib/basic-input/RadioButton.d.ts +9 -7
- package/lib/basic-input/RepeatButton.d.ts +13 -0
- package/lib/basic-input/Slider.d.ts +1 -1
- package/lib/basic-input/SplitButton.d.ts +13 -0
- package/lib/basic-input/ToggleButton.d.ts +1 -1
- package/lib/dialogs-and-flyouts/ContextFlyout.d.ts +15 -0
- package/lib/dialogs-and-flyouts/Flyout.d.ts +2 -2
- package/lib/layout/StackPanel.d.ts +2 -2
- package/lib/media/Image.d.ts +13 -0
- package/lib/menus-and-toolbars/AppBarButton.d.ts +12 -0
- package/lib/menus-and-toolbars/CommandBar.d.ts +6 -0
- package/lib/menus-and-toolbars/MenuFlyout.d.ts +7 -0
- package/lib/menus-and-toolbars/MenuFlyoutItem.d.ts +13 -0
- package/lib/menus-and-toolbars/MenuFlyoutItemBase.d.ts +2 -0
- package/lib/menus-and-toolbars/MenuFlyoutSeparator.d.ts +6 -0
- package/lib/primitives/Popup.d.ts +4 -3
- 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/NumberBox.d.ts +36 -0
- package/lib/text/TextBlock.d.ts +1 -1
- package/lib/text/TextBox.d.ts +2 -2
- package/package.json +1 -1
- package/public-api.d.ts +13 -0
- 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,
|
|
2
|
+
import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, ViewChild, TemplateRef, 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 {
|
|
@@ -166,20 +166,20 @@ class ButtonComponent extends BorderComponent {
|
|
|
166
166
|
return this.IsEnabled ? undefined : true;
|
|
167
167
|
}
|
|
168
168
|
get flyoutOpen() {
|
|
169
|
-
return this.
|
|
169
|
+
return this._flyout?.IsOpen;
|
|
170
170
|
}
|
|
171
171
|
onHostPointerEvent(event) {
|
|
172
172
|
if (!this.IsEnabled)
|
|
173
173
|
return;
|
|
174
174
|
this.Click.emit();
|
|
175
|
-
this.
|
|
175
|
+
this._flyout?.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.
|
|
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.flyout-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], 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(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.flyout-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(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.flyout-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(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-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: [{
|
|
@@ -205,10 +205,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
205
205
|
args: ['class.disabled']
|
|
206
206
|
}], flyoutOpen: [{
|
|
207
207
|
type: HostBinding,
|
|
208
|
-
args: ['class.
|
|
209
|
-
}],
|
|
208
|
+
args: ['class.flyout-open']
|
|
209
|
+
}], _flyout: [{
|
|
210
210
|
type: ContentChild,
|
|
211
|
-
args: ['
|
|
211
|
+
args: ['xaml-flyout']
|
|
212
212
|
}], onHostPointerEvent: [{
|
|
213
213
|
type: HostListener,
|
|
214
214
|
args: ['click', ['$event']]
|
|
@@ -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: [{
|
|
@@ -255,6 +255,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
255
255
|
type: Output
|
|
256
256
|
}] } });
|
|
257
257
|
|
|
258
|
+
function colorToString(value) {
|
|
259
|
+
return '#' + value.toString(16).padStart(8, '0');
|
|
260
|
+
}
|
|
261
|
+
function stringToColor(value) {
|
|
262
|
+
return parseInt(value.replace('#', ''), 16);
|
|
263
|
+
}
|
|
264
|
+
function colorToRgb(value) {
|
|
265
|
+
return {
|
|
266
|
+
r: value >> 24 & 0xff,
|
|
267
|
+
g: value >> 16 & 0xff,
|
|
268
|
+
b: value >> 8 & 0xff,
|
|
269
|
+
a: value & 0xff
|
|
270
|
+
};
|
|
271
|
+
}
|
|
272
|
+
function rgbToHsl(rgb) {
|
|
273
|
+
const { r: r255, g: g255, b: b255, a: a255 } = rgb;
|
|
274
|
+
const r = r255 / 255;
|
|
275
|
+
const g = g255 / 255;
|
|
276
|
+
const b = b255 / 255;
|
|
277
|
+
const a = a255 / 255;
|
|
278
|
+
let max = Math.max(r, g, b);
|
|
279
|
+
let min = Math.min(r, g, b);
|
|
280
|
+
let h = (max + min) / 2;
|
|
281
|
+
let s = h;
|
|
282
|
+
let l = h;
|
|
283
|
+
if (max === min) {
|
|
284
|
+
// Achromatic
|
|
285
|
+
return { h: 0, s: 0, l: l * 100, a: a * 100 };
|
|
286
|
+
}
|
|
287
|
+
const d = max - min;
|
|
288
|
+
s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min);
|
|
289
|
+
switch (max) {
|
|
290
|
+
case r:
|
|
291
|
+
h = ((g - b) / d + 0) * 60;
|
|
292
|
+
break;
|
|
293
|
+
case g:
|
|
294
|
+
h = ((b - r) / d + 2) * 60;
|
|
295
|
+
break;
|
|
296
|
+
case b:
|
|
297
|
+
h = ((r - g) / d + 4) * 60;
|
|
298
|
+
break;
|
|
299
|
+
}
|
|
300
|
+
return { h, s: s * 100, l: l * 100, a: a * 100 };
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
class ColorPickerComponent extends FrameworkElementComponent {
|
|
304
|
+
constructor() {
|
|
305
|
+
super(...arguments);
|
|
306
|
+
this._color = 0xffffffff;
|
|
307
|
+
this.ColorChange = new EventEmitter();
|
|
308
|
+
}
|
|
309
|
+
get Color() {
|
|
310
|
+
return this._color;
|
|
311
|
+
}
|
|
312
|
+
set Color(value) {
|
|
313
|
+
this.setColor(value);
|
|
314
|
+
this.updateSelectorPosition();
|
|
315
|
+
}
|
|
316
|
+
setColor(value) {
|
|
317
|
+
if (this._color === value)
|
|
318
|
+
return;
|
|
319
|
+
this._color = value;
|
|
320
|
+
this.ColorChange.emit(value);
|
|
321
|
+
}
|
|
322
|
+
ngAfterViewInit() {
|
|
323
|
+
let canvas = this._canvas.nativeElement;
|
|
324
|
+
canvas.width = parseInt(this.Width ?? '300');
|
|
325
|
+
canvas.height = parseInt(this.Height ?? '300');
|
|
326
|
+
let context = this._context = canvas.getContext('2d', { willReadFrequently: true });
|
|
327
|
+
let radius = canvas.width / 2;
|
|
328
|
+
// Draw hue circle
|
|
329
|
+
for (let angle = 0; angle < 360; angle++) {
|
|
330
|
+
let startAngle = (angle - 1) * (Math.PI / 180);
|
|
331
|
+
let endAngle = (angle + 1) * (Math.PI / 180);
|
|
332
|
+
context.beginPath();
|
|
333
|
+
context.moveTo(radius, radius);
|
|
334
|
+
context.arc(radius, radius, radius * 2, startAngle, endAngle);
|
|
335
|
+
context.closePath();
|
|
336
|
+
context.fillStyle = `hsl(${angle}, 100%, 50%)`;
|
|
337
|
+
context.fill();
|
|
338
|
+
}
|
|
339
|
+
// Add radial gradient for saturation
|
|
340
|
+
let gradient = context.createRadialGradient(radius, radius, 0, radius, radius, radius);
|
|
341
|
+
gradient.addColorStop(0, 'white');
|
|
342
|
+
gradient.addColorStop(1, 'transparent');
|
|
343
|
+
context.fillStyle = gradient;
|
|
344
|
+
context.fillRect(0, 0, canvas.width, canvas.height);
|
|
345
|
+
// Position sample
|
|
346
|
+
this.updateSelectorPosition();
|
|
347
|
+
}
|
|
348
|
+
onPointerDown(event) {
|
|
349
|
+
this._canvas.nativeElement.setPointerCapture(event.pointerId);
|
|
350
|
+
this.onPointerMove(event);
|
|
351
|
+
}
|
|
352
|
+
onPointerMove(event) {
|
|
353
|
+
if (!this._canvas.nativeElement.hasPointerCapture(event.pointerId))
|
|
354
|
+
return;
|
|
355
|
+
let radius = this._canvas.nativeElement.width / 2;
|
|
356
|
+
let rawX = event.offsetX - radius;
|
|
357
|
+
let rawY = event.offsetY - radius;
|
|
358
|
+
let length = Math.sqrt(rawX * rawX + rawY * rawY);
|
|
359
|
+
let scale = length < radius ? 1 : radius / Math.sqrt(rawX * rawX + rawY * rawY);
|
|
360
|
+
let sampleX = radius + rawX * scale;
|
|
361
|
+
let sampleY = radius + rawY * scale;
|
|
362
|
+
this._selector.nativeElement.style.left = sampleX + 'px';
|
|
363
|
+
this._selector.nativeElement.style.top = sampleY + 'px';
|
|
364
|
+
let imageData = this._context.getImageData(sampleX, sampleY, 1, 1).data;
|
|
365
|
+
let [r, g, b] = imageData;
|
|
366
|
+
let color = ((r << 24) + (g << 16) + (b << 8) + 0xff) >>> 0;
|
|
367
|
+
this.setColor(color);
|
|
368
|
+
}
|
|
369
|
+
updateSelectorPosition() {
|
|
370
|
+
let rgb = colorToRgb(this.Color);
|
|
371
|
+
let hsl = rgbToHsl(rgb);
|
|
372
|
+
let radius = this._canvas.nativeElement.width / 2;
|
|
373
|
+
let angle = hsl.h / 180 * Math.PI;
|
|
374
|
+
let length = hsl.s / 100 * radius;
|
|
375
|
+
let x = radius + Math.cos(angle) * length;
|
|
376
|
+
let y = radius + Math.sin(angle) * length;
|
|
377
|
+
this._selector.nativeElement.style.left = x + 'px';
|
|
378
|
+
this._selector.nativeElement.style.top = y + 'px';
|
|
379
|
+
}
|
|
380
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ColorPickerComponent, isStandalone: true, selector: "ColorPicker", inputs: { Color: "Color" }, outputs: { ColorChange: "ColorChange" }, viewQueries: [{ propertyName: "_canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "_selector", first: true, predicate: ["selector"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<canvas #canvas (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)"></canvas><div #selector class="selector"></div>`, isInline: true, styles: [":host{position:relative}canvas{clip-path:circle(50%);position:relative}.selector{position:absolute;transform:translate(-50%,-50%);width:10px;height:10px;border-color:#fff;border-width:2px;border-style:solid;border-radius:10px;mix-blend-mode:difference}\n"] }); }
|
|
382
|
+
}
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
384
|
+
type: Component,
|
|
385
|
+
args: [{ selector: 'ColorPicker', template: `<canvas #canvas (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)"></canvas><div #selector class="selector"></div>`, styles: [":host{position:relative}canvas{clip-path:circle(50%);position:relative}.selector{position:absolute;transform:translate(-50%,-50%);width:10px;height:10px;border-color:#fff;border-width:2px;border-style:solid;border-radius:10px;mix-blend-mode:difference}\n"] }]
|
|
386
|
+
}], propDecorators: { Color: [{
|
|
387
|
+
type: Input
|
|
388
|
+
}], ColorChange: [{
|
|
389
|
+
type: Output
|
|
390
|
+
}], _canvas: [{
|
|
391
|
+
type: ViewChild,
|
|
392
|
+
args: ['canvas']
|
|
393
|
+
}], _selector: [{
|
|
394
|
+
type: ViewChild,
|
|
395
|
+
args: ['selector']
|
|
396
|
+
}] } });
|
|
397
|
+
|
|
258
398
|
const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
|
|
259
399
|
<ng-container *ngTemplateOutlet="ItemTemplate; context: { $implicit: item }"/>
|
|
260
400
|
</ng-container>
|
|
@@ -512,7 +652,7 @@ class ScrollBarComponent extends FrameworkElementComponent {
|
|
|
512
652
|
<div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
|
|
513
653
|
<div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
|
|
514
654
|
</div>
|
|
515
|
-
<div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, isInline: true, styles: [":host{
|
|
655
|
+
<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
656
|
}
|
|
517
657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollBarComponent, decorators: [{
|
|
518
658
|
type: Component,
|
|
@@ -520,7 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
520
660
|
<div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
|
|
521
661
|
<div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
|
|
522
662
|
</div>
|
|
523
|
-
<div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, styles: [":host{
|
|
663
|
+
<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
664
|
}], propDecorators: { Orientation: [{
|
|
525
665
|
type: Input
|
|
526
666
|
}], ViewportSize: [{
|
|
@@ -645,17 +785,16 @@ class StackPanelComponent extends PanelComponent {
|
|
|
645
785
|
constructor() {
|
|
646
786
|
super(...arguments);
|
|
647
787
|
this.Orientation = 'Vertical';
|
|
648
|
-
this.Spacing = 0;
|
|
649
788
|
}
|
|
650
|
-
get
|
|
651
|
-
return this.Orientation === 'Horizontal' ? '
|
|
789
|
+
get gridAutoColumns() {
|
|
790
|
+
return this.Orientation === 'Horizontal' ? 'column' : 'row';
|
|
652
791
|
}
|
|
653
792
|
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.
|
|
793
|
+
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.grid-auto-flow": "this.gridAutoColumns" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
|
|
655
794
|
}
|
|
656
795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanelComponent, decorators: [{
|
|
657
796
|
type: Component,
|
|
658
|
-
args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:
|
|
797
|
+
args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
|
|
659
798
|
}], propDecorators: { Orientation: [{
|
|
660
799
|
type: Input
|
|
661
800
|
}], Spacing: [{
|
|
@@ -663,14 +802,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
663
802
|
}, {
|
|
664
803
|
type: HostBinding,
|
|
665
804
|
args: ['style.gap']
|
|
666
|
-
}],
|
|
805
|
+
}], gridAutoColumns: [{
|
|
667
806
|
type: HostBinding,
|
|
668
|
-
args: ['style.
|
|
807
|
+
args: ['style.grid-auto-flow']
|
|
669
808
|
}] } });
|
|
670
809
|
|
|
671
810
|
class ListViewComponent extends SelectorComponent {
|
|
672
811
|
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{
|
|
812
|
+
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
813
|
}
|
|
675
814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
676
815
|
type: Component,
|
|
@@ -681,11 +820,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
681
820
|
<div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
|
|
682
821
|
</div>
|
|
683
822
|
</StackPanel>
|
|
684
|
-
</ScrollViewer>`, styles: [":host{
|
|
823
|
+
</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
824
|
}] });
|
|
686
825
|
|
|
687
826
|
class PopupComponent {
|
|
688
827
|
constructor() {
|
|
828
|
+
this._title = '';
|
|
689
829
|
this.isRendered = false;
|
|
690
830
|
this._isOpen = false;
|
|
691
831
|
this.IsOpenChange = new EventEmitter();
|
|
@@ -721,17 +861,17 @@ class PopupComponent {
|
|
|
721
861
|
this.IsOpen = false;
|
|
722
862
|
}
|
|
723
863
|
get containerClass() {
|
|
724
|
-
return this.IsOpen ? '
|
|
864
|
+
return this.IsOpen ? 'flyout-open' : undefined;
|
|
725
865
|
}
|
|
726
866
|
onBackdropClick(event) {
|
|
727
867
|
this.Hide();
|
|
728
|
-
event.
|
|
868
|
+
event.stopImmediatePropagation();
|
|
729
869
|
}
|
|
730
870
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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>
|
|
871
|
+
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: { properties: { "attr.title": "this._title" }, classAttribute: "popup" }, providers: [{ provide: 'xaml-flyout', useExisting: PopupComponent }], 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
872
|
<div #container class="popup-container" [ngClass]="containerClass">
|
|
733
873
|
<div class="popup-content" *ngIf="isRendered"><ng-content/></div>
|
|
734
|
-
</div>`, isInline: true, styles: [":host{
|
|
874
|
+
</div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;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 #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;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
875
|
}
|
|
736
876
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, decorators: [{
|
|
737
877
|
type: Component,
|
|
@@ -739,9 +879,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
739
879
|
<div #container class="popup-container" [ngClass]="containerClass">
|
|
740
880
|
<div class="popup-content" *ngIf="isRendered"><ng-content/></div>
|
|
741
881
|
</div>`, host: {
|
|
742
|
-
class: 'popup'
|
|
743
|
-
},
|
|
744
|
-
}], propDecorators: {
|
|
882
|
+
'class': 'popup',
|
|
883
|
+
}, providers: [{ provide: 'xaml-flyout', useExisting: PopupComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;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 #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"] }]
|
|
884
|
+
}], propDecorators: { _title: [{
|
|
885
|
+
type: HostBinding,
|
|
886
|
+
args: ['attr.title']
|
|
887
|
+
}], IsOpen: [{
|
|
745
888
|
type: Input
|
|
746
889
|
}], IsOpenChange: [{
|
|
747
890
|
type: Output
|
|
@@ -756,11 +899,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
756
899
|
|
|
757
900
|
class DropDownButtonComponent extends ButtonComponent {
|
|
758
901
|
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{
|
|
902
|
+
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(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.flyout-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(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }); }
|
|
760
903
|
}
|
|
761
904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, decorators: [{
|
|
762
905
|
type: Component,
|
|
763
|
-
args: [{ selector: 'DropDownButton', template: `<div class="drop-down-glyph"></div><ng-content/>`, styles: [":host{
|
|
906
|
+
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(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.flyout-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(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }]
|
|
764
907
|
}] });
|
|
765
908
|
|
|
766
909
|
class ComboBoxComponent extends SelectorComponent {
|
|
@@ -811,40 +954,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
811
954
|
}] } });
|
|
812
955
|
|
|
813
956
|
class RadioButtonComponent extends BorderComponent {
|
|
814
|
-
|
|
815
|
-
|
|
957
|
+
onChange(event) {
|
|
958
|
+
this.IsChecked = (event.target).checked;
|
|
959
|
+
this.IsCheckedChange.emit(this.IsChecked);
|
|
960
|
+
}
|
|
961
|
+
constructor(_group) {
|
|
962
|
+
super();
|
|
963
|
+
this._group = _group;
|
|
816
964
|
this.IsEnabled = true;
|
|
817
965
|
this.IsChecked = false;
|
|
818
966
|
this.IsCheckedChange = new EventEmitter();
|
|
819
967
|
this.Group = "";
|
|
968
|
+
if (this._group)
|
|
969
|
+
this._group.registerOption(this);
|
|
820
970
|
}
|
|
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 }); }
|
|
971
|
+
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
972
|
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)="
|
|
973
|
+
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
828
974
|
<div class="radioButton">
|
|
829
975
|
<div class="circle"></div>
|
|
830
976
|
</div>
|
|
831
977
|
<div class="content">
|
|
832
978
|
<ng-content/>
|
|
833
979
|
</div>
|
|
834
|
-
</label>`, isInline: true, styles: [":host{
|
|
980
|
+
</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
981
|
}
|
|
836
982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
837
983
|
type: Component,
|
|
838
984
|
args: [{ selector: 'RadioButton', template: `<label class="container">
|
|
839
|
-
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="
|
|
985
|
+
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
840
986
|
<div class="radioButton">
|
|
841
987
|
<div class="circle"></div>
|
|
842
988
|
</div>
|
|
843
989
|
<div class="content">
|
|
844
990
|
<ng-content/>
|
|
845
991
|
</div>
|
|
846
|
-
</label>`, styles: [":host{
|
|
847
|
-
}],
|
|
992
|
+
</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"] }]
|
|
993
|
+
}], ctorParameters: () => [{ type: RadioButtonGroup, decorators: [{
|
|
994
|
+
type: Optional
|
|
995
|
+
}] }], propDecorators: { IsEnabled: [{
|
|
848
996
|
type: Input
|
|
849
997
|
}], IsChecked: [{
|
|
850
998
|
type: Input
|
|
@@ -859,11 +1007,12 @@ class RadioButtonGroup extends StackPanelComponent {
|
|
|
859
1007
|
constructor() {
|
|
860
1008
|
super(...arguments);
|
|
861
1009
|
this.ValueChange = new EventEmitter();
|
|
1010
|
+
this._children = [];
|
|
862
1011
|
}
|
|
863
1012
|
set Value(value) {
|
|
864
1013
|
if (this._children) {
|
|
865
1014
|
for (let item of this._children) {
|
|
866
|
-
if (item.Value
|
|
1015
|
+
if (item.Value === value) {
|
|
867
1016
|
item.IsChecked = true;
|
|
868
1017
|
break;
|
|
869
1018
|
}
|
|
@@ -876,33 +1025,73 @@ class RadioButtonGroup extends StackPanelComponent {
|
|
|
876
1025
|
get Value() {
|
|
877
1026
|
return this._value;
|
|
878
1027
|
}
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
});
|
|
891
|
-
}
|
|
1028
|
+
registerOption(child) {
|
|
1029
|
+
child.Group = 'xaml-radio-button-group-' + this._id;
|
|
1030
|
+
if (child.Value === undefined)
|
|
1031
|
+
child.Value = this._children.length;
|
|
1032
|
+
if (child.Value === this.Value)
|
|
1033
|
+
child.IsChecked = true;
|
|
1034
|
+
child.IsCheckedChange.subscribe(p => {
|
|
1035
|
+
this.Value = child.Value;
|
|
1036
|
+
this.ValueChange.emit(child.Value);
|
|
1037
|
+
});
|
|
1038
|
+
this._children.push(child);
|
|
892
1039
|
}
|
|
893
1040
|
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" },
|
|
1041
|
+
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
1042
|
}
|
|
896
1043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, decorators: [{
|
|
897
1044
|
type: Component,
|
|
898
|
-
args: [{ selector: 'RadioButtonGroup', template: `<ng-
|
|
1045
|
+
args: [{ selector: 'RadioButtonGroup', template: `<ng-content/>`, styles: [":host{display:contents}\n"] }]
|
|
899
1046
|
}], propDecorators: { Value: [{
|
|
900
1047
|
type: Input
|
|
901
1048
|
}], ValueChange: [{
|
|
902
1049
|
type: Output
|
|
903
|
-
}]
|
|
904
|
-
|
|
905
|
-
|
|
1050
|
+
}] } });
|
|
1051
|
+
|
|
1052
|
+
class RepeatButtonComponent extends ButtonComponent {
|
|
1053
|
+
constructor() {
|
|
1054
|
+
super(...arguments);
|
|
1055
|
+
this.Delay = 250;
|
|
1056
|
+
this.Interval = 250;
|
|
1057
|
+
}
|
|
1058
|
+
onPointerDown(event) {
|
|
1059
|
+
if (!this.IsEnabled)
|
|
1060
|
+
return;
|
|
1061
|
+
event.target.setPointerCapture(event.pointerId);
|
|
1062
|
+
this.Click.emit();
|
|
1063
|
+
this._delayTimer = setTimeout(() => {
|
|
1064
|
+
this.Click.emit();
|
|
1065
|
+
this._intervalTimer = setInterval(() => {
|
|
1066
|
+
this.Click.emit();
|
|
1067
|
+
}, this.Interval);
|
|
1068
|
+
}, this.Delay);
|
|
1069
|
+
}
|
|
1070
|
+
onPointerUp() {
|
|
1071
|
+
if (this._delayTimer !== undefined)
|
|
1072
|
+
clearTimeout(this._delayTimer);
|
|
1073
|
+
if (this._intervalTimer !== undefined)
|
|
1074
|
+
clearInterval(this._intervalTimer);
|
|
1075
|
+
}
|
|
1076
|
+
onHostPointerEvent(event) {
|
|
1077
|
+
//Disable pointer event handling on the base button
|
|
1078
|
+
}
|
|
1079
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1080
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RepeatButtonComponent, isStandalone: true, selector: "RepeatButton", inputs: { Delay: "Delay", Interval: "Interval" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" } }, 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(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.flyout-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(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-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"] }); }
|
|
1081
|
+
}
|
|
1082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, decorators: [{
|
|
1083
|
+
type: Component,
|
|
1084
|
+
args: [{ selector: 'RepeatButton', 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(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.flyout-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(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-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"] }]
|
|
1085
|
+
}], propDecorators: { Delay: [{
|
|
1086
|
+
type: Input
|
|
1087
|
+
}], Interval: [{
|
|
1088
|
+
type: Input
|
|
1089
|
+
}], onPointerDown: [{
|
|
1090
|
+
type: HostListener,
|
|
1091
|
+
args: ['pointerdown', ['$event']]
|
|
1092
|
+
}], onPointerUp: [{
|
|
1093
|
+
type: HostListener,
|
|
1094
|
+
args: ['pointerup', ['$event']]
|
|
906
1095
|
}] } });
|
|
907
1096
|
|
|
908
1097
|
class SliderComponent extends FrameworkElementComponent {
|
|
@@ -916,7 +1105,7 @@ class SliderComponent extends FrameworkElementComponent {
|
|
|
916
1105
|
this.IsEnabled = true;
|
|
917
1106
|
this.Orientation = 'Horizontal';
|
|
918
1107
|
}
|
|
919
|
-
|
|
1108
|
+
onChange(event) {
|
|
920
1109
|
this.Value = parseFloat(event.target.value);
|
|
921
1110
|
this.ValueChange.emit(this.Value);
|
|
922
1111
|
}
|
|
@@ -926,9 +1115,9 @@ class SliderComponent extends FrameworkElementComponent {
|
|
|
926
1115
|
[max]="Maximum"
|
|
927
1116
|
[value]="Value"
|
|
928
1117
|
[step]="StepFrequency"
|
|
929
|
-
(change)="
|
|
1118
|
+
(change)="onChange($event)"
|
|
930
1119
|
[disabled]="!IsEnabled"
|
|
931
|
-
[className]="Orientation.toLowerCase()">`, isInline: true, styles: [":host{
|
|
1120
|
+
[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
1121
|
}
|
|
933
1122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, decorators: [{
|
|
934
1123
|
type: Component,
|
|
@@ -937,9 +1126,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
937
1126
|
[max]="Maximum"
|
|
938
1127
|
[value]="Value"
|
|
939
1128
|
[step]="StepFrequency"
|
|
940
|
-
(change)="
|
|
1129
|
+
(change)="onChange($event)"
|
|
941
1130
|
[disabled]="!IsEnabled"
|
|
942
|
-
[className]="Orientation.toLowerCase()">`, styles: [":host{
|
|
1131
|
+
[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
1132
|
}], propDecorators: { Minimum: [{
|
|
944
1133
|
type: Input
|
|
945
1134
|
}], Maximum: [{
|
|
@@ -956,183 +1145,410 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
956
1145
|
type: Input
|
|
957
1146
|
}] } });
|
|
958
1147
|
|
|
959
|
-
class
|
|
1148
|
+
class GridComponent extends PanelComponent {
|
|
960
1149
|
constructor() {
|
|
961
1150
|
super(...arguments);
|
|
962
|
-
this.
|
|
963
|
-
this.IsCheckedChange = new EventEmitter();
|
|
1151
|
+
this.Orientation = 'Horizontal';
|
|
964
1152
|
}
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
return;
|
|
968
|
-
this.IsChecked = !this.IsChecked;
|
|
969
|
-
this.IsCheckedChange.emit(this.IsChecked);
|
|
1153
|
+
get gridAutoFlow() {
|
|
1154
|
+
return this.Orientation == 'Horizontal' ? 'row' : 'column';
|
|
970
1155
|
}
|
|
971
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
972
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type:
|
|
1156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1157
|
+
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"] }); }
|
|
973
1158
|
}
|
|
974
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
1159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, decorators: [{
|
|
975
1160
|
type: Component,
|
|
976
|
-
args: [{ selector: '
|
|
977
|
-
}], propDecorators: {
|
|
1161
|
+
args: [{ selector: 'Grid', template: `<ng-content/>`, standalone: false, styles: [":host{display:grid;position:relative}\n"] }]
|
|
1162
|
+
}], propDecorators: { ColumnDefinitions: [{
|
|
978
1163
|
type: Input
|
|
979
1164
|
}, {
|
|
980
1165
|
type: HostBinding,
|
|
981
|
-
args: ['
|
|
982
|
-
}],
|
|
983
|
-
type:
|
|
984
|
-
}
|
|
985
|
-
type:
|
|
986
|
-
args: ['
|
|
1166
|
+
args: ['style.grid-template-columns']
|
|
1167
|
+
}], RowDefinitions: [{
|
|
1168
|
+
type: Input
|
|
1169
|
+
}, {
|
|
1170
|
+
type: HostBinding,
|
|
1171
|
+
args: ['style.grid-template-rows']
|
|
1172
|
+
}], ColumnSpacing: [{
|
|
1173
|
+
type: Input
|
|
1174
|
+
}, {
|
|
1175
|
+
type: HostBinding,
|
|
1176
|
+
args: ['style.column-gap']
|
|
1177
|
+
}], RowSpacing: [{
|
|
1178
|
+
type: Input
|
|
1179
|
+
}, {
|
|
1180
|
+
type: HostBinding,
|
|
1181
|
+
args: ['style.row-gap']
|
|
1182
|
+
}], Orientation: [{
|
|
1183
|
+
type: Input
|
|
1184
|
+
}], gridAutoFlow: [{
|
|
1185
|
+
type: HostBinding,
|
|
1186
|
+
args: ['style.grid-auto-flow']
|
|
987
1187
|
}] } });
|
|
988
|
-
|
|
989
|
-
class ToggleSwitchComponent extends CheckBoxComponent {
|
|
990
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
991
|
-
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)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
|
|
993
|
-
<div class="slider">
|
|
994
|
-
<div class="thumb"></div>
|
|
995
|
-
</div>
|
|
996
|
-
<div class="content"><ng-content/></div>
|
|
997
|
-
</label>`, isInline: true, styles: [":host{--ControlBorderThickness: 1px;--ControlCornerRadius: 4px;--OverlayCornerRadius: 8px;--AcrylicBlur: blur(12px);--SymbolFontFamily: \"Segoe Fluent Icons\", \"Segoe MDL2 Assets\";--SystemAccentColor: #0078d4;--ControlNormalAnimationDuration: .25s;--ControlFastAnimationDuration: .167s;--ControlFasterAnimationDuration: 83ms;--ControlFillColorDefault: #FFFFFF0F;--ControlFillColorSecondary: #FFFFFF15;--ControlFillColorTertiary: #FFFFFF08;--ControlFillColorDisabled: #FFFFFF0B;--ControlFillColorInputActive: #1E1E1EB3;--ControlSolidFillColorDefault: #454545FF;--ControlAltFillColorSecondary: #00000019;--ControlAltFillColorTertiary: #FFFFFF0B;--ControlAltFillColorQuarternary: #FFFFFF12;--ControlAltFillColorDisabled: #FFFFFF00;--ControlStrongFillColorDefault: #FFFFFF8B;--ControlStrongFillColorDisabled: #FFFFFF3F;--ControlFillColorTransparent: #FFFFFF00;--SubtleFillColorTransparent: #FFFFFF00;--SubtleFillColorSecondary: #FFFFFF0F;--SubtleFillColorTertiary: #FFFFFF0A;--AccentFillColorDefault: #4CC2FFFF;--AccentFillColorSecondary: #4CC2FFE6;--AccentFillColorTertiary: #4CC2FFCC;--AccentFillColorDisabled: #FFFFFF28;--SystemControlHighlightListAccentLow: #0078D499;--SystemControlHighlightListAccentMedium: #0078D4CC;--SystemControlHighlightListAccentHigh: #0078D4E6;--ControlStrokeColorDefault: #FFFFFF12;--ControlStrongStrokeColorDefault: #FFFFFF8B;--ControlStrongStrokeColorDisabled: #FFFFFF28;--ControlStrokeColorOnAccentDefault: #FFFFFF14;--TextFillColorPrimary: #FFFFFFFF;--TextFillColorSecondary: #FFFFFFC5;--TextFillColorDisabled: #FFFFFF5D;--TextOnAccentFillColorPrimary: #000000;--TextOnAccentFillColorSecondary: #00000080;--TextOnAccentFillColorDisabled: #FFFFFF87;--SurfaceStrokeColorFlyout: #00000033;--AcrylicInAppFillColorDefault: #2C2C2C26;--SystemChromeMediumLowColor: #2B2B2BFF;--DividerStrokeColorDefault: #FFFFFF15}@media (prefers-color-scheme: light){:host{--ControlFillColorDefault: #FFFFFFB3;--ControlFillColorSecondary: #F9F9F980;--ControlFillColorTertiary: #F9F9F94D;--ControlFillColorDisabled: #F9F9F94D;--ControlFillColorInputActive: #FFFFFF;--ControlSolidFillColorDefault: #FFFFFFFF;--ControlAltFillColorSecondary: #00000006;--ControlAltFillColorTertiary: #0000000F;--ControlAltFillColorQuarternary: #00000018;--ControlAltFillColorDisabled: #FFFFFF00;--ControlStrongFillColorDefault: #00000072;--ControlStrongFillColorDisabled: #00000051;--ControlFillColorTransparent: #FFFFFF00;--SubtleFillColorTransparent: #FFFFFF00;--SubtleFillColorSecondary: #00000009;--SubtleFillColorTertiary: #00000006;--AccentFillColorDefault: #0067C0FF;--AccentFillColorSecondary: #0067C0E6;--AccentFillColorTertiary: #0067C0CC;--AccentFillColorDisabled: #FFFFFF37;--SystemControlHighlightListAccentLow: #0078D466;--SystemControlHighlightListAccentMedium: #0078D499;--SystemControlHighlightListAccentHigh: #0078D4B3;--ControlStrokeColorDefault: #0000000F;--ControlStrongStrokeColorDefault: #00000072;--ControlStrongStrokeColorDisabled: #00000037;--ControlStrokeColorOnAccentDefault: #FFFFFF14;--TextFillColorPrimary: #000000E4;--TextFillColorSecondary: #0000009E;--TextFillColorDisabled: #0000005C;--TextOnAccentFillColorPrimary: #FFFFFF;--TextOnAccentFillColorSecondary: #FFFFFFB3;--TextOnAccentFillColorDisabled: #FFFFFF;--SurfaceStrokeColorFlyout: #0000000F;--AcrylicInAppFillColorDefault: #FCFCFC26;--SystemChromeMediumLowColor: #F2F2F2FF;--DividerStrokeColorDefault: #0000000F}}.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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
|
|
1000
|
-
type: Component,
|
|
1001
|
-
args: [{ selector: 'ToggleSwitch', template: `<label class="container">
|
|
1002
|
-
<input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
|
|
1003
|
-
<div class="slider">
|
|
1004
|
-
<div class="thumb"></div>
|
|
1005
|
-
</div>
|
|
1006
|
-
<div class="content"><ng-content/></div>
|
|
1007
|
-
</label>`, styles: [":host{--ControlBorderThickness: 1px;--ControlCornerRadius: 4px;--OverlayCornerRadius: 8px;--AcrylicBlur: blur(12px);--SymbolFontFamily: \"Segoe Fluent Icons\", \"Segoe MDL2 Assets\";--SystemAccentColor: #0078d4;--ControlNormalAnimationDuration: .25s;--ControlFastAnimationDuration: .167s;--ControlFasterAnimationDuration: 83ms;--ControlFillColorDefault: #FFFFFF0F;--ControlFillColorSecondary: #FFFFFF15;--ControlFillColorTertiary: #FFFFFF08;--ControlFillColorDisabled: #FFFFFF0B;--ControlFillColorInputActive: #1E1E1EB3;--ControlSolidFillColorDefault: #454545FF;--ControlAltFillColorSecondary: #00000019;--ControlAltFillColorTertiary: #FFFFFF0B;--ControlAltFillColorQuarternary: #FFFFFF12;--ControlAltFillColorDisabled: #FFFFFF00;--ControlStrongFillColorDefault: #FFFFFF8B;--ControlStrongFillColorDisabled: #FFFFFF3F;--ControlFillColorTransparent: #FFFFFF00;--SubtleFillColorTransparent: #FFFFFF00;--SubtleFillColorSecondary: #FFFFFF0F;--SubtleFillColorTertiary: #FFFFFF0A;--AccentFillColorDefault: #4CC2FFFF;--AccentFillColorSecondary: #4CC2FFE6;--AccentFillColorTertiary: #4CC2FFCC;--AccentFillColorDisabled: #FFFFFF28;--SystemControlHighlightListAccentLow: #0078D499;--SystemControlHighlightListAccentMedium: #0078D4CC;--SystemControlHighlightListAccentHigh: #0078D4E6;--ControlStrokeColorDefault: #FFFFFF12;--ControlStrongStrokeColorDefault: #FFFFFF8B;--ControlStrongStrokeColorDisabled: #FFFFFF28;--ControlStrokeColorOnAccentDefault: #FFFFFF14;--TextFillColorPrimary: #FFFFFFFF;--TextFillColorSecondary: #FFFFFFC5;--TextFillColorDisabled: #FFFFFF5D;--TextOnAccentFillColorPrimary: #000000;--TextOnAccentFillColorSecondary: #00000080;--TextOnAccentFillColorDisabled: #FFFFFF87;--SurfaceStrokeColorFlyout: #00000033;--AcrylicInAppFillColorDefault: #2C2C2C26;--SystemChromeMediumLowColor: #2B2B2BFF;--DividerStrokeColorDefault: #FFFFFF15}@media (prefers-color-scheme: light){:host{--ControlFillColorDefault: #FFFFFFB3;--ControlFillColorSecondary: #F9F9F980;--ControlFillColorTertiary: #F9F9F94D;--ControlFillColorDisabled: #F9F9F94D;--ControlFillColorInputActive: #FFFFFF;--ControlSolidFillColorDefault: #FFFFFFFF;--ControlAltFillColorSecondary: #00000006;--ControlAltFillColorTertiary: #0000000F;--ControlAltFillColorQuarternary: #00000018;--ControlAltFillColorDisabled: #FFFFFF00;--ControlStrongFillColorDefault: #00000072;--ControlStrongFillColorDisabled: #00000051;--ControlFillColorTransparent: #FFFFFF00;--SubtleFillColorTransparent: #FFFFFF00;--SubtleFillColorSecondary: #00000009;--SubtleFillColorTertiary: #00000006;--AccentFillColorDefault: #0067C0FF;--AccentFillColorSecondary: #0067C0E6;--AccentFillColorTertiary: #0067C0CC;--AccentFillColorDisabled: #FFFFFF37;--SystemControlHighlightListAccentLow: #0078D466;--SystemControlHighlightListAccentMedium: #0078D499;--SystemControlHighlightListAccentHigh: #0078D4B3;--ControlStrokeColorDefault: #0000000F;--ControlStrongStrokeColorDefault: #00000072;--ControlStrongStrokeColorDisabled: #00000037;--ControlStrokeColorOnAccentDefault: #FFFFFF14;--TextFillColorPrimary: #000000E4;--TextFillColorSecondary: #0000009E;--TextFillColorDisabled: #0000005C;--TextOnAccentFillColorPrimary: #FFFFFF;--TextOnAccentFillColorSecondary: #FFFFFFB3;--TextOnAccentFillColorDisabled: #FFFFFF;--SurfaceStrokeColorFlyout: #0000000F;--AcrylicInAppFillColorDefault: #FCFCFC26;--SystemChromeMediumLowColor: #F2F2F2FF;--DividerStrokeColorDefault: #0000000F}}.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
|
-
|
|
1010
|
-
class ListBoxComponent extends SelectorComponent {
|
|
1011
|
-
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{--ControlBorderThickness: 1px;--ControlCornerRadius: 4px;--OverlayCornerRadius: 8px;--AcrylicBlur: blur(12px);--SymbolFontFamily: \"Segoe Fluent Icons\", \"Segoe MDL2 Assets\";--SystemAccentColor: #0078d4;--ControlNormalAnimationDuration: .25s;--ControlFastAnimationDuration: .167s;--ControlFasterAnimationDuration: 83ms;--ControlFillColorDefault: #FFFFFF0F;--ControlFillColorSecondary: #FFFFFF15;--ControlFillColorTertiary: #FFFFFF08;--ControlFillColorDisabled: #FFFFFF0B;--ControlFillColorInputActive: #1E1E1EB3;--ControlSolidFillColorDefault: #454545FF;--ControlAltFillColorSecondary: #00000019;--ControlAltFillColorTertiary: #FFFFFF0B;--ControlAltFillColorQuarternary: #FFFFFF12;--ControlAltFillColorDisabled: #FFFFFF00;--ControlStrongFillColorDefault: #FFFFFF8B;--ControlStrongFillColorDisabled: #FFFFFF3F;--ControlFillColorTransparent: #FFFFFF00;--SubtleFillColorTransparent: #FFFFFF00;--SubtleFillColorSecondary: #FFFFFF0F;--SubtleFillColorTertiary: #FFFFFF0A;--AccentFillColorDefault: #4CC2FFFF;--AccentFillColorSecondary: #4CC2FFE6;--AccentFillColorTertiary: #4CC2FFCC;--AccentFillColorDisabled: #FFFFFF28;--SystemControlHighlightListAccentLow: #0078D499;--SystemControlHighlightListAccentMedium: #0078D4CC;--SystemControlHighlightListAccentHigh: #0078D4E6;--ControlStrokeColorDefault: #FFFFFF12;--ControlStrongStrokeColorDefault: #FFFFFF8B;--ControlStrongStrokeColorDisabled: #FFFFFF28;--ControlStrokeColorOnAccentDefault: #FFFFFF14;--TextFillColorPrimary: #FFFFFFFF;--TextFillColorSecondary: #FFFFFFC5;--TextFillColorDisabled: #FFFFFF5D;--TextOnAccentFillColorPrimary: #000000;--TextOnAccentFillColorSecondary: #00000080;--TextOnAccentFillColorDisabled: #FFFFFF87;--SurfaceStrokeColorFlyout: #00000033;--AcrylicInAppFillColorDefault: #2C2C2C26;--SystemChromeMediumLowColor: #2B2B2BFF;--DividerStrokeColorDefault: #FFFFFF15}@media (prefers-color-scheme: light){:host{--ControlFillColorDefault: #FFFFFFB3;--ControlFillColorSecondary: #F9F9F980;--ControlFillColorTertiary: #F9F9F94D;--ControlFillColorDisabled: #F9F9F94D;--ControlFillColorInputActive: #FFFFFF;--ControlSolidFillColorDefault: #FFFFFFFF;--ControlAltFillColorSecondary: #00000006;--ControlAltFillColorTertiary: #0000000F;--ControlAltFillColorQuarternary: #00000018;--ControlAltFillColorDisabled: #FFFFFF00;--ControlStrongFillColorDefault: #00000072;--ControlStrongFillColorDisabled: #00000051;--ControlFillColorTransparent: #FFFFFF00;--SubtleFillColorTransparent: #FFFFFF00;--SubtleFillColorSecondary: #00000009;--SubtleFillColorTertiary: #00000006;--AccentFillColorDefault: #0067C0FF;--AccentFillColorSecondary: #0067C0E6;--AccentFillColorTertiary: #0067C0CC;--AccentFillColorDisabled: #FFFFFF37;--SystemControlHighlightListAccentLow: #0078D466;--SystemControlHighlightListAccentMedium: #0078D499;--SystemControlHighlightListAccentHigh: #0078D4B3;--ControlStrokeColorDefault: #0000000F;--ControlStrongStrokeColorDefault: #00000072;--ControlStrongStrokeColorDisabled: #00000037;--ControlStrokeColorOnAccentDefault: #FFFFFF14;--TextFillColorPrimary: #000000E4;--TextFillColorSecondary: #0000009E;--TextFillColorDisabled: #0000005C;--TextOnAccentFillColorPrimary: #FFFFFF;--TextOnAccentFillColorSecondary: #FFFFFFB3;--TextOnAccentFillColorDisabled: #FFFFFF;--SurfaceStrokeColorFlyout: #0000000F;--AcrylicInAppFillColorDefault: #FCFCFC26;--SystemChromeMediumLowColor: #F2F2F2FF;--DividerStrokeColorDefault: #0000000F}}: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"] }] }); }
|
|
1188
|
+
class GridProperty {
|
|
1013
1189
|
}
|
|
1014
|
-
|
|
1015
|
-
type: Component,
|
|
1016
|
-
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
|
-
${SelectorItemTemplate}
|
|
1018
|
-
</div>`, styles: [":host{--ControlBorderThickness: 1px;--ControlCornerRadius: 4px;--OverlayCornerRadius: 8px;--AcrylicBlur: blur(12px);--SymbolFontFamily: \"Segoe Fluent Icons\", \"Segoe MDL2 Assets\";--SystemAccentColor: #0078d4;--ControlNormalAnimationDuration: .25s;--ControlFastAnimationDuration: .167s;--ControlFasterAnimationDuration: 83ms;--ControlFillColorDefault: #FFFFFF0F;--ControlFillColorSecondary: #FFFFFF15;--ControlFillColorTertiary: #FFFFFF08;--ControlFillColorDisabled: #FFFFFF0B;--ControlFillColorInputActive: #1E1E1EB3;--ControlSolidFillColorDefault: #454545FF;--ControlAltFillColorSecondary: #00000019;--ControlAltFillColorTertiary: #FFFFFF0B;--ControlAltFillColorQuarternary: #FFFFFF12;--ControlAltFillColorDisabled: #FFFFFF00;--ControlStrongFillColorDefault: #FFFFFF8B;--ControlStrongFillColorDisabled: #FFFFFF3F;--ControlFillColorTransparent: #FFFFFF00;--SubtleFillColorTransparent: #FFFFFF00;--SubtleFillColorSecondary: #FFFFFF0F;--SubtleFillColorTertiary: #FFFFFF0A;--AccentFillColorDefault: #4CC2FFFF;--AccentFillColorSecondary: #4CC2FFE6;--AccentFillColorTertiary: #4CC2FFCC;--AccentFillColorDisabled: #FFFFFF28;--SystemControlHighlightListAccentLow: #0078D499;--SystemControlHighlightListAccentMedium: #0078D4CC;--SystemControlHighlightListAccentHigh: #0078D4E6;--ControlStrokeColorDefault: #FFFFFF12;--ControlStrongStrokeColorDefault: #FFFFFF8B;--ControlStrongStrokeColorDisabled: #FFFFFF28;--ControlStrokeColorOnAccentDefault: #FFFFFF14;--TextFillColorPrimary: #FFFFFFFF;--TextFillColorSecondary: #FFFFFFC5;--TextFillColorDisabled: #FFFFFF5D;--TextOnAccentFillColorPrimary: #000000;--TextOnAccentFillColorSecondary: #00000080;--TextOnAccentFillColorDisabled: #FFFFFF87;--SurfaceStrokeColorFlyout: #00000033;--AcrylicInAppFillColorDefault: #2C2C2C26;--SystemChromeMediumLowColor: #2B2B2BFF;--DividerStrokeColorDefault: #FFFFFF15}@media (prefers-color-scheme: light){:host{--ControlFillColorDefault: #FFFFFFB3;--ControlFillColorSecondary: #F9F9F980;--ControlFillColorTertiary: #F9F9F94D;--ControlFillColorDisabled: #F9F9F94D;--ControlFillColorInputActive: #FFFFFF;--ControlSolidFillColorDefault: #FFFFFFFF;--ControlAltFillColorSecondary: #00000006;--ControlAltFillColorTertiary: #0000000F;--ControlAltFillColorQuarternary: #00000018;--ControlAltFillColorDisabled: #FFFFFF00;--ControlStrongFillColorDefault: #00000072;--ControlStrongFillColorDisabled: #00000051;--ControlFillColorTransparent: #FFFFFF00;--SubtleFillColorTransparent: #FFFFFF00;--SubtleFillColorSecondary: #00000009;--SubtleFillColorTertiary: #00000006;--AccentFillColorDefault: #0067C0FF;--AccentFillColorSecondary: #0067C0E6;--AccentFillColorTertiary: #0067C0CC;--AccentFillColorDisabled: #FFFFFF37;--SystemControlHighlightListAccentLow: #0078D466;--SystemControlHighlightListAccentMedium: #0078D499;--SystemControlHighlightListAccentHigh: #0078D4B3;--ControlStrokeColorDefault: #0000000F;--ControlStrongStrokeColorDefault: #00000072;--ControlStrongStrokeColorDisabled: #00000037;--ControlStrokeColorOnAccentDefault: #FFFFFF14;--TextFillColorPrimary: #000000E4;--TextFillColorSecondary: #0000009E;--TextFillColorDisabled: #0000005C;--TextOnAccentFillColorPrimary: #FFFFFF;--TextOnAccentFillColorSecondary: #FFFFFFB3;--TextOnAccentFillColorDisabled: #FFFFFF;--SurfaceStrokeColorFlyout: #0000000F;--AcrylicInAppFillColorDefault: #FCFCFC26;--SystemChromeMediumLowColor: #F2F2F2FF;--DividerStrokeColorDefault: #0000000F}}: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
|
-
|
|
1021
|
-
class FlyoutComponent extends PopupComponent {
|
|
1190
|
+
class GridDirective {
|
|
1022
1191
|
constructor() {
|
|
1023
|
-
|
|
1024
|
-
this.Placement = 'Top';
|
|
1192
|
+
this.Grid = new GridProperty();
|
|
1025
1193
|
}
|
|
1026
|
-
get
|
|
1027
|
-
|
|
1028
|
-
let justifySelf;
|
|
1029
|
-
switch (this.Placement) {
|
|
1030
|
-
case 'Top':
|
|
1031
|
-
case 'Bottom':
|
|
1032
|
-
justifySelf = 'center';
|
|
1033
|
-
break;
|
|
1034
|
-
case 'TopEdgeAlignedLeft':
|
|
1035
|
-
case 'BottomEdgeAlignedLeft':
|
|
1036
|
-
justifySelf = 'left';
|
|
1037
|
-
break;
|
|
1038
|
-
case 'TopEdgeAlignedRight':
|
|
1039
|
-
case 'BottomEdgeAlignedRight':
|
|
1040
|
-
justifySelf = 'right';
|
|
1041
|
-
break;
|
|
1042
|
-
case 'Left':
|
|
1043
|
-
case 'Right':
|
|
1044
|
-
alignSelf = 'center';
|
|
1045
|
-
break;
|
|
1046
|
-
case 'LeftEdgeAlignedTop':
|
|
1047
|
-
case 'RightEdgeAlignedTop':
|
|
1048
|
-
alignSelf = 'flex-start';
|
|
1049
|
-
break;
|
|
1050
|
-
case 'LeftEdgeAlignedBottom':
|
|
1051
|
-
case 'RightEdgeAlignedBottom':
|
|
1052
|
-
alignSelf = 'flex-end';
|
|
1053
|
-
break;
|
|
1054
|
-
}
|
|
1055
|
-
return {
|
|
1056
|
-
'align-self': alignSelf,
|
|
1057
|
-
'justify-self': justifySelf,
|
|
1058
|
-
};
|
|
1194
|
+
get gridColumnStart() {
|
|
1195
|
+
return this.Grid.Column !== undefined ? this.Grid.Column + 1 : undefined;
|
|
1059
1196
|
}
|
|
1060
|
-
get
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1197
|
+
get gridRowStart() {
|
|
1198
|
+
return this.Grid.Row !== undefined ? this.Grid.Row + 1 : undefined;
|
|
1199
|
+
}
|
|
1200
|
+
get gridColumnEnd() {
|
|
1201
|
+
return this.Grid.ColumnSpan !== undefined ? ('span ' + this.Grid.ColumnSpan) : undefined;
|
|
1202
|
+
}
|
|
1203
|
+
get gridRowEnd() {
|
|
1204
|
+
return this.Grid.RowSpan !== undefined ? ('span ' + this.Grid.RowSpan) : undefined;
|
|
1205
|
+
}
|
|
1206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1207
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridDirective, isStandalone: false, selector: "[Grid]", inputs: { Grid: "Grid" }, host: { properties: { "style.grid-column-start": "this.gridColumnStart", "style.grid-row-start": "this.gridRowStart", "style.grid-column-end": "this.gridColumnEnd", "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
|
|
1208
|
+
}
|
|
1209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, decorators: [{
|
|
1210
|
+
type: Directive,
|
|
1211
|
+
args: [{
|
|
1212
|
+
selector: '[Grid]',
|
|
1213
|
+
standalone: false
|
|
1214
|
+
}]
|
|
1215
|
+
}], propDecorators: { Grid: [{
|
|
1216
|
+
type: Input
|
|
1217
|
+
}], gridColumnStart: [{
|
|
1218
|
+
type: HostBinding,
|
|
1219
|
+
args: ['style.grid-column-start']
|
|
1220
|
+
}], gridRowStart: [{
|
|
1221
|
+
type: HostBinding,
|
|
1222
|
+
args: ['style.grid-row-start']
|
|
1223
|
+
}], gridColumnEnd: [{
|
|
1224
|
+
type: HostBinding,
|
|
1225
|
+
args: ['style.grid-column-end']
|
|
1226
|
+
}], gridRowEnd: [{
|
|
1227
|
+
type: HostBinding,
|
|
1228
|
+
args: ['style.grid-row-end']
|
|
1229
|
+
}] } });
|
|
1230
|
+
class GridRowDirective {
|
|
1231
|
+
get gridRowStart() {
|
|
1232
|
+
return this.Row !== undefined ? parseInt(this.Row) + 1 : undefined;
|
|
1233
|
+
}
|
|
1234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1235
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowDirective, isStandalone: false, selector: "[Grid-Row]", inputs: { Row: ["Grid-Row", "Row"] }, host: { properties: { "style.grid-row-start": "this.gridRowStart" } }, ngImport: i0 }); }
|
|
1236
|
+
}
|
|
1237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, decorators: [{
|
|
1238
|
+
type: Directive,
|
|
1239
|
+
args: [{
|
|
1240
|
+
selector: '[Grid-Row]',
|
|
1241
|
+
standalone: false
|
|
1242
|
+
}]
|
|
1243
|
+
}], propDecorators: { Row: [{
|
|
1244
|
+
type: Input,
|
|
1245
|
+
args: ['Grid-Row']
|
|
1246
|
+
}], gridRowStart: [{
|
|
1247
|
+
type: HostBinding,
|
|
1248
|
+
args: ['style.grid-row-start']
|
|
1249
|
+
}] } });
|
|
1250
|
+
class GridColumnDirective {
|
|
1251
|
+
get gridColumnStart() {
|
|
1252
|
+
return this.Column !== undefined ? parseInt(this.Column) + 1 : undefined;
|
|
1253
|
+
}
|
|
1254
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1255
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnDirective, isStandalone: false, selector: "[Grid-Column]", inputs: { Column: ["Grid-Column", "Column"] }, host: { properties: { "style.grid-column-start": "this.gridColumnStart" } }, ngImport: i0 }); }
|
|
1256
|
+
}
|
|
1257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnDirective, decorators: [{
|
|
1258
|
+
type: Directive,
|
|
1259
|
+
args: [{
|
|
1260
|
+
selector: '[Grid-Column]',
|
|
1261
|
+
standalone: false
|
|
1262
|
+
}]
|
|
1263
|
+
}], propDecorators: { Column: [{
|
|
1264
|
+
type: Input,
|
|
1265
|
+
args: ['Grid-Column']
|
|
1266
|
+
}], gridColumnStart: [{
|
|
1267
|
+
type: HostBinding,
|
|
1268
|
+
args: ['style.grid-column-start']
|
|
1269
|
+
}] } });
|
|
1270
|
+
class GridRowSpanDirective {
|
|
1271
|
+
get gridRowEnd() {
|
|
1272
|
+
return this.RowSpan !== undefined ? ('span ' + this.RowSpan) : undefined;
|
|
1273
|
+
}
|
|
1274
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1275
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowSpanDirective, isStandalone: false, selector: "[Grid-RowSpan]", inputs: { RowSpan: ["Grid-RowSpan", "RowSpan"] }, host: { properties: { "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
|
|
1276
|
+
}
|
|
1277
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, decorators: [{
|
|
1278
|
+
type: Directive,
|
|
1279
|
+
args: [{
|
|
1280
|
+
selector: '[Grid-RowSpan]',
|
|
1281
|
+
standalone: false
|
|
1282
|
+
}]
|
|
1283
|
+
}], propDecorators: { RowSpan: [{
|
|
1284
|
+
type: Input,
|
|
1285
|
+
args: ['Grid-RowSpan']
|
|
1286
|
+
}], gridRowEnd: [{
|
|
1287
|
+
type: HostBinding,
|
|
1288
|
+
args: ['style.grid-row-end']
|
|
1289
|
+
}] } });
|
|
1290
|
+
class GridColumnSpanDirective {
|
|
1291
|
+
get gridColumnEnd() {
|
|
1292
|
+
return this.ColumnSpan !== undefined ? ('span ' + this.ColumnSpan) : undefined;
|
|
1293
|
+
}
|
|
1294
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1295
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnSpanDirective, isStandalone: false, selector: "[Grid-ColumnSpan]", inputs: { ColumnSpan: ["Grid-ColumnSpan", "ColumnSpan"] }, host: { properties: { "style.grid-column-end": "this.gridColumnEnd" } }, ngImport: i0 }); }
|
|
1296
|
+
}
|
|
1297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, decorators: [{
|
|
1298
|
+
type: Directive,
|
|
1299
|
+
args: [{
|
|
1300
|
+
selector: '[Grid-ColumnSpan]',
|
|
1301
|
+
standalone: false
|
|
1302
|
+
}]
|
|
1303
|
+
}], propDecorators: { ColumnSpan: [{
|
|
1304
|
+
type: Input,
|
|
1305
|
+
args: ['Grid-ColumnSpan']
|
|
1306
|
+
}], gridColumnEnd: [{
|
|
1307
|
+
type: HostBinding,
|
|
1308
|
+
args: ['style.grid-column-end']
|
|
1309
|
+
}] } });
|
|
1310
|
+
const GridComponents = [
|
|
1311
|
+
GridComponent,
|
|
1312
|
+
GridDirective,
|
|
1313
|
+
GridRowDirective,
|
|
1314
|
+
GridRowSpanDirective,
|
|
1315
|
+
GridColumnDirective,
|
|
1316
|
+
GridColumnSpanDirective
|
|
1317
|
+
];
|
|
1318
|
+
class GridModule {
|
|
1319
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1320
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: GridModule, declarations: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective], exports: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective] }); }
|
|
1321
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule }); }
|
|
1322
|
+
}
|
|
1323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, decorators: [{
|
|
1324
|
+
type: NgModule,
|
|
1325
|
+
args: [{
|
|
1326
|
+
declarations: GridComponents,
|
|
1327
|
+
exports: GridComponents
|
|
1328
|
+
}]
|
|
1329
|
+
}] });
|
|
1330
|
+
|
|
1331
|
+
class SplitButtonComponent extends FrameworkElementComponent {
|
|
1332
|
+
constructor() {
|
|
1333
|
+
super(...arguments);
|
|
1334
|
+
this.IsEnabled = true;
|
|
1335
|
+
this.Click = new EventEmitter();
|
|
1336
|
+
}
|
|
1337
|
+
get buttonClass() {
|
|
1338
|
+
return this._popup?.IsOpen ? 'flyout-open' : undefined;
|
|
1339
|
+
}
|
|
1340
|
+
onButtonClick() {
|
|
1341
|
+
if (!this.IsEnabled)
|
|
1342
|
+
return;
|
|
1343
|
+
this.Click.emit();
|
|
1344
|
+
}
|
|
1345
|
+
onDropDownClick() {
|
|
1346
|
+
if (!this._popup || !this.IsEnabled)
|
|
1347
|
+
return;
|
|
1348
|
+
this._popup.IsOpen = true;
|
|
1349
|
+
}
|
|
1350
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SplitButtonComponent, isStandalone: true, selector: "SplitButton", inputs: { IsEnabled: "IsEnabled" }, outputs: { Click: "Click" }, queries: [{ propertyName: "_popup", first: true, predicate: ["ButtonFlyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<Grid ColumnDefinitions="1fr auto">
|
|
1352
|
+
<Button CornerRadius="4px 0 0 4px" [IsEnabled]="IsEnabled" (Click)="onButtonClick()" [ngClass]="buttonClass"><ng-content/></Button>
|
|
1353
|
+
<DropDownButton CornerRadius="0 4px 4px 0" Width="12px" (Click)="onDropDownClick()" [IsEnabled]="IsEnabled"/>
|
|
1354
|
+
</Grid>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "ColumnSpacing", "RowSpacing", "Orientation"] }] }); }
|
|
1355
|
+
}
|
|
1356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
1357
|
+
type: Component,
|
|
1358
|
+
args: [{
|
|
1359
|
+
selector: 'SplitButton',
|
|
1360
|
+
template: `<Grid ColumnDefinitions="1fr auto">
|
|
1361
|
+
<Button CornerRadius="4px 0 0 4px" [IsEnabled]="IsEnabled" (Click)="onButtonClick()" [ngClass]="buttonClass"><ng-content/></Button>
|
|
1362
|
+
<DropDownButton CornerRadius="0 4px 4px 0" Width="12px" (Click)="onDropDownClick()" [IsEnabled]="IsEnabled"/>
|
|
1363
|
+
</Grid>`,
|
|
1364
|
+
imports: [CommonModule, ButtonComponent, DropDownButtonComponent, GridModule]
|
|
1365
|
+
}]
|
|
1366
|
+
}], propDecorators: { IsEnabled: [{
|
|
1367
|
+
type: Input
|
|
1368
|
+
}], Click: [{
|
|
1369
|
+
type: Output
|
|
1370
|
+
}], _popup: [{
|
|
1371
|
+
type: ContentChild,
|
|
1372
|
+
args: ['ButtonFlyout']
|
|
1373
|
+
}] } });
|
|
1374
|
+
|
|
1375
|
+
class ToggleButtonComponent extends ButtonComponent {
|
|
1376
|
+
constructor() {
|
|
1377
|
+
super(...arguments);
|
|
1378
|
+
this.IsChecked = false;
|
|
1379
|
+
this.IsCheckedChange = new EventEmitter();
|
|
1380
|
+
}
|
|
1381
|
+
onPointerUp(event) {
|
|
1382
|
+
if (!this.IsEnabled)
|
|
1383
|
+
return;
|
|
1384
|
+
this.IsChecked = !this.IsChecked;
|
|
1385
|
+
this.IsCheckedChange.emit(this.IsChecked);
|
|
1386
|
+
}
|
|
1387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1388
|
+
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(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.flyout-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(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-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"] }); }
|
|
1389
|
+
}
|
|
1390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
1391
|
+
type: Component,
|
|
1392
|
+
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(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-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(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.flyout-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(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-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"] }]
|
|
1393
|
+
}], propDecorators: { IsChecked: [{
|
|
1394
|
+
type: Input
|
|
1395
|
+
}, {
|
|
1396
|
+
type: HostBinding,
|
|
1397
|
+
args: ['class.checked']
|
|
1398
|
+
}], IsCheckedChange: [{
|
|
1399
|
+
type: Output
|
|
1400
|
+
}], onPointerUp: [{
|
|
1401
|
+
type: HostListener,
|
|
1402
|
+
args: ['pointerup', ['$event']]
|
|
1403
|
+
}] } });
|
|
1404
|
+
|
|
1405
|
+
class ToggleSwitchComponent extends CheckBoxComponent {
|
|
1406
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1407
|
+
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">
|
|
1408
|
+
<input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
1409
|
+
<div class="slider">
|
|
1410
|
+
<div class="thumb"></div>
|
|
1411
|
+
</div>
|
|
1412
|
+
<div class="content"><ng-content/></div>
|
|
1413
|
+
</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"] }); }
|
|
1414
|
+
}
|
|
1415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
|
|
1416
|
+
type: Component,
|
|
1417
|
+
args: [{ selector: 'ToggleSwitch', template: `<label class="container">
|
|
1418
|
+
<input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
1419
|
+
<div class="slider">
|
|
1420
|
+
<div class="thumb"></div>
|
|
1421
|
+
</div>
|
|
1422
|
+
<div class="content"><ng-content/></div>
|
|
1423
|
+
</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"] }]
|
|
1424
|
+
}] });
|
|
1425
|
+
|
|
1426
|
+
class ListBoxComponent extends SelectorComponent {
|
|
1427
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1428
|
+
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"] }] }); }
|
|
1429
|
+
}
|
|
1430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, decorators: [{
|
|
1431
|
+
type: Component,
|
|
1432
|
+
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}">
|
|
1433
|
+
${SelectorItemTemplate}
|
|
1434
|
+
</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"] }]
|
|
1435
|
+
}] });
|
|
1436
|
+
|
|
1437
|
+
class FlyoutComponent extends PopupComponent {
|
|
1438
|
+
constructor() {
|
|
1439
|
+
super(...arguments);
|
|
1440
|
+
this.Placement = 'Top';
|
|
1441
|
+
}
|
|
1442
|
+
get contentStyle() {
|
|
1443
|
+
let alignSelf;
|
|
1444
|
+
let justifySelf;
|
|
1445
|
+
switch (this.Placement) {
|
|
1446
|
+
case 'Top':
|
|
1447
|
+
case 'Bottom':
|
|
1448
|
+
justifySelf = 'center';
|
|
1449
|
+
break;
|
|
1450
|
+
case 'TopEdgeAlignedLeft':
|
|
1451
|
+
case 'BottomEdgeAlignedLeft':
|
|
1452
|
+
justifySelf = 'left';
|
|
1453
|
+
break;
|
|
1454
|
+
case 'TopEdgeAlignedRight':
|
|
1455
|
+
case 'BottomEdgeAlignedRight':
|
|
1456
|
+
justifySelf = 'right';
|
|
1457
|
+
break;
|
|
1458
|
+
case 'Left':
|
|
1459
|
+
case 'Right':
|
|
1460
|
+
alignSelf = 'center';
|
|
1461
|
+
break;
|
|
1462
|
+
case 'LeftEdgeAlignedTop':
|
|
1463
|
+
case 'RightEdgeAlignedTop':
|
|
1464
|
+
alignSelf = 'flex-start';
|
|
1465
|
+
break;
|
|
1466
|
+
case 'LeftEdgeAlignedBottom':
|
|
1467
|
+
case 'RightEdgeAlignedBottom':
|
|
1468
|
+
alignSelf = 'flex-end';
|
|
1469
|
+
break;
|
|
1470
|
+
}
|
|
1471
|
+
return {
|
|
1472
|
+
'align-self': alignSelf,
|
|
1473
|
+
'justify-self': justifySelf,
|
|
1474
|
+
};
|
|
1475
|
+
}
|
|
1476
|
+
get containerStyle() {
|
|
1477
|
+
let top = '0';
|
|
1478
|
+
let left = '0';
|
|
1479
|
+
let right = '0';
|
|
1480
|
+
let bottom = '0';
|
|
1481
|
+
let transform;
|
|
1482
|
+
function translate(x, y, isOpen) {
|
|
1483
|
+
let result = '';
|
|
1484
|
+
if (x !== 0) {
|
|
1485
|
+
result += `translateX(${x > 0 ? '' : '-'}100%)`;
|
|
1486
|
+
if (!isOpen) {
|
|
1487
|
+
result += `translateX(${x > 0 ? '-' : ''}10px)`;
|
|
1488
|
+
}
|
|
1489
|
+
}
|
|
1490
|
+
if (y !== 0) {
|
|
1491
|
+
result += `translateY(${y > 0 ? '' : '-'}100%)`;
|
|
1492
|
+
if (!isOpen) {
|
|
1493
|
+
result += `translateY(${y > 0 ? '-' : ''}10px)`;
|
|
1494
|
+
}
|
|
1495
|
+
}
|
|
1496
|
+
return result;
|
|
1497
|
+
}
|
|
1498
|
+
switch (this.Placement) {
|
|
1499
|
+
case 'Top':
|
|
1500
|
+
case 'TopEdgeAlignedLeft':
|
|
1501
|
+
case 'TopEdgeAlignedRight':
|
|
1502
|
+
bottom = undefined;
|
|
1503
|
+
transform = translate(0, -1, this.IsOpen);
|
|
1504
|
+
break;
|
|
1505
|
+
case 'Bottom':
|
|
1506
|
+
case 'BottomEdgeAlignedLeft':
|
|
1507
|
+
case 'BottomEdgeAlignedRight':
|
|
1508
|
+
top = undefined;
|
|
1509
|
+
transform = translate(0, 1, this.IsOpen);
|
|
1510
|
+
break;
|
|
1511
|
+
case 'Left':
|
|
1512
|
+
case 'LeftEdgeAlignedBottom':
|
|
1513
|
+
case 'LeftEdgeAlignedTop':
|
|
1514
|
+
right = undefined;
|
|
1515
|
+
transform = translate(-1, 0, this.IsOpen);
|
|
1516
|
+
break;
|
|
1517
|
+
case 'Right':
|
|
1518
|
+
case 'RightEdgeAlignedBottom':
|
|
1519
|
+
case 'RightEdgeAlignedTop':
|
|
1520
|
+
left = undefined;
|
|
1521
|
+
transform = translate(1, 0, this.IsOpen);
|
|
1522
|
+
break;
|
|
1523
|
+
}
|
|
1524
|
+
let margin;
|
|
1525
|
+
switch (this.Placement) {
|
|
1526
|
+
case 'Top':
|
|
1527
|
+
margin = '0 -100vw -100vh -100vw';
|
|
1528
|
+
break;
|
|
1529
|
+
case 'TopEdgeAlignedLeft':
|
|
1530
|
+
margin = '0 -100vw -100vh 0';
|
|
1531
|
+
break;
|
|
1532
|
+
case 'TopEdgeAlignedRight':
|
|
1533
|
+
margin = '0 0 -100vh -100vw';
|
|
1534
|
+
break;
|
|
1535
|
+
case 'Bottom':
|
|
1536
|
+
margin = '-100vh -100vw 0 -100vw';
|
|
1537
|
+
break;
|
|
1538
|
+
case 'BottomEdgeAlignedLeft':
|
|
1539
|
+
margin = '0 -100vw 0 0';
|
|
1540
|
+
break;
|
|
1541
|
+
case 'BottomEdgeAlignedRight':
|
|
1542
|
+
margin = '0 0 0 -100vw';
|
|
1543
|
+
break;
|
|
1544
|
+
case 'Left':
|
|
1545
|
+
margin = '-100vh -100vw -100vh 0';
|
|
1546
|
+
break;
|
|
1547
|
+
case 'LeftEdgeAlignedTop':
|
|
1548
|
+
margin = '0 -100vw -100vh 0';
|
|
1549
|
+
break;
|
|
1550
|
+
case 'LeftEdgeAlignedBottom':
|
|
1551
|
+
margin = '-100vh -100vw 0 0';
|
|
1136
1552
|
break;
|
|
1137
1553
|
case 'Right':
|
|
1138
1554
|
margin = '-100vh 0 -100vh -100vw';
|
|
@@ -1155,21 +1571,100 @@ class FlyoutComponent extends PopupComponent {
|
|
|
1155
1571
|
};
|
|
1156
1572
|
}
|
|
1157
1573
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1158
|
-
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>
|
|
1574
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutComponent, isStandalone: true, selector: "Flyout", inputs: { Placement: "Placement" }, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], usesInheritance: true, ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
|
|
1159
1575
|
<div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
|
|
1160
1576
|
<div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered"><ng-content/></div>
|
|
1161
|
-
</div>`, isInline: true, styles: [":host{
|
|
1577
|
+
</div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;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 #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;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
1578
|
}
|
|
1163
1579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, decorators: [{
|
|
1164
1580
|
type: Component,
|
|
1165
1581
|
args: [{ selector: 'Flyout', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
|
|
1166
1582
|
<div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
|
|
1167
1583
|
<div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered"><ng-content/></div>
|
|
1168
|
-
</div>`,
|
|
1584
|
+
</div>`, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;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 #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"] }]
|
|
1169
1585
|
}], propDecorators: { Placement: [{
|
|
1170
1586
|
type: Input
|
|
1171
1587
|
}] } });
|
|
1172
1588
|
|
|
1589
|
+
class MenuFlyoutComponent extends FlyoutComponent {
|
|
1590
|
+
onMenuClick(event) {
|
|
1591
|
+
this.IsOpen = false;
|
|
1592
|
+
event.stopPropagation();
|
|
1593
|
+
}
|
|
1594
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1595
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutComponent, isStandalone: true, selector: "MenuFlyout", providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], usesInheritance: true, ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
|
|
1596
|
+
<div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
|
|
1597
|
+
<div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered">
|
|
1598
|
+
<div class="menu-container" (click)="onMenuClick($event)">
|
|
1599
|
+
<ng-content/>
|
|
1600
|
+
</div>
|
|
1601
|
+
</div>
|
|
1602
|
+
</div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;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 #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n", ".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}\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"] }] }); }
|
|
1603
|
+
}
|
|
1604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutComponent, decorators: [{
|
|
1605
|
+
type: Component,
|
|
1606
|
+
args: [{ selector: 'MenuFlyout', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
|
|
1607
|
+
<div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
|
|
1608
|
+
<div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered">
|
|
1609
|
+
<div class="menu-container" (click)="onMenuClick($event)">
|
|
1610
|
+
<ng-content/>
|
|
1611
|
+
</div>
|
|
1612
|
+
</div>
|
|
1613
|
+
</div>`, providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;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 #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n", ".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}\n"] }]
|
|
1614
|
+
}] });
|
|
1615
|
+
|
|
1616
|
+
class ContextFlyoutDirective {
|
|
1617
|
+
constructor(_hostComponent, _viewContainer) {
|
|
1618
|
+
this._hostComponent = _hostComponent;
|
|
1619
|
+
this._viewContainer = _viewContainer;
|
|
1620
|
+
this._positionX = 0;
|
|
1621
|
+
this._positionY = 0;
|
|
1622
|
+
}
|
|
1623
|
+
get style() {
|
|
1624
|
+
return {
|
|
1625
|
+
'position': 'fixed',
|
|
1626
|
+
'left': this._positionX + 'px',
|
|
1627
|
+
'top': this._positionY + 'px'
|
|
1628
|
+
};
|
|
1629
|
+
}
|
|
1630
|
+
ngAfterViewInit() {
|
|
1631
|
+
this._flyout = this._viewContainer.injector.get(FlyoutComponent, null) ||
|
|
1632
|
+
this._viewContainer.injector.get(MenuFlyoutComponent, null);
|
|
1633
|
+
if (this._flyout) {
|
|
1634
|
+
this._flyout.Placement = 'BottomEdgeAlignedLeft';
|
|
1635
|
+
}
|
|
1636
|
+
let parentElement = this._hostComponent.nativeElement.parentElement;
|
|
1637
|
+
if (parentElement) {
|
|
1638
|
+
parentElement.oncontextmenu = p => this.onContextMenu(p);
|
|
1639
|
+
}
|
|
1640
|
+
}
|
|
1641
|
+
onContextMenu(event) {
|
|
1642
|
+
if (!this._flyout)
|
|
1643
|
+
return;
|
|
1644
|
+
if (!this._flyout.IsOpen) {
|
|
1645
|
+
this._positionX = event.clientX;
|
|
1646
|
+
this._positionY = event.clientY;
|
|
1647
|
+
this._flyout.IsOpen = true;
|
|
1648
|
+
}
|
|
1649
|
+
else {
|
|
1650
|
+
this._flyout.IsOpen = false;
|
|
1651
|
+
}
|
|
1652
|
+
event.preventDefault();
|
|
1653
|
+
event.stopPropagation();
|
|
1654
|
+
}
|
|
1655
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContextFlyoutDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1656
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ContextFlyoutDirective, isStandalone: true, selector: "[ContextFlyout]", host: { properties: { "style": "this.style" } }, ngImport: i0 }); }
|
|
1657
|
+
}
|
|
1658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContextFlyoutDirective, decorators: [{
|
|
1659
|
+
type: Directive,
|
|
1660
|
+
args: [{
|
|
1661
|
+
selector: '[ContextFlyout]'
|
|
1662
|
+
}]
|
|
1663
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { style: [{
|
|
1664
|
+
type: HostBinding,
|
|
1665
|
+
args: ['style']
|
|
1666
|
+
}] } });
|
|
1667
|
+
|
|
1173
1668
|
class TextBlockComponent extends FrameworkElementComponent {
|
|
1174
1669
|
constructor() {
|
|
1175
1670
|
super(...arguments);
|
|
@@ -1328,207 +1823,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1328
1823
|
type: Input
|
|
1329
1824
|
}, {
|
|
1330
1825
|
type: HostBinding,
|
|
1331
|
-
args: ['style.font-family']
|
|
1332
|
-
}], FontSize: [{
|
|
1333
|
-
type: Input
|
|
1334
|
-
}, {
|
|
1335
|
-
type: HostBinding,
|
|
1336
|
-
args: ['style.font-size']
|
|
1337
|
-
}], FontStyle: [{
|
|
1338
|
-
type: Input
|
|
1339
|
-
}, {
|
|
1340
|
-
type: HostBinding,
|
|
1341
|
-
args: ['style.font-style']
|
|
1342
|
-
}], FontWeight: [{
|
|
1343
|
-
type: Input
|
|
1344
|
-
}], Glyph: [{
|
|
1345
|
-
type: Input
|
|
1346
|
-
}], fontWeight: [{
|
|
1347
|
-
type: HostBinding,
|
|
1348
|
-
args: ['style.font-weight']
|
|
1349
|
-
}] } });
|
|
1350
|
-
|
|
1351
|
-
class GridComponent extends PanelComponent {
|
|
1352
|
-
constructor() {
|
|
1353
|
-
super(...arguments);
|
|
1354
|
-
this.Orientation = 'Horizontal';
|
|
1355
|
-
}
|
|
1356
|
-
get gridAutoFlow() {
|
|
1357
|
-
return this.Orientation == 'Horizontal' ? 'row' : 'column';
|
|
1358
|
-
}
|
|
1359
|
-
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
|
-
}
|
|
1362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, decorators: [{
|
|
1363
|
-
type: Component,
|
|
1364
|
-
args: [{ selector: 'Grid', template: `<ng-content/>`, standalone: false, styles: [":host{display:grid}\n"] }]
|
|
1365
|
-
}], propDecorators: { ColumnDefinitions: [{
|
|
1366
|
-
type: Input
|
|
1367
|
-
}, {
|
|
1368
|
-
type: HostBinding,
|
|
1369
|
-
args: ['style.grid-template-columns']
|
|
1370
|
-
}], RowDefinitions: [{
|
|
1371
|
-
type: Input
|
|
1372
|
-
}, {
|
|
1373
|
-
type: HostBinding,
|
|
1374
|
-
args: ['style.grid-template-rows']
|
|
1375
|
-
}], ColumnSpacing: [{
|
|
1826
|
+
args: ['style.font-family']
|
|
1827
|
+
}], FontSize: [{
|
|
1376
1828
|
type: Input
|
|
1377
1829
|
}, {
|
|
1378
1830
|
type: HostBinding,
|
|
1379
|
-
args: ['style.
|
|
1380
|
-
}],
|
|
1831
|
+
args: ['style.font-size']
|
|
1832
|
+
}], FontStyle: [{
|
|
1381
1833
|
type: Input
|
|
1382
1834
|
}, {
|
|
1383
1835
|
type: HostBinding,
|
|
1384
|
-
args: ['style.
|
|
1385
|
-
}],
|
|
1836
|
+
args: ['style.font-style']
|
|
1837
|
+
}], FontWeight: [{
|
|
1386
1838
|
type: Input
|
|
1387
|
-
}],
|
|
1839
|
+
}], Glyph: [{
|
|
1840
|
+
type: Input
|
|
1841
|
+
}], fontWeight: [{
|
|
1388
1842
|
type: HostBinding,
|
|
1389
|
-
args: ['style.
|
|
1843
|
+
args: ['style.font-weight']
|
|
1390
1844
|
}] } });
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
class GridDirective {
|
|
1845
|
+
|
|
1846
|
+
class ImageComponent extends FrameworkElementComponent {
|
|
1394
1847
|
constructor() {
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
get gridColumnStart() {
|
|
1398
|
-
return this.Grid.Column !== undefined ? this.Grid.Column + 1 : undefined;
|
|
1399
|
-
}
|
|
1400
|
-
get gridRowStart() {
|
|
1401
|
-
return this.Grid.Row !== undefined ? this.Grid.Row + 1 : undefined;
|
|
1402
|
-
}
|
|
1403
|
-
get gridColumnEnd() {
|
|
1404
|
-
return this.Grid.ColumnSpan !== undefined ? ('span ' + this.Grid.ColumnSpan) : undefined;
|
|
1848
|
+
super(...arguments);
|
|
1849
|
+
this.Stretch = 'Uniform';
|
|
1405
1850
|
}
|
|
1406
|
-
get
|
|
1407
|
-
return
|
|
1851
|
+
get imageStyle() {
|
|
1852
|
+
return {
|
|
1853
|
+
width: this.Width,
|
|
1854
|
+
height: this.Height
|
|
1855
|
+
};
|
|
1408
1856
|
}
|
|
1409
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
1410
|
-
static { this.ɵ
|
|
1857
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1858
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ImageComponent, isStandalone: true, selector: "Image", inputs: { Source: "Source", Stretch: "Stretch" }, usesInheritance: true, ngImport: i0, template: `<img [src]="Source" [class]="Stretch" [ngStyle]="imageStyle" [alt]="">`, isInline: true, styles: [":host{display:grid;overflow:hidden}img{place-self:stretch}img.None{object-fit:none}img.Fill{object-fit:fill}img.Uniform{object-fit:contain}img.UniformToFill{object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1411
1859
|
}
|
|
1412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
1413
|
-
type:
|
|
1414
|
-
args: [{
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
}], propDecorators: { Grid: [{
|
|
1860
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageComponent, decorators: [{
|
|
1861
|
+
type: Component,
|
|
1862
|
+
args: [{ selector: 'Image', template: `<img [src]="Source" [class]="Stretch" [ngStyle]="imageStyle" [alt]="">`, imports: [CommonModule], styles: [":host{display:grid;overflow:hidden}img{place-self:stretch}img.None{object-fit:none}img.Fill{object-fit:fill}img.Uniform{object-fit:contain}img.UniformToFill{object-fit:cover}\n"] }]
|
|
1863
|
+
}], propDecorators: { Source: [{
|
|
1864
|
+
type: Input
|
|
1865
|
+
}], Stretch: [{
|
|
1419
1866
|
type: Input
|
|
1420
|
-
}], gridColumnStart: [{
|
|
1421
|
-
type: HostBinding,
|
|
1422
|
-
args: ['style.grid-column-start']
|
|
1423
|
-
}], gridRowStart: [{
|
|
1424
|
-
type: HostBinding,
|
|
1425
|
-
args: ['style.grid-row-start']
|
|
1426
|
-
}], gridColumnEnd: [{
|
|
1427
|
-
type: HostBinding,
|
|
1428
|
-
args: ['style.grid-column-end']
|
|
1429
|
-
}], gridRowEnd: [{
|
|
1430
|
-
type: HostBinding,
|
|
1431
|
-
args: ['style.grid-row-end']
|
|
1432
1867
|
}] } });
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1868
|
+
|
|
1869
|
+
class AppBarButtonComponent extends FrameworkElementComponent {
|
|
1870
|
+
constructor() {
|
|
1871
|
+
super(...arguments);
|
|
1872
|
+
this.IsEnabled = true;
|
|
1873
|
+
this.Click = new EventEmitter();
|
|
1436
1874
|
}
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
}
|
|
1440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, decorators: [{
|
|
1441
|
-
type: Directive,
|
|
1442
|
-
args: [{
|
|
1443
|
-
selector: '[Grid-Row]',
|
|
1444
|
-
standalone: false
|
|
1445
|
-
}]
|
|
1446
|
-
}], propDecorators: { Row: [{
|
|
1447
|
-
type: Input,
|
|
1448
|
-
args: ['Grid-Row']
|
|
1449
|
-
}], gridRowStart: [{
|
|
1450
|
-
type: HostBinding,
|
|
1451
|
-
args: ['style.grid-row-start']
|
|
1452
|
-
}] } });
|
|
1453
|
-
class GridColumnDirective {
|
|
1454
|
-
get gridColumnStart() {
|
|
1455
|
-
return this.Column !== undefined ? parseInt(this.Column) + 1 : undefined;
|
|
1875
|
+
get disabled() {
|
|
1876
|
+
return !this.IsEnabled;
|
|
1456
1877
|
}
|
|
1457
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
1458
|
-
static { this.ɵ
|
|
1878
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1879
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AppBarButtonComponent, isStandalone: true, selector: "AppBarButton", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { properties: { "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{font-family:var(--SymbolFontFamily)}\n"] }); }
|
|
1459
1880
|
}
|
|
1460
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
1461
|
-
type:
|
|
1462
|
-
args: [{
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
}],
|
|
1881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, decorators: [{
|
|
1882
|
+
type: Component,
|
|
1883
|
+
args: [{ selector: 'AppBarButton', template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div>`, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{font-family:var(--SymbolFontFamily)}\n"] }]
|
|
1884
|
+
}], propDecorators: { IsEnabled: [{
|
|
1885
|
+
type: Input
|
|
1886
|
+
}], Text: [{
|
|
1887
|
+
type: Input
|
|
1888
|
+
}], Icon: [{
|
|
1889
|
+
type: Input
|
|
1890
|
+
}], Click: [{
|
|
1891
|
+
type: Output
|
|
1892
|
+
}], disabled: [{
|
|
1470
1893
|
type: HostBinding,
|
|
1471
|
-
args: ['
|
|
1894
|
+
args: ['class.disabled']
|
|
1472
1895
|
}] } });
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
}
|
|
1477
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1478
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowSpanDirective, isStandalone: false, selector: "[Grid-RowSpan]", inputs: { RowSpan: ["Grid-RowSpan", "RowSpan"] }, host: { properties: { "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
|
|
1896
|
+
|
|
1897
|
+
class CommandBarComponent extends FrameworkElementComponent {
|
|
1898
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CommandBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1899
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CommandBarComponent, isStandalone: true, selector: "CommandBar", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;padding:3px;gap:3px}\n"] }); }
|
|
1479
1900
|
}
|
|
1480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
1481
|
-
type:
|
|
1482
|
-
args: [{
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
get gridColumnEnd() {
|
|
1495
|
-
return this.ColumnSpan !== undefined ? ('span ' + this.ColumnSpan) : undefined;
|
|
1901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CommandBarComponent, decorators: [{
|
|
1902
|
+
type: Component,
|
|
1903
|
+
args: [{ selector: 'CommandBar', template: `<ng-content/>`, styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;padding:3px;gap:3px}\n"] }]
|
|
1904
|
+
}] });
|
|
1905
|
+
|
|
1906
|
+
class MenuFlyoutItemBase {
|
|
1907
|
+
}
|
|
1908
|
+
|
|
1909
|
+
class MenuFlyoutItemComponent extends MenuFlyoutItemBase {
|
|
1910
|
+
constructor() {
|
|
1911
|
+
super(...arguments);
|
|
1912
|
+
this.IsEnabled = true;
|
|
1913
|
+
this.Text = '';
|
|
1914
|
+
this.Click = new EventEmitter();
|
|
1496
1915
|
}
|
|
1497
|
-
|
|
1498
|
-
|
|
1916
|
+
get disabled() {
|
|
1917
|
+
return !this.IsEnabled;
|
|
1918
|
+
}
|
|
1919
|
+
onClick() {
|
|
1920
|
+
this.Click.emit();
|
|
1921
|
+
}
|
|
1922
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1923
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutItemComponent, isStandalone: true, selector: "MenuFlyoutItem", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onClick()" }, properties: { "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}</div>
|
|
1924
|
+
<div class="text">{{Text}}</div>
|
|
1925
|
+
<div class="submenu-indicator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily)}.text{display:table-cell;padding:3px;margin:6px 0}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
1499
1926
|
}
|
|
1500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
1501
|
-
type:
|
|
1502
|
-
args: [{
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
}],
|
|
1927
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, decorators: [{
|
|
1928
|
+
type: Component,
|
|
1929
|
+
args: [{ selector: 'MenuFlyoutItem', imports: [CommonModule], template: `<div class="icon">{{Icon}}</div>
|
|
1930
|
+
<div class="text">{{Text}}</div>
|
|
1931
|
+
<div class="submenu-indicator"></div>`, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily)}.text{display:table-cell;padding:3px;margin:6px 0}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"] }]
|
|
1932
|
+
}], propDecorators: { IsEnabled: [{
|
|
1933
|
+
type: Input
|
|
1934
|
+
}], Text: [{
|
|
1935
|
+
type: Input
|
|
1936
|
+
}], Icon: [{
|
|
1937
|
+
type: Input
|
|
1938
|
+
}], Click: [{
|
|
1939
|
+
type: Output
|
|
1940
|
+
}], disabled: [{
|
|
1510
1941
|
type: HostBinding,
|
|
1511
|
-
args: ['
|
|
1942
|
+
args: ['class.disabled']
|
|
1943
|
+
}], onClick: [{
|
|
1944
|
+
type: HostListener,
|
|
1945
|
+
args: ['click', []]
|
|
1512
1946
|
}] } });
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
GridRowSpanDirective,
|
|
1518
|
-
GridColumnDirective,
|
|
1519
|
-
GridColumnSpanDirective
|
|
1520
|
-
];
|
|
1521
|
-
class GridModule {
|
|
1522
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1523
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: GridModule, declarations: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective], exports: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective] }); }
|
|
1524
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule }); }
|
|
1947
|
+
|
|
1948
|
+
class MenuFlyoutSeparator extends MenuFlyoutItemBase {
|
|
1949
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1950
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutSeparator, isStandalone: true, selector: "MenuFlyoutSeparator", usesInheritance: true, ngImport: i0, template: `<div class="separator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row;position:relative}:host>.separator{position:absolute;display:block;inset:-.5px -2px;background-color:var(--DividerStrokeColorDefault)}\n"] }); }
|
|
1525
1951
|
}
|
|
1526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type:
|
|
1527
|
-
type:
|
|
1528
|
-
args: [{
|
|
1529
|
-
declarations: GridComponents,
|
|
1530
|
-
exports: GridComponents
|
|
1531
|
-
}]
|
|
1952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutSeparator, decorators: [{
|
|
1953
|
+
type: Component,
|
|
1954
|
+
args: [{ selector: 'MenuFlyoutSeparator', template: `<div class="separator"></div>`, styles: [":host{position:relative}:host{display:table-row;position:relative}:host>.separator{position:absolute;display:block;inset:-.5px -2px;background-color:var(--DividerStrokeColorDefault)}\n"] }]
|
|
1532
1955
|
}] });
|
|
1533
1956
|
|
|
1534
1957
|
class ToolTipDirective {
|
|
@@ -1561,6 +1984,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1561
1984
|
}]
|
|
1562
1985
|
}] });
|
|
1563
1986
|
|
|
1987
|
+
class NumberBoxComponent extends FrameworkElementComponent {
|
|
1988
|
+
get Text() {
|
|
1989
|
+
return this._text;
|
|
1990
|
+
}
|
|
1991
|
+
get Value() {
|
|
1992
|
+
return this._value;
|
|
1993
|
+
}
|
|
1994
|
+
set Value(value) {
|
|
1995
|
+
this.setValue(value);
|
|
1996
|
+
this.updateText();
|
|
1997
|
+
}
|
|
1998
|
+
setValue(value) {
|
|
1999
|
+
value = this.clampValue(value);
|
|
2000
|
+
if (value == this.Value)
|
|
2001
|
+
return;
|
|
2002
|
+
this._value = value;
|
|
2003
|
+
this.ValueChange.emit(value);
|
|
2004
|
+
}
|
|
2005
|
+
constructor() {
|
|
2006
|
+
super();
|
|
2007
|
+
this.IsEnabled = true;
|
|
2008
|
+
this.PlaceholderText = '';
|
|
2009
|
+
this.TextAlignment = 'Left';
|
|
2010
|
+
this.InputMode = 'Float';
|
|
2011
|
+
this.Minimum = -Infinity;
|
|
2012
|
+
this.Maximum = Infinity;
|
|
2013
|
+
this.SmallChange = 1;
|
|
2014
|
+
this.LargeChange = 10;
|
|
2015
|
+
this.NumberFormatter = (value) => value.toString();
|
|
2016
|
+
this.ValueChange = new EventEmitter();
|
|
2017
|
+
this._text = '';
|
|
2018
|
+
this._value = NaN;
|
|
2019
|
+
this.TextAlignment = 'Right';
|
|
2020
|
+
}
|
|
2021
|
+
onChange() {
|
|
2022
|
+
this._text = this._input.nativeElement.value;
|
|
2023
|
+
let value;
|
|
2024
|
+
switch (this.InputMode) {
|
|
2025
|
+
case 'Float':
|
|
2026
|
+
value = parseFloat(this._text);
|
|
2027
|
+
break;
|
|
2028
|
+
case 'Integer':
|
|
2029
|
+
value = parseInt(this._text);
|
|
2030
|
+
break;
|
|
2031
|
+
}
|
|
2032
|
+
this.setValue(value);
|
|
2033
|
+
}
|
|
2034
|
+
clampValue(value) {
|
|
2035
|
+
if (!Number.isNaN(value)) {
|
|
2036
|
+
if (this.Minimum !== undefined && value < this.Minimum)
|
|
2037
|
+
value = this.Minimum;
|
|
2038
|
+
if (this.Maximum !== undefined && value > this.Maximum)
|
|
2039
|
+
value = this.Maximum;
|
|
2040
|
+
}
|
|
2041
|
+
return value;
|
|
2042
|
+
}
|
|
2043
|
+
onIncreaseClick() {
|
|
2044
|
+
this.Value += this.SmallChange;
|
|
2045
|
+
}
|
|
2046
|
+
onDecreaseClick() {
|
|
2047
|
+
this.Value -= this.SmallChange;
|
|
2048
|
+
}
|
|
2049
|
+
onBlur() {
|
|
2050
|
+
this.updateText();
|
|
2051
|
+
this._input.nativeElement.value = this._text;
|
|
2052
|
+
}
|
|
2053
|
+
onKeyDown(event) {
|
|
2054
|
+
switch (event.key) {
|
|
2055
|
+
case 'ArrowUp':
|
|
2056
|
+
this.Value += this.SmallChange;
|
|
2057
|
+
break;
|
|
2058
|
+
case 'ArrowDown':
|
|
2059
|
+
this.Value -= this.SmallChange;
|
|
2060
|
+
break;
|
|
2061
|
+
case 'PageUp':
|
|
2062
|
+
this.Value += this.LargeChange;
|
|
2063
|
+
break;
|
|
2064
|
+
case 'PageDown':
|
|
2065
|
+
this.Value -= this.LargeChange;
|
|
2066
|
+
break;
|
|
2067
|
+
}
|
|
2068
|
+
}
|
|
2069
|
+
updateText() {
|
|
2070
|
+
this._text = Number.isNaN(this.Value) ? '' : this.NumberFormatter(this.Value);
|
|
2071
|
+
}
|
|
2072
|
+
onContextMenu(event) {
|
|
2073
|
+
event.stopPropagation();
|
|
2074
|
+
}
|
|
2075
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2076
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberBoxComponent, isStandalone: true, selector: "NumberBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", NumberFormatter: "NumberFormatter", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
|
|
2077
|
+
<input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
|
|
2078
|
+
<div class="popup">
|
|
2079
|
+
<RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph=""/></RepeatButton>
|
|
2080
|
+
<RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph=""/></RepeatButton>
|
|
2081
|
+
</div>
|
|
2082
|
+
<div class="icon"></div>
|
|
2083
|
+
</label>`, 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", "label{display:grid;position:relative}input{grid-column-start:1;grid-row-start:1;padding-left:24px}.icon{grid-column-start:1;grid-row-start:1;align-self:center;justify-self:left;font-family:var(--SymbolFontFamily);margin-left:6px;color:var(--TextFillColorSecondary)}.popup{position:absolute;display:none;flex-direction:column;justify-content:center;left:0;top:50%;transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;gap:3px;padding:3px;z-index:1000}.popup .InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "FontWeight", "Glyph"] }] }); }
|
|
2084
|
+
}
|
|
2085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, decorators: [{
|
|
2086
|
+
type: Component,
|
|
2087
|
+
args: [{ selector: 'NumberBox', template: `<label>
|
|
2088
|
+
<input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
|
|
2089
|
+
<div class="popup">
|
|
2090
|
+
<RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph=""/></RepeatButton>
|
|
2091
|
+
<RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph=""/></RepeatButton>
|
|
2092
|
+
</div>
|
|
2093
|
+
<div class="icon"></div>
|
|
2094
|
+
</label>`, imports: [RepeatButtonComponent, FontIconComponent], 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", "label{display:grid;position:relative}input{grid-column-start:1;grid-row-start:1;padding-left:24px}.icon{grid-column-start:1;grid-row-start:1;align-self:center;justify-self:left;font-family:var(--SymbolFontFamily);margin-left:6px;color:var(--TextFillColorSecondary)}.popup{position:absolute;display:none;flex-direction:column;justify-content:center;left:0;top:50%;transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;gap:3px;padding:3px;z-index:1000}.popup .InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"] }]
|
|
2095
|
+
}], ctorParameters: () => [], propDecorators: { IsEnabled: [{
|
|
2096
|
+
type: Input
|
|
2097
|
+
}], PlaceholderText: [{
|
|
2098
|
+
type: Input
|
|
2099
|
+
}], TextAlignment: [{
|
|
2100
|
+
type: Input
|
|
2101
|
+
}], InputMode: [{
|
|
2102
|
+
type: Input
|
|
2103
|
+
}], Minimum: [{
|
|
2104
|
+
type: Input
|
|
2105
|
+
}], Maximum: [{
|
|
2106
|
+
type: Input
|
|
2107
|
+
}], SmallChange: [{
|
|
2108
|
+
type: Input
|
|
2109
|
+
}], LargeChange: [{
|
|
2110
|
+
type: Input
|
|
2111
|
+
}], NumberFormatter: [{
|
|
2112
|
+
type: Input
|
|
2113
|
+
}], ValueChange: [{
|
|
2114
|
+
type: Output
|
|
2115
|
+
}], _input: [{
|
|
2116
|
+
type: ViewChild,
|
|
2117
|
+
args: ['input']
|
|
2118
|
+
}], Value: [{
|
|
2119
|
+
type: Input
|
|
2120
|
+
}], onContextMenu: [{
|
|
2121
|
+
type: HostListener,
|
|
2122
|
+
args: ['contextmenu', ['$event']]
|
|
2123
|
+
}] } });
|
|
2124
|
+
|
|
1564
2125
|
class TextBoxComponent extends FrameworkElementComponent {
|
|
1565
2126
|
constructor() {
|
|
1566
2127
|
super(...arguments);
|
|
@@ -1588,12 +2149,12 @@ class TextBoxComponent extends FrameworkElementComponent {
|
|
|
1588
2149
|
}
|
|
1589
2150
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1590
2151
|
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{
|
|
2152
|
+
<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
2153
|
}
|
|
1593
2154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
|
|
1594
2155
|
type: Component,
|
|
1595
2156
|
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{
|
|
2157
|
+
<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
2158
|
}], propDecorators: { IsEnabled: [{
|
|
1598
2159
|
type: Input
|
|
1599
2160
|
}], PlaceholderText: [{
|
|
@@ -1635,5 +2196,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1635
2196
|
* Generated bundle index. Do not edit.
|
|
1636
2197
|
*/
|
|
1637
2198
|
|
|
1638
|
-
export { BorderComponent, ButtonComponent, CheckBoxComponent, ComboBoxComponent, DropDownButtonComponent, FlyoutComponent, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ListBoxComponent, ListViewComponent, PanelComponent, PopupComponent, RadioButtonComponent, RadioButtonGroup, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, toAlignment, toJustification };
|
|
2199
|
+
export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContextFlyoutDirective, DropDownButtonComponent, FlyoutComponent, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupComponent, RadioButtonComponent, RadioButtonGroup, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, rgbToHsl, stringToColor, toAlignment, toJustification };
|
|
1639
2200
|
//# sourceMappingURL=xaml-ui.mjs.map
|