xaml-ui 1.0.8 → 1.0.10

package/lib/Common.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from "@angular/core";
 export type HorizontalAlignment = 'Left' | 'Center' | 'Right' | 'Stretch';
 export type VerticalAlignment = 'Top' | 'Center' | 'Bottom' | 'Stretch';
 export type Orientation = 'Horizontal' | 'Vertical';
@@ -13,3 +14,5 @@ export type FlyoutPlacementMode = 'Top' | 'Bottom' | 'Left' | 'Right' | 'TopEdge
 export type Stretch = 'None' | 'Fill' | 'Uniform' | 'UniformToFill';
 export declare function toJustification(value: HorizontalAlignment): string;
 export declare function toAlignment(value: VerticalAlignment): "flex-start" | "center" | "flex-end" | "stretch";
+export declare function resume_after(timeout: number): Promise<void>;
+export declare function resume_on_event<T>(event: EventEmitter<T>): Promise<void>;

package/lib/dialogs-and-flyouts/ContentDialog.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from "@angular/core";
+import { Dialog } from "./Dialog";
+import * as i0 from "@angular/core";
+export declare enum ContentDialogResult {
+    None = 0,
+    Primary = 1,
+    Secondary = 2
+}
+export declare enum ContentDialogButton {
+    None = 0,
+    Primary = 1,
+    Secondary = 2,
+    Close = 3
+}
+export declare class ContentDialog extends Dialog {
+    Title?: string;
+    PrimaryButtonText?: string;
+    IsPrimaryButtonEnabled: boolean;
+    PrimaryButtonClicked: EventEmitter<any>;
+    SecondaryButtonText?: string;
+    IsSecondaryButtonEnabled: boolean;
+    SecondaryButtonClicked: EventEmitter<any>;
+    CloseButtonText?: string;
+    CloseButtonClicked: EventEmitter<any>;
+    Content: any;
+    DefaultButton: ContentDialogButton;
+    private _result;
+    get Result(): ContentDialogResult;
+    set Result(value: ContentDialogResult);
+    protected onPrimaryButtonClicked(): void;
+    protected onSecondaryButtonClicked(): void;
+    protected onCloseButtonClicked(): void;
+    protected get isPrimaryButtonDefault(): boolean;
+    protected get isSecondaryButtonDefault(): boolean;
+    protected get isCloseButtonDefault(): boolean;
+    ShowAsync(): Promise<ContentDialogResult>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContentDialog, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContentDialog, "ContentDialog", never, { "Title": { "alias": "Title"; "required": false; }; "PrimaryButtonText": { "alias": "PrimaryButtonText"; "required": false; }; "IsPrimaryButtonEnabled": { "alias": "IsPrimaryButtonEnabled"; "required": false; }; "SecondaryButtonText": { "alias": "SecondaryButtonText"; "required": false; }; "IsSecondaryButtonEnabled": { "alias": "IsSecondaryButtonEnabled"; "required": false; }; "CloseButtonText": { "alias": "CloseButtonText"; "required": false; }; "Content": { "alias": "Content"; "required": false; }; "DefaultButton": { "alias": "DefaultButton"; "required": false; }; }, { "PrimaryButtonClicked": "PrimaryButtonClicked"; "SecondaryButtonClicked": "SecondaryButtonClicked"; "CloseButtonClicked": "CloseButtonClicked"; }, never, ["*"], true, never>;
+}

package/lib/dialogs-and-flyouts/Dialog.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter, ViewContainerRef } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare abstract class Dialog {
+    Closed: EventEmitter<any>;
+    private _template;
+    private _overlay;
+    private _viewContainerRef;
+    private _dialogPresenter?;
+    IsBackdropDismissEnabled: boolean;
+    static Create<T extends Dialog>(type: {
+        new (...args: any[]): T;
+    }, container: ViewContainerRef): T;
+    ShowAsync(): Promise<any>;
+    Hide(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Dialog, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Dialog, "ng-component", never, {}, { "Closed": "Closed"; }, never, never, true, never>;
+}

package/lib/layout/Grid.d.ts

@@ -4,12 +4,14 @@ import * as i0 from "@angular/core";
 export declare class GridComponent extends PanelComponent {
     ColumnDefinitions?: string;
     RowDefinitions?: string;
+    AutoColumnDefinition?: string;
+    AutoRowDefinition?: string;
     ColumnSpacing?: string;
     RowSpacing?: string;
     Orientation: Orientation;
     private get gridAutoFlow();
     static ɵfac: i0.ɵɵFactoryDeclaration<GridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GridComponent, "Grid", never, { "ColumnDefinitions": { "alias": "ColumnDefinitions"; "required": false; }; "RowDefinitions": { "alias": "RowDefinitions"; "required": false; }; "ColumnSpacing": { "alias": "ColumnSpacing"; "required": false; }; "RowSpacing": { "alias": "RowSpacing"; "required": false; }; "Orientation": { "alias": "Orientation"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridComponent, "Grid", never, { "ColumnDefinitions": { "alias": "ColumnDefinitions"; "required": false; }; "RowDefinitions": { "alias": "RowDefinitions"; "required": false; }; "AutoColumnDefinition": { "alias": "AutoColumnDefinition"; "required": false; }; "AutoRowDefinition": { "alias": "AutoRowDefinition"; "required": false; }; "ColumnSpacing": { "alias": "ColumnSpacing"; "required": false; }; "RowSpacing": { "alias": "RowSpacing"; "required": false; }; "Orientation": { "alias": "Orientation"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare class GridProperty {
     Column?: number;

package/lib/menus-and-toolbars/MenuFlyout.d.ts

@@ -1,9 +1,8 @@
-import { AfterViewInit } from "@angular/core";
 import { FlyoutComponent } from "../dialogs-and-flyouts/Flyout";
 import { FlyoutPresenterAnimation } from "../primitives/FlyoutPresenter";
 import { OverlayRef } from "@angular/cdk/overlay-module.d-CSrPj90C";
 import * as i0 from "@angular/core";
-export declare class MenuFlyoutComponent extends FlyoutComponent implements AfterViewInit {
+export declare class MenuFlyoutComponent extends FlyoutComponent {
     private _menuClickSubscription?;
     protected get transitionAnimation(): FlyoutPresenterAnimation;
     protected OnOverlay(overlay: OverlayRef): void;

package/lib/primitives/DialogPresenter.d.ts

@@ -0,0 +1,13 @@
+import { XamlRootComponent } from "../XamlRoot";
+import * as i0 from "@angular/core";
+export declare class DialogPresenter extends XamlRootComponent {
+    static TransitionDuration: number;
+    private _header?;
+    private _footer?;
+    IsVisible: boolean;
+    private get visible();
+    protected get isHeaderVisible(): number | boolean;
+    protected get isFooterVisible(): number | boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DialogPresenter, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogPresenter, "DialogPresenter", never, { "IsVisible": { "alias": "IsVisible"; "required": false; }; }, {}, never, ["[Header]", "*", "[Footer]"], true, never>;
+}

package/lib/primitives/FlyoutBase.d.ts

@@ -1,10 +1,10 @@
 import { FlexibleConnectedPositionStrategyOrigin, Overlay, OverlayRef } from "@angular/cdk/overlay";
-import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, Renderer2, ViewContainerRef } from "@angular/core";
+import { ElementRef, EventEmitter, OnDestroy, Renderer2, ViewContainerRef } from "@angular/core";
 import { FlyoutPresenterAnimation } from "./FlyoutPresenter";
 import { FlyoutPlacementMode } from "../Common";
 import * as i0 from "@angular/core";
 export declare const PopupTemplate = "<ng-template #template><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></ng-template>";
-export declare abstract class FlyoutBaseComponent implements AfterViewInit, OnDestroy {
+export declare abstract class FlyoutBaseComponent implements OnDestroy {
     private _viewContainerRef;
     private _overlay;
     private _hostElement;
@@ -16,9 +16,12 @@ export declare abstract class FlyoutBaseComponent implements AfterViewInit, OnDe
     private _isOpen;
     get IsOpen(): boolean;
     set IsOpen(value: boolean);
-    private updatePlacement;
-    protected isVisible: boolean;
     IsOpenChange: EventEmitter<boolean>;
+    private _overlayRef?;
+    protected isVisible: boolean;
+    private updatePlacement;
+    private showOverlay;
+    private hideOverlay;
     private _target;
     get Target(): FlexibleConnectedPositionStrategyOrigin | null;
     set Target(value: FlexibleConnectedPositionStrategyOrigin | null);
@@ -26,11 +29,8 @@ export declare abstract class FlyoutBaseComponent implements AfterViewInit, OnDe
     private get style();
     protected get transitionAnimation(): FlyoutPresenterAnimation;
     private get positioning();
-    private _overlayRef;
-    private _templatePortal;
     constructor(_viewContainerRef: ViewContainerRef, _overlay: Overlay, _hostElement: ElementRef, _renderer: Renderer2);
     ngOnDestroy(): void;
-    ngAfterViewInit(): void;
     protected OnOverlay(overlay: OverlayRef): void;
     Show(): void;
     Hide(): void;

package/lib/text/NumberBox.d.ts

@@ -17,6 +17,7 @@ export declare class NumberBoxComponent extends FrameworkElementComponent {
     NumberFormatter: NumberFormatter;
     Unit?: string;
     ValueChange: EventEmitter<number>;
+    protected get flyoutTarget(): HTMLInputElement;
     private _input;
     private _flyout;
     private _text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xaml-ui",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "license": "MPL-2.0",
   "description": "XAML UI is angular version of Microsoft's WinUI component library.",
   "peerDependencies": {

package/public-api.d.ts

@@ -12,7 +12,9 @@ export * from './lib/basic-input/ToggleButton';
 export * from './lib/basic-input/ToggleSwitch';
 export * from './lib/collections/ListBox';
 export * from './lib/collections/ListView';
+export * from './lib/dialogs-and-flyouts/ContentDialog';
 export * from './lib/dialogs-and-flyouts/ContextFlyout';
+export * from './lib/dialogs-and-flyouts/Dialog';
 export * from './lib/dialogs-and-flyouts/Flyout';
 export * from './lib/icons/FontIcon';
 export * from './lib/layout/Border';
@@ -26,6 +28,7 @@ export * from './lib/menus-and-toolbars/MenuFlyout';
 export * from './lib/menus-and-toolbars/MenuFlyoutItem';
 export * from './lib/menus-and-toolbars/MenuFlyoutItemBase';
 export * from './lib/menus-and-toolbars/MenuFlyoutSeparator';
+export * from './lib/primitives/DialogPresenter';
 export * from './lib/primitives/FlyoutBase';
 export * from './lib/primitives/FlyoutPresenter';
 export * from './lib/primitives/Selector';

package/styles/XamlGlobals.css

@@ -16,8 +16,10 @@
   --SystemFontSize: 10pt;
   --SystemFontFamily: 'Segoe UI', Arial, sans-serif;
   --SymbolFontFamily: 'Segoe Fluent Icons', 'Segoe MDL2 Assets';
-  --SystemAccentColor: #0078d4;
-  
+
+  --SystemAccentColor: #0078d4;      
+  --SmokeFillColorDefault: #0000004D;
+
   --ControlNormalAnimationDuration: 0.25s;
   --ControlFastAnimationDuration: 0.167s;
   --ControlFasterAnimationDuration: 0.083s;
@@ -43,7 +45,7 @@
   --SubtleFillColorTransparent: #FFFFFF00;
   --SubtleFillColorSecondary: #FFFFFF0F;
   --SubtleFillColorTertiary: #FFFFFF0A;
-  
+
   --AccentFillColorDefault: #4CC2FFFF; /*+2*/
   --AccentFillColorSecondary: #4CC2FFE6; /*+2 90%*/
   --AccentFillColorTertiary: #4CC2FFCC; /*+2 80%*/
@@ -71,6 +73,8 @@
   --SystemChromeMediumLowColor: #2B2B2BFF;
 
   --DividerStrokeColorDefault: #FFFFFF15;
+  --LayerFillColorAlt: #FFFFFF0D;
+  --SurfaceStrokeColorDefault: #75757566;
 
   @media (prefers-color-scheme: light) {
 
@@ -122,21 +126,25 @@
     --SystemChromeMediumLowColor: #F2F2F2FF;
 
     --DividerStrokeColorDefault: #0000000F;
+    --LayerFillColorAlt: #FFFFFF;
+    --SurfaceStrokeColorDefault: #75757566;
   }
 }
 
-.cdk-overlay-dark-backdrop {
-  background: transparent !important;
+.xaml-flyout-overlay-backdrop {
+  background: transparent;
+}
+
+.xaml-dialog-overlay-backdrop {
+  background: var(--SmokeFillColorDefault);
 }
 
 .cdk-overlay-pane {
   display: grid !important;
 }
 
-:root{
-  &, & * {
-    font-family: var(--SystemFontFamily);
-    font-size: var(--SystemFontSize);
-    color: var(--TextFillColorPrimary);
-  }
+body, button {
+  font-family: var(--SystemFontFamily);
+  font-size: var(--SystemFontSize);
+  color: var(--TextFillColorPrimary);
 }