@dile/utils 3.0.44 → 3.1.0

package/components/time-duration/src/DileTimeDuration.js

@@ -0,0 +1,191 @@
+import { html, css, LitElement } from "lit";
+
+export class DileTimeDuration extends LitElement {
+  static properties = {
+    seconds: { 
+      type: Number
+    },
+    precision: {
+      type: String
+    },
+    extended: {
+      type: Boolean
+    },
+    language: {
+      type: String
+    },
+    icon: {
+      type: String
+    }
+  };
+
+  constructor() {
+    super();
+    this.seconds = 0;
+    this.precision = "seconds"; // seconds, minutes, hours, days
+    this.extended = false;
+    this.language = "en";
+    this.icon = "lucide.timer";
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Dynamically import dile-iconlib when component connects
+    if (this.icon) {
+      import('@dile/iconlib/dile-iconlib.js').catch(() => {
+        // Icon library not available, component will still work without icons
+      });
+      // Import the default lucide.timer icon
+      if (this.icon === 'lucide.timer') {
+        import('@dile/iconlib/lucide-icons/timer.js').catch(() => {
+          // Icon not available, will render empty
+        });
+      }
+    }
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: var(--dile-time-duration-font-size, 0.875rem);
+        color: var(--dile-time-duration-color, var(--dile-on-background-color, #303030));
+      }
+
+      .icon {
+        display: flex;
+        align-items: center;
+        --dile-icon-color: var(--dile-primary-color, #888);
+        --dile-icon-size: var(--dile-time-duration-icon-size, 20px);
+      }
+
+      .time-text {
+        display: inline;
+        font-weight: var(--dile-time-duration-font-weight, normal);
+        font-family: var(--dile-time-duration-font-family, inherit);
+        letter-spacing: var(--dile-time-duration-letter-spacing, 0);
+      }
+    `;
+  }
+
+  #getTranslations() {
+    const translations = {
+      en: {
+        day: { singular: 'day', plural: 'days' },
+        hour: { singular: 'hour', plural: 'hours' },
+        minute: { singular: 'minute', plural: 'minutes' },
+        second: { singular: 'second', plural: 'seconds' },
+        and: 'and'
+      },
+      es: {
+        day: { singular: 'día', plural: 'días' },
+        hour: { singular: 'hora', plural: 'horas' },
+        minute: { singular: 'minuto', plural: 'minutos' },
+        second: { singular: 'segundo', plural: 'segundos' },
+        and: 'y'
+      }
+    };
+    return translations[this.language] || translations.en;
+  }
+
+  #getUnitLabel(unit, value) {
+    const t = this.#getTranslations();
+    const labels = {
+      day: t.day,
+      hour: t.hour,
+      minute: t.minute,
+      second: t.second
+    };
+    const label = labels[unit];
+    return value === 1 ? label.singular : label.plural;
+  }
+
+  #formatTime() {
+    if (!Number.isFinite(this.seconds) || this.seconds < 0) {
+      return '';
+    }
+
+    const units = [
+      { name: 'day', seconds: 86400 },
+      { name: 'hour', seconds: 3600 },
+      { name: 'minute', seconds: 60 },
+      { name: 'second', seconds: 1 }
+    ];
+
+    const precisionLevels = {
+      days: ['day'],
+      hours: ['day', 'hour'],
+      minutes: ['day', 'hour', 'minute'],
+      seconds: ['day', 'hour', 'minute', 'second']
+    };
+
+    const allowedUnits = precisionLevels[this.precision] || precisionLevels.minutes;
+    const parts = [];
+    let remaining = Math.floor(this.seconds);
+
+    for (const unit of units) {
+      if (!allowedUnits.includes(unit.name)) continue;
+
+      const value = Math.floor(remaining / unit.seconds);
+      if (value > 0) {
+        parts.push({ name: unit.name, value });
+        remaining -= value * unit.seconds;
+      }
+    }
+
+    // If everything is 0, show 0 of the smallest allowed unit
+    if (parts.length === 0) {
+      const smallestUnit = allowedUnits[allowedUnits.length - 1];
+      parts.push({ name: smallestUnit, value: 0 });
+    }
+
+    // Keep only two parts
+    const displayParts = parts.slice(0, 2);
+
+    if (this.extended) {
+      return this.#formatExtended(displayParts);
+    } else {
+      return this.#formatCompact(displayParts);
+    }
+  }
+
+  #formatCompact(parts) {
+    const unitAbbreviations = {
+      en: { day: 'd', hour: 'h', minute: 'm', second: 's' },
+      es: { day: 'd', hour: 'h', minute: 'm', second: 's' }
+    };
+    const abbr = unitAbbreviations[this.language] || unitAbbreviations.en;
+    
+    return parts
+      .map(part => `${part.value}${abbr[part.name]}`)
+      .join(' ');
+  }
+
+  #formatExtended(parts) {
+    const t = this.#getTranslations();
+    const formattedParts = parts.map(part => 
+      `${part.value} ${this.#getUnitLabel(part.name, part.value)}`
+    );
+    
+    if (formattedParts.length === 1) {
+      return formattedParts[0];
+    }
+    
+    return formattedParts.join(` ${t.and} `);
+  }
+
+  render() {
+    const formattedTime = this.#formatTime();
+    
+    return html`
+      ${this.icon ? html`
+        <div class="icon">
+          <dile-iconlib icon="${this.icon}"></dile-iconlib>
+        </div>
+      ` : ''}
+      <span class="time-text">${formattedTime}</span>
+    `;
+  }
+}

package/components/time-duration/time-duration.js

@@ -0,0 +1,5 @@
+import { DileTimeDuration } from './src/DileTimeDuration.js';
+
+if (!customElements.get('dile-time-duration')) {
+  window.customElements.define('dile-time-duration', DileTimeDuration);
+}

package/components/time-duration/time-duration.spec.js

@@ -0,0 +1,68 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './time-duration.js';
+
+describe('dile-time-duration', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderTimeDuration(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-time-duration');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders 80 seconds as "1m 20s"', async () => {
+    const el = await renderTimeDuration('<dile-time-duration seconds="80"></dile-time-duration>');
+    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
+    expect(timeText).toContain('1m');
+    expect(timeText).toContain('20s');
+  });
+
+  it('renders 3665 seconds as "1h 1m"', async () => {
+    const el = await renderTimeDuration('<dile-time-duration seconds="3665"></dile-time-duration>');
+    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
+    expect(timeText).toContain('1h');
+    expect(timeText).toContain('1m');
+  });
+
+  it('renders with extended format', async () => {
+    const el = await renderTimeDuration('<dile-time-duration seconds="3665" extended></dile-time-duration>');
+    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
+    expect(timeText).toContain('hour');
+    expect(timeText).toContain('minute');
+  });
+
+  it('renders with Spanish language', async () => {
+    const el = await renderTimeDuration('<dile-time-duration seconds="3665" extended language="es"></dile-time-duration>');
+    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
+    expect(timeText).toContain('hora');
+    expect(timeText).toContain('minuto');
+  });
+
+  it('renders with days', async () => {
+    const el = await renderTimeDuration('<dile-time-duration seconds="90061"></dile-time-duration>');
+    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
+    expect(timeText).toContain('1d');
+    expect(timeText).toContain('1h');
+  });
+
+  it('respects precision attribute', async () => {
+    const el = await renderTimeDuration('<dile-time-duration seconds="80" precision="seconds"></dile-time-duration>');
+    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
+    expect(timeText).toContain('1m');
+    expect(timeText).toContain('20s');
+  });
+
+  it('renders 0 seconds with smallest allowed unit', async () => {
+    const el = await renderTimeDuration('<dile-time-duration seconds="0"></dile-time-duration>');
+    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
+    expect(timeText).toContain('0s');
+  });
+
+  it('displays custom icon', async () => {
+    const el = await renderTimeDuration('<dile-time-duration seconds="80" icon="material.timer"></dile-time-duration>');
+    expect(el.shadowRoot.querySelector('dile-iconlib').getAttribute('icon')).toBe('material.timer');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/utils",
-  "version": "3.0.44",
+  "version": "3.1.0",
   "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
   "main": "index.js",
   "scripts": {
@@ -21,7 +21,7 @@
   "homepage": "https://dile-components.com/",
   "dependencies": {
     "@dile/iconlib": "^2.0.0",
-    "@dile/ui": "^3.9.0",
+    "@dile/ui": "^3.9.1",
     "@lion/ui": "^0.21.0",
     "linkify-string": "^4.1.3",
     "linkifyjs": "^4.1.3",
@@ -30,5 +30,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "771621d06e1fa74693baba84ed3befd6f41df664"
+  "gitHead": "db6a4ba1aff1c34861146bc388ba888cb7e49450"
 }