@arquimedes.co/eureka-forms 3.0.47-test → 3.0.49-new-steps

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.module.css

@@ -0,0 +1,531 @@
+/* =========================================================================
+   MaterialCalendarStep
+   ========================================================================= */
+
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    padding-top: 5px;
+    padding-bottom: 0;
+    box-sizing: border-box;
+}
+
+/* =========================================================================
+   Toolbar
+   ========================================================================= */
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 2px 8px;
+    flex-wrap: wrap;
+}
+
+/* View switcher */
+
+.viewSwitcher {
+    display: flex;
+    border: 1px solid var(--eureka-outline, #ddd);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.viewBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 10px;
+    border: none;
+    border-right: 1px solid var(--eureka-outline, #ddd);
+    background: transparent;
+    cursor: pointer;
+    color: var(--eureka-text, #555);
+    opacity: 0.55;
+    transition: background 0.15s, opacity 0.15s;
+}
+
+.viewBtn:last-child {
+    border-right: none;
+}
+
+.viewBtn:hover {
+    background: rgba(0, 0, 0, 0.04);
+    opacity: 0.85;
+}
+
+.viewBtnActive {
+    background: var(--eureka-primary, #1976d2) !important;
+    color: #fff !important;
+    opacity: 1 !important;
+}
+
+/* Nav */
+
+.navGroup {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+}
+
+.navBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--eureka-text, #555);
+    opacity: 0.55;
+    transition: opacity 0.15s, background 0.15s;
+}
+
+.navBtn:hover {
+    background: rgba(0, 0, 0, 0.05);
+    opacity: 1;
+}
+
+.navLabel {
+    font-weight: 600;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: capitalize;
+}
+
+.eventBadge {
+    font-size: 11px;
+    padding: 3px 8px;
+    border-radius: 100px;
+    background: var(--eureka-primary, #1976d2);
+    color: #fff;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.hintText {
+    font-size: 11px;
+    opacity: 0.4;
+    white-space: nowrap;
+    margin-left: auto;
+}
+
+/* =========================================================================
+   Calendar card container
+   ========================================================================= */
+
+.calendarCard {
+    border: 1px solid var(--eureka-outline, #e0e0e0);
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--eureka-bg, #fff);
+}
+
+/* =========================================================================
+   Time grid (week / day)
+   ========================================================================= */
+
+.gridWrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+
+.gridHeader {
+    display: grid;
+    border-bottom: 2px solid var(--eureka-outline, #e0e0e0);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--eureka-bg, #fff);
+}
+
+.cornerCell {
+    width: 48px;
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+}
+
+.dayHeader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 4px;
+    cursor: pointer;
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+    transition: background 0.1s;
+}
+
+.dayHeader:last-child {
+    border-right: none;
+}
+
+.dayHeader:hover {
+    background: rgba(0, 0, 0, 0.03);
+}
+
+.dayHeaderToday {
+    color: var(--eureka-primary, #1976d2);
+}
+
+.dayHeaderDow {
+    font-size: 11px;
+    text-transform: capitalize;
+    opacity: 0.6;
+}
+
+.dayHeaderNum {
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.1;
+}
+
+.todayCircle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: var(--eureka-primary, #1976d2);
+    color: #fff !important;
+}
+
+/* Body */
+
+.gridBody {
+    overflow-y: auto;
+    max-height: 520px;
+}
+
+.gridInner {
+    display: grid;
+}
+
+/* Hour labels */
+
+.hourLabels {
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+}
+
+.hourLabel {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding-right: 6px;
+    padding-top: 2px;
+    font-size: 10px;
+    opacity: 0.45;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+/* Day columns */
+
+.dayColumn {
+    position: relative;
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+    cursor: crosshair;
+    box-sizing: border-box;
+}
+
+.dayColumn:last-child {
+    border-right: none;
+}
+
+.hourLine {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+/* =========================================================================
+   Event blocks
+   ========================================================================= */
+
+.eventBlock {
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    border-radius: 4px;
+    padding: 2px 4px;
+    cursor: default;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+    opacity: 0.9;
+    transition: opacity 0.1s;
+    box-sizing: border-box;
+}
+
+.eventBlock:hover {
+    opacity: 1;
+    z-index: 2;
+}
+
+.eventLabel {
+    font-size: 11px;
+    font-weight: 600;
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.3;
+}
+
+.eventTime {
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.8);
+    white-space: nowrap;
+}
+
+.eventDeleteBtn {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.25);
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    color: #fff;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 1px;
+    line-height: 1;
+}
+
+.eventBlock:hover .eventDeleteBtn {
+    display: flex;
+}
+
+/* =========================================================================
+   Month view
+   ========================================================================= */
+
+.monthGrid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.monthDowHeader {
+    padding: 8px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-align: center;
+    opacity: 0.5;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    border-bottom: 1px solid var(--eureka-outline, #e0e0e0);
+}
+
+.monthCell {
+    min-height: 80px;
+    padding: 4px;
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+    border-bottom: 1px solid var(--eureka-outline, #e0e0e0);
+    cursor: pointer;
+    transition: background 0.1s;
+    overflow: hidden;
+}
+
+.monthCell:nth-child(7n) {
+    border-right: none;
+}
+
+.monthCell:hover {
+    background: rgba(0, 0, 0, 0.02);
+}
+
+.monthCellOutside {
+    opacity: 0.3;
+}
+
+.monthCellToday .monthCellNum {
+    color: var(--eureka-primary, #1976d2);
+}
+
+.monthCellNum {
+    font-size: 13px;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-bottom: 2px;
+    border-radius: 50%;
+}
+
+.monthEventDot {
+    font-size: 10px;
+    color: #fff;
+    border-radius: 3px;
+    padding: 1px 4px;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.monthMoreLabel {
+    font-size: 10px;
+    opacity: 0.5;
+    padding-left: 2px;
+}
+
+/* =========================================================================
+   Create popover
+   ========================================================================= */
+
+.popoverPaper {
+    border-radius: 12px !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
+    min-width: 260px;
+    max-width: 300px;
+}
+
+.popoverHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px 8px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+.popoverTitle {
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.popoverClose {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    opacity: 0.5;
+    padding: 2px;
+    border-radius: 4px;
+}
+
+.popoverClose:hover { opacity: 1; }
+
+.popoverBody {
+    padding: 12px 14px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.popoverLabel {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    opacity: 0.5;
+    margin-bottom: -4px;
+}
+
+.categoryGrid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.categoryChip {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border: 1px solid var(--eureka-outline, #ddd);
+    border-radius: 100px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 12px;
+    transition: border-color 0.15s, background 0.15s;
+}
+
+.categoryChip:hover {
+    border-color: var(--eureka-primary, #1976d2);
+}
+
+.categoryChipActive {
+    border-color: transparent !important;
+}
+
+.categoryDot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.popoverInput {
+    width: 100%;
+    padding: 7px 10px;
+    border: 1px solid var(--eureka-outline, #ccc);
+    border-radius: 6px;
+    font-size: 13px;
+    font-family: inherit;
+    box-sizing: border-box;
+    background: transparent;
+    color: inherit;
+    outline: none;
+    transition: border-color 0.15s;
+}
+
+.popoverInput:focus {
+    border-color: var(--eureka-primary, #1976d2);
+}
+
+.timeRow {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+.timeRow > div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.timeDash {
+    font-size: 16px;
+    font-weight: 300;
+    opacity: 0.4;
+    padding-bottom: 6px;
+}
+
+.createBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 9px 16px;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    margin-top: 4px;
+    transition: opacity 0.15s;
+    font-family: inherit;
+}
+
+.createBtn:hover {
+    opacity: 0.9;
+}

package/dist/FormSteps/LocationStep/LocationStep.d.ts

@@ -0,0 +1,10 @@
+import { LocationStep } from '../../@Types/LocationFormStep';
+import { StepProps } from '../Step';
+export interface LocationStepProps extends StepProps {
+    /** The LocationStep to display */
+    step: LocationStep;
+    /** The icon to display */
+    IconComponent?: React.ElementType;
+}
+declare function LocationStepComponent(props: LocationStepProps): JSX.Element;
+export default LocationStepComponent;

package/dist/FormSteps/LocationStep/LocationStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialLocationStep from './MaterialLocationStep/MaterialLocationStep';
+import { useAppSelector } from '../../hooks';
+function LocationStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialLocationStep, { ...props });
+        }
+    }
+}
+export default LocationStepComponent;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.d.ts

@@ -0,0 +1,3 @@
+import { LocationStepProps } from '../LocationStep';
+declare function MaterialLocationStep({ step, editable }: LocationStepProps): JSX.Element;
+export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { AddressFieldMode, LocationInputMode } from '../../../@Types/LocationFormStep';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkLocationField from '../../../Shared/ErkLocationField/ErkLocationField';
+import { fieldConfig } from '../../../Shared/ErkLocationField/addressFields';
+import { validateRestrictions } from '../../../Shared/ErkLocationField/locationRestrictions';
+import styles from './MaterialLocationStep.module.css';
+function MaterialLocationStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? null,
+        rules: {
+            required: step.required ? 'La ubicación es obligatoria' : undefined,
+            validate: (val) => {
+                if (!val)
+                    return step.required ? 'La ubicación es obligatoria' : true;
+                if (val.source === LocationInputMode.MANUAL) {
+                    // Un campo es obligatorio en manual solo si no está omitido (FIXED lo llena solo).
+                    const detail = val.addressDetail;
+                    const isRequired = (key) => fieldConfig(step.addressFields, key).mode !== AddressFieldMode.OMIT;
+                    if (step.required && isRequired('street') && !detail?.street)
+                        return 'Por favor completa la calle en el formulario manual.';
+                    if (step.required && isRequired('city') && !detail?.city)
+                        return 'Por favor completa la ciudad en el formulario manual.';
+                    if (step.required && isRequired('country') && !detail?.country)
+                        return 'Por favor completa el país en el formulario manual.';
+                    return true;
+                }
+                if (val.latitude === undefined || val.longitude === undefined) {
+                    return step.required ? 'Coordenadas geográficas no capturadas.' : true;
+                }
+                // Restricciones geográficas (radio / geofence).
+                return validateRestrictions(val.latitude, val.longitude, step.restrictions) ?? true;
+            },
+        },
+    });
+    return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [step.label && _jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] }), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
+}
+export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.module.css

@@ -0,0 +1,18 @@
+.container {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 5px 10px 0;
+    box-sizing: border-box;
+}
+
+.label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--eureka-text, #333);
+}
+
+.required {
+    color: var(--eureka-error, #e53935);
+}

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.d.ts

@@ -0,0 +1,3 @@
+import { NumberStepProps } from '../NumberStep';
+declare function MaterialNumberStep({ step, editable }: NumberStepProps): JSX.Element;
+export default MaterialNumberStep;