@logosphere-ui/core 0.0.0-alpha.23 → 0.0.0-alpha.25

package/dist/index.js

@@ -1,43 +1,360 @@
-import { B as e } from "./button-BqOMevro.js";
-import { L as t } from "./badge-B2chRYGd.js";
-import { C as s } from "./checkbox-g6kl2jGR.js";
-import { F as x } from "./formfield-CNh4mBSs.js";
-import { S as L } from "./switch-CG4SSjTg.js";
-import { B as n } from "./breadcrumb-BB61Xt0s.js";
-import { C } from "./card-CNoTUaJC.js";
-import { L as u } from "./input-jmbvgWEq.js";
-import { P as M } from "./popover-CaVOXo_k.js";
-import { T as l } from "./text-area-Dec_k4rs.js";
-import { L as T } from "./chatbot-B1Yb35Rp.js";
-import { L as i } from "./calendar-WZ_GQvnn.js";
-import { C as F } from "./combobox-LBU6VHLi.js";
-import { L as k } from "./datepicker-SwKsdw3S.js";
-import { D as S } from "./drawer-DVINJB4a.js";
-import { D as A } from "./download-manager-a541AYhr.js";
-import { L as j, a as q } from "./leftmenu-C-q1h_2U.js";
-import { M as z } from "./modal-B8aQyCBg.js";
-import { L as H } from "./tab-BYU_XEhp.js";
-import { T as K } from "./tree-menu-BbX8GK_z.js";
+import { B as C } from "./button-BBf5JAD-.js";
+import { L as z } from "./badge-CGgnn_UN.js";
+import { C as E } from "./checkbox-g6kl2jGR.js";
+import { F as I } from "./formfield-BZOK4Pkz.js";
+import { S as V } from "./switch-CG4SSjTg.js";
+import { B } from "./breadcrumb-BB61Xt0s.js";
+import { C as H } from "./card-RWV7CumH.js";
+import { L as F } from "./input-CG6RsUJs.js";
+import { P as N } from "./popover-CaVOXo_k.js";
+import { T as U } from "./text-area-CG0gBXni.js";
+import { unsafeCSS as d, css as _, LitElement as m, html as h } from "lit";
+import { property as o, state as c, query as u, customElement as v } from "lit/decorators.js";
+import { createPopper as b } from "@popperjs/core";
+import "./ui-icon-CFvsDv0z.js";
+import { L as J } from "./chatbot-CDtwNwGX.js";
+import { L as R } from "./calendar-BiJlAmA6.js";
+import { C as X } from "./combobox-D5QdM3ue.js";
+import { L as Z } from "./datepicker-DZsZdSCv.js";
+import { D as te } from "./drawer-D_qOdapq.js";
+import { D as re } from "./download-manager-a541AYhr.js";
+import { L as se, a as ne } from "./leftmenu-DJE2N5kl.js";
+import { M as pe } from "./modal-BhhhXCEK.js";
+import { L as ce, a as he, T as ue } from "./toast-container-Br8TDkFh.js";
+import { L as _e } from "./tab-BYU_XEhp.js";
+import { T as ve } from "./tree-menu-B39KDvKV.js";
+const g = ":host{display:block;width:100%}.timepicker__reference{display:block;width:100%}.timepicker__trigger{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;height:100%;min-height:32px;outline:none;border-radius:0 var(--radius-base) var(--radius-base) 0;transition:color var(--transition-speed-fast) var(--transition-timing),background-color var(--transition-speed-fast) var(--transition-timing)}.timepicker__trigger:hover{color:var(--color-body-text);background-color:var(--color-body-bg-hover)}.timepicker__trigger--active{color:var(--color-body-text)}.timepicker__trigger:disabled{pointer-events:none;opacity:.4}.timepicker__popup[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none;width:240px;background-color:var(--color-body-bg);border-radius:12px;box-shadow:0 4px 16px #7878783d;overflow:hidden;z-index:var(--z-index-dropdown, 1000)}.timepicker__spinner{display:flex;flex-direction:row;align-items:stretch;padding:var(--spacing-1) var(--spacing-2)}.timepicker__col{flex:1;display:flex;flex-direction:column;padding:0px var(--spacing-5)}.timepicker__col--left{align-items:flex-start}.timepicker__col--right{align-items:flex-end}.timepicker__col--sep{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--spacing-1)}.timepicker__spin-btn{height:32px;display:flex;align-items:center;justify-content:center;border:none;padding:var(--spacing-2);background:transparent;color:var(--color-secondary);border-radius:var(--radius-base);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__spin-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__spin-btn:active{background-color:var(--color-body-bg-active)}.timepicker__time-unit{height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);text-align:center;box-sizing:border-box;padding:var(--spacing-2)}.timepicker__colon{height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);color:var(--color-secondary)}.timepicker__actions{display:flex;align-items:center;padding:var(--spacing-2);border-top:1px solid var(--color-border);gap:var(--spacing-1)}.timepicker__action-btn{flex:1 0 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-secondary);border-radius:var(--radius-full);cursor:pointer;padding:var(--spacing-2);outline:none;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__action-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__action-btn:active{background-color:var(--color-body-bg-active)}";
+var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, r, n, a) => {
+  for (var s = a > 1 ? void 0 : a ? k(r, n) : r, p = e.length - 1, l; p >= 0; p--)
+    (l = e[p]) && (s = (a ? l(r, n, s) : l(s)) || s);
+  return a && s && f(r, n, s), s;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.value = "", this.label = "", this.helper = "", this.error = "", this.placeholder = "__:__", this.required = !1, this.disabled = !1, this.readonly = !1, this.size = "default", this.variant = "default", this._isOpen = !1, this._hour = 0, this._minute = 0, this._handleOutsideClick = (e) => {
+      this._isOpen && !e.composedPath().includes(this) && (this._isOpen = !1);
+    }, this._handleInputChange = (e) => {
+      e.stopPropagation();
+      const r = e.detail?.value ?? "";
+      if (/^\d{2}:\d{2}$/.test(r)) {
+        const [n, a] = this._parseValue(r);
+        this._hour = n, this._minute = a;
+        const s = `${this._pad(n)}:${this._pad(a)}`;
+        this.value = s, this._emit(s);
+      }
+    }, this._handleInputClear = (e) => {
+      e.stopPropagation(), this.value = "", this._hour = 0, this._minute = 0, this._emit(""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this._isOpen = !1;
+    }, this._incrementHour = () => {
+      this._hour = (this._hour + 1) % 24, this._syncValue();
+    }, this._decrementHour = () => {
+      this._hour = (this._hour - 1 + 24) % 24, this._syncValue();
+    }, this._incrementMinute = () => {
+      this._minute = (this._minute + 1) % 60, this._syncValue();
+    }, this._decrementMinute = () => {
+      this._minute = (this._minute - 1 + 60) % 60, this._syncValue();
+    };
+  }
+  // ── Lifecycle ───────────────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this._destroyPopper();
+  }
+  willUpdate(e) {
+    if (e.has("value") && /^\d{1,2}:\d{2}$/.test(this.value)) {
+      const [r, n] = this._parseValue(this.value);
+      this._hour = r, this._minute = n;
+    }
+  }
+  updated(e) {
+    e.has("_isOpen") && (this._isOpen ? this.updateComplete.then(() => {
+      this._showPopover(), this._updatePopper();
+    }) : (this._hidePopover(), this._destroyPopper()));
+  }
+  // ── Value helpers ───────────────────────────────────────────────────────────
+  _parseValue(e) {
+    const r = e.match(/^(\d{1,2}):(\d{2})$/);
+    return r ? [
+      Math.min(23, Math.max(0, parseInt(r[1], 10))),
+      Math.min(59, Math.max(0, parseInt(r[2], 10)))
+    ] : [0, 0];
+  }
+  _pad(e) {
+    return String(e).padStart(2, "0");
+  }
+  // ── Popper / Popover ────────────────────────────────────────────────────────
+  _updatePopper() {
+    !this._referenceEl || !this._popupEl || (this._popperInstance = b(this._referenceEl, this._popupEl, {
+      placement: "bottom-start",
+      modifiers: [
+        { name: "offset", options: { offset: [0, 4] } },
+        { name: "flip", options: { fallbackPlacements: ["top-start"] } },
+        {
+          name: "preventOverflow",
+          options: { boundary: document.documentElement, padding: 8 }
+        }
+      ]
+    }));
+  }
+  _destroyPopper() {
+    this._popperInstance?.destroy(), this._popperInstance = void 0;
+  }
+  _showPopover() {
+    this._popupEl?.showPopover?.();
+  }
+  _hidePopover() {
+    const e = this._popupEl;
+    try {
+      e?.hidePopover?.();
+    } catch {
+    }
+  }
+  _togglePopup() {
+    if (!(this.disabled || this.readonly))
+      if (this._isOpen)
+        this._isOpen = !1;
+      else {
+        const [e, r] = this._parseValue(this.value);
+        this._hour = e, this._minute = r, this._isOpen = !0;
+      }
+  }
+  _clearValue(e) {
+    e?.stopPropagation(), this.value = "", this._hour = 0, this._minute = 0, this._emit(""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this._isOpen = !1;
+  }
+  _setNow() {
+    const e = /* @__PURE__ */ new Date();
+    this._hour = e.getHours(), this._minute = e.getMinutes(), this._syncValue();
+  }
+  _emit(e) {
+    this.onChange?.(e), this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: e }
+    }));
+  }
+  _syncValue() {
+    const e = `${this._pad(this._hour)}:${this._pad(this._minute)}`;
+    this.value = e, this._emit(e);
+  }
+  _startSpin(e) {
+    e(), this._spinInterval = setInterval(e, 120);
+  }
+  _stopSpin() {
+    clearInterval(this._spinInterval), this._spinInterval = void 0;
+  }
+  // ── Render ──────────────────────────────────────────────────────────────────
+  _renderPopup() {
+    return h`
+      <div data-timepicker-popup popover="manual" class="timepicker__popup">
+        <div class="timepicker__spinner">
+          <!-- Sol sütun: saat -->
+          <div class="timepicker__col timepicker__col--left">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${() => this._startSpin(this._incrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${(e) => {
+      e.preventDefault(), this._startSpin(this._incrementHour);
+    }}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._hour)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${() => this._startSpin(this._decrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${(e) => {
+      e.preventDefault(), this._startSpin(this._decrementHour);
+    }}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+
+          <!-- Orta sütun: iki nokta -->
+          <div class="timepicker__col timepicker__col--sep">
+            <div class="timepicker__colon">:</div>
+          </div>
+
+          <!-- Sağ sütun: dakika -->
+          <div class="timepicker__col timepicker__col--right">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${() => this._startSpin(this._incrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${(e) => {
+      e.preventDefault(), this._startSpin(this._incrementMinute);
+    }}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._minute)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${() => this._startSpin(this._decrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${(e) => {
+      e.preventDefault(), this._startSpin(this._decrementMinute);
+    }}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="timepicker__actions">
+          <button
+            class="timepicker__action-btn"
+            @click=${this._setNow}
+            title="Şu anki saati seç"
+          >
+            <ui-icon name="uil-calendar-alt" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${() => this._clearValue()}
+            title="Temizle"
+          >
+            <ui-icon name="uil-trash" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${() => {
+      this._isOpen = !1;
+    }}
+            title="Kapat"
+          >
+            <ui-icon name="uil-times" size="16"></ui-icon>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return h`
+      <div class="timepicker__reference">
+        <logosphere-input
+          .label=${this.label}
+          .helper=${this.helper}
+          .error=${this.error}
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .readonly=${this.readonly}
+          .size=${this.size}
+          .variant=${this.variant}
+          .placeholder=${this.placeholder}
+          .value=${this.value}
+          mask="00:00"
+          @input=${this._handleInputChange}
+          @clear=${this._handleInputClear}
+          @change=${(e) => e.stopPropagation()}
+        >
+          <button
+            slot="suffix"
+            type="button"
+            class="timepicker__trigger ${this._isOpen ? "timepicker__trigger--active" : ""}"
+            @click=${this._togglePopup}
+            ?disabled=${this.disabled}
+            tabindex=${this.disabled ? "-1" : "0"}
+            aria-label="Saat seç"
+            aria-expanded=${this._isOpen ? "true" : "false"}
+          >
+            <ui-icon name="uil-clock" size="16"></ui-icon>
+          </button>
+        </logosphere-input>
+      </div>
+
+      ${this._renderPopup()}
+    `;
+  }
+};
+t.styles = [_`${d(g)}`];
+i([
+  o({ type: String })
+], t.prototype, "value", 2);
+i([
+  o({ type: String })
+], t.prototype, "label", 2);
+i([
+  o({ type: String })
+], t.prototype, "helper", 2);
+i([
+  o({ type: String })
+], t.prototype, "error", 2);
+i([
+  o({ type: String })
+], t.prototype, "placeholder", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "required", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "disabled", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "readonly", 2);
+i([
+  o({ type: String })
+], t.prototype, "size", 2);
+i([
+  o({ type: String })
+], t.prototype, "variant", 2);
+i([
+  o({ attribute: !1 })
+], t.prototype, "onChange", 2);
+i([
+  c()
+], t.prototype, "_isOpen", 2);
+i([
+  c()
+], t.prototype, "_hour", 2);
+i([
+  c()
+], t.prototype, "_minute", 2);
+i([
+  u(".timepicker__reference")
+], t.prototype, "_referenceEl", 2);
+i([
+  u("[data-timepicker-popup]")
+], t.prototype, "_popupEl", 2);
+t = i([
+  v("logosphere-timepicker")
+], t);
 export {
-  n as Breadcrumb,
-  e as Button,
-  C as Card,
-  s as Checkbox,
-  F as Combobox,
-  A as DownloadManager,
-  S as Drawer,
-  x as FormField,
-  j as LeftMenu,
-  q as LeftMenuItemElement,
-  t as LogosphereBadge,
-  i as LogosphereCalendar,
-  T as LogosphereChatBot,
-  k as LogosphereDatePicker,
-  u as LogosphereInput,
-  H as LogosphereTab,
-  z as Modal,
-  M as Popover,
-  L as Switch,
-  l as TextArea,
-  K as TreeMenu
+  B as Breadcrumb,
+  C as Button,
+  H as Card,
+  E as Checkbox,
+  X as Combobox,
+  re as DownloadManager,
+  te as Drawer,
+  I as FormField,
+  se as LeftMenu,
+  ne as LeftMenuItemElement,
+  z as LogosphereBadge,
+  R as LogosphereCalendar,
+  J as LogosphereChatBot,
+  Z as LogosphereDatePicker,
+  F as LogosphereInput,
+  _e as LogosphereTab,
+  ce as LogosphereToast,
+  he as LogosphereToastContainer,
+  pe as Modal,
+  N as Popover,
+  V as Switch,
+  U as TextArea,
+  t as TimePicker,
+  ue as ToastService,
+  ve as TreeMenu
 };