pixelize-design-library 2.1.41 → 2.1.42

package/dist/Components/Input/PhoneNumberInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PhoneNumberInputProps } from "./PhoneNumberInputProps";
+declare const PhoneNumberInput: ({ size, value, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => React.JSX.Element;
+export default PhoneNumberInput;

package/dist/Components/Input/PhoneNumberInput.js

@@ -0,0 +1,125 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var FormLabel_1 = require("../Common/FormLabel");
+var getFlagEmoji = function (countryCode) {
+    if (!countryCode)
+        return "";
+    return countryCode
+        .toUpperCase()
+        .replace(/./g, function (char) {
+        return String.fromCodePoint(127397 + char.charCodeAt(0));
+    });
+};
+var PhoneNumberInput = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, value = _a.value, country = _a.country, countries = _a.countries, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter phone number" : _c, onChange = _a.onChange, inputId = _a.inputId, selectId = _a.selectId, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, label = _a.label, id = _a.id, _d = _a.width, width = _d === void 0 ? "100%" : _d, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, onBlur = _a.onBlur, onFocus = _a.onFocus, isReadOnly = _a.isReadOnly, height = _a.height, autoComplete = _a.autoComplete, _e = _a.showCountrySelect, showCountrySelect = _e === void 0 ? true : _e, ref = _a.ref, name = _a.name, minW = _a.minW, maxW = _a.maxW, rest = __rest(_a, ["size", "value", "country", "countries", "placeholder", "onChange", "inputId", "selectId", "error", "errorMessage", "helperText", "label", "id", "width", "isInformation", "informationMessage", "isRequired", "onBlur", "onFocus", "isReadOnly", "height", "autoComplete", "showCountrySelect", "ref", "name", "minW", "maxW"]);
+    var getCountryTelCode = (0, react_1.useCallback)(function (countryCode) {
+        var _a;
+        if (!countryCode)
+            return undefined;
+        return (_a = countries === null || countries === void 0 ? void 0 : countries.find(function (_a) {
+            var code = _a.code;
+            return countryCode === code;
+        })) === null || _a === void 0 ? void 0 : _a.dial_code;
+    }, [countries]);
+    var _f = (0, react_1.useState)(value), number = _f[0], setNumber = _f[1];
+    var _g = (0, react_1.useState)(country), selectedCountry = _g[0], setSelectedCountry = _g[1];
+    var _h = (0, react_1.useState)(country), countryCode = _h[0], setCountryCode = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (country) {
+            var code = getCountryTelCode(country);
+            setSelectedCountry(country);
+            setCountryCode(code);
+        }
+    }, [country, getCountryTelCode]);
+    var handleCountryChange = function (e) {
+        var selected = e.target.value;
+        if (!selected) {
+            setSelectedCountry("");
+            setCountryCode("");
+            setNumber("");
+            onChange("");
+            return;
+        }
+        var code = getCountryTelCode(selected) || "";
+        setSelectedCountry(selected);
+        setCountryCode(code);
+        onChange("".concat(code).concat(number));
+    };
+    var handleNumberChange = function (e) {
+        if (countryCode) {
+            var numValue = e.target.value;
+            numValue = numValue.replace(/[^+\d\s]/g, "");
+            setNumber(numValue);
+            onChange("".concat(countryCode).concat(numValue));
+        }
+        else {
+            return;
+        }
+    };
+    return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
+        react_1.default.createElement(react_2.InputGroup, __assign({ size: size }, rest),
+            react_1.default.createElement(react_2.InputLeftElement, { width: showCountrySelect ? "4rem" : "2rem", height: "100%" },
+                showCountrySelect && react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_2.Select, { position: "absolute", top: "0", left: "0", height: "100%", id: selectId, width: "4rem", opacity: 0, zIndex: 1, value: selectedCountry, onChange: handleCountryChange, lineHeight: "1.5rem" },
+                        react_1.default.createElement("option", { value: "" }, "Select Country"),
+                        countries.map(function (option) { return (react_1.default.createElement("option", { key: option.code, value: option.code }, option.country)); }))),
+                react_1.default.createElement(react_2.Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between" }, selectedCountry ? (react_1.default.createElement(react_2.Box, { fontSize: "1.2rem" }, getFlagEmoji(selectedCountry))) : (react_1.default.createElement(react_2.Icon, { viewBox: "0 0 24 24", boxSize: "1rem" },
+                    react_1.default.createElement("path", { fill: "currentColor", d: "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.79,14.8 16.33,14.67 16.8,14.82C18.17,15.27 19.65,15.5 21,15.5C21.55,15.5 22,15.95 22,16.5V20C22,20.55 21.55,21 21,21C10.61,21 3,13.39 3,3C3,2.45 3.45,2 4,2H7.5C8.05,2 8.5,2.45 8.5,3C8.5,4.35 8.73,5.83 9.18,7.2C9.33,7.67 9.2,8.21 8.82,8.59L6.62,10.79Z" }))))),
+            react_1.default.createElement(react_2.Input, { type: "tel", pl: showCountrySelect ? "4rem" : "2rem", value: number, id: inputId, onChange: handleNumberChange, onBlur: onBlur, onFocus: onFocus, isReadOnly: isReadOnly, name: name, size: size, height: height, ref: ref, autoComplete: autoComplete, placeholder: placeholder, disabled: !selectedCountry, isInvalid: error })),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+};
+exports.default = PhoneNumberInput;

package/dist/Components/Input/PhoneNumberInputProps.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export type CountryOption = {
+    country_id: string | number;
+    code: string;
+    country: string;
+    dial_code: string;
+};
+export type PhoneNumberInputProps = {
+    label?: string;
+    id?: string;
+    size?: string;
+    value?: string;
+    country?: string;
+    placeholder?: string;
+    onChange: (value: string) => void;
+    countries: CountryOption[];
+    inputId?: string;
+    selectId?: string;
+    name?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    isInformation?: boolean;
+    informationMessage?: string;
+    isRequired?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    isReadOnly?: boolean;
+    ref?: React.Ref<HTMLInputElement>;
+    autoComplete?: string;
+    height?: string;
+    width?: string;
+    minW?: string;
+    maxW?: string;
+    showCountrySelect?: boolean;
+};

package/dist/Components/Input/PhoneNumberInputProps.js

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

package/dist/Pages/input.js

@@ -1,11 +1,44 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
+var PhoneNumberInput_1 = __importDefault(require("../Components/Input/PhoneNumberInput"));
 var InputPage = function () {
+    var _a = (0, react_1.useState)([]), countries = _a[0], setCountries = _a[1];
+    (0, react_1.useEffect)(function () {
+        fetch("https://dev.api.pixelizetech.com/account/api/allCountries")
+            .then(function (res) { return res.json(); })
+            .then(function (data) {
+            setCountries(data);
+        })
+            .catch(function (err) { return console.error("Error fetching countries:", err); });
+    }, []);
     return (react_1.default.createElement("div", { style: { width: "500px" } },
         react_1.default.createElement(TextInput_1.default, { label: "My Label", id: "input1", name: "hello", 
             //helperText="Hello"
@@ -37,6 +70,7 @@ var InputPage = function () {
             // helperText="sometibg"
             isRequired: true, informationMessage: "This is information", isInformation: true, 
             // isDisabled
-            minW: "200px", maxW: "300px" })));
+            minW: "200px", maxW: "300px" }),
+        react_1.default.createElement(PhoneNumberInput_1.default, { label: "Phone", id: "input1", name: "hello", country: "IN", value: "", countries: countries, onChange: function (val) { console.log(val, "hello"); }, isRequired: true, informationMessage: "This is information", isInformation: true, error: true, errorMessage: "Required", showCountrySelect: true, minW: "200px", maxW: "300px" })));
 };
 exports.default = InputPage;

package/dist/index.d.ts

@@ -52,5 +52,6 @@ import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
 import ProductCard from "./Components/ProductCard/ProductCard";
 import ProductDetails from "./Components/ProductDetails/ProductDetails";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = void 0;
+exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -147,4 +147,6 @@ var ProductCard_1 = __importDefault(require("./Components/ProductCard/ProductCar
 exports.ProductCard = ProductCard_1.default;
 var ProductDetails_1 = __importDefault(require("./Components/ProductDetails/ProductDetails"));
 exports.ProductDetails = ProductDetails_1.default;
+var PhoneNumberInput_1 = __importDefault(require("./Components/Input/PhoneNumberInput"));
+exports.PhoneNumberInput = PhoneNumberInput_1.default;
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.41",
+  "version": "2.1.42",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",