@bethinkpl/design-system 26.7.1 → 26.8.1

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

@@ -35,7 +35,7 @@
 				@click="toggle"
 			/>
 		</template>
-		<date-picker-box
+		<date-box
 			v-else
 			:is-interactive="isInteractive"
 			:placeholder="placeholder"
@@ -44,7 +44,6 @@
 			:are-icons-hidden-on-mobile="isIconHiddenOnMobile"
 			:state="state"
 			:color="color"
-			:start-date-eyebrow-text="eyebrowText"
 			:is-open="isOpen"
 			@click="toggle"
 		/>
@@ -143,7 +142,7 @@ import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
 
 import DsTile, { TILE_ADDITIONAL_TEXT_MAX_WIDTHS, TILE_BORDER_COLORS } from '../../Tile';
 import { IconItem, ICONS } from '../../Icons/Icon';
-import DatePickerBox from '../DatePickerBox';
+import DateBox from '../DateBox';
 
 import {
 	DATE_PICKER_CALENDAR_POSITIONS,
@@ -166,7 +165,7 @@ export default defineComponent({
 	name: 'DatePicker',
 	components: {
 		DsTile,
-		DatePickerBox,
+		DateBox,
 	},
 	props: {
 		triggerType: {

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

@@ -1,17 +1,15 @@
 <template>
 	<div ref="dateRangePickerRef" class="ds-dateRangePicker">
-		<date-picker-box
+		<date-box
 			:is-interactive="isInteractive"
 			:placeholder="placeholder"
 			:start-date="startDate"
-			:end-date="endDateIfDifferentThanStartDate"
+			:end-date="endDate"
 			: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"
 		/>
@@ -50,7 +48,7 @@
 </style>
 
 <script lang="ts">
-import DatePickerBox from '../DatePickerBox/DatePickerBox.vue';
+import DateBox from '../DateBox';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
 import {
@@ -69,7 +67,7 @@ import { localWeekdayName } from '../../../../../tools/importers/helpers/dates';
 export default defineComponent({
 	name: 'DateRangePicker',
 	components: {
-		DatePickerBox,
+		DateBox,
 	},
 	props: {
 		isInteractive: {
@@ -197,31 +195,6 @@ export default defineComponent({
 			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(

package/lib/js/icons/fontawesome.ts

@@ -115,6 +115,7 @@ import { faPenCircle } from '@fortawesome/pro-regular-svg-icons/faPenCircle';
 import { faPenField } from '@fortawesome/pro-regular-svg-icons/faPenField';
 import { faPlay } from '@fortawesome/pro-regular-svg-icons/faPlay';
 import { faPlus } from '@fortawesome/pro-regular-svg-icons/faPlus';
+import { faPresentationScreen } from '@fortawesome/pro-regular-svg-icons/faPresentationScreen';
 import { faPrint } from '@fortawesome/pro-regular-svg-icons/faPrint';
 import { faRectangleCode } from '@fortawesome/pro-regular-svg-icons/faRectangleCode';
 import { faRectangleList } from '@fortawesome/pro-regular-svg-icons/faRectangleList';
@@ -194,6 +195,7 @@ import { faUserDoctor as fasUserDoctor } from '@fortawesome/pro-solid-svg-icons/
 import { faVideo as fasVideo } from '@fortawesome/pro-solid-svg-icons/faVideo';
 import { faVolumeHigh as fasVolumeHigh } from '@fortawesome/pro-solid-svg-icons/faVolumeHigh';
 import { faCircleDot as fasCircleDot } from '@fortawesome/pro-solid-svg-icons/faCircleDot';
+import { faFlagCheckered as fasFlagCheckered } from '@fortawesome/pro-solid-svg-icons/faFlagCheckered';
 
 import { faChevronLeft as falChevronLeft } from '@fortawesome/pro-light-svg-icons/faChevronLeft';
 import { faChevronRight as falChevronRight } from '@fortawesome/pro-light-svg-icons/faChevronRight';
@@ -305,6 +307,7 @@ export const FONTAWESOME_ICONS = {
 	FA_FILM: faFilm,
 	FA_FILTER: faFilter,
 	FA_FLAG: faFlag,
+	FA_FLAG_CHECKERED_SOLID: fasFlagCheckered,
 	FA_FLASK_SOLID: fasFlask,
 	FA_FLOPPY_DISK: faFloppyDisk,
 	FA_FOLDER_SOLID: fasFolder,
@@ -356,6 +359,7 @@ export const FONTAWESOME_ICONS = {
 	FA_PENCIL: faPencil,
 	FA_PLAY: faPlay,
 	FA_PLUS: faPlus,
+	FA_PRESENTATION_SCREEN: faPresentationScreen,
 	FA_PRINT: faPrint,
 	FA_RECTANGLE_CODE: faRectangleCode,
 	FA_RECTANGLE_LIST: faRectangleList,

package/lib/js/index.ts

@@ -16,6 +16,7 @@ export { default as Card } from './components/Cards/Card/';
 export { default as DsCard } from './components/Cards/Card/';
 export { default as CardExpandable } from './components/Cards/CardExpandable/';
 export { default as DsCardExpandable } from './components/Cards/CardExpandable/';
+export { default as DsDateBox } from './components/DatePickers/DateBox';
 export { default as DatePicker } from './components/DatePickers/DatePicker';
 export { default as DsDatePicker } from './components/DatePickers/DatePicker';
 export { default as DsDateRangePicker } from './components/DatePickers/DateRangePicker';

package/package.json

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

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

package/docs/assets/DateRangePicker-1oxiA7Lf.js

@@ -1 +0,0 @@
-import{e as A,c,d as t,b as f,i as g,a as T,f as D,l as p}from"./DatePicker-DIJ8aqM6.js";import{I as a}from"./Icon-KlrZhBvI.js";import{d as R,t as m,v as I,w as P,r as h,o as y,c as _,k as S,j as O,g as b,a as v}from"./vue.esm-bundler-DmkhfO_9.js";import{_ as k}from"./_plugin-vue_export-helper-DlAUqK2U.js";const E=R({name:"DateRangePicker",components:{DatePickerBox:A},props:{isInteractive:{type:Boolean,default:!1},placeholder:{type:String,default:"Wybierz datę"},startDate:{type:Date,default:null},endDate:{type:Date,default:null},startIcon:{type:[Object,null],default:a.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(a).includes(m(e)))}},endIcon:{type:[Object,null],default:a.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(a).includes(m(e)))}},areIconsHiddenOnMobile:{type:Boolean,default:!1},calendarPosition:{type:String,default:c.BOTTOM_LEFT},errorMessage:{type:String,default:""},state:{type:String||null,default:t.DEFAULT},color:{type:String,default:f.NEUTRAL_WEAK},disableDates:{type:Array,default:()=>[]},minDate:{type:Date,default:null},maxDate:{type:Date,default:null},updatePositionBasedOnScrollableSelector:{type:String,default:""}},emits:{"update:date":e=>!0},setup(e,{emit:i}){const n=I(),l=I(),o=r=>{r.length===2&&i("update:date",{startDate:r[0],endDate:r[1]})},{isOpen:d,toggle:s,createDatePicker:u}=g({props:e,onChange:o,defaultDates:[e.startDate,e.endDate],mode:"range"});return P([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===t.DEFAULT&&await u(l.value,n.value,e.updatePositionBasedOnScrollableSelector)},{flush:"post"}),{dateRangePickerRef:n,flatpickrInputRef:l,isOpen:d,toggleDatePicker:s,createDatePicker:u,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(c),DATE_PICKER_COLORS:Object.freeze(f),DATE_PICKER_STATES:Object.freeze(t),DATE_PICKER_TRIGGER_TYPES:Object.freeze(T)}},computed:{endDateEyebrowText(){return!this.endDate||this.state===t.LOADING?"":D(p(this.endDate))},endDateIfDifferentThanStartDate(){return this.startDate&&this.endDate&&this.startDate.getTime()!==this.endDate.getTime()?this.endDate:null},eyebrowText(){return!this.startDate||this.state===t.LOADING?"":D(p(this.startDate))}},async mounted(){this.isInteractive&&this.state===t.DEFAULT&&await this.createDatePicker(this.flatpickrInputRef,this.dateRangePickerRef,this.updatePositionBasedOnScrollableSelector)},methods:{toggle(){this.isInteractive&&this.state===t.DEFAULT&&this.toggleDatePicker()}}}),C={ref:"dateRangePickerRef",class:"ds-dateRangePicker"},N={key:0,class:"ds-dateRangePicker__errorMessage"},L={ref:"flatpickrInputRef",class:"ds-dateRangePicker__hiddenInput"};function V(e,i,n,l,o,d){const s=h("date-picker-box");return y(),_("div",C,[S(s,{"is-interactive":e.isInteractive,placeholder:e.placeholder,"start-date":e.startDate,"end-date":e.endDateIfDifferentThanStartDate,"start-icon":e.startIcon,"end-icon":e.endIcon,"are-icons-hidden-on-mobile":e.areIconsHiddenOnMobile,state:e.state,color:e.color,"start-date-eyebrow-text":e.eyebrowText,"end-date-eyebrow-text":e.endDateEyebrowText,"is-open":e.isOpen,onClick:e.toggle},null,8,["is-interactive","placeholder","start-date","end-date","start-icon","end-icon","are-icons-hidden-on-mobile","state","color","start-date-eyebrow-text","end-date-eyebrow-text","is-open","onClick"]),e.errorMessage?(y(),_("span",N,O(e.errorMessage),1)):b("",!0),v("input",L,null,512)],512)}const j=k(E,[["render",V],["__scopeId","data-v-937af447"]]);E.__docgenInfo={displayName:"DateRangePicker",exportName:"default",description:"",tags:{},props:[{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wybierz datę'"}},{name:"startDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"endDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"startIcon",type:{name:"IconItem | null"},defaultValue:{func:!1,value:"ICONS.FA_CALENDAR_DAY"}},{name:"endIcon",type:{name:"IconItem | null"},defaultValue:{func:!1,value:"ICONS.FA_CALENDAR_DAY"}},{name:"areIconsHiddenOnMobile",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_WEAK"}},{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"}},{name:"updatePositionBasedOnScrollableSelector",type:{name:"string"},defaultValue:{func:!1,value:"''"}}],events:[{name:"update:date"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue"]};export{j as D};

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

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