@pallasoft/ps-mobile-components 1.12.0 → 1.13.1

package/dist/components/ps-sortable-grid/ps-sortable-item-props.d.ts

@@ -16,7 +16,7 @@ export interface PsSortableItemProps {
     label: string;
     labels: PsSortableGridLabels;
     onEnd: () => void;
-    onMeasure: (id: string, height: number, renderedExtra: number) => void;
+    onMeasure: (id: string, height: number, fill: number) => void;
     onMove: (id: string, delta: number) => void;
     onStart: (id: string, absoluteY: number) => void;
     onUpdate: (translationX: number, translationY: number, absoluteY: number) => void;

package/dist/components/ps-sortable-grid/ps-sortable-item.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { View } from 'react-native';
 import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { PsSortableGridConfig } from '../../constants/ps-sortable-grid-config';
@@ -11,6 +12,13 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
     const top = useSharedValue(rect.y);
     const scale = useSharedValue(1);
     const wasActive = useRef(false);
+    const laidOut = useRef({ fill: 0, total: null });
+    const fill = isReady ? extra : 0;
+    const report = useCallback(() => {
+        const { fill: laidOutFill, total } = laidOut.current;
+        if (total !== null)
+            onMeasure(id, total, laidOutFill);
+    }, [id, onMeasure]);
     useEffect(() => {
         if (isActive) {
             wasActive.current = true;
@@ -49,12 +57,15 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
         top: isActive ? dragY.value : top.value,
         transform: [{ scale: scale.value }],
     }));
-    return (_jsx(GestureDetector, { gesture: pan, children: _jsx(Animated.View, { accessibilityActions: isDisabled
+    return (_jsx(GestureDetector, { gesture: pan, children: _jsxs(Animated.View, { accessibilityActions: isDisabled
                 ? undefined
                 : [
                     ...(canMoveUp ? [{ label: labels.moveUp, name: 'moveUp' }] : []),
                     ...(canMoveDown ? [{ label: labels.moveDown, name: 'moveDown' }] : []),
-                ], accessibilityLabel: label, accessible: !isDisabled, collapsable: false, onAccessibilityAction: (event) => onMove(id, event.nativeEvent.actionName === 'moveUp' ? -1 : 1), onLayout: (event) => onMeasure(id, event.nativeEvent.layout.height, isReady ? extra : 0), style: [
+                ], accessibilityLabel: label, accessible: !isDisabled, collapsable: false, onAccessibilityAction: (event) => onMove(id, event.nativeEvent.actionName === 'moveUp' ? -1 : 1), onLayout: (event) => {
+                laidOut.current.total = event.nativeEvent.layout.height;
+                report();
+            }, style: [
                 {
                     borderRadius: PsSortableGridConfig.radius,
                     opacity: isReady ? 1 : 0,
@@ -71,5 +82,8 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
                     }
                     : undefined,
                 animatedStyle,
-            ], children: _jsx(PsWidgetFillContext.Provider, { value: isReady ? extra : 0, children: children }) }) }));
+            ], children: [_jsx(View, { onLayout: (event) => {
+                        laidOut.current.fill = event.nativeEvent.layout.height;
+                        report();
+                    }, pointerEvents: 'none', style: { height: fill, left: 0, position: 'absolute', top: 0, width: 0 }, testID: PsSortableGridConfig.fillTestId }), _jsx(PsWidgetFillContext.Provider, { value: fill, children: children })] }) }));
 };

package/dist/components/ps-widget-list/ps-widget-grid.js

@@ -1,10 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from 'react';
+import { Children, useState } from 'react';
 import { View } from 'react-native';
 import { PsChartConfig } from '../../constants/ps-chart-config';
-export const PsWidgetGrid = ({ children }) => (_jsx(View, { style: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: PsChartConfig.kpiGap,
-        justifyContent: 'space-between',
-    }, children: Children.toArray(children).map((child, index) => (_jsx(View, { style: { flexBasis: '47.5%', flexGrow: 0, flexShrink: 1 }, children: child }, index))) }));
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
+import { PsLayoutService } from '../../services/ps-layout-service';
+export const PsWidgetGrid = ({ children }) => {
+    const layoutClass = usePsLayoutClass();
+    const [width, setWidth] = useState(0);
+    const itemWidth = PsLayoutService.widgetWidth(width, layoutClass, PsChartConfig.kpiGap);
+    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: PsChartConfig.kpiGap,
+            justifyContent: itemWidth === undefined ? 'space-between' : 'flex-start',
+        }, children: Children.toArray(children).map((child, index) => (_jsx(View, { style: itemWidth === undefined
+                ? { flexBasis: PsLayoutService.widgetBasis(layoutClass), flexGrow: 0, flexShrink: 1 }
+                : { flexGrow: 0, flexShrink: 0, width: itemWidth }, children: child }, index))) }));
+};

package/dist/components/ps-widget-list/ps-widget-list-props.d.ts

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { PsContentWidth } from '../../constants/ps-content-width';
 export interface PsWidgetListProps {
     children: ReactNode;
+    contentWidth?: PsContentWidth;
     onRefresh?: () => Promise<void>;
     style?: StyleProp<ViewStyle>;
 }

package/dist/components/ps-widget-list/ps-widget-list.d.ts

@@ -1,2 +1,2 @@
 import type { PsWidgetListProps } from './ps-widget-list-props';
-export declare const PsWidgetList: ({ children, onRefresh, style }: PsWidgetListProps) => import("react").JSX.Element;
+export declare const PsWidgetList: ({ children, contentWidth, onRefresh, style, }: PsWidgetListProps) => import("react").JSX.Element;

package/dist/components/ps-widget-list/ps-widget-list.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RefreshControl, ScrollView } from 'react-native';
+import { PsContentWidth } from '../../constants/ps-content-width';
 import { PsListConfig } from '../../constants/ps-list-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { usePsRefresh } from '../../hooks/use-ps-refresh';
-export const PsWidgetList = ({ children, onRefresh, style }) => {
+import { PsLayoutService } from '../../services/ps-layout-service';
+export const PsWidgetList = ({ children, contentWidth = PsContentWidth.wide, onRefresh, style, }) => {
+    const layoutClass = usePsLayoutClass();
     const theme = usePsMobileTheme();
     const { isRefreshing, refresh } = usePsRefresh(onRefresh);
-    return (_jsx(ScrollView, { contentContainerStyle: {
-            gap: PsMobileControlConfig.rowSpacing,
-            padding: PsListConfig.contentInset,
-        }, contentInsetAdjustmentBehavior: 'automatic', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], progressBackgroundColor: theme.surface, onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), style: [{ backgroundColor: theme.background, flex: 1 }, style], children: children }));
+    return (_jsx(ScrollView, { contentContainerStyle: [
+            {
+                gap: PsMobileControlConfig.rowSpacing,
+                padding: PsListConfig.contentInset,
+            },
+            PsLayoutService.frame(layoutClass, contentWidth),
+        ], contentInsetAdjustmentBehavior: 'automatic', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], progressBackgroundColor: theme.surface, onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), style: [{ backgroundColor: theme.background, flex: 1 }, style], children: children }));
 };

package/dist/constants/ps-chart-bar-corner.d.ts

@@ -0,0 +1,6 @@
+export declare const PsChartBarCorner: {
+    readonly Both: "both";
+    readonly None: "none";
+    readonly Value: "value";
+};
+export type PsChartBarCorner = (typeof PsChartBarCorner)[keyof typeof PsChartBarCorner];

package/dist/constants/ps-chart-bar-corner.js

@@ -0,0 +1,5 @@
+export const PsChartBarCorner = {
+    Both: 'both',
+    None: 'none',
+    Value: 'value',
+};

package/dist/constants/ps-chart-config.d.ts

@@ -6,6 +6,7 @@ export declare const PsChartConfig: {
     readonly axisTickGap: 6;
     readonly barGapRatio: 0.3;
     readonly barRadius: 4;
+    readonly barRadiusWidthRatio: number;
     readonly charWidthRatio: 0.62;
     readonly compactBarGapRatio: 0.15;
     readonly compactSlot: 24;
@@ -18,9 +19,11 @@ export declare const PsChartConfig: {
     readonly donutCenterFontMax: 18;
     readonly donutCenterFontMin: 11;
     readonly donutCenterPadding: 8;
+    readonly donutDimmedOpacity: 0.4;
     readonly donutGap: 16;
     readonly donutMinLegendWidth: 120;
-    readonly donutSliceGap: 2;
+    readonly donutRevealOverlap: 2;
+    readonly donutSliceGap: 3;
     readonly drawMs: 700;
     readonly ellipsis: "…";
     readonly gridLineCount: 3;

package/dist/constants/ps-chart-config.js

@@ -6,6 +6,7 @@ export const PsChartConfig = {
     axisTickGap: 6,
     barGapRatio: 0.3,
     barRadius: 4,
+    barRadiusWidthRatio: 1 / 3,
     charWidthRatio: 0.62,
     compactBarGapRatio: 0.15,
     compactSlot: 24,
@@ -18,9 +19,11 @@ export const PsChartConfig = {
     donutCenterFontMax: 18,
     donutCenterFontMin: 11,
     donutCenterPadding: 8,
+    donutDimmedOpacity: 0.4,
     donutGap: 16,
     donutMinLegendWidth: 120,
-    donutSliceGap: 2,
+    donutRevealOverlap: 2,
+    donutSliceGap: 3,
     drawMs: 700,
     ellipsis: '…',
     gridLineCount: 3,

package/dist/constants/ps-content-width.d.ts

@@ -0,0 +1,6 @@
+export declare const PsContentWidth: {
+    readonly full: "full";
+    readonly readable: "readable";
+    readonly wide: "wide";
+};
+export type PsContentWidth = (typeof PsContentWidth)[keyof typeof PsContentWidth];

package/dist/constants/ps-content-width.js

@@ -0,0 +1,5 @@
+export const PsContentWidth = {
+    full: 'full',
+    readable: 'readable',
+    wide: 'wide',
+};

package/dist/constants/ps-document-search-config.d.ts

@@ -2,7 +2,6 @@ export declare const PsDocumentSearchConfig: {
     readonly activeAlpha: 0.9;
     readonly androidFieldRadius: 999;
     readonly barGap: 8;
-    readonly combiningMarkPattern: RegExp;
     readonly currentToken: "{current}";
     readonly fieldAlpha: 0.14;
     readonly fieldPaddingX: 12;
@@ -13,7 +12,5 @@ export declare const PsDocumentSearchConfig: {
     readonly rotateDown: "0deg";
     readonly rotateUp: "180deg";
     readonly scrollMargin: 48;
-    readonly termSeparatorPattern: RegExp;
     readonly totalToken: "{total}";
-    readonly wordSeparator: " ";
 };

package/dist/constants/ps-document-search-config.js

@@ -2,7 +2,6 @@ export const PsDocumentSearchConfig = {
     activeAlpha: 0.9,
     androidFieldRadius: 999,
     barGap: 8,
-    combiningMarkPattern: /\p{M}/gu,
     currentToken: '{current}',
     fieldAlpha: 0.14,
     fieldPaddingX: 12,
@@ -13,7 +12,5 @@ export const PsDocumentSearchConfig = {
     rotateDown: '0deg',
     rotateUp: '180deg',
     scrollMargin: 48,
-    termSeparatorPattern: /\s+/u,
     totalToken: '{total}',
-    wordSeparator: ' ',
 };

package/dist/constants/ps-layout-class-config.d.ts

@@ -0,0 +1,12 @@
+export declare const PsLayoutClassConfig: {
+    readonly compactGridUnits: 2;
+    readonly compactWidgetBasis: "47.5%";
+    readonly formSheetMaxHeightFraction: 0.8;
+    readonly formSheetWidth: 540;
+    readonly readableMaxWidth: 768;
+    readonly regularGridUnits: 4;
+    readonly regularMinHeight: 480;
+    readonly regularMinWidth: 600;
+    readonly regularWidgetBasis: "23%";
+    readonly wideMaxWidth: 1180;
+};

package/dist/constants/ps-layout-class-config.js

@@ -0,0 +1,12 @@
+export const PsLayoutClassConfig = {
+    compactGridUnits: 2,
+    compactWidgetBasis: '47.5%',
+    formSheetMaxHeightFraction: 0.8,
+    formSheetWidth: 540,
+    readableMaxWidth: 768,
+    regularGridUnits: 4,
+    regularMinHeight: 480,
+    regularMinWidth: 600,
+    regularWidgetBasis: '23%',
+    wideMaxWidth: 1180,
+};

package/dist/constants/ps-layout-class.d.ts

@@ -0,0 +1,5 @@
+export declare const PsLayoutClass: {
+    readonly compact: "compact";
+    readonly regular: "regular";
+};
+export type PsLayoutClass = (typeof PsLayoutClass)[keyof typeof PsLayoutClass];

package/dist/constants/ps-layout-class.js

@@ -0,0 +1,4 @@
+export const PsLayoutClass = {
+    compact: 'compact',
+    regular: 'regular',
+};

package/dist/constants/ps-menu-popup-config.d.ts

@@ -5,6 +5,7 @@ export declare const PsMenuPopupConfig: {
     readonly minWidth: 168;
     readonly paddingVertical: 8;
     readonly radius: 12;
+    readonly remeasureMs: 250;
     readonly rowHeight: 48;
     readonly rowPaddingHorizontal: 16;
 };

package/dist/constants/ps-menu-popup-config.js

@@ -5,6 +5,7 @@ export const PsMenuPopupConfig = {
     minWidth: 168,
     paddingVertical: 8,
     radius: 12,
+    remeasureMs: 250,
     rowHeight: 48,
     rowPaddingHorizontal: 16,
 };

package/dist/constants/ps-orientation-config.d.ts

@@ -0,0 +1,3 @@
+export declare const PsOrientationConfig: {
+    readonly all: readonly ["portrait", "portrait-upside-down", "landscape", "landscape-left", "landscape-right"];
+};

package/dist/constants/ps-orientation-config.js

@@ -0,0 +1,3 @@
+export const PsOrientationConfig = {
+    all: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'],
+};

package/dist/constants/ps-sheet-config.d.ts

@@ -2,6 +2,7 @@ export declare const PsSheetConfig: {
     readonly actionMinWidth: 44;
     readonly actionSpinnerGap: 6;
     readonly cornerRadius: 20;
+    readonly formSizingMinIos: 18;
     readonly headerMinHeight: 64;
     readonly headerPaddingBottom: 12;
     readonly headerPaddingHorizontal: 16;

package/dist/constants/ps-sheet-config.js

@@ -2,6 +2,7 @@ export const PsSheetConfig = {
     actionMinWidth: 44,
     actionSpinnerGap: 6,
     cornerRadius: 20,
+    formSizingMinIos: 18,
     headerMinHeight: 64,
     headerPaddingBottom: 12,
     headerPaddingHorizontal: 16,

package/dist/constants/ps-sortable-grid-config.d.ts

@@ -2,7 +2,10 @@ export declare const PsSortableGridConfig: {
     readonly activeScale: 1.03;
     readonly activeZIndex: 10;
     readonly columnGap: 12;
+    readonly compactUnits: 2;
     readonly edgeRatio: 0.14;
+    readonly fillTestId: "ps-sortable-fill";
+    readonly fullUnits: 2;
     readonly holdTolerance: 8;
     readonly longPressMs: 400;
     readonly maxScrollStep: 18;
@@ -15,4 +18,5 @@ export declare const PsSortableGridConfig: {
     readonly scaleMs: 140;
     readonly scrollRamp: 0.25;
     readonly scrollTickMs: 16;
+    readonly testId: "ps-sortable-grid";
 };

package/dist/constants/ps-sortable-grid-config.js

@@ -4,7 +4,10 @@ export const PsSortableGridConfig = {
     activeScale: 1.03,
     activeZIndex: 10,
     columnGap: PsChartConfig.kpiGap,
+    compactUnits: 2,
     edgeRatio: 0.14,
+    fillTestId: 'ps-sortable-fill',
+    fullUnits: 2,
     holdTolerance: 8,
     longPressMs: 400,
     maxScrollStep: 18,
@@ -17,4 +20,5 @@ export const PsSortableGridConfig = {
     scaleMs: 140,
     scrollRamp: 0.25,
     scrollTickMs: 16,
+    testId: 'ps-sortable-grid',
 };

package/dist/hooks/use-ps-layout-class.d.ts

@@ -0,0 +1,2 @@
+import type { PsLayoutClass } from '../constants/ps-layout-class';
+export declare const usePsLayoutClass: () => PsLayoutClass;

package/dist/hooks/use-ps-layout-class.js

@@ -0,0 +1,6 @@
+import { useWindowDimensions } from 'react-native';
+import { PsLayoutService } from '../services/ps-layout-service';
+export const usePsLayoutClass = () => {
+    const { height, width } = useWindowDimensions();
+    return PsLayoutService.classOf(width, height);
+};

package/dist/hooks/use-ps-menu-anchor.d.ts

@@ -1,5 +1,5 @@
 import { type ElementRef, type RefObject } from 'react';
-import type { View } from 'react-native';
+import { type View } from 'react-native';
 import type { PsMenuAnchor } from '../interfaces/ps-menu-anchor';
 export interface PsMenuAnchorResult {
     anchor: PsMenuAnchor | undefined;

package/dist/hooks/use-ps-menu-anchor.js

@@ -1,12 +1,24 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { PsMenuPopupConfig } from '../constants/ps-menu-popup-config';
 export const usePsMenuAnchor = () => {
     const ref = useRef(null);
     const [anchor, setAnchor] = useState(undefined);
+    const { height, width } = useWindowDimensions();
+    const isOpen = anchor !== undefined;
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const timer = setTimeout(() => {
+            ref.current?.measureInWindow((x, y, anchorWidth, anchorHeight) => setAnchor({ height: anchorHeight, width: anchorWidth, x, y }));
+        }, PsMenuPopupConfig.remeasureMs);
+        return () => clearTimeout(timer);
+    }, [height, isOpen, width]);
     return {
         anchor,
         close: () => setAnchor(undefined),
         open: () => {
-            ref.current?.measureInWindow((x, y, width, height) => setAnchor({ height, width, x, y }));
+            ref.current?.measureInWindow((x, y, anchorWidth, anchorHeight) => setAnchor({ height: anchorHeight, width: anchorWidth, x, y }));
         },
         ref,
     };

package/dist/index.d.ts

@@ -194,3 +194,7 @@ export * from './interfaces/ps-infinite-data-result';
 export * from './interfaces/ps-infinite-data-update';
 export * from './interfaces/ps-infinite-page';
 export { usePsDebouncedValue } from '@pallasoft/ps-utilities/react';
+export * from './constants/ps-layout-class';
+export * from './constants/ps-content-width';
+export * from './hooks/use-ps-layout-class';
+export { PsLayoutService } from './services/ps-layout-service';

package/dist/index.js

@@ -189,3 +189,7 @@ export * from './interfaces/ps-infinite-data-result';
 export * from './interfaces/ps-infinite-data-update';
 export * from './interfaces/ps-infinite-page';
 export { usePsDebouncedValue } from '@pallasoft/ps-utilities/react';
+export * from './constants/ps-layout-class';
+export * from './constants/ps-content-width';
+export * from './hooks/use-ps-layout-class';
+export { PsLayoutService } from './services/ps-layout-service';

package/dist/interfaces/ps-chart-arc-data.d.ts

@@ -0,0 +1,9 @@
+export interface PsChartArcData {
+    centre: number;
+    end: number;
+    gap: number;
+    inner: number;
+    outer: number;
+    radius: number;
+    start: number;
+}

package/dist/interfaces/ps-chart-arc-data.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-chart-bar-rect.d.ts

@@ -1,5 +1,7 @@
+import type { PsChartBarCorner } from '../constants/ps-chart-bar-corner';
 export interface PsChartBarRect {
     color: string;
+    corner: PsChartBarCorner;
     height: number;
     id: string;
     isNegative: boolean;

package/dist/interfaces/ps-document-search-match.d.ts

@@ -1,4 +1,2 @@
-export interface PsDocumentSearchMatch {
-    end: number;
-    start: number;
-}
+import type { TextMatch } from '@pallasoft/ps-utilities';
+export type PsDocumentSearchMatch = TextMatch;

package/dist/interfaces/ps-document-text-box.d.ts

@@ -1,6 +1,2 @@
-export interface PsDocumentTextBox {
-    height: number;
-    left: number;
-    top: number;
-    width: number;
-}
+import type { TextLayerBox } from '@pallasoft/ps-utilities';
+export type PsDocumentTextBox = TextLayerBox;

package/dist/interfaces/ps-document-text-layer-word.d.ts

@@ -1,5 +1,2 @@
-import type { PsDocumentTextBox } from './ps-document-text-box';
-export interface PsDocumentTextLayerWord {
-    box: PsDocumentTextBox;
-    text: string;
-}
+import type { TextLayerWord } from '@pallasoft/ps-utilities';
+export type PsDocumentTextLayerWord = TextLayerWord;

package/dist/interfaces/ps-document-text-layer.d.ts

@@ -1,6 +1,2 @@
-import type { PsDocumentTextLayerWord } from './ps-document-text-layer-word';
-export interface PsDocumentTextLayer {
-    height: number;
-    width: number;
-    words: PsDocumentTextLayerWord[];
-}
+import type { TextLayer } from '@pallasoft/ps-utilities';
+export type PsDocumentTextLayer = TextLayer;

package/dist/interfaces/ps-document-text-segment.d.ts

@@ -1,4 +1,2 @@
-export interface PsDocumentTextSegment {
-    matchIndex: number | null;
-    text: string;
-}
+import type { TextSegment } from '@pallasoft/ps-utilities';
+export type PsDocumentTextSegment = TextSegment;

package/dist/interfaces/ps-donut-slice-data.d.ts

@@ -1,7 +1,5 @@
 export interface PsDonutSliceData {
     color: string;
-    dashLength: number;
-    dashOffset: number;
     id: string;
-    start: number;
+    path: string;
 }

package/dist/interfaces/ps-menu-popup-insets.d.ts

@@ -1,4 +1,6 @@
 export interface PsMenuPopupInsets {
     bottom: number;
+    left: number;
+    right: number;
     top: number;
 }

package/dist/interfaces/ps-menu-popup-layout.d.ts

@@ -2,6 +2,7 @@ export interface PsMenuPopupLayout {
     isBelow: boolean;
     left: number;
     maxHeight: number;
+    maxWidth: number;
     top: number;
     width: number | undefined;
 }

package/dist/interfaces/ps-sortable-measure-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsSortableMeasureData {
+    fill: number;
+    total: number | null;
+}

package/dist/interfaces/ps-sortable-measure-data.js

@@ -0,0 +1 @@
+export {};

package/dist/services/ps-chart-arc-service.d.ts

@@ -0,0 +1,14 @@
+import type { PsChartArcData } from '../interfaces/ps-chart-arc-data';
+export declare class PsChartArcService {
+    static sector(arc: PsChartArcData): string;
+    static ring(centre: number, inner: number, outer: number): string;
+    static minimumAngle(gap: number, radius: number, inner: number): number;
+    private static largeFlag;
+    private static angleOf;
+    private static cornerRadius;
+    private static corner;
+    private static edge;
+    private static at;
+    private static scale;
+    private static text;
+}

package/dist/services/ps-chart-arc-service.js

@@ -0,0 +1,83 @@
+export class PsChartArcService {
+    static sector(arc) {
+        const half = arc.gap / 2;
+        const radius = PsChartArcService.cornerRadius(arc);
+        const outerStart = PsChartArcService.corner(arc, arc.start, 1, arc.outer - radius, radius, half);
+        const outerEnd = PsChartArcService.corner(arc, arc.end, -1, arc.outer - radius, radius, half);
+        const innerEnd = PsChartArcService.corner(arc, arc.end, -1, arc.inner + radius, radius, half);
+        const innerStart = PsChartArcService.corner(arc, arc.start, 1, arc.inner + radius, radius, half);
+        const outerStartRim = PsChartArcService.scale(arc, outerStart, arc.outer / (arc.outer - radius));
+        const outerEndRim = PsChartArcService.scale(arc, outerEnd, arc.outer / (arc.outer - radius));
+        const innerEndRim = PsChartArcService.scale(arc, innerEnd, arc.inner / (arc.inner + radius));
+        const innerStartRim = PsChartArcService.scale(arc, innerStart, arc.inner / (arc.inner + radius));
+        const startOuterEdge = PsChartArcService.edge(arc, arc.start, 1, outerStart, half);
+        const endOuterEdge = PsChartArcService.edge(arc, arc.end, -1, outerEnd, half);
+        const endInnerEdge = PsChartArcService.edge(arc, arc.end, -1, innerEnd, half);
+        const startInnerEdge = PsChartArcService.edge(arc, arc.start, 1, innerStart, half);
+        return [
+            `M${PsChartArcService.text(startOuterEdge)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(outerStartRim)}`,
+            `A${arc.outer} ${arc.outer} 0 ${PsChartArcService.largeFlag(arc, outerStartRim, outerEndRim)} 1 ${PsChartArcService.text(outerEndRim)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(endOuterEdge)}`,
+            `L${PsChartArcService.text(endInnerEdge)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(innerEndRim)}`,
+            `A${arc.inner} ${arc.inner} 0 ${PsChartArcService.largeFlag(arc, innerStartRim, innerEndRim)} 0 ${PsChartArcService.text(innerStartRim)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(startInnerEdge)}`,
+            'Z',
+        ].join(' ');
+    }
+    static ring(centre, inner, outer) {
+        return [
+            `M${centre} ${centre - outer}`,
+            `A${outer} ${outer} 0 1 1 ${centre} ${centre + outer}`,
+            `A${outer} ${outer} 0 1 1 ${centre} ${centre - outer}`,
+            `M${centre} ${centre - inner}`,
+            `A${inner} ${inner} 0 1 0 ${centre} ${centre + inner}`,
+            `A${inner} ${inner} 0 1 0 ${centre} ${centre - inner}`,
+            'Z',
+        ].join(' ');
+    }
+    static minimumAngle(gap, radius, inner) {
+        return inner > 0 ? (gap + 2 * radius + 1) / inner : 0;
+    }
+    static largeFlag(arc, from, to) {
+        const turn = 2 * Math.PI;
+        const span = (((PsChartArcService.angleOf(arc, to) - PsChartArcService.angleOf(arc, from)) % turn) +
+            turn) %
+            turn;
+        return span > Math.PI ? 1 : 0;
+    }
+    static angleOf(arc, point) {
+        return Math.atan2(point.x - arc.centre, arc.centre - point.y);
+    }
+    static cornerRadius(arc) {
+        const room = ((arc.end - arc.start) * arc.inner - arc.gap) / 2;
+        return Math.max(0, Math.min(arc.radius, (arc.outer - arc.inner) / 2, room));
+    }
+    static corner(arc, angle, side, distance, radius, half) {
+        const offset = half + radius;
+        const along = Math.sqrt(Math.max(distance * distance - offset * offset, 0));
+        return PsChartArcService.at(arc, angle, side, along, offset);
+    }
+    static edge(arc, angle, side, centre, half) {
+        const dx = centre.x - arc.centre;
+        const dy = centre.y - arc.centre;
+        const along = dx * Math.sin(angle) - dy * Math.cos(angle);
+        return PsChartArcService.at(arc, angle, side, along, half);
+    }
+    static at(arc, angle, side, along, across) {
+        return {
+            x: arc.centre + along * Math.sin(angle) + side * across * Math.cos(angle),
+            y: arc.centre - along * Math.cos(angle) + side * across * Math.sin(angle),
+        };
+    }
+    static scale(arc, point, ratio) {
+        return {
+            x: arc.centre + (point.x - arc.centre) * ratio,
+            y: arc.centre + (point.y - arc.centre) * ratio,
+        };
+    }
+    static text(point) {
+        return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+    }
+}