@pallasoft/ps-input-components 1.10.0 → 1.12.0

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

@@ -0,0 +1,25 @@
+import { PsAmountInputConfig } from '../constants/ps-amount-input-config';
+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;
+    }
+    static toNumber(raw) {
+        const normalised = PsAmountInputService.normalise(raw);
+        const parsed = Number(normalised);
+        return normalised === '' || !Number.isFinite(parsed) ? 0 : parsed;
+    }
+}

package/dist/esm/services/ps-cascader-service.js

@@ -0,0 +1,22 @@
+export class PsCascaderService {
+    static findSelected(groups, value) {
+        if (value === '')
+            return null;
+        for (const group of groups) {
+            const option = group.options.find((item) => item.value === value);
+            if (option)
+                return { group, option };
+        }
+        return null;
+    }
+    static search(groups, query) {
+        const term = query.trim().toLowerCase();
+        if (term === '')
+            return [];
+        return groups.flatMap((group) => group.options
+            .filter((option) => option.label.toLowerCase().includes(term) ||
+            group.label.toLowerCase().includes(term) ||
+            (option.description ? option.description.toLowerCase().includes(term) : false))
+            .map((option) => ({ group, option })));
+    }
+}

package/dist/esm/services/ps-color-service.js

@@ -0,0 +1,73 @@
+export class PsColorService {
+    static normaliseHex(value) {
+        const hex = value.trim().replace('#', '');
+        if (/^[0-9a-fA-F]{3}$/.test(hex))
+            return `#${hex
+                .split('')
+                .map((character) => character + character)
+                .join('')
+                .toUpperCase()}`;
+        return /^[0-9a-fA-F]{6}$/.test(hex) ? `#${hex.toUpperCase()}` : null;
+    }
+    static toHsv(value) {
+        const hex = PsColorService.normaliseHex(value);
+        if (!hex)
+            return { brightness: 100, hue: 0, saturation: 0 };
+        const red = parseInt(hex.slice(1, 3), 16) / 255;
+        const green = parseInt(hex.slice(3, 5), 16) / 255;
+        const blue = parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(red, green, blue);
+        const min = Math.min(red, green, blue);
+        const delta = max - min;
+        let hue = 0;
+        if (delta !== 0) {
+            if (max === red)
+                hue = ((green - blue) / delta) % 6;
+            else if (max === green)
+                hue = (blue - red) / delta + 2;
+            else
+                hue = (red - green) / delta + 4;
+        }
+        return {
+            brightness: Math.round(max * 100),
+            hue: Math.round(((hue * 60) % 360) + (hue < 0 ? 360 : 0)),
+            saturation: Math.round((max === 0 ? 0 : delta / max) * 100),
+        };
+    }
+    static toHex({ brightness, hue, saturation }) {
+        const value = brightness / 100;
+        const chroma = (saturation / 100) * value;
+        const second = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+        const match = value - chroma;
+        const sector = Math.floor(hue / 60) % 6;
+        const channels = [
+            [chroma, second, 0],
+            [second, chroma, 0],
+            [0, chroma, second],
+            [0, second, chroma],
+            [second, 0, chroma],
+            [chroma, 0, second],
+        ][sector];
+        return `#${channels
+            .map((channel) => Math.round((channel + match) * 255)
+            .toString(16)
+            .padStart(2, '0'))
+            .join('')
+            .toUpperCase()}`;
+    }
+    static readableTextOn(value) {
+        const hex = PsColorService.normaliseHex(value);
+        if (!hex)
+            return '#0F172A';
+        const channel = (part) => {
+            const normalised = part / 255;
+            return normalised <= 0.03928
+                ? normalised / 12.92
+                : Math.pow((normalised + 0.055) / 1.055, 2.4);
+        };
+        const luminance = 0.2126 * channel(parseInt(hex.slice(1, 3), 16)) +
+            0.7152 * channel(parseInt(hex.slice(3, 5), 16)) +
+            0.0722 * channel(parseInt(hex.slice(5, 7), 16));
+        return 1.05 / (luminance + 0.05) >= 3 ? '#FFFFFF' : '#0F172A';
+    }
+}

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

@@ -0,0 +1,6 @@
+export class PsComboboxInputService {
+    static getItem(itemsByKey, key) {
+        const item = itemsByKey.get(String(key));
+        return item !== null && item !== undefined ? item : null;
+    }
+}

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

@@ -0,0 +1,24 @@
+import { Common } from '@pallasoft/ps-utilities';
+import { PsDateInputConfig } from '../constants/ps-date-input-config';
+export class PsDateInputService {
+    static parse(value) {
+        if (value === undefined || value === '')
+            return null;
+        const date = Common.DateService.getDate(value);
+        return date.isValid() && date.format(PsDateInputConfig.valueFormat) === value
+            ? date.toDate()
+            : null;
+    }
+    static parseBound(value) {
+        const date = PsDateInputService.parse(value);
+        return date === null ? undefined : date;
+    }
+    static format(date) {
+        return date === null
+            ? ''
+            : Common.DateService.formatDate(date.getTime(), PsDateInputConfig.valueFormat);
+    }
+    static monthLabel(date) {
+        return Common.DateService.formatDate(date.getTime(), PsDateInputConfig.monthLabelFormat);
+    }
+}

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

@@ -0,0 +1,77 @@
+import { AsYouType, getCountries, getCountryCallingCode, parsePhoneNumberFromString, } from 'libphonenumber-js';
+import { PsPhoneInputConfig } from '../constants/ps-phone-input-config';
+export class PsPhoneInputService {
+    static isCountry(code) {
+        return getCountries().includes(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);
+        });
+    }
+    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 };
+    }
+    static format(national, country) {
+        if (!PsPhoneInputService.isCountry(country))
+            return national;
+        return new AsYouType(country).input(national);
+    }
+    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;
+    }
+    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();
+    }
+    static search(options, query) {
+        const term = query.trim().toLowerCase().replace(PsPhoneInputConfig.plus, '');
+        if (term === '')
+            return options;
+        return options.filter((option) => option.label.toLowerCase().includes(term) ||
+            option.code.toLowerCase() === term ||
+            option.callingCode.startsWith(term));
+    }
+    static highlight(label, query) {
+        const term = query.trim().toLowerCase();
+        const index = term === '' ? -1 : label.toLowerCase().indexOf(term);
+        if (index === -1)
+            return [{ isMatch: false, text: label }];
+        return [
+            { isMatch: false, text: label.slice(0, index) },
+            { isMatch: true, text: label.slice(index, index + term.length) },
+            { isMatch: false, text: label.slice(index + term.length) },
+        ].filter((part) => part.text !== '');
+    }
+    static callingCode(country) {
+        return PsPhoneInputService.isCountry(country) ? getCountryCallingCode(country) : '';
+    }
+}

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

@@ -0,0 +1,28 @@
+import { PsPostalCodeConfig, PsPostalCodeFormats } from '../constants/ps-postal-code-formats';
+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);
+    }
+    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));
+    }
+}

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

@@ -0,0 +1,8 @@
+export class PsSelectInputService {
+    static getDefaultValue(defaultValue, options) {
+        if (defaultValue !== null && defaultValue !== undefined)
+            return defaultValue;
+        const firstValue = options[0]?.value;
+        return firstValue !== null && firstValue !== undefined ? firstValue : '';
+    }
+}

package/dist/esm/services/ps-text-format-service.js

@@ -0,0 +1,12 @@
+import { PsTextFormatConfig } from '../constants/ps-text-format-config';
+export class PsTextFormatService {
+    static email(raw) {
+        return raw.replace(PsTextFormatConfig.whitespace, '').toLowerCase();
+    }
+    static url(raw) {
+        const trimmed = raw.trim();
+        if (trimmed === '' || PsTextFormatConfig.schemePattern.test(trimmed))
+            return trimmed;
+        return `${PsTextFormatConfig.httpsPrefix}${trimmed}`;
+    }
+}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';
 export * from './components/ps-file-picker';
+export * from './components/ps-field-skeleton';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';
@@ -16,3 +17,19 @@ export * from './components/ps-toggle';
 export * from './services/ps-amount-input-service';
 export * from './services/ps-color-service';
 export * from './interfaces/color-hsv';
+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-url-input';
+export * from './constants/ps-phone-input-config';
+export * from './constants/ps-postal-code-formats';
+export * from './constants/ps-text-format-config';
+export * from './interfaces/ps-highlight-part';
+export * from './interfaces/ps-phone-country-option';
+export * from './interfaces/ps-phone-display-data';
+export * from './interfaces/ps-postal-code-format';
+export * from './services/ps-phone-input-service';
+export * from './services/ps-postal-code-service';
+export * from './services/ps-text-format-service';
+export * from './components/ps-required-mark';

package/dist/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./components/ps-combobox-input"), exports);
 __exportStar(require("./components/ps-date-input"), exports);
 __exportStar(require("./components/ps-dropdown"), exports);
 __exportStar(require("./components/ps-file-picker"), exports);
+__exportStar(require("./components/ps-field-skeleton"), exports);
 __exportStar(require("./components/ps-form-control"), exports);
 __exportStar(require("./components/ps-multi-select-input"), exports);
 __exportStar(require("./components/ps-select-input"), exports);
@@ -32,3 +33,19 @@ __exportStar(require("./components/ps-toggle"), exports);
 __exportStar(require("./services/ps-amount-input-service"), exports);
 __exportStar(require("./services/ps-color-service"), exports);
 __exportStar(require("./interfaces/color-hsv"), exports);
+__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-url-input"), exports);
+__exportStar(require("./constants/ps-phone-input-config"), exports);
+__exportStar(require("./constants/ps-postal-code-formats"), exports);
+__exportStar(require("./constants/ps-text-format-config"), exports);
+__exportStar(require("./interfaces/ps-highlight-part"), exports);
+__exportStar(require("./interfaces/ps-phone-country-option"), exports);
+__exportStar(require("./interfaces/ps-phone-display-data"), exports);
+__exportStar(require("./interfaces/ps-postal-code-format"), exports);
+__exportStar(require("./services/ps-phone-input-service"), exports);
+__exportStar(require("./services/ps-postal-code-service"), exports);
+__exportStar(require("./services/ps-text-format-service"), exports);
+__exportStar(require("./components/ps-required-mark"), exports);

package/dist/interfaces/ps-highlight-part.d.ts

@@ -0,0 +1,4 @@
+export interface PsHighlightPart {
+    isMatch: boolean;
+    text: string;
+}

package/dist/interfaces/ps-highlight-part.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-phone-country-option.d.ts

@@ -0,0 +1,5 @@
+export interface PsPhoneCountryOption {
+    callingCode: string;
+    code: string;
+    label: string;
+}

package/dist/interfaces/ps-phone-country-option.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-phone-display-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsPhoneDisplayData {
+    country: string;
+    national: string;
+}

package/dist/interfaces/ps-phone-display-data.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-postal-code-format.d.ts

@@ -0,0 +1,5 @@
+export interface PsPostalCodeFormat {
+    allowed: RegExp;
+    groups: number[];
+    separator: string;
+}

package/dist/interfaces/ps-postal-code-format.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,15 @@
+import { type CountryCode } from 'libphonenumber-js';
+import { PsHighlightPart } from '../interfaces/ps-highlight-part';
+import { PsPhoneCountryOption } from '../interfaces/ps-phone-country-option';
+import { PsPhoneDisplayData } from '../interfaces/ps-phone-display-data';
+export declare class PsPhoneInputService {
+    static isCountry(code: string): code is CountryCode;
+    static countries(preferred: string): PsPhoneCountryOption[];
+    static display(value: string, fallbackCountry: string): PsPhoneDisplayData;
+    static format(national: string, country: string): string;
+    static toStored(national: string, country: string): string;
+    static isValid(national: string, country: string): boolean;
+    static search(options: PsPhoneCountryOption[], query: string): PsPhoneCountryOption[];
+    static highlight(label: string, query: string): PsHighlightPart[];
+    static callingCode(country: string): string;
+}

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPhoneInputService = void 0;
+const libphonenumber_js_1 = require("libphonenumber-js");
+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);
+    }
+    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);
+        });
+    }
+    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 };
+    }
+    static format(national, country) {
+        if (!PsPhoneInputService.isCountry(country))
+            return national;
+        return new libphonenumber_js_1.AsYouType(country).input(national);
+    }
+    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;
+    }
+    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();
+    }
+    static search(options, query) {
+        const term = query.trim().toLowerCase().replace(ps_phone_input_config_1.PsPhoneInputConfig.plus, '');
+        if (term === '')
+            return options;
+        return options.filter((option) => option.label.toLowerCase().includes(term) ||
+            option.code.toLowerCase() === term ||
+            option.callingCode.startsWith(term));
+    }
+    static highlight(label, query) {
+        const term = query.trim().toLowerCase();
+        const index = term === '' ? -1 : label.toLowerCase().indexOf(term);
+        if (index === -1)
+            return [{ isMatch: false, text: label }];
+        return [
+            { isMatch: false, text: label.slice(0, index) },
+            { isMatch: true, text: label.slice(index, index + term.length) },
+            { isMatch: false, text: label.slice(index + term.length) },
+        ].filter((part) => part.text !== '');
+    }
+    static callingCode(country) {
+        return PsPhoneInputService.isCountry(country) ? (0, libphonenumber_js_1.getCountryCallingCode)(country) : '';
+    }
+}
+exports.PsPhoneInputService = PsPhoneInputService;

package/dist/services/ps-postal-code-service.d.ts

@@ -0,0 +1,4 @@
+export declare class PsPostalCodeService {
+    static format(raw: string, country: string): string;
+    static maxLength(country: string): number | undefined;
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPostalCodeService = void 0;
+const ps_postal_code_formats_1 = require("../constants/ps-postal-code-formats");
+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);
+    }
+    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));
+    }
+}
+exports.PsPostalCodeService = PsPostalCodeService;

package/dist/services/ps-text-format-service.d.ts

@@ -0,0 +1,4 @@
+export declare class PsTextFormatService {
+    static email(raw: string): string;
+    static url(raw: string): string;
+}

package/dist/services/ps-text-format-service.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextFormatService = void 0;
+const ps_text_format_config_1 = require("../constants/ps-text-format-config");
+class PsTextFormatService {
+    static email(raw) {
+        return raw.replace(ps_text_format_config_1.PsTextFormatConfig.whitespace, '').toLowerCase();
+    }
+    static url(raw) {
+        const trimmed = raw.trim();
+        if (trimmed === '' || ps_text_format_config_1.PsTextFormatConfig.schemePattern.test(trimmed))
+            return trimmed;
+        return `${ps_text_format_config_1.PsTextFormatConfig.httpsPrefix}${trimmed}`;
+    }
+}
+exports.PsTextFormatService = PsTextFormatService;

package/package.json

@@ -1,12 +1,15 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.10.0",
+	"version": "1.12.0",
 	"private": false,
 	"main": "./dist/index.js",
+	"module": "./dist/esm/index.js",
 	"types": "./dist/index.d.ts",
+	"sideEffects": false,
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
+			"module": "./dist/esm/index.js",
 			"require": "./dist/index.js",
 			"default": "./dist/index.js"
 		}
@@ -16,7 +19,7 @@
 	],
 	"scripts": {
 		"husky:prepare": "npx husky",
-		"build": "tsc",
+		"build": "tsc && tsc -p tsconfig.esm.json",
 		"setup:graphify": "sh scripts/graphify-setup.sh",
 		"update:graphify": "sh scripts/graphify-update.sh",
 		"lint": "npm run lint:eslint",
@@ -33,6 +36,7 @@
 		"@pallasoft/ps-design-system": "^1.3.0",
 		"@pallasoft/ps-icons": "^1.2.0",
 		"@pallasoft/ps-utilities": "^2.0.0",
+		"libphonenumber-js": "^1.13.13",
 		"react-aria-components": "^1.19.0",
 		"react-datepicker": "^9.1.0"
 	},