@omnia/fx-models 8.0.7-vnext → 8.0.9-vnext

package/Constants.d.ts

@@ -80,8 +80,6 @@ export declare const Constants: {
                 omniaContentNav: string;
                 omniaContentBody: string;
                 omniaContentFooter: string;
-                omniaContentDialogLeft: string;
-                omniaContentDialogRight: string;
                 omniaLeftSidePanel: string;
                 omniaRightSidePanel: string;
             };

package/Constants.js

@@ -146,8 +146,6 @@ exports.Constants = {
                 omniaContentNav: "omnia-content-nav",
                 omniaContentBody: "omnia-content-body",
                 omniaContentFooter: "omnia-content-footer",
-                omniaContentDialogLeft: "omnia-content-dialog-left",
-                omniaContentDialogRight: "omnia-content-dialog-right",
                 omniaLeftSidePanel: "omnia-left-side-panel",
                 omniaRightSidePanel: "omnia-right-side-panel"
             },

package/Enums.d.ts

@@ -375,6 +375,7 @@ export declare enum IconTypes {
     FontAwesome = "IFontAwesomeIcon",
     Fabric = "IFabricIcon",
     Flag = "IFlagIcon",
+    Material = "IMaterialIcon",
     Custom = "ICustomIcon",
     SVG = "ISVG"
 }

package/Enums.js

@@ -268,6 +268,7 @@ var IconTypes;
     IconTypes["FontAwesome"] = "IFontAwesomeIcon";
     IconTypes["Fabric"] = "IFabricIcon";
     IconTypes["Flag"] = "IFlagIcon";
+    IconTypes["Material"] = "IMaterialIcon";
     IconTypes["Custom"] = "ICustomIcon";
     IconTypes["SVG"] = "ISVG";
 })(IconTypes = exports.IconTypes || (exports.IconTypes = {}));

package/Exposes.d.ts

@@ -113,6 +113,7 @@ export * from "./filterengine";
 export * from "@omnia/fx-models/internal-do-not-import-from-here/velcron/core/models";
 export * from "./auth";
 export * from "./sidepanel";
+export * from "./oxide";
 export * from "./FilePicker";
 export * from "./FileIdentifier";
 export * from "./UserAgent";

package/Exposes.js

@@ -125,6 +125,7 @@ tslib_1.__exportStar(require("./filterengine"), exports);
 tslib_1.__exportStar(require("@omnia/fx-models/internal-do-not-import-from-here/velcron/core/models"), exports);
 tslib_1.__exportStar(require("./auth"), exports);
 tslib_1.__exportStar(require("./sidepanel"), exports);
+tslib_1.__exportStar(require("./oxide"), exports);
 //************************************************************************************ */
 // End of folder exports
 //************************************************************************************ */

package/FilterEngineStyles.d.ts

@@ -12,12 +12,13 @@ export declare const FilterEngineStyles: {
     avatarStyle: types.NestedCSSProperties;
     avatarOptionStyle: types.NestedCSSProperties;
     searchDefaultStyle: types.NestedCSSProperties;
+    searchTextColor: types.NestedCSSProperties;
     treeNodeText: (isSelected: boolean) => types.NestedCSSProperties;
     bodyFilterStyle: (open: boolean) => types.NestedCSSProperties;
     treeNodeResultCount: (theme: ITheming, isSelected: boolean) => types.NestedCSSProperties;
     dialogContent: (theming: ITheming) => types.NestedCSSProperties;
     popUpDialogButton: types.NestedCSSProperties;
-    panelDialogButton: (minWidth: number) => types.NestedCSSProperties;
+    panelDialogButton: types.NestedCSSProperties;
     mainSection: (maxWidth: number) => types.NestedCSSProperties;
     sideSection: (minWidth: number) => types.NestedCSSProperties;
     flexFull: types.NestedCSSProperties;

package/Icon.d.ts

@@ -7,6 +7,9 @@ export interface IIcon {
 export interface IFontAwesomeIcon extends IIcon {
     faClass: string;
 }
+export interface IMaterialIcon extends IIcon {
+    maClass: string;
+}
 export interface IFabricIcon extends IIcon {
     fabClass: string;
 }
@@ -27,6 +30,11 @@ export declare class FontAwesomeIcon implements IFontAwesomeIcon {
     iconType: IconTypes;
     constructor(faClass: string);
 }
+export declare class MaterialIcon implements IMaterialIcon {
+    maClass: string;
+    iconType: IconTypes;
+    constructor(maClass: string);
+}
 export declare class FabricIcon implements IFabricIcon {
     fabClass: string;
     iconType: IconTypes;

package/Icon.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlagIcon = exports.SvgIcon = exports.CustomIcon = exports.FabricIcon = exports.FontAwesomeIcon = void 0;
+exports.FlagIcon = exports.SvgIcon = exports.CustomIcon = exports.FabricIcon = exports.MaterialIcon = exports.FontAwesomeIcon = void 0;
 const Enums_1 = require("./Enums");
 /**
  * Class to create a guid
@@ -12,6 +12,13 @@ class FontAwesomeIcon {
     }
 }
 exports.FontAwesomeIcon = FontAwesomeIcon;
+class MaterialIcon {
+    constructor(maClass) {
+        this.maClass = maClass;
+        this.iconType = Enums_1.IconTypes.Material;
+    }
+}
+exports.MaterialIcon = MaterialIcon;
 class FabricIcon {
     constructor(fabClass) {
         this.fabClass = fabClass;

package/ManifestIds.d.ts

@@ -22,7 +22,6 @@ export declare class OmniaResourceManifests {
     static get ClientBoot(): Guid;
     static get FxUxVuetifyBottomnav(): Guid;
     static get ConsoleCommands(): Guid;
-    static get HMR(): Guid;
     static get FxUxVRating(): Guid;
     static get FxUxVuetifyHover(): Guid;
     static get FxUxVuetifyCombobox(): Guid;

package/ManifestIds.js

@@ -64,9 +64,6 @@ class OmniaResourceManifests {
     static get ConsoleCommands() {
         return new models_1.Guid("0d65cbc9-9fca-4960-b9b5-71807a801a9f");
     }
-    static get HMR() {
-        return new models_1.Guid("c45a049c-adb7-46ed-8435-83dbe2ab4256");
-    }
     //Moved to Common Components
     //public static get FxUxVuetifyBtn(): Guid { return new Guid("888135ca-8dcc-46f7-8b7c-874a982e307a"); }
     //public static get FxUxVuetifySpeedDial(): Guid { return new Guid("8742228e-a540-43ce-8b19-d01da2961845"); }

package/PermissionInputSettings.d.ts

@@ -1,3 +1,4 @@
+import { GuidValue } from "../shared";
 import { PrincipalTypes } from "./Enums";
 export interface PermissionInputSettings {
     roles: Array<{
@@ -5,6 +6,7 @@ export interface PermissionInputSettings {
         label: string;
         principalType?: PrincipalTypes;
         showSpecialIdentities?: boolean;
+        providerIds?: GuidValue[];
         required?: boolean;
     }>;
 }

package/editor-chrome/IEditorItemPanelsRenderer.d.ts

@@ -1,3 +1,3 @@
 export interface IEditorItemPanelsRenderer {
-    generateElement(h: any): JSX.Element;
+    generateElement(): JSX.Element;
 }

package/identities/Identity.d.ts

@@ -19,3 +19,11 @@ export declare abstract class Identity {
     private static getGuidValue;
     private static getIdAsString;
 }
+export declare enum ArchiveSortColumn {
+    DisplayName = 1,
+    Email = 2,
+    Username = 3,
+    IdentityType = 4,
+    ProviderId = 5,
+    TypeId = 6
+}

package/identities/Identity.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Identity = void 0;
+exports.ArchiveSortColumn = exports.Identity = void 0;
 const models_1 = require("@omnia/fx-models/internal-do-not-import-from-here/shared/models");
 const IdentityTypes_1 = require("./IdentityTypes");
 class Identity {
@@ -65,6 +65,15 @@ class Identity {
     }
 }
 exports.Identity = Identity;
+var ArchiveSortColumn;
+(function (ArchiveSortColumn) {
+    ArchiveSortColumn[ArchiveSortColumn["DisplayName"] = 1] = "DisplayName";
+    ArchiveSortColumn[ArchiveSortColumn["Email"] = 2] = "Email";
+    ArchiveSortColumn[ArchiveSortColumn["Username"] = 3] = "Username";
+    ArchiveSortColumn[ArchiveSortColumn["IdentityType"] = 4] = "IdentityType";
+    ArchiveSortColumn[ArchiveSortColumn["ProviderId"] = 5] = "ProviderId";
+    ArchiveSortColumn[ArchiveSortColumn["TypeId"] = 6] = "TypeId";
+})(ArchiveSortColumn = exports.ArchiveSortColumn || (exports.ArchiveSortColumn = {}));
 // only add extension methods when running in browser, not in node.js
 if (globalThis.omnia) {
     Object.defineProperty(Object.prototype, "toIdString", {

package/identities/UserIdentity.d.ts

@@ -49,6 +49,7 @@ export declare class DocumentDirectionSettings extends UserPropertyBagModel {
 export declare enum UserSortColumn {
     DisplayName = 1,
     Email = 2,
+    Username = 3,
     ProviderId = 4,
     UserTypeId = 5
 }

package/identities/UserIdentity.js

@@ -74,6 +74,7 @@ var UserSortColumn;
 (function (UserSortColumn) {
     UserSortColumn[UserSortColumn["DisplayName"] = 1] = "DisplayName";
     UserSortColumn[UserSortColumn["Email"] = 2] = "Email";
+    UserSortColumn[UserSortColumn["Username"] = 3] = "Username";
     UserSortColumn[UserSortColumn["ProviderId"] = 4] = "ProviderId";
     UserSortColumn[UserSortColumn["UserTypeId"] = 5] = "UserTypeId";
 })(UserSortColumn = exports.UserSortColumn || (exports.UserSortColumn = {}));

package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.d.ts

@@ -10,6 +10,9 @@ export interface BoxBorder extends BoxDimensions {
 }
 export interface BlueprintDefinition {
     id: Guid;
+    button?: {
+        borderRadius?: BoxDimensions;
+    };
     card?: {
         border?: BoxBorder;
         borderRadius?: BoxDimensions;

package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts

@@ -1,12 +1,21 @@
 import { Guid } from "../Guid";
 import { BlueprintDefinition } from "./BlueprintDefinition";
 import { TypographyDefinition } from "./TypographyDefinition";
+export interface ColorTypeResult<resultType> {
+    base: resultType;
+    baseTone: resultType;
+    onBase: resultType;
+    onBaseTone: resultType;
+    container: resultType;
+    containerTone: resultType;
+    onContainer: resultType;
+    onContainerTone: resultType;
+    colorType: (colorType: string) => resultType;
+}
 export interface ColorDefinition {
     dark: boolean;
     color: string;
     colorToned: string;
-    colorStyles: ColorStyles;
-    colorTonedStyles: ColorStyles;
 }
 export interface ColorStyles {
     background: object | string;
@@ -40,24 +49,26 @@ export interface ThemeDefinitionV2 {
     typography: TypographyDefinition;
     blueprint: BlueprintDefinition;
 }
-export declare const ColorSchemaTypes: {
-    primary: string;
-    secondary: string;
-    accent1: string;
-    accent2: string;
-    accent3: string;
-    neutral: string;
-    background: string;
-    error: string;
-    info: string;
-};
-export declare const ColorTypes: {
-    base: string;
-    baseTone: string;
-    onBase: string;
-    onBaseTone: string;
-    container: string;
-    containerTone: string;
-    onContainer: string;
-    onContainerTone: string;
-};
+export type ColorSchemaType = ColorSchemaTypes.primary | ColorSchemaTypes.secondary | ColorSchemaTypes.accent1 | ColorSchemaTypes.accent2 | ColorSchemaTypes.accent3 | ColorSchemaTypes.neutral | ColorSchemaTypes.background | ColorSchemaTypes.error | ColorSchemaTypes.info;
+export declare enum ColorSchemaTypes {
+    primary = "primary",
+    secondary = "secondary",
+    accent1 = "accent1",
+    accent2 = "accent2",
+    accent3 = "accent3",
+    neutral = "neutral",
+    background = "background",
+    error = "error",
+    info = "info"
+}
+export type ColorType = ColorTypes.base | ColorTypes.baseTone | ColorTypes.onBase | ColorTypes.onBaseTone | ColorTypes.container | ColorTypes.containerTone | ColorTypes.onContainer | ColorTypes.onContainerTone;
+export declare enum ColorTypes {
+    base = "base",
+    baseTone = "baseTone",
+    onBase = "onBase",
+    onBaseTone = "onBaseTone",
+    container = "container",
+    containerTone = "containerTone",
+    onContainer = "onContainer",
+    onContainerTone = "onContainerTone"
+}

package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.js

@@ -1,24 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorTypes = exports.ColorSchemaTypes = void 0;
-exports.ColorSchemaTypes = {
-    primary: "primary",
-    secondary: "secondary",
-    accent1: "accent1",
-    accent2: "accent2",
-    accent3: "accent3",
-    neutral: "neutral",
-    background: "background",
-    error: "error",
-    info: "info",
-};
-exports.ColorTypes = {
-    base: "base",
-    baseTone: "baseTone",
-    onBase: "onBase",
-    onBaseTone: "onBaseTone",
-    container: "container",
-    containerTone: "containerTone",
-    onContainer: "onContainer",
-    onContainerTone: "onContainerTone",
-};
+var ColorSchemaTypes;
+(function (ColorSchemaTypes) {
+    ColorSchemaTypes["primary"] = "primary";
+    ColorSchemaTypes["secondary"] = "secondary";
+    ColorSchemaTypes["accent1"] = "accent1";
+    ColorSchemaTypes["accent2"] = "accent2";
+    ColorSchemaTypes["accent3"] = "accent3";
+    ColorSchemaTypes["neutral"] = "neutral";
+    ColorSchemaTypes["background"] = "background";
+    ColorSchemaTypes["error"] = "error";
+    ColorSchemaTypes["info"] = "info";
+})(ColorSchemaTypes = exports.ColorSchemaTypes || (exports.ColorSchemaTypes = {}));
+var ColorTypes;
+(function (ColorTypes) {
+    ColorTypes["base"] = "base";
+    ColorTypes["baseTone"] = "baseTone";
+    ColorTypes["onBase"] = "onBase";
+    ColorTypes["onBaseTone"] = "onBaseTone";
+    ColorTypes["container"] = "container";
+    ColorTypes["containerTone"] = "containerTone";
+    ColorTypes["onContainer"] = "onContainer";
+    ColorTypes["onContainerTone"] = "onContainerTone";
+})(ColorTypes = exports.ColorTypes || (exports.ColorTypes = {}));

package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.d.ts

@@ -1,30 +1,30 @@
 import { Guid } from "../Guid";
 export interface TypographyDefinition {
     id: Guid;
-    h1: TypographyType;
-    h2: TypographyType;
-    h3: TypographyType;
-    text: TypographyType;
-    caption: TypographyType;
-    link: TypographyType;
+    h1: TypographyTypeDefinition;
+    h2: TypographyTypeDefinition;
+    h3: TypographyTypeDefinition;
+    text: TypographyTypeDefinition;
+    caption: TypographyTypeDefinition;
+    link: TypographyTypeDefinition;
 }
-export interface TypographyType {
+export interface TypographyTypeDefinition {
     decoration?: string;
     large: TypographyTypeBreakPoint;
     medium?: TypographyTypeBreakPoint;
     small?: TypographyTypeBreakPoint;
-    style: object | string;
 }
 export interface TypographyTypeBreakPoint {
     weight: number;
     size: number;
     lineHeight: number;
 }
-export declare const TypographyTypes: {
-    h1: string;
-    h2: string;
-    h3: string;
-    text: string;
-    caption: string;
-    link: string;
-};
+export type TypographyType = TypographyTypes.h1 | TypographyTypes.h2 | TypographyTypes.h3 | TypographyTypes.text | TypographyTypes.caption | TypographyTypes.link;
+export declare enum TypographyTypes {
+    h1 = "h1",
+    h2 = "h2",
+    h3 = "h3",
+    text = "text",
+    caption = "caption",
+    link = "link"
+}

package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TypographyTypes = void 0;
-exports.TypographyTypes = {
-    h1: "h1",
-    h2: "h2",
-    h3: "h3",
-    text: "text",
-    caption: "caption",
-    link: "link",
-};
+var TypographyTypes;
+(function (TypographyTypes) {
+    TypographyTypes["h1"] = "h1";
+    TypographyTypes["h2"] = "h2";
+    TypographyTypes["h3"] = "h3";
+    TypographyTypes["text"] = "text";
+    TypographyTypes["caption"] = "caption";
+    TypographyTypes["link"] = "link";
+})(TypographyTypes = exports.TypographyTypes || (exports.TypographyTypes = {}));

package/internal-do-not-import-from-here/shared/models/theming/UseThemeMethods.d.ts

@@ -0,0 +1,11 @@
+import { ColorDefinition, ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ThemeDefinitionV2 } from "./ThemeDefinitionV2";
+import { TypographyType, TypographyTypeDefinition, TypographyTypes } from "./TypographyDefinition";
+export declare const useThemeMethods: (themedefinition: ThemeDefinitionV2) => {
+    colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => import("./ThemeDefinitionV2").ColorSchema;
+    typography: (typographyType: TypographyTypes | TypographyType) => TypographyTypeDefinition;
+    color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
+    colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => ColorDefinition;
+    complementaryColorType: (colorType: ColorTypes | ColorType) => ColorTypes.base | ColorTypes.onBase | ColorTypes.container | ColorTypes.onContainer;
+    complementaryColor: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
+    complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => ColorDefinition;
+};

package/internal-do-not-import-from-here/shared/models/theming/UseThemeMethods.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeMethods = void 0;
+const ThemeDefinitionV2_1 = require("./ThemeDefinitionV2");
+const TypographyDefinition_1 = require("./TypographyDefinition");
+const useThemeMethods = (themedefinition) => {
+    const colorSchema = (colorSchemaType) => {
+        if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.primary) {
+            return themedefinition.primary;
+        }
+        else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.secondary) {
+            return themedefinition.secondary;
+        }
+        else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.accent1) {
+            return themedefinition.accent1;
+        }
+        else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.accent2) {
+            return themedefinition.accent2;
+        }
+        else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.accent3) {
+            return themedefinition.accent3;
+        }
+        else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.background) {
+            return themedefinition.background;
+        }
+        else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.neutral) {
+            return themedefinition.neutral;
+        }
+        else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.error) {
+            return themedefinition.error;
+        }
+        return themedefinition.background;
+    };
+    const typography = (typographyType) => {
+        if (typographyType === TypographyDefinition_1.TypographyTypes.h1) {
+            return themedefinition.typography.h1;
+        }
+        else if (typographyType === TypographyDefinition_1.TypographyTypes.h2) {
+            return themedefinition.typography.h2;
+        }
+        else if (typographyType === TypographyDefinition_1.TypographyTypes.h3) {
+            return themedefinition.typography.h3;
+        }
+        else if (typographyType === TypographyDefinition_1.TypographyTypes.caption) {
+            return themedefinition.typography.caption;
+        }
+        else if (typographyType === TypographyDefinition_1.TypographyTypes.link) {
+            return themedefinition.typography.link;
+        }
+        else if (typographyType === TypographyDefinition_1.TypographyTypes.text) {
+            return themedefinition.typography.text;
+        }
+        return themedefinition.typography.text;
+    };
+    const color = (colorSchemaType, colorType) => {
+        const mappedColorSchema = colorSchema(colorSchemaType);
+        if (colorType === ThemeDefinitionV2_1.ColorTypes.base) {
+            return mappedColorSchema.base.color;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.baseTone) {
+            return mappedColorSchema.base.colorToned;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.onBase) {
+            return mappedColorSchema.onBase.color;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.onBaseTone) {
+            return mappedColorSchema.onBase.colorToned;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.container) {
+            return mappedColorSchema.container.color;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.containerTone) {
+            return mappedColorSchema.container.colorToned;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.onContainer) {
+            return mappedColorSchema.onContainer.color;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.onContainerTone) {
+            return mappedColorSchema.onContainer.colorToned;
+        }
+        return colorType;
+    };
+    const colorDefinition = (colorSchemaType, colorType) => {
+        const mappedColorSchema = colorSchema(colorSchemaType);
+        if (colorType === ThemeDefinitionV2_1.ColorTypes.base
+            || colorType === ThemeDefinitionV2_1.ColorTypes.baseTone) {
+            return mappedColorSchema.base;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.onBase
+            ||
+                colorType === ThemeDefinitionV2_1.ColorTypes.onBaseTone) {
+            return mappedColorSchema.onBase;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.container
+            ||
+                colorType === ThemeDefinitionV2_1.ColorTypes.containerTone) {
+            return mappedColorSchema.container;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.onContainer
+            ||
+                colorType === ThemeDefinitionV2_1.ColorTypes.onContainerTone) {
+            return mappedColorSchema.onContainer;
+        }
+        return mappedColorSchema.base;
+    };
+    const complementaryColorType = (colorType) => {
+        if (colorType === ThemeDefinitionV2_1.ColorTypes.base
+            || colorType === ThemeDefinitionV2_1.ColorTypes.baseTone) {
+            return ThemeDefinitionV2_1.ColorTypes.onBase;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.onBase
+            || colorType === ThemeDefinitionV2_1.ColorTypes.onBaseTone) {
+            return ThemeDefinitionV2_1.ColorTypes.base;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.container
+            || colorType === ThemeDefinitionV2_1.ColorTypes.containerTone) {
+            return ThemeDefinitionV2_1.ColorTypes.onContainer;
+        }
+        else if (colorType === ThemeDefinitionV2_1.ColorTypes.onContainer
+            || colorType === ThemeDefinitionV2_1.ColorTypes.onContainerTone) {
+            return ThemeDefinitionV2_1.ColorTypes.container;
+        }
+        return colorType;
+    };
+    const complementaryColor = (colorSchemaType, colorType) => {
+        const matchingColorType = complementaryColorType(colorType);
+        return color(colorSchemaType, matchingColorType);
+    };
+    const complementaryColorDefinition = (colorSchemaType, colorType) => {
+        const matchingColorType = complementaryColorType(colorType);
+        return colorDefinition(colorSchemaType, matchingColorType);
+    };
+    return {
+        colorSchema,
+        typography,
+        color,
+        colorDefinition,
+        complementaryColorType,
+        complementaryColor,
+        complementaryColorDefinition,
+    };
+};
+exports.useThemeMethods = useThemeMethods;

package/internal-do-not-import-from-here/shared/models/theming/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./ThemeDefinitionV2";
 export * from "./TypographyDefinition";
 export * from "./OmniaThemes";
+export * from "./UseThemeMethods";

package/internal-do-not-import-from-here/shared/models/theming/index.js

@@ -4,3 +4,4 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ThemeDefinitionV2"), exports);
 tslib_1.__exportStar(require("./TypographyDefinition"), exports);
 tslib_1.__exportStar(require("./OmniaThemes"), exports);
+tslib_1.__exportStar(require("./UseThemeMethods"), exports);

package/internal-do-not-import-from-here/velcron/core/models/VelcronDefinitions.d.ts

@@ -2,7 +2,7 @@ import { VelcronComponentDescriptor } from "./VelcronDescriptors";
 import { VelcronEvent, VelcronOnChangedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnLoadEvent, VelcronOnPressEvent } from "./VelcronEvents";
 import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
 import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VerticalAlignments } from "./Enums";
-import { ColorSchema, useVelcronThemingStore } from "..";
+import { ColorSchema, ColorSchemaType, ColorSchemaTypes, useVelcronThemingStore } from "..";
 export interface ResolvedComponentRenderer {
     component: unknown;
     definition: VelcronDefinition;
@@ -41,7 +41,7 @@ export interface VelcronRenderContext {
     rootContext: VelcronState;
     currentContext: VelcronState;
     theming?: ReturnType<typeof useVelcronThemingStore>;
-    colorSchemaName?: string;
+    colorSchemaType?: ColorSchemaTypes | ColorSchemaType;
     colorSchema?: ColorSchema;
     actions?: {
         [name: string]: [];

package/oxide/Componentprops.d.ts

@@ -0,0 +1,18 @@
+import { ColorSchemaTypes, ColorTypes } from "@omnia/fx-models/internal-do-not-import-from-here/shared/models";
+import { PropType } from "vue";
+export declare const ThemeableComponentProps: {
+    colorSchemaType: {
+        type: PropType<ColorSchemaTypes>;
+        required: boolean;
+    };
+    colorType: {
+        type: PropType<ColorTypes>;
+        required: boolean;
+    };
+};
+export declare const ComponentStylingProps: {
+    class: {
+        type: PropType<String | String[]>;
+        required: boolean;
+    };
+};

package/oxide/Componentprops.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentStylingProps = exports.ThemeableComponentProps = void 0;
+function definePropObjectType() {
+    return Object;
+}
+exports.ThemeableComponentProps = {
+    colorSchemaType: {
+        type: definePropObjectType(),
+        required: false
+    },
+    colorType: {
+        type: definePropObjectType(),
+        required: false
+    },
+};
+exports.ComponentStylingProps = {
+    // style: {
+    //     type: String,
+    //     required: false
+    // },
+    class: {
+        type: definePropObjectType(),
+        required: false
+    },
+};

package/oxide/index.d.ts

@@ -0,0 +1 @@
+export * from "./Componentprops";

package/oxide/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Componentprops"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omnia/fx-models",
   "license": "MIT",
-  "version": "8.0.7-vnext",
+  "version": "8.0.9-vnext",
   "description": "Provide Omnia Fx Models Stuffs.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/sidepanel/Shared.d.ts

@@ -3,3 +3,8 @@ export declare enum SidePanelPosition {
     Left = 1
 }
 export declare const SmallScreenBreakpoint = 800;
+/**
+ * Assuming that we won't have this many instances at the same time
+ * No scientific reason for the number, it's just my personal preference
+ */
+export declare const InstanceIdLimit = 700;

package/sidepanel/Shared.js

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SmallScreenBreakpoint = exports.SidePanelPosition = void 0;
+exports.InstanceIdLimit = exports.SmallScreenBreakpoint = exports.SidePanelPosition = void 0;
 var SidePanelPosition;
 (function (SidePanelPosition) {
     SidePanelPosition[SidePanelPosition["Right"] = 0] = "Right";
     SidePanelPosition[SidePanelPosition["Left"] = 1] = "Left";
 })(SidePanelPosition = exports.SidePanelPosition || (exports.SidePanelPosition = {}));
 exports.SmallScreenBreakpoint = 800;
+/**
+ * Assuming that we won't have this many instances at the same time
+ * No scientific reason for the number, it's just my personal preference
+ */
+exports.InstanceIdLimit = 700;

package/ux/SidePanelApi.d.ts

@@ -1,7 +1,8 @@
 import { ApiPath } from "../Extends";
 import { SidePanelPosition } from "..";
 export interface ISidePanelElementRegistration {
-    registerElement: (element: HTMLElement, position?: SidePanelPosition) => void;
+    openPanel: (element: HTMLElement, position?: SidePanelPosition) => number;
+    closePanel: (instanceId: number) => void;
 }
 declare module "./UxApi" {
     interface IOmniaUxApi {