@randstad-uca/design-system 1.0.60 → 1.0.61

package/dist/assets/img/image-upload-error.svg

@@ -0,0 +1,15 @@
+<svg width="104" height="103" viewBox="0 0 104 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.727539" y="0.227295" width="102.545" height="102.545" rx="51.2727" fill="#E00F0F" fill-opacity="0.1"/>
+<g clip-path="url(#clip0_3996_5343)">
+<path d="M69.5511 54.771L73.3627 50.9594C73.8178 50.5043 73.8178 49.7648 73.3627 49.3097C72.9076 48.8545 72.168 48.8545 71.7129 49.3097L67.9013 53.1212L64.0898 49.3097C63.6346 48.8545 62.8951 48.8545 62.44 49.3097C61.9849 49.7648 61.9849 50.5043 62.44 50.9594L66.2515 54.771L62.44 58.5826C61.9849 59.0377 61.9849 59.7773 62.44 60.2324C62.6675 60.46 62.952 60.5737 63.2364 60.5737C63.5209 60.5737 63.8053 60.46 64.0329 60.2324L67.8445 56.4208L71.656 60.2324C71.8836 60.46 72.168 60.5737 72.4525 60.5737C72.7369 60.5737 73.0214 60.46 73.2489 60.2324C73.704 59.7773 73.704 59.0377 73.2489 58.5826L69.5511 54.771Z" fill="#E00F0F"/>
+<path d="M63.2363 63.9303C62.6106 63.9303 62.0986 64.4424 62.0986 65.0681V69.6193C62.0986 70.8708 61.0746 71.838 59.8799 71.838H33.8246C32.573 71.838 31.6059 70.814 31.6059 69.6193V33.3239C31.6059 32.0723 32.6299 31.1052 33.8246 31.1052H59.8799C61.1314 31.1052 62.0986 32.1292 62.0986 33.3239V44.4742C62.0986 45.1 62.6106 45.612 63.2363 45.612C63.8621 45.612 64.3741 45.1 64.3741 44.4742V33.3239C64.3741 30.8208 62.3261 28.7728 59.823 28.7728H33.8246C31.3215 28.7728 29.2734 30.8208 29.2734 33.3239V69.6762C29.2734 72.1793 31.3215 74.2273 33.8246 74.2273H59.8799C62.383 74.2273 64.431 72.1793 64.431 69.6762V65.125C64.431 64.4424 63.919 63.9303 63.2363 63.9303Z" fill="#E00F0F"/>
+<path d="M54.7601 38.6708H38.8311C38.2054 38.6708 37.6934 39.1828 37.6934 39.8086C37.6934 40.4344 38.2054 40.9464 38.8311 40.9464H54.7601C55.3859 40.9464 55.8979 40.4344 55.8979 39.8086C55.8979 39.1828 55.3859 38.6708 54.7601 38.6708Z" fill="#E00F0F"/>
+<path d="M54.7601 45.4982H38.8311C38.2054 45.4982 37.6934 46.0102 37.6934 46.636C37.6934 47.2617 38.2054 47.7737 38.8311 47.7737H54.7601C55.3859 47.7737 55.8979 47.2617 55.8979 46.636C55.8979 46.0102 55.3859 45.4982 54.7601 45.4982Z" fill="#E00F0F"/>
+<path d="M54.7601 52.3244H38.8311C38.2054 52.3244 37.6934 52.8364 37.6934 53.4622C37.6934 54.088 38.2054 54.6 38.8311 54.6H54.7601C55.3859 54.6 55.8979 54.088 55.8979 53.4622C55.8979 52.7795 55.3859 52.3244 54.7601 52.3244Z" fill="#E00F0F"/>
+</g>
+<defs>
+<clipPath id="clip0_3996_5343">
+<rect width="54.5455" height="54.5455" fill="white" transform="translate(24.7275 24.2273)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/components/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 export declare class AccordionPanel extends LitElement {
     title: string;
     private isOpen;
@@ -8,6 +8,5 @@ export declare class AccordionPanel extends LitElement {
     disconnectedCallback(): void;
     private handleResize;
     private toggle;
-    private renderIcon;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }

package/dist/components/CalendarOverlay.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, TemplateResult } from "lit";
 export declare class CalendarOverlay extends LitElement {
     /**
       * La fecha actualmente seleccionada por el usuario.
@@ -19,7 +19,7 @@ export declare class CalendarOverlay extends LitElement {
       * Determina qué cuadrícula se renderiza en el overlay.
     */
     private currentView;
-    static styles: import("lit").CSSResult;
+    static styles: (import("lit").CSSResult | CSSStyleSheet)[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
@@ -105,5 +105,5 @@ export declare class CalendarOverlay extends LitElement {
       
       * @returns {TemplateResult} Plantilla HTML del overlay del calendario.
     */
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }

package/dist/components/Carousel.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import "./CarouselCards";
+export declare class Carousel extends LitElement {
+    cards: any[];
+    private isDown;
+    private isDragging;
+    private prevX;
+    static styles: import("lit").CSSResult;
+    disconnectedCallback(): void;
+    private get slider();
+    private handleMouseDown;
+    private handleMouseLeave;
+    private handleMouseUp;
+    private handleMouseMove;
+    firstUpdated(): void;
+    private baseAddListeners;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/CarouselCards.d.ts

@@ -6,6 +6,10 @@ export declare class CarouselCard extends LitElement {
     description: string;
     buttonLabel: string;
     cardId: string;
+    onClick: any;
     static styles: import("lit").CSSResult;
+    private handleButtonClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/File.d.ts

@@ -1,52 +1,18 @@
-import { BaseControl } from '../helpers/BaseControl';
+import { TemplateResult } from 'lit';
+import { BaseUpload } from '../helpers/BaseUpload';
 import '../components/Button';
-export declare class UploadFile extends BaseControl {
+export declare class UploadFile extends BaseUpload {
     width?: string;
-    files: File[];
     maxFiles: number;
     acceptedFileTypes: string[];
     maxFileSize: number;
     buttonText: string;
-    simulatedDelay: number;
-    private loading;
-    private progress;
-    private fileInput;
     static styles: import("lit").CSSResult;
+    private getFileConfig;
+    private getTextAcceptedFileTypes;
+    private getTextMaxFileSize;
     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>;
+    render(): TemplateResult<1>;
 }

package/dist/components/Form.d.ts

@@ -1,3 +1,4 @@
+import { TemplateResult } from 'lit';
 import { BaseControl } from '../helpers/BaseControl';
 export declare class RandstadForm extends BaseControl {
     keydown: 'number' | 'text' | undefined;
@@ -12,7 +13,7 @@ export declare class RandstadForm extends BaseControl {
     maxLength?: number;
     heightTextArea?: string;
     maxHeightTextArea?: string;
-    static styles: import("lit").CSSResult;
+    static styles: (import("lit").CSSResult | CSSStyleSheet)[];
     private togglePassword;
     private handleInput;
     private handleClear;
@@ -21,5 +22,5 @@ export declare class RandstadForm extends BaseControl {
     onlyNumeric(event: Event): void;
     onlyText(event: Event): void;
     private handleKeyDown;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }

package/dist/components/Icon.d.ts

@@ -2,9 +2,10 @@ import { LitElement } from 'lit';
 export declare class IconComponent extends LitElement {
     name: string;
     size: string;
+    color: string;
+    private svgContent;
     static styles: import("lit").CSSResult;
-    connectedCallback(): void;
     updated(changedProps: Map<string, unknown>): void;
     loadIcon(): Promise<void>;
-    render(): null;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/Modal.d.ts

@@ -18,7 +18,7 @@ export declare class CustomModal extends LitElement {
     isPrimaryDisabled: boolean;
     modalWidth: string;
     private scrollable;
-    static styles: import("lit").CSSResult;
+    static styles: (import("lit").CSSResult | CSSStyleSheet)[];
     private closeModal;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/components/Select.d.ts

@@ -1,3 +1,4 @@
+import { TemplateResult } from 'lit';
 import { BaseControl } from '../helpers/BaseControl';
 type SelectOption = string | {
     label: string;
@@ -19,7 +20,7 @@ export declare class FilterableSelect extends BaseControl {
     isOpen: boolean;
     mobileFilterValue: string;
     private debounceTimeout;
-    static styles: import("lit").CSSResult;
+    static styles: (import("lit").CSSResult | CSSStyleSheet)[];
     update(changedProperties: Map<string, any>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -34,6 +35,6 @@ export declare class FilterableSelect extends BaseControl {
     handleKeyDown(e: KeyboardEvent): void;
     private renderSelectedIcon;
     private renderOptionIcon;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 export {};

package/dist/components/Upload.d.ts

@@ -1,16 +1,23 @@
-import { LitElement } from 'lit';
-export declare class UploadImage extends LitElement {
-    files: File[];
-    disabled: boolean;
-    simulatedDelay: number;
-    private loading;
-    private progress;
+import { TemplateResult } from 'lit';
+import { BaseUpload } from '../helpers/BaseUpload';
+export declare class UploadImage extends BaseUpload {
+    acceptedFileTypes: string[];
+    maxFiles: number;
+    maxFileSize: number;
     private isDragging;
+    private imageUrls;
+    private isMaxFilesReached;
     static styles: import("lit").CSSResult;
+    private getFileConfig;
+    private getTextAcceptedFileTypes;
+    private getTextMaxFileSize;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    disconnectedCallback(): void;
     private handleFiles;
     private onFileInputChange;
     private onDrop;
     private onDragOver;
     private onDragLeave;
-    render(): import("lit-html").TemplateResult<1>;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): TemplateResult<1>;
 }

package/dist/helpers/BaseUpload.d.ts

@@ -0,0 +1,81 @@
+import { BaseControl } from "./BaseControl";
+import { TemplateResult } from "lit";
+export interface FileHandlerConfig {
+    baseMaxFiles: number;
+    maxFileSize: number;
+    acceptedFileTypes: string[];
+    errorMessageType: string;
+    errorMessageSize: string;
+    typeError: 'image' | 'file';
+}
+export declare class BaseUpload extends BaseControl {
+    files: File[];
+    simulatedDelay: number;
+    protected loading: boolean;
+    protected progress: number;
+    protected errorTextMessage: string | null;
+    protected fileInput: HTMLInputElement;
+    /**
+        Convierte el tamaño máximo de archivo de bytes a megabytes (MB) para mostrar en la interfaz de usuario.
+    
+        @param maxFileSize El tamaño máximo de archivo en bytes.
+
+        @returns El tamaño máximo del archivo en megabytes.
+    */
+    protected baseGetTextMaxFileSize(maxFileSize: number): number;
+    /**
+        * Convierte una lista de tipos MIME en un string de nombres de archivos legibles.
+        * Por ejemplo, 'application/pdf' se convierte en 'PDF'.
+     
+        @param acceptedFileTypes Un array de strings con los tipos MIME aceptados.
+        @param typeMapping Un objeto que mapea los tipos MIME a nombres legibles.
+
+        @returns Un string con los nombres de archivo aceptados, separados por comas y 'y'.
+    */
+    protected getReadableFileTypes(acceptedFileTypes: string[], typeMapping: {
+        [key: string]: string;
+    }): string;
+    /**
+        * Valida una lista de archivos contra el tamaño máximo y los tipos de archivo aceptados.
+     
+        @param filesToValidate Un array de objetos File a validar.
+        @param maxFileSize El tamaño máximo permitido para un archivo en bytes.
+        @param acceptedFileTypes Un array de strings con los tipos MIME aceptados.
+        @param errorMessageType El mensaje de error a mostrar si el tipo de archivo no es válido.
+        @param errorMessageSize El mensaje de error a mostrar si el tamaño del archivo excede el límite.
+        @param typeError El tipo de error que se está manejando ('image' o 'file').
+    
+        @returns true si todos los archivos son válidos, de lo contrario, false.
+    */
+    protected validateFiles(filesToValidate: File[], maxFileSize: number, acceptedFileTypes: string[], errorMessageType: string, errorMessageSize: string, typeError: 'image' | 'file'): boolean;
+    /**
+        * 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.
+        @param config Un objeto de configuración que contiene los parámetros de validación (`baseMaxFiles`, `maxFileSize`, etc.) y mensajes de error.
+    */
+    protected baseHandleFiles(files: FileList | null, config: FileHandlerConfig): Promise<void>;
+    /**
+        * Maneja los archivos seleccionados por el usuario, aplicando validaciones de cantidad y tipo, y gestionando el proceso de carga simulado.
+     
+        @param files La lista de archivos (`FileList`) seleccionados de un `input` de tipo `file`.
+        @param config Un objeto de configuración que contiene los parámetros de validación (`baseMaxFiles`, `maxFileSize`, etc.) y mensajes de error.
+    */
+    protected baseOnFileInputChange(event: Event, config: FileHandlerConfig): void;
+    /**
+        * Elimina un archivo de la lista de archivos seleccionados.
+
+        @param index El índice del archivo a eliminar.
+        @param typeError El tipo de error que se está manejando ('image' o 'file').
+    */
+    protected removeFile(index: number, typeError: 'image' | 'file'): void;
+    /**
+        Establece el estado de error y el mensaje de error correspondiente para el componente.
+     
+        @param typeError Indica el tipo de componente de carga de archivos ('image' o 'file').
+        @param message El mensaje de error a mostrar. Si es `null`, el estado de error se desactiva.
+    */
+    private setError;
+    renderLoadingContainer(htmlSlotContent: TemplateResult): TemplateResult<1>;
+}

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import './styles/colors.css';
+import './styles/fonts.css';
+import './styles/buttons.css';
 export * from './helpers/BaseControl';
 export * from './components/Accordion';
 export * from './components/AccordionList';
@@ -20,6 +23,5 @@ 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';
+export * from './components/Carousel';
+export * from './styles/scrollbar';