rd-outer-component 0.0.1

package/lib/modules/custom-input-amount/custom-input-amount.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./custom-input-amount.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "ng-zorro-antd/input";
+import * as i5 from "ngx-mask";
+export declare class RdInputAmountModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdInputAmountModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdInputAmountModule, [typeof i1.CustomInputAmountComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i3.FormsModule, typeof i4.NzInputModule, typeof i5.NgxMaskModule], [typeof i1.CustomInputAmountComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RdInputAmountModule>;
+}

package/lib/modules/custom-input-amount/index.d.ts

@@ -0,0 +1,2 @@
+export * from './custom-input-amount.component';
+export * from './custom-input-amount.module';

package/lib/modules/custom-radio/custom-radio.component.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ISelectOption } from '../../types/common.type';
+import * as i0 from "@angular/core";
+export declare class CustomRadioComponent implements ControlValueAccessor {
+    private cdr;
+    label: string;
+    name: string;
+    disabled: boolean;
+    set options(val: ISelectOption[]);
+    get options(): ISelectOption[];
+    valueChange: EventEmitter<ISelectOption | undefined>;
+    private _rawOptions;
+    value: ISelectOption | undefined;
+    nativeValue: ISelectOption['value'] | undefined;
+    onChange: (value: ISelectOption | undefined) => void;
+    onTouched: () => void;
+    constructor(cdr: ChangeDetectorRef);
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: ISelectOption): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    handleValueChange(value: ISelectOption['value']): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomRadioComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomRadioComponent, "app-rd-radio", never, { "label": "label"; "name": "name"; "disabled": "disabled"; "options": "options"; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+}

package/lib/modules/custom-radio/custom-radio.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./custom-radio.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "ng-zorro-antd/spin";
+import * as i5 from "ng-zorro-antd/radio";
+export declare class RdRadioModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdRadioModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdRadioModule, [typeof i1.CustomRadioComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i3.ReactiveFormsModule, typeof i4.NzSpinModule, typeof i5.NzRadioModule], [typeof i1.CustomRadioComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RdRadioModule>;
+}

package/lib/modules/custom-radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './custom-radio.module';
+export * from './custom-radio.component';

package/lib/modules/custom-select/custom-select.component.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ISelectOption } from '../../types/common.type';
+import * as i0 from "@angular/core";
+export declare class CustomSelectComponent implements ControlValueAccessor {
+    private cdr;
+    label: string;
+    customTpl: any;
+    optionTpl: any;
+    name: string;
+    disabled: boolean;
+    nzMode: 'multiple' | 'default';
+    isCurrency?: boolean;
+    currencyUrlMap?: Record<string, string>;
+    isLoading: boolean;
+    isShowSearch: boolean;
+    isRemoteSearch: boolean;
+    set options(val: ISelectOption[]);
+    get options(): ISelectOption[];
+    searchChange: EventEmitter<string>;
+    valueChange: EventEmitter<ISelectOption | ISelectOption[]>;
+    scrollToBottomEmit: EventEmitter<void>;
+    private _rawOptions;
+    filteredOptions: ISelectOption[];
+    value: ISelectOption | ISelectOption[] | undefined;
+    nativeValue: ISelectOption['value'] | ISelectOption['value'][] | undefined;
+    searchInput: string;
+    onChange: (value: ISelectOption | ISelectOption[] | undefined) => void;
+    onTouched: () => void;
+    isFocus: boolean;
+    constructor(cdr: ChangeDetectorRef);
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: ISelectOption | ISelectOption[]): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    handleValueChange(value: ISelectOption['value'] | ISelectOption['value'][]): void;
+    onScrollToBottom(): void;
+    onSearch(searchValue: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomSelectComponent, "app-rd-select", never, { "label": "label"; "customTpl": "customTpl"; "optionTpl": "optionTpl"; "name": "name"; "disabled": "disabled"; "nzMode": "nzMode"; "isCurrency": "isCurrency"; "currencyUrlMap": "currencyUrlMap"; "isLoading": "isLoading"; "isShowSearch": "isShowSearch"; "isRemoteSearch": "isRemoteSearch"; "options": "options"; }, { "searchChange": "searchChange"; "valueChange": "valueChange"; "scrollToBottomEmit": "scrollToBottomEmit"; }, never, never, false, never>;
+}

package/lib/modules/custom-select/custom-select.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./custom-select.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "ng-zorro-antd/spin";
+import * as i5 from "ng-zorro-antd/select";
+export declare class RdSelectModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdSelectModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdSelectModule, [typeof i1.CustomSelectComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i3.ReactiveFormsModule, typeof i4.NzSpinModule, typeof i5.NzSelectModule], [typeof i1.CustomSelectComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RdSelectModule>;
+}

package/lib/modules/custom-select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './custom-select.component';
+export * from './custom-select.module';

package/lib/modules/status-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from './status-field.component';
+export * from './status-field.module';

package/lib/modules/status-field/status-field.component.d.ts

@@ -0,0 +1,30 @@
+import { ONOFFStatusEnum } from '../../types/common.enum';
+import * as i0 from "@angular/core";
+export declare class StatusFieldComponent {
+    status: ONOFFStatusEnum | string | any;
+    text?: string;
+    size: 'default' | 'large';
+    statusEnum: typeof ONOFFStatusEnum;
+    textEnum: {
+        PENDING: string;
+        SUCCESSFUL: string;
+        SUBMITTED: string;
+        FAILED: string;
+        RETURNING: string;
+        RETURNED: string;
+        CONVERTING: string;
+        SETTLING: string;
+        WAITING: string;
+        PENDING_DEPOSIT: string;
+        SUCCESS: string;
+        VERIFYING: string;
+        AWAIT_FOR_RECEIVE: string;
+        PAYMENT_VERIFYING: string;
+        AWAIT_FOR_DECLARATION: string;
+        DECLARATION_REVIEW: string;
+        CLOSED: string;
+    };
+    get defaultText(): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatusFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatusFieldComponent, "app-rd-status-field", never, { "status": "status"; "text": "text"; "size": "size"; }, {}, never, never, false, never>;
+}

package/lib/modules/status-field/status-field.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./status-field.component";
+import * as i2 from "@angular/common";
+export declare class RdStatusFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdStatusFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdStatusFieldModule, [typeof i1.StatusFieldComponent], [typeof i2.CommonModule], [typeof i1.StatusFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RdStatusFieldModule>;
+}

package/lib/pipes/big-number.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class BigNumberPipe implements PipeTransform {
+    transform(value: string | number, precision?: number | null, mode?: 'cut' | 'toFixed' | 'keepAll'): string | number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BigNumberPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<BigNumberPipe, "bigNumber", false>;
+}

package/lib/pipes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './big-number.pipe';
+export * from './pipes.module';

package/lib/pipes/pipes.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./big-number.pipe";
+export declare class PipesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PipesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PipesModule, [typeof i1.BigNumberPipe], never, [typeof i1.BigNumberPipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PipesModule>;
+}

package/lib/types/common.enum.d.ts

@@ -0,0 +1,19 @@
+export declare enum ONOFFStatusEnum {
+    PENDING = "PENDING",
+    SUCCESSFUL = "SUCCESSFUL",
+    SUBMITTED = "SUBMITTED",
+    FAILED = "FAILED",
+    RETURNING = "RETURNING",
+    RETURNED = "RETURNED",
+    VERIFYING = "VERIFYING",
+    AWAIT_FOR_RECEIVE = "AWAIT_FOR_RECEIVE",
+    PAYMENT_VERIFYING = "PAYMENT_VERIFYING",
+    AWAIT_FOR_DECLARATION = "AWAIT_FOR_DECLARATION",
+    DECLARATION_REVIEW = "DECLARATION_REVIEW",
+    CLOSED = "CLOSED",
+    CONVERTING = "CONVERTING",
+    SETTLING = "SETTLING",
+    WAITING = "WAITING",
+    PENDING_DEPOSIT = "PENDING_DEPOSIT",
+    SUCCESS = "SUCCESS"
+}

package/lib/types/common.type.d.ts

@@ -0,0 +1,6 @@
+export interface ISelectOption {
+    value: string | number;
+    name?: string;
+    label?: string;
+    [key: string]: any;
+}

package/lib/utils/big-number.d.ts

@@ -0,0 +1,2 @@
+export declare function formatBigNumber(value: string | number | undefined, precision?: number | null, mode?: 'cut' | 'toFixed' | 'keepAll'): string;
+export declare function numberToBig(value: string, precision?: number, mode?: 'cut' | 'toFixed'): string;

package/lib/utils/debounce.d.ts

@@ -0,0 +1 @@
+export default function debounce(delay?: number): MethodDecorator;

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "rd-outer-component",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0",
+    "ng-zorro-antd": "^15.1.0",
+    "ngx-mask": "^13.0.0",
+    "big.js": "^6.2.2"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2015/rd-outer-component.mjs",
+  "es2020": "fesm2020/rd-outer-component.mjs",
+  "esm2020": "esm2020/rd-outer-component.mjs",
+  "fesm2020": "fesm2020/rd-outer-component.mjs",
+  "fesm2015": "fesm2015/rd-outer-component.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/rd-outer-component.mjs",
+      "es2020": "./fesm2020/rd-outer-component.mjs",
+      "es2015": "./fesm2015/rd-outer-component.mjs",
+      "node": "./fesm2015/rd-outer-component.mjs",
+      "default": "./fesm2020/rd-outer-component.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,10 @@
+export * from './lib/modules/custom-checkbox';
+export * from './lib/modules/custom-date';
+export * from './lib/modules/custom-input';
+export * from './lib/modules/custom-input-amount';
+export * from './lib/modules/custom-radio';
+export * from './lib/modules/custom-select';
+export * from './lib/modules/custom-filter';
+export * from './lib/modules/status-field';
+export * from './lib/pipes';
+export * from './lib/utils/debounce';

package/src/lib/assets/img/icon/checkbox.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Check box">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z" fill="#367AF6"/>
+<path id="Vector 852" d="M4.3999 8.80005L7.1999 12L11.5999 4.80005" stroke="#F8F9FA" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/lib/assets/img/icon/icon-error.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M7.99967 14.6666C11.6816 14.6666 14.6663 11.6818 14.6663 7.99992C14.6663 4.31802 11.6816 1.33325 7.99967 1.33325C4.31778 1.33325 1.33301 4.31802 1.33301 7.99992C1.33301 11.6818 4.31778 14.6666 7.99967 14.6666ZM7.98674 3.91667C8.40095 3.91667 8.73674 4.25245 8.73674 4.66667V8C8.73674 8.41421 8.40095 8.75 7.98674 8.75C7.57252 8.75 7.23674 8.41421 7.23674 8V4.66667C7.23674 4.25245 7.57252 3.91667 7.98674 3.91667ZM7.23674 11.3333C7.23674 10.9191 7.57252 10.5833 7.98674 10.5833H7.9868C8.40102 10.5833 8.7368 10.9191 8.7368 11.3333C8.7368 11.7475 8.40102 12.0833 7.9868 12.0833H7.98674C7.57252 12.0833 7.23674 11.7475 7.23674 11.3333Z"
+        fill="#D2152E" />
+</svg>

package/src/lib/assets/img/status/cancel.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99935 13.3332C10.9449 13.3332 13.3327 10.9454 13.3327 7.99984C13.3327 5.05432 10.9449 2.6665 7.99935 2.6665C5.05383 2.6665 2.66602 5.05432 2.66602 7.99984C2.66602 10.9454 5.05383 13.3332 7.99935 13.3332Z" fill="#9CA3AF" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8H11" stroke="#F8F9FA" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/assets/img/status/failed.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00033 13.3332C10.9458 13.3332 13.3337 10.9454 13.3337 7.99984C13.3337 5.05432 10.9458 2.6665 8.00033 2.6665C5.05481 2.6665 2.66699 5.05432 2.66699 7.99984C2.66699 10.9454 5.05481 13.3332 8.00033 13.3332Z" fill="#D2152E" stroke="#D2152E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.66699 5.6665L8.00033 7.99984M8.00033 7.99984L10.3337 10.3332M8.00033 7.99984L10.3337 5.6665M8.00033 7.99984L5.66699 10.3332" stroke="#F8F9FA" stroke-width="1.66667" stroke-linecap="round"/>
+</svg>

package/src/lib/assets/img/status/pending.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.00008" cy="8.00008" r="5.33333" stroke="#367AF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.33325 5.33325V8.66659H9.99992" stroke="#367AF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/assets/img/status/returned.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00033 13.3332C10.9458 13.3332 13.3337 10.9454 13.3337 7.99984C13.3337 5.05432 10.9458 2.6665 8.00033 2.6665C5.05481 2.6665 2.66699 5.05432 2.66699 7.99984C2.66699 10.9454 5.05481 13.3332 8.00033 13.3332Z" fill="#EA580C" stroke="#EA580C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8H11M5 8L7 6M5 8L7 10" stroke="#F8F9FA" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/assets/img/status/returning.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00008 13.3334C10.9456 13.3334 13.3334 10.9456 13.3334 8.00008C13.3334 5.05456 10.9456 2.66675 8.00008 2.66675C5.05456 2.66675 2.66675 5.05456 2.66675 8.00008C2.66675 10.9456 5.05456 13.3334 8.00008 13.3334Z" fill="#925CF6" stroke="#925CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8H11M5 8L7 6M5 8L7 10" stroke="#F8F9FA" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/assets/img/status/settling.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3337 7.99984C13.3337 5.28009 11.2979 3.03583 8.66699 2.70777V8.6665V13.2919C11.2979 12.9638 13.3337 10.7196 13.3337 7.99984Z" fill="#925CF6"/>
+<path d="M8.00033 13.3332C8.2261 13.3332 8.4486 13.3191 8.66699 13.2919V8.6665H2.70825C3.03632 11.2974 5.28058 13.3332 8.00033 13.3332Z" fill="#925CF6"/>
+<path d="M8.66699 2.70777C8.4486 2.68053 8.2261 2.6665 8.00033 2.6665C5.05481 2.6665 2.66699 5.05432 2.66699 7.99984C2.66699 8.22561 2.68102 8.44811 2.70825 8.6665M8.66699 2.70777C11.2979 3.03583 13.3337 5.28009 13.3337 7.99984C13.3337 10.7196 11.2979 12.9638 8.66699 13.2919M8.66699 2.70777V8.6665M8.66699 13.2919C8.4486 13.3191 8.2261 13.3332 8.00033 13.3332C5.28058 13.3332 3.03632 11.2974 2.70825 8.6665M8.66699 13.2919V8.6665M2.70825 8.6665H8.66699" stroke="#925CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/assets/img/status/submitted.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.00008" cy="8.00008" r="5.33333" stroke="#367AF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/assets/img/status/success.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00033 13.3332C10.9458 13.3332 13.3337 10.9454 13.3337 7.99984C13.3337 5.05432 10.9458 2.6665 8.00033 2.6665C5.05481 2.6665 2.66699 5.05432 2.66699 7.99984C2.66699 10.9454 5.05481 13.3332 8.00033 13.3332Z" fill="#23CC8B" stroke="#23CC8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.33301 8.33317L7.33301 10.3332L10.6663 5.6665" stroke="#F8F9FA" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/assets/img/status/warning.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.25149 2.96736C7.02868 1.62123 8.97165 1.62123 9.74883 2.96736L14.3933 11.0118C15.1705 12.3579 14.199 14.0406 12.6446 14.0406H3.3557C1.80132 14.0406 0.829842 12.3579 1.60703 11.0118L6.25149 2.96736Z" fill="#EA580C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 4.16675C8.46032 4.16675 8.83341 4.53984 8.83341 5.00008V8.33341C8.83341 8.79365 8.46032 9.16675 8.00008 9.16675C7.53984 9.16675 7.16675 8.79365 7.16675 8.33341V5.00008C7.16675 4.53984 7.53984 4.16675 8.00008 4.16675ZM8.00008 10.5001C8.46032 10.5001 8.83341 10.8732 8.83341 11.3334V11.6667C8.83341 12.127 8.46032 12.5001 8.00008 12.5001C7.53984 12.5001 7.16675 12.127 7.16675 11.6667V11.3334C7.16675 10.8732 7.53984 10.5001 8.00008 10.5001Z" fill="#F8F9FA"/>
+</svg>

package/src/lib/assets/scss/form-item.scss

@@ -0,0 +1,200 @@
+.form-item {
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;
+  background-color: #fff;
+  width: 100%;
+  margin-top: 16px;
+  min-height: 64px;
+
+  .form-item-select-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+
+  &-label {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #6b7280;
+    transition: all 0.3s ease;
+    pointer-events: none;
+    z-index: 1;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &-input {
+    color: #030712;
+    font-size: 14px;
+    width: 100%;
+    font-weight: 500;
+    padding: 18px 16px;
+
+    &:focus,
+    &:not(:placeholder-shown) {
+      top: 10px;
+    }
+  }
+
+  .form-item-input:focus ~ .form-item-label,
+  .form-item-input:not(:placeholder-shown) ~ .form-item-label {
+    top: 16px;
+    font-size: 12px;
+  }
+
+  &-select {
+    width: 100%;
+
+    ::ng-deep {
+      .ant-select-selection-item {
+        color: #030712;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  &.selected {
+    .form-item-label {
+      top: 16px;
+      font-size: 12px;
+    }
+    .form-item-select {
+      top: 10px;
+    }
+  }
+
+  &.disabled {
+    background-color: #f3f4f6;
+    border-color: #d1d5db;
+
+    .form-item-label,
+    .form-item-input {
+      color: #9ca3af;
+    }
+
+    ::ng-deep {
+      .ant-select-selection-item {
+        color: #9ca3af;
+      }
+    }
+  }
+
+  &.error {
+    border-color: #e51c36;
+  }
+}
+
+.form-item-check {
+  position: relative;
+  background-color: #fff;
+  width: 100%;
+  margin-top: 16px;
+}
+
+.form-item-error {
+  color: #d2152e;
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+
+  img {
+    width: 16px;
+  }
+}
+
+.form-number-item {
+  position: relative;
+  border-radius: 12px;
+  padding: 12px 6px;
+  background-color: #fff;
+  border: 1px solid #e5e7eb;
+  width: 100%;
+  margin-top: 16px;
+
+  .item-label {
+    color: #6b7280;
+    font-size: 12px;
+    padding: 0 12px;
+    font-weight: 500;
+  }
+
+  .item-content {
+    display: flex;
+    align-items: center;
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 48px;
+    color: #9ca3af;
+
+    &-value {
+      flex: 1;
+      font-size: 32px;
+      font-weight: 600;
+      line-height: 48px;
+      color: #030712;
+      border: none;
+
+      &:focus,
+      &:active,
+      &:hover {
+        outline: none;
+        box-shadow: none;
+      }
+
+      ::ng-deep {
+        .ant-input-number-handler-wrap {
+          display: none;
+        }
+
+        .ant-input-number-input {
+          font-size: 32px;
+          font-weight: 600;
+          line-height: 48px;
+
+          &::placeholder {
+            color: #9ca3af;
+          }
+        }
+      }
+    }
+
+    &-symbol {
+      flex-shrink: 0;
+    }
+  }
+
+  ::ng-deep {
+    .item-warning {
+      font-weight: 500;
+      font-size: 12px;
+      color: #6b7280;
+      margin-top: 4px;
+      padding: 0 12px;
+    }
+  }
+
+  &.disabled {
+    background-color: #f3f4f6;
+    border-color: #d1d5db;
+
+    .item-label,
+    .item-content-value {
+      color: #9ca3af;
+    }
+  }
+
+  &.error {
+    border-color: #e51c36;
+  }
+}