@talxis/base-controls 1.2406.2

package/src/hooks/useInputBasedComponent.ts

@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from "react";
+import { IComponent, IOutputs, ITranslations } from "../interfaces/context";
+import { useComponent } from "./useComponent";
+import React from 'react';
+import { IInputParameters } from "../interfaces/parameters";
+import { StringProps } from "../types";
+
+/**
+ * Description
+ * @param {any} value:any
+ * @returns {any}
+ */
+interface IComponentOptions<TTranslations> {
+    defaultTranslations?: TTranslations,
+    /**
+     * Formatting function that will format the bound value every time a new one comes from the props.
+     */
+    formatter?: (value: any) => any,
+    valueExtractor?: (value: any) => any
+}
+
+/**
+ * Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.
+ * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,
+ * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should
+ * be triggered when the user looses focus on the component (`onBlur` event).
+ * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. 
+ * Use this for displaying the up-to-date value to the user.
+ * Second prop contains the translations for this component.
+ * 
+ * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.
+ * 
+ * The last prop is a method that will notify the framework that you wish to write changes.  
+ * The method will notify the framework only if the provided output differs from the current inputs.
+ */
+
+export const useInputBasedComponent = <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations extends ITranslations>(name: string, props: IComponent<TParameters, TOutputs, TTranslations>, options?: IComponentOptions<TTranslations>): [
+    TValue,
+    Required<StringProps<TTranslations>>,
+    (value: TValue) => void,
+    (outputs: TOutputs) => void,
+] => {
+    const {formatter, valueExtractor} = {...options};
+    const rawValue = props.parameters.value.raw;
+    const [value, setValue] = useState<TValue>(formatter?.(rawValue) ?? rawValue);
+    const valueRef = useRef<TValue>(rawValue);
+    const [labels, onNotifyOutputChanged] = useComponent(name, props, options?.defaultTranslations);
+
+    useEffect(() => {
+        const formattedValue = formatter?.(rawValue);
+        setValue(formattedValue ?? rawValue);
+        //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);
+    }, [rawValue]);
+
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    
+    useEffect(() => {
+        return () => {
+            if(props.parameters.NotifyOutputChangedOnUnmount?.raw === true) {
+                onNotifyOutputChanged({
+                    value: valueExtractor?.(valueRef.current) ?? valueRef.current
+                } as any);
+            }
+        };
+    }, []);
+
+    return [value, labels, setValue, onNotifyOutputChanged];
+
+};

package/src/hooks/useMouseOver.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export const useMouseOver = (ref: React.RefObject<HTMLElement>): boolean => {
+    const [isMouseOver, setIsMouseOver] = useState<boolean>(false);
+
+    useEffect(() => {
+        const onMouseEnter = () => {
+            setIsMouseOver(true);
+        }
+        const onMouseLeave = () => {
+            setIsMouseOver(false);
+        }
+        ref.current?.addEventListener('mouseenter', onMouseEnter);
+        ref.current?.addEventListener('mouseleave', onMouseLeave);
+
+        return () => {
+            ref.current?.removeEventListener('mouseenter',onMouseEnter);
+            ref.current?.removeEventListener('mouseleave', onMouseLeave);
+        }
+    }, []);
+
+    return isMouseOver;
+};

package/src/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Sandbox } from './sandbox';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Sandbox />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+export * from './hooks';

package/src/interfaces/context.ts

@@ -0,0 +1,21 @@
+export interface IOutputs {
+    [key: string]: any
+}
+
+export interface IComponent<TParameters, TOutputs, TTranslations> {
+    context: ComponentFramework.Context<TParameters>;
+    parameters: TParameters;
+    translations?: TTranslations;
+    state?: ComponentFramework.Dictionary;
+    /**
+    * Fires when the component changes the parameter value. It is usually fired directly after the change occurs in the value.
+    * Exceptions are input based component where it fires on the blur event.
+    */
+    onNotifyOutputChanged?: (outputs: TOutputs) => void;
+}
+
+export interface ITranslations {
+    [key: string]: {
+        [LCID: number]: string | string[]
+    } | undefined
+}

package/src/interfaces/index.ts

@@ -0,0 +1,12 @@
+import { IProperty } from './property';
+
+export * from './context';
+export * from './property';
+
+export interface IOutputs {
+    [key: string]: any
+}
+
+export interface IParameters {
+    [key: string]: IProperty | undefined;
+}

package/src/interfaces/parameters.ts

@@ -0,0 +1,26 @@
+import { IProperty, ITwoOptionsProperty } from "./property";
+
+export interface IParameters {
+    [key: string]: IProperty | undefined;
+}
+
+export interface IInputParameters extends IBaseParameters {
+    value: IProperty;
+    /**
+    * Tells the component to trigger `notifyOutputChanged` on it's unmount changes occured in bound parameter value.
+    * Should only be use in edge cases in input based components where the notifyOutputChanged cannot be called naturally via the blur event.
+     */
+    NotifyOutputChangedOnUnmount?: Omit<ITwoOptionsProperty, 'attributes'>;
+    EnableCopyButton?: Omit<ITwoOptionsProperty, 'attributes'>;
+    EnableDeleteButton?: Omit<ITwoOptionsProperty, 'attributes'>;
+}
+
+export interface IBaseParameters extends IParameters {
+    /** default `true`    */
+    EnableBorder?: Omit<ITwoOptionsProperty, 'attributes'>;
+    /**
+    * Decides whether the input should get focus on first render.
+    */
+    AutoFocus?:  Omit<ITwoOptionsProperty, 'attributes'>;
+    ForceDisable?: Omit<ITwoOptionsProperty, 'attributes'>;
+}

package/src/interfaces/property.ts

@@ -0,0 +1,111 @@
+import { IEntityColumn, IEntityRecord } from "../components/Grid/interfaces";
+
+type ExcludedProps = Pick<ComponentFramework.PropertyTypes.Property, 'formatted'>;
+
+export interface IProperty extends Omit<Partial<ComponentFramework.PropertyTypes.Property>, keyof ExcludedProps | 'attributes'> {
+}
+
+export interface IStringProperty extends IProperty, Partial<ComponentFramework.PropertyTypes.StringProperty> {
+    raw: string | null;
+}
+
+export interface ITwoOptionsProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.TwoOptionsProperty>, 'attributes'> {
+    raw: boolean,
+    attributes: Omit<Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.OptionSetMetadata>, 'DefaultValue'> & {
+        Options: [ComponentFramework.PropertyHelper.OptionMetadata, ComponentFramework.PropertyHelper.OptionMetadata]
+    };
+}
+
+export interface IDecimalNumberProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.DecimalNumberProperty>, 'attributes'> {
+    raw: number | null;
+    type: 'Whole.None' | 'Decimal' | 'Currency',
+    formatted?: string;
+    attributes?: Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.DecimalNumberMetadata>
+}
+
+export interface IWholeNumberProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.WholeNumberProperty>, 'attributes'> {
+    raw: number | null;
+}
+
+//@ts-ignore - IMEMode is mandatory, but no longer supported in modern browsers - https://learn.microsoft.com/en-us/power-apps/maker/data-platform/create-edit-field-portal
+export interface IDateTimeProperty extends IProperty, Partial<ComponentFramework.PropertyTypes.DateTimeProperty> {
+    raw: Date | null,
+    attributes: Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.DateTimeMetadata> & {
+        Behavior: ComponentFramework.FormattingApi.Types.DateTimeFieldBehavior
+        Format: string;
+    };
+}
+
+export interface IOptionSetProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.OptionSetProperty>, 'attributes'> {
+    raw: number | null,
+    attributes: Omit<Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.OptionSetMetadata>, 'DefaultValue'> & {
+        Options: ComponentFramework.PropertyHelper.OptionMetadata[]
+    };
+}
+
+export interface ITwoOptionsProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.TwoOptionsProperty>, 'attributes'> {
+    raw: boolean,
+    attributes: Omit<Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.OptionSetMetadata>, 'DefaultValue'> & {
+        Options: [ComponentFramework.PropertyHelper.OptionMetadata, ComponentFramework.PropertyHelper.OptionMetadata]
+    };
+}
+
+export interface IMultiSelectOptionSetProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.MultiSelectOptionSetProperty>, 'attributes'> {
+    raw: number[] | null,
+    attributes: Omit<Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.OptionSetMetadata>, 'DefaultValue'> & {
+        Options: ComponentFramework.PropertyHelper.OptionMetadata[]
+    };
+}
+
+export interface ILookupProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.LookupProperty>, 'attributes' | 'getViewId'> {
+    raw: ComponentFramework.LookupValue[];
+    attributes: Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.LookupMetadata> & {
+        Targets: string[]
+    };
+    /**
+     * Returns the default lookup viewId. Works only for Microsoft PCF's
+     */
+    getDefaultViewId: (entityName: string) => string,
+    /**
+     * Gets all views for entity (including non-lookup ones).
+     */
+    getAllViews: (entityName: string) => Promise<{
+        isAvailableInOffline: boolean;
+        isDefault: boolean;
+        isPinned: boolean;
+        isUserView: boolean;
+        relatedEntityName: string;
+        viewId: string;
+        viewName: string;
+        fetchXml?: string;
+    }[]>
+}
+
+export interface IDatasetProperty extends IProperty, Omit<ComponentFramework.PropertyTypes.DataSet, 'error' | 'errorMessage'> {
+    columns: IEntityColumn[],
+    records: {
+        [id: string]: IEntityRecord;
+    }
+    paging: ComponentFramework.PropertyHelper.DataSetApi.Paging & {
+        pageNumber: number
+    }
+    retrieveRecordCommand: (recordIds: string[], specificCommands?: string[], filterByPriority?: boolean, useNestedFormat?: boolean, refreshAllRules?: boolean) => {
+        canExecute: boolean;
+        /**
+        * Seems to be always empty - buttons present in Flyout and SplitButton are put on first level (the array of buttons is flattened).
+        */
+        children: any[];
+        commandId: string;
+        commandButtonId: string;
+        controlType: any;
+        icon: string;
+        label: string;
+        shouldBeVisible: boolean;
+        tooltip: string;
+        /**
+        * Temp portal property
+        */
+        __isInline?: boolean;
+        execute: () => Promise<void>;
+    }[]
+}

package/src/sandbox/index.tsx

@@ -0,0 +1,137 @@
+import { initializeIcons, Label, TagPicker } from "@fluentui/react";
+import React, { useState } from "react";
+import { Context } from "./mock/Context";
+import { Decimal } from "../components/Decimal/Decimal";
+import { OptionSet } from "../components/OptionSet";
+import { IDecimalNumberProperty, IMultiSelectOptionSetProperty, IOptionSetProperty, ITwoOptionsProperty, IWholeNumberProperty } from "../interfaces";
+import { options } from './shared/optionList';
+import { multiSelectOptions } from './shared/multiSelectOptionList';
+import { MultiSelectOptionSet } from "../components/MultiSelectOptionSet";
+import { TwoOptions } from "../components/TwoOptions";
+import { Duration } from "../components/Duration";
+initializeIcons();
+
+export const Sandbox: React.FC = () => {
+  //const [value, setValue] = useState<string | Date | undefined>("shit");
+  const [value, setValue] = useState<string | Date | undefined>(new Date('2016-08-04T17:14:00Z'));
+  const [decimalValue, setDecimalValue] = useState<number>();
+  const [selectedValue, setSelectedValue] = useState<number | null>();
+  const [selectedKeys, setSelectedKeys] = useState<number[] | undefined>();
+  const [twoOptionValue, setTwoOptionValue] = useState<number | undefined>();
+  const [duration, setDuration] = useState<number | undefined>();
+  const [isMounted, setIsMounted] = useState<boolean>(true);
+  const [test, setTest] = useState("");
+  const context = new Context();
+
+  return (
+    <>
+      <Label>Outside change</Label>
+      {/*       <TalxisTextField value={value} onChange={(e, value) => setValue(value)} /> */}
+      <Decimal
+        context={context}
+        parameters={{
+          EnableBorder: { raw: true },
+          EnableCopyButton: { raw: false },
+          value: {
+            attributes: {
+              Precision: 2
+            },
+            raw: decimalValue ?? null
+          } as IDecimalNumberProperty,
+        }}
+        onNotifyOutputChanged={(outputs) => {
+          setDecimalValue(outputs.value);
+        }}
+      />
+      <Label>Component</Label>
+      <OptionSet
+        context={context}
+        parameters={{
+          EnableCopyButton: {
+            raw: true
+          },
+          EnableDeleteButton: {
+            raw: true
+          },
+          AutoFocus: {
+            raw: true
+          },
+          value: {
+            raw: selectedValue ?? null,
+            attributes: {
+              DefaultValue: -1,
+              Options: options
+            }
+          } as IOptionSetProperty
+        }}
+        onNotifyOutputChanged={(outputs) => {
+          setSelectedValue(outputs.value);
+        }} />
+
+      <Label>Component</Label>
+      <MultiSelectOptionSet
+        context={context}
+        parameters={{
+          value: {
+            raw: selectedKeys,
+            attributes: {
+              DefaultValue: -1,
+              Options: multiSelectOptions
+            }
+          } as IMultiSelectOptionSetProperty
+        }}
+        onNotifyOutputChanged={(outputs) => {
+          setSelectedKeys(outputs.value);
+        }}
+      />
+
+      <Label>Component</Label>
+      <TwoOptions
+        context={context}
+        parameters={{
+          value: {
+            raw: Boolean(twoOptionValue),
+            attributes: {
+              Options: [
+                {
+                  Label: 'No',
+                  Value: 0,
+                  Color: ''
+                },
+                {
+                  Label: 'Yes',
+                  Value: 1,
+                  Color: ''
+                }
+              ],
+              DisplayName: 'YesNoColumn'
+            }
+          } as ITwoOptionsProperty
+        }}
+        onNotifyOutputChanged={(outputs) => {
+          //setTwoOptionValue(outputs.value);
+        }}
+      />
+      <Label>Component</Label>
+      <Duration
+        context={context}
+        parameters={{
+          EnableCopyButton: {
+            raw: true
+          },
+          EnableDeleteButton: {
+            raw: true
+          },
+          AutoFocus: {
+            raw: false
+          },
+          value: {
+            raw: duration ?? null,
+          } as IWholeNumberProperty
+        }}
+        onNotifyOutputChanged={(outputs) => {
+          setDuration(outputs.value);
+        }} />
+    </>
+  );
+};

package/src/sandbox/mock/Context.ts

@@ -0,0 +1,18 @@
+import { Formatting } from "./Formatting";
+import { Mode } from "./Mode";
+import { UserSettings } from "./UserSettings";
+import { Utility } from "./Utility";
+
+export class Context implements Context {
+    mode: ComponentFramework.Mode;
+    userSettings: ComponentFramework.UserSettings;
+    formatting: ComponentFramework.Formatting;
+    utils: ComponentFramework.Utility;
+    
+    constructor() {
+        this.mode = new Mode();
+        this.userSettings = new UserSettings();
+        this.formatting = new Formatting();
+        this.utils = new Utility();
+    }
+}

package/src/sandbox/mock/Formatting.ts

@@ -0,0 +1,186 @@
+import dayjs from "dayjs";
+
+export class Formatting implements ComponentFramework.Formatting {
+
+    formatCurrency(value: number, precision: number = 2, symbol: string = '$'): string {
+        return symbol + value.toFixed(precision);
+    }
+
+    formatDecimal(value: number, precision: number = 2): string {
+        return value.toFixed(precision);
+    }
+
+    formatDateAsFilterStringInUTC(value: Date, includeTime: boolean = false): string {
+        const year = value.getUTCFullYear();
+        const month = (value.getUTCMonth() + 1).toString().padStart(2, '0');
+        const day = value.getUTCDate().toString().padStart(2, '0');
+        let formattedDate = `${year}-${month}-${day}`;
+        if (includeTime) {
+            const hours = value.getUTCHours().toString().padStart(2, '0');
+            const minutes = value.getUTCMinutes().toString().padStart(2, '0');
+            const seconds = value.getUTCSeconds().toString().padStart(2, '0');
+            formattedDate += ` ${hours}:${minutes}:${seconds}`;
+        }
+        return formattedDate;
+    }
+
+    formatDateLong(value: Date): string {
+        return value.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+    }
+
+    formatDateLongAbbreviated(value: Date): string {
+        return value.toLocaleDateString('en-US', { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' });
+    }
+
+    formatDateShort(value: Date, includeTime: boolean = false): string {
+        let options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
+        if (includeTime) {
+            options = { ...options, hour: 'numeric', minute: 'numeric' };
+        }
+        return value.toLocaleDateString('en-US', options);
+    }
+
+    formatDateYearMonth(value: Date): string {
+        return value.toLocaleDateString('en-US', { year: 'numeric', month: 'long' });
+    }
+
+    formatInteger(value: number): string {
+        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    formatLanguage(value: number): string {
+        // Assuming value corresponds to a language code and returns language name
+        return 'Language'; // Placeholder, replace with actual implementation
+    }
+
+    formatTime(value: Date, behavior: ComponentFramework.FormattingApi.Types.DateTimeFieldBehavior): string {
+        return dayjs(value).format('DD.MM.YYYY HH:mm')
+        // Implementation depends on behavior, e.g., 12-hour clock, 24-hour clock, etc.
+        return value.toLocaleTimeString('en-US');
+    }
+
+    getWeekOfYear(value: Date): number {
+        const startOfYear = new Date(value.getFullYear(), 0, 0);
+        const diff = value.getTime() - startOfYear.getTime();
+        const oneWeek = 1000 * 60 * 60 * 24 * 7;
+        return Math.floor(diff / oneWeek);
+    }
+
+}
+
+export class NumberFormattingInfo implements ComponentFramework.UserSettingApi.NumberFormattingInfo {
+    currencyDecimalDigits: number;
+    currencyDecimalSeparator: string;
+    currencyGroupSeparator: string;
+    currencyGroupSizes: number[];
+    currencyNegativePattern: number;
+    currencyPositivePattern: number;
+    currencySymbol: string;
+    nanSymbol: string;
+    nativeDigits: string[];
+    negativeInfinitySymbol: string;
+    negativeSign: string;
+    numberDecimalDigits: number;
+    numberDecimalSeparator: string;
+    numberGroupSeparator: string;
+    numberGroupSizes: number[];
+    numberNegativePattern: number;
+    perMilleSymbol: string;
+    percentDecimalDigits: number;
+    percentDecimalSeparator: string;
+    percentGroupSeparator: string;
+    percentGroupSizes: number[];
+    percentNegativePattern: number;
+    percentPositivePattern: number;
+    percentSymbol: string;
+    positiveInfinitySymbol: string;
+    positiveSign: string;
+
+    constructor() {
+        this.currencyDecimalDigits = 2;
+        this.currencyDecimalSeparator = '.';
+        this.currencyGroupSeparator = ',';
+        this.currencyGroupSizes = [3];
+        this.currencyNegativePattern = 1;
+        this.currencyPositivePattern = 0;
+        this.currencySymbol = '$';
+        this.nanSymbol = 'NaN';
+        this.nativeDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        this.negativeInfinitySymbol = '-Infinity';
+        this.negativeSign = '-';
+        this.numberDecimalDigits = 2;
+        this.numberDecimalSeparator = ',';
+        this.numberGroupSeparator = ' ';
+        this.numberGroupSizes = [3];
+        this.numberNegativePattern = 1;
+        this.perMilleSymbol = '%';
+        this.percentDecimalDigits = 2;
+        this.percentDecimalSeparator = '.';
+        this.percentGroupSeparator = ',';
+        this.percentGroupSizes = [3];
+        this.percentNegativePattern = 1;
+        this.percentPositivePattern = 1;
+        this.percentSymbol = '%';
+        this.positiveInfinitySymbol = 'Infinity';
+        this.positiveSign = '+';
+    }
+}
+
+export class DateFormattingInfo implements ComponentFramework.UserSettingApi.DateFormattingInfo {
+    amDesignator: string;
+    abbreviatedDayNames: string[];
+    abbreviatedMonthGenitiveNames: string[];
+    abbreviatedMonthNames: string[];
+    calendarWeekRule: number;
+    calendar: ComponentFramework.UserSettingApi.Calendar;
+    dateSeparator: string;
+    dayNames: string[];
+    firstDayOfWeek: ComponentFramework.UserSettingApi.Types.DayOfWeek;
+    fullDateTimePattern: string;
+    longDatePattern: string;
+    longTimePattern: string;
+    monthDayPattern: string;
+    monthGenitiveNames: string[];
+    monthNames: string[];
+    pmDesignator: string;
+    shortDatePattern: string;
+    shortTimePattern: string;
+    shortestDayNames: string[];
+    sortableDateTimePattern: string;
+    timeSeparator: string;
+    universalSortableDateTimePattern: string;
+    yearMonthPattern: string;
+
+    constructor() {
+        this.amDesignator = 'AM';
+        this.abbreviatedDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        this.abbreviatedMonthGenitiveNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        this.abbreviatedMonthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        this.calendarWeekRule = 0;
+        this.calendar = {
+            minSupportedDateTime: new Date(-62135568000000),
+            maxSupportedDateTime: new Date(253402300799999),
+            algorithmType: 1,
+            calendarType: 1,
+            twoDigitYearMax: 2029
+        }
+        this.dateSeparator = '.';
+        this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+        this.firstDayOfWeek = 0;
+        this.fullDateTimePattern = 'dddd, MMMM d, yyyy h:mm:ss tt';
+        this.longDatePattern = 'dddd, MMMM d, yyyy';
+        this.longTimePattern = 'h:mm:ss tt';
+        this.monthDayPattern = 'MMMM d';
+        this.monthGenitiveNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        this.pmDesignator = 'PM';
+        this.shortDatePattern = 'dd/MM/yyyy';
+        this.shortTimePattern = 'h:mm';
+        this.shortestDayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+        this.sortableDateTimePattern = 'yyyy-MM-ddTHH:mm:ss';
+        this.timeSeparator = ':';
+        this.universalSortableDateTimePattern = 'yyyy-MM-dd HH:mm:ssZ';
+        this.yearMonthPattern = 'MMMM yyyy';
+    }
+}
+

package/src/sandbox/mock/Mode.ts

@@ -0,0 +1,25 @@
+export class Mode implements ComponentFramework.Mode {
+    allocatedHeight: number;
+    allocatedWidth: number;
+    isControlDisabled: boolean;
+    isVisible: boolean;
+    label: string;
+
+    constructor() {
+        this.allocatedHeight = 42;
+        this.allocatedWidth = 260;
+        this.isControlDisabled = false;
+        this.isVisible = true;
+        this.label = 'Label'
+    }
+    setControlState(state: ComponentFramework.Dictionary): boolean {
+        throw new Error("Method not implemented.");
+    }
+    setFullScreen(value: boolean): void {
+        throw new Error("Method not implemented.");
+    }
+    trackContainerResize(value: boolean): void {
+        throw new Error("Method not implemented.");
+    }
+    
+}

package/src/sandbox/mock/UserSettings.ts

@@ -0,0 +1,31 @@
+import { DateFormattingInfo, NumberFormattingInfo } from "./Formatting";
+
+export class UserSettings implements ComponentFramework.UserSettings {
+    dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo;
+    isRTL: boolean;
+    languageId: number;
+    locale: string;
+    numberFormattingInfo: ComponentFramework.UserSettingApi.NumberFormattingInfo;
+    securityRoles: string[];
+    userId: string;
+    userName: string;
+
+    constructor() {
+        this.userName = 'Test User';
+        this.userId = '00000000-0000-0000-0000-000000000000';
+        this.securityRoles = [];
+        this.languageId = 1033;
+        this.isRTL = false;
+        this.locale = 'en-US'
+        this.numberFormattingInfo = new NumberFormattingInfo();
+        this.dateFormattingInfo = new DateFormattingInfo();
+    }
+
+    getTimeZoneOffsetMinutes(date?: Date | undefined): number {
+        // Sample implementation to get timezone offset in minutes
+        if (!date) {
+            date = new Date(); // If no date is provided, use the current date
+        }
+        return date.getTimezoneOffset(); // Return timezone offset in minutes
+    }
+}