@talxis/base-controls 1.2408.1 → 1.2408.2

package/dist/components/DateTime/DateTime.js

@@ -1 +1,133 @@
-import{jsx as e}from"react/jsx-runtime";import{ThemeProvider as t}from"@fluentui/react";import{useRef as o,useEffect as r}from"react";import{getDateTimeStyles as i}from"./styles.js";import{useDateTime as a}from"./hooks/useDateTime.js";import{Calendar as s}from"./components/Calendar.js";import{DatePicker as n}from"@talxis/react-components";import{useControlSizing as l}from"../../hooks/useControlSizing.js";import d from"dayjs";import"../../hooks/useInputBasedControl.js";import"../../hooks/useControl.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useControlTheme.js";import"../../utils/Theme.js";import"@fluentui/react-migration-v8-v9";import"dayjs/plugin/utc";import"dayjs/plugin/customParseFormat";import"./translations.js";import"@fluentui/react/lib/Calendar";const u=u=>{var m,c,p,v,f,h,y,g;const D=o(null),w=o(null),k=u.context,O=u.parameters,[b,P,T,j,C]=a(u,D),S=i(P),{height:M,width:N}=l(u.context.mode),R=o();r((()=>{var e,t;!0===(null===(e=u.parameters.AutoFocus)||void 0===e?void 0:e.raw)&&(null===(t=w.current)||void 0===t||t.showDatePickerPopup())}),[]);const x=()=>{var e,t;if(null===(e=O.RestrictedDates)||void 0===e?void 0:e.raw)return JSON.parse(null===(t=O.RestrictedDates)||void 0===t?void 0:t.raw).map((e=>new Date(e)))},E=(e,t,o)=>{var r,i;if(!e||!(null===(r=O.RestrictedDaysOfWeek)||void 0===r?void 0:r.raw))return;JSON.parse(O.RestrictedDaysOfWeek.raw).includes(t.getDay())&&(e.setAttribute("data-is-focusable","false"),null===(i=e.classList)||void 0===i||i.add(o.dayOutsideBounds),e.children[0].disabled=!0)};return e(t,Object.assign({theme:P,applyTo:"none",ref:D},{children:e(n,{className:S.datePicker,underlined:P.effects.underlined,componentRef:w,hideErrorMessage:!(null===(m=O.ShowErrorMessage)||void 0===m?void 0:m.raw),keepCalendarOpenAfterDaySelect:b,readOnly:k.mode.isControlDisabled,onSelectDate:b?void 0:e=>j.set(e),allowTextInput:!(null===(c=O.RestrictedDates)||void 0===c?void 0:c.raw)&&!(null===(p=O.RestrictedDaysOfWeek)||void 0===p?void 0:p.raw),minDate:new Date("1753-01-01T00:00:00.000Z"),firstDayOfWeek:u.context.userSettings.dateFormattingInfo.firstDayOfWeek,calendarAs:t=>{var o,r,i;const a=Object.assign(Object.assign({},t),{isMonthPickerVisible:!1!==(null===(o=O.EnableMonthPicker)||void 0===o?void 0:o.raw),isDayPickerVisible:!1!==(null===(r=O.EnableDayPicker)||void 0===r?void 0:r.raw),calendarDayProps:{restrictedDates:x(),customDayCellRef:E},strings:{goToToday:T.goToToday(),days:JSON.parse(T.days()),months:JSON.parse(T.months()),shortDays:JSON.parse(T.shortDays()),shortMonths:JSON.parse(T.shortMonths())},timePickerProps:{underlined:P.effects.underlined,dateTimeFormat:C.fullDateTimePattern,autoComplete:"off",autoCapitalize:"off",timeFormat:C.shortTimePattern,label:T.time(),visible:b,errorMessage:T.invalidTimeInput(),lastInputedTimeString:R.current,useHour12:C.shortTimePattern.endsWith("A"),onChange:e=>{j.set(void 0,e),R.current=e},value:j.get(),formattedDateTime:null!==(i=j.getFormatted())&&void 0!==i?i:"",strings:{invalidInputErrorMessage:T.invalidTimeInput()}}});return b&&(a.onSelectDate=e=>j.set(e)),e(s,Object.assign({},a))},errorMessage:O.value.errorMessage,textField:{underlined:P.effects.underlined,value:null!==(v=j.getFormatted())&&void 0!==v?v:"",onChange:(e,t)=>{var o;if(b){const e=d(t,C.shortDatePattern).format(C.shortDatePattern),r=null===(o=null==t?void 0:t.split(e).pop())||void 0===o?void 0:o.substring(1);R.current=r}j.setDateString(t)},placeholder:"---",onNotifyValidationResult:()=>null,noValidate:!0,borderless:!1===(null===(f=O.EnableBorder)||void 0===f?void 0:f.raw),styles:{fieldGroup:{height:M,width:N}},deleteButtonProps:!0===(null===(h=O.EnableDeleteButton)||void 0===h?void 0:h.raw)?{key:"Delete",onClick:j.clear,showOnlyOnHover:!0,iconProps:{iconName:"Cancel"}}:void 0,clickToCopyProps:!0===(null===(y=O.EnableCopyButton)||void 0===y?void 0:y.raw)?{key:"copy",showOnlyOnHover:!0,iconProps:{iconName:"Copy"}}:void 0},value:null!==(g=j.get())&&void 0!==g?g:new Date})}))};export{u as DateTime};
+import { jsx } from 'react/jsx-runtime';
+import { ThemeProvider } from '@fluentui/react';
+import { useRef, useEffect } from 'react';
+import { getDateTimeStyles } from './styles.js';
+import { useDateTime } from './hooks/useDateTime.js';
+import { Calendar } from './components/Calendar.js';
+import { DatePicker } from '@talxis/react-components';
+import { useControlSizing } from '../../hooks/useControlSizing.js';
+import dayjs from 'dayjs';
+
+const DateTime = (componentProps) => {
+    const ref = useRef(null);
+    const datePickerRef = useRef(null);
+    const context = componentProps.context;
+    const parameters = componentProps.parameters;
+    const [isDateTime, theme, labels, date, patterns] = useDateTime(componentProps, ref);
+    const styles = getDateTimeStyles(theme);
+    const { height, width } = useControlSizing(componentProps.context.mode);
+    const lastInputedTimeString = useRef();
+    useEffect(() => {
+        if (componentProps.parameters.AutoFocus?.raw === true) {
+            datePickerRef.current?.showDatePickerPopup();
+        }
+    }, []);
+    const getRestrictedDates = () => {
+        if (!parameters.RestrictedDates?.raw) {
+            return undefined;
+        }
+        return JSON.parse(parameters.RestrictedDates?.raw).map((x) => new Date(x));
+    };
+    const onOverrideDayCellProps = (element, date, classNames) => {
+        if (!element || !parameters.RestrictedDaysOfWeek?.raw) {
+            return;
+        }
+        const weekDaysToExclude = JSON.parse(parameters.RestrictedDaysOfWeek.raw);
+        if (weekDaysToExclude.includes(date.getDay())) {
+            element.setAttribute('data-is-focusable', 'false');
+            element.classList?.add(classNames.dayOutsideBounds);
+            element.children[0].disabled = true;
+        }
+    };
+    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", ref: ref, children: jsx(DatePicker, { className: styles.datePicker, underlined: theme.effects.underlined, componentRef: datePickerRef, hideErrorMessage: !parameters.ShowErrorMessage?.raw, keepCalendarOpenAfterDaySelect: isDateTime, readOnly: context.mode.isControlDisabled, 
+            //@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields
+            onSelectDate: isDateTime ? undefined : (newDate) => date.set(newDate), 
+            //disable so the user cannot input restricted Dates
+            allowTextInput: !parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw, 
+            // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN
+            minDate: new Date('1753-01-01T00:00:00.000Z'), firstDayOfWeek: componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek, calendarAs: (props) => {
+                const calendarProps = {
+                    ...props,
+                    isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,
+                    isDayPickerVisible: parameters.EnableDayPicker?.raw !== false,
+                    calendarDayProps: {
+                        restrictedDates: getRestrictedDates(),
+                        customDayCellRef: onOverrideDayCellProps
+                    },
+                    strings: {
+                        goToToday: labels.goToToday(),
+                        days: JSON.parse(labels.days()),
+                        months: JSON.parse(labels.months()),
+                        shortDays: JSON.parse(labels.shortDays()),
+                        shortMonths: JSON.parse(labels.shortMonths())
+                    },
+                    timePickerProps: {
+                        underlined: theme.effects.underlined,
+                        dateTimeFormat: patterns.fullDateTimePattern,
+                        autoComplete: "off",
+                        autoCapitalize: "off",
+                        timeFormat: patterns.shortTimePattern,
+                        label: labels.time(),
+                        visible: isDateTime,
+                        errorMessage: labels.invalidTimeInput(),
+                        lastInputedTimeString: lastInputedTimeString.current,
+                        useHour12: patterns.shortTimePattern.endsWith('A'),
+                        onChange: (time) => {
+                            date.set(undefined, time);
+                            lastInputedTimeString.current = time;
+                        },
+                        value: date.get(),
+                        formattedDateTime: date.getFormatted() ?? "",
+                        strings: {
+                            invalidInputErrorMessage: labels.invalidTimeInput()
+                        }
+                    }
+                };
+                if (isDateTime) {
+                    calendarProps.onSelectDate = (newDate) => date.set(newDate);
+                }
+                return jsx(Calendar, { ...calendarProps });
+            }, errorMessage: parameters.value.errorMessage, textField: {
+                underlined: theme.effects.underlined,
+                value: date.getFormatted() ?? "",
+                onChange: (e, value) => {
+                    if (isDateTime) {
+                        const datePart = dayjs(value, patterns.shortDatePattern).format(patterns.shortDatePattern);
+                        const time = value?.split(datePart).pop()?.substring(1);
+                        lastInputedTimeString.current = time;
+                    }
+                    date.setDateString(value);
+                },
+                placeholder: '---',
+                onNotifyValidationResult: () => null,
+                noValidate: true,
+                borderless: parameters.EnableBorder?.raw === false,
+                styles: {
+                    fieldGroup: {
+                        height: height,
+                        width: width
+                    }
+                },
+                //@ts-ignore - TODO: fix types in shared components
+                deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
+                    key: 'Delete',
+                    onClick: date.clear,
+                    showOnlyOnHover: true,
+                    iconProps: {
+                        iconName: 'Cancel'
+                    }
+                } : undefined,
+                clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
+                    key: 'copy',
+                    showOnlyOnHover: true,
+                    iconProps: {
+                        iconName: 'Copy'
+                    }
+                } : undefined
+            }, 
+            //undefined will break the calendar => it wont reflect date change in it's UI
+            value: date.get() ?? new Date() }) }));
+};
+
+export { DateTime };
+//# sourceMappingURL=DateTime.js.map

package/dist/components/DateTime/DateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.js","sources":["../../../src/components/DateTime/DateTime.tsx"],"sourcesContent":["\nimport { IDateTime } from \"./interfaces\";\nimport { DateRangeType, ICalendarDayGridStyles, IDatePicker, IProcessedStyleSet, ThemeProvider } from \"@fluentui/react\";\nimport { useEffect, useRef } from \"react\";\nimport { getDateTimeStyles } from \"./styles\";\nimport { useDateTime } from \"./hooks/useDateTime\";\nimport { Calendar, IInternalCalendarProps } from \"./components/Calendar\";\nimport { DatePicker } from \"@talxis/react-components\";\nimport React from 'react';\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\nimport dayjs from \"dayjs\";\n\nexport const DateTime = (componentProps: IDateTime) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const datePickerRef = useRef<IDatePicker>(null);\n    const context = componentProps.context;\n    const parameters = componentProps.parameters;\n    const [isDateTime, theme, labels, date, patterns] = useDateTime(componentProps, ref);\n    const styles = getDateTimeStyles(theme);\n    const { height, width } = useControlSizing(componentProps.context.mode);\n    const lastInputedTimeString = useRef<string>();\n\n    useEffect(() => {\n        if (componentProps.parameters.AutoFocus?.raw === true) {\n            datePickerRef.current?.showDatePickerPopup();\n        }\n    }, []);\n\n    const getRestrictedDates = (): Date[] | undefined => {\n        if(!parameters.RestrictedDates?.raw) {\n            return undefined;\n        }\n        return JSON.parse(parameters.RestrictedDates?.raw).map((x: string) => new Date(x))\n    }\n    const onOverrideDayCellProps = (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => {\n        if(!element || !parameters.RestrictedDaysOfWeek?.raw) {\n            return;\n        }\n        const weekDaysToExclude: number[] = JSON.parse(parameters.RestrictedDaysOfWeek.raw);\n        if(weekDaysToExclude.includes(date.getDay())) {\n            element.setAttribute('data-is-focusable', 'false');\n            element.classList?.add(classNames.dayOutsideBounds!);\n            (element.children[0] as HTMLButtonElement).disabled = true;\n        }\n    }\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\" ref={ref}>\n            <DatePicker\n                className={styles.datePicker}\n                underlined={theme.effects.underlined}\n                componentRef={datePickerRef}\n                hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n                keepCalendarOpenAfterDaySelect={isDateTime}\n                readOnly={context.mode.isControlDisabled}\n                //@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields\n                onSelectDate={isDateTime ? undefined : (newDate) => date.set(newDate!)}\n                //disable so the user cannot input restricted Dates\n                allowTextInput={!parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw}\n                // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN\n                minDate={new Date('1753-01-01T00:00:00.000Z')}\n                firstDayOfWeek={componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek}\n                calendarAs={(props) =>\n                {\n                    const calendarProps: IInternalCalendarProps = {\n                        ...props,\n                        isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,\n                        isDayPickerVisible: parameters.EnableDayPicker?.raw !== false,\n                        calendarDayProps: {\n                            restrictedDates: getRestrictedDates(),\n                            customDayCellRef: onOverrideDayCellProps\n                        },\n                        strings: {\n                            goToToday: labels.goToToday(),\n                            days: JSON.parse(labels.days()),\n                            months: JSON.parse(labels.months()),\n                            shortDays: JSON.parse(labels.shortDays()),\n                            shortMonths: JSON.parse(labels.shortMonths())\n                        },\n                        timePickerProps: {\n                            underlined: theme.effects.underlined,\n                            dateTimeFormat: patterns.fullDateTimePattern,\n                            autoComplete: \"off\",\n                            autoCapitalize: \"off\",\n                            timeFormat: patterns.shortTimePattern,\n                            label: labels.time(),\n                            visible: isDateTime,\n                            errorMessage: labels.invalidTimeInput(),\n                            lastInputedTimeString: lastInputedTimeString.current,\n                            useHour12: patterns.shortTimePattern.endsWith('A'),\n                            onChange: (time?: string) => {\n                                date.set(undefined, time);\n                                lastInputedTimeString.current = time;\n                            },\n                            value: date.get(),\n                            formattedDateTime: date.getFormatted() ?? \"\",\n                            strings: {\n                                invalidInputErrorMessage: labels.invalidTimeInput()\n                            }\n                        }\n                    };\n                    if(isDateTime) {\n                        calendarProps.onSelectDate = (newDate) => date.set(newDate)\n                    }\n                   return <Calendar {...calendarProps} />\n                    }\n                }\n                errorMessage={parameters.value.errorMessage}\n                textField={{\n                    underlined: theme.effects.underlined,\n                    value: date.getFormatted() ?? \"\",\n                    onChange: (e, value) => {\n                        if(isDateTime) {\n                            const datePart = dayjs(value, patterns.shortDatePattern).format(patterns.shortDatePattern);\n                            const time = value?.split(datePart).pop()?.substring(1);\n                            lastInputedTimeString.current = time;\n                        }\n                        date.setDateString(value)\n                    },\n                    placeholder: '---',\n                    onNotifyValidationResult: () => null,\n                    noValidate: true,\n                    borderless: parameters.EnableBorder?.raw === false,\n                    styles: {\n                        fieldGroup: {\n                            height: height,\n                            width: width\n                        }\n                    },\n                    //@ts-ignore - TODO: fix types in shared components\n                    deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n                        key: 'Delete',\n                        onClick: date.clear,\n                        showOnlyOnHover: true,\n                        iconProps: {\n                            iconName: 'Cancel'\n                        }\n                    } : undefined,\n                    clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n                        key: 'copy',\n                        showOnlyOnHover: true,\n                        iconProps: {\n                            iconName: 'Copy'\n                        }\n                    } : undefined\n                }\n                }\n                //undefined will break the calendar => it wont reflect date change in it's UI\n                value={date.get() ?? new Date()}\n            />\n        </ThemeProvider>\n    );\n};\n\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/DateTime/components/Calendar.js

@@ -1 +1,63 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useTheme as r}from"@fluentui/react";import{Calendar as a}from"@fluentui/react/lib/Calendar";import{useRef as o,useState as i,useEffect as n}from"react";import{getDateTimeStyles as m}from"../styles.js";import{TimePicker as s}from"@talxis/react-components";import l from"dayjs";const c=c=>{const u=c.timePickerProps,d=u.formattedDateTime,f=r(),p=m(f),g=o(null),[v,b]=i(!1),F=()=>{var t;const e=l(d,u.dateTimeFormat,!0);return e.isValid()?null!==(t=e.format(u.timeFormat))&&void 0!==t?t:"":u.lastInputedTimeString};return n((()=>{if(b(!1),!u.visible)return;const t=F();if(g.current.setState({currentPendingValue:F()}),!t||!d)return;l(t,u.timeFormat,!0).isValid()||b(!0)}),[d]),t("div",Object.assign({className:p.calendarCallout},{children:[e(a,Object.assign({},c,{value:c.value})),e("hr",{}),u.visible&&e(s,Object.assign({},u,{errorMessage:v?u.errorMessage:void 0,componentRef:g,onFormatDate:t=>l(t).format(u.timeFormat),onChange:(t,e)=>{const r=l(e);let a;a=r.isValid()?r.format(u.timeFormat):g.current.state.currentPendingValue,u.onChange(a)},useComboBoxAsMenuWidth:!0,styles:{callout:{maxHeight:"300px !important"}},increments:15,allowFreeform:!0}))]}))};export{c as Calendar};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from '@fluentui/react';
+import { Calendar as Calendar$1 } from '@fluentui/react/lib/Calendar';
+import { useRef, useState, useEffect } from 'react';
+import { getDateTimeStyles } from '../styles.js';
+import { TimePicker } from '@talxis/react-components';
+import dayjs from 'dayjs';
+
+const Calendar = (props) => {
+    const timePickerProps = props.timePickerProps;
+    const formattedDateTime = timePickerProps.formattedDateTime;
+    const theme = useTheme();
+    const styles = getDateTimeStyles(theme);
+    const timePickerRef = useRef(null);
+    const [error, setError] = useState(false);
+    const getFormattedTime = () => {
+        const dayjsDate = dayjs(formattedDateTime, timePickerProps.dateTimeFormat, true);
+        if (!dayjsDate.isValid()) {
+            return timePickerProps.lastInputedTimeString;
+        }
+        return dayjsDate.format(timePickerProps.timeFormat) ?? "";
+    };
+    const onChange = (event, time) => {
+        const dayjsDate = dayjs(time);
+        let timeValue;
+        if (!dayjsDate.isValid()) {
+            //@ts-ignore - need to access internals to properly show error values
+            timeValue = timePickerRef.current.state.currentPendingValue;
+        }
+        else {
+            timeValue = dayjsDate.format(timePickerProps.timeFormat);
+        }
+        //@ts-ignore - need to access internals to properly show error values
+        timePickerProps.onChange(timeValue);
+    };
+    useEffect(() => {
+        setError(false);
+        if (!timePickerProps.visible) {
+            return;
+        }
+        const formattedTime = getFormattedTime();
+        //@ts-ignore - need to access internals to properly show error values
+        timePickerRef.current.setState({
+            currentPendingValue: getFormattedTime()
+        });
+        if (!formattedTime || !formattedDateTime) {
+            return;
+        }
+        const time = dayjs(formattedTime, timePickerProps.timeFormat, true);
+        if (!time.isValid()) {
+            setError(true);
+        }
+    }, [formattedDateTime]);
+    return (jsxs("div", { className: styles.calendarCallout, children: [jsx(Calendar$1, { ...props, value: props.value }), jsx("hr", {}), timePickerProps.visible &&
+                jsx(TimePicker, { ...timePickerProps, errorMessage: error ? timePickerProps.errorMessage : undefined, componentRef: timePickerRef, onFormatDate: (date) => dayjs(date).format(timePickerProps.timeFormat), onChange: onChange, useComboBoxAsMenuWidth: true, styles: {
+                        callout: {
+                            maxHeight: '300px !important'
+                        }
+                    }, increments: 15, allowFreeform: true })] }));
+};
+
+export { Calendar };
+//# sourceMappingURL=Calendar.js.map

package/dist/components/DateTime/components/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sources":["../../../../src/components/DateTime/components/Calendar.tsx"],"sourcesContent":["import { ICalendarProps, IComboBox } from \"@fluentui/react\";\nimport { useTheme } from \"@fluentui/react\";\nimport { Calendar as CalendarBase } from '@fluentui/react/lib/Calendar';\nimport { useEffect, useRef, useState } from \"react\";\nimport { getDateTimeStyles } from \"../styles\";\nimport { ITimePickerProps, TimePicker } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport React from 'react';\n\ninterface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | 'defaultValue'> {\n    formattedDateTime: string;\n    visible: boolean;\n    timeFormat: string;\n    dateTimeFormat: string;\n    underlined?: boolean;\n    lastInputedTimeString?: string;\n    onChange: (time?: string) => void;\n}\n\nexport interface IInternalCalendarProps extends ICalendarProps {\n    timePickerProps: IInternalTimePickerProps;\n}\n\nexport const Calendar = (props: IInternalCalendarProps) => {\n    const timePickerProps = props.timePickerProps;\n    const formattedDateTime = timePickerProps.formattedDateTime;\n    const theme = useTheme();\n    const styles = getDateTimeStyles(theme);\n    const timePickerRef = useRef<IComboBox>(null);\n    const [error, setError] = useState(false);\n\n    const getFormattedTime = () => {\n        const dayjsDate = dayjs(formattedDateTime, timePickerProps.dateTimeFormat, true);\n        if (!dayjsDate.isValid()) {\n            return timePickerProps.lastInputedTimeString;\n        }\n        return dayjsDate.format(timePickerProps.timeFormat) ?? \"\";\n    };\n\n    const onChange = (event: React.FormEvent<IComboBox>, time: Date) => {\n        const dayjsDate = dayjs(time);\n        let timeValue;\n        if (!dayjsDate.isValid()) {\n            //@ts-ignore - need to access internals to properly show error values\n            timeValue = timePickerRef.current.state.currentPendingValue;\n        }\n        else {\n            timeValue = dayjsDate.format(timePickerProps.timeFormat);\n        }\n        //@ts-ignore - need to access internals to properly show error values\n        timePickerProps.onChange(timeValue);\n\n    }\n\n    useEffect(() => {\n        setError(false);\n        if (!timePickerProps.visible) {\n            return;\n        }\n        const formattedTime = getFormattedTime();\n        //@ts-ignore - need to access internals to properly show error values\n        timePickerRef.current.setState({\n            currentPendingValue: getFormattedTime()\n        })\n        if(!formattedTime || !formattedDateTime) {\n            return;\n        }\n        const time = dayjs(formattedTime, timePickerProps.timeFormat, true);\n        if (!time.isValid()) {\n            setError(true);\n        }\n    }, [formattedDateTime]);\n\n\n    return (\n        <div className={styles.calendarCallout}>\n            <CalendarBase {...props} value={props.value} />\n            <hr />\n            {timePickerProps.visible &&\n                <TimePicker\n                    {...timePickerProps}\n                    errorMessage={error ? timePickerProps.errorMessage : undefined}\n                    componentRef={timePickerRef}\n                    onFormatDate={(date) => dayjs(date).format(timePickerProps.timeFormat)}\n                    onChange={onChange}\n                    useComboBoxAsMenuWidth\n                    styles={{\n                        callout: {\n                            maxHeight: '300px !important'\n                        }\n                    }}\n                    increments={15}\n                    allowFreeform\n                />\n            }\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","CalendarBase"],"mappings":";;;;;;;;AAuBa,MAAA,QAAQ,GAAG,CAAC,KAA6B,KAAI;AACtD,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,eAAe,CAAC;AAC9C,IAAA,MAAM,iBAAiB,GAAG,eAAe,CAAC,iBAAiB,CAAC;AAC5D,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,MAAM,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;AACxC,IAAA,MAAM,aAAa,GAAG,MAAM,CAAY,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,gBAAgB,GAAG,MAAK;AAC1B,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,iBAAiB,EAAE,eAAe,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;AACjF,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE;YACtB,OAAO,eAAe,CAAC,qBAAqB,CAAC;AAChD,SAAA;QACD,OAAO,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;AAC9D,KAAC,CAAC;AAEF,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAiC,EAAE,IAAU,KAAI;AAC/D,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AAC9B,QAAA,IAAI,SAAS,CAAC;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE;;YAEtB,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;AAC/D,SAAA;AACI,aAAA;YACD,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;AAC5D,SAAA;;AAED,QAAA,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;AAExC,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,KAAK,CAAC,CAAC;AAChB,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YAC1B,OAAO;AACV,SAAA;AACD,QAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;;AAEzC,QAAA,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC;YAC3B,mBAAmB,EAAE,gBAAgB,EAAE;AAC1C,SAAA,CAAC,CAAA;AACF,QAAA,IAAG,CAAC,aAAa,IAAI,CAAC,iBAAiB,EAAE;YACrC,OAAO;AACV,SAAA;AACD,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,EAAE,eAAe,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AACpE,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE;YACjB,QAAQ,CAAC,IAAI,CAAC,CAAC;AAClB,SAAA;AACL,KAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAGxB,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,eAAe,EAAA,QAAA,EAAA,CAClCC,GAAC,CAAAC,UAAY,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,CAAI,EAC/CD,GAAM,CAAA,IAAA,EAAA,EAAA,CAAA,EACL,eAAe,CAAC,OAAO;gBACpBA,GAAC,CAAA,UAAU,OACH,eAAe,EACnB,YAAY,EAAE,KAAK,GAAG,eAAe,CAAC,YAAY,GAAG,SAAS,EAC9D,YAAY,EAAE,aAAa,EAC3B,YAAY,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,EACtE,QAAQ,EAAE,QAAQ,EAClB,sBAAsB,EACtB,IAAA,EAAA,MAAM,EAAE;AACJ,wBAAA,OAAO,EAAE;AACL,4BAAA,SAAS,EAAE,kBAAkB;AAChC,yBAAA;qBACJ,EACD,UAAU,EAAE,EAAE,EACd,aAAa,EACf,IAAA,EAAA,CAAA,CAAA,EAAA,CAEJ,EACR;AACN;;;;"}

package/dist/components/DateTime/hooks/useDateTime.js

@@ -1 +1,137 @@
-import{useRef as t,useEffect as e}from"react";import{useInputBasedControl as r}from"../../../hooks/useInputBasedControl.js";import a from"dayjs";import o from"dayjs/plugin/utc";import n from"dayjs/plugin/customParseFormat";import{getDefaultDateTimeTranslations as i}from"../translations.js";import"../../../hooks/useControl.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../../hooks/useControlTheme.js";import"../../../utils/Theme.js";import"@fluentui/react";import"@fluentui/react-migration-v8-v9";import"../../../hooks/useControlSizing.js";a.extend(n),a.extend(o);const s=(o,n)=>{const s=o.parameters.value,u=o.context,m=s.attributes.Behavior,l=s.attributes.Format,c=u.userSettings.dateFormattingInfo,p=t(void 0),f=(()=>{switch(l){case"DateAndTime":case"Date and Time":case"DateAndTime.DateAndTime":case"datetime":return!0;default:return!1}})(),d=c.shortDatePattern.replace(/\//g,c.dateSeparator).toUpperCase(),g=c.shortTimePattern.replace(/:/g,c.timeSeparator).replace("tt","A"),h=f?`${d} ${g}`:d,{value:D,labels:v,theme:T,setValue:j,onNotifyOutputChanged:S}=r("DateTime",o,{formatter:t=>t instanceof Date?f?u.formatting.formatTime(t,m):u.formatting.formatDateShort(t):t,defaultTranslations:i(o.context.userSettings.dateFormattingInfo)});e((()=>{var t;const e=()=>{S({value:y(D)})},r=null===(t=n.current)||void 0===t?void 0:t.querySelector("input");return null==r||r.addEventListener("blur",e),()=>{null==r||r.removeEventListener("blur",e)}}),[D]),e((()=>{s.raw instanceof Date&&(p.current=s.raw)}),[s.raw]);const w=()=>{if(s.raw instanceof Date){if(3===m){return new Date(s.raw.toISOString().replace("Z",""))}return s.raw}if(s.error)return p.current},y=t=>{if(t instanceof Date)return t;const e=a(t,h,!0);return e.isValid()?e.toDate():t};return[f,T,v,{get:w,clear:()=>{S({value:void 0})},getFormatted:()=>D,set:(t,e)=>{let r=a(null!=t?t:w());e||(e=a(w()).format(g));const o=a(e,g,!0);let n;o.isValid()||(n=`${r.format(d)} ${e}`),r=r.hour(o.hour()),r=r.minute(o.minute()),S({value:y(null!=n?n:r.toDate())})},setDateString:j},{shortDatePattern:d,shortTimePattern:g,fullDateTimePattern:`${d} ${g}`}]};export{s as useDateTime};
+import { useRef, useEffect } from 'react';
+import { useInputBasedControl } from '../../../hooks/useInputBasedControl.js';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { getDefaultDateTimeTranslations } from '../translations.js';
+
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+const useDateTime = (props, ref) => {
+    const boundValue = props.parameters.value;
+    const context = props.context;
+    const behavior = boundValue.attributes.Behavior;
+    const format = boundValue.attributes.Format;
+    const dateFormattingInfo = context.userSettings.dateFormattingInfo;
+    const lastValidDateRef = useRef(undefined);
+    const isDateTime = (() => {
+        switch (format) {
+            case 'DateAndTime':
+            case 'Date and Time':
+            case 'DateAndTime.DateAndTime':
+            case 'datetime': {
+                return true;
+            }
+            default: {
+                return false;
+            }
+        }
+    })();
+    //MS returns the pattern without correct separator and they do this during formatting
+    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\//g, dateFormattingInfo.dateSeparator).toUpperCase();
+    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');
+    const formatting = (() => {
+        if (isDateTime) {
+            return `${shortDatePattern} ${shortTimePattern}`;
+        }
+        return shortDatePattern;
+    })();
+    const formatDate = (date) => {
+        if (date instanceof Date) {
+            if (isDateTime) {
+                //should handle the time zone conversion
+                return context.formatting.formatTime(date, behavior);
+            }
+            return context.formatting.formatDateShort(date);
+        }
+        return date;
+    };
+    const { value, labels, theme, setValue, onNotifyOutputChanged } = useInputBasedControl('DateTime', props, {
+        formatter: formatDate,
+        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)
+    });
+    useEffect(() => {
+        const onBlur = () => {
+            onNotifyOutputChanged({
+                value: dateExtractor(value)
+            });
+        };
+        const input = ref.current?.querySelector('input');
+        input?.addEventListener('blur', onBlur);
+        return () => {
+            input?.removeEventListener('blur', onBlur);
+        };
+    }, [value]);
+    useEffect(() => {
+        if (boundValue.raw instanceof Date) {
+            lastValidDateRef.current = boundValue.raw;
+        }
+    }, [boundValue.raw]);
+    const getDate = () => {
+        if (boundValue.raw instanceof Date) {
+            if (behavior === 3) {
+                //the date in javascript gets automatically adjusted to local time zone
+                //this will make it think that the date already came in local time, thus not adjusting the time
+                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));
+                return date;
+            }
+            return boundValue.raw;
+        }
+        if (boundValue.error) {
+            return lastValidDateRef.current;
+        }
+        return undefined;
+    };
+    const dateExtractor = (value) => {
+        if (value instanceof Date) {
+            return value;
+        }
+        const dayjsDate = dayjs(value, formatting, true);
+        if (!dayjsDate.isValid()) {
+            return value;
+        }
+        return dayjsDate.toDate();
+    };
+    const clearDate = () => {
+        onNotifyOutputChanged({
+            value: undefined
+        });
+    };
+    const selectDate = (date, time) => {
+        let dayjsDate = dayjs(date ?? getDate());
+        //date selected from calendar, keep the original time
+        if (!time) {
+            time = dayjs(getDate()).format(shortTimePattern);
+        }
+        const dayjsTime = dayjs(time, shortTimePattern, true);
+        let invalidDateString;
+        if (!dayjsTime.isValid()) {
+            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`;
+        }
+        dayjsDate = dayjsDate.hour(dayjsTime.hour());
+        dayjsDate = dayjsDate.minute(dayjsTime.minute());
+        onNotifyOutputChanged({
+            value: dateExtractor(invalidDateString ?? dayjsDate.toDate())
+        });
+    };
+    return [
+        isDateTime,
+        theme,
+        labels,
+        {
+            get: getDate,
+            clear: clearDate,
+            getFormatted: () => value,
+            set: selectDate,
+            setDateString: setValue
+        },
+        {
+            shortDatePattern: shortDatePattern,
+            shortTimePattern: shortTimePattern,
+            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`
+        }
+    ];
+};
+
+export { useDateTime };
+//# sourceMappingURL=useDateTime.js.map

package/dist/components/DateTime/hooks/useDateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters} from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport {ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"../../../interfaces/theme\";\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n    boolean,\n    ITheme,\n    ITranslation<Required<IDateTime>['translations']>,\n    {\n        get: () => Date | undefined;\n        getFormatted: () => string | undefined;\n        set: (date?: Date, time?: string) => void;\n        setDateString: (value: string | undefined) => void;\n        clear: () => void;\n    },\n    {\n        shortDatePattern: string\n        shortTimePattern: string;\n        fullDateTimePattern: string;\n    },\n] => {\n\n    const boundValue = props.parameters.value;\n    const context = props.context;\n    const behavior = boundValue.attributes.Behavior;\n    const format = boundValue.attributes.Format;\n    const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n    const lastValidDateRef = useRef<Date | undefined>(undefined);\n    \n    const isDateTime = (() => {\n        switch (format) {\n            case 'DateAndTime':\n            case 'Date and Time':\n            case 'DateAndTime.DateAndTime':\n            case 'datetime': {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n\n    //MS returns the pattern without correct separator and they do this during formatting\n    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n    const formatting = (() => {\n        if (isDateTime) {\n            return `${shortDatePattern} ${shortTimePattern}`;\n        }\n        return shortDatePattern;\n    })();\n\n    const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n        if (date instanceof Date) {\n            if (isDateTime) {\n                //should handle the time zone conversion\n                return context.formatting.formatTime(date, behavior);\n            }\n            return context.formatting.formatDateShort(date);\n        }\n        return date;\n    };\n\n    const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n    });\n\n    useEffect(() => {\n        const onBlur = () => {\n            onNotifyOutputChanged({\n                value: dateExtractor(value!) as any\n            });\n        };\n        const input = ref.current?.querySelector('input');\n        input?.addEventListener('blur', onBlur);\n        return () => {\n            input?.removeEventListener('blur', onBlur);\n        };\n    }, [value]);\n\n    useEffect(() => {\n        if (boundValue.raw instanceof Date) {\n            lastValidDateRef.current = boundValue.raw;\n        }\n    }, [boundValue.raw]);\n\n    const getDate = (): Date | undefined => {\n        if (boundValue.raw instanceof Date) {\n            if (behavior === 3) {\n                //the date in javascript gets automatically adjusted to local time zone\n                //this will make it think that the date already came in local time, thus not adjusting the time\n                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n                return date;\n            }\n            return boundValue.raw;\n        }\n        if(boundValue.error) {\n            return lastValidDateRef.current;\n        }\n        return undefined;\n    };\n\n    const dateExtractor = (value: string | Date): Date | string => {\n        if (value instanceof Date) {\n            return value;\n        }\n        const dayjsDate = dayjs(value, formatting, true);\n        if (!dayjsDate.isValid()) {\n            return value;\n        }\n        return dayjsDate.toDate();\n    };\n\n    const clearDate = () => {\n        onNotifyOutputChanged({\n            value: undefined\n        });\n    };\n\n    const selectDate = (date?: Date, time?: string) => {\n        let dayjsDate = dayjs(date ?? getDate());\n        //date selected from calendar, keep the original time\n        if (!time) {\n            time = dayjs(getDate()).format(shortTimePattern);\n        }\n        const dayjsTime = dayjs(time, shortTimePattern, true);\n        let invalidDateString;\n        if(!dayjsTime.isValid()) {\n            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n        }\n        dayjsDate = dayjsDate.hour(dayjsTime.hour());\n        dayjsDate = dayjsDate.minute(dayjsTime.minute());\n        onNotifyOutputChanged({\n            value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n        });\n    };\n    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}

package/dist/components/DateTime/index.js

@@ -1 +1,3 @@
-export{DateTime}from"./DateTime.js";export{useDateTime}from"./hooks/useDateTime.js";import"react/jsx-runtime";import"@fluentui/react";import"react";import"./styles.js";import"./components/Calendar.js";import"@fluentui/react/lib/Calendar";import"@talxis/react-components";import"dayjs";import"../../hooks/useControlSizing.js";import"../../hooks/useInputBasedControl.js";import"../../hooks/useControl.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useControlTheme.js";import"../../utils/Theme.js";import"@fluentui/react-migration-v8-v9";import"dayjs/plugin/utc";import"dayjs/plugin/customParseFormat";import"./translations.js";
+export { DateTime } from './DateTime.js';
+export { useDateTime } from './hooks/useDateTime.js';
+//# sourceMappingURL=index.js.map

package/dist/components/DateTime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/DateTime/styles.js

@@ -1 +1,37 @@
-import{mergeStyleSets as a}from"@fluentui/react";const e=e=>a({datePicker:{'[class^="statusMessage"]':{display:"none"}},calendarCallout:{'[class*="TALXIS__timepicker__root"]':{padding:12,label:{paddingTop:0},i:{fontSize:16}},hr:{margin:0,border:"none",height:1,backgroundColor:e.semanticColors.menuDivider},'[class^="monthAndYear"], [class*="weekDayLabelCell"]':{animationDuration:"0s"},".ms-DatePicker":{animationDuration:"0s"}}});export{e as getDateTimeStyles};
+import { mergeStyleSets } from '@fluentui/react';
+
+const getDateTimeStyles = (theme) => {
+    return mergeStyleSets({
+        datePicker: {
+            '[class^="statusMessage"]': {
+                display: 'none'
+            }
+        },
+        calendarCallout: {
+            '[class*="TALXIS__timepicker__root"]': {
+                padding: 12,
+                'label': {
+                    paddingTop: 0
+                },
+                'i': {
+                    fontSize: 16
+                }
+            },
+            'hr': {
+                margin: 0,
+                border: 'none',
+                height: 1,
+                backgroundColor: theme.semanticColors.menuDivider
+            },
+            '[class^="monthAndYear"], [class*="weekDayLabelCell"]': {
+                animationDuration: '0s'
+            },
+            '.ms-DatePicker': {
+                animationDuration: '0s'
+            }
+        }
+    });
+};
+
+export { getDateTimeStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/DateTime/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/DateTime/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\n\nexport const getDateTimeStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        datePicker: {\n            '[class^=\"statusMessage\"]': {\n                display: 'none'\n            }\n        },\n        calendarCallout: {\n            '[class*=\"TALXIS__timepicker__root\"]': {\n                padding: 12,\n                'label': {\n                    paddingTop: 0\n                },\n                'i': {\n                    fontSize: 16\n                }\n            },\n            'hr': {\n                margin: 0,\n                border: 'none',\n                height: 1,\n                backgroundColor: theme.semanticColors.menuDivider\n            },\n            '[class^=\"monthAndYear\"], [class*=\"weekDayLabelCell\"]': {\n                animationDuration: '0s'\n            },\n            '.ms-DatePicker': {\n                animationDuration: '0s'\n            }\n        }\n    });\n};"],"names":[],"mappings":";;AAEa,MAAA,iBAAiB,GAAG,CAAC,KAAa,KAAI;AAC/C,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,UAAU,EAAE;AACR,YAAA,0BAA0B,EAAE;AACxB,gBAAA,OAAO,EAAE,MAAM;AAClB,aAAA;AACJ,SAAA;AACD,QAAA,eAAe,EAAE;AACb,YAAA,qCAAqC,EAAE;AACnC,gBAAA,OAAO,EAAE,EAAE;AACX,gBAAA,OAAO,EAAE;AACL,oBAAA,UAAU,EAAE,CAAC;AAChB,iBAAA;AACD,gBAAA,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,EAAE;AACf,iBAAA;AACJ,aAAA;AACD,YAAA,IAAI,EAAE;AACF,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;AACpD,aAAA;AACD,YAAA,sDAAsD,EAAE;AACpD,gBAAA,iBAAiB,EAAE,IAAI;AAC1B,aAAA;AACD,YAAA,gBAAgB,EAAE;AACd,gBAAA,iBAAiB,EAAE,IAAI;AAC1B,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

package/dist/components/DateTime/translations.js

@@ -1 +1,23 @@
-const t=t=>({time:{1029:"Čas",1033:"Time"},goToToday:{1029:"Přejít na dnešek",1033:"Go to today"},invalidTimeInput:{1029:"Neplatný časový formát.",1033:"Invalid time format."},days:t.dayNames,months:t.monthNames,shortDays:t.shortestDayNames,shortMonths:t.abbreviatedMonthNames});export{t as getDefaultDateTimeTranslations};
+const getDefaultDateTimeTranslations = (dateFormattingInfo) => {
+    return {
+        time: {
+            1029: 'Čas',
+            1033: 'Time'
+        },
+        goToToday: {
+            1029: 'Přejít na dnešek',
+            1033: 'Go to today'
+        },
+        invalidTimeInput: {
+            1029: 'Neplatný časový formát.',
+            1033: 'Invalid time format.'
+        },
+        days: dateFormattingInfo.dayNames,
+        months: dateFormattingInfo.monthNames,
+        shortDays: dateFormattingInfo.shortestDayNames,
+        shortMonths: dateFormattingInfo.abbreviatedMonthNames,
+    };
+};
+
+export { getDefaultDateTimeTranslations };
+//# sourceMappingURL=translations.js.map

package/dist/components/DateTime/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sources":["../../../src/components/DateTime/translations.ts"],"sourcesContent":["export const getDefaultDateTimeTranslations = (dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo) => {\n    return {\n        time: {\n            1029: 'Čas',\n            1033: 'Time'\n        },\n        goToToday: {\n            1029: 'Přejít na dnešek',\n            1033: 'Go to today'\n        },\n        invalidTimeInput: {\n            1029: 'Neplatný časový formát.',\n            1033: 'Invalid time format.'\n        },\n        days: dateFormattingInfo.dayNames,\n        months: dateFormattingInfo.monthNames,\n        shortDays: dateFormattingInfo.shortestDayNames,\n        shortMonths: dateFormattingInfo.abbreviatedMonthNames,\n    }\n};"],"names":[],"mappings":"AAAa,MAAA,8BAA8B,GAAG,CAAC,kBAAwE,KAAI;IACvH,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,IAAI,EAAE,MAAM;AACf,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,IAAI,EAAE,kBAAkB;AACxB,YAAA,IAAI,EAAE,aAAa;AACtB,SAAA;AACD,QAAA,gBAAgB,EAAE;AACd,YAAA,IAAI,EAAE,yBAAyB;AAC/B,YAAA,IAAI,EAAE,sBAAsB;AAC/B,SAAA;QACD,IAAI,EAAE,kBAAkB,CAAC,QAAQ;QACjC,MAAM,EAAE,kBAAkB,CAAC,UAAU;QACrC,SAAS,EAAE,kBAAkB,CAAC,gBAAgB;QAC9C,WAAW,EAAE,kBAAkB,CAAC,qBAAqB;KACxD,CAAA;AACL;;;;"}