@bethinkpl/design-system 26.14.4 → 26.14.6

package/docs/assets/{DatePicker-D0XaBW1a.js → DatePicker-DCnXj9B0.js}

@@ -1,2 +1,2 @@
 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 $,t as L,r as P,o as a,c as l,a as s,k as C,g as o,j as E,b as N,n as p,F as X,v as g,E as J,w as W,f as Q,x as F}from"./vue.esm-bundler-DmkhfO_9.js";import{c as x,d as ee,b as u}from"./Tile-CH8oOuWL.js";import{a as te,I,b as ae}from"./Icon-D0llnARZ.js";import{_ as Y}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as G}from"./iframe-BvVXUrhW.js";const c={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral",WARNING:"warning",DANGER:"danger"},A={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},f={TOP:"top",TOP_LEFT:"top-left",TOP_RIGHT:"top-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right"},U={BOX:"box",TILE:"tile"},H={[f.BOTTOM_LEFT]:"below left",[f.BOTTOM_RIGHT]:"below right",[f.BOTTOM]:"below",[f.TOP_LEFT]:"above left",[f.TOP_RIGHT]:"above right",[f.TOP]:"above"};function k(e){return e.toLocaleDateString("pl-PL",{dateStyle:void 0,timeStyle:void 0,weekday:"long"})}function ne(e){return e.toLocaleDateString("pl-PL",{dateStyle:"medium",timeStyle:void 0})}function j(e){return e.toLocaleDateString("pl-PL",{month:"short",day:"2-digit"})}const M=e=>e.charAt(0).toUpperCase()+e.slice(1),Z=$({name:"DateBox",components:{DsIcon:te},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(L(e))},endIcon:{type:Object,default:null,validate:e=>e===null||Object.values(I).includes(L(e))},areIconsHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:A.DEFAULT},color:{type:String,default:c.NEUTRAL_WEAK},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(I),ICON_SIZES:Object.freeze(ae),DATE_PICKER_STATES:Object.freeze(A),DATE_PICKER_COLORS:Object.freeze(c)}},computed:{startDateText(){return this.startDate?j(this.startDate):this.placeholder},endDateIfDifferentThanStartDate(){return this.startDate&&this.endDate&&this.startDate.toDateString()!==this.endDate.toDateString()?this.endDate:null},endDateText(){return j(this.endDateIfDifferentThanStartDate)},startDateEyebrowText(){return this.startDate?M(k(this.startDate)):""},endDateEyebrowText(){return this.endDateIfDifferentThanStartDate?M(k(this.endDateIfDifferentThanStartDate)):""}}}),se={key:0,class:"ds-dateBox__loader"},le={class:"ds-dateBox__dateWrapper"},oe={key:0,class:"ds-dateBox__eyebrow"},ie={class:"ds-dateBox__date"},re={class:"ds-dateBox__dateText"},de={key:0,class:"ds-dateBox__loader"},ue={class:"ds-dateBox__dateWrapper"},ce={key:0,class:"ds-dateBox__eyebrow"},fe={class:"ds-dateBox__date"},De={class:"ds-dateBox__dateText"};function Te(e,D,_,T,m,t){const n=P("ds-icon");return a(),l("div",{class:p(["ds-dateBox",{"-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}])},[s("div",{class:p(["ds-dateBox__widthWrapper",{"-ds-has-icon":e.startIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",se,[C(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):o("",!0),s("div",le,[e.startDateEyebrowText?(a(),l("span",oe,E(e.startDateEyebrowText),1)):o("",!0),s("div",ie,[e.startIcon?(a(),N(n,{key:0,class:p(["ds-dateBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.startIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):o("",!0),s("span",re,E(e.startDateText),1)])])],2),e.startDate&&e.endDateIfDifferentThanStartDate?(a(),l(X,{key:0},[D[0]||(D[0]=s("span",{class:"ds-dateBox__separator"},"–",-1)),s("div",{class:p(["ds-dateBox__widthWrapper -ds-justify-to-end",{"-ds-has-icon":e.endIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",de,[C(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):o("",!0),s("div",ue,[e.endDateEyebrowText?(a(),l("span",ce,E(e.endDateEyebrowText),1)):o("",!0),s("div",fe,[e.endIcon?(a(),N(n,{key:0,class:p(["ds-dateBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.endIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):o("",!0),s("span",De,E(e.endDateText),1)])])],2)],64)):o("",!0)],2)}const pe=Y(Z,[["render",Te],["__scopeId","data-v-0e144c0e"]]);Z.__docgenInfo={displayName:"DateBox",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:"isOpen",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateBox/DateBox.vue"]};let v=null,z;function Ee({props:e,onChange:D,onClose:_,defaultDates:T,mode:m="single"}){let t=null;const n=g(!1),r=d=>{t==null||t.setDate(d,!1),t==null||t.updateValue(!1),t==null||t.jumpToDate(Array.isArray(d)?d[0]:d,!1)},R=async(d,h,S)=>{var B,w,K,V;if(!t){if(!v)try{v=(await G(async()=>{const{default:i}=await import("./index-CBmJdl9t.js");return{default:i}},[],import.meta.url)).default,z=(await G(async()=>{const{Polish:i}=await import("./pl-Cy1N1vsP.js").then(b=>b.p);return{Polish:i}},__vite__mapDeps([0,1]),import.meta.url)).Polish}catch(i){console.error("Failed to load flatpickr",i);return}if(t=v(d,{mode:m,locale:z,disableMobile:!0,positionElement:h,ignoredFocusElements:[h],position:H[e.calendarPosition],defaultDate:T,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate,onClose:[()=>{n.value=!1,setTimeout(()=>{_()})}],onOpen:[()=>{n.value=!0}],onChange:D}),S){const i=document.querySelector(S),b=()=>{t==null||t._positionCalendar()};i&&((w=(B=t==null?void 0:t.config)==null?void 0:B.onOpen)==null||w.push(()=>{i.addEventListener("scroll",b,{passive:!0})}),(V=(K=t==null?void 0:t.config)==null?void 0:K.onClose)==null||V.push(()=>{i.removeEventListener("scroll",b)}))}return t}},y=()=>{t==null||t.destroy(),t=null};J(()=>{y()}),W([()=>e.calendarPosition,()=>e.minDate,()=>e.maxDate,()=>e.disableDates,()=>T],()=>{t==null||t.set({position:H[e.calendarPosition],defaultDate:T,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate})},{flush:"post"}),W([()=>e.date,()=>e.startDate,()=>e.endDate],()=>{O()},{flush:"post"});const O=()=>{e.date?r(e.date):e.startDate&&e.endDate?r([e.startDate,e.endDate]):e.startDate&&!e.endDate?r(e.startDate):!e.startDate&&e.endDate?r(e.endDate):t==null||t.clear(!1)};return{datePicker:t,createDatePicker:R,destroyDatePicker:y,updateDatePicker:O,isOpen:n,toggle:()=>{t==null||t.toggle()}}}const q=$({name:"DatePicker",components:{DsTile:x,DateBox:pe},props:{triggerType:{type:String,default:U.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(L(e))}},isIconHiddenOnMobile:{type:Boolean,default:!1},errorMessage:{type:String,default:null},state:{type:String,default:A.DEFAULT},color:{type:String,default:c.NEUTRAL_WEAK},calendarPosition:{type:String,default:f.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:D}){var h;const _=g(null),T=g(),m=g(),t=S=>{D("update:date",S[0])},n=()=>{O(),_.value=null},{isOpen:r,toggle:R,createDatePicker:y,destroyDatePicker:O,updateDatePicker:d}=Ee({props:e,onChange:t,onClose:n,defaultDates:(h=e.date)!=null?h:new Date,mode:"single"});return{flatpickrInstance:_,flatpickrInputRef:T,datePickerRef:m,isOpen:r,toggleDatePicker:R,updateDatePicker:d,createDatePicker:y,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(f),DATE_PICKER_COLORS:Object.freeze(c),DATE_PICKER_STATES:Object.freeze(A),DATE_PICKER_TRIGGER_TYPES:Object.freeze(U),TILE_ADDITIONAL_TEXT_MAX_WIDTHS:Object.freeze(ee)}},computed:{borderColor(){return{[c.NEUTRAL]:this.isInteractive?u.PRIMARY:u.NEUTRAL_WEAK,[c.NEUTRAL_WEAK]:this.isInteractive?u.PRIMARY:u.NEUTRAL_WEAK,[c.DANGER]:this.isInteractive?u.DANGER:u.DANGER_WEAK,[c.WARNING]:this.isInteractive?u.WARNING:u.WARNING_WEAK}[this.color]},eyebrowText(){return this.date?M(k(this.date)):""},text(){return this.date?ne(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},tileState(){return this.state},tileColor(){return this.color}},methods:{async bindFlatpickrInstance(){this.flatpickrInstance=await this.createDatePicker(this.flatpickrInputRef,this.datePickerRef,this.updatePositionBasedOnScrollableSelector),this.updateDatePicker()},async toggle(){this.isInteractive&&this.state===A.DEFAULT&&(this.flatpickrInstance||await this.bindFlatpickrInstance(),this.toggleDatePicker())}}}),_e={class:"ds-datePicker__labelWrapper"},Ie={key:2,class:"ds-datePicker__errorMessage"},me={key:3,class:"ds-datePicker__helpMessage"},he={ref:"flatpickrInputRef",class:"ds-datePicker__hiddenInput"};function Ae(e,D,_,T,m,t){const n=P("ds-tile"),r=P("date-box");return a(),l("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(),l(X,{key:0},[s("div",_e,[e.label?(a(),l("span",{key:0,class:p(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},E(e.label),3)):o("",!0),e.$slots.default?Q(e.$slots,"default",{key:1},void 0,!0):o("",!0)]),C(n,{class:"ds-datePicker__tile",text:e.text,interactive:e.isInteractive,"additional-text":e.additionalText,color:e.tileColor,"border-color":e.borderColor,state:e.tileState,"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:F(e.toggle,["stop","prevent"])},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(),N(r,{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,"is-open":e.isOpen,onClick:F(e.toggle,["stop","prevent"])},null,8,["is-interactive","placeholder","start-date","start-icon","are-icons-hidden-on-mobile","state","color","is-open","onClick"])),e.showErrorMessage?(a(),l("span",Ie,E(e.errorMessage),1)):e.showHelpMessage?(a(),l("span",me,E(e.helpMessage),1)):o("",!0),s("input",he,null,512)],2)}const Re=Y(q,[["render",Ae],["__scopeId","data-v-337a8b07"]]);q.__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{pe as D,A as a,c as b,Re as c,U as d,f as e,Ee as i};
+import{d as $,t as L,r as P,o as a,c as l,a as s,k as C,g as i,j as E,b as N,n as p,F as X,v as g,E as J,w as W,f as Q,x as F}from"./vue.esm-bundler-DmkhfO_9.js";import{c as x,d as ee,b as u}from"./Tile-CH8oOuWL.js";import{a as te,I,b as ae}from"./Icon-D0llnARZ.js";import{_ as Y}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as G}from"./iframe-CJskIN9Y.js";const c={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral",WARNING:"warning",DANGER:"danger"},A={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},f={TOP:"top",TOP_LEFT:"top-left",TOP_RIGHT:"top-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right"},H={BOX:"box",TILE:"tile"},U={[f.BOTTOM_LEFT]:"below left",[f.BOTTOM_RIGHT]:"below right",[f.BOTTOM]:"below",[f.TOP_LEFT]:"above left",[f.TOP_RIGHT]:"above right",[f.TOP]:"above"};function k(e){return e.toLocaleDateString("pl-PL",{dateStyle:void 0,timeStyle:void 0,weekday:"long"})}function ne(e){return e.toLocaleDateString("pl-PL",{dateStyle:"medium",timeStyle:void 0})}function j(e){return e.toLocaleDateString("pl-PL",{month:"short",day:"2-digit"})}const M=e=>e.charAt(0).toUpperCase()+e.slice(1),Z=$({name:"DateBox",components:{DsIcon:te},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(L(e))},endIcon:{type:Object,default:null,validate:e=>e===null||Object.values(I).includes(L(e))},areIconsHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:A.DEFAULT},color:{type:String,default:c.NEUTRAL_WEAK},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(I),ICON_SIZES:Object.freeze(ae),DATE_PICKER_STATES:Object.freeze(A),DATE_PICKER_COLORS:Object.freeze(c)}},computed:{startDateText(){return this.startDate?j(this.startDate):this.placeholder},endDateIfDifferentThanStartDate(){return this.startDate&&this.endDate&&this.startDate.toDateString()!==this.endDate.toDateString()?this.endDate:null},endDateText(){return j(this.endDateIfDifferentThanStartDate)},startDateEyebrowText(){return this.startDate?M(k(this.startDate)):""},endDateEyebrowText(){return this.endDateIfDifferentThanStartDate?M(k(this.endDateIfDifferentThanStartDate)):""}}}),se={key:0,class:"ds-dateBox__loader"},le={class:"ds-dateBox__dateWrapper"},ie={key:0,class:"ds-dateBox__eyebrow"},oe={class:"ds-dateBox__date"},re={class:"ds-dateBox__dateText"},de={key:0,class:"ds-dateBox__loader"},ue={class:"ds-dateBox__dateWrapper"},ce={key:0,class:"ds-dateBox__eyebrow"},fe={class:"ds-dateBox__date"},De={class:"ds-dateBox__dateText"};function Te(e,D,_,T,m,t){const n=P("ds-icon");return a(),l("div",{class:p(["ds-dateBox",{"-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}])},[s("div",{class:p(["ds-dateBox__widthWrapper",{"-ds-has-icon":e.startIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",se,[C(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):i("",!0),s("div",le,[e.startDateEyebrowText?(a(),l("span",ie,E(e.startDateEyebrowText),1)):i("",!0),s("div",oe,[e.startIcon?(a(),N(n,{key:0,class:p(["ds-dateBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.startIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):i("",!0),s("span",re,E(e.startDateText),1)])])],2),e.startDate&&e.endDateIfDifferentThanStartDate?(a(),l(X,{key:0},[D[0]||(D[0]=s("span",{class:"ds-dateBox__separator"},"–",-1)),s("div",{class:p(["ds-dateBox__widthWrapper -ds-justify-to-end",{"-ds-has-icon":e.endIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",de,[C(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):i("",!0),s("div",ue,[e.endDateEyebrowText?(a(),l("span",ce,E(e.endDateEyebrowText),1)):i("",!0),s("div",fe,[e.endIcon?(a(),N(n,{key:0,class:p(["ds-dateBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.endIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):i("",!0),s("span",De,E(e.endDateText),1)])])],2)],64)):i("",!0)],2)}const pe=Y(Z,[["render",Te],["__scopeId","data-v-0e144c0e"]]);Z.__docgenInfo={displayName:"DateBox",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:"isOpen",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateBox/DateBox.vue"]};let v=null,z;function Ee({props:e,onChange:D,onClose:_,defaultDates:T,mode:m="single"}){let t=null;const n=g(!1),r=d=>{t==null||t.setDate(d,!1),t==null||t.updateValue(!1),t==null||t.jumpToDate(Array.isArray(d)?d[0]:d,!1)},R=async(d,h,S)=>{var B,w,K,V;if(!t){if(!v)try{v=(await G(async()=>{const{default:o}=await import("./index-CBmJdl9t.js");return{default:o}},[],import.meta.url)).default,z=(await G(async()=>{const{Polish:o}=await import("./pl-Cy1N1vsP.js").then(b=>b.p);return{Polish:o}},__vite__mapDeps([0,1]),import.meta.url)).Polish}catch(o){console.error("Failed to load flatpickr",o);return}if(t=v(d,{mode:m,locale:z,disableMobile:!0,positionElement:h,ignoredFocusElements:[h],position:U[e.calendarPosition],defaultDate:T,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate,onClose:[()=>{n.value=!1,setTimeout(()=>{_()})}],onOpen:[()=>{n.value=!0}],onChange:D}),S){const o=document.querySelector(S),b=()=>{t==null||t._positionCalendar()};o&&((w=(B=t==null?void 0:t.config)==null?void 0:B.onOpen)==null||w.push(()=>{o.addEventListener("scroll",b,{passive:!0})}),(V=(K=t==null?void 0:t.config)==null?void 0:K.onClose)==null||V.push(()=>{o.removeEventListener("scroll",b)}))}return t}},y=()=>{t==null||t.destroy(),t=null};J(()=>{y()}),W([()=>e.calendarPosition,()=>e.minDate,()=>e.maxDate,()=>e.disableDates,()=>T],()=>{t==null||t.set({position:U[e.calendarPosition],defaultDate:T,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate})},{flush:"post"}),W([()=>e.date,()=>e.startDate,()=>e.endDate],()=>{O()},{flush:"post"});const O=()=>{e.date?r(e.date):e.startDate&&e.endDate?r([e.startDate,e.endDate]):e.startDate&&!e.endDate?r(e.startDate):!e.startDate&&e.endDate?r(e.endDate):t==null||t.clear(!1)};return{datePicker:t,createDatePicker:R,destroyDatePicker:y,updateDatePicker:O,isOpen:n,toggle:()=>{t==null||t.toggle()}}}const q=$({name:"DatePicker",components:{DsTile:x,DateBox:pe},props:{triggerType:{type:String,default:H.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(L(e))}},isIconHiddenOnMobile:{type:Boolean,default:!1},errorMessage:{type:String,default:null},state:{type:String,default:A.DEFAULT},color:{type:String,default:c.NEUTRAL_WEAK},calendarPosition:{type:String,default:f.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:D}){var h;const _=g(null),T=g(),m=g(),t=S=>{D("update:date",S[0])},n=()=>{O(),_.value=null},{isOpen:r,toggle:R,createDatePicker:y,destroyDatePicker:O,updateDatePicker:d}=Ee({props:e,onChange:t,onClose:n,defaultDates:(h=e.date)!=null?h:new Date,mode:"single"});return{flatpickrInstance:_,flatpickrInputRef:T,datePickerRef:m,isOpen:r,toggleDatePicker:R,updateDatePicker:d,createDatePicker:y,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(f),DATE_PICKER_COLORS:Object.freeze(c),DATE_PICKER_STATES:Object.freeze(A),DATE_PICKER_TRIGGER_TYPES:Object.freeze(H),TILE_ADDITIONAL_TEXT_MAX_WIDTHS:Object.freeze(ee)}},computed:{borderColor(){return{[c.NEUTRAL]:this.isInteractive?u.PRIMARY:u.NEUTRAL_WEAK,[c.NEUTRAL_WEAK]:this.isInteractive?u.PRIMARY:u.NEUTRAL_WEAK,[c.DANGER]:this.isInteractive?u.DANGER:u.DANGER_WEAK,[c.WARNING]:this.isInteractive?u.WARNING:u.WARNING_WEAK}[this.color]},eyebrowText(){return this.date?M(k(this.date)):""},text(){return this.date?ne(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},tileState(){return this.state},tileColor(){return this.color}},watch:{minDate:{immediate:!0,handler(e){this.date&&e&&new Date(this.date).setHours(0,0,0,0)<new Date(e).setHours(0,0,0,0)&&this.$emit("update:date",null)}},maxDate:{immediate:!0,handler(e){this.date&&e&&new Date(this.date).setHours(0,0,0,0)>new Date(e).setHours(0,0,0,0)&&this.$emit("update:date",null)}}},methods:{async bindFlatpickrInstance(){this.flatpickrInstance=await this.createDatePicker(this.flatpickrInputRef,this.datePickerRef,this.updatePositionBasedOnScrollableSelector),this.updateDatePicker()},async toggle(){this.isInteractive&&this.state===A.DEFAULT&&(this.flatpickrInstance||await this.bindFlatpickrInstance(),this.toggleDatePicker())}}}),_e={class:"ds-datePicker__labelWrapper"},Ie={key:2,class:"ds-datePicker__errorMessage"},me={key:3,class:"ds-datePicker__helpMessage"},he={ref:"flatpickrInputRef",class:"ds-datePicker__hiddenInput"};function Ae(e,D,_,T,m,t){const n=P("ds-tile"),r=P("date-box");return a(),l("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(),l(X,{key:0},[s("div",_e,[e.label?(a(),l("span",{key:0,class:p(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},E(e.label),3)):i("",!0),e.$slots.default?Q(e.$slots,"default",{key:1},void 0,!0):i("",!0)]),C(n,{class:"ds-datePicker__tile",text:e.text,interactive:e.isInteractive,"additional-text":e.additionalText,color:e.tileColor,"border-color":e.borderColor,state:e.tileState,"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:F(e.toggle,["stop","prevent"])},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(),N(r,{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,"is-open":e.isOpen,onClick:F(e.toggle,["stop","prevent"])},null,8,["is-interactive","placeholder","start-date","start-icon","are-icons-hidden-on-mobile","state","color","is-open","onClick"])),e.showErrorMessage?(a(),l("span",Ie,E(e.errorMessage),1)):e.showHelpMessage?(a(),l("span",me,E(e.helpMessage),1)):i("",!0),s("input",he,null,512)],2)}const Re=Y(q,[["render",Ae],["__scopeId","data-v-5c2afb8f"]]);q.__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",type:{names:["undefined"]}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DatePicker/DatePicker.vue"]};export{pe as D,A as a,c as b,Re as c,H as d,f as e,Ee as i};

package/docs/assets/{DatePicker.stories-BQG31hVQ.js → DatePicker.stories-B2oP8EDp.js}

@@ -1,4 +1,4 @@
-import{I as p}from"./Icon-D0llnARZ.js";import{D as x}from"./Switch-D_N0-PMC.js";import{c as D,d as m,b as u,e as g,a as h}from"./DatePicker-D0XaBW1a.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-CH8oOuWL.js";import"./iframe-BvVXUrhW.js";import"../sb-preview/runtime.js";const{useArgs:I}=__STORYBOOK_MODULE_PREVIEW_API__,N={title:"Components/DatePickers/DatePicker",component:D},b=S=>{const[M,w]=I();return{components:{DatePicker:D,DsSwitch:x},setup(){return S},data(){return{ICONS:Object.freeze(p)}},methods:{updateDate(a){a&&w({date:`${a.getFullYear()}-${a.getMonth()+1}-${a.getDate()}`})}},computed:{formattedDate(){return!this.date||this.date===""?null:new Date(this.date)},formattedMinDate(){return!this.minDate||this.minDate==""?null:new Date(this.minDate)},formattedMaxDate(){return!this.maxDate||this.maxDate==""?null:new Date(this.maxDate)},formattedDisableDates(){return!this.disableDates||!this.disableDates.length?null:this.disableDates.map(a=>new Date(a))}},template:`
+import{I as D}from"./Icon-D0llnARZ.js";import{D as x}from"./Switch-D_N0-PMC.js";import{c as m,d as u,b as g,e as h,a as b}from"./DatePicker-DCnXj9B0.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-CH8oOuWL.js";import"./iframe-CJskIN9Y.js";import"../sb-preview/runtime.js";const{useArgs:I}=__STORYBOOK_MODULE_PREVIEW_API__,N={title:"Components/DatePickers/DatePicker",component:m},f=w=>{const[M,r]=I();return{components:{DatePicker:m,DsSwitch:x},setup(){return w},data(){return{ICONS:Object.freeze(D)}},methods:{updateDate(a){r(a?{date:`${a.getFullYear()}-${a.getMonth()+1}-${a.getDate()}`}:{date:null})}},computed:{formattedDate(){return!this.date||this.date===""?null:new Date(this.date)},formattedMinDate(){return!this.minDate||this.minDate==""?null:new Date(this.minDate)},formattedMaxDate(){return!this.maxDate||this.maxDate==""?null:new Date(this.maxDate)},formattedDisableDates(){return!this.disableDates||!this.disableDates.length?null:this.disableDates.map(a=>new Date(a))}},template:`
             <date-picker
                 :trigger-type="triggerType"
                 :is-interactive="isInteractive"
@@ -21,12 +21,12 @@ import{I as p}from"./Icon-D0llnARZ.js";import{D as x}from"./Switch-D_N0-PMC.js";
                 @update:date="updateDate"
             >
                 <ds-switch label-left="lewa" label-right="prawa" />
-            </date-picker>`}},t=b.bind({}),n=Date.now(),r=864e5,f={triggerType:m.TILE,isInteractive:!0,color:u.NEUTRAL_WEAK,label:"Date picker",isLabelUppercase:!1,placeholder:"Wybierz datę",date:"",disableDates:[new Date(n+r*2).toISOString().slice(0,10)],minDate:new Date(n).toISOString().slice(0,10),maxDate:new Date(n+r*30).toISOString().slice(0,10),icon:"FA_CALENDAR_DAYS",isIconHiddenOnMobile:!1,additionalText:"",helpMessage:null,errorMessage:null,calendarPosition:g.BOTTOM,state:h.DEFAULT},O={triggerType:{control:"select",options:Object.values(m)},date:{control:"text"},minDate:{control:"text"},maxDate:{control:"text"},icon:{control:"select",options:[null,...Object.keys(p)]},calendarPosition:{control:"select",options:Object.values(g)},state:{control:"select",options:Object.values(h)},color:{control:"select",options:Object.values(u)},disableDates:{control:"object"}};t.argTypes=O;t.args=f;t.parameters={design:{type:"figma",url:"https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4"}};const e=b.bind({});e.decorators=[()=>({template:`
+            </date-picker>`}},t=f.bind({}),n=Date.now(),s=864e5,O={triggerType:u.TILE,isInteractive:!0,color:g.NEUTRAL_WEAK,label:"Date picker",isLabelUppercase:!1,placeholder:"Wybierz datę",date:"",disableDates:[new Date(n+s*2).toISOString().slice(0,10)],minDate:new Date(n).toISOString().slice(0,10),maxDate:new Date(n+s*30).toISOString().slice(0,10),icon:"FA_CALENDAR_DAYS",isIconHiddenOnMobile:!1,additionalText:"",helpMessage:null,errorMessage:null,calendarPosition:h.BOTTOM,state:b.DEFAULT},S={triggerType:{control:"select",options:Object.values(u)},date:{control:"text"},minDate:{control:"text"},maxDate:{control:"text"},icon:{control:"select",options:[null,...Object.keys(D)]},calendarPosition:{control:"select",options:Object.values(h)},state:{control:"select",options:Object.values(b)},color:{control:"select",options:Object.values(g)},disableDates:{control:"object"}};t.argTypes=S;t.args=O;t.parameters={design:{type:"figma",url:"https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4"}};const e=f.bind({});e.decorators=[()=>({template:`
             <div style="height: 500px; overflow-y: scroll;" class="scrollable-container">
                 <div style="height: 1500px; padding: 6px;">
                     <story />
                 </div>
-            </div>`})];e.argTypes=O;e.args={...f,updatePositionBasedOnScrollableSelector:".scrollable-container"};e.parameters={design:{type:"figma",url:"https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4"}};var s,i,o;t.parameters={...t.parameters,docs:{...(s=t.parameters)==null?void 0:s.docs,source:{originalSource:`args => {
+            </div>`})];e.argTypes=S;e.args={...O,updatePositionBasedOnScrollableSelector:".scrollable-container"};e.parameters={design:{type:"figma",url:"https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4"}};var i,l,o;t.parameters={...t.parameters,docs:{...(i=t.parameters)==null?void 0:i.docs,source:{originalSource:`args => {
   const [_, updateArgs] = useArgs();
   return {
     components: {
@@ -47,6 +47,10 @@ import{I as p}from"./Icon-D0llnARZ.js";import{D as x}from"./Switch-D_N0-PMC.js";
           updateArgs({
             date: \`\${date.getFullYear()}-\${date.getMonth() + 1}-\${date.getDate()}\`
           });
+        } else {
+          updateArgs({
+            date: null
+          });
         }
       }
     },
@@ -101,7 +105,7 @@ import{I as p}from"./Icon-D0llnARZ.js";import{D as x}from"./Switch-D_N0-PMC.js";
                 <ds-switch label-left="lewa" label-right="prawa" />
             </date-picker>\`
   };
-}`,...(o=(i=t.parameters)==null?void 0:i.docs)==null?void 0:o.source}}};var l,d,c;e.parameters={...e.parameters,docs:{...(l=e.parameters)==null?void 0:l.docs,source:{originalSource:`args => {
+}`,...(o=(l=t.parameters)==null?void 0:l.docs)==null?void 0:o.source}}};var d,c,p;e.parameters={...e.parameters,docs:{...(d=e.parameters)==null?void 0:d.docs,source:{originalSource:`args => {
   const [_, updateArgs] = useArgs();
   return {
     components: {
@@ -122,6 +126,10 @@ import{I as p}from"./Icon-D0llnARZ.js";import{D as x}from"./Switch-D_N0-PMC.js";
           updateArgs({
             date: \`\${date.getFullYear()}-\${date.getMonth() + 1}-\${date.getDate()}\`
           });
+        } else {
+          updateArgs({
+            date: null
+          });
         }
       }
     },
@@ -176,4 +184,4 @@ import{I as p}from"./Icon-D0llnARZ.js";import{D as x}from"./Switch-D_N0-PMC.js";
                 <ds-switch label-left="lewa" label-right="prawa" />
             </date-picker>\`
   };
-}`,...(c=(d=e.parameters)==null?void 0:d.docs)==null?void 0:c.source}}};const k=["Interactive","ScrollableContainer"];export{t as Interactive,e as ScrollableContainer,k as __namedExportsOrder,N as default};
+}`,...(p=(c=e.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};const k=["Interactive","ScrollableContainer"];export{t as Interactive,e as ScrollableContainer,k as __namedExportsOrder,N as default};

package/docs/assets/DateRangePicker-pseoBrgs.js

@@ -0,0 +1 @@
+import{d as R,t as f,v as s,r as y,o as p,c as D,k,x as h,j as T,g as O,a as S}from"./vue.esm-bundler-DmkhfO_9.js";import{I as a}from"./Icon-D0llnARZ.js";import{D as C,e as m,a as r,b as _,i as v,d as b}from"./DatePicker-DCnXj9B0.js";import{_ as N}from"./_plugin-vue_export-helper-DlAUqK2U.js";const I=R({name:"DateRangePicker",components:{DateBox:C},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(f(e)))}},endIcon:{type:[Object,null],default:a.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(a).includes(f(e)))}},areIconsHiddenOnMobile:{type:Boolean,default:!1},calendarPosition:{type:String,default:m.BOTTOM_LEFT},errorMessage:{type:String,default:""},state:{type:String||null,default:r.DEFAULT},color:{type:String,default:_.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 t=s(null),o=s(),d=s(),u=l=>{l.length===2&&i("update:date",{startDate:l[0],endDate:l[1]})},n=()=>{c(),t.value=null},{isOpen:E,toggle:g,createDatePicker:A,destroyDatePicker:c,updateDatePicker:P}=v({props:e,onChange:u,onClose:n,defaultDates:[e.startDate,e.endDate],mode:"range"});return{flatpickrInstance:t,dateRangePickerRef:o,flatpickrInputRef:d,isOpen:E,toggleDatePicker:g,createDatePicker:A,destroyDatePicker:c,updateDatePicker:P,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(m),DATE_PICKER_COLORS:Object.freeze(_),DATE_PICKER_STATES:Object.freeze(r),DATE_PICKER_TRIGGER_TYPES:Object.freeze(b)}},watch:{minDate:{immediate:!0,handler(e){this.startDate&&e&&new Date(this.startDate).setHours(0,0,0,0)<new Date(e).setHours(0,0,0,0)&&this.$emit("update:date",{startDate:null,endDate:null})}},maxDate:{immediate:!0,handler(e){this.endDate&&e&&new Date(this.endDate).setHours(0,0,0,0)>new Date(e).setHours(0,0,0,0)&&this.$emit("update:date",{startDate:null,endDate:null})}}},methods:{async bindFlatpickrInstance(){this.flatpickrInstance=await this.createDatePicker(this.flatpickrInputRef,this.dateRangePickerRef,this.updatePositionBasedOnScrollableSelector),this.updateDatePicker()},async toggle(){this.isInteractive&&this.state===r.DEFAULT&&(this.flatpickrInstance||await this.bindFlatpickrInstance(),this.toggleDatePicker())}}}),V={ref:"dateRangePickerRef",class:"ds-dateRangePicker"},L={key:0,class:"ds-dateRangePicker__errorMessage"},F={ref:"flatpickrInputRef",class:"ds-dateRangePicker__hiddenInput"};function K(e,i,t,o,d,u){const n=y("date-box");return p(),D("div",V,[k(n,{"is-interactive":e.isInteractive,placeholder:e.placeholder,"start-date":e.startDate,"end-date":e.endDate,"start-icon":e.startIcon,"end-icon":e.endIcon,"are-icons-hidden-on-mobile":e.areIconsHiddenOnMobile,state:e.state,color:e.color,"is-open":e.isOpen,onClick:h(e.toggle,["stop","prevent"])},null,8,["is-interactive","placeholder","start-date","end-date","start-icon","end-icon","are-icons-hidden-on-mobile","state","color","is-open","onClick"]),e.errorMessage?(p(),D("span",L,T(e.errorMessage),1)):O("",!0),S("input",F,null,512)],512)}const H=N(I,[["render",K],["__scopeId","data-v-3c0d5e1c"]]);I.__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",type:{names:["undefined"]}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue"]};export{H as D};

package/docs/assets/{DateRangePicker.stories-CEnBjdrE.js → DateRangePicker.stories-C-xk_e9Q.js}

@@ -1,4 +1,4 @@
-import{I as r}from"./Icon-D0llnARZ.js";import{e as m,a as I,b as s}from"./DatePicker-D0XaBW1a.js";import{D as i}from"./DateRangePicker-BKwZTPvV.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-CH8oOuWL.js";import"./iframe-BvVXUrhW.js";import"../sb-preview/runtime.js";const{useArgs:u}=__STORYBOOK_MODULE_PREVIEW_API__,b={title:"Components/DatePickers/DateRangePicker",component:i,render:n=>{const[A,p]=u();return{components:{DateRangePicker:i},setup(){return n},data(){return{ICONS:Object.freeze(r)}},methods:{updateDate({startDate:e,endDate:t}){p({startDate:e?`${e.getFullYear()}-${e.getMonth()+1}-${e.getDate()}`:null,endDate:t?`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`:null})}},computed:{formattedStartDate(){return this.startDate?new Date(this.startDate):null},formattedEndDate(){return this.endDate?new Date(this.endDate):null},formattedMinDate(){return this.minDate?new Date(this.minDate):null},formattedMaxDate(){return this.maxDate?new Date(this.maxDate):null},formattedDisableDates(){return!this.disableDates||!this.disableDates.length?[]:this.disableDates.map(e=>new Date(e))}},template:`
+import{I as r}from"./Icon-D0llnARZ.js";import{e as m,a as I,b as s}from"./DatePicker-DCnXj9B0.js";import{D as i}from"./DateRangePicker-pseoBrgs.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-CH8oOuWL.js";import"./iframe-CJskIN9Y.js";import"../sb-preview/runtime.js";const{useArgs:u}=__STORYBOOK_MODULE_PREVIEW_API__,b={title:"Components/DatePickers/DateRangePicker",component:i,render:n=>{const[A,p]=u();return{components:{DateRangePicker:i},setup(){return n},data(){return{ICONS:Object.freeze(r)}},methods:{updateDate({startDate:e,endDate:t}){p({startDate:e?`${e.getFullYear()}-${e.getMonth()+1}-${e.getDate()}`:null,endDate:t?`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`:null})}},computed:{formattedStartDate(){return this.startDate?new Date(this.startDate):null},formattedEndDate(){return this.endDate?new Date(this.endDate):null},formattedMinDate(){return this.minDate?new Date(this.minDate):null},formattedMaxDate(){return this.maxDate?new Date(this.maxDate):null},formattedDisableDates(){return!this.disableDates||!this.disableDates.length?[]:this.disableDates.map(e=>new Date(e))}},template:`
                 <div style="display: flex">
                     <date-range-picker
                         :is-interactive="isInteractive"