xaml-ui 1.0.8 → 1.0.9
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 +275 -56
- package/fesm2022/xaml-ui.mjs.map +1 -1
- package/lib/Common.d.ts +3 -0
- package/lib/dialogs-and-flyouts/ContentDialog.d.ts +39 -0
- package/lib/dialogs-and-flyouts/Dialog.d.ts +15 -0
- package/lib/layout/Grid.d.ts +3 -1
- package/lib/menus-and-toolbars/MenuFlyout.d.ts +1 -2
- package/lib/primitives/DialogPresenter.d.ts +10 -0
- package/lib/primitives/FlyoutBase.d.ts +7 -7
- package/lib/text/NumberBox.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
- package/styles/XamlGlobals.css +10 -8
package/fesm2022/xaml-ui.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, ViewChild, TemplateRef, Optional, Directive, NgModule } from '@angular/core';
|
|
2
|
+
import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, ViewChild, TemplateRef, Optional, Directive, NgModule, ViewContainerRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
6
6
|
import { trigger, transition, animate, keyframes, style } from '@angular/animations';
|
|
7
7
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
8
|
-
import { OverlayConfig } from '@angular/cdk/overlay';
|
|
8
|
+
import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
|
|
9
9
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
10
10
|
|
|
11
11
|
function toJustification(value) {
|
|
@@ -23,6 +23,12 @@ function toAlignment(value) {
|
|
|
23
23
|
return 'stretch';
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
+
async function resume_after(timeout) {
|
|
27
|
+
await new Promise(p => setTimeout(p, timeout));
|
|
28
|
+
}
|
|
29
|
+
async function resume_on_event(event) {
|
|
30
|
+
await new Promise(p => event.subscribe(q => p(q)));
|
|
31
|
+
}
|
|
26
32
|
|
|
27
33
|
class FrameworkElementComponent {
|
|
28
34
|
constructor() {
|
|
@@ -196,11 +202,11 @@ class ButtonComponent extends BorderComponent {
|
|
|
196
202
|
this._flyout?.Show();
|
|
197
203
|
}
|
|
198
204
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
199
|
-
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:
|
|
205
|
+
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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
|
|
200
206
|
}
|
|
201
207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
202
208
|
type: Component,
|
|
203
|
-
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:
|
|
209
|
+
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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
|
|
204
210
|
}], propDecorators: { IsEnabled: [{
|
|
205
211
|
type: Input
|
|
206
212
|
}], Click: [{
|
|
@@ -912,11 +918,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
912
918
|
|
|
913
919
|
class DropDownButtonComponent extends ButtonComponent {
|
|
914
920
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
915
|
-
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:
|
|
921
|
+
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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\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"] }); }
|
|
916
922
|
}
|
|
917
923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, decorators: [{
|
|
918
924
|
type: Component,
|
|
919
|
-
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:
|
|
925
|
+
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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\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"] }]
|
|
920
926
|
}] });
|
|
921
927
|
|
|
922
928
|
class FlyoutPresenter {
|
|
@@ -970,17 +976,10 @@ class FlyoutBaseComponent {
|
|
|
970
976
|
return;
|
|
971
977
|
this._isOpen = value;
|
|
972
978
|
if (value) {
|
|
973
|
-
this.
|
|
974
|
-
this._overlayRef.attach(this._templatePortal);
|
|
975
|
-
if (this.HasBackdrop)
|
|
976
|
-
this._backdropContextMenuSubscription = this._renderer.listen(this._overlayRef.backdropElement, 'contextmenu', p => { p.preventDefault(); this.Hide(); });
|
|
977
|
-
setTimeout(() => this.isVisible = true, 0);
|
|
979
|
+
this.showOverlay();
|
|
978
980
|
}
|
|
979
981
|
else {
|
|
980
|
-
this.
|
|
981
|
-
setTimeout(() => this._overlayRef.detach(), FlyoutPresenter.TransitionDuration);
|
|
982
|
-
if (this._backdropContextMenuSubscription)
|
|
983
|
-
this._backdropContextMenuSubscription();
|
|
982
|
+
this.hideOverlay();
|
|
984
983
|
}
|
|
985
984
|
this.IsOpenChange.emit(value);
|
|
986
985
|
}
|
|
@@ -1000,6 +999,41 @@ class FlyoutBaseComponent {
|
|
|
1000
999
|
this._overlayRef.updateSize(target);
|
|
1001
1000
|
}
|
|
1002
1001
|
}
|
|
1002
|
+
async showOverlay() {
|
|
1003
|
+
//Create overlay
|
|
1004
|
+
let config = new OverlayConfig({
|
|
1005
|
+
hasBackdrop: this.HasBackdrop,
|
|
1006
|
+
scrollStrategy: this._overlay.scrollStrategies.reposition()
|
|
1007
|
+
});
|
|
1008
|
+
this._overlayRef = this._overlay.create(config);
|
|
1009
|
+
this.OnOverlay(this._overlayRef);
|
|
1010
|
+
//Configure overlay placement
|
|
1011
|
+
this.updatePlacement();
|
|
1012
|
+
//Display overlay
|
|
1013
|
+
let templatePortal = new TemplatePortal(this._template, this._viewContainerRef);
|
|
1014
|
+
this._overlayRef.attach(templatePortal);
|
|
1015
|
+
//Ensure backdrop event handling
|
|
1016
|
+
this._overlayRef.backdropClick().subscribe(() => this.Hide());
|
|
1017
|
+
if (this.HasBackdrop)
|
|
1018
|
+
this._backdropContextMenuSubscription = this._renderer.listen(this._overlayRef.backdropElement, 'contextmenu', p => { p.preventDefault(); this.Hide(); });
|
|
1019
|
+
//Make content visible - after next layout
|
|
1020
|
+
await resume_after(0);
|
|
1021
|
+
this.isVisible = true;
|
|
1022
|
+
}
|
|
1023
|
+
async hideOverlay() {
|
|
1024
|
+
//Start hide animation
|
|
1025
|
+
this.isVisible = false;
|
|
1026
|
+
//Remove event handlers
|
|
1027
|
+
if (this._backdropContextMenuSubscription)
|
|
1028
|
+
this._backdropContextMenuSubscription();
|
|
1029
|
+
//Dispose overlay after hidden
|
|
1030
|
+
if (this._overlayRef === undefined)
|
|
1031
|
+
return;
|
|
1032
|
+
await resume_after(FlyoutPresenter.TransitionDuration);
|
|
1033
|
+
this._overlayRef.detach();
|
|
1034
|
+
this._overlayRef.dispose();
|
|
1035
|
+
this._overlayRef = undefined;
|
|
1036
|
+
}
|
|
1003
1037
|
get Target() {
|
|
1004
1038
|
return this._target;
|
|
1005
1039
|
}
|
|
@@ -1095,23 +1129,12 @@ class FlyoutBaseComponent {
|
|
|
1095
1129
|
this.Placement = 'Top';
|
|
1096
1130
|
this.HasBackdrop = true;
|
|
1097
1131
|
this._isOpen = false;
|
|
1098
|
-
this.isVisible = false;
|
|
1099
1132
|
this.IsOpenChange = new EventEmitter();
|
|
1133
|
+
this.isVisible = false;
|
|
1100
1134
|
this._target = null;
|
|
1101
1135
|
}
|
|
1102
1136
|
ngOnDestroy() {
|
|
1103
|
-
|
|
1104
|
-
this._backdropContextMenuSubscription();
|
|
1105
|
-
}
|
|
1106
|
-
ngAfterViewInit() {
|
|
1107
|
-
this._templatePortal = new TemplatePortal(this._template, this._viewContainerRef);
|
|
1108
|
-
let config = new OverlayConfig({
|
|
1109
|
-
hasBackdrop: this.HasBackdrop,
|
|
1110
|
-
scrollStrategy: this._overlay.scrollStrategies.reposition()
|
|
1111
|
-
});
|
|
1112
|
-
this._overlayRef = this._overlay.create(config);
|
|
1113
|
-
this._overlayRef.backdropClick().subscribe(() => this.Hide());
|
|
1114
|
-
this.OnOverlay(this._overlayRef);
|
|
1137
|
+
this.hideOverlay();
|
|
1115
1138
|
}
|
|
1116
1139
|
OnOverlay(overlay) {
|
|
1117
1140
|
}
|
|
@@ -1202,7 +1225,7 @@ class ComboBoxComponent extends SelectorComponent {
|
|
|
1202
1225
|
return;
|
|
1203
1226
|
let rect = this._host.nativeElement.getBoundingClientRect();
|
|
1204
1227
|
let popupOffset = -(this._selector?.GetElement(this.SelectedIndex)?.offsetTop ?? 0);
|
|
1205
|
-
this.target = { x: rect.left, y: rect.top + popupOffset - 4, width: rect.width };
|
|
1228
|
+
this.target = { x: rect.left + 3, y: rect.top + popupOffset - 4, width: rect.width };
|
|
1206
1229
|
}
|
|
1207
1230
|
ngAfterViewInit() {
|
|
1208
1231
|
//help the layout finish itself
|
|
@@ -1332,14 +1355,14 @@ class RadioToggleButtonComponent extends RadioButtonComponent {
|
|
|
1332
1355
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioToggleButtonComponent, isStandalone: true, selector: "RadioToggleButton", host: { properties: { "class.checked": "this.checked" } }, usesInheritance: true, ngImport: i0, template: `<label>
|
|
1333
1356
|
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
1334
1357
|
<ng-content/>
|
|
1335
|
-
</label>`, 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:
|
|
1358
|
+
</label>`, 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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:5px 11px}\n"] }); }
|
|
1336
1359
|
}
|
|
1337
1360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioToggleButtonComponent, decorators: [{
|
|
1338
1361
|
type: Component,
|
|
1339
1362
|
args: [{ selector: 'RadioToggleButton', template: `<label>
|
|
1340
1363
|
<input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
|
|
1341
1364
|
<ng-content/>
|
|
1342
|
-
</label>`, 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:
|
|
1365
|
+
</label>`, 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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:5px 11px}\n"] }]
|
|
1343
1366
|
}], propDecorators: { checked: [{
|
|
1344
1367
|
type: HostBinding,
|
|
1345
1368
|
args: ['class.checked']
|
|
@@ -1379,11 +1402,11 @@ class RepeatButtonComponent extends ButtonComponent {
|
|
|
1379
1402
|
this.clearTimers();
|
|
1380
1403
|
}
|
|
1381
1404
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1382
|
-
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:
|
|
1405
|
+
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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
|
|
1383
1406
|
}
|
|
1384
1407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, decorators: [{
|
|
1385
1408
|
type: Component,
|
|
1386
|
-
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:
|
|
1409
|
+
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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
|
|
1387
1410
|
}], propDecorators: { Delay: [{
|
|
1388
1411
|
type: Input
|
|
1389
1412
|
}], Interval: [{
|
|
@@ -1465,10 +1488,10 @@ class GridComponent extends PanelComponent {
|
|
|
1465
1488
|
this.Orientation = 'Horizontal';
|
|
1466
1489
|
}
|
|
1467
1490
|
get gridAutoFlow() {
|
|
1468
|
-
return this.Orientation
|
|
1491
|
+
return this.Orientation === 'Horizontal' ? 'column' : 'row';
|
|
1469
1492
|
}
|
|
1470
1493
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1471
|
-
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"] }); }
|
|
1494
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridComponent, isStandalone: false, selector: "Grid", inputs: { ColumnDefinitions: "ColumnDefinitions", RowDefinitions: "RowDefinitions", AutoColumnDefinition: "AutoColumnDefinition", AutoRowDefinition: "AutoRowDefinition", ColumnSpacing: "ColumnSpacing", RowSpacing: "RowSpacing", Orientation: "Orientation" }, host: { properties: { "style.grid-template-columns": "this.ColumnDefinitions", "style.grid-template-rows": "this.RowDefinitions", "style.grid-auto-columns": "this.AutoColumnDefinition", "style.grid-auto-rows": "this.AutoRowDefinition", "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"] }); }
|
|
1472
1495
|
}
|
|
1473
1496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, decorators: [{
|
|
1474
1497
|
type: Component,
|
|
@@ -1483,6 +1506,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1483
1506
|
}, {
|
|
1484
1507
|
type: HostBinding,
|
|
1485
1508
|
args: ['style.grid-template-rows']
|
|
1509
|
+
}], AutoColumnDefinition: [{
|
|
1510
|
+
type: Input
|
|
1511
|
+
}, {
|
|
1512
|
+
type: HostBinding,
|
|
1513
|
+
args: ['style.grid-auto-columns']
|
|
1514
|
+
}], AutoRowDefinition: [{
|
|
1515
|
+
type: Input
|
|
1516
|
+
}, {
|
|
1517
|
+
type: HostBinding,
|
|
1518
|
+
args: ['style.grid-auto-rows']
|
|
1486
1519
|
}], ColumnSpacing: [{
|
|
1487
1520
|
type: Input
|
|
1488
1521
|
}, {
|
|
@@ -1665,7 +1698,7 @@ class SplitButtonComponent extends FrameworkElementComponent {
|
|
|
1665
1698
|
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: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<Grid ColumnDefinitions="1fr auto">
|
|
1666
1699
|
<Button CornerRadius="4px 0 0 4px" [IsEnabled]="IsEnabled" (Click)="onButtonClick()" [ngClass]="buttonClass"><ng-content/></Button>
|
|
1667
1700
|
<DropDownButton CornerRadius="0 4px 4px 0" Width="12px" (Click)="onDropDownClick()" [IsEnabled]="IsEnabled"/>
|
|
1668
|
-
</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"] }] }); }
|
|
1701
|
+
</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", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }] }); }
|
|
1669
1702
|
}
|
|
1670
1703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
1671
1704
|
type: Component,
|
|
@@ -1699,11 +1732,11 @@ class ToggleButtonComponent extends ButtonComponent {
|
|
|
1699
1732
|
this.IsCheckedChange.emit(this.IsChecked);
|
|
1700
1733
|
}
|
|
1701
1734
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1702
|
-
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:
|
|
1735
|
+
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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
|
|
1703
1736
|
}
|
|
1704
1737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
1705
1738
|
type: Component,
|
|
1706
|
-
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:
|
|
1739
|
+
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:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::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.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active: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)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
|
|
1707
1740
|
}], propDecorators: { IsChecked: [{
|
|
1708
1741
|
type: Input
|
|
1709
1742
|
}, {
|
|
@@ -1748,6 +1781,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1748
1781
|
</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"] }]
|
|
1749
1782
|
}] });
|
|
1750
1783
|
|
|
1784
|
+
class XamlRootComponent {
|
|
1785
|
+
onContextMenu(event) {
|
|
1786
|
+
event.preventDefault();
|
|
1787
|
+
}
|
|
1788
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1789
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: XamlRootComponent, isStandalone: true, selector: "XamlRoot", host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n"] }); }
|
|
1790
|
+
}
|
|
1791
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, decorators: [{
|
|
1792
|
+
type: Component,
|
|
1793
|
+
args: [{ selector: 'XamlRoot', template: `<ng-content/>`, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n"] }]
|
|
1794
|
+
}], propDecorators: { onContextMenu: [{
|
|
1795
|
+
type: HostListener,
|
|
1796
|
+
args: ['contextmenu', ['$event']]
|
|
1797
|
+
}] } });
|
|
1798
|
+
|
|
1799
|
+
class DialogPresenter extends XamlRootComponent {
|
|
1800
|
+
get isHeaderVisible() {
|
|
1801
|
+
return this._header?.nativeElement.children.length ?? 0 > 0;
|
|
1802
|
+
}
|
|
1803
|
+
get isFooterVisible() {
|
|
1804
|
+
return this._footer?.nativeElement.children.length ?? 0 > 0;
|
|
1805
|
+
}
|
|
1806
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DialogPresenter, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DialogPresenter, isStandalone: true, selector: "DialogPresenter", viewQueries: [{ propertyName: "_header", first: true, predicate: ["header"], descendants: true }, { propertyName: "_footer", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #header class="header" [ngStyle]="{'display': isHeaderVisible ? 'grid' : 'none'}"><ng-content select="[Header]"/></div>
|
|
1808
|
+
<div class="body"><ng-content/></div>
|
|
1809
|
+
<div #footer class="footer" [ngStyle]="{'display': isFooterVisible ? 'grid' : 'none'}"><ng-content select="[Footer]"/></div>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n", ":host{border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorDefault);border-style:solid;border-width:1px;box-shadow:0 0 15px #00000080}.header{font-size:20pt;padding:24px 24px 0}.body,.footer{padding:24px}.header,.body{background:var(--LayerFillColorAlt)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1810
|
+
}
|
|
1811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DialogPresenter, decorators: [{
|
|
1812
|
+
type: Component,
|
|
1813
|
+
args: [{ selector: 'DialogPresenter', template: `<div #header class="header" [ngStyle]="{'display': isHeaderVisible ? 'grid' : 'none'}"><ng-content select="[Header]"/></div>
|
|
1814
|
+
<div class="body"><ng-content/></div>
|
|
1815
|
+
<div #footer class="footer" [ngStyle]="{'display': isFooterVisible ? 'grid' : 'none'}"><ng-content select="[Footer]"/></div>`, imports: [CommonModule], styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n", ":host{border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorDefault);border-style:solid;border-width:1px;box-shadow:0 0 15px #00000080}.header{font-size:20pt;padding:24px 24px 0}.body,.footer{padding:24px}.header,.body{background:var(--LayerFillColorAlt)}\n"] }]
|
|
1816
|
+
}], propDecorators: { _header: [{
|
|
1817
|
+
type: ViewChild,
|
|
1818
|
+
args: ['header']
|
|
1819
|
+
}], _footer: [{
|
|
1820
|
+
type: ViewChild,
|
|
1821
|
+
args: ['footer']
|
|
1822
|
+
}] } });
|
|
1823
|
+
|
|
1824
|
+
class Dialog {
|
|
1825
|
+
constructor() {
|
|
1826
|
+
this.Closed = new EventEmitter();
|
|
1827
|
+
}
|
|
1828
|
+
static Create(type, container) {
|
|
1829
|
+
let component = container.createComponent(type);
|
|
1830
|
+
component.instance._overlay = container.injector.get(Overlay);
|
|
1831
|
+
component.instance._viewContainerRef = container.injector.get(ViewContainerRef);
|
|
1832
|
+
component.instance.Closed.subscribe(() => component.destroy());
|
|
1833
|
+
return component.instance;
|
|
1834
|
+
}
|
|
1835
|
+
async ShowAsync() {
|
|
1836
|
+
//Wait for a layout cycle to ensure templates etc. are ready
|
|
1837
|
+
await resume_after(0);
|
|
1838
|
+
//Create overlay
|
|
1839
|
+
let positionStrategy = this._overlay
|
|
1840
|
+
.position()
|
|
1841
|
+
.global()
|
|
1842
|
+
.centerHorizontally()
|
|
1843
|
+
.centerVertically();
|
|
1844
|
+
let config = new OverlayConfig({
|
|
1845
|
+
hasBackdrop: true,
|
|
1846
|
+
positionStrategy: positionStrategy
|
|
1847
|
+
});
|
|
1848
|
+
let overlayRef = this._overlay.create(config);
|
|
1849
|
+
//Attach template
|
|
1850
|
+
let templatePortal = new TemplatePortal(this._template, this._viewContainerRef);
|
|
1851
|
+
overlayRef.attach(templatePortal);
|
|
1852
|
+
//Wait for close
|
|
1853
|
+
await resume_on_event(this.Closed);
|
|
1854
|
+
overlayRef.detach();
|
|
1855
|
+
}
|
|
1856
|
+
Hide() {
|
|
1857
|
+
this.Closed.emit();
|
|
1858
|
+
}
|
|
1859
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1860
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Dialog, isStandalone: true, selector: "ng-component", outputs: { Closed: "Closed" }, viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
|
|
1861
|
+
}
|
|
1862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Dialog, decorators: [{
|
|
1863
|
+
type: Component,
|
|
1864
|
+
args: [{
|
|
1865
|
+
template: ''
|
|
1866
|
+
}]
|
|
1867
|
+
}], propDecorators: { Closed: [{
|
|
1868
|
+
type: Output
|
|
1869
|
+
}], _template: [{
|
|
1870
|
+
type: ViewChild,
|
|
1871
|
+
args: ['template']
|
|
1872
|
+
}] } });
|
|
1873
|
+
|
|
1874
|
+
var ContentDialogResult;
|
|
1875
|
+
(function (ContentDialogResult) {
|
|
1876
|
+
ContentDialogResult[ContentDialogResult["None"] = 0] = "None";
|
|
1877
|
+
ContentDialogResult[ContentDialogResult["Primary"] = 1] = "Primary";
|
|
1878
|
+
ContentDialogResult[ContentDialogResult["Secondary"] = 2] = "Secondary";
|
|
1879
|
+
})(ContentDialogResult || (ContentDialogResult = {}));
|
|
1880
|
+
var ContentDialogButton;
|
|
1881
|
+
(function (ContentDialogButton) {
|
|
1882
|
+
ContentDialogButton[ContentDialogButton["None"] = 0] = "None";
|
|
1883
|
+
ContentDialogButton[ContentDialogButton["Primary"] = 1] = "Primary";
|
|
1884
|
+
ContentDialogButton[ContentDialogButton["Secondary"] = 2] = "Secondary";
|
|
1885
|
+
ContentDialogButton[ContentDialogButton["Close"] = 3] = "Close";
|
|
1886
|
+
})(ContentDialogButton || (ContentDialogButton = {}));
|
|
1887
|
+
class ContentDialog extends Dialog {
|
|
1888
|
+
constructor() {
|
|
1889
|
+
super(...arguments);
|
|
1890
|
+
this.IsPrimaryButtonEnabled = true;
|
|
1891
|
+
this.PrimaryButtonClicked = new EventEmitter();
|
|
1892
|
+
this.IsSecondaryButtonEnabled = true;
|
|
1893
|
+
this.SecondaryButtonClicked = new EventEmitter();
|
|
1894
|
+
this.CloseButtonClicked = new EventEmitter();
|
|
1895
|
+
this.DefaultButton = ContentDialogButton.None;
|
|
1896
|
+
this._result = ContentDialogResult.None;
|
|
1897
|
+
}
|
|
1898
|
+
get Result() {
|
|
1899
|
+
return this._result;
|
|
1900
|
+
}
|
|
1901
|
+
set Result(value) {
|
|
1902
|
+
this._result = value;
|
|
1903
|
+
this.Hide();
|
|
1904
|
+
}
|
|
1905
|
+
onPrimaryButtonClicked() {
|
|
1906
|
+
this.PrimaryButtonClicked.emit();
|
|
1907
|
+
this.Result = ContentDialogResult.Primary;
|
|
1908
|
+
}
|
|
1909
|
+
onSecondaryButtonClicked() {
|
|
1910
|
+
this.SecondaryButtonClicked.emit();
|
|
1911
|
+
this.Result = ContentDialogResult.Secondary;
|
|
1912
|
+
}
|
|
1913
|
+
onCloseButtonClicked() {
|
|
1914
|
+
this.CloseButtonClicked.emit();
|
|
1915
|
+
this.Result = ContentDialogResult.None;
|
|
1916
|
+
}
|
|
1917
|
+
get isPrimaryButtonDefault() {
|
|
1918
|
+
return this.DefaultButton === ContentDialogButton.Primary;
|
|
1919
|
+
}
|
|
1920
|
+
get isSecondaryButtonDefault() {
|
|
1921
|
+
return this.DefaultButton === ContentDialogButton.Secondary;
|
|
1922
|
+
}
|
|
1923
|
+
get isCloseButtonDefault() {
|
|
1924
|
+
return this.DefaultButton === ContentDialogButton.Close;
|
|
1925
|
+
}
|
|
1926
|
+
async ShowAsync() {
|
|
1927
|
+
await super.ShowAsync();
|
|
1928
|
+
return this._result;
|
|
1929
|
+
}
|
|
1930
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContentDialog, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ContentDialog, isStandalone: true, selector: "ContentDialog", inputs: { Title: "Title", PrimaryButtonText: "PrimaryButtonText", IsPrimaryButtonEnabled: "IsPrimaryButtonEnabled", SecondaryButtonText: "SecondaryButtonText", IsSecondaryButtonEnabled: "IsSecondaryButtonEnabled", CloseButtonText: "CloseButtonText", Content: "Content", DefaultButton: "DefaultButton" }, outputs: { PrimaryButtonClicked: "PrimaryButtonClicked", SecondaryButtonClicked: "SecondaryButtonClicked", CloseButtonClicked: "CloseButtonClicked" }, usesInheritance: true, ngImport: i0, template: `<ng-template #template>
|
|
1932
|
+
<DialogPresenter>
|
|
1933
|
+
<div Header>{{Title}}</div>
|
|
1934
|
+
{{Content}}
|
|
1935
|
+
<ng-content/>
|
|
1936
|
+
<Grid RowDefinitions="auto" Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
|
|
1937
|
+
<Button *ngIf="PrimaryButtonText !== undefined" [IsEnabled]="IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{PrimaryButtonText}}</Button>
|
|
1938
|
+
<Button *ngIf="SecondaryButtonText !== undefined" [IsEnabled]="IsSecondaryButtonEnabled" (Click)="onSecondaryButtonClicked()" [class.AccentButtonStyle]="isSecondaryButtonDefault">{{SecondaryButtonText}}</Button>
|
|
1939
|
+
<Button *ngIf="CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{CloseButtonText}}</Button>
|
|
1940
|
+
</Grid>
|
|
1941
|
+
</DialogPresenter>
|
|
1942
|
+
</ng-template>`, isInline: true, styles: [""], dependencies: [{ kind: "component", type: DialogPresenter, selector: "DialogPresenter" }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1943
|
+
}
|
|
1944
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContentDialog, decorators: [{
|
|
1945
|
+
type: Component,
|
|
1946
|
+
args: [{ selector: 'ContentDialog', template: `<ng-template #template>
|
|
1947
|
+
<DialogPresenter>
|
|
1948
|
+
<div Header>{{Title}}</div>
|
|
1949
|
+
{{Content}}
|
|
1950
|
+
<ng-content/>
|
|
1951
|
+
<Grid RowDefinitions="auto" Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
|
|
1952
|
+
<Button *ngIf="PrimaryButtonText !== undefined" [IsEnabled]="IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{PrimaryButtonText}}</Button>
|
|
1953
|
+
<Button *ngIf="SecondaryButtonText !== undefined" [IsEnabled]="IsSecondaryButtonEnabled" (Click)="onSecondaryButtonClicked()" [class.AccentButtonStyle]="isSecondaryButtonDefault">{{SecondaryButtonText}}</Button>
|
|
1954
|
+
<Button *ngIf="CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{CloseButtonText}}</Button>
|
|
1955
|
+
</Grid>
|
|
1956
|
+
</DialogPresenter>
|
|
1957
|
+
</ng-template>`, imports: [DialogPresenter, GridModule, ButtonComponent, CommonModule] }]
|
|
1958
|
+
}], propDecorators: { Title: [{
|
|
1959
|
+
type: Input
|
|
1960
|
+
}], PrimaryButtonText: [{
|
|
1961
|
+
type: Input
|
|
1962
|
+
}], IsPrimaryButtonEnabled: [{
|
|
1963
|
+
type: Input
|
|
1964
|
+
}], PrimaryButtonClicked: [{
|
|
1965
|
+
type: Output
|
|
1966
|
+
}], SecondaryButtonText: [{
|
|
1967
|
+
type: Input
|
|
1968
|
+
}], IsSecondaryButtonEnabled: [{
|
|
1969
|
+
type: Input
|
|
1970
|
+
}], SecondaryButtonClicked: [{
|
|
1971
|
+
type: Output
|
|
1972
|
+
}], CloseButtonText: [{
|
|
1973
|
+
type: Input
|
|
1974
|
+
}], CloseButtonClicked: [{
|
|
1975
|
+
type: Output
|
|
1976
|
+
}], Content: [{
|
|
1977
|
+
type: Input
|
|
1978
|
+
}], DefaultButton: [{
|
|
1979
|
+
type: Input
|
|
1980
|
+
}] } });
|
|
1981
|
+
|
|
1751
1982
|
class MenuFlyoutComponent extends FlyoutComponent {
|
|
1752
1983
|
get transitionAnimation() {
|
|
1753
1984
|
return 'Default';
|
|
@@ -2156,6 +2387,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2156
2387
|
}] });
|
|
2157
2388
|
|
|
2158
2389
|
class NumberBoxComponent extends FrameworkElementComponent {
|
|
2390
|
+
get flyoutTarget() {
|
|
2391
|
+
return this._input?.nativeElement;
|
|
2392
|
+
}
|
|
2159
2393
|
get Text() {
|
|
2160
2394
|
return this._text;
|
|
2161
2395
|
}
|
|
@@ -2280,7 +2514,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
|
|
|
2280
2514
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberBoxComponent, isStandalone: true, selector: "NumberBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", NumberFormatter: "NumberFormatter", Unit: "Unit", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "click": "onClick()", "focusin": "onFocusIn()", "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_flyout", first: true, predicate: ["flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
|
|
2281
2515
|
<div class="icon"></div>
|
|
2282
2516
|
<input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
|
|
2283
|
-
<Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false">
|
|
2517
|
+
<Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
|
|
2284
2518
|
<RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50" (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph=""/></RepeatButton>
|
|
2285
2519
|
<RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50" (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph=""/></RepeatButton>
|
|
2286
2520
|
</Flyout>
|
|
@@ -2292,7 +2526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2292
2526
|
args: [{ selector: 'NumberBox', template: `<label>
|
|
2293
2527
|
<div class="icon"></div>
|
|
2294
2528
|
<input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
|
|
2295
|
-
<Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false">
|
|
2529
|
+
<Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
|
|
2296
2530
|
<RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50" (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph=""/></RepeatButton>
|
|
2297
2531
|
<RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50" (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph=""/></RepeatButton>
|
|
2298
2532
|
</Flyout>
|
|
@@ -2411,21 +2645,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2411
2645
|
args: ['contextmenu', ['$event']]
|
|
2412
2646
|
}] } });
|
|
2413
2647
|
|
|
2414
|
-
class XamlRootComponent {
|
|
2415
|
-
onContextMenu(event) {
|
|
2416
|
-
event.preventDefault();
|
|
2417
|
-
}
|
|
2418
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: XamlRootComponent, isStandalone: true, selector: "XamlRoot", host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n"] }); }
|
|
2420
|
-
}
|
|
2421
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, decorators: [{
|
|
2422
|
-
type: Component,
|
|
2423
|
-
args: [{ selector: 'XamlRoot', template: `<ng-content/>`, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n"] }]
|
|
2424
|
-
}], propDecorators: { onContextMenu: [{
|
|
2425
|
-
type: HostListener,
|
|
2426
|
-
args: ['contextmenu', ['$event']]
|
|
2427
|
-
}] } });
|
|
2428
|
-
|
|
2429
2648
|
/*
|
|
2430
2649
|
* Public API Surface of xaml-ui
|
|
2431
2650
|
*/
|
|
@@ -2435,5 +2654,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2435
2654
|
* Generated bundle index. Do not edit.
|
|
2436
2655
|
*/
|
|
2437
2656
|
|
|
2438
|
-
export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContextFlyoutDirective, DropDownButtonComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupTemplate, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, rgbToHsl, stringToColor, toAlignment, toJustification };
|
|
2657
|
+
export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupTemplate, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
|
|
2439
2658
|
//# sourceMappingURL=xaml-ui.mjs.map
|