@m4l/gclick 0.36.0 → 0.36.1-beta-feature-795-m4l-react-native-ui-indicator-flag.0

package/@types/types.d.ts

@@ -6,6 +6,7 @@ import { GaugeCircularOwnerState, GaugeCircularSlotsType } from '../components/G
 import { IndicatorCSQOwnerState, IndicatorCSQSlotsType } from '../components/indicators/IndicatorCSQ/types';
 import { IndicatorBatteryOwnerState, IndicatorBatterySlotsType } from '../components/indicators/IndicatorBattery/types';
 import { IndicatorValueStatusSlotsType } from '../components/indicators/IndicatorValueStatus/types';
+import { IndicatorCountryPhoneOwnerState, IndicatorCountryPhoneSlotsType } from '../components/indicators/IndicatorCountryPhone/types';
 import { VideoTimeLineSelectorOwnerState, VideoTimeLineSelectorSlotsType } from '../components/VideoTimeLineSelector/types';
 import { VideoPlayerOwnerState, VideoPlayerSlotsType } from '../components/VideoPlayer/types';
 import { CameraStreamOwnerState, CameraStreamSlotsStyledType } from '../components/CameraStream/types';
@@ -35,6 +36,7 @@ declare module '@mui/material/styles' {
     M4LCSQSignal: IndicatorCSQSlotsType;
     M4LIndicatorBattery: IndicatorBatterySlotsType;
     M4LIndicatorValueStatus: IndicatorValueStatusSlotsType;
+    M4LIndicatorCountryPhone: IndicatorCountryPhoneSlotsType;
     M4LVideoTimeLineSelector: VideoTimeLineSelectorSlotsType;
     M4LVideoPlayer: VideoPlayerSlotsType;
     M4LCameraStream: CameraStreamSlotsStyledType;
@@ -55,6 +57,7 @@ declare module '@mui/material/styles' {
     M4LCSQSignal:  Partial<IndicatorCSQOwnerState>;
     M4LIndicatorBattery:  Partial<IndicatorBatteryOwnerState>;
     M4LIndicatorValueStatus:  Partial<IndicatorValueStatusOwnerState>;
+    M4LIndicatorCountryPhone: Partial<IndicatorCountryPhoneOwnerState>;
     M4LVideoTimeLineSelector:  Partial<VideoTimeLineSelectorOwnerState>;
     M4LVideoPlayer: Partial<VideoPlayerOwnerState>;
     M4LCameraStream: Partial<CameraStreamOwnerState>;
@@ -110,6 +113,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorValueStatus'];
       variants?: ComponentsVariants['M4LIndicatorValueStatus'];
     };
+    M4LIndicatorCountryPhone?: {
+      defaultProps?: ComponentsPropsList['M4LIndicatorCountryPhone'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorCountryPhone'];
+      variants?: ComponentsVariants['M4LIndicatorCountryPhone'];
+    };
     M4LVideoTimeLineSelector?: {
       defaultProps?: ComponentsPropsList['M4LVideoTimeLineSelector'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LVideoTimeLineSelector'];

package/components/PhoneNumberField/PhoneNumberField.d.ts

@@ -0,0 +1,4 @@
+import { PhoneNumberFieldProps } from './types';
+/** Enter national digits while storing a complete E.164-style phone value. */
+export declare function PhoneNumberField(props: PhoneNumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PhoneNumberField.d.ts.map

package/components/PhoneNumberField/PhoneNumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumberField.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/PhoneNumberField/PhoneNumberField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA4BrD,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,oDA4G5D"}

package/components/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,99 @@
+import { jsx as h } from "@emotion/react/jsx-runtime";
+import { TextField as j } from "@m4l/components";
+import { InputAdornment as L } from "@mui/material";
+import { styled as W } from "@mui/material/styles";
+import { useState as O, useMemo as V } from "react";
+import { IndicatorCountryPhone as k } from "../indicators/IndicatorCountryPhone/IndicatorCountryPhone.js";
+import { resolveIndicatorCountryPhoneCountries as q } from "../indicators/IndicatorCountryPhone/countryOptions.js";
+import { splitPhoneNumber as E } from "./phoneNumber.js";
+import { useCountryPhoneCatalog as G } from "../indicators/IndicatorCountryPhone/hooks/useCountryPhoneCatalog/useCountryPhoneCatalog.js";
+const J = W(j, {
+  name: "M4LPhoneNumberField",
+  slot: "Root",
+  shouldForwardProp: (o) => o !== "inputHeight"
+})(({ theme: o, size: a, inputHeight: d }) => {
+  const s = d === "compact" ? o.vars.size.baseSpacings.sp6 : a === "small" ? o.vars.size.baseSpacings.sp8 : o.vars.size.baseSpacings.sp9;
+  return {
+    "&&&& .MuiInputBase-root": {
+      height: s,
+      minHeight: s,
+      overflow: "visible"
+    },
+    "&&&& .MuiInputAdornment-root": {
+      alignSelf: "stretch",
+      display: "flex",
+      alignItems: "center",
+      height: "auto",
+      maxHeight: "none"
+    }
+  };
+});
+function oe(o) {
+  const {
+    value: a,
+    defaultValue: d = "",
+    onChange: s,
+    options: n,
+    defaultCountry: F = "es",
+    onCountryChange: S,
+    indicatorProps: x,
+    inputHeight: A = "comfortable",
+    variant: B = "contained",
+    disabled: y = !1,
+    readOnly: C = !1,
+    InputProps: c,
+    autoComplete: H = "tel-national",
+    ...p
+  } = o, [M, R] = O(d), [i, $] = O(F), m = a ?? M, t = G({
+    enabled: n === void 0 || n.length > 0,
+    selectedValue: i
+  }), r = V(
+    () => q(t.countries, n, t.locale),
+    [t.countries, t.locale, n]
+  ), w = V(() => t.selectedCountry && !r.some((e) => e.value === t.selectedCountry?.value) ? [...r, t.selectedCountry] : r, [t.selectedCountry, r]), { country: v, nationalDigits: g } = E(
+    m,
+    w,
+    i
+  ), l = v ?? r.find((e) => e.value === i) ?? t.selectedCountry ?? r[0], P = !!(l && r.some((e) => e.value === l.value)), f = t.status === "loaded", u = m.startsWith("+") && !v, z = C || !!(c?.readOnly || p.inputProps?.readOnly) || !f || !P || u, N = u ? m : g, D = n?.length !== 0 && (!f || !u);
+  function b(e) {
+    a === void 0 && R(e), s?.(e);
+  }
+  function T(e) {
+    if (!f || !l || !P || u)
+      return;
+    const I = e.target.value.replace(/\D/g, "");
+    b(I ? `${l.callingCode}${I}` : "");
+  }
+  return /* @__PURE__ */ h(
+    J,
+    {
+      ...p,
+      inputHeight: A,
+      variant: B,
+      value: N,
+      onChange: T,
+      disabled: y || n?.length === 0,
+      readOnly: z,
+      autoComplete: H,
+      InputProps: {
+        ...c,
+        type: "tel",
+        startAdornment: D ? /* @__PURE__ */ h(L, { position: "start", children: /* @__PURE__ */ h(
+          k,
+          {
+            ...x,
+            options: n,
+            value: l?.value ?? i,
+            disabled: y || C || !!(c?.readOnly || p.inputProps?.readOnly),
+            onChange: (e) => {
+              $(e.value), b(g ? `${e.callingCode}${g}` : ""), S?.(e);
+            }
+          }
+        ) }) : void 0
+      }
+    }
+  );
+}
+export {
+  oe as PhoneNumberField
+};

package/components/PhoneNumberField/index.d.ts

@@ -0,0 +1,3 @@
+export { PhoneNumberField } from './PhoneNumberField';
+export type { PhoneNumberFieldProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/PhoneNumberField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/PhoneNumberField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/components/PhoneNumberField/phoneNumber.d.ts

@@ -0,0 +1,5 @@
+import { CountryPhoneCountry } from '../indicators/IndicatorCountryPhone/types';
+import { SplitPhoneNumberResult } from './types';
+/** Extract the national digits and best matching country from an international value. */
+export declare function splitPhoneNumber(value: string, countries: readonly CountryPhoneCountry[], preferredCountry: string): SplitPhoneNumberResult;
+//# sourceMappingURL=phoneNumber.d.ts.map

package/components/PhoneNumberField/phoneNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phoneNumber.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/PhoneNumberField/phoneNumber.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AACrF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,yFAAyF;AACzF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,SAAS,mBAAmB,EAAE,EACzC,gBAAgB,EAAE,MAAM,GACvB,sBAAsB,CAexB"}

package/components/PhoneNumberField/phoneNumber.js

@@ -0,0 +1,12 @@
+function r(n, c, s) {
+  if (!n.startsWith("+"))
+    return { country: void 0, nationalDigits: n.replace(/\D/g, "") };
+  const e = `+${n.slice(1).replace(/\D/g, "")}`, l = c.filter((t) => e.startsWith(t.callingCode)), a = Math.max(0, ...l.map((t) => t.callingCode.length)), o = l.filter((t) => t.callingCode.length === a), i = o.find((t) => t.value === s) ?? o[0];
+  return {
+    country: i,
+    nationalDigits: i ? e.slice(i.callingCode.length) : e.slice(1)
+  };
+}
+export {
+  r as splitPhoneNumber
+};

package/components/PhoneNumberField/types.d.ts

@@ -0,0 +1,30 @@
+import { TextField } from '@m4l/components';
+import { ComponentProps } from 'react';
+import { IndicatorCountryPhoneOption, IndicatorCountryPhoneProps, CountryPhoneCountry } from '../indicators/IndicatorCountryPhone/types';
+type TextFieldProps = ComponentProps<typeof TextField>;
+/** Result of separating a complete phone value with the loaded country catalog. */
+export interface SplitPhoneNumberResult {
+    country: CountryPhoneCountry | undefined;
+    nationalDigits: string;
+}
+/** Props for a phone field whose form value includes the international prefix. */
+export interface PhoneNumberFieldProps extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'label' | 'helperText'> {
+    /** Complete international number, for example `+34123456789`; empty while no digits are entered. */
+    value?: string;
+    /** Initial complete number when used without controlled value. */
+    defaultValue?: string;
+    /** Receives the complete international number or an empty string. */
+    onChange?: (value: string) => void;
+    /** E.164 calling codes available in the selector. Omit for the full catalog. */
+    options?: readonly number[];
+    /** Country selected before a number is entered; defaults to Spain. */
+    defaultCountry?: string;
+    /** Receives the selected country, including its calling code. */
+    onCountryChange?: (country: IndicatorCountryPhoneOption) => void;
+    /** Customize the indicator's chip and popover without replacing its country/value contract. */
+    indicatorProps?: Omit<IndicatorCountryPhoneProps, 'options' | 'value' | 'defaultValue' | 'onChange' | 'disabled'>;
+    /** Select the compact 24 px form layout or the comfortable base field height. */
+    inputHeight?: 'compact' | 'comfortable';
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/components/PhoneNumberField/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/PhoneNumberField/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,2BAA2B,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACzH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAErF,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAEvD,mFAAmF;AACnF,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,kFAAkF;AAClF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC;IACjI,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gFAAgF;IAChF,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;IACjE,+FAA+F;IAC/F,cAAc,CAAC,EAAE,IAAI,CAAC,0BAA0B,EAAE,SAAS,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;IAClH,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACzC"}

package/components/RHFs/RHFPhoneNumberField/RHFPhoneNumberField.d.ts

@@ -0,0 +1,5 @@
+import { FieldValues } from 'react-hook-form';
+import { RHFPhoneNumberFieldProps } from './types';
+/** Bind PhoneNumberField's complete international value to react-hook-form. */
+export declare function RHFPhoneNumberField<TFieldValues extends FieldValues = FieldValues>(props: RHFPhoneNumberFieldProps<TFieldValues>): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RHFPhoneNumberField.d.ts.map

package/components/RHFs/RHFPhoneNumberField/RHFPhoneNumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RHFPhoneNumberField.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/RHFs/RHFPhoneNumberField/RHFPhoneNumberField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAChF,KAAK,EAAE,wBAAwB,CAAC,YAAY,CAAC,oDAsF9C"}

package/components/RHFs/RHFPhoneNumberField/RHFPhoneNumberField.js

@@ -0,0 +1,81 @@
+import { jsx as e, jsxs as q } from "@emotion/react/jsx-runtime";
+import { Label as E, HelperError as N } from "@m4l/components";
+import { useId as w } from "react";
+import { useFormContext as z, Controller as D } from "react-hook-form";
+import { RootStyled as L, ErrorStyled as O } from "./RHFPhoneNumberField.slots.js";
+import { PhoneNumberField as S } from "../../PhoneNumberField/PhoneNumberField.js";
+function Q(c) {
+  const {
+    name: b,
+    control: p,
+    rules: m,
+    disabled: y,
+    label: a,
+    symbol: g,
+    labelOverflow: h,
+    mandatory: f,
+    mandatoryMessage: B,
+    helperMessage: F,
+    htmlFor: v,
+    id: P,
+    size: t = "medium",
+    variant: j = "contained",
+    inputHeight: x = "compact",
+    inputProps: o,
+    ...C
+  } = c, I = z(), M = w(), n = P ?? v ?? M, d = `${n}-error`, s = m?.required, R = f ?? (typeof s == "object" ? !!s.value : !!s);
+  return /* @__PURE__ */ e(
+    D,
+    {
+      name: b,
+      control: p ?? I?.control,
+      rules: m,
+      render: ({ field: r, fieldState: i, formState: H }) => {
+        const u = y || H.isSubmitting, l = i.error?.message;
+        return /* @__PURE__ */ q(L, { children: [
+          a && /* @__PURE__ */ e(
+            E,
+            {
+              label: a,
+              symbol: g,
+              labelOverflow: h,
+              mandatory: R,
+              mandatoryMessage: B,
+              helperMessage: F,
+              htmlFor: n,
+              size: t,
+              disabled: u,
+              error: !!i.error
+            }
+          ),
+          /* @__PURE__ */ e(
+            S,
+            {
+              ...C,
+              id: n,
+              name: r.name,
+              inputRef: r.ref,
+              inputProps: {
+                ...o,
+                "aria-label": o?.["aria-label"] ?? a,
+                "aria-describedby": l ? [o?.["aria-describedby"], d].filter(Boolean).join(" ") : o?.["aria-describedby"]
+              },
+              size: t,
+              variant: j,
+              inputHeight: x,
+              value: typeof r.value == "string" ? r.value : "",
+              onChange: r.onChange,
+              onBlur: r.onBlur,
+              disabled: u,
+              error: !!i.error
+            }
+          ),
+          l && /* @__PURE__ */ e(O, { id: d, children: /* @__PURE__ */ e(N, { message: l, size: t, htmlFor: n }) })
+        ] });
+      }
+    }
+  );
+}
+export {
+  Q as RHFPhoneNumberField
+};

package/components/RHFs/RHFPhoneNumberField/RHFPhoneNumberField.slots.d.ts

@@ -0,0 +1,5 @@
+/** Keep the external label, phone input and validation message in one field stack. */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+/** Provide an accessible target for the input's error description. */
+export declare const ErrorStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+//# sourceMappingURL=RHFPhoneNumberField.slots.d.ts.map

package/components/RHFs/RHFPhoneNumberField/RHFPhoneNumberField.slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RHFPhoneNumberField.slots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/RHFs/RHFPhoneNumberField/RHFPhoneNumberField.slots.tsx"],"names":[],"mappings":"AAEA,sFAAsF;AACtF,eAAO,MAAM,UAAU,iVAKpB,CAAC;AAEJ,sEAAsE;AACtE,eAAO,MAAM,WAAW,qVAEtB,CAAC"}

package/components/RHFs/RHFPhoneNumberField/RHFPhoneNumberField.slots.js

@@ -0,0 +1,13 @@
+import { styled as o } from "@mui/material/styles";
+const r = o("div", { name: "M4LRHFPhoneNumberField", slot: "Root" })(({ theme: e }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: e.vars.size.baseSpacings["sp1-5"],
+  width: "100%"
+})), s = o("span", { name: "M4LRHFPhoneNumberField", slot: "Error" })({
+  display: "block"
+});
+export {
+  s as ErrorStyled,
+  r as RootStyled
+};

package/components/RHFs/RHFPhoneNumberField/index.d.ts

@@ -0,0 +1,3 @@
+export { RHFPhoneNumberField } from './RHFPhoneNumberField';
+export type { RHFPhoneNumberFieldProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/RHFs/RHFPhoneNumberField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/RHFs/RHFPhoneNumberField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC"}

package/components/RHFs/RHFPhoneNumberField/types.d.ts

@@ -0,0 +1,13 @@
+import { Control, FieldPath, FieldValues, UseControllerProps } from 'react-hook-form';
+import { LabelProps } from '@m4l/components';
+import { PhoneNumberFieldProps } from '../../PhoneNumberField';
+/** Props for a phone number stored as one international string in react-hook-form. */
+export interface RHFPhoneNumberFieldProps<TFieldValues extends FieldValues = FieldValues> extends Omit<PhoneNumberFieldProps, 'name' | 'value' | 'defaultValue' | 'onChange' | 'inputRef' | 'error'>, Pick<LabelProps, 'label' | 'symbol' | 'labelOverflow' | 'mandatory' | 'mandatoryMessage' | 'helperMessage' | 'htmlFor'> {
+    /** Path of the complete international phone number in the form. */
+    name: FieldPath<TFieldValues>;
+    /** Optional form control when no FormProvider is present. */
+    control?: Control<TFieldValues>;
+    /** react-hook-form validation rules for this field. */
+    rules?: UseControllerProps<TFieldValues>['rules'];
+}
+//# sourceMappingURL=types.d.ts.map

package/components/RHFs/RHFPhoneNumberField/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/RHFs/RHFPhoneNumberField/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEpE,sFAAsF;AACtF,MAAM,WAAW,wBAAwB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACtF,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACxG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,eAAe,GAAG,WAAW,GAAG,kBAAkB,GAAG,eAAe,GAAG,SAAS,CAAC;IACzH,mEAAmE;IACnE,IAAI,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC;CACnD"}

package/components/index.d.ts

@@ -14,6 +14,8 @@ export * from './ReportsViewer';
 export * from './TimelineCardsViewer';
 export * from './AddressLocation';
 export * from './RHFs/RHFAddressLocation';
+export * from './PhoneNumberField';
+export * from './RHFs/RHFPhoneNumberField';
 export * from './DevicesPicker';
 export * from './CheckableDevicesPicker';
 export * from './RHFs/RHFDevicesPicker';

package/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/gclick/src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,gCAAgC,EAAE,MAAM,QAAQ,CAAC;AAC1D,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,yCAAyC,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/gclick/src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,gCAAgC,EAAE,MAAM,QAAQ,CAAC;AAC1D,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,yCAAyC,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC"}

package/components/indicators/IndicatorCountryPhone/IndicatorCountryPhone.d.ts

@@ -0,0 +1,4 @@
+import { IndicatorCountryPhoneProps } from './types';
+/** Render an authenticated E.164 country selector with local flag artwork. */
+export declare function IndicatorCountryPhone(props: IndicatorCountryPhoneProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=IndicatorCountryPhone.d.ts.map

package/components/indicators/IndicatorCountryPhone/IndicatorCountryPhone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorCountryPhone.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/indicators/IndicatorCountryPhone/IndicatorCountryPhone.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAGV,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAEjB,8EAA8E;AAC9E,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2DAgYtE"}

package/components/indicators/IndicatorCountryPhone/IndicatorCountryPhone.js

@@ -0,0 +1,249 @@
+import { jsx as l, jsxs as $ } from "@emotion/react/jsx-runtime";
+import { useModuleDictionary as be } from "@m4l/core";
+import { useVirtualizer as Ie } from "@tanstack/react-virtual";
+import { useState as x, useRef as w, useId as Se, useMemo as Re, useCallback as Ee, useEffect as Q } from "react";
+import { INDICATOR_COUNTRY_PHONE_DEFAULT_VALUE as xe, INDICATOR_COUNTRY_PHONE_VISIBLE_ROWS as H, INDICATOR_COUNTRY_PHONE_ROW_HEIGHT as U, INDICATOR_COUNTRY_PHONE_ROW_GAP as J } from "./constants.js";
+import { resolveIndicatorCountryPhoneCountries as we } from "./countryOptions.js";
+import { resolveIndicatorCountryPhoneLabel as d, INDICATOR_COUNTRY_PHONE_DICTIONARY as u } from "./dictionary.js";
+import { RootStyled as D, SkeletonStyled as De, StatusButtonStyled as V, ChipStyled as Oe, CodeInputStyled as Te, TriggerStyled as _e, FlagStyled as X, PopoverStyled as Le, MenuStyled as Me, VirtualItemsStyled as Ne, MenuItemStyled as Ae, CodeStyled as ke, EmptyStateStyled as Pe } from "./IndicatorCountryPhone.slots.js";
+import { useCountryPhoneCatalog as $e } from "./hooks/useCountryPhoneCatalog/useCountryPhoneCatalog.js";
+function Ke(Z) {
+  const {
+    options: g,
+    value: v,
+    defaultValue: ee = xe,
+    onChange: te,
+    expanded: O,
+    defaultExpanded: ae = !1,
+    onExpandedChange: F,
+    disabled: T = !1,
+    chipProps: le,
+    popoverProps: ne,
+    className: m,
+    dataTestId: b
+  } = Z, [oe, re] = x(ee.toLowerCase()), [ie, se] = x(ae), [I, Y] = x(null), [S, p] = x(0), _ = w(null), L = w(null), h = w(null), R = w(!1), f = Se(), i = (v ?? oe).trim().toLowerCase(), a = $e({
+    enabled: g === void 0 || g.length > 0,
+    selectedValue: i
+  }), y = Re(
+    () => we(a.countries, g, a.locale),
+    [a.countries, a.locale, g]
+  ), ce = y.find((e) => e.value === i), de = a.selectedCountry?.value === i ? a.selectedCountry : a.countries.find((e) => e.value === i), n = ce ?? (v === void 0 ? y[0] : de) ?? (v !== void 0 && i ? {
+    apiId: i.toUpperCase(),
+    value: i,
+    label: i.toUpperCase(),
+    callingCode: "",
+    active: !1
+  } : void 0), ue = !!(n && y.some((e) => e.value === n.value)), { getLabel: s } = be(), he = d(
+    s,
+    u.callingCode,
+    "Country calling code"
+  ), fe = d(
+    s,
+    u.callingCodes,
+    "Country calling codes"
+  ), ge = d(
+    s,
+    u.empty,
+    "No countries available"
+  ), pe = d(
+    s,
+    u.loading,
+    "Loading country calling codes"
+  ), ye = d(
+    s,
+    u.noMatches,
+    "No matching country codes"
+  ), M = d(
+    s,
+    u.retry,
+    "Retry country calling codes"
+  ), Ce = d(
+    s,
+    u.unavailable,
+    "Country unavailable"
+  ), z = O ?? ie, ve = I?.replace(/\D/g, "") ?? "", r = y.filter((e) => (I !== null || e.value !== n?.value) && e.callingCode.slice(1).startsWith(ve)), N = y.some((e) => e.value !== n?.value), o = z && N && !T && !a.hasRefreshError, W = r.length > H, q = Math.max(
+    0,
+    Math.min(r.length, H) * U - J
+  ), A = Ie({
+    count: r.length,
+    getScrollElement: () => h.current,
+    estimateSize: () => U,
+    initialRect: { width: 59, height: q },
+    overscan: 2,
+    enabled: o
+  }), c = Ee((e) => {
+    e || Y(null), O === void 0 && se(e), F?.(e);
+  }, [O, F]);
+  Q(() => {
+    p((e) => Math.max(
+      0,
+      Math.min(e, r.length - 1)
+    ));
+  }, [r.length]), Q(() => {
+    if (!o)
+      return;
+    R.current && (h.current?.focus(), R.current = !1);
+    function e(t) {
+      _.current && !_.current.contains(t.target) && c(!1);
+    }
+    return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+  }, [o, c]);
+  function k(e) {
+    v === void 0 && re(e.value);
+    const t = {
+      value: e.value,
+      callingCode: e.callingCode,
+      label: e.label
+    };
+    te?.(t), c(!1), L.current?.focus();
+  }
+  function P(e) {
+    if (r.length === 0)
+      return;
+    const t = Math.max(0, Math.min(e, r.length - 1));
+    p(t), A.scrollToIndex(t, { align: "auto" });
+  }
+  if (g?.length === 0)
+    return null;
+  if (a.status === "loading")
+    return /* @__PURE__ */ l(D, { className: m, "data-testid": b, role: "status", "aria-label": pe, children: /* @__PURE__ */ l(De, { variant: "rounded", width: 49, height: 20 }) });
+  if (a.status === "error")
+    return /* @__PURE__ */ l(D, { className: m, "data-testid": b, children: /* @__PURE__ */ l(V, { type: "button", "aria-label": M, onClick: () => {
+      a.retry();
+    }, children: "Retry" }) });
+  if (!n)
+    return /* @__PURE__ */ l(D, { className: m, "data-testid": b, children: /* @__PURE__ */ l(V, { type: "button", "aria-label": ge, disabled: !0, children: "--" }) });
+  const B = n.flag, C = r[S] ?? r[0], K = A.getVirtualItems(), j = K.length > 0 ? K : Array.from(
+    { length: Math.min(r.length, H + 2) },
+    (e, t) => ({ index: t, start: t * U })
+  ), E = j.some((e) => e.index === S) ? C : void 0, me = n.callingCode ? `${n.label} ${n.callingCode}` : `${n.label} ${Ce}`;
+  return /* @__PURE__ */ $(
+    D,
+    {
+      ref: _,
+      ownerState: { expanded: o },
+      className: m,
+      "data-testid": b,
+      onKeyDown: (e) => {
+        e.key === "Escape" && o && (e.stopPropagation(), c(!1), L.current?.focus());
+      },
+      children: [
+        /* @__PURE__ */ l(
+          Oe,
+          {
+            ...le,
+            startIcon: /* @__PURE__ */ l(
+              _e,
+              {
+                ref: L,
+                type: "button",
+                "aria-label": a.hasRefreshError ? M : me,
+                "aria-haspopup": a.hasRefreshError ? void 0 : "listbox",
+                "aria-expanded": a.hasRefreshError ? void 0 : o,
+                "aria-controls": o ? f : void 0,
+                disabled: T || !N,
+                onClick: () => {
+                  if (a.hasRefreshError) {
+                    a.retry();
+                    return;
+                  }
+                  p(0), R.current = !o, c(!z);
+                },
+                children: /* @__PURE__ */ l(X, { "aria-hidden": "true", children: B ? /* @__PURE__ */ l(B, {}) : n.apiId })
+              }
+            ),
+            label: /* @__PURE__ */ l(
+              Te,
+              {
+                ownerState: {
+                  expanded: o,
+                  codeLength: Math.max(3, (I ?? n.callingCode).length)
+                },
+                type: "text",
+                role: "combobox",
+                "aria-label": he,
+                "aria-autocomplete": "list",
+                "aria-expanded": o,
+                "aria-controls": o ? f : void 0,
+                "aria-activedescendant": o && E ? `${f}-${E.value}` : void 0,
+                inputMode: "tel",
+                autoComplete: "off",
+                value: I ?? (n.callingCode || n.apiId),
+                disabled: T || !N || !ue || a.hasRefreshError,
+                onFocus: (e) => {
+                  R.current = !1, c(!0), e.currentTarget.select();
+                },
+                onChange: (e) => {
+                  const t = e.target.value.replace(/\D/g, "").slice(0, 3);
+                  Y(t ? `+${t}` : ""), p(0), h.current && (h.current.scrollTop = 0), c(!0);
+                },
+                onKeyDown: (e) => {
+                  e.key === "ArrowDown" && o ? (e.preventDefault(), h.current?.focus(), P(0)) : e.key === "Enter" && o && C && (e.preventDefault(), k(C));
+                }
+              }
+            )
+          }
+        ),
+        o && /* @__PURE__ */ $(Le, { ...ne, "data-scrollable": W, children: [
+          a.hasSelectedError && /* @__PURE__ */ l(V, { type: "button", "aria-label": M, onClick: () => {
+            a.retry();
+          }, children: "Retry" }),
+          /* @__PURE__ */ l(
+            Me,
+            {
+              id: f,
+              ref: h,
+              ownerState: { viewportHeight: q },
+              "data-scrollable": W,
+              role: "listbox",
+              tabIndex: 0,
+              "aria-label": fe,
+              "aria-activedescendant": E ? `${f}-${E.value}` : void 0,
+              onKeyDown: (e) => {
+                e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), P(S + (e.key === "ArrowDown" ? 1 : -1))) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), P(e.key === "Home" ? 0 : r.length - 1)) : (e.key === "Enter" || e.key === " ") && C && (e.preventDefault(), k(C));
+              },
+              children: /* @__PURE__ */ l(
+                Ne,
+                {
+                  ownerState: {
+                    totalHeight: Math.max(
+                      0,
+                      A.getTotalSize() - J
+                    )
+                  },
+                  children: j.map((e) => {
+                    const t = r[e.index], G = t.flag;
+                    return /* @__PURE__ */ $(
+                      Ae,
+                      {
+                        id: `${f}-${t.value}`,
+                        type: "button",
+                        role: "option",
+                        "aria-label": `${t.label} ${t.callingCode}`,
+                        "aria-selected": t.value === n.value,
+                        tabIndex: -1,
+                        "data-active": e.index === S,
+                        ownerState: { rowTop: e.start },
+                        onMouseEnter: () => p(e.index),
+                        onClick: () => k(t),
+                        children: [
+                          /* @__PURE__ */ l(X, { "aria-hidden": "true", children: G ? /* @__PURE__ */ l(G, {}) : t.apiId }),
+                          /* @__PURE__ */ l(ke, { children: t.callingCode })
+                        ]
+                      },
+                      t.value
+                    );
+                  })
+                }
+              )
+            }
+          ),
+          r.length === 0 && /* @__PURE__ */ l(Pe, { role: "status", children: ye })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Ke as IndicatorCountryPhone
+};