@randstad-uca/design-system 1.0.45 → 1.0.48

package/dist/components/Button.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import '../styles/buttons.css';
 export declare class RandstadButton extends LitElement {
-    variant: 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-round' | 'button-card';
+    variant: 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-round' | 'button-card' | 'button-icon';
     size: 'md' | 'lg';
     label: string;
     loader: boolean;

package/dist/components/DatePicker.d.ts

@@ -6,14 +6,17 @@ export declare class DatePickerComponent extends LitElement {
     value: string;
     required: boolean;
     disabled: boolean;
-    error: boolean;
     width?: string;
     isRenderClearButton: boolean;
     minDate?: string;
     maxDate?: string;
+    error: boolean;
+    errorMessage: string | null;
+    optional: boolean;
+    helper: string | null;
+    helperAlign: 'left' | 'center' | 'right' | 'justify';
     private isOpen;
     private selectedDate;
-    /** La fecha que determina el mes y año actualmente visibles en el calendario. */
     private viewDate;
     private isMobile;
     private calendarWidth;
@@ -50,13 +53,6 @@ export declare class DatePickerComponent extends LitElement {
       * Actualiza el estado isMobile según el ancho de la ventana.
     */
     private updateResponsiveMode;
-    /**
-      * Actualiza el componente cuando una propiedad cambia.
-      * Se encarga de parsear la fecha de la propiedad `value` al estado `selectedDate`.
-     
-      * @param changedProperties - Mapa de propiedades que han cambiado.
-    */
-    update(changedProperties: Map<string, any>): void;
     /**
       * Maneja el evento de entrada del usuario en el input.
       * Valida el formato de la fecha y actualiza el estado del componente.
@@ -99,14 +95,56 @@ export declare class DatePickerComponent extends LitElement {
     */
     private closeOverlay;
     /**
-      * Función auxiliar para convertir una cadena de fecha YYYY-MM-DD
-      * a un objeto Date sin problemas de zona horaria.
+      * Analiza la propiedad 'value' externa y actualiza el estado interno del componente.
+      * Se ejecuta cuando una propiedad cambia desde fuera (p. ej., Storybook, componente padre).
+      * No emite eventos ni interactúa con el DOM para evitar bucles de renderizado.
+      
+      * @param value La cadena de fecha pasada desde una propiedad externa.
+    */
+    private _syncValue;
+    /**
+      * Valida la entrada del usuario en el campo de texto.
+     
+      * Este método se llama con cada pulsación de tecla o cambio en el input.
+      * Se encarga de validar el formato, verificar si la fecha está dentro de los límites
+      * y de actualizar el estado de error y el valor del input.
+    
+      * @param value La cadena de fecha que el usuario ha introducido.
+      * @param fromInput Indica si la llamada proviene directamente de la interacción del usuario.
+    */
+    private _parseAndValidateDate;
+    /**
+      * Intenta analizar una cadena de fecha en múltiples formatos.
+      * Este método es la fuente de la verdad para el análisis de fechas.
+      * Soporta los formatos 'dd-MM-yyyy' y 'yyyy-MM-dd', retornando un objeto Date.
   
-      * @param dateString - La cadena de fecha a parsear.
-      * @returns Un objeto Date o null si la cadena es inválida.
+      * @param dateString La cadena de fecha a analizar.
+      * @returns Un objeto Date si es válido, de lo contrario, null.
+    */
+    private _parseDate;
+    /**
+      * Analiza una cadena de fecha con formato 'yyyy-MM-dd'.
+      * Este método auxiliar ayuda a procesar la propiedad minDate y maxDate.
+      
+      * @param dateString La cadena de fecha en formato 'yyyy-MM-dd'.
+      
+      * @returns Un objeto Date si es válido, de lo contrario, null.
     */
     private _parseDateString;
+    /**
+      * Retorna el rango de fechas válido del componente.
+      * Analiza las propiedades 'minDate' y 'maxDate' para determinar el rango permitido.
+  
+      * @returns Un objeto con las fechas mínima y máxima, o null si no se define un rango.
+    */
     private _getValidDateRange;
+    /**
+      * Verifica si una fecha dada está dentro del rango permitido.
+  
+      * @param date La fecha a verificar.
+    
+      * @returns Verdadero si la fecha está dentro de los límites, de lo contrario, falso.
+    */
     private _isWithinBounds;
     /**
       * Renderiza el componente DatePicker, incluyendo el input, botones y el overlay del calendario.

package/dist/components/File.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import '../components/Button';
+export declare class UploadFile extends LitElement {
+    files: File[];
+    maxFiles: number;
+    acceptedFileTypes: string[];
+    maxFileSize: number;
+    disabled: boolean;
+    width?: string;
+    label: string;
+    labelColor: string;
+    buttonText: string;
+    helper: string | null;
+    helperAlign: 'left' | 'center' | 'right' | 'justify';
+    error: boolean;
+    errorMessage: string | null;
+    required: boolean;
+    optional: boolean;
+    private fileInput;
+    static styles: import("lit").CSSResult;
+    updated(changedProperties: Map<string, any>): void;
+    private applyWidth;
+    /**
+        * Convierte una lista de tipos MIME en un string de nombres de archivos legibles.
+        * Por ejemplo, 'application/pdf' se convierte en 'PDF'.
+        
+        * @returns Un string con los nombres de archivo aceptados, separados por comas.
+   */
+    private getReadableFileTypes;
+    /**
+        * Valida una lista de archivos contra el tamaño máximo y los tipos de archivo aceptados.
+        
+        * @param filesToValidate Array de objetos File a validar.
+
+        * @returns true si todos los archivos son válidos, de lo contrario false.
+    */
+    private validateFiles;
+    /**
+        * Maneja los archivos seleccionados por el usuario.
+        * Realiza validaciones de cantidad y tipo, y actualiza la lista de archivos.
+        
+        * @param files La lista de archivos de un input de tipo file.
+    */
+    private handleFiles;
+    /**
+        * Gestiona el evento de cambio en el input de tipo file.
+
+        * @param e El evento de cambio.
+    */
+    private onFileInputChange;
+    /**
+        * Elimina un archivo de la lista de archivos seleccionados.
+
+        * @param index El índice del archivo a eliminar.
+    */
+    private removeFile;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/Form.d.ts

@@ -21,6 +21,9 @@ export declare class RandstadForm extends LitElement {
     required: boolean;
     optional: boolean;
     helpLink?: string;
+    heightTextArea?: string;
+    maxHeightTextArea?: string;
+    helperAlign: 'left' | 'center' | 'right' | 'justify';
     static styles: import("lit").CSSResult;
     private togglePassword;
     private handleInput;

package/dist/index.d.ts

@@ -16,6 +16,9 @@ export * from './components/Snackbar';
 export * from './components/Stepper';
 export * from './components/Tabs';
 export * from './components/Upload';
+export * from './components/DatePicker';
+export * from './components/CalendarOverlay';
+export * from './components/File';
 import './styles/colors.css';
 import './styles/fonts.css';
 import './styles/buttons.css';