let componentsData;
try {
    componentsData = require('../../../../dist/components_json.json');
}
catch (error) {
    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
    componentsData = {};
}
import { withComponentControls, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-text-field';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Champ de saisie (input text)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Text Field permet aux utilisateurs d'entrer du texte court sur une seule ligne. Élément fondamental des formulaires, il intègre label, placeholder, validation et messages d'aide.

## Variantes disponibles

- **text** : Texte standard (par défaut)
- **email** : Validation d'adresse email
- **password** : Masquage du texte saisi
- **tel** : Numéro de téléphone
- **url** : Adresse web
- **number** : Valeur numérique

## Fonctionnalités

- Label et placeholder configurables
- Texte d'assistance avec icône optionnelle
- États de validation (erreur, succès)
- Champ requis avec indicateur visuel
- Support de l'autocomplétion
- Largeur adaptative

## Cas d'usage

- Saisie de nom, prénom, email
- Formulaires de contact et d'inscription
- Recherche et filtres
- Champs de connexion
- Saisie d'adresses et coordonnées

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/859851-champ-de-saisie-input-field)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = false;
    const slottedLabel = 'content';
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    if (hasSlot) {
        element.innerHTML = htmlContent(args[slottedLabel]);
    }
    return element;
};
export const Default = Template.bind({});
Default.args = {
    placeholder: 'Mon placeholder',
    label: 'Mon label',
    name: 'input',
    hint: "Mon texte d'assistance",
    required: true,
    showHintIcon: false,
};
Default.parameters = {
    docs: {
        description: {
            story: `Champ de saisie par défaut avec label, placeholder et texte d'assistance. Le champ est marqué comme requis avec l'astérisque. Cas d'usage : formulaires de contact, saisie de données personnelles, champs de recherche simples.`,
        },
    },
};
/* -------------------------------------------------------------------------------------------------
 * AVEC WARNING
 * ------------------------------------------------------------------------------------------------- */
export const AvecWarning = Template.bind({});
AvecWarning.args = {
    placeholder: 'Entrez une valeur',
    label: 'Champ avec avertissement',
    name: 'input-warning',
    warning: 'Cette valeur pourrait causer des problèmes de compatibilité',
    showWarningIcon: true,
};
AvecWarning.parameters = {
    docs: {
        description: {
            story: `Champ de saisie avec message d'avertissement. Utilisé pour signaler une situation particulière sans bloquer la saisie. Cas d'usage : valeurs limites, formats déconseillés, données sensibles.`,
        },
    },
};
/* -------------------------------------------------------------------------------------------------
 * AVEC ERREUR
 * ------------------------------------------------------------------------------------------------- */
export const AvecErreur = Template.bind({});
AvecErreur.args = {
    placeholder: 'Entrez votre email',
    label: 'Adresse email',
    name: 'input-error',
    type: 'email',
    value: 'email-invalide',
    error: 'Veuillez entrer une adresse email valide',
    showErrorIcon: true,
};
AvecErreur.parameters = {
    docs: {
        description: {
            story: `Champ de saisie en état d'erreur avec message de validation. Cas d'usage : validation de formulaire, champs requis non remplis, formats incorrects.`,
        },
    },
};
/* -------------------------------------------------------------------------------------------------
 * AVEC MASQUE
 * ------------------------------------------------------------------------------------------------- */
export const AvecMasque = Template.bind({});
AvecMasque.args = {
    placeholder: '__ /__ /____',
    label: 'Date de naissance',
    name: 'input-mask',
    mask: '99/99/9999',
    hint: 'Format : JJ/MM/AAAA',
    showHintIcon: true,
};
AvecMasque.parameters = {
    docs: {
        description: {
            story: `Champ de saisie avec masque de formatage automatique. Le masque utilise : 9 = chiffre, A = lettre majuscule, a = lettre, X = alphanumérique. Cas d'usage : dates, numéros de téléphone, codes postaux, numéros de carte.`,
        },
    },
};
/* -------------------------------------------------------------------------------------------------
 * AVEC TOOLTIP
 * ------------------------------------------------------------------------------------------------- */
export const AvecTooltip = Template.bind({});
AvecTooltip.args = {
    placeholder: 'Entrez votre IBAN',
    label: 'Numéro IBAN',
    name: 'input-tooltip',
    tooltipTitle: "Qu'est-ce qu'un IBAN ?",
    tooltipText: "L'IBAN (International Bank Account Number) est un identifiant international de compte bancaire. En Belgique, il commence par BE suivi de 14 chiffres.",
    tooltipDirection: 'right',
    tooltipMaxWidth: '200',
    hint: 'Exemple : BE68539007547034',
    showHintIcon: false,
};
AvecTooltip.parameters = {
    docs: {
        description: {
            story: `Champ de saisie avec tooltip d'aide sur le label. Le tooltip fournit des informations contextuelles sans encombrer l'interface. Cas d'usage : champs techniques, données complexes, aide contextuelle.`,
        },
    },
};
/* -------------------------------------------------------------------------------------------------
 * TYPE NUMBER
 * ------------------------------------------------------------------------------------------------- */
export const TypeNumber = Template.bind({});
TypeNumber.args = {
    placeholder: '0',
    label: 'Quantité',
    name: 'input-number',
    type: 'number',
    value: 5,
    min: 0,
    max: 100,
    step: 1,
    hint: 'Valeur entre 0 et 100',
    showHintIcon: false,
};
TypeNumber.parameters = {
    docs: {
        description: {
            story: `Champ de saisie de type number avec boutons d'incrémentation/décrémentation. Supporte les propriétés min, max et step. Cas d'usage : quantités, âge, valeurs numériques bornées.`,
        },
    },
};
/* -------------------------------------------------------------------------------------------------
 * TYPE NUMBER AVEC INDICATEUR
 * ------------------------------------------------------------------------------------------------- */
export const TypeNumberAvecIndicateur = Template.bind({});
TypeNumberAvecIndicateur.args = {
    placeholder: '0',
    label: 'Prix unitaire',
    name: 'input-number-indicator',
    type: 'number',
    value: 25,
    min: 0,
    step: 0.5,
    indicator: '€',
};
TypeNumberAvecIndicateur.parameters = {
    docs: {
        description: {
            story: `Champ de saisie number avec indicateur d'unité (€, %, kg, etc.). L'indicateur est affiché à droite du champ.`,
        },
    },
};
