@arvea/components 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -3418,6 +3418,7 @@ exports.ArveaBadge = class ArveaBadge extends lit.LitElement {
     this.textColor = "";
     this.icon = "";
     this.noBg = false;
+    this.hideIcon = false;
     this.selected = true;
   }
   render() {
@@ -3426,7 +3427,7 @@ exports.ArveaBadge = class ArveaBadge extends lit.LitElement {
       ...this.color ? { background: this.color } : {},
       ...this.textColor ? { color: this.textColor } : {}
     });
-    const showIcon = this.icon || isStatus;
+    const showIcon = !this.hideIcon && (this.icon || isStatus);
     const iconTpl = showIcon ? this.icon ? lit.html`<arvea-icon part="icon" class="icon" name=${this.icon} size="sm"></arvea-icon>` : lit.html`<span part="icon" class="icon">${unsafeSvg_js.unsafeSVG(BADGE_ICONS[this.variant])}</span>` : lit.nothing;
     return lit.html`
       <span
@@ -3468,6 +3469,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true, attribute: "no-bg" })
 ], exports.ArveaBadge.prototype, "noBg", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "hide-icon" })
+], exports.ArveaBadge.prototype, "hideIcon", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.ArveaBadge.prototype, "selected", 2);
@@ -4034,10 +4038,10 @@ exports.ArveaSlider = class ArveaSlider extends lit.LitElement {
     };
   }
   get _percentage() {
-    const range = this.max - this.min;
-    if (range <= 0) return 0;
+    const range2 = this.max - this.min;
+    if (range2 <= 0) return 0;
     const clamped = Math.max(this.min, Math.min(this.value, this.max));
-    return (clamped - this.min) / range * 100;
+    return (clamped - this.min) / range2 * 100;
   }
   _ticks() {
     if (!this.tickStep || this.tickStep <= 0) return [];
@@ -4046,9 +4050,9 @@ exports.ArveaSlider = class ArveaSlider extends lit.LitElement {
     return out;
   }
   _tickPercent(v) {
-    const range = this.max - this.min;
-    if (range <= 0) return 0;
-    return (v - this.min) / range * 100;
+    const range2 = this.max - this.min;
+    if (range2 <= 0) return 0;
+    return (v - this.min) / range2 * 100;
   }
   _formatValue() {
     return `${this.valuePrefix}${this.value}${this.valueSuffix}`;
@@ -9406,7 +9410,7 @@ var arveaDialogStyles = [
       box-shadow: var(--dialog-shadow);
       padding: var(--dialog-padding);
       max-height: 90vh;
-      overflow-y: auto;
+      overflow: visible;
       transform: translateY(-8px) scale(0.98);
       opacity: 0;
       transition: opacity 0.2s ease, transform 0.2s ease;
@@ -12629,8 +12633,8 @@ exports.ArveaStepper = class ArveaStepper extends lit.LitElement {
       })
     );
   }
-  _renderCircle(i, state20) {
-    if (state20 === "complete") {
+  _renderCircle(i, state21) {
+    if (state21 === "complete") {
       return lit.html`<span part="circle" class="circle">
         <svg class="check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
           <path d="m3.5 8.5 3 3 6-7" stroke-linecap="round" stroke-linejoin="round"/>
@@ -12643,18 +12647,18 @@ exports.ArveaStepper = class ArveaStepper extends lit.LitElement {
     return lit.html`
       <ol part="base" aria-label="Progress">
         ${this.steps.map((step, i) => {
-      const state20 = this._stateOf(i);
+      const state21 = this._stateOf(i);
       const isLast = i === this.steps.length - 1;
       const stepEl = lit.html`<button
             part="step"
             class="step"
             type="button"
-            data-state=${state20}
-            aria-current=${state20 === "active" ? "step" : lit.nothing}
-            ?disabled=${!this.clickable || state20 === "upcoming"}
+            data-state=${state21}
+            aria-current=${state21 === "active" ? "step" : lit.nothing}
+            ?disabled=${!this.clickable || state21 === "upcoming"}
             @click=${() => this._onStepClick(i)}
           >
-            ${this._renderCircle(i, state20)}
+            ${this._renderCircle(i, state21)}
             <span part="meta" class="meta">
               <span part="label" class="label">${step.label}</span>
               ${step.description ? lit.html`<span part="description" class="description">${step.description}</span>` : lit.nothing}
@@ -12662,7 +12666,7 @@ exports.ArveaStepper = class ArveaStepper extends lit.LitElement {
           </button>`;
       const connector = isLast ? lit.nothing : lit.html`<span
                 part="connector"
-                class="connector ${state20 === "complete" ? "complete" : ""}"
+                class="connector ${state21 === "complete" ? "complete" : ""}"
                 aria-hidden="true"
               ></span>`;
       return lit.html`<li
@@ -13545,11 +13549,24 @@ exports.ArveaDataTable = class ArveaDataTable extends lit.LitElement {
   }
   _renderCell(col, row, index) {
     if (col.image) return this._renderImageCell(row[col.key]);
+    if (col.badge) return this._renderBadgeCell(col.badge(row, index));
     if (col.actions) return this._renderActionsCell(col.actions(row, index), row, index);
     if (col.render) return col.render(row, index);
     const v = row[col.key];
     return v == null ? "" : String(v);
   }
+  _renderBadgeCell(badge2) {
+    if (!badge2) return lit.nothing;
+    return lit.html`<arvea-badge
+      variant=${badge2.variant ?? lit.nothing}
+      label=${badge2.label ?? lit.nothing}
+      color=${badge2.color ?? lit.nothing}
+      text-color=${badge2.textColor ?? lit.nothing}
+      icon=${badge2.icon ?? lit.nothing}
+      ?no-bg=${badge2.noBg ?? false}
+      ?hide-icon=${badge2.hideIcon ?? false}
+    ></arvea-badge>`;
+  }
   _renderImageCell(src) {
     return src ? lit.html`<img class="cell-image" src=${src} alt="" loading="lazy" />` : lit.html`<span class="cell-image cell-image--empty" aria-hidden="true">
           <arvea-icon name="file" size="sm" outline></arvea-icon>
@@ -17800,6 +17817,364 @@ __decorateClass([
 exports.ArveaDatePicker = __decorateClass([
   decorators_js.customElement("arvea-date-picker")
 ], exports.ArveaDatePicker);
+var arveaTimeSelectStyles = [
+  tokenStyles,
+  lit.css`
+    :host {
+      display: block;
+      font-family: inherit;
+      width: 100%;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .label {
+      font-size: var(--input-label-size);
+      font-weight: var(--input-label-weight);
+      color: var(--input-label-color);
+    }
+
+    .segments {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .sep {
+      font-weight: 600;
+      color: var(--colors-slate-400, #94a3b8);
+    }
+
+    .segment {
+      position: relative;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .segment-trigger {
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 6px;
+      height: var(--input-height, 38px);
+      padding: 0 10px;
+      font: inherit;
+      color: inherit;
+      background: var(--input-bg, #fff);
+      border: 1px solid var(--input-border, #e2e8f0);
+      border-radius: var(--input-radius, 6px);
+      cursor: pointer;
+    }
+    .segment-trigger:hover:not(:disabled) {
+      border-color: var(--input-border-hover, #cbd5e1);
+    }
+    .segment-trigger:focus-visible {
+      outline: none;
+      border-color: var(--input-border-focus, #3b82f6);
+      box-shadow: var(--input-shadow-focus);
+    }
+    :host([invalid]) .segment-trigger {
+      border-color: var(--select-border-invalid, #ef4444);
+    }
+    .segment-trigger:disabled {
+      cursor: not-allowed;
+      background: var(--input-bg-disabled, #f1f5f9);
+    }
+
+    .chevron {
+      flex-shrink: 0;
+      color: var(--colors-slate-500, #64748b);
+    }
+
+    .segment-popup {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      z-index: var(--popover-z, 9999);
+      background: #fff;
+      border: 1px solid var(--colors-slate-200, #e2e8f0);
+      border-radius: 10px;
+      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
+      padding: 6px;
+      max-height: 220px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+    .segment-popup.flip-up {
+      top: auto;
+      bottom: calc(100% + 4px);
+    }
+
+    .option {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      flex-shrink: 0;
+      height: 32px;
+      border: 0;
+      background: transparent;
+      border-radius: var(--datepicker-cell-radius, 6px);
+      font: inherit;
+      text-align: center;
+      cursor: pointer;
+      color: var(--colors-slate-800, #1e293b);
+    }
+    .option:hover:not(:disabled) {
+      background: var(--colors-slate-100, #f1f5f9);
+      color: var(--colors-slate-900, #0f172a);
+    }
+    .option.selected {
+      background: var(
+        --datepicker-selected-bg,
+        var(--colors-arvea-600, #217b80)
+      );
+      color: #fff;
+    }
+    .option:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .hint {
+      font-size: var(--input-hint-size);
+      color: var(--input-hint-color);
+    }
+    :host([invalid]) .hint {
+      color: var(--input-hint-color-invalid);
+    }
+  `
+];
+
+// src/components/arvea-time-select/arvea-time-select.ts
+var pad = (n) => String(n).padStart(2, "0");
+var parseTime = (value) => {
+  if (!value) return null;
+  const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value);
+  if (!match) return null;
+  const h = Number(match[1]);
+  const m = Number(match[2]);
+  const s = match[3] !== void 0 ? Number(match[3]) : 0;
+  if (h > 23 || m > 59 || s > 59) return null;
+  return { h, m, s };
+};
+var formatTime = (parts, showSeconds) => {
+  const out = [pad(parts.h), pad(parts.m)];
+  if (showSeconds) out.push(pad(parts.s));
+  return out.join(":");
+};
+var normalizeBound = (value) => {
+  const parts = parseTime(value);
+  return parts ? formatTime(parts, true) : value;
+};
+var range = (max, step) => {
+  const out = [];
+  for (let i = 0; i <= max; i += step > 0 ? step : 1) out.push(i);
+  return out;
+};
+var SEGMENT_LABEL = { h: "Hour", m: "Minute", s: "Second" };
+exports.ArveaTimeSelect = class ArveaTimeSelect extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.hideLabel = false;
+    this.value = "";
+    this.showSeconds = false;
+    this.hourStep = 1;
+    this.minuteStep = 1;
+    this.secondStep = 1;
+    this.disabled = false;
+    this.required = false;
+    this.invalid = false;
+    this.validationHint = "";
+    this._openSegment = null;
+    this._flipUp = false;
+    this._onDocPointer = (e) => {
+      if (!this._openSegment) return;
+      const path = e.composedPath();
+      if (path.includes(this)) return;
+      this._openSegment = null;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("pointerdown", this._onDocPointer);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("pointerdown", this._onDocPointer);
+  }
+  _toggle(segment) {
+    if (this.disabled) return;
+    this._openSegment = this._openSegment === segment ? null : segment;
+    if (this._openSegment) queueMicrotask(() => this._positionAndScroll());
+  }
+  _positionAndScroll() {
+    const popup = this.shadowRoot?.querySelector(".segment-popup");
+    const trigger = popup?.parentElement?.querySelector(".segment-trigger");
+    if (trigger && popup) {
+      const rect = trigger.getBoundingClientRect();
+      const popupHeight = popup.offsetHeight || 220;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      this._flipUp = spaceBelow < popupHeight + 12 && rect.top > popupHeight + 12;
+    }
+    popup?.querySelector(".option.selected")?.scrollIntoView({ block: "center" });
+  }
+  // Falls back to midnight for whichever segments haven't been picked yet, so
+  // every segment always has concrete "other two segments" to validate against.
+  _current() {
+    return parseTime(this.value) ?? { h: 0, m: 0, s: 0 };
+  }
+  _isDisabled(parts) {
+    const key = formatTime(parts, true);
+    if (this.min && key < normalizeBound(this.min)) return true;
+    if (this.max && key > normalizeBound(this.max)) return true;
+    return false;
+  }
+  _pick(segment, value) {
+    const current = this._current();
+    const next = { ...current, [segment]: value };
+    if (this._isDisabled(next)) return;
+    this.value = formatTime(next, this.showSeconds);
+    this._openSegment = null;
+    this._emit();
+  }
+  _emit() {
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    this.dispatchEvent(
+      new CustomEvent("arvea-time-change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _renderSegment(segment) {
+    const label = SEGMENT_LABEL[segment];
+    const max = segment === "h" ? 23 : 59;
+    const step = segment === "h" ? this.hourStep : segment === "m" ? this.minuteStep : this.secondStep;
+    const parts = parseTime(this.value);
+    const current = this._current();
+    const isOpen = this._openSegment === segment;
+    return lit.html`
+      <div class="segment">
+        <button
+          type="button"
+          class="segment-trigger"
+          aria-label=${label}
+          aria-haspopup="listbox"
+          aria-expanded=${isOpen ? "true" : "false"}
+          ?disabled=${this.disabled}
+          @click=${() => this._toggle(segment)}
+        >
+          <span>${parts ? pad(parts[segment]) : "--"}</span>
+          <svg class="chevron" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path
+              d="M2 3.5l3 3 3-3"
+              stroke="currentColor"
+              stroke-width="1.3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+        ${isOpen ? lit.html`
+              <div
+                class="segment-popup${this._flipUp ? " flip-up" : ""}"
+                role="listbox"
+                aria-label=${label}
+              >
+                ${range(max, step).map((n) => {
+      const isSelected = parts ? parts[segment] === n : false;
+      const optDisabled = this._isDisabled({ ...current, [segment]: n });
+      return lit.html`<button
+                    type="button"
+                    role="option"
+                    aria-selected=${isSelected ? "true" : "false"}
+                    class="option${isSelected ? " selected" : ""}"
+                    ?disabled=${optDisabled}
+                    @click=${() => this._pick(segment, n)}
+                  >
+                    ${pad(n)}
+                  </button>`;
+    })}
+              </div>
+            ` : lit.nothing}
+      </div>
+    `;
+  }
+  render() {
+    return lit.html`
+      <div part="base" class="field">
+        ${this.label && !this.hideLabel ? lit.html`<label part="label" class="label">${this.label}</label>` : lit.nothing}
+        <div part="segments" class="segments">
+          ${this._renderSegment("h")}
+          <span class="sep" aria-hidden="true">:</span>
+          ${this._renderSegment("m")}
+          ${this.showSeconds ? lit.html`<span class="sep" aria-hidden="true">:</span>${this._renderSegment("s")}` : lit.nothing}
+        </div>
+        ${this.validationHint ? lit.html`<span part="hint" class="hint">${this.validationHint}</span>` : lit.nothing}
+      </div>
+    `;
+  }
+};
+exports.ArveaTimeSelect.styles = arveaTimeSelectStyles;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.ArveaTimeSelect.prototype, "label", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "hide-label" })
+], exports.ArveaTimeSelect.prototype, "hideLabel", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.ArveaTimeSelect.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "show-seconds" })
+], exports.ArveaTimeSelect.prototype, "showSeconds", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: "hour-step" })
+], exports.ArveaTimeSelect.prototype, "hourStep", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: "minute-step" })
+], exports.ArveaTimeSelect.prototype, "minuteStep", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: "second-step" })
+], exports.ArveaTimeSelect.prototype, "secondStep", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.ArveaTimeSelect.prototype, "min", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.ArveaTimeSelect.prototype, "max", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.ArveaTimeSelect.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.ArveaTimeSelect.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.ArveaTimeSelect.prototype, "invalid", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "validation-hint" })
+], exports.ArveaTimeSelect.prototype, "validationHint", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.ArveaTimeSelect.prototype, "_openSegment", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.ArveaTimeSelect.prototype, "_flipUp", 2);
+exports.ArveaTimeSelect = __decorateClass([
+  decorators_js.customElement("arvea-time-select")
+], exports.ArveaTimeSelect);
 var arveaTreeStyles = [
   tokenStyles,
   lit.css`
@@ -18002,8 +18377,8 @@ exports.ArveaTree = class ArveaTree extends lit.LitElement {
   _toggleCheck(node) {
     const set = new Set(this._checkedSet);
     const childKeys = this._flattenChildKeys(node);
-    const state20 = this._checkState(node);
-    if (state20 === "all") {
+    const state21 = this._checkState(node);
+    if (state21 === "all") {
       set.delete(node.key);
       childKeys.forEach((k) => set.delete(k));
     } else {
@@ -18779,6 +19154,7 @@ exports.arveaTabsStyles = arveaTabsStyles;
 exports.arveaTagStyles = arveaTagStyles;
 exports.arveaTagsInputStyles = arveaTagsInputStyles;
 exports.arveaTextareaStyles = arveaTextareaStyles;
+exports.arveaTimeSelectStyles = arveaTimeSelectStyles;
 exports.arveaToastStyles = arveaToastStyles;
 exports.arveaToggleStyles = arveaToggleStyles;
 exports.arveaTooltipStyles = arveaTooltipStyles;