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-input-slider';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Input Slider',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Input Slider permet aux utilisateurs de sélectionner une valeur numérique ou une plage de valeurs en faisant glisser une ou plusieurs poignées le long d'un rail.

## Variantes disponibles

- **Simple** : Une seule poignée pour sélectionner une valeur
- **Range** : Deux poignées pour sélectionner une plage de valeurs (min/max)

## Orientations

- **Horizontal** : Affichage en largeur (par défaut)
- **Vertical** : Affichage en hauteur

## Fonctionnalités

- Valeurs min, max et step configurables
- Mode simple ou range (plage)
- Tooltip optionnel affichant la valeur
- Support du drag sur desktop et mobile (touch)
- Form-associated (intégration formulaire native)
- Méthodes setValue/getValue
- Support du reset de formulaire
- État désactivé
- Orientation horizontale ou verticale
- Label avec indicateur de champ requis
- Texte d'assistance
- Messages d'état (erreur, succès, avertissement, information)
- Icônes d'état configurables
- Styles d'erreur appliqués au slider et tooltip

## Cas d'usage

- Sélection de prix (fourchette de prix)
- Réglage de volume ou luminosité
- Filtres de recherche (âge, distance, etc.)
- Configuration de paramètres numériques
- Sélection de plage horaire ou de dates
        `,
            },
        },
    },
};
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 = {
    label: 'Volume',
    assistiveText: 'Ajustez le niveau sonore selon vos préférences',
    min: 0,
    max: 100,
    step: 1,
    value: 50,
    hasTooltip: true,
    disabled: false,
    range: false,
    orientation: 'horizontal',
    name: 'volume',
};
Default.parameters = {
    docs: {
        description: {
            story: `Slider simple par défaut avec une seule poignée. La valeur est définie à 50, avec un min de 0 et un max de 100. Le tooltip est activé pour afficher la valeur courante. Cas d'usage : réglage de volume, sélection de pourcentage, configuration simple.`,
        },
    },
};
export const Range = Template.bind({});
Range.args = {
    label: 'Fourchette de prix',
    assistiveText: 'Définissez votre budget minimum et maximum',
    min: 0,
    max: 100,
    step: 1,
    value: [25, 75],
    hasTooltip: true,
    disabled: false,
    range: true,
    orientation: 'horizontal',
    name: 'price-range',
};
Range.parameters = {
    docs: {
        description: {
            story: `Slider en mode range avec deux poignées pour sélectionner une plage de valeurs. Les valeurs initiales sont [25, 75]. Cas d'usage : fourchette de prix, plage d'âge, intervalle de temps, filtres de recherche.`,
        },
    },
};
export const WithoutTooltip = Template.bind({});
WithoutTooltip.args = {
    label: 'Opacité',
    min: 0,
    max: 100,
    step: 5,
    value: 50,
    hasTooltip: false,
    disabled: false,
    range: false,
    orientation: 'horizontal',
    name: 'opacity',
};
WithoutTooltip.parameters = {
    docs: {
        description: {
            story: `Slider simple sans tooltip. La valeur change par pas de 5. Utile quand la valeur est affichée ailleurs dans l'interface ou quand le tooltip n'est pas nécessaire.`,
        },
    },
};
export const Vertical = Template.bind({});
Vertical.args = {
    label: 'Hauteur',
    min: 0,
    max: 100,
    step: 1,
    value: 60,
    hasTooltip: true,
    disabled: false,
    range: false,
    orientation: 'vertical',
    name: 'height',
};
Vertical.parameters = {
    docs: {
        description: {
            story: `Slider vertical simple. Le tooltip s'affiche à droite de la poignée. Cas d'usage : réglage de hauteur, contrôle de volume dans une interface audio, ajustement vertical.`,
        },
    },
};
export const VerticalRange = Template.bind({});
VerticalRange.args = {
    label: 'Plage de température',
    min: 0,
    max: 100,
    step: 1,
    value: [20, 80],
    hasTooltip: true,
    disabled: false,
    range: true,
    orientation: 'vertical',
    name: 'temp-range',
};
VerticalRange.parameters = {
    docs: {
        description: {
            story: `Slider vertical en mode range avec deux poignées. Les tooltips s'affichent à droite de chaque poignée. Cas d'usage : sélection de plage verticale, ajustement de niveaux min/max.`,
        },
    },
};
export const Disabled = Template.bind({});
Disabled.args = {
    label: 'Volume (désactivé)',
    assistiveText: 'Le contrôle du volume est actuellement désactivé',
    min: 0,
    max: 100,
    step: 1,
    value: 40,
    hasTooltip: true,
    disabled: true,
    range: false,
    orientation: 'horizontal',
    name: 'volume-disabled',
};
Disabled.parameters = {
    docs: {
        description: {
            story: `Slider désactivé. L'utilisateur ne peut pas interagir avec le slider. Le composant affiche une opacité réduite et le curseur est "not-allowed". Cas d'usage : affichage de valeurs non modifiables, état de chargement.`,
        },
    },
};
export const CustomStep = Template.bind({});
CustomStep.args = {
    label: 'Budget',
    min: 0,
    max: 1000,
    step: 50,
    value: 500,
    hasTooltip: true,
    disabled: false,
    range: false,
    orientation: 'horizontal',
    name: 'budget',
};
CustomStep.parameters = {
    docs: {
        description: {
            story: `Slider avec un pas personnalisé de 50. Les valeurs possibles sont 0, 50, 100, 150... jusqu'à 1000. Utile pour des incréments précis : prix arrondis, quantités par paliers, pourcentages par tranches.`,
        },
    },
};
export const WithError = Template.bind({});
WithError.args = {
    label: 'Âge',
    assistiveText: 'Vous devez avoir au moins 18 ans',
    error: 'Vous devez être majeur pour continuer',
    min: 0,
    max: 100,
    step: 1,
    value: 15,
    hasTooltip: true,
    disabled: false,
    range: false,
    orientation: 'horizontal',
    name: 'age',
    required: true,
};
WithError.parameters = {
    docs: {
        description: {
            story: `Slider avec état d'erreur. Le slider, les poignées et le tooltip s'affichent en rouge. Un message d'erreur avec icône est affiché sous le slider. Cas d'usage : validation de formulaire, valeur hors limites acceptables.`,
        },
    },
};
export const WithSuccess = Template.bind({});
WithSuccess.args = {
    label: 'Température',
    success: 'Température optimale sélectionnée',
    min: 10,
    max: 30,
    step: 0.5,
    value: 21,
    hasTooltip: true,
    disabled: false,
    range: false,
    orientation: 'horizontal',
    name: 'temperature',
};
WithSuccess.parameters = {
    docs: {
        description: {
            story: `Slider avec message de succès. Un message de validation positif avec icône est affiché sous le slider. Cas d'usage : confirmation de sélection correcte, feedback positif.`,
        },
    },
};
export const WithWarning = Template.bind({});
WithWarning.args = {
    label: 'Niveau de luminosité',
    warning: 'Une luminosité élevée peut affecter la batterie',
    min: 0,
    max: 100,
    step: 1,
    value: 90,
    hasTooltip: true,
    disabled: false,
    range: false,
    orientation: 'horizontal',
    name: 'brightness',
};
WithWarning.parameters = {
    docs: {
        description: {
            story: `Slider avec avertissement. Un message d'avertissement avec icône est affiché sous le slider sans changer l'apparence du composant. Cas d'usage : informations importantes, recommandations.`,
        },
    },
};
export const WithHint = Template.bind({});
WithHint.args = {
    label: 'Distance de recherche',
    hint: 'Plus la distance est grande, plus vous aurez de résultats',
    min: 1,
    max: 50,
    step: 1,
    value: 10,
    hasTooltip: true,
    disabled: false,
    range: false,
    orientation: 'horizontal',
    name: 'distance',
};
WithHint.parameters = {
    docs: {
        description: {
            story: `Slider avec message d'information. Un message informatif avec icône est affiché sous le slider pour guider l'utilisateur. Cas d'usage : conseils, explications supplémentaires.`,
        },
    },
};
export const Required = Template.bind({});
Required.args = {
    label: 'Nombre de participants',
    assistiveText: 'Minimum 2 participants requis',
    min: 0,
    max: 20,
    step: 1,
    value: 5,
    hasTooltip: true,
    disabled: false,
    range: false,
    orientation: 'horizontal',
    name: 'participants',
    required: true,
};
Required.parameters = {
    docs: {
        description: {
            story: `Slider avec champ requis. Un astérisque rouge est affiché à côté du label pour indiquer que le champ est obligatoire. Cas d'usage : formulaires avec champs obligatoires.`,
        },
    },
};
