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

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

@@ -0,0 +1,352 @@
+import { SvelteComponent } from "svelte";
+export type InputNumberUiProps = UiProps;
+export interface InputNumberProps {
+    /**
+     * Teks label judul field yang ditampilkan di atas input (14px Semibold, #141313).
+     */
+    label?: string;
+    /**
+     * Style kustom untuk elemen label judul field (UiProps).
+     */
+    labelStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen label judul field.
+     */
+    labelClass?: string;
+    /**
+     * Style kustom untuk elemen kontainer input wrapper (UiProps).
+     */
+    wrapperStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen kontainer input wrapper.
+     */
+    wrapperClass?: string;
+    /**
+     * Style kustom untuk elemen input control HTML (UiProps).
+     */
+    inputStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen input control HTML.
+     */
+    inputClass?: string;
+    /**
+     * Style kustom untuk elemen stepper kontrol tombol (UiProps).
+     */
+    controlsStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen stepper kontrol tombol.
+     */
+    controlsClass?: string;
+    /**
+     * Style kustom untuk elemen pesan error validasi (UiProps).
+     */
+    errorMessageStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen pesan error validasi.
+     */
+    errorMessageClass?: string;
+    /**
+     * Style kustom untuk elemen helper text (UiProps).
+     */
+    helperTextStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen helper text.
+     */
+    helperTextClass?: string;
+    /**
+     * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+     */
+    optional?: boolean;
+    /**
+     * Kustomisasi teks keterangan opsional.
+     * @default '(Opsional)'
+     */
+    optionalText?: string;
+    /**
+     * Nilai teks placeholder saat input kosong (#9698A2).
+     */
+    placeholder?: string;
+    /**
+     * Nilai terkontrol (controlled value) pada input number.
+     */
+    value?: number | string;
+    /**
+     * Nilai awal tidak terkontrol (uncontrolled initial value).
+     */
+    defaultValue?: number | string;
+    /**
+     * Nama form field HTML untuk integrasi formulir.
+     */
+    name?: string;
+    /**
+     * Identifier unik elemen input.
+     */
+    id?: string;
+    /**
+     * Status apakah input sedang dalam kondisi error / tidak valid.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Pesan teks penjelasan kesalahan validasi di bawah field.
+     */
+    errorMessage?: string;
+    /**
+     * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+     */
+    helperText?: string;
+    /**
+     * Posisi teks helper
+     */
+    helperTextPosition?: "top" | "bottom";
+    /**
+     * Skala ukuran input field.
+     * - `'sm'`: 38px
+     * - `'md'`: 48px (standar)
+     * - `'lg'`: 56px
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Bentuk sudut kelengkungan input.
+     * - `'none'`: 0px
+     * - `'sm'`: 4px
+     * - `'md'`: 8px (standar desain)
+     * - `'lg'`: 12px
+     * - `'full'`: 9999px (kapsul)
+     * @default 'md'
+     */
+    rounded?: "none" | "sm" | "md" | "lg" | "full";
+    /**
+     * Menjadikan lebar field input memenuhi kontainer penuh (full-width 100%).
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Status apakah field dinonaktifkan (disabled).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Status apakah field bersifat hanya-baca (readonly).
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Ikon di sebelah kiri dalam input (ukuran 20-24px, misal: Hash, Calculator, Currency).
+     */
+    iconLeft?: any;
+    /**
+     * Ikon di sebelah kanan dalam input (ukuran 20-24px).
+     */
+    iconRight?: any;
+    /**
+     * Addon / teks prefix di sebelah kiri luar input (misal: 'Rp', '+62').
+     */
+    addonLeft?: string | any;
+    /**
+     * Addon / teks suffix di sebelah kanan luar input (misal: 'kg', 'pcs', '%').
+     */
+    addonRight?: string | any;
+    /**
+     * Konfigurasi atribut autocomplete HTML.
+     */
+    autoComplete?: string;
+    /**
+     * Nilai minimum yang diizinkan untuk input number.
+     */
+    min?: number;
+    /**
+     * Nilai maksimum yang diizinkan untuk input number.
+     */
+    max?: number;
+    /**
+     * Nilai selisih kenaikan atau penurunan setiap kali stepper ditekan.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Jumlah angka di belakang koma (presisi desimal).
+     */
+    precision?: number;
+    /**
+     * Mengaktifkan format pemisah ribuan otomatis dengan titik '.' (contoh: 1.000 atau 10.000).
+     * Nilai yang diteruskan ke callback form (onChange / onValueChange) tetap berupa number murni standar (contoh: 1000).
+     * @default false
+     */
+    thousandSeparator?: boolean;
+    /**
+     * Mengizinkan tanda eksponensial ilmiah 'e' / 'E'.
+     * @default false
+     */
+    allowExponential?: boolean;
+    /**
+     * Tipe input HTML. Secara default 'text' dengan inputMode 'numeric'/'decimal' agar mendukung formatting dan pembatasan karakter tanpa bug bawaan browser.
+     * @default 'text'
+     */
+    type?: string;
+    /**
+     * Menampilkan tombol stepper panah kontrol atas/bawah.
+     * @default true
+     */
+    controls?: boolean;
+    /**
+     * Menghilangkan tombol kontrol increment dan decrement sehingga tampil seperti input teks biasa.
+     * @default false
+     */
+    withoutButton?: boolean;
+    /**
+     * Posisi letak tombol kontrol stepper:
+     * - `'right'`: tombol stepper ditumpuk di sisi kanan (standar)
+     * - `'split'`: tombol minus di sisi kiri dan tombol plus di sisi kanan (mode counter)
+     * @default 'right'
+     */
+    controlsPosition?: "right" | "split";
+    /**
+     * Batas maksimum panjang karakter.
+     */
+    maxLength?: number;
+    /**
+     * Batas minimum panjang karakter.
+     */
+    minLength?: number;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Kustomisasi visual granular root / form-item (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Callback event saat nilai input berubah (SyntheticEvent standar HTML).
+     */
+    onChange?: (event: any) => void;
+    /**
+     * Callback event saat nilai numerik angka berubah.
+     */
+    onValueChange?: (value: number | undefined) => void;
+    /**
+     * Callback event saat pengguna mengetik (input event).
+     */
+    onInput?: (event: any) => void;
+    /**
+     * Callback event saat field input kehilangan fokus.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Callback event saat field input mendapatkan fokus.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Ref instance elemen input HTML untuk akses kontrol DOM langsung (focus, blur, select).
+     */
+    inputRef?: any;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Callback event tombol keyboard ditekan.
+     */
+    onKeyDown?: (event: any) => void;
+    /**
+     * Callback event tombol keyboard dilepaskan.
+     */
+    onKeyUp?: (event: any) => void;
+    /**
+     * Callback event saat teks di-copy.
+     */
+    onCopy?: (event: any) => void;
+    /**
+     * Callback event saat teks di-cut.
+     */
+    onCut?: (event: any) => void;
+    /**
+     * Menampilkan spinner dan menonaktifkan interaksi field sementara menunggu proses async.
+     * @default false
+     */
+    loading?: boolean;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        value?: InputNumberProps["value"];
+        defaultValue?: InputNumberProps["defaultValue"];
+        withoutButton?: InputNumberProps["withoutButton"];
+        controls?: InputNumberProps["controls"];
+        step?: InputNumberProps["step"];
+        precision?: InputNumberProps["precision"];
+        thousandSeparator?: InputNumberProps["thousandSeparator"];
+        type?: InputNumberProps["type"];
+        disabled?: InputNumberProps["disabled"];
+        readOnly?: InputNumberProps["readOnly"];
+        loading?: InputNumberProps["loading"];
+        max?: InputNumberProps["max"];
+        min?: InputNumberProps["min"];
+        onValueChange?: InputNumberProps["onValueChange"];
+        onChange?: InputNumberProps["onChange"];
+        name?: InputNumberProps["name"];
+        id?: InputNumberProps["id"];
+        onInput?: InputNumberProps["onInput"];
+        onBlur?: InputNumberProps["onBlur"];
+        onCopy?: InputNumberProps["onCopy"];
+        onCut?: InputNumberProps["onCut"];
+        onKeyDown?: InputNumberProps["onKeyDown"];
+        allowExponential?: InputNumberProps["allowExponential"];
+        className?: InputNumberProps["className"];
+        error?: InputNumberProps["error"];
+        errorMessage?: InputNumberProps["errorMessage"];
+        size?: InputNumberProps["size"];
+        block?: InputNumberProps["block"];
+        ui?: InputNumberProps["ui"];
+        label?: InputNumberProps["label"];
+        labelClass?: InputNumberProps["labelClass"];
+        labelStyle?: InputNumberProps["labelStyle"];
+        required?: InputNumberProps["required"];
+        optional?: InputNumberProps["optional"];
+        optionalText?: InputNumberProps["optionalText"];
+        helperText?: InputNumberProps["helperText"];
+        helperTextPosition?: InputNumberProps["helperTextPosition"];
+        helperTextClass?: InputNumberProps["helperTextClass"];
+        helperTextStyle?: InputNumberProps["helperTextStyle"];
+        wrapperClass?: InputNumberProps["wrapperClass"];
+        rounded?: InputNumberProps["rounded"];
+        controlsPosition?: InputNumberProps["controlsPosition"];
+        wrapperStyle?: InputNumberProps["wrapperStyle"];
+        addonLeft?: InputNumberProps["addonLeft"];
+        iconLeft?: InputNumberProps["iconLeft"];
+        inputRef?: InputNumberProps["inputRef"];
+        inputClass?: InputNumberProps["inputClass"];
+        placeholder?: InputNumberProps["placeholder"];
+        autoComplete?: InputNumberProps["autoComplete"];
+        maxLength?: InputNumberProps["maxLength"];
+        minLength?: InputNumberProps["minLength"];
+        inputStyle?: InputNumberProps["inputStyle"];
+        onFocus?: InputNumberProps["onFocus"];
+        onKeyUp?: InputNumberProps["onKeyUp"];
+        iconRight?: InputNumberProps["iconRight"];
+        controlsClass?: InputNumberProps["controlsClass"];
+        controlsStyle?: InputNumberProps["controlsStyle"];
+        addonRight?: InputNumberProps["addonRight"];
+        errorMessageClass?: InputNumberProps["errorMessageClass"];
+        errorMessageStyle?: InputNumberProps["errorMessageStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type InputNumberProps_ = typeof __propDef.props;
+export type InputNumberEvents = typeof __propDef.events;
+export type InputNumberSlots = typeof __propDef.slots;
+export default class InputNumber extends SvelteComponent<InputNumberProps_, InputNumberEvents, InputNumberSlots> {
+}
+export {};