@randstad-uca/design-system 1.0.94 → 1.0.95

package/dist/components/SocialMediaInput.d.ts

@@ -0,0 +1,125 @@
+import { TemplateResult } from 'lit';
+import { BaseControl } from '../helpers/BaseControl';
+/**
+ * LinkedIn input component with fixed prefix and editable username
+ *
+ * Features:
+ * - Fixed prefix "linkedin.com/in/" (non-editable)
+ * - Editable input for username
+ * - Character restrictions: only letters, numbers, and hyphens
+ * - Minimum 3 characters validation
+ * - Maximum 100 characters validation
+ * - Auto-extract username from full LinkedIn URL on paste
+ * - Validates pasted content for invalid formats
+ * - Angular Reactive Forms Support via ControlValueAccessor
+ */
+export declare class RandstadSocialMediaInput extends BaseControl {
+    /** Tipo de plataforma: linkedin, facebook o google */
+    platform: 'linkedin' | 'facebook' | 'google';
+    size: 'sm' | 'md' | 'lg';
+    maxLength: number;
+    isPasswordVisible: boolean;
+    /**
+     * Patrón de expresiones regulares personalizado para la desinfección de caracteres.
+     * Si no se proporciona, utiliza el valor predeterminado: /[^a-zA-Z0-9-]/g
+     * Ejemplo: /[^a-zA-Z0-9-_]/g para permitir guiones bajos */
+    customSanitizeRegex: string | undefined;
+    /**
+     * Patrón de expresiones regulares personalizado para validación de URL por plataforma.
+     * Si no se proporciona, utiliza valores por defecto:
+     * - linkedin: /^(https?:\/\/)?(www\.)?linkedin\.com\/in\/([a-zA-Z0-9-]+)\/?.*$/i
+     * - facebook: /^(https?:\/\/)?(www\.)?facebook\.com\/([azA-Z0-9.]+)\/?.*$/i
+    */
+    customUrlValidationRegex: string | undefined;
+    value: string;
+    private _inputValue;
+    private _showFormatError;
+    private _onChangeFn;
+    private _onTouchedFn;
+    static styles: (import("lit").CSSResult | CSSStyleSheet)[];
+    /**
+     * Prefijo fijo según la plataforma
+     */
+    private get _fixedPrefix();
+    /**
+     * Comprueba si se debe mostrar el sufijo después de la entrada (para Google)
+     */
+    private get _isSuffix();
+    /**
+     * Comprueba si se debe mostrar el prefijo para (linkedin o facebook)
+     */
+    private get _isPrefix();
+    /**
+     * Placeholder text
+     */
+    private get _placeholder();
+    /**
+     * Sanitization Regex (default)
+     */
+    private get _sanitizeRegex();
+    /**
+     * Regex URL para la plataforma actual
+     */
+    private get _urlValidationRegex();
+    /**
+     * Handle input event from the editable field
+     */
+    private _handleInput;
+    /**
+     * Handle paste event - extract username from LinkedIn/Facebook URL or validate pasted content
+     */
+    private _handlePaste;
+    /**
+     * Validation error
+     */
+    private get _hasMinLengthError();
+    /**
+     * Get the error message to display
+     */
+    private get _errorMessageToDisplay();
+    /**
+     * Check if there's any error state
+     */
+    private get _hasError();
+    /**
+     * Construye el valor final completo basado en la plataforma actual
+     */
+    private _getFullValue;
+    /**
+     * Extrae el usuario de una URL completa según la plataforma
+     */
+    private _extractUsernameFromValue;
+    /**
+     * Sincroniza el valor externo (value) con el valor interno (_inputValue)
+     */
+    protected updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Render the component
+     */
+    render(): TemplateResult<1>;
+    /**
+     * Override renderHelper to use custom helper text
+     */
+    renderHelper(): TemplateResult<1>;
+    /**
+     * Angular: Escribe el valor en el componente
+     */
+    writeValue(value: unknown): void;
+    /**
+     * Angular: Registra el callback para cambios
+     */
+    registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Angular: Registra el callback para blur (touched)
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Angular: Configura el estado disabled del componente
+     */
+    setDisabledState(isDisabled: boolean): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'randstad-social-input': RandstadSocialMediaInput;
+    }
+}

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/Checkbox';
 export * from './components/Form';
 export * from './components/FormGroup';
 export * from './components/Icon';
+export * from './components/SocialMediaInput';
 export * from './components/Modal';
 export * from './components/Notice';
 export * from './components/Popup';