xaml-ui 1.0.3 → 1.0.4

package/lib/primitives/Popup.d.ts

@@ -12,8 +12,8 @@ export declare class PopupComponent {
     private _container?;
     Show(): void;
     Hide(): void;
-    get containerClass(): "popup-open" | undefined;
-    onBackdropClick(event: Event): void;
+    protected get containerClass(): "popup-open" | undefined;
+    protected onBackdropClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PopupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PopupComponent, "Popup", never, { "IsOpen": { "alias": "IsOpen"; "required": false; }; "VerticalOffset": { "alias": "VerticalOffset"; "required": false; }; "HorizontalOffset": { "alias": "HorizontalOffset"; "required": false; }; }, { "IsOpenChange": "IsOpenChange"; }, never, ["*"], true, never>;
 }

package/lib/primitives/Selector.d.ts

@@ -8,8 +8,8 @@ export declare abstract class SelectorComponent extends FrameworkElementComponen
     IsEnabled: boolean;
     HorizontalContentAlignment: HorizontalAlignment;
     VerticalContentAlignment: VerticalAlignment;
-    get alignContent(): "flex-start" | "center" | "flex-end" | "stretch";
-    get justifyContent(): string;
+    protected get alignContent(): "flex-start" | "center" | "flex-end" | "stretch";
+    protected get justifyContent(): string;
     private get disabled();
     private _itemSource;
     get ItemSource(): any[];
@@ -26,8 +26,8 @@ export declare abstract class SelectorComponent extends FrameworkElementComponen
     SelectedItemChange: EventEmitter<any>;
     DisplayMemberPath?: string;
     SelectedValuePath?: string;
-    getValue(index: number, item: any): any;
-    onItemClick(event: Event, index: number, item: any): void;
+    protected getValue(index: number, item: any): any;
+    protected onItemClick(event: Event, index: number, item: any): void;
     GetElement(index: number): HTMLElement | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectorComponent, "Selector", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "HorizontalContentAlignment": { "alias": "HorizontalContentAlignment"; "required": false; }; "VerticalContentAlignment": { "alias": "VerticalContentAlignment"; "required": false; }; "ItemSource": { "alias": "ItemSource"; "required": false; }; "SelectedIndex": { "alias": "SelectedIndex"; "required": false; }; "SelectedValue": { "alias": "SelectedValue"; "required": false; }; "SelectedItem": { "alias": "SelectedItem"; "required": false; }; "DisplayMemberPath": { "alias": "DisplayMemberPath"; "required": false; }; "SelectedValuePath": { "alias": "SelectedValuePath"; "required": false; }; }, { "SelectedIndexChange": "SelectedIndexChange"; "SelectedValueChange": "SelectedValueChange"; "SelectedItemChange": "SelectedItemChange"; }, ["ItemTemplate"], never, true, never>;

package/lib/scrolling/ScrollBar.d.ts

@@ -17,12 +17,12 @@ export declare class ScrollBarComponent extends FrameworkElementComponent {
     private _isScrolling;
     private _startPointerPosition;
     private _startScrollPosition;
-    get decreaseGlyph(): "" | "";
-    get increaseGlyph(): "" | "";
-    get class(): string;
-    getElementSize(element: HTMLElement): number;
-    getPointerPosition(event: PointerEvent): number;
-    get thumbStyle(): {
+    protected get decreaseGlyph(): "" | "";
+    protected get increaseGlyph(): "" | "";
+    private get class();
+    private getElementSize;
+    private getPointerPosition;
+    protected get thumbStyle(): {
         height?: undefined;
         top?: undefined;
         width?: undefined;
@@ -39,13 +39,13 @@ export declare class ScrollBarComponent extends FrameworkElementComponent {
         top?: undefined;
     };
     private _interval?;
-    onButtonDown(event: PointerEvent, direction: boolean): void;
-    onButtonUp(event: PointerEvent): void;
-    onTrackDown(event: PointerEvent): void;
-    onTrackUp(event: PointerEvent): void;
-    onPointerDown(event: PointerEvent): void;
-    onPointerMove(event: PointerEvent): void;
-    onPointerUp(event: PointerEvent): void;
+    protected onButtonDown(event: PointerEvent, direction: boolean): void;
+    protected onButtonUp(event: PointerEvent): void;
+    protected onTrackDown(event: PointerEvent): void;
+    protected onTrackUp(event: PointerEvent): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScrollBarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ScrollBarComponent, "ScrollBar", never, { "Orientation": { "alias": "Orientation"; "required": false; }; "ViewportSize": { "alias": "ViewportSize"; "required": false; }; "ScrollSize": { "alias": "ScrollSize"; "required": false; }; "StepSize": { "alias": "StepSize"; "required": false; }; "Value": { "alias": "Value"; "required": false; }; "IsEnabled": { "alias": "IsEnabled"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, never, true, never>;
 }

package/lib/scrolling/ScrollViewer.d.ts

@@ -18,12 +18,12 @@ export declare class ScrollViewerComponent extends FrameworkElementComponent imp
     get VerticalOffset(): number;
     set VerticalOffset(value: number);
     private static toOverflow;
-    get contentStyle(): {
+    protected get contentStyle(): {
         'overflow-x': string;
         'overflow-y': string;
     };
     constructor(_changeDetector: ChangeDetectorRef);
-    onScroll(): void;
+    protected onScroll(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ScrollViewerComponent, "ScrollViewer", never, { "HorizontalScrollMode": { "alias": "HorizontalScrollMode"; "required": false; }; "VerticalScrollMode": { "alias": "VerticalScrollMode"; "required": false; }; }, {}, never, ["*"], true, never>;

package/lib/text/TextBox.d.ts

@@ -11,8 +11,8 @@ export declare class TextBoxComponent extends FrameworkElementComponent {
     private _text;
     get Text(): string;
     set Text(value: string);
-    onChange(event: Event): void;
-    onContextMenu(event: Event): void;
+    protected onChange(event: Event): void;
+    private onContextMenu;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TextBoxComponent, "TextBox", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "PlaceholderText": { "alias": "PlaceholderText"; "required": false; }; "TextAlignment": { "alias": "TextAlignment"; "required": false; }; "TextWrapping": { "alias": "TextWrapping"; "required": false; }; "Text": { "alias": "Text"; "required": false; }; }, { "TextChange": "TextChange"; }, never, never, true, never>;
 }

package/package.json

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

package/styles/XamlGlobals.css

@@ -0,0 +1,124 @@
+/*accent +3: #FF99EBFF
+  accent +2: #FF4CC2FF
+  accent +1: #FF0091F8
+  accent: #FF0078D4
+  accent -1: #FF0067C0
+  accent -2: #FF003E92
+  accent -3: #FF001A68*/
+
+:root {
+  /*Invariant variables*/
+  --ControlBorderThickness: 1px;
+  --ControlCornerRadius: 4px;
+  --OverlayCornerRadius: 8px;
+  --AcrylicBlur: blur(12px);
+
+  --SymbolFontFamily: 'Segoe Fluent Icons', 'Segoe MDL2 Assets';
+  --SystemAccentColor: #0078d4;
+  
+  --ControlNormalAnimationDuration: 0.25s;
+  --ControlFastAnimationDuration: 0.167s;
+  --ControlFasterAnimationDuration: 0.083s;
+
+  /*Dark mode*/
+  --ControlFillColorDefault: #FFFFFF0F;
+  --ControlFillColorSecondary: #FFFFFF15;
+  --ControlFillColorTertiary: #FFFFFF08;
+  --ControlFillColorDisabled: #FFFFFF0B;
+  --ControlFillColorInputActive: #1E1E1EB3;
+
+  --ControlSolidFillColorDefault: #454545FF;
+
+  --ControlAltFillColorSecondary: #00000019;
+  --ControlAltFillColorTertiary: #FFFFFF0B;
+  --ControlAltFillColorQuarternary: #FFFFFF12;
+  --ControlAltFillColorDisabled: #FFFFFF00;
+
+  --ControlStrongFillColorDefault: #FFFFFF8B;
+  --ControlStrongFillColorDisabled: #FFFFFF3F;
+
+  --ControlFillColorTransparent: #FFFFFF00;
+  --SubtleFillColorTransparent: #FFFFFF00;
+  --SubtleFillColorSecondary: #FFFFFF0F;
+  --SubtleFillColorTertiary: #FFFFFF0A;
+  
+  --AccentFillColorDefault: #4CC2FFFF; /*+2*/
+  --AccentFillColorSecondary: #4CC2FFE6; /*+2 90%*/
+  --AccentFillColorTertiary: #4CC2FFCC; /*+2 80%*/
+  --AccentFillColorDisabled: #FFFFFF28;
+
+  --SystemControlHighlightListAccentLow: #0078D499; /*accent 60%*/
+  --SystemControlHighlightListAccentMedium: #0078D4CC; /*accent 80%*/
+  --SystemControlHighlightListAccentHigh: #0078D4E6; /*accent 90%*/
+
+  --ControlStrokeColorDefault: #FFFFFF12;
+  --ControlStrongStrokeColorDefault: #FFFFFF8B;
+  --ControlStrongStrokeColorDisabled: #FFFFFF28;
+  --ControlStrokeColorOnAccentDefault: #FFFFFF14;
+
+  --TextFillColorPrimary: #FFFFFFFF;
+  --TextFillColorSecondary: #FFFFFFC5;
+  --TextFillColorDisabled: #FFFFFF5D;
+
+  --TextOnAccentFillColorPrimary: #000000;
+  --TextOnAccentFillColorSecondary: #00000080;
+  --TextOnAccentFillColorDisabled: #FFFFFF87;
+
+  --SurfaceStrokeColorFlyout: #00000033;
+  --AcrylicInAppFillColorDefault: #2C2C2C26; /*15%*/
+  --SystemChromeMediumLowColor: #2B2B2BFF;
+
+  --DividerStrokeColorDefault: #FFFFFF15;
+
+  @media (prefers-color-scheme: light) {
+
+    --ControlFillColorDefault: #FFFFFFB3;
+    --ControlFillColorSecondary: #F9F9F980;
+    --ControlFillColorTertiary: #F9F9F94D;
+    --ControlFillColorDisabled: #F9F9F94D;
+    --ControlFillColorInputActive: #FFFFFF;
+
+    --ControlSolidFillColorDefault: #FFFFFFFF;
+
+    --ControlAltFillColorSecondary: #00000006;
+    --ControlAltFillColorTertiary: #0000000F;
+    --ControlAltFillColorQuarternary: #00000018;
+    --ControlAltFillColorDisabled: #FFFFFF00;
+
+    --ControlStrongFillColorDefault: #00000072;
+    --ControlStrongFillColorDisabled: #00000051;
+
+    --ControlFillColorTransparent: #FFFFFF00;
+    --SubtleFillColorTransparent: #FFFFFF00;
+    --SubtleFillColorSecondary: #00000009;
+    --SubtleFillColorTertiary: #00000006;
+
+    --AccentFillColorDefault: #0067C0FF; /*-1*/
+    --AccentFillColorSecondary: #0067C0E6; /*-1 90%*/
+    --AccentFillColorTertiary: #0067C0CC; /*-1 80%*/
+    --AccentFillColorDisabled: #FFFFFF37;
+
+    --SystemControlHighlightListAccentLow: #0078D466; /*accent 40%*/
+    --SystemControlHighlightListAccentMedium: #0078D499; /*accent 60%*/
+    --SystemControlHighlightListAccentHigh: #0078D4B3; /*accent 70%*/
+
+    --ControlStrokeColorDefault: #0000000F;
+    --ControlStrongStrokeColorDefault: #00000072;
+    --ControlStrongStrokeColorDisabled: #00000037;
+    --ControlStrokeColorOnAccentDefault: #FFFFFF14;
+
+    --TextFillColorPrimary: #000000E4;
+    --TextFillColorSecondary: #0000009E;
+    --TextFillColorDisabled: #0000005C;
+
+    --TextOnAccentFillColorPrimary: #FFFFFF;
+    --TextOnAccentFillColorSecondary: #FFFFFFB3;
+    --TextOnAccentFillColorDisabled: #FFFFFF;
+
+    --SurfaceStrokeColorFlyout: #0000000F;
+    --AcrylicInAppFillColorDefault: #FCFCFC26; /*15%*/
+    --SystemChromeMediumLowColor: #F2F2F2FF;
+
+    --DividerStrokeColorDefault: #0000000F;
+  }
+}