@talxis/base-controls 1.2406.2

package/dist/components/Lookup/styles.d.ts

@@ -0,0 +1,90 @@
+import { ITheme } from "@fluentui/react";
+export declare const getTargetSelectorStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    targetSelector: {
+        display: string;
+        paddingLeft: number;
+        paddingRight: number;
+        paddingBottom: number;
+        gap: number;
+        paddingTop: number;
+        '>span': {
+            lineHeight: number;
+            minWidth: string;
+            color: string;
+            fontWeight: number;
+        };
+    };
+    targetSelectorLinks: {
+        display: string;
+        gap: number;
+        flexWrap: string;
+    };
+    targetSelectorLink: {
+        color: string;
+        '&[data-selected="true"]': {
+            color: string;
+            fontWeight: number;
+        };
+    };
+}>;
+export declare const getLookupStyles: (theme: ITheme, height: number, isSingleSelect: boolean) => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        '[class*="TALXIS__tag-picker__search-btn"][class*="TALXIS__tag-picker__search-btn"]': {
+            top: number;
+            bottom: number;
+            margin: string;
+            right: number;
+        };
+        '[data-navigation-enabled="true"]': {
+            '> span > div > span': {
+                color: string;
+                cursor: string;
+            };
+            ':hover': {
+                textDecoration: string;
+                cursor: string;
+            };
+        };
+        '.ms-BasePicker-itemsWrapper .ms-CommandBar': {
+            height: number | undefined;
+        };
+        '.ms-BasePicker-text': {
+            minHeight: number;
+            height: string;
+            paddingRight: number | undefined;
+            alignItems: string;
+            input: {
+                alignSelf: string;
+            };
+            '.hover-only': {
+                animationName: string;
+            };
+            '::after': {
+                inset: string;
+            };
+        };
+    };
+    suggestions: {
+        '.ms-Suggestions-title': {
+            padding: number;
+            display: string;
+            flexDirection: string;
+        };
+    };
+    createRecordBtn: {
+        height: number;
+        width: string;
+        '.ms-Button-menuIcon': {
+            display: string;
+        };
+        '>.ms-Button-flexContainer.ms-Button-flexContainer': {
+            justifyContent: string;
+        };
+        '.ms-Button-textContainer': {
+            flexGrow: string;
+            '>span': {
+                fontWeight: number;
+            };
+        };
+    };
+}>;

package/dist/components/Lookup/translations.d.ts

@@ -0,0 +1,2 @@
+import { ILookupTranslations } from "./interfaces";
+export declare const lookupTranslations: ILookupTranslations;

package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IMultiSelectOptionSet } from './interfaces';
+export declare const MultiSelectOptionSet: (props: IMultiSelectOptionSet) => JSX.Element;

package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useComponent as o}from"../../hooks/useComponent.js";import{ComboBox as t}from"@talxis/react-components/dist/components/ComboBox";import{useRef as r,useEffect as l}from"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";const i=i=>{var a,n;const[s,d]=o("MultiSelectOptionSet",i),u=i.parameters,m=u.value,c=r(null),{Options:p}=u.value.attributes,v=i.context,g=p.map((e=>({key:e.Value.toString(),text:e.Label}))),f=e=>{if(!e)return void d({value:void 0});const o=e.key.toString(),t=new Set(m.raw||[]);e.selected?t.add(+o):t.delete(+o);const r=Array.from(t);d({value:r.map((e=>+e))})};return l((()=>{var e,o;(null===(e=u.AutoFocus)||void 0===e?void 0:e.raw)&&(null===(o=c.current)||void 0===o||o.focus(!0))}),[]),e(t,{componentRef:c,borderless:!1===(null===(a=u.EnableBorder)||void 0===a?void 0:a.raw),options:g,allowFreeInput:!0,multiSelect:!0,autoComplete:"on",autofill:!0===(null===(n=u.AutoFocus)||void 0===n?void 0:n.raw)?{autoFocus:!0}:void 0,readOnly:v.mode.isControlDisabled,errorMessage:m.errorMessage,selectedKey:m.raw?m.raw.map((e=>e.toString())):[-1],useComboBoxAsMenuWidth:!0,styles:{root:{height:v.mode.allocatedHeight||void 0,width:v.mode.allocatedWidth||void 0,display:"flex",alignItems:"center"},callout:{maxHeight:"300px !important"}},deleteButtonProps:{key:"delete",showOnlyOnHover:!1,iconProps:{iconName:"Delete"},onClick:(e,o)=>{f(null)}},onChange:(e,o)=>f(o)})};export{i as MultiSelectOptionSet};

package/dist/components/MultiSelectOptionSet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MultiSelectOptionSet';
+export * from './interfaces';

package/dist/components/MultiSelectOptionSet/interfaces.d.ts

@@ -0,0 +1,11 @@
+import { IMultiSelectOptionSetProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+export interface IMultiSelectOptionSet extends IComponent<IMultiSelectOptionSetParameters, IMultiSelectOptionSetOutputs, ITranslations> {
+}
+export interface IMultiSelectOptionSetParameters extends IBaseParameters {
+    value: IMultiSelectOptionSetProperty;
+}
+export interface IMultiSelectOptionSetOutputs extends IOutputs {
+    value?: number[];
+}

package/dist/components/OptionSet/OptionSet.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IOptionSet } from './interfaces';
+export declare const OptionSet: (props: IOptionSet) => JSX.Element;

package/dist/components/OptionSet/OptionSet.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useComponent as o}from"../../hooks/useComponent.js";import{ComboBox as t}from"@talxis/react-components/dist/components/ComboBox";import{useRef as r,useEffect as i}from"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";const l=l=>{var n,a,s;const[d,m]=o("OptionSet",l),p=r(null),u=l.parameters,c=u.value,{Options:v}=u.value.attributes,h=l.context,g=v.map((e=>({key:e.Value.toString(),text:e.Label}))),x=e=>{let o;e&&(o=parseInt(e.key)),m({value:o})};return i((()=>{var e,o;(null===(e=u.AutoFocus)||void 0===e?void 0:e.raw)&&(null===(o=p.current)||void 0===o||o.focus(!0))}),[]),e(t,{componentRef:p,borderless:!1===(null===(n=u.EnableBorder)||void 0===n?void 0:n.raw),options:g,readOnly:h.mode.isControlDisabled,selectedKey:null!==(s=null===(a=c.raw)||void 0===a?void 0:a.toString())&&void 0!==s?s:-1,dropdownWidth:h.mode.allocatedWidth||void 0,errorMessage:c.errorMessage,useComboBoxAsMenuWidth:!0,styles:{root:{height:h.mode.allocatedHeight||void 0,width:h.mode.allocatedWidth||void 0,display:"flex",alignItems:"center"},callout:{maxHeight:"300px !important"}},deleteButtonProps:{key:"delete",showOnlyOnHover:!0,iconProps:{iconName:"Delete"},onClick:(e,o)=>{x(null)}},onChange:(e,o)=>x(o)})};export{l as OptionSet};

package/dist/components/OptionSet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OptionSet';
+export * from './interfaces';

package/dist/components/OptionSet/interfaces.d.ts

@@ -0,0 +1,13 @@
+import { IOptionSetProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+export interface IOptionSet extends IComponent<IOptionSetParameters, IOptionSetOutputs, IOptionSetTranslations> {
+}
+export interface IOptionSetParameters extends IBaseParameters {
+    value: IOptionSetProperty;
+}
+export interface IOptionSetOutputs extends IOutputs {
+    value?: number;
+}
+export interface IOptionSetTranslations extends ITranslations {
+}

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ITextField } from './interfaces';
+export declare const TextField: (props: ITextField) => JSX.Element;

package/dist/components/TextField/TextField.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{TextField as o}from"@talxis/react-components/dist/components/TextField";import{useRef as t,useState as r,useEffect as i}from"react";import{useInputBasedComponent as n}from"../../hooks/useInputBasedComponent.js";import"../../hooks/useComponent.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";const l=l=>{var s,a,d,u,v,c;const m=l.context,p=l.parameters,h=p.value,y=t(null),[w,x,b,g]=n("TextField",l),[f]=((e,o)=>{const n=t(!1),[l,s]=r(e.context.mode.allocatedHeight?e.context.mode.allocatedHeight:(null===(a=e.parameters.IsMultiLine)||void 0===a?void 0:a.raw)?80:void 0);var a;const d=t(!0);return i((()=>{var t,r;if(!(null===(t=e.parameters.IsMultiLine)||void 0===t?void 0:t.raw))return;const i=new ResizeObserver((()=>{d.current||n.current?d.current=!1:(n.current=!0,s(void 0))})),a=null===(r=o.current)||void 0===r?void 0:r.querySelector("textarea");return l&&a.setAttribute("style",`height: ${l}px`),i.observe(a),()=>{i.disconnect()}}),[]),[l]})(l,y);return e(o,{readOnly:m.mode.isControlDisabled,multiline:null===(s=p.IsMultiLine)||void 0===s?void 0:s.raw,resizable:null===(a=p.isResizable)||void 0===a?void 0:a.raw,autoFocus:null===(d=p.AutoFocus)||void 0===d?void 0:d.raw,elementRef:y,styles:{fieldGroup:{height:f,width:m.mode.allocatedWidth||void 0}},borderless:!1===(null===(u=p.EnableBorder)||void 0===u?void 0:u.raw),errorMessage:h.errorMessage,deleteButtonProps:!0===(null===(v=p.EnableDeleteButton)||void 0===v?void 0:v.raw)?{key:"delete",showOnlyOnHover:!0,iconProps:{iconName:"Delete"},onClick:()=>b(void 0)}:void 0,clickToCopyProps:!0===(null===(c=p.EnableCopyButton)||void 0===c?void 0:c.raw)?{key:"copy",showOnlyOnHover:!0,iconProps:{iconName:"Copy"}}:void 0,value:null!=w?w:"",onBlur:()=>{g({value:null!=w?w:void 0})},onChange:(e,o)=>{b(o)}})};export{l as TextField};

package/dist/components/TextField/hooks/useTextField.d.ts

@@ -0,0 +1,2 @@
+import { ITextField } from "../interfaces";
+export declare const useTextField: (props: ITextField, ref: React.RefObject<HTMLDivElement>) => [number | undefined];

package/dist/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextField';
+export * from './interfaces';

package/dist/components/TextField/interfaces.d.ts

@@ -0,0 +1,15 @@
+import { IStringProperty, ITwoOptionsProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IInputParameters } from "../../interfaces/parameters";
+export interface ITextField extends IComponent<ITextFieldParameters, ITextFieldOutputs, ITextFieldTranslations> {
+}
+export interface ITextFieldParameters extends IInputParameters {
+    IsMultiLine?: ITwoOptionsProperty;
+    isResizable?: ITwoOptionsProperty;
+    value: IStringProperty;
+}
+export interface ITextFieldOutputs extends IOutputs {
+    value?: string;
+}
+export interface ITextFieldTranslations extends ITranslations {
+}

package/dist/components/TwoOptions/TwoOptions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ITwoOptions } from './interfaces';
+export declare const TwoOptions: (props: ITwoOptions) => JSX.Element;

package/dist/components/TwoOptions/TwoOptions.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{Toggle as o}from"@fluentui/react";import{useComponent as t}from"../../hooks/useComponent.js";import{useRef as i,useEffect as r}from"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";const n=n=>{var a,l;const u=n.parameters,d=u.value,m=d.attributes.Options,[s,c]=t("TwoOptions",n),p=n.context,f=i(null);r((()=>{var e;!0===(null===(e=u.AutoFocus)||void 0===e?void 0:e.raw)&&f.current.focus()}),[]);return e(o,{styles:{root:{height:p.mode.allocatedHeight||void 0,width:p.mode.allocatedWidth||void 0},container:{alignItems:"center"}},checked:d.raw,componentRef:f,inlineLabel:!0,onText:(null===(a=m.find((e=>1===e.Value)))||void 0===a?void 0:a.Label)||"Yes",offText:(null===(l=m.find((e=>0===e.Value)))||void 0===l?void 0:l.Label)||"No",onChange:(e,o)=>(e=>{c({value:e})})(o)})};export{n as TwoOptions};

package/dist/components/TwoOptions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TwoOptions';
+export * from './interfaces';

package/dist/components/TwoOptions/interfaces.d.ts

@@ -0,0 +1,13 @@
+import { ITwoOptionsProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+export interface ITwoOptions extends IComponent<ITwoOptionsParameters, ITwoOptionsOutputs, ITwoOptionsTranslations> {
+}
+export interface ITwoOptionsParameters extends IBaseParameters {
+    value: ITwoOptionsProperty;
+}
+export interface ITwoOptionsOutputs extends IOutputs {
+    value?: boolean;
+}
+export interface ITwoOptionsTranslations extends ITranslations {
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useComponent';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export{useComponent}from"./useComponent.js";import"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";

package/dist/hooks/useComponent.d.ts

@@ -0,0 +1,7 @@
+import { IComponent, IOutputs, IParameters, ITranslations } from "../interfaces";
+import { StringProps } from "../types";
+/**
+ * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
+ * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.
+ */
+export declare const useComponent: <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations extends ITranslations>(name: string, props: IComponent<TParameters, TOutputs, TTranslations>, defaultTranslations?: TTranslations | undefined) => [Required<StringProps<TTranslations>>, (outputs: TOutputs) => void];

package/dist/hooks/useComponent.js

@@ -0,0 +1 @@
+import{useRef as e,useMemo as n,useEffect as r}from"react";import t from"fast-deep-equal/es6";import{merge as o}from"merge-anything";import{Liquid as a}from"liquidjs";const l=(l,s,i)=>{const f=e(s.parameters),c=n((()=>new a),[]),u=n((()=>{var e;const n=o(null!=i?i:{},null!==(e=s.translations)&&void 0!==e?e:{});return new Proxy(n,{get:(e,r)=>e=>d(r,n,e)})}),[]);r((()=>{f.current=s.parameters}),[s.parameters]);const d=(e,n,r)=>{const t=e=>"string"==typeof e?e:JSON.stringify(e),o=n[e];if(!o)return console.error(`Translation for the ${e} label of the ${l} component has not been defined!`),e;if("string"==typeof o||Array.isArray(o))return t(o);let a=o[s.context.userSettings.languageId];return a||(console.info(`Translation for the ${e} label of the ${l} component has not been found. Using default Czech label instead.`),a=o[1029]),a||(console.error(`Translation for the ${e} label of the ${l} component does not exists neither for Czech language and current LCID.`),a=e),c.parseAndRenderSync(t(a),r)};return[u,e=>{var n,r;let o=!1;for(let[r,a]of Object.entries(e)){const e=null===(n=f.current[r])||void 0===n?void 0:n.raw;if(!t(e,a)){if(""===a&&(a=null),e==a)continue;o=!0;break}}o&&(null===(r=s.onNotifyOutputChanged)||void 0===r||r.call(s,e))}]};export{l as useComponent};

package/dist/hooks/useFocusIn.d.ts

@@ -0,0 +1 @@
+export declare const useFocusIn: (ref: React.RefObject<HTMLElement>) => boolean;

package/dist/hooks/useFocusIn.js

@@ -0,0 +1 @@
+import{useState as e,useEffect as r}from"react";const n=n=>{const[t,o]=e(!1);return r((()=>{var e,r;const t=()=>{o(!0)},u=()=>{o(!1)};return null===(e=n.current)||void 0===e||e.addEventListener("focusin",t),null===(r=n.current)||void 0===r||r.addEventListener("focusout",u),()=>{var e,r;null===(e=n.current)||void 0===e||e.removeEventListener("focusin",t),null===(r=n.current)||void 0===r||r.removeEventListener("focusout",u)}}),[]),t};export{n as useFocusIn};

package/dist/hooks/useInputBasedComponent.d.ts

@@ -0,0 +1,32 @@
+import { IComponent, IOutputs, ITranslations } from "../interfaces/context";
+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 declare const useInputBasedComponent: <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations extends ITranslations>(name: string, props: IComponent<TParameters, TOutputs, TTranslations>, options?: IComponentOptions<TTranslations> | undefined) => [TValue, Required<StringProps<TTranslations>>, (value: TValue) => void, (outputs: TOutputs) => void];
+export {};

package/dist/hooks/useInputBasedComponent.js

@@ -0,0 +1 @@
+import{useState as r,useRef as t,useEffect as n}from"react";import{useComponent as o}from"./useComponent.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";const e=(e,l,a)=>{var u;const{formatter:i,valueExtractor:s}=Object.assign({},a),m=l.parameters.value.raw,[v,d]=r(null!==(u=null==i?void 0:i(m))&&void 0!==u?u:m),p=t(m),[c,f]=o(e,l,null==a?void 0:a.defaultTranslations);return n((()=>{const r=null==i?void 0:i(m);d(null!=r?r:m)}),[m]),n((()=>{p.current=v}),[v]),n((()=>()=>{var r,t;!0===(null===(r=l.parameters.NotifyOutputChangedOnUnmount)||void 0===r?void 0:r.raw)&&f({value:null!==(t=null==s?void 0:s(p.current))&&void 0!==t?t:p.current})}),[]),[v,c,d,f]};export{e as useInputBasedComponent};

package/dist/hooks/useMouseOver.d.ts

@@ -0,0 +1 @@
+export declare const useMouseOver: (ref: React.RefObject<HTMLElement>) => boolean;

package/dist/hooks/useMouseOver.js

@@ -0,0 +1 @@
+import{useState as e,useEffect as r}from"react";const n=n=>{const[t,o]=e(!1);return r((()=>{var e,r;const t=()=>{o(!0)},u=()=>{o(!1)};return null===(e=n.current)||void 0===e||e.addEventListener("mouseenter",t),null===(r=n.current)||void 0===r||r.addEventListener("mouseleave",u),()=>{var e,r;null===(e=n.current)||void 0===e||e.removeEventListener("mouseenter",t),null===(r=n.current)||void 0===r||r.removeEventListener("mouseleave",u)}}),[]),t};export{n as useMouseOver};

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="@types/powerapps-component-framework" />
+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;
+}
+interface ITranslations {
+    [key: string]: {
+        [LCID: number]: string | string[];
+    } | undefined;
+}
+
+type ExcludedProps = Pick<ComponentFramework.PropertyTypes.Property, 'formatted'>;
+interface IProperty extends Omit<Partial<ComponentFramework.PropertyTypes.Property>, keyof ExcludedProps | 'attributes'> {
+}
+
+interface IOutputs {
+    [key: string]: any;
+}
+interface IParameters {
+    [key: string]: IProperty | undefined;
+}
+
+type StringProps<T> = {
+    [Property in keyof T]: (variables?: any) => string;
+};
+
+/**
+ * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
+ * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.
+ */
+declare const useComponent: <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations extends ITranslations>(name: string, props: IComponent<TParameters, TOutputs, TTranslations>, defaultTranslations?: TTranslations | undefined) => [Required<StringProps<TTranslations>>, (outputs: TOutputs) => void];
+
+export { useComponent };

package/dist/interfaces/context.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="@types/powerapps-component-framework" />
+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/dist/interfaces/index.d.ts

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

package/dist/interfaces/parameters.d.ts

@@ -0,0 +1,23 @@
+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/dist/interfaces/property.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="@types/powerapps-component-framework" />
+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;
+}
+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>;
+    }[];
+}
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export type StringProps<T> = {
+    [Property in keyof T]: (variables?: any) => string;
+};

package/dist/utils/NumeralPCF.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="@types/powerapps-component-framework" />
+export declare class NumeralPCF {
+    static decimal(formatting: ComponentFramework.UserSettingApi.NumberFormattingInfo): void;
+    static currency(formatting: ComponentFramework.UserSettingApi.NumberFormattingInfo): void;
+    private static get _locales();
+}

package/examples/Currency/Currency/ControlManifest.Input.xml

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <control namespace="TALXIS.PCF" constructor="Currency" version="0.0.1" display-name-key="Currency" description-key="Currency description" control-type="standard" >
+    <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
+    If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
+    Example1:
+      <external-service-usage enabled="true">
+        <domain>www.Microsoft.com</domain>
+      </external-service-usage>
+    Example2:
+      <external-service-usage enabled="false">
+      </external-service-usage>
+    -->
+    <external-service-usage enabled="false">
+      <!--UNCOMMENT TO ADD EXTERNAL DOMAINS
+      <domain></domain>
+      <domain></domain>
+      -->
+    </external-service-usage>
+    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
+    <property name="value" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="Currency" usage="bound" required="true" />
+    <!--
+      Property node's of-type attribute can be of-type-group attribute.
+      Example:
+      <type-group name="numbers">
+        <type>Whole.None</type>
+        <type>Currency</type>
+        <type>FP</type>
+        <type>Decimal</type>
+      </type-group>
+      <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
+    -->
+    <resources>
+      <code path="index.ts" order="1"/>
+      <!-- UNCOMMENT TO ADD MORE RESOURCES
+      <css path="css/Currency.css" order="1" />
+      <resx path="strings/Currency.1033.resx" version="1.0.0" />
+      -->
+    </resources>
+    <!-- UNCOMMENT TO ENABLE THE SPECIFIED API
+    <feature-usage>
+      <uses-feature name="Device.captureAudio" required="true" />
+      <uses-feature name="Device.captureImage" required="true" />
+      <uses-feature name="Device.captureVideo" required="true" />
+      <uses-feature name="Device.getBarcodeValue" required="true" />
+      <uses-feature name="Device.getCurrentPosition" required="true" />
+      <uses-feature name="Device.pickFile" required="true" />
+      <uses-feature name="Utility" required="true" />
+      <uses-feature name="WebAPI" required="true" />
+    </feature-usage>
+    -->
+  </control>
+</manifest>

package/examples/Currency/Currency/index.ts

@@ -0,0 +1,66 @@
+import { IInputs, IOutputs } from "./generated/ManifestTypes";
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { Decimal as DecimalComponent } from '../../../src/components/Decimal/Decimal';
+import { IDecimal } from '../../../src/components/Decimal/interfaces';
+
+export class Currency implements ComponentFramework.StandardControl<IInputs, IOutputs> {
+
+    private _notifyOutputChanged: () => void;
+    private _container: HTMLDivElement;
+    private _outputs: IOutputs = {};
+    constructor()
+    {
+
+    }
+
+    /**
+     * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
+     * Data-set values are not initialized here, use updateView.
+     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
+     * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
+     * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
+     * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
+     */
+    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement): void
+    {
+        this._notifyOutputChanged = notifyOutputChanged;
+        this._container = container;
+        // Add control initialization code
+    }
+    /**
+     * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
+     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
+     */
+    public updateView(context: ComponentFramework.Context<IInputs>): void
+    {
+        ReactDOM.render(React.createElement(DecimalComponent as any, {
+            context: context,
+            parameters: {
+                value: context.parameters.value
+            },
+            onNotifyOutputChanged: (outputs) => {
+                this._outputs = outputs;
+                this._notifyOutputChanged();
+            }
+        } as IDecimal), this._container);
+    }
+
+    /**
+     * It is called by the framework prior to a control receiving new data.
+     * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as "bound" or "output"
+     */
+    public getOutputs(): IOutputs
+    {
+        return this._outputs;
+    }
+
+    /**
+     * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
+     * i.e. cancelling any pending remote calls, removing listeners, etc.
+     */
+    public destroy(): void
+    {
+        // Add code to cleanup control if necessary
+    }
+}