@pallasoft/ps-input-components 1.20.1 → 1.21.0

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

@@ -0,0 +1,5 @@
+import type { InputHTMLAttributes } from 'react';
+export interface PsRangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label: string;
+}
+export declare const PsRangeInput: ({ className, label, ...props }: PsRangeInputProps) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRangeInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsRangeInput = ({ className, label, ...props }) => ((0, jsx_runtime_1.jsx)("input", { "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring h-1.5 w-full cursor-pointer appearance-none rounded-full bg-[rgb(var(--ps-color-muted-rgb)/0.18)] outline-none disabled:cursor-not-allowed disabled:opacity-50', '[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[rgb(var(--ps-color-muted-rgb)/0.18)]', '[&::-webkit-slider-thumb]:-mt-1.5 [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-surface [&::-webkit-slider-thumb]:bg-primary', '[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:w-full [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[rgb(var(--ps-color-muted-rgb)/0.18)]', '[&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-surface [&::-moz-range-thumb]:bg-primary', className), type: 'range', ...props }));
+exports.PsRangeInput = PsRangeInput;

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

@@ -47,7 +47,7 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
         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 ${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));
+                                handleChange(ps_year_input_service_1.PsYearInputService.startOfYear(year));
                                 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] }));
 };

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

@@ -2,6 +2,7 @@ export declare const PsDateInputConfig: {
     readonly inputFormats: readonly ["MMM d, yyyy", "yyyy-MM-dd", "MM/dd/yyyy", "d MMM yyyy"];
     readonly monthLabelFormat: "MMMM YYYY";
     readonly monthShortFormat: "MMM";
+    readonly monthNameYear: 2000;
     readonly monthsPerYear: 12;
     readonly pickingClassName: "ps-datepicker-picking";
     readonly yearsPerPage: 12;

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

@@ -5,6 +5,7 @@ exports.PsDateInputConfig = {
     inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
     monthLabelFormat: 'MMMM YYYY',
     monthShortFormat: 'MMM',
+    monthNameYear: 2000,
     monthsPerYear: 12,
     pickingClassName: 'ps-datepicker-picking',
     yearsPerPage: 12,

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsRangeInput = ({ className, label, ...props }) => (_jsx("input", { "aria-label": label, className: PallasoftClassNameService.merge('ps-focus-ring h-1.5 w-full cursor-pointer appearance-none rounded-full bg-[rgb(var(--ps-color-muted-rgb)/0.18)] outline-none disabled:cursor-not-allowed disabled:opacity-50', '[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[rgb(var(--ps-color-muted-rgb)/0.18)]', '[&::-webkit-slider-thumb]:-mt-1.5 [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-surface [&::-webkit-slider-thumb]:bg-primary', '[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:w-full [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[rgb(var(--ps-color-muted-rgb)/0.18)]', '[&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-surface [&::-moz-range-thumb]:bg-primary', className), type: 'range', ...props }));

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

@@ -41,7 +41,7 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
         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 ${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));
+                                handleChange(PsYearInputService.startOfYear(year));
                                 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-date-input-config.js

@@ -2,6 +2,7 @@ export const PsDateInputConfig = {
     inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
     monthLabelFormat: 'MMMM YYYY',
     monthShortFormat: 'MMM',
+    monthNameYear: 2000,
     monthsPerYear: 12,
     pickingClassName: 'ps-datepicker-picking',
     yearsPerPage: 12,

package/dist/esm/index.js

@@ -21,6 +21,7 @@ export * from './components/ps-email-input';
 export * from './components/ps-percent-input';
 export * from './components/ps-phone-input';
 export * from './components/ps-postal-code-input';
+export * from './components/ps-range-input';
 export * from './components/ps-url-input';
 export * from './constants/ps-phone-input-config';
 export * from './constants/ps-postal-code-formats';

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

@@ -22,15 +22,16 @@ export class PsDateInputService {
         return Common.DateService.formatDate(date.getTime(), PsDateInputConfig.monthLabelFormat);
     }
     static monthNames() {
-        return Array.from({ length: PsDateInputConfig.monthsPerYear }, (_, month) => Common.DateService.formatDate(new Date(2000, month, 1).getTime(), PsDateInputConfig.monthShortFormat));
+        return Array.from({ length: PsDateInputConfig.monthsPerYear }, (_, month) => Common.DateService.formatDate(Common.DateService.fromParts(PsDateInputConfig.monthNameYear, month, 1).valueOf(), PsDateInputConfig.monthShortFormat));
     }
     static yearPage(year) {
         const start = year - Math.floor(PsDateInputConfig.yearsPerPage / 2);
         return Array.from({ length: PsDateInputConfig.yearsPerPage }, (_, index) => start + index);
     }
     static isMonthOutOfRange(year, month, min, max) {
-        const first = new Date(year, month, 1);
-        const last = new Date(year, month + 1, 0);
+        const start = Common.DateService.fromParts(year, month, 1);
+        const first = start.toDate();
+        const last = start.endOf('month').startOf('day').toDate();
         return (min !== undefined && last < min) || (max !== undefined && first > max);
     }
     static isYearOutOfRange(year, min, max) {

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

@@ -1,8 +1,9 @@
+import { Common } from '@pallasoft/ps-utilities';
 export class PsYearInputService {
     static parse(value) {
         if (value === undefined || !/^\d{4}$/.test(value))
             return null;
-        return new Date(Number(value), 0, 1);
+        return PsYearInputService.startOfYear(Number(value));
     }
     static format(date) {
         return date === null ? '' : String(date.getFullYear());
@@ -10,6 +11,9 @@ export class PsYearInputService {
     static bound(year) {
         if (year === undefined)
             return undefined;
-        return new Date(year, 0, 1);
+        return PsYearInputService.startOfYear(year);
+    }
+    static startOfYear(year) {
+        return Common.DateService.fromParts(year, 0, 1).toDate();
     }
 }

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/ps-email-input';
 export * from './components/ps-percent-input';
 export * from './components/ps-phone-input';
 export * from './components/ps-postal-code-input';
+export * from './components/ps-range-input';
 export * from './components/ps-url-input';
 export * from './constants/ps-phone-input-config';
 export * from './constants/ps-postal-code-formats';

package/dist/index.js

@@ -37,6 +37,7 @@ __exportStar(require("./components/ps-email-input"), exports);
 __exportStar(require("./components/ps-percent-input"), exports);
 __exportStar(require("./components/ps-phone-input"), exports);
 __exportStar(require("./components/ps-postal-code-input"), exports);
+__exportStar(require("./components/ps-range-input"), exports);
 __exportStar(require("./components/ps-url-input"), exports);
 __exportStar(require("./constants/ps-phone-input-config"), exports);
 __exportStar(require("./constants/ps-postal-code-formats"), exports);

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

@@ -25,15 +25,16 @@ class PsDateInputService {
         return ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.monthLabelFormat);
     }
     static monthNames() {
-        return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.monthsPerYear }, (_, month) => ps_utilities_1.Common.DateService.formatDate(new Date(2000, month, 1).getTime(), ps_date_input_config_1.PsDateInputConfig.monthShortFormat));
+        return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.monthsPerYear }, (_, month) => ps_utilities_1.Common.DateService.formatDate(ps_utilities_1.Common.DateService.fromParts(ps_date_input_config_1.PsDateInputConfig.monthNameYear, month, 1).valueOf(), ps_date_input_config_1.PsDateInputConfig.monthShortFormat));
     }
     static yearPage(year) {
         const start = year - Math.floor(ps_date_input_config_1.PsDateInputConfig.yearsPerPage / 2);
         return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.yearsPerPage }, (_, index) => start + index);
     }
     static isMonthOutOfRange(year, month, min, max) {
-        const first = new Date(year, month, 1);
-        const last = new Date(year, month + 1, 0);
+        const start = ps_utilities_1.Common.DateService.fromParts(year, month, 1);
+        const first = start.toDate();
+        const last = start.endOf('month').startOf('day').toDate();
         return (min !== undefined && last < min) || (max !== undefined && first > max);
     }
     static isYearOutOfRange(year, min, max) {

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

@@ -2,4 +2,5 @@ export declare class PsYearInputService {
     static parse(value: string | undefined): Date | null;
     static format(date: Date | null): string;
     static bound(year: number | undefined): Date | undefined;
+    static startOfYear(year: number): Date;
 }

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsYearInputService = void 0;
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
 class PsYearInputService {
     static parse(value) {
         if (value === undefined || !/^\d{4}$/.test(value))
             return null;
-        return new Date(Number(value), 0, 1);
+        return PsYearInputService.startOfYear(Number(value));
     }
     static format(date) {
         return date === null ? '' : String(date.getFullYear());
@@ -13,7 +14,10 @@ class PsYearInputService {
     static bound(year) {
         if (year === undefined)
             return undefined;
-        return new Date(year, 0, 1);
+        return PsYearInputService.startOfYear(year);
+    }
+    static startOfYear(year) {
+        return ps_utilities_1.Common.DateService.fromParts(year, 0, 1).toDate();
     }
 }
 exports.PsYearInputService = PsYearInputService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.20.1",
+	"version": "1.21.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -41,7 +41,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.8.0",
+		"@pallasoft/ps-utilities": "^2.13.0",
 		"libphonenumber-js": "^1.13.13",
 		"react-aria-components": "^1.19.0",
 		"react-datepicker": "^9.1.0"