import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLIconNames, CLOrientation, CLPlacement, CLSizes } from '../../../index.ts'; export interface CLInputDatePickerProps { /** Sets the aria-label on the trigger button. It should be used when there is no label present. */ ariaLabel?: string; /** The border radius size. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */ borderRadius?: CLBorderRadius; /** Sets the color of the trigger button, selected dates, and apply button. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */ color?: CLColors; /** Sets the date picker size. The property can be one of `CLSizes`, e.g. `CLSizes.Medium`. */ size?: CLSizes; /** Sets the color variant. The property can be one of `CLColorVariants.Outline | CLColorVariants.Ghost`, e.g `CLColorVariants.Outline`. */ variant?: CLColorVariants.Outline | CLColorVariants.Ghost; /** A `boolean` value which dictates the busy state of the date picker. */ busy?: boolean; /** Set the disabled state. */ disabled?: boolean; /** When set to true, sets the width of the date picker to 100% of it's parent. */ fluid?: boolean; /** The form whom the date picker belongs to. Useful for when a date picker is not within a `form` element. */ form?: string; /** A unique identifier, this is required. */ id: string; /** Whether to allow range selection or single date selection. */ isRange?: boolean; /** The label text to be displayed which is associated to the date picker. */ label?: string; /** An array of messages to be displayed. */ messages?: string[]; /** The message type. The property can be one of `CLColors`, e.g. `CLColors.Danger`. */ messageType?: CLColors; /** A string representing name of the date picker. The name is submitted along with the date picker value when the form it belongs to is submitted. */ name: string; /** A callback function which handles when the date picker loses focus. */ onBlur?: CLGenericFocusFunction; /** A callback function which handles when the date picker value changes. */ onChange?: CLGenericFunction; /** A callback function which handles when the date picker gains focus. */ onFocus?: CLGenericFocusFunction; /** Sets the label position to be above or to the left of the form element. The property can be one of `CLOrientation` */ orientation?: CLOrientation; /** Sets the placement of the dropdown content. The property can be one of `CLPlacement`, e.g. `CLPlacement.BottomStart`. */ placement?: CLPlacement; /** The default text shown when there is no value. Useful for providing a hint of what is expected. */ placeholder?: string; /** Set the required state. */ required?: boolean; /** When set to `false` it will not render with rounded corners. */ rounded?: boolean; /** Sets a custom ID used for unit tests. */ testId?: string; } declare const _default: import('vue').DefineComponent<{ modelValue?: { end: string | null; start: string | null; } | null; } & CLInputDatePickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { "update:modelValue": (value: { end: string | null; start: string | null; } | null) => any; }, string, import('vue').PublicProps, Readonly<{ modelValue?: { end: string | null; start: string | null; } | null; } & CLInputDatePickerProps> & Readonly<{ "onUpdate:modelValue"?: ((value: { end: string | null; start: string | null; } | null) => any) | undefined; }>, { size: CLSizes; color: CLColors; variant: CLColorVariants.Outline | CLColorVariants.Ghost; fluid: boolean; rounded: boolean; testId: string; form: string; label: string; onFocus: CLGenericFocusFunction; onBlur: CLGenericFocusFunction; onChange: CLGenericFunction; borderRadius: CLBorderRadius; required: boolean; ariaLabel: string; busy: boolean; disabled: boolean; placeholder: string; isRange: boolean; orientation: CLOrientation; messages: string[]; messageType: CLColors; placement: CLPlacement; }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, { inputRef: import('vue').CreateComponentPublicInstanceWithMixins & Readonly<{ onReset?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((value: string | number) => any) | undefined; }>, { inputRef: Readonly>; }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { reset: (...args: any[]) => void; "update:modelValue": (value: string | number) => void; }, import('vue').PublicProps, { size: CLSizes; color: CLColors; variant: CLColorVariants.Outline | CLColorVariants.Ghost; fluid: boolean; rounded: boolean; testId: string; type: import('@codeandfunction/callaloo-types').CLInputTypes; form: string; label: string; pattern: string; onFocus: CLGenericFocusFunction; onBlur: CLGenericFocusFunction; onChange: CLGenericFunction; onInput: import('../../../index.ts').CLGenericInputFunction; borderRadius: CLBorderRadius; required: boolean; prefix: string | CLIconNames; ariaLabel: string; busy: boolean; disabled: boolean; pill: string; placeholder: string; orientation: CLOrientation; messages: string[]; messageType: CLColors; maxLength: number; grouped: boolean; suffix: string | CLIconNames; autoComplete: boolean; charCounter: boolean; minLength: number; onPrefixClick: (event?: MouseEvent) => void; onSuffixClick: (event?: MouseEvent) => void; prefixAriaLabel: string; readonly: boolean; spellCheck: boolean; suffixAriaLabel: string; }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, { 'input-elem': HTMLInputElement; }, HTMLDivElement, import('vue').ComponentProvideOptions, { P: {}; B: {}; D: {}; C: {}; M: {}; Defaults: {}; }, Readonly<{ modelValue?: string | number; } & import('../CLInput').CLInputProps> & Readonly<{ onReset?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((value: string | number) => any) | undefined; }>, { inputRef: Readonly>; }, {}, {}, {}, { size: CLSizes; color: CLColors; variant: CLColorVariants.Outline | CLColorVariants.Ghost; fluid: boolean; rounded: boolean; testId: string; type: import('@codeandfunction/callaloo-types').CLInputTypes; form: string; label: string; pattern: string; onFocus: CLGenericFocusFunction; onBlur: CLGenericFocusFunction; onChange: CLGenericFunction; onInput: import('../../../index.ts').CLGenericInputFunction; borderRadius: CLBorderRadius; required: boolean; prefix: string | CLIconNames; ariaLabel: string; busy: boolean; disabled: boolean; pill: string; placeholder: string; orientation: CLOrientation; messages: string[]; messageType: CLColors; maxLength: number; grouped: boolean; suffix: string | CLIconNames; autoComplete: boolean; charCounter: boolean; minLength: number; onPrefixClick: (event?: MouseEvent) => void; onSuffixClick: (event?: MouseEvent) => void; prefixAriaLabel: string; readonly: boolean; spellCheck: boolean; suffixAriaLabel: string; }> | null; popoverRef: HTMLDivElement; calendarRef: import('vue').CreateComponentPublicInstanceWithMixins & Readonly<{ "onUpdate:modelValue"?: ((value: { end: import('../../../composables/useDatePicker').ISODate | null; start: import('../../../composables/useDatePicker').ISODate | null; } | null) => any) | undefined; "onDate-select"?: ((date: string) => any) | undefined; }>, { apply: () => void; cancel: () => void; draftEnd: globalThis.Ref; draftStart: globalThis.Ref; initializeDraft: () => void; reset: () => void; }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { "update:modelValue": (value: { end: import('../../../composables/useDatePicker').ISODate | null; start: import('../../../composables/useDatePicker').ISODate | null; } | null) => any; "date-select": (date: string) => any; }, import('vue').PublicProps, { color: CLColors; fluid: boolean; testId: string; width: string; busy: boolean; disabled: boolean; isRange: boolean; }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, { P: {}; B: {}; D: {}; C: {}; M: {}; Defaults: {}; }, Readonly<{ modelValue?: { end: import('../../../composables/useDatePicker').ISODate | null; start: import('../../../composables/useDatePicker').ISODate | null; } | null; } & import('../CLCalendar/CLCalendar.vue').CLCalendarProps> & Readonly<{ "onUpdate:modelValue"?: ((value: { end: import('../../../composables/useDatePicker').ISODate | null; start: import('../../../composables/useDatePicker').ISODate | null; } | null) => any) | undefined; "onDate-select"?: ((date: string) => any) | undefined; }>, { apply: () => void; cancel: () => void; draftEnd: globalThis.Ref; draftStart: globalThis.Ref; initializeDraft: () => void; reset: () => void; }, {}, {}, {}, { color: CLColors; fluid: boolean; testId: string; width: string; busy: boolean; disabled: boolean; isRange: boolean; }> | null; }, HTMLDivElement>; export default _default;