@bethinkpl/design-system 26.5.0 → 26.7.1

package/lib/js/components/Avatar/Avatar.vue

@@ -0,0 +1,178 @@
+<template>
+	<div
+		class="ds-avatar"
+		:class="{
+			'-ds-xx-small': size === AVATAR_SIZES.XX_SMALL,
+			'-ds-x-small': size === AVATAR_SIZES.X_SMALL,
+			'-ds-small': size === AVATAR_SIZES.SMALL,
+			'-ds-medium': size === AVATAR_SIZES.MEDIUM,
+			'-ds-large': size === AVATAR_SIZES.LARGE,
+			'-ds-x-large': size === AVATAR_SIZES.X_LARGE,
+		}"
+	>
+		<div
+			class="ds-avatar__content"
+			:style="{
+				backgroundColor: initialBackgroundColor,
+			}"
+		>
+			<img v-if="!!avatarUrl" :src="avatarUrl" :alt="username" class="ds-avatar__image" />
+			<span v-else class="ds-avatar__initials">{{ initials }}</span>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../lib/styles/settings/radiuses';
+@import '../../../../lib/styles/settings/colors/tokens';
+@import '../../../../lib/styles/settings/typography/tokens';
+
+.ds-avatar {
+	$root: &;
+
+	display: flex;
+
+	&.-ds-xx-small {
+		height: 24px;
+		width: 24px;
+
+		& #{$root}__content {
+			@include info-s-default-regular;
+		}
+	}
+
+	&.-ds-x-small {
+		height: 32px;
+		width: 32px;
+
+		& #{$root}__content {
+			@include heading-s-default-regular;
+		}
+	}
+
+	&.-ds-small {
+		height: 40px;
+		width: 40px;
+
+		& #{$root}__content {
+			@include heading-m-default-regular;
+		}
+	}
+
+	&.-ds-medium {
+		height: 64px;
+		width: 64px;
+
+		& #{$root}__content {
+			@include displayHeading-xs-default-regular;
+		}
+	}
+
+	&.-ds-large {
+		height: 88px;
+		width: 88px;
+
+		& #{$root}__content {
+			@include displayHeading-m-default-regular;
+		}
+	}
+
+	&.-ds-x-large {
+		height: 140px;
+		width: 140px;
+
+		& #{$root}__content {
+			@include displayHeading-m-default-regular;
+		}
+	}
+
+	&.-ds-xx-small,
+	&.-ds-x-small,
+	&.-ds-small,
+	&.-ds-medium {
+		& #{$root}__content {
+			border-radius: $radius-s;
+		}
+	}
+
+	&.-ds-large,
+	&.-ds-x-large {
+		& #{$root}__content {
+			border-radius: $radius-m;
+		}
+	}
+
+	&__content {
+		align-items: center;
+		color: $color-inverted-text;
+		display: flex;
+		flex: 1;
+		justify-content: center;
+		overflow: hidden;
+		user-select: none;
+	}
+
+	&__image {
+		display: block;
+		height: 100%;
+		width: 100%;
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { AVATAR_SIZES, AvatarSize } from './Avatar.consts';
+import { computed } from 'vue';
+
+const props = withDefaults(
+	defineProps<{
+		username: string;
+		avatarUrl?: string;
+		size?: AvatarSize;
+	}>(),
+	{
+		size: AVATAR_SIZES.X_SMALL,
+		avatarUrl: undefined,
+	},
+);
+
+const initialsBackgrounds = [
+	'#1abc9c',
+	'#2ecc71',
+	'#3498db',
+	'#9b59b6',
+	'#34495e',
+	'#16a085',
+	'#27ae60',
+	'#2980b9',
+	'#8e44ad',
+	'#2c3e50',
+	'#f1c40f',
+	'#e67e22',
+	'#e74c3c',
+	'#f39c12',
+	'#d35400',
+	'#c0392b',
+];
+
+function getInitials(username: string) {
+	const [first, second] = username.split(' ');
+
+	if (first && second) {
+		return `${first[0]}${second[0]}`.toUpperCase();
+	}
+
+	return first.substring(0, 2).toUpperCase();
+}
+
+const initialBackgroundColor = computed(() => {
+	if (props.avatarUrl) {
+		return;
+	}
+
+	const colorIndex = (props.username.charCodeAt(0) - 65) % 16;
+
+	return initialsBackgrounds[colorIndex];
+});
+const initials = computed(() => getInitials(props.username));
+</script>

package/lib/js/components/Avatar/index.ts

@@ -0,0 +1,4 @@
+import Avatar from './Avatar.vue';
+
+export default Avatar;
+export * from './Avatar.consts';

package/lib/js/components/DatePickers/DatePicker/DatePicker.composables.ts

@@ -1,4 +1,4 @@
-import { defineEmits, onUnmounted, Ref, ref, watch } from 'vue';
+import { onUnmounted, Ref, ref, watch } from 'vue';
 import { FlatpickrFn, Instance as DatePickerInstance } from 'flatpickr/dist/types/instance';
 import { CustomLocale } from 'flatpickr/dist/types/locale';
 
@@ -13,6 +13,7 @@ export interface DatePickerComposablesProps {
 	maxDate: Date | null;
 	calendarPosition: DatePickerCalendarPositions;
 }
+
 interface InitFlatpickrPrams {
 	props: DatePickerComposablesProps;
 	onChange: (dates: Array<Date>) => void;
@@ -25,6 +26,7 @@ interface InitFlatpickr {
 	createDatePicker: (
 		flatpickrInputElement: HTMLInputElement,
 		dateRangePickerRef: HTMLElement,
+		updatePositionBasedOnScrollableSelector: string,
 	) => Promise<DatePickerInstance | undefined>;
 	isOpen: Ref<boolean>;
 	toggle: () => void;
@@ -42,6 +44,7 @@ export function initFlatpickr({
 	const createDatePicker = async (
 		flatpickrInputElement: HTMLInputElement,
 		datePickerElement: HTMLElement,
+		updatePositionBasedOnScrollableSelector: string,
 	): Promise<DatePickerInstance | undefined> => {
 		if (datePicker) {
 			return;
@@ -80,6 +83,24 @@ export function initFlatpickr({
 			onChange,
 		});
 
+		if (updatePositionBasedOnScrollableSelector) {
+			const container = document.querySelector(updatePositionBasedOnScrollableSelector);
+
+			const scrollEvent = () => {
+				datePicker?._positionCalendar();
+			};
+
+			if (container) {
+				datePicker?.config?.onOpen?.push(() => {
+					container.addEventListener('scroll', scrollEvent, { passive: true });
+				});
+
+				datePicker?.config?.onClose?.push(() => {
+					container.removeEventListener('scroll', scrollEvent);
+				});
+			}
+		}
+
 		return datePicker;
 	};
 

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

@@ -80,6 +80,7 @@ const StoryTemplate: StoryFn<typeof DatePicker> = (args) => {
 				:disable-dates="formattedDisableDates"
 				:min-date="formattedMinDate"
 				:max-date="formattedMaxDate"
+				:update-position-based-on-scrollable-selector="updatePositionBasedOnScrollableSelector"
 				@update:date="updateDate"
 			>
 				<ds-switch  label-left="lewa" label-right="prawa" />
@@ -101,7 +102,7 @@ const args = {
 	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),
-	icon: 'FA_CALENDAR_DAY',
+	icon: 'FA_CALENDAR_DAYS',
 	isIconHiddenOnMobile: false,
 	additionalText: '',
 	helpMessage: null,
@@ -143,3 +144,27 @@ Interactive.parameters = {
 		url: 'https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4',
 	},
 };
+
+export const ScrollableContainer = StoryTemplate.bind({});
+ScrollableContainer.decorators = [
+	() => ({
+		template: `
+			<div style="height: 500px; overflow-y: scroll;" class="scrollable-container">
+				<div style="height: 1500px; padding: 6px;">
+					<story />
+				</div>
+			</div>`,
+	}),
+];
+ScrollableContainer.argTypes = argTypes;
+ScrollableContainer.args = {
+	...args,
+	updatePositionBasedOnScrollableSelector: '.scrollable-container',
+};
+
+ScrollableContainer.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4',
+	},
+};

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

@@ -30,6 +30,7 @@
 				:icon-right="tileIcon"
 				:is-icon-right-hidden-on-mobile="isIconHiddenOnMobile"
 				:eyebrow-text="eyebrowText"
+				:additional-text-max-width="TILE_ADDITIONAL_TEXT_MAX_WIDTHS.MEDIUM"
 				has-border
 				@click="toggle"
 			/>
@@ -140,7 +141,7 @@
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
 
-import DsTile, { TILE_BORDER_COLORS } from '../../Tile';
+import DsTile, { TILE_ADDITIONAL_TEXT_MAX_WIDTHS, TILE_BORDER_COLORS } from '../../Tile';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import DatePickerBox from '../DatePickerBox';
 
@@ -202,7 +203,7 @@ export default defineComponent({
 		},
 		icon: {
 			type: [Object, null] as PropType<IconItem | null>,
-			default: ICONS.FA_CALENDAR_DAY,
+			default: ICONS.FA_CALENDAR_DAYS,
 			validator(icon) {
 				return icon === null || Object.values(ICONS).includes(toRaw(icon));
 			},
@@ -239,6 +240,10 @@ export default defineComponent({
 			type: Date,
 			default: null,
 		},
+		updatePositionBasedOnScrollableSelector: {
+			type: String,
+			default: '',
+		},
 	},
 	emits: {
 		'update:date': (date: Date) => true,
@@ -248,6 +253,7 @@ export default defineComponent({
 			date: Date;
 			isInteractive: boolean;
 			state: DatePickerStates;
+			updatePositionBasedOnScrollableSelector: string;
 		},
 		{ emit },
 	) {
@@ -270,7 +276,11 @@ export default defineComponent({
 		});
 		watch([() => props.isInteractive, () => props.state], async () => {
 			if (props.isInteractive && props.state === DATE_PICKER_STATES.DEFAULT) {
-				await createDatePicker(flatpickrInputRef.value, datePickerRef.value);
+				await createDatePicker(
+					flatpickrInputRef.value,
+					datePickerRef.value,
+					props.updatePositionBasedOnScrollableSelector,
+				);
 			}
 		});
 
@@ -284,6 +294,7 @@ export default defineComponent({
 			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),
+			TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Object.freeze(TILE_ADDITIONAL_TEXT_MAX_WIDTHS),
 		};
 	},
 	computed: {
@@ -333,7 +344,11 @@ export default defineComponent({
 	},
 	async mounted() {
 		if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
-			await this.createDatePicker(this.flatpickrInputRef, this.datePickerRef);
+			await this.createDatePicker(
+				this.flatpickrInputRef,
+				this.datePickerRef,
+				this.updatePositionBasedOnScrollableSelector,
+			);
 		}
 	},
 	methods: {

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

@@ -134,6 +134,10 @@ export default defineComponent({
 			type: Date,
 			default: null,
 		},
+		updatePositionBasedOnScrollableSelector: {
+			type: String,
+			default: '',
+		},
 	},
 	emits: { 'update:date': (value: { startDate: Date; endDate: Date }) => true },
 	setup(
@@ -142,6 +146,7 @@ export default defineComponent({
 			endDate: Date;
 			isInteractive: boolean;
 			state: DatePickerStates;
+			updatePositionBasedOnScrollableSelector: string;
 		},
 		{ emit },
 	) {
@@ -170,7 +175,11 @@ export default defineComponent({
 			[() => props.isInteractive, () => props.state],
 			async () => {
 				if (props.isInteractive && props.state === DATE_PICKER_STATES.DEFAULT) {
-					await createDatePicker(flatpickrInputRef.value, dateRangePickerRef.value);
+					await createDatePicker(
+						flatpickrInputRef.value,
+						dateRangePickerRef.value,
+						props.updatePositionBasedOnScrollableSelector,
+					);
 				}
 			},
 			{ flush: 'post' },
@@ -215,7 +224,11 @@ export default defineComponent({
 	},
 	async mounted() {
 		if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
-			await this.createDatePicker(this.flatpickrInputRef, this.dateRangePickerRef);
+			await this.createDatePicker(
+				this.flatpickrInputRef,
+				this.dateRangePickerRef,
+				this.updatePositionBasedOnScrollableSelector,
+			);
 		}
 	},
 	methods: {

package/lib/js/components/Icons/Icon/Icon.consts.ts

@@ -5,6 +5,7 @@ import CommentsCheck from '../../../../images/icons/comments-check.svg';
 import Answers from '../../../../images/icons/icon-answers.svg';
 import HideAnswers from '../../../../images/icons/icon-hide-answers.svg';
 import SidebarFlipSolid from '../../../../images/icons/sidebar-flip-solid.svg';
+import Change from '../../../../images/icons/change.svg';
 
 import { FONTAWESOME_ICONS } from '../../../icons/fontawesome';
 import { Value } from '../../../utils/type.utils';
@@ -41,13 +42,14 @@ export const ICON_SIZES = {
 export type IconSize = Value<typeof ICON_SIZES>;
 
 const BETHINK_ICONS = {
-	HEAD_WITH_QUESTION_MARK: HeadWithQuestionMark,
-	RIBBON: Ribbon,
-	SLIDERS_SEARCH: SlidersSearch,
-	COMMENTS_CHECK: CommentsCheck,
 	ANSWERS: Answers,
+	CHANGE: Change,
+	COMMENTS_CHECK: CommentsCheck,
+	HEAD_WITH_QUESTION_MARK: HeadWithQuestionMark,
 	HIDE_ANSWERS: HideAnswers,
+	RIBBON: Ribbon,
 	SIDEBAR_FLIP_SOLID: SidebarFlipSolid,
+	SLIDERS_SEARCH: SlidersSearch,
 } as const;
 
 export const ICONS = {

package/lib/js/components/Modals/Modal/Modal.vue

@@ -13,7 +13,7 @@
 			<div class="ds-modal__scrollableWrapper">
 				<img v-if="headerImage" class="ds-modal__image" :src="headerImage" alt="" />
 				<div class="ds-modal__content" :class="{ '-ds-centered': contentCentered }">
-					<div class="ds-modal__header">
+					<div v-if="headerTitle" class="ds-modal__header">
 						<feature-icon
 							v-if="headerFeatureIcon"
 							class="ds-modal__headerFeatureIcon"
@@ -347,7 +347,7 @@ export default defineComponent({
 		},
 		headerTitle: {
 			type: String,
-			required: true,
+			default: null,
 		},
 		headerSubtitle: {
 			type: String,

package/lib/js/components/Tile/Tile.consts.ts

@@ -39,3 +39,10 @@ export const TILE_BORDER_COLORS = {
 } as const;
 
 export type TileBorderColors = Value<typeof TILE_BORDER_COLORS>;
+
+export const TILE_ADDITIONAL_TEXT_MAX_WIDTHS = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+} as const;
+
+export type TileAdditionalTextMaxWidths = Value<typeof TILE_ADDITIONAL_TEXT_MAX_WIDTHS>;

package/lib/js/components/Tile/Tile.shared.ts

@@ -1,6 +1,14 @@
 import { PropType, toRaw } from 'vue';
 import { ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES, TileBorderColors, TileColors, TileStates } from './Tile.consts';
+import {
+	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
+	TILE_COLORS,
+	TILE_STATES,
+	TileAdditionalTextMaxWidths,
+	TileBorderColors,
+	TileColors,
+	TileStates,
+} from './Tile.consts';
 import { Value } from '../../utils/type.utils';
 
 export const props = {
@@ -68,4 +76,11 @@ export const props = {
 		type: String as PropType<TileBorderColors>,
 		default: null,
 	},
+	additionalTextMaxWidth: {
+		type: String as PropType<TileAdditionalTextMaxWidths>,
+		default: TILE_ADDITIONAL_TEXT_MAX_WIDTHS.SMALL,
+		validator(value: TileAdditionalTextMaxWidths) {
+			return Object.values(TILE_ADDITIONAL_TEXT_MAX_WIDTHS).includes(value);
+		},
+	},
 };

package/lib/js/components/Tile/Tile.vue

@@ -42,7 +42,16 @@
 			:icon="iconRight"
 			:size="ICON_SIZES.SMALL"
 		/>
-		<div v-else-if="additionalText" class="ds-tile__additionalText">
+		<div
+			v-else-if="additionalText"
+			class="ds-tile__additionalText"
+			:class="{
+				'-ds-max-width-small':
+					additionalTextMaxWidth === TILE_ADDITIONAL_TEXT_MAX_WIDTHS.SMALL,
+				'-ds-max-width-medium':
+					additionalTextMaxWidth === TILE_ADDITIONAL_TEXT_MAX_WIDTHS.MEDIUM,
+			}"
+		>
 			{{ additionalText }}
 		</div>
 	</div>
@@ -280,6 +289,7 @@ $tile-colors: (
 	@each $border-color-name, $border-color-map in $tile-border-colors {
 		&.-ds-border-#{$border-color-name} {
 			outline: $border-xs solid map-get($border-color-map, 'default');
+
 			&.-ds-disabled {
 				outline: $border-xs solid map-get($border-color-map, 'disabled');
 			}
@@ -314,8 +324,15 @@ $tile-colors: (
 		color: $color-neutral-text;
 		flex-grow: 1;
 		margin-left: $space-xs;
-		max-width: 30%;
 		text-align: right;
+
+		&.-ds-max-width-small {
+			max-width: 30%;
+		}
+
+		&.-ds-max-width-medium {
+			max-width: 50%;
+		}
 	}
 
 	&__center {
@@ -377,7 +394,7 @@ $tile-colors: (
 
 <script lang="ts">
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES } from './Tile.consts';
+import { TILE_ADDITIONAL_TEXT_MAX_WIDTHS, TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { props } from './Tile.shared';
 import { defineComponent } from 'vue';
 
@@ -392,6 +409,7 @@ export default defineComponent({
 			ICONS: Object.freeze(ICONS),
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 			TILE_STATES: Object.freeze(TILE_STATES),
+			TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Object.freeze(TILE_ADDITIONAL_TEXT_MAX_WIDTHS),
 		};
 	},
 	computed: {

package/lib/js/icons/fontawesome.ts

@@ -201,6 +201,7 @@ import { faChevronRight as falChevronRight } from '@fortawesome/pro-light-svg-ic
 import { faSpinnerThird as fadSpinnerThird } from '@fortawesome/pro-duotone-svg-icons/faSpinnerThird';
 
 import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
+import { faUserGear } from '@fortawesome/pro-regular-svg-icons/faUserGear';
 
 export const FONTAWESOME_ICONS = {
 	FA_ADDRESS_CARD: faAddressCard,
@@ -394,6 +395,7 @@ export const FONTAWESOME_ICONS = {
 	FA_UNLOCK_KEYHOLE: faUnlockKeyhole,
 	FA_UPLOAD: faUpload,
 	FA_USER: faUser,
+	FA_USER_GEAR: faUserGear,
 	FA_USER_DOCTOR_SOLID: fasUserDoctor,
 	FA_VIDEO_SOLID: fasVideo,
 	FA_VOLUME_HIGH_SOLID: fasVolumeHigh,

package/lib/js/index.ts

@@ -1,3 +1,5 @@
+export { default as Avatar } from './components/Avatar';
+export * from './components/Avatar/Avatar.consts';
 export { default as BadgeScore } from './components/BadgeScore';
 export { default as DsBadgeScore } from './components/BadgeScore';
 export * from './components/BadgeScore/BadgeScore.consts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.5.0",
+  "version": "26.7.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -80,7 +80,7 @@
     "stylelint-order": "6.0.3",
     "ts-jest": "29.0.5",
     "ts-node": "^10.9.1",
-    "typescript": "4.6.4",
+    "typescript": "5.7.3",
     "vite": "^5.4.9",
     "vite-plugin-checker": "^0.7.0",
     "vite-plugin-css-injected-by-js": "^3.5.1",
@@ -91,6 +91,7 @@
   },
   "dependencies": {
     "@primevue/themes": "4.0.0-rc.3",
-    "primevue": "4.0.0-rc.3"
+    "primevue": "4.0.0-rc.3",
+    "vue-component-type-helpers": "^2.2.2"
   }
 }

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/docs/assets/DatePicker-DfNJw-NT.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{d as C,t as b,r as O,o as a,c as s,a as n,j as T,g as i,b as P,n as p,F as L,k as N,q as h,C as F,w as M,f as U}from"./vue.esm-bundler-CWlcb7ht.js";import{c as W,b as r}from"./Tile-DWASCVea.js";import{a as G,I as D,b as j}from"./Icon-ChGia3n4.js";import{_ as B}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as g}from"./iframe-Di5TkTnR.js";const d={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral",WARNING:"warning",DANGER:"danger"},E={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},u={TOP:"top",TOP_LEFT:"top-left",TOP_RIGHT:"top-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right"},R={BOX:"box",TILE:"tile"},S={[u.BOTTOM_LEFT]:"below left",[u.BOTTOM_RIGHT]:"below right",[u.BOTTOM]:"below",[u.TOP_LEFT]:"above left",[u.TOP_RIGHT]:"above right",[u.TOP]:"above"};function H(e){return e.toLocaleDateString(void 0,{dateStyle:void 0,timeStyle:void 0,weekday:"long"})}function z(e){return e.toLocaleDateString(void 0,{dateStyle:"medium",timeStyle:void 0})}function v(e){return e.toLocaleDateString(void 0,{month:"short",day:"2-digit"})}const w=C({name:"DatePickerBox",components:{DsIcon:G},props:{isInteractive:{type:Boolean,default:!0},placeholder:{type:String,default:"Ustaw"},startDate:{type:Date,default:null},endDate:{type:Date,default:null},startIcon:{type:Object,default:null,validate:e=>e===null||Object.values(D).includes(b(e))},endIcon:{type:Object,default:null,validate:e=>e===null||Object.values(D).includes(b(e))},areIconsHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:E.DEFAULT},color:{type:String,default:d.NEUTRAL_WEAK},startDateEyebrowText:{type:String,default:""},endDateEyebrowText:{type:String,default:""},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(D),ICON_SIZES:Object.freeze(j),DATE_PICKER_STATES:Object.freeze(E),DATE_PICKER_COLORS:Object.freeze(d)}},computed:{startDateText(){return this.startDate?v(this.startDate):this.placeholder},endDateText(){return v(this.endDate)}}}),$={class:"ds-datePickerBox__dateWrapper"},Y={key:0,class:"ds-datePickerBox__eyebrow"},X={class:"ds-datePickerBox__date"},Z={class:"ds-datePickerBox__dateText"},q={class:"ds-datePickerBox__dateWrapper"},J={key:0,class:"ds-datePickerBox__eyebrow"},Q={class:"ds-datePickerBox__date"},x={class:"ds-datePickerBox__dateText"},ee={key:1,class:"ds-datePickerBox__loader"};function te(e,c,o,_,t,f){const l=O("ds-icon");return a(),s("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-neutralWeak":e.DATE_PICKER_COLORS.NEUTRAL_WEAK===e.color,"-ds-neutral":e.DATE_PICKER_COLORS.NEUTRAL===e.color,"-ds-danger":e.color===e.DATE_PICKER_COLORS.DANGER,"-ds-isOpen":e.isOpen}])},[n("div",{class:p(["ds-datePickerBox__widthWrapper",{"-ds-has-icon":e.startIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[n("div",$,[e.startDateEyebrowText?(a(),s("span",Y,T(e.startDateEyebrowText),1)):i("",!0),n("div",X,[e.startIcon?(a(),P(l,{key:0,class:p(["ds-datePickerBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.startIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):i("",!0),n("span",Z,T(e.startDateText),1)])])],2),e.startDate&&e.endDate?(a(),s(L,{key:0},[c[0]||(c[0]=n("span",{class:"ds-datePickerBox__separator"},"–",-1)),n("div",{class:p(["ds-datePickerBox__widthWrapper -ds-justify-to-end",{"-ds-has-icon":e.endIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[n("div",q,[e.endDateEyebrowText?(a(),s("span",J,T(e.endDateEyebrowText),1)):i("",!0),n("div",Q,[e.endIcon?(a(),P(l,{key:0,class:p(["ds-datePickerBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.endIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):i("",!0),n("span",x,T(e.endDateText),1)])])],2)],64)):i("",!0),e.state===e.DATE_PICKER_STATES.LOADING?(a(),s("div",ee,[N(l,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):i("",!0)],2)}const ae=B(w,[["render",te],["__scopeId","data-v-12bbb912"]]);w.__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:"startDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"endDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"startIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"endIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"areIconsHiddenOnMobile",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_WEAK"}},{name:"startDateEyebrowText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"endDateEyebrowText",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 ne=e=>e.charAt(0).toUpperCase()+e.slice(1);let A=null,k;function se({props:e,onChange:c,defaultDates:o,mode:_="single"}){let t=null;const f=h(!1),l=async(m,y)=>{if(!t){if(!A)try{A=(await g(async()=>{const{default:I}=await import("./index-CBmJdl9t.js");return{default:I}},[],import.meta.url)).default,k=(await g(async()=>{const{Polish:I}=await import("./pl-Cy1N1vsP.js").then(V=>V.p);return{Polish:I}},__vite__mapDeps([0,1]),import.meta.url)).Polish}catch(I){console.error("Failed to load flatpickr",I);return}return t=A(m,{mode:_,locale:k,disableMobile:!0,positionElement:y,ignoredFocusElements:[y],position:S[e.calendarPosition],defaultDate:o,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate,onClose:[()=>{f.value=!1}],onOpen:[()=>{f.value=!0}],onChange:c}),t}};return F(()=>{t==null||t.destroy(),t=null}),M([()=>e.calendarPosition,()=>e.minDate,()=>e.maxDate,()=>e.disableDates,()=>o],()=>{t==null||t.set({position:S[e.calendarPosition],defaultDate:o,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate})},{flush:"post"}),{datePicker:t,createDatePicker:l,isOpen:f,toggle:()=>{t==null||t.toggle()}}}const K=C({name:"DatePicker",components:{DsTile:W,DatePickerBox:ae},props:{triggerType:{type:String,default:R.TILE},isInteractive:{type:Boolean,default:!0},placeholder:{type:String,default:"Wybierz datę"},date:{type:Date,default:null},additionalText:{type:String,default:""},helpMessage:{type:String,default:null},label:{type:String,default:""},isLabelUppercase:{type:Boolean,default:!1},icon:{type:[Object,null],default:D.FA_CALENDAR_DAY,validator(e){return e===null||Object.values(D).includes(b(e))}},isIconHiddenOnMobile:{type:Boolean,default:!1},errorMessage:{type:String,default:null},state:{type:String,default:E.DEFAULT},color:{type:String,default:d.NEUTRAL_WEAK},calendarPosition:{type:String,default:u.BOTTOM_LEFT},disableDates:{type:Array,default:()=>[]},minDate:{type:Date,default:null},maxDate:{type:Date,default:null}},emits:{"update:date":e=>!0},setup(e,{emit:c}){const o=h(),_=h(),t=y=>{c("update:date",y[0])},{isOpen:f,toggle:l,createDatePicker:m}=se({props:e,onChange:t,defaultDates:e.date,mode:"single"});return M([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===E.DEFAULT&&await m(o.value,_.value)}),{flatpickrInputRef:o,datePickerRef:_,isOpen:f,toggleDatePicker:l,createDatePicker:m,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(u),DATE_PICKER_COLORS:Object.freeze(d),DATE_PICKER_STATES:Object.freeze(E),DATE_PICKER_TRIGGER_TYPES:Object.freeze(R)}},computed:{borderColor(){return{[d.NEUTRAL]:this.isInteractive?r.PRIMARY:r.NEUTRAL_WEAK,[d.NEUTRAL_WEAK]:this.isInteractive?r.PRIMARY:r.NEUTRAL_WEAK,[d.DANGER]:this.isInteractive?r.DANGER:r.DANGER_WEAK,[d.WARNING]:this.isInteractive?r.WARNING:r.WARNING_WEAK}[this.color]},eyebrowText(){return this.date?ne(H(this.date)):""},text(){return this.date?z(this.date):this.placeholder},tileIcon(){return this.additionalText||!this.icon?null:this.isOpen?D.FA_CHEVRON_UP:this.icon},showErrorMessage(){return this.errorMessage!==null},showHelpMessage(){return this.helpMessage!==null}},async mounted(){this.isInteractive&&this.state===E.DEFAULT&&await this.createDatePicker(this.flatpickrInputRef,this.datePickerRef)},methods:{toggle(){this.isInteractive&&this.state===E.DEFAULT&&this.toggleDatePicker()}}}),le={class:"ds-datePicker__labelWrapper"},ie={key:2,class:"ds-datePicker__errorMessage"},oe={key:3,class:"ds-datePicker__helpMessage"},re={ref:"flatpickrInputRef",class:"ds-datePicker__hiddenInput"};function de(e,c,o,_,t,f){const l=O("ds-tile"),m=O("date-picker-box");return a(),s("div",{ref:"datePickerRef",class:p(["ds-datePicker",{"-ds-box":e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.BOX}])},[e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.TILE?(a(),s(L,{key:0},[n("div",le,[e.label?(a(),s("span",{key:0,class:p(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},T(e.label),3)):i("",!0),e.$slots.default?U(e.$slots,"default",{key:1},void 0,!0):i("",!0)]),N(l,{class:"ds-datePicker__tile",text:e.text,interactive:e.isInteractive,"additional-text":e.additionalText,color:e.color,"border-color":e.borderColor,state:e.state,"icon-right":e.tileIcon,"is-icon-right-hidden-on-mobile":e.isIconHiddenOnMobile,"eyebrow-text":e.eyebrowText,"has-border":"",onClick:e.toggle},null,8,["text","interactive","additional-text","color","border-color","state","icon-right","is-icon-right-hidden-on-mobile","eyebrow-text","onClick"])],64)):(a(),P(m,{key:1,"is-interactive":e.isInteractive,placeholder:e.placeholder,"start-date":e.date,"start-icon":e.icon,"are-icons-hidden-on-mobile":e.isIconHiddenOnMobile,state:e.state,color:e.color,"start-date-eyebrow-text":e.eyebrowText,"is-open":e.isOpen,onClick:e.toggle},null,8,["is-interactive","placeholder","start-date","start-icon","are-icons-hidden-on-mobile","state","color","start-date-eyebrow-text","is-open","onClick"])),e.showErrorMessage?(a(),s("span",ie,T(e.errorMessage),1)):e.showHelpMessage?(a(),s("span",oe,T(e.helpMessage),1)):i("",!0),n("input",re,null,512)],2)}const Te=B(K,[["render",de],["__scopeId","data-v-024c47a1"]]);K.__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:"additionalText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"helpMessage",type:{name:"string"},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:"IconItem | null"},defaultValue:{func:!1,value:"ICONS.FA_CALENDAR_DAY"}},{name:"isIconHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"errorMessage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"state",type:{name:"DatePickerStates"},defaultValue:{func:!1,value:"DATE_PICKER_STATES.DEFAULT"}},{name:"color",type:{name:"DatePickerColors"},defaultValue:{func:!1,value:"DATE_PICKER_COLORS.NEUTRAL_WEAK"}},{name:"calendarPosition",type:{name:"DatePickerCalendarPositions"},defaultValue:{func:!1,value:"DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT"}},{name:"disableDates",type:{name:"Array<Date>"},defaultValue:{func:!0,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"}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DatePicker/DatePicker.vue"]};export{Te as D,R as a,d as b,u as c,E as d,ae as e,ne as f,se as i,H as l};