@rotomeca/design-system 0.0.0-stage → 1.0.0

package/dist/components/atoms/input/input.js

@@ -0,0 +1,514 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "@rotomeca/ds-jsx/jsx-runtime";
+import { Define } from '../../../core/scripts/decorators';
+import { TAG_INPUT } from '../../../core/scripts/utils/tags';
+import { BaseFieldElement } from '../../base/BaseFieldElement';
+import { FieldMessages } from '../../base/FieldMessages';
+import { hasContent } from '../../base/dom';
+import { RotomecaButton } from '../button/button';
+import { RotomecaFragment } from '../fragment/fragment';
+import { RotomecaIcon } from '../icon/icon';
+import style from './input.less';
+export { RotomecaInput };
+const SLOT_HINT = 'hint';
+const SLOT_BUTTON = 'button';
+const BUTTON_VARIANTS = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'warning',
+    'danger',
+    'success',
+];
+/** Attributs recopiés tels quels sur l'`<input>` interne. */
+const SYNCED_ATTRIBUTES = [
+    'pattern',
+    'minlength',
+    'maxlength',
+    'autocomplete',
+    'inputmode',
+    'spellcheck',
+    'min',
+    'max',
+    'step',
+    'list',
+];
+/** Types dont l'interface native est toujours visible : le label ne peut pas rester dans le champ. */
+const ALWAYS_FLOAT_TYPES = [
+    'date',
+    'time',
+    'datetime-local',
+    'month',
+    'week',
+    'color',
+    'range',
+    'file',
+];
+// Angle animé de la bordure : une propriété personnalisée doit être enregistrée au niveau du
+// document (un `@property` dans un Shadow DOM est ignoré). Sans support, la bordure reste statique.
+try {
+    CSS.registerProperty({
+        name: '--rds-input-angle',
+        syntax: '<angle>',
+        inherits: false,
+        initialValue: '0deg',
+    });
+}
+catch {
+    // Déjà enregistrée, ou navigateur sans CSS.registerProperty.
+}
+const TEMPLATE = (_jsx(RotomecaFragment, { children: _jsxs("div", { class: "container", children: [_jsxs("div", { class: "addons", children: [_jsxs("div", { class: "addon__inner", children: [_jsx("input", { id: "input", class: "input-like", type: "text", part: "input" }), _jsx("label", { id: "label", for: "input", class: "floating-label", children: _jsx("slot", { id: "label-slot" }) }), _jsx(RotomecaIcon, { id: "input__icon", class: "trailing-icon" }), _jsx("output", { id: "output", for: "input" })] }), _jsx(RotomecaButton, { id: "input__button", variant: "primary", disabled: true, children: _jsx("slot", { id: "button-slot", name: "button" }) })] }), _jsx(FieldMessages, {})] }) }));
+/**
+ * Champ de saisie du design system.
+ *
+ * @remarks
+ * Un vrai `<input>` natif est rendu dans le Shadow DOM : le composant est associé aux formulaires
+ * (valeur, validité, reset, restauration) et délègue le focus à cet input. Il accepte tous les `type`
+ * natifs ; les composants `rds-input-*` en proposent des versions spécialisées.
+ *
+ * Les erreurs de validation native ne s'affichent qu'après une interaction (sortie du champ, saisie
+ * ou tentative de soumission). L'attribut `state` (`success` | `error`) force un état.
+ *
+ * @slot - Libellé du champ.
+ * @slot hint - Indice d'utilisation.
+ * @slot success - Message de succès.
+ * @slot error - Message d'erreur.
+ * @slot button - Texte du bouton interne.
+ *
+ * @csspart input - L'`<input>` natif.
+ *
+ * @fires input - Saisie (événement natif, composé).
+ * @fires change - Valeur validée.
+ * @fires {CustomEvent<{value: string}>} rds-input:value - Valeur modifiée.
+ * @fires {CustomEvent<{innerEvent: Event}>} rds-input:button-click - Clic sur le bouton interne.
+ *
+ * @cssstate value - Le champ contient une valeur.
+ * @cssstate have-icon - Une icône est affichée.
+ * @cssstate have-button - Un bouton interne est affiché.
+ * @cssstate obi - Le bouton interne n'a qu'une icône.
+ * @cssstate success - Message de succès affiché.
+ * @cssstate error - Message d'erreur affiché.
+ * @cssstate has-label - Un libellé est fourni (libellé flottant).
+ * @cssstate button-inline - Bouton « en ligne » (variantes password / search).
+ *
+ * @example
+ * ```html
+ * <rds-input name="email" type="email" required icon="mail">
+ *   Adresse e-mail
+ *   <span slot="hint">Format : prenom@domaine.fr</span>
+ * </rds-input>
+ * ```
+ */
+let RotomecaInput = (() => {
+    let _classDecorators = [Define({ tag: TAG_INPUT, template: TEMPLATE, styles: style })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = BaseFieldElement;
+    var RotomecaInput = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            RotomecaInput = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        /** Type imposé par une variante (`null` : l'attribut `type` est utilisé). */
+        static inputType = null;
+        /** Icône affichée par défaut dans le champ (vide : aucune). */
+        static defaultIcon = '';
+        static upgradeProperties = ['value'];
+        static observedAttributes = [
+            ...BaseFieldElement.observedAttributes,
+            'aria-label',
+            'type',
+            'placeholder',
+            'value',
+            'readonly',
+            'state',
+            'icon',
+            'button',
+            'button-icon',
+            'button-label',
+            ...SYNCED_ATTRIBUTES,
+        ];
+        /** Valeur initiale, restaurée par `reset`. */
+        #_initial = '';
+        /** `true` dès que la valeur a été modifiée (saisie ou propriété `value`). */
+        #_dirty = false;
+        //#region Propriétés
+        /** Valeur courante. */
+        get value() {
+            return this.#_inputOrNull?.value ?? this.getAttribute('value') ?? '';
+        }
+        set value(value) {
+            const input = this.#_inputOrNull;
+            if (!input) {
+                this.setAttribute('value', value);
+                return;
+            }
+            input.value = String(value);
+            this.#_dirty = true;
+            this.#_afterValueChange();
+        }
+        /** Valeur numérique (`NaN` si le type n'est pas numérique ou si la valeur est vide). */
+        get valueAsNumber() {
+            return this.#_inputOrNull?.valueAsNumber ?? Number.NaN;
+        }
+        set valueAsNumber(value) {
+            const input = this.#_inputOrNull;
+            if (!input)
+                return;
+            input.valueAsNumber = value;
+            this.#_dirty = true;
+            this.#_afterValueChange();
+        }
+        /** Valeur en date (`null` si le type n'est pas une date ou si la valeur est vide). */
+        get valueAsDate() {
+            return this.#_inputOrNull?.valueAsDate ?? null;
+        }
+        set valueAsDate(value) {
+            const input = this.#_inputOrNull;
+            if (!input)
+                return;
+            input.valueAsDate = value;
+            this.#_dirty = true;
+            this.#_afterValueChange();
+        }
+        /** Type effectif de l'input interne. */
+        get type() {
+            return this.resolveType();
+        }
+        set type(value) {
+            this.setStringAttribute('type', value);
+        }
+        /** Texte indicatif. */
+        get placeholder() {
+            return this.stringAttribute('placeholder');
+        }
+        set placeholder(value) {
+            this.setStringAttribute('placeholder', value);
+        }
+        /** Lecture seule. */
+        get readOnly() {
+            return this.hasAttribute('readonly');
+        }
+        set readOnly(value) {
+            this.setBooleanAttribute('readonly', value);
+        }
+        /** `<input>` interne, pour les variantes. */
+        get inputElement() {
+            return this.#_input;
+        }
+        get control() {
+            return this.#_input;
+        }
+        //#endregion
+        //#region Points d'extension pour les variantes
+        /** Type de l'input interne. */
+        resolveType() {
+            const locked = this.constructor.inputType;
+            return locked ?? (this.stringAttribute('type') || 'text');
+        }
+        /** Icône du champ quand l'attribut `icon` est absent. */
+        resolveIcon() {
+            return this.constructor.defaultIcon;
+        }
+        /** Bouton interne quand ni `button` ni `button-icon` ne sont présents (`null` : aucun). */
+        resolveButton() {
+            return null;
+        }
+        /** Texte affiché dans la sortie (`<output>`) du champ (`null` : masquée). */
+        resolveOutput() {
+            return null;
+        }
+        /** Ajuste l'input interne après chaque synchronisation (attributs par défaut d'une variante). */
+        configureInput(_input) { }
+        /** Appelé au clic sur le bouton interne. */
+        onButtonClick(_event) { }
+        /** Demande une resynchronisation complète (valeur, états, validité). */
+        refreshInput() {
+            this.#_afterValueChange(false);
+        }
+        //#endregion
+        //#region Cycle de vie
+        build() {
+            this.#_initial = this.getAttribute('value') ?? '';
+            this.#_input.value = this.#_initial;
+            this.setFormValue(this.#_input.value);
+        }
+        onConnect() {
+            super.onConnect();
+            const input = this.#_input;
+            this.resources.listen(input, 'input', () => {
+                this.#_dirty = true;
+                this.#_afterValueChange();
+            });
+            this.resources.listen(input, 'change', () => {
+                this.touched = true;
+                this.#_afterValueChange();
+                // `change` n'est pas composé : on le relaie depuis l'hôte.
+                this.dispatchEvent(new Event('change', { bubbles: true }));
+            });
+            this.resources.listen(input, 'focusout', () => {
+                this.touched = true;
+                this.#_afterValueChange(false);
+            });
+            this.resources.listen(this.#_button, 'click', (event) => {
+                this.emit('rds-input:button-click', { innerEvent: event });
+                this.onButtonClick(event);
+            });
+        }
+        update() {
+            const input = this.#_input;
+            input.type = this.resolveType();
+            this.setState('always-float', ALWAYS_FLOAT_TYPES.includes(input.type));
+            input.placeholder = this.stringAttribute('placeholder');
+            input.disabled = this.effectivelyDisabled;
+            input.readOnly = this.hasAttribute('readonly');
+            input.required = this.required;
+            for (const name of SYNCED_ATTRIBUTES) {
+                const value = this.getAttribute(name);
+                if (value === null)
+                    input.removeAttribute(name);
+                else
+                    input.setAttribute(name, value);
+            }
+            const ariaLabel = this.getAttribute('aria-label');
+            if (ariaLabel)
+                input.setAttribute('aria-label', ariaLabel);
+            else
+                input.removeAttribute('aria-label');
+            this.configureInput(input);
+            this.setState('disabled', input.disabled);
+            this.#_syncIcon();
+            this.#_syncButton();
+            this.#_syncOutput();
+            this.#_afterValueChange(false);
+        }
+        attributeChanged(name, _old, value) {
+            // Comme un `<input>` natif : l'attribut `value` n'est qu'une valeur par défaut.
+            if (name === 'value' && !this.#_dirty) {
+                this.#_initial = value ?? '';
+                this.#_input.value = this.#_initial;
+                this.#_afterValueChange(false);
+            }
+        }
+        slotChanged(slot) {
+            if (slot.id === 'button-slot')
+                this.#_syncButton();
+            this.syncLabelStates();
+            this.syncStates();
+        }
+        onFormReset() {
+            this.#_input.value = this.#_initial;
+            this.#_dirty = false;
+            this.touched = false;
+            this.#_afterValueChange(false);
+        }
+        onFormRestore(state) {
+            this.#_input.value = typeof state === 'string' ? state : '';
+            this.#_dirty = true;
+            this.#_afterValueChange(false);
+        }
+        //#endregion
+        //#region API publique
+        /** Sélectionne le contenu du champ. */
+        select() {
+            this.#_input.select();
+        }
+        /**
+         * Active le bouton interne.
+         *
+         * @param options - `text` (texte), `icon` (icône), `label` (nom accessible), `variation`.
+         */
+        enableButton({ text, icon, label, variation = 'primary', } = {}) {
+            this.setAttribute('button', variation);
+            if (text !== undefined)
+                this.setSlotText(SLOT_BUTTON, text);
+            if (icon !== undefined)
+                this.setAttribute('button-icon', icon);
+            if (label !== undefined)
+                this.setAttribute('button-label', label);
+            return this;
+        }
+        /** Active un bouton interne qui ne contient qu'une icône. */
+        enableButtonIconOnly(icon, label) {
+            this.setSlotText(SLOT_BUTTON, null);
+            this.setAttribute('button', '');
+            this.setAttribute('button-icon', icon);
+            this.setAttribute('button-label', label);
+            return this;
+        }
+        /** Masque le bouton interne. */
+        hideButton() {
+            this.setSlotText(SLOT_BUTTON, null);
+            for (const name of ['button', 'button-icon', 'button-label'])
+                this.removeAttribute(name);
+            return this;
+        }
+        /** Affiche une icône dans le champ. */
+        setIcon(icon) {
+            this.setAttribute('icon', icon);
+            return this;
+        }
+        /** Retire l'icône du champ. */
+        removeIcon() {
+            this.removeAttribute('icon');
+            return this;
+        }
+        /** Définit le libellé (texte ou élément). */
+        setLabel(label) {
+            for (const node of [...this.childNodes]) {
+                if (!(node instanceof Element) || !node.hasAttribute('slot'))
+                    node.remove();
+            }
+            this.prepend(label);
+            return this;
+        }
+        //#endregion
+        //#region Interne
+        get #_input() {
+            return this.require('#input');
+        }
+        get #_inputOrNull() {
+            return this.query('#input');
+        }
+        get #_button() {
+            return this.require('#input__button');
+        }
+        #_afterValueChange(emit = true) {
+            const input = this.#_input;
+            this.setFormValue(input.value);
+            this.setState('value', input.value !== '');
+            this.#_syncOutput();
+            this.#_syncButton();
+            this.syncStates();
+            this.syncLabelStates();
+            if (emit)
+                this.emit('rds-input:value', { value: input.value });
+        }
+        #_syncIcon() {
+            const name = this.getAttribute('icon') ?? this.resolveIcon();
+            const icon = this.require('#input__icon');
+            if (name)
+                icon.setAttribute('name', name);
+            else
+                icon.removeAttribute('name');
+            this.setState('have-icon', !!name);
+        }
+        #_syncButton() {
+            const button = this.#_button;
+            const requested = this.getAttribute('button');
+            let config;
+            let inline = false;
+            if (requested !== null || this.hasAttribute('button-icon')) {
+                config = {
+                    variant: BUTTON_VARIANTS.includes(requested ?? '')
+                        ? requested
+                        : 'primary',
+                    icon: this.getAttribute('button-icon') ?? '',
+                    label: this.getAttribute('button-label') ?? '',
+                };
+            }
+            else {
+                config = this.resolveButton();
+                inline = config !== null;
+            }
+            this.setState('have-button', config !== null);
+            this.setState('button-inline', inline);
+            if (!config)
+                return;
+            const variant = config.variant ?? 'primary';
+            button.setAttribute('variant', variant);
+            if (config.icon)
+                button.setAttribute('icon-before', config.icon);
+            else
+                button.removeAttribute('icon-before');
+            if (config.label)
+                button.setAttribute('label', config.label);
+            else
+                button.removeAttribute('label');
+            button.toggleAttribute('rounded', inline);
+            button.setAttribute('size', inline ? 'sm' : 'md');
+            button.disabled = this.effectivelyDisabled || this.hasAttribute('readonly');
+            this.setState('button-flat', !inline && variant === 'tertiary');
+            this.setState('obi', !hasContent(this.query('#button-slot')) && !!config.icon);
+        }
+        #_syncOutput() {
+            const text = this.resolveOutput();
+            const output = this.require('#output');
+            output.textContent = text ?? '';
+            this.setState('has-output', text !== null);
+        }
+        //#endregion
+        /**
+         * Crée un champ prêt à l'emploi.
+         *
+         * @param label - Libellé.
+         * @param options - Attributs HTML, plus `hint`, `success`, `error` et `buttonText` (contenus de slots).
+         */
+        static Create(label, options = {}) {
+            const slots = {
+                hint: SLOT_HINT,
+                success: 'success',
+                error: 'error',
+                buttonText: SLOT_BUTTON,
+            };
+            const element = document.createElement(this.tagName);
+            element.textContent = label;
+            for (const [key, value] of Object.entries(options)) {
+                if (value === undefined)
+                    continue;
+                const slot = slots[key];
+                if (slot) {
+                    const span = document.createElement('span');
+                    span.slot = slot;
+                    span.textContent = value;
+                    element.append(span);
+                }
+                else
+                    element.setAttribute(key, value);
+            }
+            return element;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return RotomecaInput = _classThis;
+})();
+//# sourceMappingURL=input.js.map

package/dist/components/atoms/input/variants.d.ts

@@ -0,0 +1,98 @@
+import { RotomecaInput, type InputButtonConfig } from './input';
+export { RotomecaInputColor, RotomecaInputDate, RotomecaInputDateTime, RotomecaInputEmail, RotomecaInputNumber, RotomecaInputPassword, RotomecaInputRange, RotomecaInputSearch, RotomecaInputTel, RotomecaInputText, RotomecaInputTime, RotomecaInputUrl, };
+/**
+ * Champ texte sur une ligne (`type="text"` figé).
+ *
+ * @example
+ * ```html
+ * <rds-input-text name="nom" required>Nom</rds-input-text>
+ * ```
+ */
+declare class RotomecaInputText extends RotomecaInput {
+    static inputType: string;
+}
+/**
+ * Champ numérique (`min`, `max`, `step`).
+ *
+ * @example
+ * ```html
+ * <rds-input-number name="qty" min="0" max="10" step="1">Quantité</rds-input-number>
+ * ```
+ */
+declare class RotomecaInputNumber extends RotomecaInput {
+    static inputType: string;
+    protected configureInput(input: HTMLInputElement): void;
+    /** Incrémente la valeur de `n` pas (`step`). */
+    stepUp(n?: number): void;
+    /** Décrémente la valeur de `n` pas (`step`). */
+    stepDown(n?: number): void;
+}
+/** Champ date (`min`, `max`, `valueAsDate`). */
+declare class RotomecaInputDate extends RotomecaInput {
+    static inputType: string;
+}
+/** Champ heure (`min`, `max`, `step`). */
+declare class RotomecaInputTime extends RotomecaInput {
+    static inputType: string;
+}
+/** Champ date et heure locales (`datetime-local`). */
+declare class RotomecaInputDateTime extends RotomecaInput {
+    static inputType: string;
+}
+/**
+ * Champ mot de passe, avec un bouton « en ligne » pour afficher ou masquer la saisie.
+ *
+ * @fires {CustomEvent<{visible: boolean}>} rds-input-password:toggle - Affichage basculé.
+ */
+declare class RotomecaInputPassword extends RotomecaInput {
+    #private;
+    static inputType: string;
+    /** `true` si le mot de passe est affiché en clair. */
+    get visible(): boolean;
+    set visible(value: boolean);
+    protected resolveType(): string;
+    protected configureInput(input: HTMLInputElement): void;
+    protected resolveButton(): InputButtonConfig;
+    protected onButtonClick(): void;
+}
+/**
+ * Champ de recherche, avec un bouton « en ligne » pour effacer la saisie (Échap l'efface aussi).
+ *
+ * @fires {CustomEvent<{value: string}>} rds-input-search:submit - Touche Entrée.
+ * @fires {Event} rds-input-search:clear - Saisie effacée par le bouton.
+ */
+declare class RotomecaInputSearch extends RotomecaInput {
+    static inputType: string;
+    static defaultIcon: string;
+    protected onConnect(): void;
+    protected resolveButton(): InputButtonConfig | null;
+    protected onButtonClick(): void;
+}
+/** Champ adresse e-mail. */
+declare class RotomecaInputEmail extends RotomecaInput {
+    static inputType: string;
+    static defaultIcon: string;
+    protected configureInput(input: HTMLInputElement): void;
+}
+/** Champ numéro de téléphone. */
+declare class RotomecaInputTel extends RotomecaInput {
+    static inputType: string;
+    static defaultIcon: string;
+    protected configureInput(input: HTMLInputElement): void;
+}
+/** Champ adresse web. */
+declare class RotomecaInputUrl extends RotomecaInput {
+    static inputType: string;
+    static defaultIcon: string;
+    protected configureInput(input: HTMLInputElement): void;
+}
+/** Sélecteur de couleur (valeur hexadécimale `#rrggbb`). */
+declare class RotomecaInputColor extends RotomecaInput {
+    static inputType: string;
+}
+/** Curseur (`min`, `max`, `step`) à piste stylée, qui affiche sa valeur courante. */
+declare class RotomecaInputRange extends RotomecaInput {
+    static inputType: string;
+    protected resolveOutput(): string;
+}
+//# sourceMappingURL=variants.d.ts.map