@m4l/gclick 0.26.0 → 0.27.0-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 { IndicatorFlagOwnerState, IndicatorFlagSlotsType } from '../components/indicators/IndicatorFlag/types';
 import { VideoTimeLineSelectorOwnerState, VideoTimeLineSelectorSlotsType } from '../components/VideoTimeLineSelector/types';
 import { VideoPlayerOwnerState, VideoPlayerSlotsType } from '../components/VideoPlayer/types';
 import { CameraStreamOwnerState, CameraStreamSlotsStyledType } from '../components/CameraStream/types';
@@ -30,6 +31,7 @@ declare module '@mui/material/styles' {
     M4LCSQSignal: IndicatorCSQSlotsType;
     M4LIndicatorBattery: IndicatorBatterySlotsType;
     M4LIndicatorValueStatus: IndicatorValueStatusSlotsType;
+    M4LIndicatorFlag: IndicatorFlagSlotsType;
     M4LVideoTimeLineSelector: VideoTimeLineSelectorSlotsType;
     M4LVideoPlayer: VideoPlayerSlotsType;
     M4LCameraStream: CameraStreamSlotsStyledType;
@@ -48,6 +50,7 @@ declare module '@mui/material/styles' {
     M4LCSQSignal:  Partial<IndicatorCSQOwnerState>;
     M4LIndicatorBattery:  Partial<IndicatorBatteryOwnerState>;
     M4LIndicatorValueStatus:  Partial<IndicatorValueStatusOwnerState>;
+    M4LIndicatorFlag: Partial<IndicatorFlagOwnerState>;
     M4LVideoTimeLineSelector:  Partial<VideoTimeLineSelectorOwnerState>;
     M4LVideoPlayer: Partial<VideoPlayerOwnerState>;
     M4LCameraStream: Partial<CameraStreamOwnerState>;
@@ -101,6 +104,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorValueStatus'];
       variants?: ComponentsVariants['M4LIndicatorValueStatus'];
     };
+    M4LIndicatorFlag?: {
+      defaultProps?: ComponentsPropsList['M4LIndicatorFlag'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorFlag'];
+      variants?: ComponentsVariants['M4LIndicatorFlag'];
+    };
     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":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA4BrD,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,oDAuE5D"}

package/components/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,86 @@
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { TextField as z } from "@m4l/components";
+import { InputAdornment as A } from "@mui/material";
+import { styled as N } from "@mui/material/styles";
+import { useMemo as O, useState as v } from "react";
+import { IndicatorFlag as w } from "../indicators/IndicatorFlag/IndicatorFlag.js";
+import { resolveIndicatorFlagCountries as B } from "../indicators/IndicatorFlag/countryOptions.js";
+import { splitPhoneNumber as D } from "./phoneNumber.js";
+const T = N(z, {
+  name: "M4LPhoneNumberField",
+  slot: "Root",
+  shouldForwardProp: (t) => t !== "inputHeight"
+})(({ theme: t, size: n, inputHeight: a }) => {
+  const r = a === "compact" ? t.vars.size.baseSpacings.sp6 : n === "small" ? t.vars.size.baseSpacings.sp8 : t.vars.size.baseSpacings.sp9;
+  return {
+    "&&&& .MuiInputBase-root": {
+      height: r,
+      minHeight: r,
+      overflow: "visible"
+    },
+    "&&&& .MuiInputAdornment-root": {
+      alignSelf: "stretch",
+      display: "flex",
+      alignItems: "center",
+      height: "auto",
+      maxHeight: "none"
+    }
+  };
+});
+function K(t) {
+  const {
+    value: n,
+    defaultValue: a = "",
+    onChange: r,
+    options: i,
+    defaultCountry: C = "es",
+    onCountryChange: b,
+    indicatorProps: y,
+    inputHeight: P = "comfortable",
+    variant: I = "contained",
+    disabled: d = !1,
+    readOnly: p = !1,
+    InputProps: c,
+    autoComplete: F = "tel-national",
+    ...m
+  } = t, l = O(() => B(i), [i]), [S, x] = v(a), [g, H] = v(C), M = n ?? S, { country: V, nationalDigits: s } = D(M, l, g), o = V ?? l.find((e) => e.value === g) ?? l[0];
+  function f(e) {
+    n === void 0 && x(e), r?.(e);
+  }
+  function $(e) {
+    const h = e.target.value.replace(/\D/g, "");
+    f(h && o ? `${o.callingCode}${h}` : "");
+  }
+  return /* @__PURE__ */ u(
+    T,
+    {
+      ...m,
+      inputHeight: P,
+      variant: I,
+      value: s,
+      onChange: $,
+      disabled: d || !o,
+      readOnly: p,
+      autoComplete: F,
+      InputProps: {
+        ...c,
+        type: "tel",
+        startAdornment: o ? /* @__PURE__ */ u(A, { position: "start", children: /* @__PURE__ */ u(
+          w,
+          {
+            ...y,
+            options: i,
+            value: o.value,
+            disabled: d || p || !!(c?.readOnly || m.inputProps?.readOnly),
+            onChange: (e) => {
+              H(e.value), f(s ? `${e.callingCode}${s}` : ""), b?.(e);
+            }
+          }
+        ) }) : void 0
+      }
+    }
+  );
+}
+export {
+  K 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,7 @@
+import { IndicatorFlagCountry } from '../indicators/IndicatorFlag/countryStock.generated';
+/** Extract the national digits and best matching country from an international value. */
+export declare function splitPhoneNumber(value: string, countries: readonly IndicatorFlagCountry[], preferredCountry: string): {
+    country: IndicatorFlagCountry | undefined;
+    nationalDigits: string;
+};
+//# 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,oBAAoB,EAAE,MAAM,oDAAoD,CAAC;AAE/F,yFAAyF;AACzF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,SAAS,oBAAoB,EAAE,EAC1C,gBAAgB,EAAE,MAAM,GACvB;IAAE,OAAO,EAAE,oBAAoB,GAAG,SAAS,CAAC;IAAC,cAAc,EAAE,MAAM,CAAA;CAAE,CAevE"}

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,25 @@
+import { TextField } from '@m4l/components';
+import { ComponentProps } from 'react';
+import { IndicatorFlagOption, IndicatorFlagProps } from '../indicators/IndicatorFlag/types';
+type TextFieldProps = ComponentProps<typeof TextField>;
+/** 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: IndicatorFlagOption) => void;
+    /** Customize the indicator's chip and popover without replacing its country/value contract. */
+    indicatorProps?: Omit<IndicatorFlagProps, '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,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAEjG,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAEvD,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,mBAAmB,KAAK,IAAI,CAAC;IACzD,+FAA+F;IAC/F,cAAc,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;IAC1G,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,4 +14,6 @@ export * from './ReportsViewer';
 export * from './TimelineCardsViewer';
 export * from './AddressLocation';
 export * from './RHFs/RHFAddressLocation';
+export * from './PhoneNumberField';
+export * from './RHFs/RHFPhoneNumberField';
 //# sourceMappingURL=index.d.ts.map

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"}
+{"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"}

package/components/indicators/IndicatorFlag/IndicatorFlag.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorFlag.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/indicators/IndicatorFlag/IndicatorFlag.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAuB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEvE,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2DAqPtD"}

package/components/indicators/IndicatorFlag/IndicatorFlag.js

@@ -0,0 +1,168 @@
+import { jsxs as w, jsx as a } from "@emotion/react/jsx-runtime";
+import { useVirtualizer as ee } from "@tanstack/react-virtual";
+import { useMemo as te, useState as g, useRef as h, useId as ne, useCallback as le, useEffect as ae } from "react";
+import { INDICATOR_FLAG_VISIBLE_ROWS as E, INDICATOR_FLAG_ROW_HEIGHT as A, INDICATOR_FLAG_ROW_GAP as L } from "./constants.js";
+import { resolveIndicatorFlagCountries as oe } from "./countryOptions.js";
+import { RootStyled as re, ChipStyled as ie, CodeInputStyled as se, TriggerStyled as ce, FlagStyled as P, PopoverStyled as de, MenuStyled as ue, MenuItemStyled as fe, CodeStyled as pe, EmptyStateStyled as ge } from "./IndicatorFlag.slots.js";
+function xe(V) {
+  const {
+    options: k,
+    value: M,
+    defaultValue: z = "es",
+    onChange: G,
+    expanded: m,
+    defaultExpanded: H = !1,
+    onExpandedChange: R,
+    disabled: y = !1,
+    chipProps: N,
+    popoverProps: W,
+    className: K,
+    dataTestId: j
+  } = V, d = te(() => oe(k), [k]), [Q, B] = g(z), [U, q] = g(H), [u, $] = g(null), [v, f] = g(0), b = h(null), C = h(null), s = h(null), p = h(!1), c = ne(), r = d.find((e) => e.value === (M ?? Q)) ?? d[0], F = m ?? U, J = u?.replace(/\D/g, "") ?? "", l = d.filter((e) => (u !== null || e.value !== r?.value) && e.callingCode.slice(1).startsWith(J)), x = d.length > 1, n = F && x && !y, T = l.length > E, _ = Math.max(0, Math.min(l.length, E) * A - L), I = ee({
+    count: l.length,
+    getScrollElement: () => s.current,
+    estimateSize: () => A,
+    initialRect: { width: 59, height: _ },
+    overscan: 2,
+    enabled: n
+  }), i = le((e) => {
+    e || $(null), m === void 0 && q(e), R?.(e);
+  }, [m, R]);
+  if (ae(() => {
+    if (!n)
+      return;
+    p.current && (s.current?.focus(), p.current = !1);
+    function e(t) {
+      b.current && !b.current.contains(t.target) && i(!1);
+    }
+    return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+  }, [n, i]), !r)
+    return null;
+  function S(e) {
+    M === void 0 && B(e.value);
+    const t = {
+      value: e.value,
+      callingCode: e.callingCode,
+      label: e.label
+    };
+    G?.(t), i(!1), C.current?.focus();
+  }
+  function D(e) {
+    if (l.length === 0)
+      return;
+    const t = Math.max(0, Math.min(e, l.length - 1));
+    f(t), I.scrollToIndex(t, { align: "auto" });
+  }
+  const X = r.flag, o = l[v] ?? l[0], O = I.getVirtualItems(), Y = O.length > 0 ? O : Array.from({ length: Math.min(l.length, E + 2) }, (e, t) => ({
+    index: t,
+    start: t * A
+  }));
+  return /* @__PURE__ */ w(
+    re,
+    {
+      ref: b,
+      ownerState: { expanded: n },
+      className: K,
+      "data-testid": j,
+      onKeyDown: (e) => {
+        e.key === "Escape" && n && (e.stopPropagation(), i(!1), C.current?.focus());
+      },
+      children: [
+        /* @__PURE__ */ a(
+          ie,
+          {
+            ...N,
+            startIcon: /* @__PURE__ */ a(
+              ce,
+              {
+                ref: C,
+                type: "button",
+                "aria-label": `${r.label} ${r.callingCode}`,
+                "aria-haspopup": "listbox",
+                "aria-expanded": n,
+                "aria-controls": n ? c : void 0,
+                disabled: y || !x,
+                onClick: () => {
+                  f(0), p.current = !n, i(!F);
+                },
+                children: /* @__PURE__ */ a(P, { "aria-hidden": "true", children: /* @__PURE__ */ a(X, {}) })
+              }
+            ),
+            label: /* @__PURE__ */ a(
+              se,
+              {
+                ownerState: { expanded: n, codeLength: Math.max(3, (u ?? r.callingCode).length) },
+                type: "text",
+                role: "combobox",
+                "aria-label": "Country calling code",
+                "aria-autocomplete": "list",
+                "aria-expanded": n,
+                "aria-controls": n ? c : void 0,
+                "aria-activedescendant": n && o ? `${c}-${o.value}` : void 0,
+                inputMode: "tel",
+                autoComplete: "off",
+                value: u ?? r.callingCode,
+                disabled: y || !x,
+                onFocus: (e) => {
+                  p.current = !1, i(!0), e.currentTarget.select();
+                },
+                onChange: (e) => {
+                  const t = e.target.value.replace(/\D/g, "").slice(0, 3);
+                  $(t ? `+${t}` : ""), f(0), s.current && (s.current.scrollTop = 0), i(!0);
+                },
+                onKeyDown: (e) => {
+                  e.key === "ArrowDown" && n ? (e.preventDefault(), s.current?.focus(), D(0)) : e.key === "Enter" && n && o && (e.preventDefault(), S(o));
+                }
+              }
+            )
+          }
+        ),
+        n && /* @__PURE__ */ w(de, { ...W, "data-scrollable": T, children: [
+          /* @__PURE__ */ a(
+            ue,
+            {
+              id: c,
+              ref: s,
+              "data-scrollable": T,
+              role: "listbox",
+              tabIndex: 0,
+              "aria-label": "Country calling codes",
+              "aria-activedescendant": o ? `${c}-${o.value}` : void 0,
+              style: { height: _ },
+              onKeyDown: (e) => {
+                e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), D(v + (e.key === "ArrowDown" ? 1 : -1))) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), D(e.key === "Home" ? 0 : l.length - 1)) : (e.key === "Enter" || e.key === " ") && o && (e.preventDefault(), S(o));
+              },
+              children: /* @__PURE__ */ a("div", { style: { position: "relative", height: Math.max(0, I.getTotalSize() - L) }, children: Y.map((e) => {
+                const t = l[e.index], Z = t.flag;
+                return /* @__PURE__ */ w(
+                  fe,
+                  {
+                    id: `${c}-${t.value}`,
+                    type: "button",
+                    role: "option",
+                    "aria-label": `${t.label} ${t.callingCode}`,
+                    "aria-selected": !1,
+                    tabIndex: -1,
+                    "data-active": e.index === v,
+                    style: { top: e.start },
+                    onMouseEnter: () => f(e.index),
+                    onClick: () => S(t),
+                    children: [
+                      /* @__PURE__ */ a(P, { "aria-hidden": "true", children: /* @__PURE__ */ a(Z, {}) }),
+                      /* @__PURE__ */ a(pe, { children: t.callingCode })
+                    ]
+                  },
+                  t.value
+                );
+              }) })
+            }
+          ),
+          l.length === 0 && /* @__PURE__ */ a(ge, { role: "status", children: "No matching country codes" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  xe as IndicatorFlag
+};

package/components/indicators/IndicatorFlag/IndicatorFlag.slots.d.ts

@@ -0,0 +1,31 @@
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const TriggerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import('react').ClassAttributes<HTMLButtonElement> | keyof import('react').ButtonHTMLAttributes<HTMLButtonElement>>, {}>;
+export declare const ChipStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('@m4l/components').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const PopoverStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const MenuStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const MenuItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import('react').ClassAttributes<HTMLButtonElement> | keyof import('react').ButtonHTMLAttributes<HTMLButtonElement>>, {}>;
+export declare const FlagStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const CodeStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const CodeInputStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import('react').ClassAttributes<HTMLInputElement> | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, {}>;
+export declare const EmptyStateStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('./types').IndicatorFlagOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+//# sourceMappingURL=IndicatorFlag.slots.d.ts.map

package/components/indicators/IndicatorFlag/IndicatorFlag.slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorFlag.slots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/indicators/IndicatorFlag/IndicatorFlag.slots.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU;;6NAAoG,CAAC;AAC5H,eAAO,MAAM,aAAa;;qPAA6G,CAAC;AACxI,eAAO,MAAM,UAAU;;UAAmG,CAAC;AAC3H,eAAO,MAAM,aAAa;;6NAA0G,CAAC;AACrI,eAAO,MAAM,UAAU;;6NAAoG,CAAC;AAC5H,eAAO,MAAM,cAAc;;qPAA+G,CAAC;AAC3I,eAAO,MAAM,UAAU;;iOAAqG,CAAC;AAC7H,eAAO,MAAM,UAAU;;iOAAqG,CAAC;AAC7H,eAAO,MAAM,eAAe;;+OAAgH,CAAC;AAC7I,eAAO,MAAM,gBAAgB;;iOAAiH,CAAC"}

package/components/indicators/IndicatorFlag/IndicatorFlag.slots.js

@@ -0,0 +1,18 @@
+import { Chip as m } from "@m4l/components";
+import { styled as t } from "@mui/material/styles";
+import { INDICATOR_FLAG_COMPONENT_KEY as o } from "./constants.js";
+import { indicatorFlagStyles as e } from "./IndicatorFlag.styles.js";
+import { IndicatorFlagSlots as n } from "./slots.js";
+const d = t("div", { name: o, slot: n.root })(e.root), i = t("button", { name: o, slot: n.trigger })(e.trigger), c = t(m, { name: o, slot: n.chip })(e.chip), y = t("div", { name: o, slot: n.popover })(e.popover), S = t("div", { name: o, slot: n.menu })(e.menu), u = t("button", { name: o, slot: n.menuItem })(e.menuItem), g = t("span", { name: o, slot: n.flag })(e.flag), I = t("span", { name: o, slot: n.code })(e.code), f = t("input", { name: o, slot: n.codeInput })(e.codeInput), v = t("span", { name: o, slot: n.emptyState })(e.emptyState);
+export {
+  c as ChipStyled,
+  f as CodeInputStyled,
+  I as CodeStyled,
+  v as EmptyStateStyled,
+  g as FlagStyled,
+  u as MenuItemStyled,
+  S as MenuStyled,
+  y as PopoverStyled,
+  d as RootStyled,
+  i as TriggerStyled
+};

package/components/indicators/IndicatorFlag/IndicatorFlag.styles.d.ts

@@ -0,0 +1,4 @@
+import { IndicatorFlagStyles } from './types';
+/** Themeable slots for the compact country chip and its option panel. */
+export declare const indicatorFlagStyles: IndicatorFlagStyles;
+//# sourceMappingURL=IndicatorFlag.styles.d.ts.map

package/components/indicators/IndicatorFlag/IndicatorFlag.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorFlag.styles.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/indicators/IndicatorFlag/IndicatorFlag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,yEAAyE;AACzE,eAAO,MAAM,mBAAmB,EAAE,mBA0IjC,CAAC"}