@pallasoft/ps-input-components 1.18.1 → 1.19.0

package/dist/components/ps-calendar-header.d.ts

@@ -4,6 +4,8 @@ export interface PsCalendarHeaderProps extends ReactDatePickerCustomHeaderProps
     maxDate?: Date;
     minDate?: Date;
     onViewChange: (view: PsCalendarView) => void;
+    onYearPick?: (year: number) => void;
+    selectedYear?: number;
     view: PsCalendarView;
 }
-export declare const PsCalendarHeader: ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, prevMonthButtonDisabled, view, }: PsCalendarHeaderProps) => import("react").JSX.Element;
+export declare const PsCalendarHeader: ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, onYearPick, prevMonthButtonDisabled, selectedYear, view, }: PsCalendarHeaderProps) => import("react").JSX.Element;

package/dist/components/ps-calendar-header.js

@@ -12,8 +12,8 @@ const navigationButtonClassName = 'ps-focus-ring flex h-8 w-8 items-center justi
 const titleButtonClassName = 'ps-focus-ring flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-semibold text-ink transition-colors hover:bg-primary/10';
 const cellClassName = 'ps-focus-ring flex h-10 items-center justify-center rounded-[0.625rem] text-sm font-medium text-ink transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent';
 const selectedCellClassName = 'bg-primary font-bold text-[var(--ps-color-primary-contrast)] hover:bg-primary';
-const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, prevMonthButtonDisabled, view, }) => {
-    const year = monthDate.getFullYear();
+const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, onYearPick, prevMonthButtonDisabled, selectedYear, view, }) => {
+    const year = selectedYear === undefined ? monthDate.getFullYear() : selectedYear;
     const [pageYear, setPageYear] = (0, react_1.useState)(year);
     const years = ps_date_input_service_1.PsDateInputService.yearPage(pageYear);
     const navigation = {
@@ -51,13 +51,17 @@ const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMont
             titleView: ps_calendar_view_1.PsCalendarView.day,
         },
     }[view];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center justify-between gap-2 px-1', children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": navigation.previousLabel, className: navigationButtonClassName, disabled: navigation.isPreviousDisabled, onClick: navigation.previous, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: ps_icons_1.PsIconKey.ChevronRight }) }), (0, jsx_runtime_1.jsxs)("button", { "aria-label": navigation.titleLabel, "aria-live": 'polite', className: titleButtonClassName, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center justify-between gap-2 px-1', children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": navigation.previousLabel, className: navigationButtonClassName, disabled: navigation.isPreviousDisabled, onClick: navigation.previous, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: ps_icons_1.PsIconKey.ChevronRight }) }), onYearPick === undefined ? ((0, jsx_runtime_1.jsxs)("button", { "aria-label": navigation.titleLabel, "aria-live": 'polite', className: titleButtonClassName, onClick: () => {
                             setPageYear(year);
                             onViewChange(navigation.titleView);
-                        }, type: 'button', children: [navigation.title, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 rotate-90 text-ink/50', iconKey: ps_icons_1.PsIconKey.ChevronRight })] }), (0, jsx_runtime_1.jsx)("button", { "aria-label": navigation.nextLabel, className: navigationButtonClassName, disabled: navigation.isNextDisabled, onClick: navigation.next, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })] }), view === ps_calendar_view_1.PsCalendarView.month ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid grid-cols-3 gap-1', children: ps_date_input_service_1.PsDateInputService.monthNames().map((name, month) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(cellClassName, month === monthDate.getMonth() ? selectedCellClassName : undefined), disabled: ps_date_input_service_1.PsDateInputService.isMonthOutOfRange(year, month, minDate, maxDate), onClick: () => {
+                        }, type: 'button', children: [navigation.title, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 rotate-90 text-ink/50', iconKey: ps_icons_1.PsIconKey.ChevronRight })] })) : ((0, jsx_runtime_1.jsx)("p", { "aria-live": 'polite', className: 'text-sm font-semibold text-ink', children: navigation.title })), (0, jsx_runtime_1.jsx)("button", { "aria-label": navigation.nextLabel, className: navigationButtonClassName, disabled: navigation.isNextDisabled, onClick: navigation.next, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })] }), view === ps_calendar_view_1.PsCalendarView.month ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid grid-cols-3 gap-1', children: ps_date_input_service_1.PsDateInputService.monthNames().map((name, month) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(cellClassName, month === monthDate.getMonth() ? selectedCellClassName : undefined), disabled: ps_date_input_service_1.PsDateInputService.isMonthOutOfRange(year, month, minDate, maxDate), onClick: () => {
                         changeMonth(month);
                         onViewChange(ps_calendar_view_1.PsCalendarView.day);
                     }, type: 'button', children: name }, name))) })) : null, view === ps_calendar_view_1.PsCalendarView.year ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid grid-cols-3 gap-1', children: years.map((candidate) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(cellClassName, candidate === year ? selectedCellClassName : undefined), disabled: ps_date_input_service_1.PsDateInputService.isYearOutOfRange(candidate, minDate, maxDate), onClick: () => {
+                        if (onYearPick !== undefined) {
+                            onYearPick(candidate);
+                            return;
+                        }
                         changeYear(candidate);
                         onViewChange(ps_calendar_view_1.PsCalendarView.month);
                     }, type: 'button', children: candidate }, candidate))) })) : null] }));

package/dist/components/ps-currency-input.d.ts

@@ -0,0 +1,6 @@
+import { type PsSelectInputProps } from './ps-select-input';
+export interface PsCurrencyInputProps extends Omit<PsSelectInputProps, 'options'> {
+    currencies: string[];
+    locale?: string;
+}
+export declare const PsCurrencyInput: ({ currencies, locale, ...props }: PsCurrencyInputProps) => import("react").JSX.Element;

package/dist/components/ps-currency-input.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCurrencyInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_currency_input_service_1 = require("../services/ps-currency-input-service");
+const ps_select_input_1 = require("./ps-select-input");
+const PsCurrencyInput = ({ currencies, locale, ...props }) => ((0, jsx_runtime_1.jsx)(ps_select_input_1.PsSelectInput, { ...props, options: ps_currency_input_service_1.PsCurrencyInputService.options(currencies, locale) }));
+exports.PsCurrencyInput = PsCurrencyInput;

package/dist/components/ps-year-input.js

@@ -10,9 +10,11 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_datepicker_1 = __importDefault(require("react-datepicker"));
+const ps_calendar_view_1 = require("../constants/ps-calendar-view");
 const ps_date_input_config_1 = require("../constants/ps-date-input-config");
 const ps_year_input_config_1 = require("../constants/ps-year-input-config");
 const ps_year_input_service_1 = require("../services/ps-year-input-service");
+const ps_calendar_header_1 = require("./ps-calendar-header");
 const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
 const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, maxYear, minYear, name, onChange, placeholder = ps_year_input_config_1.PsYearInputConfig.placeholder, required, value, }) => {
@@ -23,6 +25,10 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? '' : defaultValue);
     const currentValue = value === undefined ? uncontrolledValue : value;
+    const pickerRef = (0, react_1.useRef)(null);
+    const selected = ps_year_input_service_1.PsYearInputService.parse(currentValue);
+    const minDate = ps_year_input_service_1.PsYearInputService.bound(minYear);
+    const maxDate = ps_year_input_service_1.PsYearInputService.bound(maxYear);
     (0, react_1.useEffect)(() => {
         const existing = document.getElementById(portalId);
         const container = existing ? existing : document.createElement('div');
@@ -40,6 +46,9 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsxs)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: 'ps-floating-panel ps-datepicker', className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: ps_year_input_config_1.PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: ps_year_input_service_1.PsYearInputService.bound(maxYear), minDate: ps_year_input_service_1.PsYearInputService.bound(minYear), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, required: required, selected: ps_year_input_service_1.PsYearInputService.parse(currentValue), showPopperArrow: false, showYearPicker: true, wrapperClassName: 'block w-full', yearItemNumber: ps_year_input_config_1.PsYearInputConfig.yearsPerPage }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsxs)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${ps_date_input_config_1.PsDateInputConfig.pickingClassName}`, className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: ps_year_input_config_1.PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, ref: pickerRef, renderCustomHeader: (headerProps) => ((0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: () => undefined, onYearPick: (year) => {
+                                handleChange(new Date(year, 0, 1));
+                                pickerRef.current?.setOpen(false);
+                            }, selectedYear: selected === null ? undefined : selected.getFullYear(), view: ps_calendar_view_1.PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: 'block w-full' }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };
 exports.PsYearInput = PsYearInput;

package/dist/constants/ps-currency-input-config.d.ts

@@ -0,0 +1,5 @@
+export declare const PsCurrencyInputConfig: {
+    readonly locale: "en";
+    readonly separator: " · ";
+    readonly displayType: "currency";
+};

package/dist/constants/ps-currency-input-config.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCurrencyInputConfig = void 0;
+exports.PsCurrencyInputConfig = {
+    locale: 'en',
+    separator: ' · ',
+    displayType: 'currency',
+};

package/dist/constants/ps-year-input-config.d.ts

@@ -1,5 +1,4 @@
 export declare const PsYearInputConfig: {
     readonly format: "yyyy";
     readonly placeholder: "Select a year";
-    readonly yearsPerPage: 12;
 };

package/dist/constants/ps-year-input-config.js

@@ -4,5 +4,4 @@ exports.PsYearInputConfig = void 0;
 exports.PsYearInputConfig = {
     format: 'yyyy',
     placeholder: 'Select a year',
-    yearsPerPage: 12,
 };

package/dist/esm/components/ps-calendar-header.js

@@ -9,8 +9,8 @@ const navigationButtonClassName = 'ps-focus-ring flex h-8 w-8 items-center justi
 const titleButtonClassName = 'ps-focus-ring flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-semibold text-ink transition-colors hover:bg-primary/10';
 const cellClassName = 'ps-focus-ring flex h-10 items-center justify-center rounded-[0.625rem] text-sm font-medium text-ink transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent';
 const selectedCellClassName = 'bg-primary font-bold text-[var(--ps-color-primary-contrast)] hover:bg-primary';
-export const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, prevMonthButtonDisabled, view, }) => {
-    const year = monthDate.getFullYear();
+export const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, onYearPick, prevMonthButtonDisabled, selectedYear, view, }) => {
+    const year = selectedYear === undefined ? monthDate.getFullYear() : selectedYear;
     const [pageYear, setPageYear] = useState(year);
     const years = PsDateInputService.yearPage(pageYear);
     const navigation = {
@@ -48,13 +48,17 @@ export const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, incre
             titleView: PsCalendarView.day,
         },
     }[view];
-    return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs("div", { className: 'flex items-center justify-between gap-2 px-1', children: [_jsx("button", { "aria-label": navigation.previousLabel, className: navigationButtonClassName, disabled: navigation.isPreviousDisabled, onClick: navigation.previous, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: PsIconKey.ChevronRight }) }), _jsxs("button", { "aria-label": navigation.titleLabel, "aria-live": 'polite', className: titleButtonClassName, onClick: () => {
+    return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs("div", { className: 'flex items-center justify-between gap-2 px-1', children: [_jsx("button", { "aria-label": navigation.previousLabel, className: navigationButtonClassName, disabled: navigation.isPreviousDisabled, onClick: navigation.previous, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: PsIconKey.ChevronRight }) }), onYearPick === undefined ? (_jsxs("button", { "aria-label": navigation.titleLabel, "aria-live": 'polite', className: titleButtonClassName, onClick: () => {
                             setPageYear(year);
                             onViewChange(navigation.titleView);
-                        }, type: 'button', children: [navigation.title, _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 rotate-90 text-ink/50', iconKey: PsIconKey.ChevronRight })] }), _jsx("button", { "aria-label": navigation.nextLabel, className: navigationButtonClassName, disabled: navigation.isNextDisabled, onClick: navigation.next, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.ChevronRight }) })] }), view === PsCalendarView.month ? (_jsx("div", { className: 'grid grid-cols-3 gap-1', children: PsDateInputService.monthNames().map((name, month) => (_jsx("button", { className: PallasoftClassNameService.merge(cellClassName, month === monthDate.getMonth() ? selectedCellClassName : undefined), disabled: PsDateInputService.isMonthOutOfRange(year, month, minDate, maxDate), onClick: () => {
+                        }, type: 'button', children: [navigation.title, _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 rotate-90 text-ink/50', iconKey: PsIconKey.ChevronRight })] })) : (_jsx("p", { "aria-live": 'polite', className: 'text-sm font-semibold text-ink', children: navigation.title })), _jsx("button", { "aria-label": navigation.nextLabel, className: navigationButtonClassName, disabled: navigation.isNextDisabled, onClick: navigation.next, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.ChevronRight }) })] }), view === PsCalendarView.month ? (_jsx("div", { className: 'grid grid-cols-3 gap-1', children: PsDateInputService.monthNames().map((name, month) => (_jsx("button", { className: PallasoftClassNameService.merge(cellClassName, month === monthDate.getMonth() ? selectedCellClassName : undefined), disabled: PsDateInputService.isMonthOutOfRange(year, month, minDate, maxDate), onClick: () => {
                         changeMonth(month);
                         onViewChange(PsCalendarView.day);
                     }, type: 'button', children: name }, name))) })) : null, view === PsCalendarView.year ? (_jsx("div", { className: 'grid grid-cols-3 gap-1', children: years.map((candidate) => (_jsx("button", { className: PallasoftClassNameService.merge(cellClassName, candidate === year ? selectedCellClassName : undefined), disabled: PsDateInputService.isYearOutOfRange(candidate, minDate, maxDate), onClick: () => {
+                        if (onYearPick !== undefined) {
+                            onYearPick(candidate);
+                            return;
+                        }
                         changeYear(candidate);
                         onViewChange(PsCalendarView.month);
                     }, type: 'button', children: candidate }, candidate))) })) : null] }));

package/dist/esm/components/ps-currency-input.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsCurrencyInputService } from '../services/ps-currency-input-service';
+import { PsSelectInput } from './ps-select-input';
+export const PsCurrencyInput = ({ currencies, locale, ...props }) => (_jsx(PsSelectInput, { ...props, options: PsCurrencyInputService.options(currencies, locale) }));

package/dist/esm/components/ps-year-input.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import DatePicker from 'react-datepicker';
+import { PsCalendarView } from '../constants/ps-calendar-view';
 import { PsDateInputConfig } from '../constants/ps-date-input-config';
 import { PsYearInputConfig } from '../constants/ps-year-input-config';
 import { PsYearInputService } from '../services/ps-year-input-service';
+import { PsCalendarHeader } from './ps-calendar-header';
 import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
 export const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, maxYear, minYear, name, onChange, placeholder = PsYearInputConfig.placeholder, required, value, }) => {
@@ -17,6 +19,10 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? '' : defaultValue);
     const currentValue = value === undefined ? uncontrolledValue : value;
+    const pickerRef = useRef(null);
+    const selected = PsYearInputService.parse(currentValue);
+    const minDate = PsYearInputService.bound(minYear);
+    const maxDate = PsYearInputService.bound(maxYear);
     useEffect(() => {
         const existing = document.getElementById(portalId);
         const container = existing ? existing : document.createElement('div');
@@ -34,5 +40,8 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [_jsx(DatePicker, { autoComplete: 'off', calendarClassName: 'ps-floating-panel ps-datepicker', className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: PsYearInputService.bound(maxYear), minDate: PsYearInputService.bound(minYear), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, required: required, selected: PsYearInputService.parse(currentValue), showPopperArrow: false, showYearPicker: true, wrapperClassName: 'block w-full', yearItemNumber: PsYearInputConfig.yearsPerPage }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: PsIconKey.Calendar }), name ? _jsx("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [_jsx(DatePicker, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${PsDateInputConfig.pickingClassName}`, className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, ref: pickerRef, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: () => undefined, onYearPick: (year) => {
+                                handleChange(new Date(year, 0, 1));
+                                pickerRef.current?.setOpen(false);
+                            }, selectedYear: selected === null ? undefined : selected.getFullYear(), view: PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: 'block w-full' }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: PsIconKey.Calendar }), name ? _jsx("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };

package/dist/esm/constants/ps-currency-input-config.js

@@ -0,0 +1,5 @@
+export const PsCurrencyInputConfig = {
+    locale: 'en',
+    separator: ' · ',
+    displayType: 'currency',
+};

package/dist/esm/constants/ps-year-input-config.js

@@ -1,5 +1,4 @@
 export const PsYearInputConfig = {
     format: 'yyyy',
     placeholder: 'Select a year',
-    yearsPerPage: 12,
 };

package/dist/esm/index.js

@@ -37,3 +37,6 @@ export * from './components/ps-year-input';
 export * from './constants/ps-year-input-config';
 export * from './services/ps-year-input-service';
 export * from './constants/ps-cascader-config';
+export * from './components/ps-currency-input';
+export * from './constants/ps-currency-input-config';
+export * from './services/ps-currency-input-service';

package/dist/esm/services/ps-amount-input-service.js

@@ -1,25 +1,9 @@
-import { PsAmountInputConfig } from '../constants/ps-amount-input-config';
+import { Common } from '@pallasoft/ps-utilities';
 export class PsAmountInputService {
     static normalise(raw) {
-        const trimmed = raw.trim();
-        const isBracketed = trimmed.startsWith(PsAmountInputConfig.openBracket) &&
-            trimmed.endsWith(PsAmountInputConfig.closeBracket);
-        const isNegative = isBracketed || trimmed.startsWith(PsAmountInputConfig.minus);
-        const kept = trimmed.replace(PsAmountInputConfig.disallowed, '');
-        const pointIndex = kept.indexOf(PsAmountInputConfig.point);
-        const digits = pointIndex === -1
-            ? kept
-            : `${kept.slice(0, pointIndex + 1)}${kept
-                .slice(pointIndex + 1)
-                .split(PsAmountInputConfig.point)
-                .join('')}`;
-        if (digits === '')
-            return isNegative && !isBracketed ? PsAmountInputConfig.minus : '';
-        return isNegative ? `${PsAmountInputConfig.minus}${digits}` : digits;
+        return Common.AmountService.normalise(raw);
     }
     static toNumber(raw) {
-        const normalised = PsAmountInputService.normalise(raw);
-        const parsed = Number(normalised);
-        return normalised === '' || !Number.isFinite(parsed) ? 0 : parsed;
+        return Common.AmountService.toNumber(raw);
     }
 }

package/dist/esm/services/ps-currency-input-service.js

@@ -0,0 +1,10 @@
+import { PsCurrencyInputConfig } from '../constants/ps-currency-input-config';
+export class PsCurrencyInputService {
+    static options(currencies, locale = PsCurrencyInputConfig.locale) {
+        const names = new Intl.DisplayNames([locale], { type: PsCurrencyInputConfig.displayType });
+        return [...new Set(currencies.map((code) => code.toUpperCase()))].map((code) => ({
+            label: `${code}${PsCurrencyInputConfig.separator}${names.of(code) ?? code}`,
+            value: code,
+        }));
+    }
+}

package/dist/esm/services/ps-phone-input-service.js

@@ -1,56 +1,27 @@
-import { AsYouType, getCountries, getCountryCallingCode, parsePhoneNumberFromString, } from 'libphonenumber-js';
+import { Common } from '@pallasoft/ps-utilities';
 import { PsPhoneInputConfig } from '../constants/ps-phone-input-config';
 export class PsPhoneInputService {
     static isCountry(code) {
-        return getCountries().includes(code);
+        return Common.PhoneService.isCountry(code);
     }
     static countries(preferred) {
-        const names = new Intl.DisplayNames([PsPhoneInputConfig.locale], {
-            type: PsPhoneInputConfig.displayNamesType,
-        });
-        const options = getCountries().map((code) => {
-            const name = names.of(code);
-            return {
-                callingCode: getCountryCallingCode(code),
-                code,
-                label: name !== undefined ? name : code,
-            };
-        });
-        return options.sort((left, right) => {
-            if (left.code === preferred)
-                return -1;
-            if (right.code === preferred)
-                return 1;
-            return left.label.localeCompare(right.label);
-        });
+        return Common.PhoneService.countries(preferred, PsPhoneInputConfig.locale);
     }
     static display(value, fallbackCountry) {
-        const parsed = value.startsWith(PsPhoneInputConfig.plus)
-            ? parsePhoneNumberFromString(value)
-            : undefined;
-        if (parsed !== undefined && parsed.country !== undefined)
-            return { country: parsed.country, national: parsed.formatNational() };
-        return { country: fallbackCountry, national: value };
+        return Common.PhoneService.display(value, fallbackCountry);
     }
     static format(national, country) {
-        if (!PsPhoneInputService.isCountry(country))
-            return national;
-        return new AsYouType(country).input(national);
+        return Common.PhoneService.format(national, country);
     }
     static toStored(national, country) {
-        const trimmed = national.trim();
-        if (trimmed === '' || !PsPhoneInputService.isCountry(country))
-            return trimmed;
-        const parsed = parsePhoneNumberFromString(trimmed, country);
-        return parsed !== undefined ? parsed.number : trimmed;
+        return Common.PhoneService.toStored(national, country);
     }
     static isValid(national, country) {
         if (national.trim() === '')
             return true;
         if (!PsPhoneInputService.isCountry(country))
             return false;
-        const parsed = parsePhoneNumberFromString(national, country);
-        return parsed !== undefined && parsed.isValid();
+        return Common.PhoneService.isValid(national, country);
     }
     static search(options, query) {
         const term = query.trim().toLowerCase().replace(PsPhoneInputConfig.plus, '');
@@ -72,6 +43,6 @@ export class PsPhoneInputService {
         ].filter((part) => part.text !== '');
     }
     static callingCode(country) {
-        return PsPhoneInputService.isCountry(country) ? getCountryCallingCode(country) : '';
+        return Common.PhoneService.callingCode(country);
     }
 }

package/dist/esm/services/ps-postal-code-service.js

@@ -1,28 +1,9 @@
-import { PsPostalCodeConfig, PsPostalCodeFormats } from '../constants/ps-postal-code-formats';
+import { Common } from '@pallasoft/ps-utilities';
 export class PsPostalCodeService {
     static format(raw, country) {
-        const upper = raw.toUpperCase();
-        const format = PsPostalCodeFormats[country];
-        if (format === undefined)
-            return upper.replace(PsPostalCodeConfig.fallbackAllowed, '');
-        const compact = upper.replace(format.allowed, '');
-        if (format.groups.length === 0)
-            return upper.replace(PsPostalCodeConfig.fallbackAllowed, '');
-        const parts = [];
-        let cursor = 0;
-        for (const size of format.groups) {
-            if (cursor >= compact.length)
-                break;
-            parts.push(compact.slice(cursor, cursor + size));
-            cursor += size;
-        }
-        return parts.join(format.separator);
+        return Common.PostalCodeService.format(raw, country);
     }
     static maxLength(country) {
-        const format = PsPostalCodeFormats[country];
-        if (format === undefined || format.groups.length === 0)
-            return undefined;
-        return (format.groups.reduce((sum, size) => sum + size, 0) +
-            format.separator.length * (format.groups.length - 1));
+        return Common.PostalCodeService.maxLength(country);
     }
 }

package/dist/index.d.ts

@@ -37,3 +37,6 @@ export * from './components/ps-year-input';
 export * from './constants/ps-year-input-config';
 export * from './services/ps-year-input-service';
 export * from './constants/ps-cascader-config';
+export * from './components/ps-currency-input';
+export * from './constants/ps-currency-input-config';
+export * from './services/ps-currency-input-service';

package/dist/index.js

@@ -53,3 +53,6 @@ __exportStar(require("./components/ps-year-input"), exports);
 __exportStar(require("./constants/ps-year-input-config"), exports);
 __exportStar(require("./services/ps-year-input-service"), exports);
 __exportStar(require("./constants/ps-cascader-config"), exports);
+__exportStar(require("./components/ps-currency-input"), exports);
+__exportStar(require("./constants/ps-currency-input-config"), exports);
+__exportStar(require("./services/ps-currency-input-service"), exports);

package/dist/services/ps-amount-input-service.js

@@ -1,29 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsAmountInputService = void 0;
-const ps_amount_input_config_1 = require("../constants/ps-amount-input-config");
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
 class PsAmountInputService {
     static normalise(raw) {
-        const trimmed = raw.trim();
-        const isBracketed = trimmed.startsWith(ps_amount_input_config_1.PsAmountInputConfig.openBracket) &&
-            trimmed.endsWith(ps_amount_input_config_1.PsAmountInputConfig.closeBracket);
-        const isNegative = isBracketed || trimmed.startsWith(ps_amount_input_config_1.PsAmountInputConfig.minus);
-        const kept = trimmed.replace(ps_amount_input_config_1.PsAmountInputConfig.disallowed, '');
-        const pointIndex = kept.indexOf(ps_amount_input_config_1.PsAmountInputConfig.point);
-        const digits = pointIndex === -1
-            ? kept
-            : `${kept.slice(0, pointIndex + 1)}${kept
-                .slice(pointIndex + 1)
-                .split(ps_amount_input_config_1.PsAmountInputConfig.point)
-                .join('')}`;
-        if (digits === '')
-            return isNegative && !isBracketed ? ps_amount_input_config_1.PsAmountInputConfig.minus : '';
-        return isNegative ? `${ps_amount_input_config_1.PsAmountInputConfig.minus}${digits}` : digits;
+        return ps_utilities_1.Common.AmountService.normalise(raw);
     }
     static toNumber(raw) {
-        const normalised = PsAmountInputService.normalise(raw);
-        const parsed = Number(normalised);
-        return normalised === '' || !Number.isFinite(parsed) ? 0 : parsed;
+        return ps_utilities_1.Common.AmountService.toNumber(raw);
     }
 }
 exports.PsAmountInputService = PsAmountInputService;

package/dist/services/ps-currency-input-service.d.ts

@@ -0,0 +1,4 @@
+import type { PsSelectOption } from '../components/ps-select-input';
+export declare class PsCurrencyInputService {
+    static options(currencies: string[], locale?: string): PsSelectOption[];
+}

package/dist/services/ps-currency-input-service.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCurrencyInputService = void 0;
+const ps_currency_input_config_1 = require("../constants/ps-currency-input-config");
+class PsCurrencyInputService {
+    static options(currencies, locale = ps_currency_input_config_1.PsCurrencyInputConfig.locale) {
+        const names = new Intl.DisplayNames([locale], { type: ps_currency_input_config_1.PsCurrencyInputConfig.displayType });
+        return [...new Set(currencies.map((code) => code.toUpperCase()))].map((code) => ({
+            label: `${code}${ps_currency_input_config_1.PsCurrencyInputConfig.separator}${names.of(code) ?? code}`,
+            value: code,
+        }));
+    }
+}
+exports.PsCurrencyInputService = PsCurrencyInputService;

package/dist/services/ps-phone-input-service.js

@@ -1,59 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPhoneInputService = void 0;
-const libphonenumber_js_1 = require("libphonenumber-js");
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
 const ps_phone_input_config_1 = require("../constants/ps-phone-input-config");
 class PsPhoneInputService {
     static isCountry(code) {
-        return (0, libphonenumber_js_1.getCountries)().includes(code);
+        return ps_utilities_1.Common.PhoneService.isCountry(code);
     }
     static countries(preferred) {
-        const names = new Intl.DisplayNames([ps_phone_input_config_1.PsPhoneInputConfig.locale], {
-            type: ps_phone_input_config_1.PsPhoneInputConfig.displayNamesType,
-        });
-        const options = (0, libphonenumber_js_1.getCountries)().map((code) => {
-            const name = names.of(code);
-            return {
-                callingCode: (0, libphonenumber_js_1.getCountryCallingCode)(code),
-                code,
-                label: name !== undefined ? name : code,
-            };
-        });
-        return options.sort((left, right) => {
-            if (left.code === preferred)
-                return -1;
-            if (right.code === preferred)
-                return 1;
-            return left.label.localeCompare(right.label);
-        });
+        return ps_utilities_1.Common.PhoneService.countries(preferred, ps_phone_input_config_1.PsPhoneInputConfig.locale);
     }
     static display(value, fallbackCountry) {
-        const parsed = value.startsWith(ps_phone_input_config_1.PsPhoneInputConfig.plus)
-            ? (0, libphonenumber_js_1.parsePhoneNumberFromString)(value)
-            : undefined;
-        if (parsed !== undefined && parsed.country !== undefined)
-            return { country: parsed.country, national: parsed.formatNational() };
-        return { country: fallbackCountry, national: value };
+        return ps_utilities_1.Common.PhoneService.display(value, fallbackCountry);
     }
     static format(national, country) {
-        if (!PsPhoneInputService.isCountry(country))
-            return national;
-        return new libphonenumber_js_1.AsYouType(country).input(national);
+        return ps_utilities_1.Common.PhoneService.format(national, country);
     }
     static toStored(national, country) {
-        const trimmed = national.trim();
-        if (trimmed === '' || !PsPhoneInputService.isCountry(country))
-            return trimmed;
-        const parsed = (0, libphonenumber_js_1.parsePhoneNumberFromString)(trimmed, country);
-        return parsed !== undefined ? parsed.number : trimmed;
+        return ps_utilities_1.Common.PhoneService.toStored(national, country);
     }
     static isValid(national, country) {
         if (national.trim() === '')
             return true;
         if (!PsPhoneInputService.isCountry(country))
             return false;
-        const parsed = (0, libphonenumber_js_1.parsePhoneNumberFromString)(national, country);
-        return parsed !== undefined && parsed.isValid();
+        return ps_utilities_1.Common.PhoneService.isValid(national, country);
     }
     static search(options, query) {
         const term = query.trim().toLowerCase().replace(ps_phone_input_config_1.PsPhoneInputConfig.plus, '');
@@ -75,7 +46,7 @@ class PsPhoneInputService {
         ].filter((part) => part.text !== '');
     }
     static callingCode(country) {
-        return PsPhoneInputService.isCountry(country) ? (0, libphonenumber_js_1.getCountryCallingCode)(country) : '';
+        return ps_utilities_1.Common.PhoneService.callingCode(country);
     }
 }
 exports.PsPhoneInputService = PsPhoneInputService;

package/dist/services/ps-postal-code-service.js

@@ -1,32 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPostalCodeService = void 0;
-const ps_postal_code_formats_1 = require("../constants/ps-postal-code-formats");
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
 class PsPostalCodeService {
     static format(raw, country) {
-        const upper = raw.toUpperCase();
-        const format = ps_postal_code_formats_1.PsPostalCodeFormats[country];
-        if (format === undefined)
-            return upper.replace(ps_postal_code_formats_1.PsPostalCodeConfig.fallbackAllowed, '');
-        const compact = upper.replace(format.allowed, '');
-        if (format.groups.length === 0)
-            return upper.replace(ps_postal_code_formats_1.PsPostalCodeConfig.fallbackAllowed, '');
-        const parts = [];
-        let cursor = 0;
-        for (const size of format.groups) {
-            if (cursor >= compact.length)
-                break;
-            parts.push(compact.slice(cursor, cursor + size));
-            cursor += size;
-        }
-        return parts.join(format.separator);
+        return ps_utilities_1.Common.PostalCodeService.format(raw, country);
     }
     static maxLength(country) {
-        const format = ps_postal_code_formats_1.PsPostalCodeFormats[country];
-        if (format === undefined || format.groups.length === 0)
-            return undefined;
-        return (format.groups.reduce((sum, size) => sum + size, 0) +
-            format.separator.length * (format.groups.length - 1));
+        return ps_utilities_1.Common.PostalCodeService.maxLength(country);
     }
 }
 exports.PsPostalCodeService = PsPostalCodeService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.18.1",
+	"version": "1.19.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -35,7 +35,7 @@
 		"@pallasoft/ps-core-components": "^2.10.0",
 		"@pallasoft/ps-design-system": "^1.5.0",
 		"@pallasoft/ps-icons": "^1.5.4",
-		"@pallasoft/ps-utilities": "^2.2.0",
+		"@pallasoft/ps-utilities": "^2.8.0",
 		"libphonenumber-js": "^1.13.13",
 		"react-aria-components": "^1.19.0",
 		"react-datepicker": "^9.1.0"