@dile/ui 2.7.1 → 2.8.0

package/components/number-picker/index.js

@@ -0,0 +1,2 @@
+export { DileNumberPickerElement } from './src/DileNumberPickerElement.js';
+export { DileNumberPicker } from './src/DileNumberPicker.js';

package/components/number-picker/number-picker-element.js

@@ -0,0 +1,3 @@
+import { DileNumberPickerElement } from './src/DileNumberPickerElement.js';
+
+window.customElements.define('dile-number-picker-element', DileNumberPickerElement);

package/components/number-picker/number-picker.js

@@ -0,0 +1,3 @@
+import { DileNumberPicker } from './src/DileNumberPicker.js';
+
+customElements.define('dile-number-picker', DileNumberPicker);

package/components/number-picker/src/DileNumberPicker.js

@@ -0,0 +1,150 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import '../number-picker-element.js';
+import { messageStyles } from '../../input/src/message-styles.js';
+
+export class DileNumberPicker extends DileEmmitChange(LitElement) {
+  static styles = [
+      messageStyles,
+      css`
+      :host {
+        display: block;
+        margin-bottom: 10px;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      label {
+        display: block;
+        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+        font-size: var(--dile-input-label-font-size, 1em);
+        color: var(--dile-input-label-color, #59e);
+        font-weight: var(--dile-input-label-font-weight, normal);
+      }
+  `
+  ];
+
+  static get formAssociated() {
+    return true;
+  }
+
+  static get properties() {
+    return {
+      value: { type: String },
+      digits: { type: Number },
+      leadingZeros: { type: Boolean },
+      step: { type: Number },
+      
+      /** Label to the element */
+      label: { type: String },
+
+      /** Disable the input field */
+      disabled: { type: Boolean },
+
+      /** Name for this input field */
+      name: { type: String },
+
+      /** Message Displayed */
+      message: { type: String },
+
+      /** Has error on this input field */
+      errored: { type: Boolean },
+
+      /** Hide errors on input */
+      hideErrorOnInput: { type: Boolean },
+
+      /** Set the application focus to this the input component after the initialization */
+      focusOnStart: { type: Boolean },
+
+      min: { type: String },
+      max: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.value = "";
+    this.digits = 2;
+    this.leadingZeros = false;
+    this.step = 1;
+    this.internals = this.attachInternals();
+  }
+
+  render() {
+    return html`
+
+      <main>
+            ${this.label
+              ? html`<label for="textField">${this.label}</label>`
+              : ""}
+             <section class="for-input">
+              <dile-number-picker-element
+                value="${this.value}"
+                digits="${this.digits}"
+                ?leadingZeros="${this.leadingZeros}"
+                step="${this.step}"
+                @dile-number-picker-value-changed=${this.valueChanged}
+                ?focusOnStart=${this.focusOnStart}
+                ?errored=${this.errored}
+                min=${this._numericMin(this.min)}
+                max=${this._numericMax(this.max)}
+                ?disabled=${this.disabled}
+              ></dile-number-picker-element>
+            </section>
+            ${this.messageTemplate}
+          </main>
+    `;
+  }
+
+  get el() {
+    return this.shadowRoot.querySelector('dile-number-picker-element')
+  }
+
+  get messageTemplate() {
+    return html`
+      ${this.message 
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    `
+  }
+
+  _numericMin(min) {
+    return min !== undefined && min !== '' ? parseInt(min, 10) : undefined;
+  }
+
+  _numericMax(max) {
+    return max !== undefined && max !== '' ? parseInt(max, 10) : undefined;
+  }
+
+
+  clear() {
+    this.value = 0;
+    this.el.clear();
+  }
+
+
+  valueChanged(e) {
+    this.value = e.detail;
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();  
+    }
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('value')) {
+      this.emmitChange();
+      this.internals.setFormValue(this.value);
+    }
+  }
+
+  focus() {
+    this.el.focus();
+  }
+
+  clearError() {
+      this.errored = false;
+      this.message = '';
+    }
+}
+

package/components/number-picker/src/DileNumberPickerElement.js

@@ -0,0 +1,220 @@
+import { html, css, LitElement } from "lit";
+import { arrowDropUpLargeIcon, arrowDropDownLargeIcon } from '@dile/icons';
+import '../../icon/icon.js'
+
+export class DileNumberPickerElement extends LitElement {
+  static get styles() {
+    return css`
+        :host {
+          display: block;
+          --dile-icon-size: var(--dile-number-picker-icon-size, 16px);
+          --dile-icon-color: var(--dile-number-picker-icon-color, #888);
+        }
+        section {
+          display: flex;
+          align-items: stretch;
+          gap: 0.2rem;
+        }
+        input {
+          border-radius: var(--dile-input-border-radius, 5px);
+          padding: var(--dile-number-picker-padding, 0.15rem 0.25rem);
+          width: var(--dile-number-picker-width, 48px);
+          text-align: center;
+          box-sizing: border-box;
+          border-radius: var(--dile-input-border-radius, 5px);
+          border: var(--dile-input-border-width, 1px) solid var(--dile-input-border-color, #888);
+          font-size: var(--dile-input-font-size, 1em);
+          background-color: var(--dile-input-background-color, #fff);
+          color: var(--dile-input-color, #303030);
+        }
+        .controls {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 0.3rem;
+        }
+        dile-icon {
+          cursor: pointer;
+          user-select: none;
+        }
+        :host([errored]) input {
+          border-color: var(--dile-input-error-border-color, #c00);
+        }
+
+        input:disabled {
+          background-color: #f5f5f5;
+          border-color: var(--dile-input-disabled-border-color, #eee);
+        }
+      `
+  }
+
+  static get properties() {
+    return {
+      value: { type: String },
+      digits: { type: Number },
+      leadingZeros: { type: Boolean },
+      step: { type: Number },
+      /** Set errored state */
+      errored: { type: Boolean },
+      /** Set the application focus to this the input component after the initialization */
+      focusOnStart: { type: Boolean },
+      min: { 
+        type: String,
+        converter: {
+          fromAttribute: (value, type) => {
+            return value === undefined || value === "" ? undefined : parseInt(value);
+          },
+          toAttribute: (value, type) => {
+            return value;
+          }
+        }
+      },
+      max: { 
+        type: String,
+        converter: {
+          fromAttribute: (value, type) => {
+            return value === undefined || value === "" ? undefined : parseInt(value);
+          },
+          toAttribute: (value, type) => {
+            return value;
+          }
+        }
+      },
+      disabled: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.value = "";
+    this.digits = 2;
+    this.leadingZeros = false;
+    this.step = 1;
+    this.disabled = false;
+  }
+
+  get elinput() {
+    return this.shadowRoot.getElementById('elinput');
+  }
+
+  firstUpdated() {
+    this._transformInput(this.value || "0");
+    if(this.focusOnStart) {
+      this.focus();
+    }
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('value')) {
+      this._transformInput(this.value);
+    }
+  }
+
+  render() {
+    return html`
+      <section>
+        <input 
+          type="text" 
+          id="elinput"
+          @input=${this._onInput}
+          ?disabled=${this.disabled}
+        >
+        <div class="controls">
+          <dile-icon .icon=${arrowDropUpLargeIcon} @click=${this.increment}></dile-icon>
+          <dile-icon .icon=${arrowDropDownLargeIcon} @click=${this.decrement}></dile-icon>
+        </div>
+      </section>
+    `;
+  }
+
+  _onInput(e) {
+    this._transformInput(e.target.value);
+  }
+
+  _transformInput(value) {
+    const cleaned = this._clean(value);
+    const formatted = this._formatNumber(cleaned);
+    this.elinput.value = formatted;
+    this.value = formatted;
+    this.dispatchEvent(new CustomEvent('dile-number-picker-value-changed', { 
+      bubbles: true,
+      composed: true,
+      detail: this.value,
+    }));
+  }
+
+  _clean(value) {
+    let cleaned = value.replace(/[^\d]/g, '');
+
+    if (this.leadingZeros && cleaned.length > 1 && cleaned.startsWith('0')) {
+      cleaned = cleaned.substring(1);
+    }
+
+    if (this.digits && cleaned.length > this.digits) {
+      cleaned = cleaned.substring(0, this.digits);
+    }
+
+    let num = parseInt(cleaned || "0", 10);
+
+    const maxByDigits = Math.pow(10, this.digits) - 1;
+    if (num > maxByDigits) {
+      num = maxByDigits;
+    }
+
+    if (typeof this.min === 'number' && num < this.min) {
+      num = this.min;
+    }
+    if (typeof this.max === 'number' && num > this.max) {
+      num = this.max;
+    }
+
+    if (!this.leadingZeros) {
+      return num;
+    }
+
+    return num.toString();
+  }
+
+  _formatNumber(value) {
+    let val = value.toString();
+    if (this.leadingZeros) {
+      val = val.padStart(this.digits, '0');
+    }
+    return val;
+  }
+
+  increment() {
+    if(!this.disabled) {
+      let current = parseInt(this._clean(this.elinput.value), 10) || 0;
+      let next = current + this.step;
+      let asString = next.toString();
+  
+      // Si el resultado excede digits, no hacemos nada
+      if (asString.length > this.digits) {
+        return;
+      }
+  
+      this._transformInput(asString);
+    }
+  }
+
+  decrement() {
+    if(!this.disabled) {
+      let current = parseInt(this._clean(this.elinput.value), 10) || 0;
+      let next = Math.max(0, current - this.step);
+      let asString = next.toString();
+
+      this._transformInput(asString);
+    }
+  }
+
+  focus() {
+    console.log(this.elinput);
+    this.elinput.focus();
+  }
+
+  clear() {
+    this.value = 0;
+    this.elinput.value = 0;
+  }
+}

package/components/time-picker/src/DileTimePicker.js

@@ -0,0 +1,172 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import '../../number-picker/number-picker-element.js';
+import { messageStyles } from '../../input/src/message-styles.js';
+
+export class DileTimePicker extends DileEmmitChange(LitElement) {
+  static styles = [
+    messageStyles,
+    css`
+      :host {
+        display: block;
+        margin-bottom: 10px;
+      }
+      label {
+        display: block;
+        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+        font-size: var(--dile-input-label-font-size, 1em);
+        color: var(--dile-input-label-color, #59e);
+        font-weight: var(--dile-input-label-font-weight, normal);
+      }
+      section {
+        display: flex;
+        gap: 0.5rem;
+      }
+    `
+  ];
+
+  static get formAssociated() {
+    return true;
+  }
+
+  static get properties() {
+    return {
+      value: { type: String },
+      _hours: { type: String, state: true },
+      _minutes: { type: String, state: true },
+      _seconds: { type: String, state: true },
+
+      label: { type: String },
+      disabled: { type: Boolean },
+      message: { type: String },
+      errored: { type: Boolean },
+      hideErrorOnInput: { type: Boolean },
+      focusOnStart: { type: Boolean },
+      name: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.value = "00:00:00";
+    this._setFromValue(this.value);
+    this.internals = this.attachInternals();
+  }
+
+  render() {
+    return html`
+      <main>
+        ${this.label ? html`<label>${this.label}</label>` : ''}
+        <section class="for-input">
+          <dile-number-picker-element
+            min="0"
+            max="23"
+            step="1"
+            digits="2"
+            leadingZeros
+            .value=${this._hours}
+            ?disabled=${this.disabled}
+            ?errored=${this.errored}
+            ?focusOnStart=${this.focusOnStart}
+            @dile-number-picker-value-changed=${this._changeHours}
+          ></dile-number-picker-element>
+          <dile-number-picker-element
+            min="0"
+            max="59"
+            step="5"
+            digits="2"
+            leadingZeros
+            .value=${this._minutes}
+            ?disabled=${this.disabled}
+            ?errored=${this.errored}
+            @dile-number-picker-value-changed=${this._changeMinutes}
+          ></dile-number-picker-element>
+          <dile-number-picker-element
+            min="0"
+            max="59"
+            step="5"
+            digits="2"
+            leadingZeros
+            .value=${this._seconds}
+            ?disabled=${this.disabled}
+            ?errored=${this.errored}
+            @dile-number-picker-value-changed=${this._changeSeconds}
+          ></dile-number-picker-element>
+        </section>
+        ${this.messageTemplate}
+      </main>
+    `;
+  }
+
+  get messageTemplate() {
+    return html`
+      ${this.message 
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    `
+  }
+
+  get hoursEl() {
+    return this.shadowRoot.querySelectorAll('dile-number-picker-element')[0];
+  }
+
+  willUpdate(changedProperties) {
+    if (changedProperties.has('value')) {
+      this._setFromValue(this.value);
+    }
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('value')) {
+      this.emmitChange();
+      this.internals.setFormValue(this.value);
+    }
+  }
+
+  _changeHours(e) {
+    this._hours = this._normalize(e.detail);
+    this._updateValue();
+    if (this.hideErrorOnInput && this.errored) this.clearError();
+  }
+
+  _changeMinutes(e) {
+    this._minutes = this._normalize(e.detail);
+    this._updateValue();
+    if (this.hideErrorOnInput && this.errored) this.clearError();
+  }
+
+  _changeSeconds(e) {
+    this._seconds = this._normalize(e.detail);
+    this._updateValue();
+    if (this.hideErrorOnInput && this.errored) this.clearError();
+  }
+
+  _normalize(value) {
+    const num = parseInt(value, 10);
+    return isNaN(num) ? '00' : num.toString().padStart(2, '0');
+  }
+
+  _setFromValue(value) {
+    const parts = (value || '00:00:00').split(':');
+    this._hours = this._normalize(parts[0]);
+    this._minutes = this._normalize(parts[1]);
+    this._seconds = this._normalize(parts[2]);
+  }
+
+  _updateValue() {
+    const newValue = `${this._hours}:${this._minutes}:${this._seconds}`;
+    if (this.value !== newValue) {
+      this.value = newValue;
+    }
+  }
+
+  focus() {
+    this.hoursEl.focus();
+  }
+
+  clearError() {
+    this.errored = false;
+    this.message = '';
+  }
+}

package/components/time-picker/time-picker.js

@@ -0,0 +1,2 @@
+import { DileTimePicker } from "./src/DileTimePicker";
+customElements.define('dile-time-picker', DileTimePicker);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -20,11 +20,11 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/icons": "^2.2.0",
+    "@dile/icons": "^2.3.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "260fc2605a66bdb10796e07242fa396081659c2c"
+  "gitHead": "23cccd2c6346a026fe4dae9374520e604c620085"
 }