@plusui/library 0.1.0

package/cdn/components/input/input.js

@@ -0,0 +1,591 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, E, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { e } from '../../query-CHb9Ft_d.js';
+import Tailwind from '../base/tailwind-base.js';
+import { o } from '../../if-defined-D-m3dgRf.js';
+import { l } from '../../live-BOAtKRUN.js';
+import { inputStyle } from './input.style.js';
+import { labelStyle } from '../label/label.style.js';
+import { captionStyle } from '../caption/caption.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../directive-DZCF8pFJ.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-input
+ * @summary Form input component that provides various input types, validation, and styling features.
+ *
+ * @slot prefix - Content to be placed before the input
+ * @slot suffix - Content to be placed after the input
+ *
+ * @csspart input - The native input element
+ * @csspart wrapper - The input wrapper element
+ * @csspart prefix - The prefix container
+ * @csspart suffix - The suffix container
+ * @csspart clear-button - The clear button
+ * @csspart password-toggle - The password visibility toggle button
+ *
+ * @event plus-input - Emitted when the input value changes
+ * @event plus-change - Emitted when the input value changes and the input loses focus
+ * @event plus-focus - Emitted when the input gains focus
+ * @event plus-blur - Emitted when the input loses focus
+ * @event plus-clear - Emitted when the clear button is clicked
+ * @event plus-password-toggle - Emitted when the password visibility is toggled
+ * @event plus-invalid - Emitted when the input value is invalid
+ *
+ * @example
+ * ```html
+ * <plus-input
+ *   label="Email"
+ *   type="email"
+ *   required
+ *   pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+ *   error-message="Please enter a valid email address"
+ *   @plus-invalid=${(e) => console.log('Invalid input:', e.detail)}
+ * ></plus-input>
+ * ```
+ */
+class PlusInput extends Tailwind {
+    constructor() {
+        super();
+        /**
+         * Indicates if the input has focus
+         * @private
+         */
+        this.hasFocus = false;
+        /**
+         * Validation message for the input
+         * @private
+         */
+        this.validationMessage = '';
+        /**
+         * The type of input
+         * @type {'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'}
+         * @default 'text'
+         */
+        this.type = 'text';
+        /**
+         * The name of the input
+         * @type {string}
+         * @default ''
+         */
+        this.name = '';
+        /**
+         * The value of the input
+         * @type {string}
+         * @default ''
+         */
+        this.value = '';
+        /**
+         * The placeholder text
+         * @type {string}
+         * @default ''
+         */
+        this.placeholder = '';
+        /**
+         * The size of the input
+         * @type {'sm'|'md'|'lg'}
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Whether the input should have a clear button
+         * @type {boolean}
+         * @default false
+         */
+        this.clearable = false;
+        /**
+         * Whether the input is disabled
+         * @type {boolean}
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is readonly
+         * @type {boolean}
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Whether the input is required
+         * @type {boolean}
+         * @default false
+         */
+        this.required = false;
+        /**
+         * Whether to show a password toggle button
+         * @type {boolean}
+         * @default false
+         */
+        this.passwordToggle = false;
+        /**
+         * Whether the password is visible
+         * @type {boolean}
+         * @default false
+         */
+        this.passwordVisible = false;
+        /**
+         * Whether the input is in an error state
+         * @type {boolean}
+         * @default false
+         */
+        this.error = false;
+        /**
+         * The error message to display
+         * @type {string}
+         * @default ''
+         */
+        this.errorMessage = '';
+        /**
+         * Whether the input should take up full width
+         * @type {boolean}
+         * @default false
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the input is used as part of a select component
+         * @type {boolean}
+         * @default false
+         */
+        this.isSelect = false;
+    }
+    /**
+     * Checks the validity of the input against constraints.
+     * @returns {boolean} True if the input is valid, false otherwise.
+     */
+    checkValidity() {
+        return this.input.checkValidity();
+    }
+    /**
+     * Reports the validity of the input. If the input is invalid,
+     * it dispatches an 'invalid' event and focuses the input.
+     * @returns {boolean} True if the input is valid, false otherwise.
+     */
+    reportValidity() {
+        const isValid = this.checkValidity();
+        this.validationMessage = this.getValidationMessage();
+        this.error = !isValid;
+        return isValid;
+    }
+    /**
+     * Sets a custom validation message for the input.
+     * @param {string} message - The custom validation message.
+     */
+    setCustomValidity(message) {
+        this.input.setCustomValidity(message);
+        this.validationMessage = message;
+        this.error = message !== '';
+    }
+    /**
+     * Called when the input loses focus
+     * @private
+     */
+    handleBlur() {
+        this.hasFocus = false;
+        this.validate();
+        this.emit('plus-blur');
+    }
+    /**
+     * Called when the input value changes
+     * @private
+     */
+    handleChange() {
+        this.value = this.input.value;
+        this.emit('plus-change');
+        this.validate();
+    }
+    /**
+     * Called when the clear button is clicked
+     * @param {MouseEvent} event The event object
+     * @private
+     */
+    handleClearClick(event) {
+        this.value = '';
+        this.emit('plus-clear');
+        this.emit('plus-input');
+        this.emit('plus-change');
+        this.input.focus();
+        this.validate();
+        event.stopPropagation();
+    }
+    /**
+     * Called when the password toggle button is clicked
+     * @param {MouseEvent} event The event object
+     * @private
+     */
+    handlePasswordToggle(event) {
+        this.passwordVisible = !this.passwordVisible;
+        this.emit('plus-password-toggle', {
+            detail: { visible: this.passwordVisible },
+        });
+        event.stopPropagation();
+    }
+    /**
+     * Called when the input receives focus
+     * @private
+     */
+    handleFocus() {
+        this.hasFocus = true;
+        this.emit('plus-focus');
+    }
+    /**
+     * Called when the input value changes
+     * @private
+     */
+    handleInput() {
+        this.value = this.input.value;
+        // If the input is already in an error state, re-validate on input
+        // to provide immediate feedback as the user corrects the value.
+        if (this.error) {
+            this.validate();
+        }
+        this.emit('plus-input');
+    }
+    /**
+     * Gets the validation message for the input
+     * @returns {string} The validation message
+     * @private
+     */
+    getValidationMessage() {
+        const validity = this.input.validity;
+        if (validity.valueMissing) {
+            return 'This field is required';
+        }
+        if (validity.typeMismatch && this.type === 'email') {
+            return 'Please enter a valid email address';
+        }
+        if (validity.patternMismatch) {
+            return 'Please match the requested format';
+        }
+        if (validity.tooLong) {
+            return `Please use no more than ${this.maxlength} characters`;
+        }
+        if (validity.tooShort) {
+            return `Please use at least ${this.minlength} characters`;
+        }
+        if (validity.rangeUnderflow) {
+            return `Please enter a value greater than or equal to ${this.min}`;
+        }
+        if (validity.rangeOverflow) {
+            return `Please enter a value less than or equal to ${this.max}`;
+        }
+        if (validity.stepMismatch) {
+            return `Please enter a valid value. The nearest valid value is ${this.getStepValue()}`;
+        }
+        if (validity.badInput) {
+            return 'Please enter a valid value';
+        }
+        return this.input.validationMessage || 'Please correct the error';
+    }
+    /**
+     * Validates the input
+     * @private
+     */
+    validate() {
+        const isValid = this.input.checkValidity();
+        const validationMessage = this.getValidationMessage();
+        this.validationMessage = validationMessage;
+        this.error = !isValid;
+    }
+    /**
+     * Called when the input is invalid
+     * @param {Event} event The event object
+     * @private
+     */
+    handleInvalid(event) {
+        // Prevent the browser's default validation UI
+        event.preventDefault();
+        // Get validity state and message directly from the native input
+        const isValid = this.input.validity.valid;
+        const validationMessage = this.getValidationMessage();
+        // Update component state
+        this.validationMessage = validationMessage;
+        this.error = !isValid;
+        // Emit the custom invalid event if the input is truly invalid
+        if (!isValid) {
+            this.emit('plus-invalid', { detail: { validationMessage } });
+        }
+    }
+    /**
+     * Called when a key is pressed
+     * @param {KeyboardEvent} event The event object
+     * @private
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            const form = this.input.form;
+            if (form) {
+                const submitButton = form.querySelector('button[type="submit"]');
+                if (submitButton) {
+                    event.preventDefault();
+                    submitButton.click();
+                }
+            }
+        }
+    }
+    /**
+     * Calculates the step value
+     * @returns {number} The calculated step value
+     * @private
+     */
+    getStepValue() {
+        const value = parseFloat(this.value);
+        const step = parseFloat(this.step) || 1;
+        const min = parseFloat(this.min) || 0;
+        return Math.round((value - min) / step) * step + min;
+    }
+    /**
+     * Called when a slot changes
+     * @param {Event} e The event object
+     * @private
+     */
+    handleSlotchange(e) {
+        const slot = e.target;
+        const childNodes = slot.assignedNodes({ flatten: true });
+        if (childNodes.length) {
+            slot.style.display = 'flex';
+        }
+    }
+    /**
+     * Renders the component
+     * @returns {TemplateResult} The template to render
+     * @override
+     */
+    render() {
+        const { label, hasFocus, error, disabled, caption, clearable, value, size, required, readonly, isSelect, prefixIcon, suffixIcon, passwordToggle, passwordVisible, validationMessage, } = this;
+        const { inputElement, host, inputWrapper, prefix, suffix, clearButton, passwordToggleButton, } = inputStyle({
+            focus: hasFocus,
+            error,
+            disabled,
+            size,
+            readonly,
+            isSelect,
+        });
+        const LabelTemplate = () => label
+            ? x `<label class=${labelStyle({ size, required })} for="input"
+            >${label}</label
+          >`
+            : E;
+        const CaptionTemplate = () => {
+            const textToShow = error && validationMessage ? validationMessage : caption;
+            return textToShow
+                ? x `<div class=${captionStyle({ error, size })} id="help-text">
+            ${textToShow}
+          </div>`
+                : E;
+        };
+        const ClearTemplate = () => clearable && value
+            ? x `<div
+            class=${clearButton() + ' ' + suffix()}
+            @click=${this.handleClearClick}
+            role="button"
+            aria-label="Clear input"
+            tabindex="0"
+          >
+            <plus-svg-icon iconName="xmark"></plus-svg-icon>
+          </div>`
+            : E;
+        const PasswordToggleTemplate = () => passwordToggle && this.type === 'password'
+            ? x `<div
+            class=${passwordToggleButton() + ' ' + suffix()}
+            @click=${this.handlePasswordToggle}
+            role="button"
+            aria-label=${passwordVisible ? 'Hide password' : 'Show password'}
+            tabindex="0"
+          >
+            <plus-svg-icon
+              iconName=${passwordVisible ? 'eye' : 'eye-slash'}
+            ></plus-svg-icon>
+          </div>`
+            : E;
+        return x `<div
+      class=${host()}
+      @click=${(e) => {
+            if (disabled || readonly)
+                e.stopPropagation();
+        }}
+    >
+      ${LabelTemplate()}
+      <div class=${inputWrapper()} @click=${() => this.input.focus()}>
+        ${prefixIcon
+            ? x `<div class=${prefix()} aria-hidden="true">
+              <plus-svg-icon iconName=${prefixIcon}></plus-svg-icon>
+            </div>`
+            : E}
+        <slot
+          name="prefix"
+          class=${prefix() + ' hidden'}
+          @slotchange=${this.handleSlotchange}
+        ></slot>
+        <input
+          class=${inputElement()}
+          type=${this.type === 'password' && this.passwordVisible
+            ? 'text'
+            : this.type}
+          title=${this.title}
+          name=${o(this.name)}
+          ?disabled=${this.disabled}
+          ?readonly=${readonly || isSelect}
+          ?required=${required}
+          placeholder=${o(this.placeholder)}
+          minlength=${o(this.minlength)}
+          maxlength=${o(this.maxlength)}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          step=${o(this.step)}
+          .value=${l(this.value)}
+          autocomplete=${o(this.autocomplete)}
+          autocorrect=${o(this.autocorrect)}
+          ?autofocus=${this.autofocus}
+          spellcheck=${this.spellcheck}
+          pattern=${o(this.pattern)}
+          enterkeyhint=${o(this.enterkeyhint)}
+          inputmode=${o(this.inputmode)}
+          aria-describedby=${o(caption || validationMessage ? 'help-text' : undefined)}
+          aria-invalid=${error}
+          aria-required=${required}
+          aria-disabled=${disabled}
+          aria-readonly=${readonly}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        ${ClearTemplate()} ${PasswordToggleTemplate()}
+        <slot
+          name="suffix"
+          class=${suffix() + ' hidden'}
+          @slotchange=${this.handleSlotchange}
+        ></slot>
+        ${suffixIcon
+            ? x `<div class=${suffix()} aria-hidden="true">
+              <plus-svg-icon iconName=${suffixIcon}></plus-svg-icon>
+            </div>`
+            : E}
+      </div>
+      ${CaptionTemplate()}
+    </div>`;
+    }
+}
+PlusInput.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+        max-width: 256px;
+      }
+
+      :host([full-width]) {
+        max-width: none;
+      }
+    `,
+];
+__decorate([
+    e('input')
+], PlusInput.prototype, "input", void 0);
+__decorate([
+    r()
+], PlusInput.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], PlusInput.prototype, "validationMessage", void 0);
+__decorate([
+    n({ reflect: true })
+], PlusInput.prototype, "type", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "name", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "value", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "placeholder", void 0);
+__decorate([
+    n({ reflect: true })
+], PlusInput.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusInput.prototype, "clearable", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusInput.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusInput.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusInput.prototype, "required", void 0);
+__decorate([
+    n({ attribute: 'password-toggle', type: Boolean })
+], PlusInput.prototype, "passwordToggle", void 0);
+__decorate([
+    n({ attribute: 'password-visible', type: Boolean })
+], PlusInput.prototype, "passwordVisible", void 0);
+__decorate([
+    n({ type: String })
+], PlusInput.prototype, "label", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "pattern", void 0);
+__decorate([
+    n({ type: Number })
+], PlusInput.prototype, "minlength", void 0);
+__decorate([
+    n({ type: Number })
+], PlusInput.prototype, "maxlength", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "min", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "max", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "step", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "autocorrect", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "autocomplete", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusInput.prototype, "autoFocus", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "enterkeyhint", void 0);
+__decorate([
+    n()
+], PlusInput.prototype, "inputmode", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusInput.prototype, "spellCheck", void 0);
+__decorate([
+    n({ type: String })
+], PlusInput.prototype, "caption", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusInput.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-message' })
+], PlusInput.prototype, "errorMessage", void 0);
+__decorate([
+    n({ reflect: true, attribute: 'full-width', type: Boolean })
+], PlusInput.prototype, "fullWidth", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusInput.prototype, "isSelect", void 0);
+__decorate([
+    n({ type: String, attribute: 'prefix-icon' })
+], PlusInput.prototype, "prefixIcon", void 0);
+__decorate([
+    n({ type: String, attribute: 'suffix-icon' })
+], PlusInput.prototype, "suffixIcon", void 0);
+
+export { PlusInput, PlusInput as default };