@bethinkpl/design-system 26.11.1 → 26.12.0

package/docs/assets/{DateBox.stories-DdmSt5SP.js → DateBox.stories-D5ffs0iR.js}

@@ -1,4 +1,4 @@
-import{I as n}from"./Icon-D72drrb6.js";import{D as a,a as c,b as r}from"./DatePicker-CphfRqao.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-B06IR8wJ.js";import"./iframe-B5cbsFW6.js";import"../sb-preview/runtime.js";const{useArgs:i}=__STORYBOOK_MODULE_PREVIEW_API__,E={title:"Components/DatePickers/DateBox",component:a,render:t=>(i(),{components:{DateBox:a},setup(){return t},data(){return{ICONS:Object.freeze(n)}},computed:{formattedStartDate(){return this.startDate?new Date(this.startDate):null},formattedEndDate(){return this.endDate?new Date(this.endDate):null}},template:`
+import{I as n}from"./Icon-Dtb7OFDy.js";import{D as a,a as c,b as r}from"./DatePicker-e_OeoKNz.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-64IgKF2L.js";import"./iframe-DdYOFeJw.js";import"../sb-preview/runtime.js";const{useArgs:i}=__STORYBOOK_MODULE_PREVIEW_API__,E={title:"Components/DatePickers/DateBox",component:a,render:t=>(i(),{components:{DateBox:a},setup(){return t},data(){return{ICONS:Object.freeze(n)}},computed:{formattedStartDate(){return this.startDate?new Date(this.startDate):null},formattedEndDate(){return this.endDate?new Date(this.endDate):null}},template:`
                 <div style="display: flex">
                     <date-box
                         :is-interactive="isInteractive"

package/docs/assets/{DatePicker-CphfRqao.js → DatePicker-e_OeoKNz.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 G,t as S,r as b,o as a,c as l,a as s,k as g,g as o,j as I,b as R,n as E,F as H,v,E as X,w as L,f as Y}from"./vue.esm-bundler-DmkhfO_9.js";import{c as Z,d as q,b as u}from"./Tile-B06IR8wJ.js";import{a as J,I as A,b as Q}from"./Icon-D72drrb6.js";import{_ as j}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as K}from"./iframe-B5cbsFW6.js";const c={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral",WARNING:"warning",DANGER:"danger"},_={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"},V={BOX:"box",TILE:"tile"},W={[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 P(e){return e.toLocaleDateString("pl-PL",{dateStyle:void 0,timeStyle:void 0,weekday:"long"})}function x(e){return e.toLocaleDateString("pl-PL",{dateStyle:"medium",timeStyle:void 0})}function F(e){return e.toLocaleDateString("pl-PL",{month:"short",day:"2-digit"})}const C=e=>e.charAt(0).toUpperCase()+e.slice(1),z=G({name:"DateBox",components:{DsIcon:J},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(A).includes(S(e))},endIcon:{type:Object,default:null,validate:e=>e===null||Object.values(A).includes(S(e))},areIconsHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:_.DEFAULT},color:{type:String,default:c.NEUTRAL_WEAK},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(A),ICON_SIZES:Object.freeze(Q),DATE_PICKER_STATES:Object.freeze(_),DATE_PICKER_COLORS:Object.freeze(c)}},computed:{startDateText(){return this.startDate?F(this.startDate):this.placeholder},endDateIfDifferentThanStartDate(){return this.startDate&&this.endDate&&this.startDate.toDateString()!==this.endDate.toDateString()?this.endDate:null},endDateText(){return F(this.endDateIfDifferentThanStartDate)},startDateEyebrowText(){return this.startDate?C(P(this.startDate)):""},endDateEyebrowText(){return this.endDateIfDifferentThanStartDate?C(P(this.endDateIfDifferentThanStartDate)):""}}}),ee={key:0,class:"ds-dateBox__loader"},te={class:"ds-dateBox__dateWrapper"},ae={key:0,class:"ds-dateBox__eyebrow"},ne={class:"ds-dateBox__date"},se={class:"ds-dateBox__dateText"},le={key:0,class:"ds-dateBox__loader"},oe={class:"ds-dateBox__dateWrapper"},ie={key:0,class:"ds-dateBox__eyebrow"},re={class:"ds-dateBox__date"},de={class:"ds-dateBox__dateText"};function ue(e,D,d,m,t,T){const n=b("ds-icon");return a(),l("div",{class:E(["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:E(["ds-dateBox__widthWrapper",{"-ds-has-icon":e.startIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",ee,[g(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):o("",!0),s("div",te,[e.startDateEyebrowText?(a(),l("span",ae,I(e.startDateEyebrowText),1)):o("",!0),s("div",ne,[e.startIcon?(a(),R(n,{key:0,class:E(["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",se,I(e.startDateText),1)])])],2),e.startDate&&e.endDateIfDifferentThanStartDate?(a(),l(H,{key:0},[D[0]||(D[0]=s("span",{class:"ds-dateBox__separator"},"–",-1)),s("div",{class:E(["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",le,[g(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):o("",!0),s("div",oe,[e.endDateEyebrowText?(a(),l("span",ie,I(e.endDateEyebrowText),1)):o("",!0),s("div",re,[e.endIcon?(a(),R(n,{key:0,class:E(["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,I(e.endDateText),1)])])],2)],64)):o("",!0)],2)}const ce=j(z,[["render",ue],["__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 O=null,U;function fe({props:e,onChange:D,defaultDates:d,mode:m="single"}){let t=null;const T=v(!1),n=i=>{t==null||t.setDate(i,!1),t==null||t.updateValue(!1),t==null||t.jumpToDate(Array.isArray(i)?i[0]:i,!1)},p=async(i,h,N)=>{var M,B,k,w;if(!t){if(!O)try{O=(await K(async()=>{const{default:r}=await import("./index-CBmJdl9t.js");return{default:r}},[],import.meta.url)).default,U=(await K(async()=>{const{Polish:r}=await import("./pl-Cy1N1vsP.js").then(y=>y.p);return{Polish:r}},__vite__mapDeps([0,1]),import.meta.url)).Polish}catch(r){console.error("Failed to load flatpickr",r);return}if(t=O(i,{mode:m,locale:U,disableMobile:!0,positionElement:h,ignoredFocusElements:[h],position:W[e.calendarPosition],defaultDate:d,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate,onClose:[()=>{T.value=!1}],onOpen:[()=>{T.value=!0}],onChange:D}),N){const r=document.querySelector(N),y=()=>{t==null||t._positionCalendar()};r&&((B=(M=t==null?void 0:t.config)==null?void 0:M.onOpen)==null||B.push(()=>{r.addEventListener("scroll",y,{passive:!0})}),(w=(k=t==null?void 0:t.config)==null?void 0:k.onClose)==null||w.push(()=>{r.removeEventListener("scroll",y)}))}return t}};return X(()=>{t==null||t.destroy(),t=null}),L([()=>e.calendarPosition,()=>e.minDate,()=>e.maxDate,()=>e.disableDates,()=>d],()=>{t==null||t.set({position:W[e.calendarPosition],defaultDate:d,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate})},{flush:"post"}),L([()=>e.date,()=>e.startDate,()=>e.endDate],()=>{e.date?n(e.date):e.startDate&&e.endDate?n([e.startDate,e.endDate]):e.startDate&&!e.endDate?n(e.startDate):!e.startDate&&e.endDate?n(e.endDate):t==null||t.clear(!1)},{flush:"post"}),{datePicker:t,createDatePicker:p,isOpen:T,toggle:()=>{t==null||t.toggle()}}}const $=G({name:"DatePicker",components:{DsTile:Z,DateBox:ce},props:{triggerType:{type:String,default:V.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:A.FA_CALENDAR_DAYS,validator(e){return e===null||Object.values(A).includes(S(e))}},isIconHiddenOnMobile:{type:Boolean,default:!1},errorMessage:{type:String,default:null},state:{type:String,default:_.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 i;const d=v(),m=v(),t=h=>{D("update:date",h[0])},{isOpen:T,toggle:n,createDatePicker:p}=fe({props:e,onChange:t,defaultDates:(i=e.date)!=null?i:new Date,mode:"single"});return L([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===_.DEFAULT&&await p(d.value,m.value,e.updatePositionBasedOnScrollableSelector)}),{flatpickrInputRef:d,datePickerRef:m,isOpen:T,toggleDatePicker:n,createDatePicker:p,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(f),DATE_PICKER_COLORS:Object.freeze(c),DATE_PICKER_STATES:Object.freeze(_),DATE_PICKER_TRIGGER_TYPES:Object.freeze(V),TILE_ADDITIONAL_TEXT_MAX_WIDTHS:Object.freeze(q)}},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?C(P(this.date)):""},text(){return this.date?x(this.date):this.placeholder},tileIcon(){return this.additionalText||!this.icon?null:this.isOpen?A.FA_CHEVRON_UP:this.icon},showErrorMessage(){return this.errorMessage!==null},showHelpMessage(){return this.helpMessage!==null}},async mounted(){this.isInteractive&&this.state===_.DEFAULT&&await this.createDatePicker(this.flatpickrInputRef,this.datePickerRef,this.updatePositionBasedOnScrollableSelector)},methods:{toggle(){this.isInteractive&&this.state===_.DEFAULT&&this.toggleDatePicker()}}}),De={class:"ds-datePicker__labelWrapper"},Te={key:2,class:"ds-datePicker__errorMessage"},Ee={key:3,class:"ds-datePicker__helpMessage"},_e={ref:"flatpickrInputRef",class:"ds-datePicker__hiddenInput"};function Ie(e,D,d,m,t,T){const n=b("ds-tile"),p=b("date-box");return a(),l("div",{ref:"datePickerRef",class:E(["ds-datePicker",{"-ds-box":e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.BOX}])},[e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.TILE?(a(),l(H,{key:0},[s("div",De,[e.label?(a(),l("span",{key:0,class:E(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},I(e.label),3)):o("",!0),e.$slots.default?Y(e.$slots,"default",{key:1},void 0,!0):o("",!0)]),g(n,{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(),R(p,{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:e.toggle},null,8,["is-interactive","placeholder","start-date","start-icon","are-icons-hidden-on-mobile","state","color","is-open","onClick"])),e.showErrorMessage?(a(),l("span",Te,I(e.errorMessage),1)):e.showHelpMessage?(a(),l("span",Ee,I(e.helpMessage),1)):o("",!0),s("input",_e,null,512)],2)}const Oe=j($,[["render",Ie],["__scopeId","data-v-6f99ef03"]]);$.__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{ce as D,_ as a,c as b,Oe as c,V as d,f as e,fe as i};
+import{d as G,t as S,r as b,o as a,c as l,a as s,k as g,g as o,j as I,b as R,n as E,F as H,v,E as X,w as L,f as Y}from"./vue.esm-bundler-DmkhfO_9.js";import{c as Z,d as q,b as u}from"./Tile-64IgKF2L.js";import{a as J,I as A,b as Q}from"./Icon-Dtb7OFDy.js";import{_ as j}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as K}from"./iframe-DdYOFeJw.js";const c={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral",WARNING:"warning",DANGER:"danger"},_={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"},V={BOX:"box",TILE:"tile"},W={[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 P(e){return e.toLocaleDateString("pl-PL",{dateStyle:void 0,timeStyle:void 0,weekday:"long"})}function x(e){return e.toLocaleDateString("pl-PL",{dateStyle:"medium",timeStyle:void 0})}function F(e){return e.toLocaleDateString("pl-PL",{month:"short",day:"2-digit"})}const C=e=>e.charAt(0).toUpperCase()+e.slice(1),z=G({name:"DateBox",components:{DsIcon:J},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(A).includes(S(e))},endIcon:{type:Object,default:null,validate:e=>e===null||Object.values(A).includes(S(e))},areIconsHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:_.DEFAULT},color:{type:String,default:c.NEUTRAL_WEAK},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(A),ICON_SIZES:Object.freeze(Q),DATE_PICKER_STATES:Object.freeze(_),DATE_PICKER_COLORS:Object.freeze(c)}},computed:{startDateText(){return this.startDate?F(this.startDate):this.placeholder},endDateIfDifferentThanStartDate(){return this.startDate&&this.endDate&&this.startDate.toDateString()!==this.endDate.toDateString()?this.endDate:null},endDateText(){return F(this.endDateIfDifferentThanStartDate)},startDateEyebrowText(){return this.startDate?C(P(this.startDate)):""},endDateEyebrowText(){return this.endDateIfDifferentThanStartDate?C(P(this.endDateIfDifferentThanStartDate)):""}}}),ee={key:0,class:"ds-dateBox__loader"},te={class:"ds-dateBox__dateWrapper"},ae={key:0,class:"ds-dateBox__eyebrow"},ne={class:"ds-dateBox__date"},se={class:"ds-dateBox__dateText"},le={key:0,class:"ds-dateBox__loader"},oe={class:"ds-dateBox__dateWrapper"},ie={key:0,class:"ds-dateBox__eyebrow"},re={class:"ds-dateBox__date"},de={class:"ds-dateBox__dateText"};function ue(e,D,d,m,t,T){const n=b("ds-icon");return a(),l("div",{class:E(["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:E(["ds-dateBox__widthWrapper",{"-ds-has-icon":e.startIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",ee,[g(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):o("",!0),s("div",te,[e.startDateEyebrowText?(a(),l("span",ae,I(e.startDateEyebrowText),1)):o("",!0),s("div",ne,[e.startIcon?(a(),R(n,{key:0,class:E(["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",se,I(e.startDateText),1)])])],2),e.startDate&&e.endDateIfDifferentThanStartDate?(a(),l(H,{key:0},[D[0]||(D[0]=s("span",{class:"ds-dateBox__separator"},"–",-1)),s("div",{class:E(["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",le,[g(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):o("",!0),s("div",oe,[e.endDateEyebrowText?(a(),l("span",ie,I(e.endDateEyebrowText),1)):o("",!0),s("div",re,[e.endIcon?(a(),R(n,{key:0,class:E(["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,I(e.endDateText),1)])])],2)],64)):o("",!0)],2)}const ce=j(z,[["render",ue],["__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 O=null,U;function fe({props:e,onChange:D,defaultDates:d,mode:m="single"}){let t=null;const T=v(!1),n=i=>{t==null||t.setDate(i,!1),t==null||t.updateValue(!1),t==null||t.jumpToDate(Array.isArray(i)?i[0]:i,!1)},p=async(i,h,N)=>{var M,B,k,w;if(!t){if(!O)try{O=(await K(async()=>{const{default:r}=await import("./index-CBmJdl9t.js");return{default:r}},[],import.meta.url)).default,U=(await K(async()=>{const{Polish:r}=await import("./pl-Cy1N1vsP.js").then(y=>y.p);return{Polish:r}},__vite__mapDeps([0,1]),import.meta.url)).Polish}catch(r){console.error("Failed to load flatpickr",r);return}if(t=O(i,{mode:m,locale:U,disableMobile:!0,positionElement:h,ignoredFocusElements:[h],position:W[e.calendarPosition],defaultDate:d,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate,onClose:[()=>{T.value=!1}],onOpen:[()=>{T.value=!0}],onChange:D}),N){const r=document.querySelector(N),y=()=>{t==null||t._positionCalendar()};r&&((B=(M=t==null?void 0:t.config)==null?void 0:M.onOpen)==null||B.push(()=>{r.addEventListener("scroll",y,{passive:!0})}),(w=(k=t==null?void 0:t.config)==null?void 0:k.onClose)==null||w.push(()=>{r.removeEventListener("scroll",y)}))}return t}};return X(()=>{t==null||t.destroy(),t=null}),L([()=>e.calendarPosition,()=>e.minDate,()=>e.maxDate,()=>e.disableDates,()=>d],()=>{t==null||t.set({position:W[e.calendarPosition],defaultDate:d,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate})},{flush:"post"}),L([()=>e.date,()=>e.startDate,()=>e.endDate],()=>{e.date?n(e.date):e.startDate&&e.endDate?n([e.startDate,e.endDate]):e.startDate&&!e.endDate?n(e.startDate):!e.startDate&&e.endDate?n(e.endDate):t==null||t.clear(!1)},{flush:"post"}),{datePicker:t,createDatePicker:p,isOpen:T,toggle:()=>{t==null||t.toggle()}}}const $=G({name:"DatePicker",components:{DsTile:Z,DateBox:ce},props:{triggerType:{type:String,default:V.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:A.FA_CALENDAR_DAYS,validator(e){return e===null||Object.values(A).includes(S(e))}},isIconHiddenOnMobile:{type:Boolean,default:!1},errorMessage:{type:String,default:null},state:{type:String,default:_.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 i;const d=v(),m=v(),t=h=>{D("update:date",h[0])},{isOpen:T,toggle:n,createDatePicker:p}=fe({props:e,onChange:t,defaultDates:(i=e.date)!=null?i:new Date,mode:"single"});return L([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===_.DEFAULT&&await p(d.value,m.value,e.updatePositionBasedOnScrollableSelector)}),{flatpickrInputRef:d,datePickerRef:m,isOpen:T,toggleDatePicker:n,createDatePicker:p,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(f),DATE_PICKER_COLORS:Object.freeze(c),DATE_PICKER_STATES:Object.freeze(_),DATE_PICKER_TRIGGER_TYPES:Object.freeze(V),TILE_ADDITIONAL_TEXT_MAX_WIDTHS:Object.freeze(q)}},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?C(P(this.date)):""},text(){return this.date?x(this.date):this.placeholder},tileIcon(){return this.additionalText||!this.icon?null:this.isOpen?A.FA_CHEVRON_UP:this.icon},showErrorMessage(){return this.errorMessage!==null},showHelpMessage(){return this.helpMessage!==null}},async mounted(){this.isInteractive&&this.state===_.DEFAULT&&await this.createDatePicker(this.flatpickrInputRef,this.datePickerRef,this.updatePositionBasedOnScrollableSelector)},methods:{toggle(){this.isInteractive&&this.state===_.DEFAULT&&this.toggleDatePicker()}}}),De={class:"ds-datePicker__labelWrapper"},Te={key:2,class:"ds-datePicker__errorMessage"},Ee={key:3,class:"ds-datePicker__helpMessage"},_e={ref:"flatpickrInputRef",class:"ds-datePicker__hiddenInput"};function Ie(e,D,d,m,t,T){const n=b("ds-tile"),p=b("date-box");return a(),l("div",{ref:"datePickerRef",class:E(["ds-datePicker",{"-ds-box":e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.BOX}])},[e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.TILE?(a(),l(H,{key:0},[s("div",De,[e.label?(a(),l("span",{key:0,class:E(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},I(e.label),3)):o("",!0),e.$slots.default?Y(e.$slots,"default",{key:1},void 0,!0):o("",!0)]),g(n,{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(),R(p,{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:e.toggle},null,8,["is-interactive","placeholder","start-date","start-icon","are-icons-hidden-on-mobile","state","color","is-open","onClick"])),e.showErrorMessage?(a(),l("span",Te,I(e.errorMessage),1)):e.showHelpMessage?(a(),l("span",Ee,I(e.helpMessage),1)):o("",!0),s("input",_e,null,512)],2)}const Oe=j($,[["render",Ie],["__scopeId","data-v-6f99ef03"]]);$.__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{ce as D,_ as a,c as b,Oe as c,V as d,f as e,fe as i};

package/docs/assets/{DatePicker.stories-QTXcDV8x.js → DatePicker.stories-D9PiUfVD.js}

@@ -1,4 +1,4 @@
-import{c as p,d as D,b as m,e as u,a as g}from"./DatePicker-CphfRqao.js";import{I as h}from"./Icon-D72drrb6.js";import{D as x}from"./Switch-B-8G1I_D.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./Tile-B06IR8wJ.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./iframe-B5cbsFW6.js";import"../sb-preview/runtime.js";const{useArgs:I}=__STORYBOOK_MODULE_PREVIEW_API__,N={title:"Components/DatePickers/DatePicker",component:p},b=S=>{const[M,w]=I();return{components:{DatePicker:p,DsSwitch:x},setup(){return S},data(){return{ICONS:Object.freeze(h)}},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{c as p,d as D,b as m,e as u,a as g}from"./DatePicker-e_OeoKNz.js";import{I as h}from"./Icon-Dtb7OFDy.js";import{D as x}from"./Switch-DXVtM6f3.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./Tile-64IgKF2L.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./iframe-DdYOFeJw.js";import"../sb-preview/runtime.js";const{useArgs:I}=__STORYBOOK_MODULE_PREVIEW_API__,N={title:"Components/DatePickers/DatePicker",component:p},b=S=>{const[M,w]=I();return{components:{DatePicker:p,DsSwitch:x},setup(){return S},data(){return{ICONS:Object.freeze(h)}},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:`
             <date-picker
                 :trigger-type="triggerType"
                 :is-interactive="isInteractive"

package/docs/assets/{DateRangePicker-BFevyPhM.js → DateRangePicker-D48XtTCY.js}

@@ -1 +1 @@
-import{D as E,e as c,a,b as f,i as A,d as g}from"./DatePicker-CphfRqao.js";import{I as t}from"./Icon-D72drrb6.js";import{d as R,t as p,v as m,w as P,r as y,o as D,c as _,k as T,j as S,g as O,a as v}from"./vue.esm-bundler-DmkhfO_9.js";import{_ as C}from"./_plugin-vue_export-helper-DlAUqK2U.js";const I=R({name:"DateRangePicker",components:{DateBox:E},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:t.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(t).includes(p(e)))}},endIcon:{type:[Object,null],default:t.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(t).includes(p(e)))}},areIconsHiddenOnMobile:{type:Boolean,default:!1},calendarPosition:{type:String,default:c.BOTTOM_LEFT},errorMessage:{type:String,default:""},state:{type:String||null,default:a.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:o}){const n=m(),l=m(),i=r=>{r.length===2&&o("update:date",{startDate:r[0],endDate:r[1]})},{isOpen:u,toggle:s,createDatePicker:d}=A({props:e,onChange:i,defaultDates:[e.startDate,e.endDate],mode:"range"});return P([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===a.DEFAULT&&await d(l.value,n.value,e.updatePositionBasedOnScrollableSelector)},{flush:"post"}),{dateRangePickerRef:n,flatpickrInputRef:l,isOpen:u,toggleDatePicker:s,createDatePicker:d,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(c),DATE_PICKER_COLORS:Object.freeze(f),DATE_PICKER_STATES:Object.freeze(a),DATE_PICKER_TRIGGER_TYPES:Object.freeze(g)}},async mounted(){this.isInteractive&&this.state===a.DEFAULT&&await this.createDatePicker(this.flatpickrInputRef,this.dateRangePickerRef,this.updatePositionBasedOnScrollableSelector)},methods:{toggle(){this.isInteractive&&this.state===a.DEFAULT&&this.toggleDatePicker()}}}),k={ref:"dateRangePickerRef",class:"ds-dateRangePicker"},b={key:0,class:"ds-dateRangePicker__errorMessage"},h={ref:"flatpickrInputRef",class:"ds-dateRangePicker__hiddenInput"};function N(e,o,n,l,i,u){const s=y("date-box");return D(),_("div",k,[T(s,{"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:e.toggle},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?(D(),_("span",b,S(e.errorMessage),1)):O("",!0),v("input",h,null,512)],512)}const B=C(I,[["render",N],["__scopeId","data-v-284c5914"]]);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"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue"]};export{B as D};
+import{D as E,e as c,a,b as f,i as A,d as g}from"./DatePicker-e_OeoKNz.js";import{I as t}from"./Icon-Dtb7OFDy.js";import{d as R,t as p,v as m,w as P,r as y,o as D,c as _,k as T,j as S,g as O,a as v}from"./vue.esm-bundler-DmkhfO_9.js";import{_ as C}from"./_plugin-vue_export-helper-DlAUqK2U.js";const I=R({name:"DateRangePicker",components:{DateBox:E},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:t.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(t).includes(p(e)))}},endIcon:{type:[Object,null],default:t.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(t).includes(p(e)))}},areIconsHiddenOnMobile:{type:Boolean,default:!1},calendarPosition:{type:String,default:c.BOTTOM_LEFT},errorMessage:{type:String,default:""},state:{type:String||null,default:a.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:o}){const n=m(),l=m(),i=r=>{r.length===2&&o("update:date",{startDate:r[0],endDate:r[1]})},{isOpen:u,toggle:s,createDatePicker:d}=A({props:e,onChange:i,defaultDates:[e.startDate,e.endDate],mode:"range"});return P([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===a.DEFAULT&&await d(l.value,n.value,e.updatePositionBasedOnScrollableSelector)},{flush:"post"}),{dateRangePickerRef:n,flatpickrInputRef:l,isOpen:u,toggleDatePicker:s,createDatePicker:d,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(c),DATE_PICKER_COLORS:Object.freeze(f),DATE_PICKER_STATES:Object.freeze(a),DATE_PICKER_TRIGGER_TYPES:Object.freeze(g)}},async mounted(){this.isInteractive&&this.state===a.DEFAULT&&await this.createDatePicker(this.flatpickrInputRef,this.dateRangePickerRef,this.updatePositionBasedOnScrollableSelector)},methods:{toggle(){this.isInteractive&&this.state===a.DEFAULT&&this.toggleDatePicker()}}}),k={ref:"dateRangePickerRef",class:"ds-dateRangePicker"},b={key:0,class:"ds-dateRangePicker__errorMessage"},h={ref:"flatpickrInputRef",class:"ds-dateRangePicker__hiddenInput"};function N(e,o,n,l,i,u){const s=y("date-box");return D(),_("div",k,[T(s,{"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:e.toggle},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?(D(),_("span",b,S(e.errorMessage),1)):O("",!0),v("input",h,null,512)],512)}const B=C(I,[["render",N],["__scopeId","data-v-284c5914"]]);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"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue"]};export{B as D};

package/docs/assets/{DateRangePicker.stories-DeOtJw_j.js → DateRangePicker.stories-DnSY5vgk.js}

@@ -1,4 +1,4 @@
-import{D as i}from"./DateRangePicker-BFevyPhM.js";import{I as r}from"./Icon-D72drrb6.js";import{e as m,a as I,b as s}from"./DatePicker-CphfRqao.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-B06IR8wJ.js";import"./iframe-B5cbsFW6.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{D as i}from"./DateRangePicker-D48XtTCY.js";import{I as r}from"./Icon-Dtb7OFDy.js";import{e as m,a as I,b as s}from"./DatePicker-e_OeoKNz.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-64IgKF2L.js";import"./iframe-DdYOFeJw.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"