@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/input-number/input-number.svelte

@@ -0,0 +1,783 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let value = void 0;
+export let defaultValue = void 0;
+export let withoutButton = void 0;
+export let controls = void 0;
+export let step = void 0;
+export let precision = void 0;
+export let thousandSeparator = void 0;
+export let type = void 0;
+export let disabled = void 0;
+export let readOnly = void 0;
+export let loading = void 0;
+export let max = void 0;
+export let min = void 0;
+export let onValueChange = void 0;
+export let onChange = void 0;
+export let name = void 0;
+export let id = void 0;
+export let onInput = void 0;
+export let onBlur = void 0;
+export let onCopy = void 0;
+export let onCut = void 0;
+export let onKeyDown = void 0;
+export let allowExponential = void 0;
+export let className = void 0;
+export let error = void 0;
+export let errorMessage = void 0;
+export let size = void 0;
+export let block = void 0;
+export let ui = void 0;
+export let label = void 0;
+export let labelClass = void 0;
+export let labelStyle = void 0;
+export let required = void 0;
+export let optional = void 0;
+export let optionalText = void 0;
+export let helperText = void 0;
+export let helperTextPosition = void 0;
+export let helperTextClass = void 0;
+export let helperTextStyle = void 0;
+export let wrapperClass = void 0;
+export let rounded = void 0;
+export let controlsPosition = void 0;
+export let wrapperStyle = void 0;
+export let addonLeft = void 0;
+export let iconLeft = void 0;
+export let inputRef = void 0;
+export let inputClass = void 0;
+export let placeholder = void 0;
+export let autoComplete = void 0;
+export let maxLength = void 0;
+export let minLength = void 0;
+export let inputStyle = void 0;
+export let onFocus = void 0;
+export let onKeyUp = void 0;
+export let iconRight = void 0;
+export let controlsClass = void 0;
+export let controlsStyle = void 0;
+export let addonRight = void 0;
+export let errorMessageClass = void 0;
+export let errorMessageStyle = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+function shouldShowControls() {
+  if (withoutButton) {
+    return false;
+  }
+  return controls !== false;
+}
+function getStep() {
+  return step !== void 0 ? step : 1;
+}
+function getPrecision() {
+  if (precision !== void 0) {
+    return precision;
+  }
+  if (step !== void 0) {
+    const stepVal = step;
+    const stepStr = String(stepVal);
+    const dotIdx = stepStr.indexOf(".");
+    return dotIdx === -1 ? 0 : stepStr.length - dotIdx - 1;
+  }
+  return -1;
+}
+function getThousandSep() {
+  return thousandSeparator ? "." : "";
+}
+function getInputType() {
+  if (type)
+    return type;
+  return "text";
+}
+function getInputMode() {
+  return getPrecision() === 0 ? "numeric" : "decimal";
+}
+function parseToRawNumber(displayVal) {
+  if (displayVal === void 0 || displayVal === null || displayVal === "") {
+    return "";
+  }
+  if (typeof displayVal === "number") {
+    return String(displayVal);
+  }
+  let s = String(displayVal).trim();
+  if (s === "-" || s === "")
+    return s;
+  let isNegative = false;
+  if (s.startsWith("-")) {
+    isNegative = true;
+    s = s.slice(1);
+  }
+  s = s.replace(/\./g, "");
+  s = s.replace(/,/g, ".");
+  s = s.replace(/[^0-9.]/g, "");
+  const dotIndex = s.indexOf(".");
+  if (dotIndex !== -1) {
+    s = s.slice(0, dotIndex + 1) + s.slice(dotIndex + 1).replace(/\./g, "");
+  }
+  return (isNegative ? "-" : "") + s;
+}
+function formatValue(rawVal) {
+  if (rawVal === void 0 || rawVal === null || rawVal === "") {
+    return "";
+  }
+  const strVal = String(rawVal);
+  if (strVal === "-")
+    return "-";
+  const thSep = getThousandSep();
+  let isNegative = false;
+  let clean = strVal;
+  if (clean.startsWith("-")) {
+    isNegative = true;
+    clean = clean.slice(1);
+  }
+  let intPart = clean;
+  let decPart = "";
+  let hasDecimal = false;
+  if (clean.includes(".")) {
+    hasDecimal = true;
+    const parts = clean.split(".");
+    intPart = parts[0];
+    decPart = parts.slice(1).join("");
+  } else if (clean.includes(",")) {
+    hasDecimal = true;
+    const parts = clean.split(",");
+    intPart = parts[0];
+    decPart = parts.slice(1).join("");
+  }
+  const formattedInt = thSep ? intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thSep) : intPart;
+  let result = (isNegative ? "-" : "") + (formattedInt || (hasDecimal ? "0" : ""));
+  if (hasDecimal) {
+    result += "," + decPart;
+  }
+  return result;
+}
+function getRawValue() {
+  if (value !== void 0) {
+    if (innerValue === "-") {
+      return "-";
+    }
+    if (value === void 0 || value === null || value === "") {
+      return "";
+    }
+    if (typeof innerValue === "string" && (innerValue.includes(".") || innerValue.includes(",") || innerValue === "-")) {
+      const innerNum = Number(parseToRawNumber(innerValue));
+      const propNum = Number(value);
+      if (innerNum === propNum) {
+        return innerValue;
+      }
+    }
+    return value;
+  }
+  return innerValue !== void 0 && innerValue !== null ? innerValue : "";
+}
+function getDisplayValue() {
+  const raw = getRawValue();
+  if (raw === void 0 || raw === null || raw === "")
+    return "";
+  if (raw === "-")
+    return "-";
+  return formatValue(raw);
+}
+function getCurrentNumber() {
+  const raw = getRawValue();
+  if (raw === void 0 || raw === null || raw === "")
+    return void 0;
+  const parsed = parseToRawNumber(raw);
+  if (parsed === "" || parsed === "-")
+    return void 0;
+  const num = Number(parsed);
+  return isNaN(num) ? void 0 : num;
+}
+function canIncrement() {
+  if (disabled || readOnly || loading)
+    return false;
+  const num = getCurrentNumber();
+  if (max !== void 0 && num !== void 0) {
+    return num < max;
+  }
+  return true;
+}
+function canDecrement() {
+  if (disabled || readOnly || loading)
+    return false;
+  const num = getCurrentNumber();
+  if (min !== void 0 && num !== void 0) {
+    return num > min;
+  }
+  return true;
+}
+function clamp(val) {
+  let result = val;
+  if (min !== void 0 && result < min) {
+    result = min;
+  }
+  if (max !== void 0 && result > max) {
+    result = max;
+  }
+  const prec = getPrecision();
+  if (prec > 0) {
+    const factor = Math.pow(10, prec);
+    result = Math.round(result * factor) / factor;
+  } else if (prec === 0 && precision === 0) {
+    result = Math.round(result);
+  }
+  return result;
+}
+function emitValue(nextVal) {
+  innerValue = nextVal;
+  const rawParsed = typeof nextVal === "string" ? parseToRawNumber(nextVal) : nextVal;
+  const numVal = typeof rawParsed === "number" ? rawParsed : rawParsed === "" || rawParsed === "-" ? void 0 : Number(rawParsed);
+  const safeNumVal = numVal !== void 0 && isNaN(numVal) ? void 0 : numVal;
+  if (onValueChange) {
+    onValueChange(safeNumVal);
+  }
+  if (onChange) {
+    const syntheticEvent = {
+      target: {
+        value: rawParsed,
+        valueAsNumber: safeNumVal,
+        name,
+        id
+      },
+      currentTarget: {
+        value: rawParsed,
+        valueAsNumber: safeNumVal
+      },
+      type: "change",
+      value: rawParsed
+    };
+    onChange(syntheticEvent);
+  }
+}
+function stepUp() {
+  if (!canIncrement())
+    return;
+  const current = getCurrentNumber();
+  const step2 = getStep();
+  const base = current !== void 0 ? current : min !== void 0 ? min : 0;
+  const next = clamp(base + step2);
+  emitValue(next);
+}
+function stepDown() {
+  if (!canDecrement())
+    return;
+  const current = getCurrentNumber();
+  const step2 = getStep();
+  const base = current !== void 0 ? current : min !== void 0 ? min : 0;
+  const next = clamp(base - step2);
+  emitValue(next);
+}
+function handleInput(e) {
+  const input = e.target;
+  const inputValue = input ? input.value : "";
+  const raw = parseToRawNumber(inputValue);
+  if (getThousandSep()) {
+    const cursorPos = input && input.selectionEnd || inputValue.length;
+    let validCharsBeforeCursor = 0;
+    for (let i = 0; i < cursorPos; i++) {
+      const ch = inputValue[i];
+      if (/\d/.test(ch) || ch === "-" || ch === ",") {
+        validCharsBeforeCursor++;
+      }
+    }
+    const formatted = formatValue(raw);
+    innerValue = raw;
+    emitValue(raw);
+    if (input && typeof input.setSelectionRange === "function") {
+      let newCursorPos = 0;
+      let count = 0;
+      for (let i = 0; i < formatted.length; i++) {
+        const ch = formatted[i];
+        if (/\d/.test(ch) || ch === "-" || ch === ",") {
+          count++;
+        }
+        if (count >= validCharsBeforeCursor) {
+          newCursorPos = i + 1;
+          break;
+        }
+      }
+      if (count < validCharsBeforeCursor) {
+        newCursorPos = formatted.length;
+      }
+      input.value = formatted;
+      try {
+        input.setSelectionRange(newCursorPos, newCursorPos);
+      } catch (err) {
+      }
+    }
+  } else {
+    innerValue = raw;
+    emitValue(raw);
+  }
+  if (onInput) {
+    onInput(e);
+  }
+}
+function handleChange(e) {
+  handleInput(e);
+}
+function handleBlur(e) {
+  const current = getCurrentNumber();
+  if (current !== void 0) {
+    const clamped = clamp(current);
+    if (clamped !== current) {
+      emitValue(clamped);
+    }
+  }
+  if (onBlur) {
+    onBlur(e);
+  }
+}
+function handleCopy(e) {
+  const input = e.target;
+  if (!input)
+    return;
+  const start = input.selectionStart;
+  const end = input.selectionEnd;
+  if (start === null || end === null || start === end)
+    return;
+  const selectedText = input.value.substring(start, end);
+  if (!selectedText)
+    return;
+  const cleanText = selectedText.replace(/\./g, "");
+  if (e.clipboardData) {
+    e.clipboardData.setData("text/plain", cleanText);
+    e.preventDefault();
+  }
+  if (onCopy) {
+    onCopy(e);
+  }
+}
+function handleCut(e) {
+  if (disabled || readOnly) {
+    e.preventDefault();
+    return;
+  }
+  const input = e.target;
+  if (!input)
+    return;
+  const start = input.selectionStart;
+  const end = input.selectionEnd;
+  if (start === null || end === null || start === end)
+    return;
+  const selectedText = input.value.substring(start, end);
+  if (!selectedText)
+    return;
+  const cleanText = selectedText.replace(/\./g, "");
+  if (e.clipboardData) {
+    e.clipboardData.setData("text/plain", cleanText);
+    e.preventDefault();
+  }
+  const val = input.value || "";
+  const nextVal = val.slice(0, start) + val.slice(end);
+  const raw = parseToRawNumber(nextVal);
+  innerValue = raw;
+  emitValue(raw);
+  const formatted = formatValue(raw);
+  input.value = formatted;
+  try {
+    input.setSelectionRange(start, start);
+  } catch (err) {
+  }
+  if (onCut) {
+    onCut(e);
+  }
+}
+function handleKeyDown(e) {
+  if (e.key === "Backspace" || e.key === "Delete" || e.key === "Tab" || e.key === "Escape" || e.key === "Enter" || e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown" || e.ctrlKey || e.metaKey || e.altKey || e.key.length > 1) {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+    return;
+  }
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    stepUp();
+    if (onKeyDown)
+      onKeyDown(e);
+    return;
+  }
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    stepDown();
+    if (onKeyDown)
+      onKeyDown(e);
+    return;
+  }
+  if (e.key === "e" || e.key === "E") {
+    if (!allowExponential) {
+      e.preventDefault();
+      return;
+    }
+  }
+  if (e.key === "+") {
+    e.preventDefault();
+    return;
+  }
+  if (e.key === "-") {
+    if (min !== void 0 && min >= 0) {
+      e.preventDefault();
+      return;
+    }
+    const input = e.target;
+    const val = input ? input.value : "";
+    if (val.startsWith("-")) {
+      e.preventDefault();
+      const positiveVal = val.slice(1);
+      const raw = parseToRawNumber(positiveVal);
+      innerValue = raw;
+      emitValue(raw);
+      return;
+    }
+    if (val && input && (input.selectionStart === null || input.selectionStart > 0)) {
+      e.preventDefault();
+      const negativeVal = "-" + val;
+      const raw = parseToRawNumber(negativeVal);
+      innerValue = raw;
+      emitValue(raw);
+      return;
+    }
+    if (onKeyDown)
+      onKeyDown(e);
+    return;
+  }
+  if (e.key === ",") {
+    if (precision === 0) {
+      e.preventDefault();
+      return;
+    }
+    const input = e.target;
+    const val = input ? input.value : "";
+    if (val.includes(",")) {
+      e.preventDefault();
+      return;
+    }
+    if (onKeyDown)
+      onKeyDown(e);
+    return;
+  }
+  if (e.key === ".") {
+    if (onKeyDown)
+      onKeyDown(e);
+    return;
+  }
+  if (!/^[0-9]$/.test(e.key)) {
+    e.preventDefault();
+    return;
+  }
+  if (onKeyDown) {
+    onKeyDown(e);
+  }
+}
+let innerValue = value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : "";
+</script>
+
+<div
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    ...(ui || {}),
+    })}
+  class={`ttdk-form-item ${className || ""}`.trim()}
+  data-disabled={disabled}
+  data-error={Boolean(error || errorMessage)}
+  data-size={size || "md"}
+  data-block={block ? "true" : undefined}
+>
+  {#if label}
+    <label
+      style={stringifyStyles({
+        ...buildUiVars(labelStyle),
+        ...(labelStyle || {}),
+      })}
+      class={`ttdk-form-label ${labelClass || ""}`.trim()}
+      for={id}
+      ><span>{label}</span>
+      {#if required}
+        <span class="ttdk-form-required" aria-hidden="true"> * </span>
+      {/if}
+      {#if optional}
+        <span class="ttdk-form-optional">{optionalText || "(Opsional)"}</span>
+      {/if}</label
+    >
+  {/if}
+  {#if helperText && helperTextPosition === "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+        ...(helperTextStyle || {}),
+      })}
+      class={`ttdk-form-helper-text ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  <div
+    style={stringifyStyles({
+      ...buildUiVars(wrapperStyle),
+      ...(wrapperStyle || {}),
+    })}
+    class={`ttdk-input-wrapper ttdk-input-number-wrapper ${
+      wrapperClass || ""
+    }`.trim()}
+    data-filled={Boolean(String(getRawValue()) !== "")}
+    data-error={Boolean(error || errorMessage)}
+    data-disabled={Boolean(disabled)}
+    data-size={size || "md"}
+    data-rounded={rounded || "md"}
+    data-split={shouldShowControls() && controlsPosition === "split"
+      ? "true"
+      : undefined}
+  >
+    {#if shouldShowControls() && controlsPosition === "split"}
+      <button
+        type="button"
+        aria-label="Kurangi nilai"
+        class="ttdk-input-number-split-btn ttdk-input-number-split-down"
+        tabIndex={-1}
+        disabled={!canDecrement()}
+        data-disabled={!canDecrement() ? "true" : "false"}
+        on:click={(event) => {
+          stepDown();
+        }}
+      />
+    {/if}
+    {#if addonLeft}
+      <div class="ttdk-input-addon ttdk-input-addon-left">{addonLeft}</div>
+    {/if}
+    <div class="ttdk-input-inner">
+      {#if iconLeft}
+        <span class="ttdk-input-icon ttdk-input-icon-left" aria-hidden="true"
+          >{iconLeft}</span
+        >
+      {/if}<input
+        style={stringifyStyles({
+          ...buildUiVars(inputStyle),
+          ...(inputStyle || {}),
+        })}
+        bind:this={inputRef}
+        class={`ttdk-input-control ttdk-input-number-control ${
+          inputClass || ""
+        }`.trim()}
+        type={getInputType()}
+        inputMode={getInputMode()}
+        {name}
+        {id}
+        value={getDisplayValue()}
+        {placeholder}
+        {disabled}
+        {readOnly}
+        {required}
+        autocomplete={autoComplete}
+        {maxLength}
+        {minLength}
+        {min}
+        {max}
+        step={step !== undefined ? step : 1}
+        aria-invalid={Boolean(error || errorMessage)}
+        on:change={(e) => {
+          handleChange(e);
+        }}
+        on:input={(e) => {
+          handleInput(e);
+        }}
+        on:blur={(e) => {
+          handleBlur(e);
+        }}
+        on:focus={(e) => {
+          onFocus && onFocus(e);
+        }}
+        on:copy={(e) => {
+          handleCopy(e);
+        }}
+        on:cut={(e) => {
+          handleCut(e);
+        }}
+        on:keydown={(e) => {
+          handleKeyDown(e);
+        }}
+        on:keyup={(e) => {
+          onKeyUp && onKeyUp(e);
+        }}
+      />
+      {#if loading}
+        <span
+          class="ttdk-input-icon ttdk-input-icon-right ttdk-input-spinner"
+          aria-hidden="true"
+          ><svg viewBox="0 0 24 24"
+            ><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.175"
+              transform="rotate(0 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.25"
+              transform="rotate(30 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.325"
+              transform="rotate(60 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.4"
+              transform="rotate(90 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.475"
+              transform="rotate(120 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.55"
+              transform="rotate(150 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.625"
+              transform="rotate(180 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.7"
+              transform="rotate(210 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.775"
+              transform="rotate(240 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.85"
+              transform="rotate(270 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.925"
+              transform="rotate(300 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="1"
+              transform="rotate(330 12 12)"
+            /></svg
+          ></span
+        >
+      {/if}
+      {#if !loading && iconRight}
+        <span class="ttdk-input-icon ttdk-input-icon-right" aria-hidden="true"
+          >{iconRight}</span
+        >
+      {/if}
+      {#if shouldShowControls() && controlsPosition !== "split"}
+        <div
+          style={stringifyStyles({
+            ...buildUiVars(controlsStyle),
+            ...(controlsStyle || {}),
+          })}
+          class={`ttdk-input-number-stepper ${controlsClass || ""}`.trim()}
+        >
+          <button
+            type="button"
+            aria-label="Tingkatkan nilai"
+            class="ttdk-input-number-btn ttdk-input-number-btn-up"
+            tabIndex={-1}
+            disabled={!canIncrement()}
+            data-disabled={!canIncrement() ? "true" : "false"}
+            on:click={(event) => {
+              stepUp();
+            }}
+          /><button
+            type="button"
+            aria-label="Kurangi nilai"
+            class="ttdk-input-number-btn ttdk-input-number-btn-down"
+            tabIndex={-1}
+            disabled={!canDecrement()}
+            data-disabled={!canDecrement() ? "true" : "false"}
+            on:click={(event) => {
+              stepDown();
+            }}
+          />
+        </div>
+      {/if}
+    </div>
+    {#if addonRight}
+      <div class="ttdk-input-addon ttdk-input-addon-right">{addonRight}</div>
+    {/if}
+    {#if shouldShowControls() && controlsPosition === "split"}
+      <button
+        type="button"
+        aria-label="Tingkatkan nilai"
+        class="ttdk-input-number-split-btn ttdk-input-number-split-up"
+        tabIndex={-1}
+        disabled={!canIncrement()}
+        data-disabled={!canIncrement() ? "true" : "false"}
+        on:click={(event) => {
+          stepUp();
+        }}
+      />
+    {/if}
+  </div>
+  {#if helperText && helperTextPosition !== "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+        ...(helperTextStyle || {}),
+      })}
+      class={`ttdk-form-helper-text ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  {#if errorMessage && (error || errorMessage)}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(errorMessageStyle),
+        ...(errorMessageStyle || {}),
+      })}
+      role="alert"
+      class={`ttdk-form-error-msg ${errorMessageClass || ""}`.trim()}
+    >
+      <span>{errorMessage}</span>
+    </div>
+  {/if}
+</div>