@bethinkpl/design-system 26.1.0 → 26.1.1

package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.stories.ts

@@ -0,0 +1,152 @@
+import DateRangePicker from './DateRangePicker.vue';
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import { ICONS } from '../../Icons/Icon';
+import {
+	DATE_PICKER_CALENDAR_POSITIONS,
+	DATE_PICKER_COLORS,
+	DATE_PICKER_STATES,
+} from '../DatePicker';
+import { ComponentProps } from 'vue-component-type-helpers';
+import { useArgs } from '@storybook/preview-api';
+
+type DateRangePickerProps = ComponentProps<typeof DateRangePicker>;
+
+const meta: Meta<DateRangePickerProps> = {
+	title: 'Components/DatePickers/DateRangePicker',
+	component: DateRangePicker,
+	render: (args) => {
+		const [_, updateArgs] = useArgs();
+
+		return {
+			components: { DateRangePicker },
+			setup() {
+				return args;
+			},
+			data() {
+				return {
+					ICONS: Object.freeze(ICONS),
+				};
+			},
+			methods: {
+				updateDate({ startDate, endDate }: { startDate: Date; endDate: Date }) {
+					updateArgs({
+						startDate: startDate
+							? `${startDate.getFullYear()}-${
+									startDate.getMonth() + 1
+							  }-${startDate.getDate()}`
+							: null,
+						endDate: endDate
+							? `${endDate.getFullYear()}-${
+									endDate.getMonth() + 1
+							  }-${endDate.getDate()}`
+							: null,
+					});
+				},
+			},
+			computed: {
+				formattedStartDate() {
+					if (!this.startDate) {
+						return null;
+					}
+					return new Date(this.startDate);
+				},
+				formattedEndDate() {
+					if (!this.endDate) {
+						return null;
+					}
+					return new Date(this.endDate);
+				},
+				formattedMinDate() {
+					if (!this.minDate) {
+						return null;
+					}
+					return new Date(this.minDate);
+				},
+				formattedMaxDate() {
+					if (!this.maxDate) {
+						return null;
+					}
+					return new Date(this.maxDate);
+				},
+				formattedDisableDates() {
+					if (!this.disableDates || !this.disableDates.length) {
+						return [];
+					}
+					return this.disableDates.map((date: string) => new Date(date));
+				},
+			},
+			template: `
+				<div style="display: flex">
+					<date-range-picker
+						:is-interactive="isInteractive"
+						:placeholder="placeholder"
+						:start-date="formattedStartDate"
+						:end-date="formattedEndDate"
+						:start-icon="startIcon ? ICONS[startIcon] : null"
+						:end-icon="endIcon ? ICONS[endIcon] : null"
+						:are-icons-hidden-on-mobile="areIconsHiddenOnMobile"
+						:calendar-position="calendarPosition"
+						:error-message="errorMessage"
+						:state="state"
+						:color="color"
+						:disable-dates="formattedDisableDates"
+						:min-date="formattedMinDate"
+						:max-date="formattedMaxDate"
+						@update:date="updateDate"
+					/>
+				</div>`,
+		};
+	},
+	argTypes: {
+		startDate: { control: 'text' },
+		endDate: { control: 'text' },
+		startIcon: { control: 'select', options: [null, ...Object.keys(ICONS)] },
+		endIcon: { control: 'select', options: [null, ...Object.keys(ICONS)] },
+		calendarPosition: {
+			control: 'select',
+			options: Object.values(DATE_PICKER_CALENDAR_POSITIONS),
+		},
+		state: {
+			control: 'select',
+			options: Object.values(DATE_PICKER_STATES),
+		},
+		color: {
+			control: 'select',
+			options: Object.values(DATE_PICKER_COLORS),
+		},
+		disableDates: {
+			control: 'object',
+		},
+	} as ArgTypes,
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=8502-1209&t=mHbWSeRfkspainMZ-4',
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<DateRangePickerProps>;
+
+const now = Date.now();
+const oneDayMili = 86400000;
+export const Interactive: Story = {
+	args: {
+		isInteractive: true,
+		placeholder: 'Ustaw',
+		startDate: '',
+		endDate: '',
+		startIcon: 'FA_CALENDAR_DAY',
+		endIcon: 'FA_CALENDAR_DAY',
+		areIconsHiddenOnMobile: false,
+		calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
+		errorMessage: '',
+		state: DATE_PICKER_STATES.DEFAULT,
+		color: DATE_PICKER_COLORS.NEUTRAL,
+		disableDates: [new Date(now + oneDayMili * 2).toISOString().slice(0, 10)],
+		minDate: new Date(now).toISOString().slice(0, 10),
+		maxDate: new Date(now + oneDayMili * 30).toISOString().slice(0, 10),
+	} as Args,
+};

package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue

@@ -0,0 +1,229 @@
+<template>
+	<div ref="dateRangePickerRef" class="ds-dateRangePicker">
+		<date-picker-box
+			:is-interactive="isInteractive"
+			:placeholder="placeholder"
+			:start-date="startDate"
+			:end-date="endDateIfDifferentThanStartDate"
+			:start-icon="startIcon"
+			:end-icon="endIcon"
+			:are-icons-hidden-on-mobile="areIconsHiddenOnMobile"
+			:state="state"
+			:color="color"
+			:start-date-eyebrow-text="eyebrowText"
+			:end-date-eyebrow-text="endDateEyebrowText"
+			:is-open="isOpen"
+			@click="toggle"
+		/>
+
+		<span v-if="errorMessage" class="ds-dateRangePicker__errorMessage">
+			{{ errorMessage }}
+		</span>
+		<input ref="flatpickrInputRef" class="ds-dateRangePicker__hiddenInput" />
+	</div>
+</template>
+
+<style lang="scss">
+@import 'flatpickr/dist/flatpickr';
+</style>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/spacings';
+
+.ds-dateRangePicker {
+	display: flex;
+	flex-direction: column;
+	row-gap: $space-4xs;
+
+	&__hiddenInput {
+		display: none;
+	}
+
+	&__errorMessage {
+		@include info-s-default-regular;
+
+		color: $color-danger-text;
+	}
+}
+</style>
+
+<script lang="ts">
+import DatePickerBox from '../DatePickerBox/DatePickerBox.vue';
+import { IconItem, ICONS } from '../../Icons/Icon';
+import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
+import {
+	DATE_PICKER_CALENDAR_POSITIONS,
+	DATE_PICKER_COLORS,
+	DATE_PICKER_STATES,
+	DATE_PICKER_TRIGGER_TYPES,
+	DatePickerCalendarPositions,
+	DatePickerColors,
+	DatePickerStates,
+} from '../DatePicker';
+import { DatePickerComposablesProps, initFlatpickr } from '../DatePicker/DatePicker.composables';
+import { capitalizeFirstLetter } from '../../../../../tools/importers/helpers/modifiers';
+import { localWeekdayName } from '../../../../../tools/importers/helpers/dates';
+
+export default defineComponent({
+	name: 'DateRangePicker',
+	components: {
+		DatePickerBox,
+	},
+	props: {
+		isInteractive: {
+			type: Boolean,
+			default: false,
+		},
+		placeholder: {
+			type: String,
+			default: 'Wybierz datę',
+		},
+		startDate: {
+			type: Date,
+			default: null,
+		},
+		endDate: {
+			type: Date,
+			default: null,
+		},
+		startIcon: {
+			type: [Object, null] as PropType<IconItem | null>,
+			default: ICONS.FA_CALENDAR_DAY,
+			validator(icon) {
+				return icon === null || Object?.values(ICONS).includes(toRaw(icon));
+			},
+		},
+		endIcon: {
+			type: [Object, null] as PropType<IconItem | null>,
+			default: ICONS.FA_CALENDAR_DAY,
+			validator(icon) {
+				return icon === null || Object?.values(ICONS).includes(toRaw(icon));
+			},
+		},
+		areIconsHiddenOnMobile: {
+			type: Boolean,
+			default: false,
+		},
+		calendarPosition: {
+			type: String as PropType<DatePickerCalendarPositions>,
+			default: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT,
+		},
+		errorMessage: {
+			type: String,
+			default: '',
+		},
+		state: {
+			type: (String as PropType<DatePickerStates>) || null,
+			default: DATE_PICKER_STATES.DEFAULT,
+		},
+		color: {
+			type: String as PropType<DatePickerColors>,
+			default: DATE_PICKER_COLORS.NEUTRAL,
+		},
+		disableDates: {
+			type: Array as PropType<Array<Date>>,
+			default: () => [],
+		},
+		minDate: {
+			type: Date,
+			default: null,
+		},
+		maxDate: {
+			type: Date,
+			default: null,
+		},
+	},
+	emits: { 'update:date': (value: { startDate: Date; endDate: Date }) => true },
+	setup(
+		props: DatePickerComposablesProps & {
+			startDate: Date;
+			endDate: Date;
+			isInteractive: boolean;
+			state: DatePickerStates;
+		},
+		{ emit },
+	) {
+		const dateRangePickerRef = ref() as Ref<HTMLDivElement>;
+		const flatpickrInputRef = ref() as Ref<HTMLInputElement>;
+
+		const onChange = (event: Array<Date>) => {
+			if (event.length !== 2) {
+				return;
+			}
+			emit('update:date', { startDate: event[0], endDate: event[1] });
+		};
+
+		const {
+			isOpen,
+			toggle: toggleDatePicker,
+			createDatePicker,
+		} = initFlatpickr({
+			props,
+			onChange,
+			defaultDates: [props.startDate, props.endDate],
+			mode: 'range',
+		});
+
+		watch(
+			[() => props.isInteractive, () => props.state],
+			async () => {
+				if (props.isInteractive && props.state === DATE_PICKER_STATES.DEFAULT) {
+					await createDatePicker(flatpickrInputRef.value, dateRangePickerRef.value);
+				}
+			},
+			{ flush: 'post' },
+		);
+
+		return {
+			dateRangePickerRef,
+			flatpickrInputRef,
+			isOpen,
+			toggleDatePicker,
+			createDatePicker,
+			DATE_PICKER_CALENDAR_POSITIONS: Object.freeze(DATE_PICKER_CALENDAR_POSITIONS),
+			DATE_PICKER_COLORS: Object.freeze(DATE_PICKER_COLORS),
+			DATE_PICKER_STATES: Object.freeze(DATE_PICKER_STATES),
+			DATE_PICKER_TRIGGER_TYPES: Object.freeze(DATE_PICKER_TRIGGER_TYPES),
+		};
+	},
+	computed: {
+		endDateEyebrowText() {
+			if (!this.endDate || this.state === DATE_PICKER_STATES.LOADING) {
+				return '';
+			}
+
+			return capitalizeFirstLetter(localWeekdayName(this.endDate));
+		},
+
+		endDateIfDifferentThanStartDate() {
+			return this.startDate &&
+				this.endDate &&
+				this.startDate.getTime() !== this.endDate.getTime()
+				? this.endDate
+				: null;
+		},
+
+		eyebrowText() {
+			if (!this.startDate || this.state === DATE_PICKER_STATES.LOADING) {
+				return '';
+			}
+
+			return capitalizeFirstLetter(localWeekdayName(this.startDate));
+		},
+	},
+	async mounted() {
+		if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
+			await this.createDatePicker(this.flatpickrInputRef, this.dateRangePickerRef);
+		}
+	},
+	methods: {
+		toggle() {
+			if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
+				this.toggleDatePicker();
+			}
+		},
+	},
+});
+</script>

package/lib/js/components/DatePickers/DateRangePicker/index.ts

@@ -0,0 +1,3 @@
+import DateRangePicker from './DateRangePicker.vue';
+
+export default DateRangePicker;

package/lib/js/icons/fontawesome.ts

@@ -177,6 +177,7 @@ import { faInfo as fasInfo } from '@fortawesome/pro-solid-svg-icons/faInfo';
 import { faLightbulb as fasLightbulb } from '@fortawesome/pro-solid-svg-icons/faLightbulb';
 import { faMemoCircleInfo as fasMemoCircleInfo } from '@fortawesome/pro-solid-svg-icons/faMemoCircleInfo';
 import { faMessageQuestion as fasMessageQuestion } from '@fortawesome/pro-solid-svg-icons/faMessageQuestion';
+import { faMessageXmark } from '@fortawesome/pro-regular-svg-icons/faMessageXmark';
 import { faSitemap as fasSitemap } from '@fortawesome/pro-solid-svg-icons/faSitemap';
 import { faSquareCheck as fasSquareCheck } from '@fortawesome/pro-solid-svg-icons/faSquareCheck';
 import { faSquareList as fasSquareList } from '@fortawesome/pro-solid-svg-icons/faSquareList';
@@ -337,6 +338,7 @@ export const FONTAWESOME_ICONS = {
 	FA_MEMO_CIRCLE_INFO: faMemoCircleInfo,
 	FA_MEMO_CIRCLE_INFO_SOLID: fasMemoCircleInfo,
 	FA_MESSAGE_QUESTION_SOLID: fasMessageQuestion,
+	FA_MESSAGE_XMARK: faMessageXmark,
 	FA_MINUS: faMinus,
 	FA_MONEY_BILL1: faMoneyBill1,
 	FA_MUSIC: faMusic,

package/lib/js/index.ts

@@ -16,6 +16,7 @@ export { default as CardExpandable } from './components/Cards/CardExpandable/';
 export { default as DsCardExpandable } from './components/Cards/CardExpandable/';
 export { default as DatePicker } from './components/DatePickers/DatePicker';
 export { default as DsDatePicker } from './components/DatePickers/DatePicker';
+export { default as DsDateRangePicker } from './components/DatePickers/DateRangePicker';
 export * from './components/DatePickers/DatePicker';
 export { default as Divider } from './components/Divider';
 export { default as DsDivider } from './components/Divider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.1.0",
+  "version": "26.1.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",

package/tools/importers/helpers/dates.ts

@@ -0,0 +1,21 @@
+export function localWeekdayName(date: Date): string {
+	return date.toLocaleDateString(undefined, {
+		dateStyle: undefined,
+		timeStyle: undefined,
+		weekday: 'long',
+	});
+}
+
+export function localFullDateWithShortMonthName(date: Date): string {
+	return date.toLocaleDateString(undefined, {
+		dateStyle: 'medium',
+		timeStyle: undefined,
+	});
+}
+
+export function localMonthDayWithShortMonthDay(date: Date): string {
+	return date.toLocaleDateString(undefined, {
+		month: 'short',
+		day: '2-digit',
+	});
+}

package/tsconfig.json

@@ -3,6 +3,7 @@
     "lib/js/typings.d.ts"
   ],
   "compilerOptions": {
+    "module": "esnext",
     "importHelpers": true,
     "removeComments": true,
     "allowSyntheticDefaultImports": true,

package/docs/assets/DatePicker-5MRZAjkX.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./pl-Cy1N1vsP.js","./_commonjsHelpers-Chg3vePA.js"])))=>i.map(i=>d[i]);
-import{_ as E}from"./iframe-D34akK7Z.js";import{d as y,t as I,r as m,o as a,c as i,k as u,h as l,a as c,b as P,n as p,g as h,F as R,f as C}from"./vue.esm-bundler-DiF7B9b7.js";import{b as L}from"./Tile-DXVTBx8j.js";import{a as N,I as r,b as B}from"./Icon-6eu_szpS.js";import{_ as O}from"./_plugin-vue_export-helper-DlAUqK2U.js";const T={NEUTRAL:"neutral",WARNING:"warning"},s={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},n={TOP:"top",TOP_LEFT:"top-left",TOP_RIGHT:"top-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right"},D={BOX:"box",TILE:"tile"},b=y({name:"DatePickerBox",components:{DsIcon:N},props:{isInteractive:{type:Boolean,default:!0},placeholder:{type:String,default:"Ustaw"},date:{type:Date,default:null},icon:{type:Object,default:null,validate:e=>e===null||Object.values(r).includes(I(e))},isIconHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:s.DEFAULT},color:{type:String,default:T.NEUTRAL},eyebrowText:{type:String,default:""},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(r),ICON_SIZES:Object.freeze(B),DATE_PICKER_STATES:Object.freeze(s),DATE_PICKER_COLORS:Object.freeze(T)}},computed:{text(){return this.date?this.date.toLocaleDateString(void 0,{month:"short",day:"2-digit"}):this.placeholder}}}),V={key:0,class:"ds-datePickerBox__eyebrow"},w={class:"ds-datePickerBox__dateWrapper"},F={class:"ds-datePickerBox__date"},K={key:1,class:"ds-datePickerBox__loader"};function M(e,t,o,g,A,k){const d=m("ds-icon");return a(),i("div",{class:p(["ds-datePickerBox",{"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED,"-ds-loading":e.state===e.DATE_PICKER_STATES.LOADING,"-ds-interactive":e.isInteractive,"-ds-warning":e.color===e.DATE_PICKER_COLORS.WARNING,"-ds-neutral":e.color===e.DATE_PICKER_COLORS.NEUTRAL,"-ds-isOpen":e.isOpen}])},[e.eyebrowText?(a(),i("span",V,u(e.eyebrowText),1)):l("",!0),c("div",w,[e.icon?(a(),P(d,{key:0,class:p(["ds-datePickerBox__icon",{"-ds-hiddenOnMobile":e.isIconHiddenOnMobile}]),icon:e.icon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):l("",!0),c("span",F,u(e.text),1)]),e.state===e.DATE_PICKER_STATES.LOADING?(a(),i("div",K,[h(d,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):l("",!0)],2)}const G=O(b,[["render",M],["__scopeId","data-v-56030591"]]);b.__docgenInfo={displayName:"DatePickerBox",exportName:"default",description:"",tags:{},props:[{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Ustaw'"}},{name:"date",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"icon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"isIconHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"(String as PropType<DatePickerStates>) || null"},defaultValue:{func:!1,value:"DATE_PICKER_STATES.DEFAULT"}},{name:"color",type:{name:"DatePickerColors"},defaultValue:{func:!1,value:"DATE_PICKER_COLORS.NEUTRAL"}},{name:"eyebrowText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"isOpen",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue"]};const U=e=>e.charAt(0).toUpperCase()+e.slice(1);let f=null;const _={[n.BOTTOM_LEFT]:"below left",[n.BOTTOM_RIGHT]:"below right",[n.BOTTOM]:"below",[n.TOP_LEFT]:"above left",[n.TOP_RIGHT]:"above right",[n.TOP]:"above"},S=y({name:"DatePicker",components:{DatePickerBox:G,DsTile:L},props:{triggerType:{type:String,default:D.TILE},isInteractive:{type:Boolean,default:!0},placeholder:{type:String,default:"Wybierz datę"},date:{type:Date,default:null},label:{type:String,default:""},isLabelUppercase:{type:Boolean,default:!1},icon:{type:[Object,null],default:r.FA_CALENDAR_DAY,validate:e=>e===null||Object.values(r).includes(I(e))},isIconHiddenOnMobile:{type:Boolean,default:!1},calendarPosition:{type:String,default:n.BOTTOM_LEFT},errorMessage:{type:String,default:""},state:{type:String||null,default:s.DEFAULT},color:{type:String,default:T.NEUTRAL},disableDates:{type:Array,default:()=>[]},minDate:{type:Date,default:null},maxDate:{type:Date,default:null}},emits:{"update:date":()=>!0},data(){return{datePicker:null,isOpen:!1,DATE_PICKER_STATES:Object.freeze(s),DATE_PICKER_TRIGGER_TYPES:Object.freeze(D)}},computed:{isDatePickerEnabled(){return this.isInteractive&&this.state===s.DEFAULT},eyebrowText(){return!this.date||this.state===s.LOADING?"":U(this.date.toLocaleDateString(void 0,{dateStyle:void 0,timeStyle:void 0,weekday:"long"}))},text(){return this.state===s.LOADING||!this.date?this.placeholder:this.date.toLocaleDateString(void 0,{dateStyle:"medium",timeStyle:void 0})},tileIcon(){return this.icon?this.isOpen?r.FA_CHEVRON_UP:this.icon:null},flatpickrConfigString(){return[this.maxDate,this.minDate,this.calendarPosition,this.date,...this.disableDates].concat("|")}},watch:{flatpickrConfigString:{handler(){var e;(e=this.datePicker)==null||e.set({position:_[this.calendarPosition],defaultDate:this.date,disable:this.disableDates.filter(t=>t instanceof Date),minDate:this.minDate,maxDate:this.maxDate})},flush:"post"}},async mounted(){if(this.isDatePickerEnabled&&!this.datePicker){if(!f){const{default:t}=await E(async()=>{const{default:o}=await import("./index-CBmJdl9t.js");return{default:o}},[],import.meta.url);f=t}const{Polish:e}=await E(async()=>{const{Polish:t}=await import("./pl-Cy1N1vsP.js").then(o=>o.p);return{Polish:t}},__vite__mapDeps([0,1]),import.meta.url);this.datePicker=f(this.$refs.flatpickrInput,{locale:e,positionElement:this.$el,ignoredFocusElements:[this.$el],appendTo:this.$el,position:_[this.calendarPosition],defaultDate:this.date,disable:this.disableDates.filter(t=>t instanceof Date),minDate:this.minDate,maxDate:this.maxDate,onClose:[()=>{this.isOpen=!1}],onOpen:[()=>{this.isOpen=!0}],onChange:t=>{this.$emit("update:date",t[0])}})}},unmounted(){var e;(e=this.datePicker)==null||e.destroy(),this.datePicker=null},methods:{toggle(){this.isDatePickerEnabled&&this.datePicker&&this.datePicker.toggle()}}}),$={class:"ds-datePicker__labelWrapper"},j={key:2,class:"ds-datePicker__errorMessage"},z={ref:"flatpickrInput",class:"ds-datePicker__hiddenInput"};function H(e,t,o,g,A,k){const d=m("ds-tile"),v=m("date-picker-box");return a(),i("div",{class:p(["ds-datePicker",{"-ds-box":e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.BOX}])},[e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.TILE?(a(),i(R,{key:0},[c("div",$,[e.label?(a(),i("span",{key:0,class:p(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},u(e.label),3)):l("",!0),e.$slots.default?C(e.$slots,"default",{key:1},void 0,!0):l("",!0)]),h(d,{class:"ds-datePicker__tile",text:e.text,interactive:e.isInteractive,color:e.color,state:e.state,"icon-right":e.tileIcon,"is-icon-right-hidden-on-mobile":e.isIconHiddenOnMobile,"eyebrow-text":e.eyebrowText,onClick:e.toggle},null,8,["text","interactive","color","state","icon-right","is-icon-right-hidden-on-mobile","eyebrow-text","onClick"])],64)):(a(),P(v,{key:1,"is-interactive":e.isInteractive,placeholder:e.placeholder,date:e.date,icon:e.icon,"is-icon-hidden-on-mobile":e.isIconHiddenOnMobile,state:e.state,color:e.color,"eyebrow-text":e.eyebrowText,"is-open":e.isOpen,onClick:e.toggle},null,8,["is-interactive","placeholder","date","icon","is-icon-hidden-on-mobile","state","color","eyebrow-text","is-open","onClick"])),e.errorMessage?(a(),i("span",j,u(e.errorMessage),1)):l("",!0),c("input",z,null,512)],2)}const J=O(S,[["render",H],["__scopeId","data-v-599f6513"]]);S.__docgenInfo={displayName:"DatePicker",exportName:"default",description:"",tags:{},props:[{name:"triggerType",type:{name:"DatePickerTriggerTypes"},defaultValue:{func:!1,value:"DATE_PICKER_TRIGGER_TYPES.TILE"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wybierz datę'"}},{name:"date",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"isLabelUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"icon",type:{name:"object|null"},defaultValue:{func:!1,value:"ICONS.FA_CALENDAR_DAY"}},{name:"isIconHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"calendarPosition",type:{name:"DatePickerCalendarPositions"},defaultValue:{func:!1,value:"DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT"}},{name:"errorMessage",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"state",type:{name:"(String as PropType<DatePickerStates>) || null"},defaultValue:{func:!1,value:"DATE_PICKER_STATES.DEFAULT"}},{name:"color",type:{name:"DatePickerColors"},defaultValue:{func:!1,value:"DATE_PICKER_COLORS.NEUTRAL"}},{name:"disableDates",type:{name:"array"},defaultValue:{func:!1,value:"[]"}},{name:"minDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"maxDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}}],events:[{name:"update:date",type:{names:["undefined"]}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DatePicker/DatePicker.vue"]};export{J as D,D as a,n as b,s as c,T as d};