dv-web-components 1.0.4 → 1.0.6

package/card-component/index.js

@@ -49,7 +49,7 @@ template.innerHTML = `
 </div>
 `;
 
-class AppCard extends HTMLElement {
+export class AppCard extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });

package/dist/types/card-component/index.d.ts

@@ -1,3 +1,2 @@
-declare const template: HTMLTemplateElement;
-declare class AppCard extends HTMLElement {
+export class AppCard extends HTMLElement {
 }

package/dist/types/index.d.ts

@@ -1 +1,4 @@
-export {};
+export { AppCard } from "./card-component/index.js";
+export { AppAlert } from "./alert-component/index.js";
+export { AppInput } from "./input-component/index.js";
+export { AppSelect } from "./select-component/index.js";

package/dist/types/input-component/index.d.ts

@@ -0,0 +1,27 @@
+export class AppInput extends HTMLElement {
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set value(val: any);
+    get value(): any;
+    set name(val: string);
+    get name(): string;
+    set type(val: string);
+    get type(): string;
+    set disabled(val: boolean);
+    get disabled(): boolean;
+    set required(val: boolean);
+    get required(): boolean;
+    set label(val: string);
+    get label(): string;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: any): void;
+    checkValidity(): any;
+    reportValidity(): any;
+    get validity(): any;
+    get validationMessage(): any;
+    focus(options: any): void;
+    #private;
+}

package/dist/types/react/index.d.ts

@@ -1,5 +1,16 @@
 export const AppAlert: import("@lit/react").ReactWebComponent<AppAlertElement, {
     onClose: string;
 }>;
-export const AppCard: import("@lit/react").ReactWebComponent<HTMLElement, {}>;
+export const AppCard: import("@lit/react").ReactWebComponent<AppCardElement, {}>;
+export const AppInput: import("@lit/react").ReactWebComponent<AppInputElement, {
+    onInput: string;
+    onChange: string;
+}>;
+export const AppSelect: import("@lit/react").ReactWebComponent<AppSelectElement, {
+    onInput: string;
+    onChange: string;
+}>;
 import { AppAlert as AppAlertElement } from '../alert-component/index.js';
+import { AppCard as AppCardElement } from '../card-component/index.js';
+import { AppInput as AppInputElement } from '../input-component/index.js';
+import { AppSelect as AppSelectElement } from '../select-component/index.js';

package/dist/types/select-component/index.d.ts

@@ -0,0 +1,27 @@
+export class AppSelect extends HTMLElement {
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set value(val: any);
+    get value(): any;
+    set options(val: any);
+    get options(): any;
+    set name(val: string);
+    get name(): string;
+    set disabled(val: boolean);
+    get disabled(): boolean;
+    set required(val: boolean);
+    get required(): boolean;
+    set label(val: string);
+    get label(): string;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: any): void;
+    checkValidity(): any;
+    reportValidity(): any;
+    get validity(): any;
+    get validationMessage(): any;
+    focus(options: any): void;
+    #private;
+}

package/index.js

@@ -1,2 +1,4 @@
-import './card-component/index.js';
-import './alert-component/index.js';
+export { AppCard } from './card-component/index.js';
+export { AppAlert } from './alert-component/index.js';
+export { AppInput } from './input-component/index.js';
+export { AppSelect } from './select-component/index.js';

package/input-component/index.js

@@ -0,0 +1,273 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      margin-block: 0.75rem;
+      font-family: inherit;
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+
+    .form-control {
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    }
+
+    .label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--input-label-color, #cbd5e1);
+      transition: color 0.2s ease;
+    }
+
+    .input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      background-color: var(--input-bg, #0f172a);
+      border: 1px solid var(--input-border, #334155);
+      border-radius: var(--input-radius, 0.5rem);
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .input-wrapper:focus-within {
+      border-color: var(--input-focus-border, #38bdf8);
+      box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(56, 189, 248, 0.2));
+    }
+
+    .input-field {
+      width: 100%;
+      padding: 0.625rem 0.875rem;
+      background: transparent;
+      border: none;
+      outline: none;
+      font-family: inherit;
+      font-size: 0.95rem;
+      color: var(--input-color, #f8fafc);
+    }
+
+    .input-field::placeholder {
+      color: var(--input-placeholder-color, #64748b);
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .input-field {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    :host(:invalid) .input-wrapper,
+    :host([invalid]) .input-wrapper {
+      border-color: var(--input-error-border, #ef4444);
+    }
+  </style>
+
+  <div class="form-control" part="form-control">
+    <label class="label" part="label" id="label-text">
+      <slot name="label"></slot>
+    </label>
+    <div class="input-wrapper" part="wrapper">
+      <slot name="prefix"></slot>
+      <input class="input-field" part="input" />
+      <slot name="suffix"></slot>
+    </div>
+  </div>
+`;
+
+export class AppInput extends HTMLElement {
+  static formAssociated = true;
+
+  #internals = null;
+  #inputElement = null;
+  #labelText = null;
+  #initialValue = '';
+
+  static get observedAttributes() {
+    return ['value', 'name', 'type', 'placeholder', 'disabled', 'required', 'label'];
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    this.#inputElement = this.shadowRoot.querySelector('.input-field');
+    this.#labelText = this.shadowRoot.querySelector('#label-text');
+  }
+
+  connectedCallback() {
+    this.#initialValue = this.getAttribute('value') || '';
+    this.#updateInputState();
+
+    this.#inputElement.addEventListener('input', this.#handleInput);
+    this.#inputElement.addEventListener('change', this.#handleChange);
+  }
+
+  disconnectedCallback() {
+    this.#inputElement?.removeEventListener('input', this.#handleInput);
+    this.#inputElement?.removeEventListener('change', this.#handleChange);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.#updateInputState();
+  }
+
+  #updateInputState() {
+    if (!this.#inputElement) return;
+
+    const val = this.getAttribute('value') || '';
+    if (this.#inputElement.value !== val) {
+      this.#inputElement.value = val;
+    }
+    this.#internals.setFormValue(val);
+
+    this.#inputElement.type = this.getAttribute('type') || 'text';
+    this.#inputElement.placeholder = this.getAttribute('placeholder') || '';
+    this.#inputElement.disabled = this.hasAttribute('disabled');
+    this.#inputElement.required = this.hasAttribute('required');
+
+    if (this.hasAttribute('name')) {
+      this.#inputElement.name = this.getAttribute('name');
+    }
+
+    const labelAttr = this.getAttribute('label');
+    if (labelAttr && !this.querySelector('[slot="label"]')) {
+      this.#labelText.textContent = labelAttr;
+      this.#labelText.style.display = 'block';
+    } else if (!this.querySelector('[slot="label"]')) {
+      this.#labelText.style.display = 'none';
+    }
+  }
+
+  #handleInput = (event) => {
+    event.stopPropagation();
+    const val = this.#inputElement.value;
+    this.#internals.setFormValue(val);
+
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        bubbles: true,
+        composed: true,
+        detail: { value: val }
+      })
+    );
+  };
+
+  #handleChange = (event) => {
+    event.stopPropagation();
+    const val = this.#inputElement.value;
+    this.#internals.setFormValue(val);
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: { value: val }
+      })
+    );
+  };
+
+  // Getters & Setters sincronizados
+  get value() {
+    return this.#inputElement ? this.#inputElement.value : this.getAttribute('value') || '';
+  }
+
+  set value(val) {
+    const stringVal = val == null ? '' : String(val);
+    if (this.#inputElement) {
+      this.#inputElement.value = stringVal;
+    }
+    this.#internals.setFormValue(stringVal);
+  }
+
+  get name() {
+    return this.getAttribute('name') || '';
+  }
+
+  set name(val) {
+    if (val) this.setAttribute('name', val);
+    else this.removeAttribute('name');
+  }
+
+  get type() {
+    return this.getAttribute('type') || 'text';
+  }
+
+  set type(val) {
+    this.setAttribute('type', val);
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(val) {
+    if (Boolean(val)) this.setAttribute('disabled', '');
+    else this.removeAttribute('disabled');
+  }
+
+  get required() {
+    return this.hasAttribute('required');
+  }
+
+  set required(val) {
+    if (Boolean(val)) this.setAttribute('required', '');
+    else this.removeAttribute('required');
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  set label(val) {
+    if (val) this.setAttribute('label', val);
+    else this.removeAttribute('label');
+  }
+
+  // Soporte nativo de formularios (<form>)
+  formResetCallback() {
+    this.value = this.#initialValue;
+  }
+
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+
+  checkValidity() {
+    return this.#internals.checkValidity();
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity();
+  }
+
+  get validity() {
+    return this.#internals.validity;
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage;
+  }
+
+  focus(options) {
+    this.#inputElement?.focus(options);
+  }
+
+  blur() {
+    this.#inputElement?.blur();
+  }
+}
+
+if (!customElements.get('app-input')) {
+  customElements.define('app-input', AppInput);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dv-web-components",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Librería de Web Components nativos y accesibles",
   "type": "module",
   "main": "./index.js",
@@ -26,6 +26,8 @@
     "index.js",
     "alert-component",
     "card-component",
+    "input-component",
+    "select-component",
     "react",
     "dist"
   ],

package/react/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { createComponent } from '@lit/react';
 import { AppAlert as AppAlertElement } from '../alert-component/index.js';
 import { AppCard as AppCardElement } from '../card-component/index.js';
+import { AppInput as AppInputElement } from '../input-component/index.js';
+import { AppSelect as AppSelectElement } from '../select-component/index.js';
 
 // Envolvemos el Web Component y lo convertimos en un Componente React real
 export const AppAlert = createComponent({
@@ -9,7 +11,7 @@ export const AppAlert = createComponent({
   elementClass: AppAlertElement,
   react: React,
   events: {
-    onClose: 'app-close' // 👈 Mapea el CustomEvent nativo 'app-close' a una prop React 'onClose'
+    onClose: 'app-close' // Mapea el CustomEvent nativo 'app-close' a una prop React 'onClose'
   }
 });
 
@@ -18,3 +20,23 @@ export const AppCard = createComponent({
   elementClass: AppCardElement,
   react: React
 });
+
+export const AppInput = createComponent({
+  tagName: 'app-input',
+  elementClass: AppInputElement,
+  react: React,
+  events: {
+    onInput: 'input',
+    onChange: 'change'
+  }
+});
+
+export const AppSelect = createComponent({
+  tagName: 'app-select',
+  elementClass: AppSelectElement,
+  react: React,
+  events: {
+    onInput: 'input',
+    onChange: 'change'
+  }
+});

package/select-component/index.js

@@ -0,0 +1,374 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      margin-block: 0.75rem;
+      font-family: inherit;
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+
+    .form-control {
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    }
+
+    .label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--select-label-color, #cbd5e1);
+      transition: color 0.2s ease;
+    }
+
+    .select-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      background-color: var(--select-bg, #0f172a);
+      border: 1px solid var(--select-border, #334155);
+      border-radius: var(--select-radius, 0.5rem);
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .select-wrapper:focus-within {
+      border-color: var(--select-focus-border, #38bdf8);
+      box-shadow: 0 0 0 3px var(--select-focus-ring, rgba(56, 189, 248, 0.2));
+    }
+
+    .select-field {
+      width: 100%;
+      padding: 0.625rem 2.5rem 0.625rem 0.875rem;
+      background: transparent;
+      border: none;
+      outline: none;
+      font-family: inherit;
+      font-size: 0.95rem;
+      color: var(--select-color, #f8fafc);
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+    }
+
+    .select-field option {
+      background-color: #0f172a;
+      color: #f8fafc;
+    }
+
+    .arrow-icon {
+      position: absolute;
+      right: 0.875rem;
+      pointer-events: none;
+      color: var(--select-arrow-color, #94a3b8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Ocultamos el slot de opciones del light DOM para no duplicar la visualización */
+    ::slotted(option) {
+      display: none;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .select-field {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    :host(:invalid) .select-wrapper,
+    :host([invalid]) .select-wrapper {
+      border-color: var(--select-error-border, #ef4444);
+    }
+  </style>
+
+  <div class="form-control" part="form-control">
+    <label class="label" part="label" id="label-text">
+      <slot name="label"></slot>
+    </label>
+    <div class="select-wrapper" part="wrapper">
+      <select class="select-field" part="select"></select>
+      <span class="arrow-icon" part="arrow">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </span>
+      <!-- Slot para capturar las etiquetas <option> que pase el usuario -->
+      <slot style="display: none;"></slot>
+    </div>
+  </div>
+`;
+
+export class AppSelect extends HTMLElement {
+  static formAssociated = true;
+
+  #internals = null;
+  #selectElement = null;
+  #labelText = null;
+  #slotElement = null;
+  #observer = null;
+  #initialValue = '';
+  #optionsData = null;
+
+  static get observedAttributes() {
+    return ['value', 'name', 'disabled', 'required', 'placeholder', 'label'];
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    this.#selectElement = this.shadowRoot.querySelector('.select-field');
+    this.#labelText = this.shadowRoot.querySelector('#label-text');
+    this.#slotElement = this.shadowRoot.querySelector('slot:not([name])');
+  }
+
+  connectedCallback() {
+    this.#initialValue = this.getAttribute('value') || '';
+    this.#syncOptions();
+    this.#updateState();
+
+    this.#selectElement.addEventListener('change', this.#handleChange);
+    this.#slotElement?.addEventListener('slotchange', this.#syncOptions);
+
+    // Observar inserción dinámica de <option> en el Light DOM
+    this.#observer = new MutationObserver(() => this.#syncOptions());
+    this.#observer.observe(this, { childList: true, subtree: true, characterData: true });
+  }
+
+  disconnectedCallback() {
+    this.#selectElement?.removeEventListener('change', this.#handleChange);
+    this.#slotElement?.removeEventListener('slotchange', this.#syncOptions);
+    this.#observer?.disconnect();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.#updateState();
+  }
+
+  #syncOptions = () => {
+    if (!this.#selectElement) return;
+
+    // Si las opciones vinieron por propiedad JS (array)
+    if (Array.isArray(this.#optionsData)) {
+      this.#renderOptionsFromArray(this.#optionsData);
+      return;
+    }
+
+    // Si las opciones vienen por Light DOM (<option> hijos)
+    const options = Array.from(this.querySelectorAll('option'));
+    this.#selectElement.innerHTML = '';
+
+    const placeholder = this.getAttribute('placeholder');
+    if (placeholder) {
+      const phOption = document.createElement('option');
+      phOption.value = '';
+      phOption.textContent = placeholder;
+      phOption.disabled = true;
+      phOption.selected = !this.value;
+      this.#selectElement.appendChild(phOption);
+    }
+
+    options.forEach((opt) => {
+      const clone = document.createElement('option');
+      clone.value = opt.value;
+      clone.textContent = opt.textContent;
+      clone.disabled = opt.disabled;
+      if (opt.value === this.value) {
+        clone.selected = true;
+      }
+      this.#selectElement.appendChild(clone);
+    });
+
+    if (this.value) {
+      this.#selectElement.value = this.value;
+    } else if (this.#selectElement.value) {
+      this.#internals.setFormValue(this.#selectElement.value);
+    }
+  };
+
+  #renderOptionsFromArray(items) {
+    this.#selectElement.innerHTML = '';
+
+    const placeholder = this.getAttribute('placeholder');
+    if (placeholder) {
+      const phOption = document.createElement('option');
+      phOption.value = '';
+      phOption.textContent = placeholder;
+      phOption.disabled = true;
+      phOption.selected = !this.value;
+      this.#selectElement.appendChild(phOption);
+    }
+
+    items.forEach((item) => {
+      const opt = document.createElement('option');
+      if (typeof item === 'string') {
+        opt.value = item;
+        opt.textContent = item;
+      } else {
+        opt.value = item.value;
+        opt.textContent = item.label ?? item.value;
+        opt.disabled = Boolean(item.disabled);
+      }
+      if (opt.value === this.value) {
+        opt.selected = true;
+      }
+      this.#selectElement.appendChild(opt);
+    });
+
+    if (this.value) {
+      this.#selectElement.value = this.value;
+    }
+  }
+
+  #updateState() {
+    if (!this.#selectElement) return;
+
+    const val = this.getAttribute('value') || '';
+    if (val && this.#selectElement.value !== val) {
+      this.#selectElement.value = val;
+    }
+    this.#internals.setFormValue(this.#selectElement.value || val);
+
+    this.#selectElement.disabled = this.hasAttribute('disabled');
+    this.#selectElement.required = this.hasAttribute('required');
+
+    if (this.hasAttribute('name')) {
+      this.#selectElement.name = this.getAttribute('name');
+    }
+
+    const labelAttr = this.getAttribute('label');
+    if (labelAttr && !this.querySelector('[slot="label"]')) {
+      this.#labelText.textContent = labelAttr;
+      this.#labelText.style.display = 'block';
+    } else if (!this.querySelector('[slot="label"]')) {
+      this.#labelText.style.display = 'none';
+    }
+  }
+
+  #handleChange = (event) => {
+    event.stopPropagation();
+    const val = this.#selectElement.value;
+    this.#internals.setFormValue(val);
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: { value: val }
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        bubbles: true,
+        composed: true,
+        detail: { value: val }
+      })
+    );
+  };
+
+  // Getters & Setters
+  get value() {
+    return this.#selectElement ? this.#selectElement.value : this.getAttribute('value') || '';
+  }
+
+  set value(val) {
+    const stringVal = val == null ? '' : String(val);
+    if (this.#selectElement) {
+      this.#selectElement.value = stringVal;
+    }
+    this.#internals.setFormValue(stringVal);
+  }
+
+  get options() {
+    return this.#optionsData;
+  }
+
+  set options(val) {
+    this.#optionsData = val;
+    this.#syncOptions();
+  }
+
+  get name() {
+    return this.getAttribute('name') || '';
+  }
+
+  set name(val) {
+    if (val) this.setAttribute('name', val);
+    else this.removeAttribute('name');
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(val) {
+    if (Boolean(val)) this.setAttribute('disabled', '');
+    else this.removeAttribute('disabled');
+  }
+
+  get required() {
+    return this.hasAttribute('required');
+  }
+
+  set required(val) {
+    if (Boolean(val)) this.setAttribute('required', '');
+    else this.removeAttribute('required');
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  set label(val) {
+    if (val) this.setAttribute('label', val);
+    else this.removeAttribute('label');
+  }
+
+  // Soporte nativo de formularios
+  formResetCallback() {
+    this.value = this.#initialValue;
+  }
+
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+
+  checkValidity() {
+    return this.#internals.checkValidity();
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity();
+  }
+
+  get validity() {
+    return this.#internals.validity;
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage;
+  }
+
+  focus(options) {
+    this.#selectElement?.focus(options);
+  }
+
+  blur() {
+    this.#selectElement?.blur();
+  }
+}
+
+if (!customElements.get('app-select')) {
+  customElements.define('app-select', AppSelect);
+}