@codeandfunction/callaloo 5.16.0 → 5.17.0

package/dist/chunks/CLCalendar.vue_vue_type_style_index_0_lang-DUc5dHAZ.js

@@ -0,0 +1,2 @@
+import '../components/Form/CLCalendar/CLCalendar.css';
+import{defineComponent as e,mergeModels as a,useCssVars as l,useModel as t,ref as i,toRef as d,watch as r,onMounted as s,createElementBlock as o,openBlock as n,normalizeStyle as u,normalizeClass as c,unref as p,createElementVNode as f,createVNode as v,withCtx as y,createTextVNode as m,toDisplayString as _,Fragment as b,renderList as h,createBlock as D,createCommentVNode as g}from"vue";import{_ as k}from"./CLButton.vue_vue_type_style_index_0_lang-pE0JrYmS.js";import{_ as w}from"./CLText.vue_vue_type_style_index_0_lang-CdA4TW0N.js";import{a as x,c as z,e as C,f as S,h as $,d as j,b as L,i as M}from"./index-DsloP0ml.js";import{c as T}from"./utils-jYeghjKF.js";import{useDatePicker as B}from"../composables/useDatePicker.js";import{useTheme as P}from"../composables/useTheme.js";const R=["data-testid"],E=/* @__PURE__ */e({name:"CLCalendar",__name:"CLCalendar",props:/* @__PURE__ */a({allowedDates:{type:[Array,Object,Function],default:void 0},color:{default:L.Primary},disabled:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},isRange:{type:Boolean,default:!0},fluid:{type:Boolean,default:!1},testId:{default:"clll-calendar"},width:{default:"280px"}},{modelValue:{},modelModifiers:{}}),emits:/* @__PURE__ */a(["date-select"],["update:modelValue"]),setup(e,{expose:a,emit:E}){l(e=>({v2a0ead45:e.width}));const F=e,G=E,I=P(),N="clll-calendar",V=t(e,"modelValue"),A=i(V.value?.end??null),O=i(V.value?.start??null),{calendarGrid:q,cancelDraft:H,clearDraft:J,currentMonthLabel:K,draftEnd:Q,draftStart:U,getDayAriaLabel:W,handleNextMonth:X,handlePrevMonth:Y,initializeDraft:Z,isDraftEnd:ee,isDraftSameDay:ae,isDraftStart:le,isInDraftRange:te,onDayClick:ie,weekDays:de}=B({allowedDates:d(F,"allowedDates"),appliedEnd:A,appliedStart:O,isRange:d(F,"isRange")});r(V,e=>{O.value=e?.start??null,A.value=e?.end??null,Z()},{deep:!0}),s(()=>{Z()});return a({apply:()=>{O.value=U.value,A.value=Q.value,V.value={end:A.value,start:O.value}},cancel:()=>{H()},draftEnd:Q,draftStart:U,initializeDraft:Z,reset:()=>{J(),O.value=null,A.value=null,V.value=null}}),(a,l)=>(n(),o("div",{class:c([N,e.fluid?`${N}__fluid`:""]),"data-testid":e.testId,style:u(p(T)(p(I)))},[f("div",{class:c(`${N}__header`)},[v(p(k),{"aria-label":"Previous month","border-radius":p($).Full,"icon-before":p(S).ChevronLeft,"icon-size":p(C).Tiny,"on-click":p(Y),size:p(z).Tiny,variant:p(x).Ghost,height:"32px",width:"32px",wrap:""},null,8,["border-radius","icon-before","icon-size","on-click","size","variant"]),v(p(w),{type:p(j).Medium,medium:""},{default:y(()=>[m(_(p(K)),1)]),_:1},8,["type"]),v(p(k),{"aria-label":"Next month","border-radius":p($).Full,"icon-before":p(S).ChevronRight,"icon-size":p(C).Tiny,"on-click":p(X),size:p(z).Tiny,variant:p(x).Ghost,height:"32px",width:"32px",wrap:""},null,8,["border-radius","icon-before","icon-size","on-click","size","variant"])],2),f("div",{class:c(`${N}__grid`)},[(n(!0),o(b,null,h(p(de),e=>(n(),o("div",{key:e,class:c(`${N}__weekday`)},[v(p(w),{align:p(M).Center,color:p(L).Neutral,type:p(j).Small},{default:y(()=>[m(_(e),1)]),_:2},1032,["align","color","type"])],2))),128)),(n(!0),o(b,null,h(p(q),(a,l)=>(n(),o("div",{key:a.date??`pad-${l}`,class:c([`${N}__cell`,a.isOutsideMonth||a.isDisabled?`${N}__cell--outside`:"",a.date&&p(ae)(a.date)?`${N}__cell--same-day`:""])},[a.day&&a.date?(n(),D(p(k),{key:0,"aria-label":p(W)(a.date),"border-radius":p($).Full,color:p(le)(a.date)||p(ee)(a.date)?e.color:p(L).Secondary,disabled:e.disabled||e.busy||a.isDisabled,size:p(z).Small,height:"100%",width:"100%","on-click":e=>((e,a)=>{a?.preventDefault(),a?.stopPropagation(),F.disabled||F.busy||!e||(ie(e),G("date-select",e))})(a.date,e),variant:p(le)(a.date)||p(ee)(a.date)?p(x).Solid:p(te)(a.date)?p(x).Soft:p(x).Ghost,wrap:""},{default:y(()=>[m(_(a.day),1)]),_:2},1032,["aria-label","border-radius","color","disabled","size","on-click","variant"])):g("",!0)],2))),128))],2)],14,R))}});export{E as _};

package/dist/components/Buttons/CLButton/CLButton.vue.d.ts

@@ -58,18 +58,18 @@ export interface CLButtonProps {
     wrap?: boolean;
 }
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CLButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLButtonProps> & Readonly<{}>, {
+    width: string;
+    height: string;
+    form: string;
+    title: string;
     size: CLSizes;
     color: CLColors;
     variant: CLColorVariants;
     rounded: boolean;
     testId: string;
     type: CLButtonTypes;
-    form: string;
-    title: string;
     onClick: (event?: Event) => void;
     target: CLLinkTarget;
-    width: string;
-    height: string;
     borderRadius: CLBorderRadius;
     iconFilled: boolean;
     iconSize: CLIconSizes;

package/dist/components/Containers/CLCard/CLCard.vue.d.ts

@@ -66,14 +66,14 @@ export interface CLCardProps {
     width?: string;
 }
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CLCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLCardProps> & Readonly<{}>, {
+    width: string;
+    height: string;
     color: CLColors;
     variant: CLColorVariants;
     rounded: boolean;
     testId: string;
     type: CLCardTypes;
     target: CLLinkTarget;
-    width: string;
-    height: string;
     align: CLAlign;
     active: boolean;
     busy: boolean;

package/dist/components/Containers/CLCarousel/CLCarousel.vue.d.ts

@@ -30,11 +30,11 @@ export interface CLCarouselProps {
     width?: string;
 }
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CLCarouselProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLCarouselProps> & Readonly<{}>, {
+    width: string;
     color: CLColors;
     variant: CLColorVariants;
     enabled: boolean;
     testId: string;
-    width: string;
     moreLabel: string;
     paginationType: CLPaginationType;
     controlAlign: CLAlign;

package/dist/components/Containers/CLDrawer/CLDrawer.vue.d.ts

@@ -44,10 +44,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
     "onDrawer-open"?: (() => any) | undefined;
     "onDrawer-close"?: (() => any) | undefined;
 }>, {
-    rounded: boolean;
-    testId: string;
     left: string;
     width: string;
+    rounded: boolean;
+    testId: string;
     borderRadius: CLBorderRadius;
     position: CLDrawerPosition;
     snapPoint: number;

package/dist/components/Form/CLCalendar/CLCalendar.css

@@ -1 +1 @@
-.clll-calendar{display:flex;flex-direction:column;background-color:var(--clll-calendar-content-bg);box-sizing:border-box;width:var(--v5d82e3ae)}.clll-calendar__fluid{width:100%;max-width:none}.clll-calendar__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--clll-unit-4)}.clll-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--clll-unit-1)}.clll-calendar__weekday{text-align:center;padding-bottom:var(--clll-unit-1)}.clll-calendar__cell{aspect-ratio:1;display:flex;justify-content:center;align-items:center}.clll-calendar__cell--outside{opacity:.55}.clll-calendar__cell--same-day .clll-button{outline:2px solid var(--clll-button-bg-color);outline-offset:2px}
+.clll-calendar{display:flex;flex-direction:column;background-color:var(--clll-calendar-content-bg);box-sizing:border-box;width:var(--v2a0ead45)}.clll-calendar__fluid{width:100%;max-width:none}.clll-calendar__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--clll-unit-4)}.clll-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--clll-unit-1)}.clll-calendar__weekday{text-align:center;padding-bottom:var(--clll-unit-1)}.clll-calendar__cell{aspect-ratio:1;display:flex;justify-content:center;align-items:center}.clll-calendar__cell--outside{opacity:.55}.clll-calendar__cell--same-day .clll-button{outline:2px solid var(--clll-button-bg-color);outline-offset:2px}

package/dist/components/Form/CLCalendar/CLCalendar.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLCalendar.css';
-import{_ as a}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-PiGGhTHo.js";export{a as CLCalendar,a as default};
+import{_ as a}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-DUc5dHAZ.js";export{a as CLCalendar,a as default};

package/dist/components/Form/CLCalendar/CLCalendar.vue.d.ts

@@ -1,6 +1,8 @@
 import { CLColors } from '../../../index.ts';
-import { ISODate } from '../../../composables/useDatePicker';
+import { CLISODate, CLAllowedDates } from '../../../composables/useDatePicker';
 export interface CLCalendarProps {
+    /** Allowed dates or range of dates that can be selected. When specified, all other dates appear disabled. */
+    allowedDates?: CLAllowedDates;
     /** The color theme of the calendar selection. */
     color?: CLColors;
     /** Sets the disabled state. */
@@ -18,8 +20,8 @@ export interface CLCalendarProps {
 }
 declare const _default: import('vue').DefineComponent<{
     modelValue?: {
-        end: ISODate | null;
-        start: ISODate | null;
+        end: CLISODate | null;
+        start: CLISODate | null;
     } | null;
 } & CLCalendarProps, {
     apply: () => void;
@@ -30,28 +32,29 @@ declare const _default: import('vue').DefineComponent<{
     reset: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: {
-        end: ISODate | null;
-        start: ISODate | null;
+        end: CLISODate | null;
+        start: CLISODate | null;
     } | null) => any;
     "date-select": (date: string) => any;
 }, string, import('vue').PublicProps, Readonly<{
     modelValue?: {
-        end: ISODate | null;
-        start: ISODate | null;
+        end: CLISODate | null;
+        start: CLISODate | null;
     } | null;
 } & CLCalendarProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
-        end: ISODate | null;
-        start: ISODate | null;
+        end: CLISODate | null;
+        start: CLISODate | null;
     } | null) => any) | undefined;
     "onDate-select"?: ((date: string) => any) | undefined;
 }>, {
+    width: string;
+    allowedDates: CLAllowedDates;
+    isRange: boolean;
     color: CLColors;
     fluid: boolean;
     testId: string;
-    width: string;
     busy: boolean;
     disabled: boolean;
-    isRange: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Form/CLCheckbox/CLCheckbox.vue.d.ts

@@ -52,18 +52,18 @@ declare const _default: import('vue').DefineComponent<{
 } & CLCheckboxProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
+    form: string;
+    label: string;
+    value: string | number | boolean;
     size: CLSizes;
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
     rounded: boolean;
     testId: string;
-    form: string;
-    label: string;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;
     borderRadius: CLBorderRadius;
-    value: string | number | boolean;
     required: boolean;
     ariaLabel: string;
     busy: boolean;

package/dist/components/Form/CLInput/CLInput.vue.d.ts

@@ -92,6 +92,9 @@ declare const _default: import('vue').DefineComponent<{
     onReset?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
+    form: string;
+    label: string;
+    pattern: string;
     size: CLSizes;
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
@@ -99,9 +102,6 @@ declare const _default: import('vue').DefineComponent<{
     rounded: boolean;
     testId: string;
     type: CLInputTypes;
-    form: string;
-    label: string;
-    pattern: string;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;

package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLInputDatePicker.css';
-import{defineComponent as e,mergeModels as a,ref as l,useModel as t,watch as u,computed as n,onMounted as d,onBeforeUnmount as s,createElementBlock as o,openBlock as i,normalizeClass as r,createVNode as f,createCommentVNode as m,unref as p,isRef as c,normalizeStyle as v,withCtx as b,createElementVNode as y}from"vue";import{u as g,a as _,o as h,f as k,s as C}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as D}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-CY-Qr_CV.js";import{CLInput as Y}from"../CLInput/CLInput.js";import{_ as R}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-PiGGhTHo.js";import{f as I,a as L,n as V,c as x,b as M}from"../../../chunks/index-DsloP0ml.js";import{a as B}from"../../../chunks/index-wkMXT2wB.js";import{i as j}from"../../../chunks/helper-BlxFN3eF.js";import{useEsc as E}from"../../../composables/useEsc.js";import{useDateInputMask as F}from"../../../composables/useDateInputMask.js";const S=/* @__PURE__ */e({name:"CLInputDatePicker",__name:"CLInputDatePicker",props:/* @__PURE__ */a({ariaLabel:{default:void 0},borderRadius:{default:void 0},color:{default:M.Neutral},size:{default:x.Small},variant:{default:L.Outline},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},form:{default:void 0},id:{},isRange:{type:Boolean,default:!0},label:{default:void 0},messages:{default:()=>[]},messageType:{default:void 0},name:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},orientation:{default:B.Vertical},placement:{default:V.BottomStart},placeholder:{default:void 0},required:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},testId:{default:"clll-input-date-picker"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,V="clll-input-date-picker",x=l(!1),M=l(),B=l(),S=l(),$=t(e,"modelValue"),z=l(""),{handleDateInput:w,isoToSlash:q,slashToISO:T,validateDate:O}=F();u($,()=>{const e=q($.value?.start??null),l=q($.value?.end??null);e?a.isRange&&l?z.value=`${e} - ${l}`:z.value=e:z.value=""},{immediate:!0,deep:!0});const P=n(()=>M.value?.$el),{floatingStyles:U}=g(P,S,{middleware:[h(8),k(),C()],placement:l(a.placement),whileElementsMounted:_,open:x}),G=()=>{a.disabled||a.busy||(x.value=!x.value,x.value?(a.onFocus?.(new FocusEvent("focus")),B.value?.initializeDraft()):a.onBlur?.(new FocusEvent("blur")))},H=n(()=>{const e=B.value?.draftStart,l=B.value?.draftEnd;return a.isRange?!!e&&!!l:!!e}),N=()=>{x.value&&(x.value=!1,a.onBlur?.(new FocusEvent("blur")))};E({escHandler:N});const A=e=>{const a=e.target,l=M.value?.$el,t=S.value;x.value&&l&&t&&!l.contains(a)&&!t.contains(a)&&N()},J=()=>{H.value&&(B.value?.apply(),N(),a.onChange?.())},K=e=>{const l=O(e,a.isRange),t=M.value?.inputRef;return t&&(e&&!l?t.setCustomValidity("Invalid date format. Use YYYY/MM/DD"):t.setCustomValidity("")),l},Q=e=>{e&&w(e,z,a.isRange,()=>{K(z.value)})},W=e=>{if(!e)return;const l=e.target.value,t=K(l);if(!l.trim())return $.value={start:null,end:null},void a.onChange?.();if(t){if(a.isRange){const[e,a]=l.split("-").map(e=>e.trim());$.value={start:T(e),end:T(a)}}else $.value={start:T(l.trim()),end:null};a.onChange?.()}};return d(()=>{j&&document.addEventListener("click",A)}),s(()=>{j&&document.removeEventListener("click",A)}),(a,l)=>(i(),o("div",{class:r([V,e.fluid?`${V}--fluid`:""])},[f(p(Y),{id:e.id,ref_key:"inputRef",ref:M,modelValue:p(z),"onUpdate:modelValue":l[0]||(l[0]=e=>c(z)?z.value=e:null),"aria-label":e.ariaLabel,"border-radius":e.borderRadius,busy:e.busy,color:e.color,disabled:e.disabled,fluid:e.fluid,form:e.form,label:e.label,messages:e.messages,"message-type":e.messageType,name:e.name,orientation:e.orientation,placeholder:e.placeholder||(e.isRange?"YYYY/MM/DD - YYYY/MM/DD":"YYYY/MM/DD"),required:e.required,rounded:e.rounded,size:e.size,suffix:p(I).Calendar,"suffix-aria-label":e.ariaLabel||"Open calendar","test-id":e.testId,variant:e.variant,onInput:Q,onChange:W,onSuffixClick:G},null,8,["id","modelValue","aria-label","border-radius","busy","color","disabled","fluid","form","label","messages","message-type","name","orientation","placeholder","required","rounded","size","suffix","suffix-aria-label","test-id","variant"]),p(x)?(i(),o("div",{key:0,ref_key:"popoverRef",ref:S,class:r(`${V}__popover`),style:v({...p(U),zIndex:100})},[f(p(D),{"border-radius":e.borderRadius,variant:p(L).Ghost,padded:!1,rounded:e.rounded,elevated:""},{default:b(()=>[y("div",{class:r(`${V}__calendar-container`)},[f(p(R),{ref_key:"calendarRef",ref:B,modelValue:$.value,"onUpdate:modelValue":l[1]||(l[1]=e=>$.value=e),disabled:e.disabled,busy:e.busy,"is-range":e.isRange,fluid:"",onDateSelect:J},null,8,["modelValue","disabled","busy","is-range"])],2)]),_:1},8,["border-radius","variant","rounded"])],6)):m("",!0)],2))}});export{S as CLInputDatePicker,S as default};
+import{defineComponent as e,mergeModels as a,ref as l,useModel as t,watch as u,computed as n,onMounted as d,onBeforeUnmount as s,createElementBlock as o,openBlock as i,normalizeClass as r,createVNode as f,createCommentVNode as m,unref as p,isRef as c,normalizeStyle as v,withCtx as b,createElementVNode as y}from"vue";import{u as g,a as _,o as h,f as k,s as C}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as D}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-CY-Qr_CV.js";import{CLInput as Y}from"../CLInput/CLInput.js";import{_ as R}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-DUc5dHAZ.js";import{f as I,a as L,n as V,c as x,b as M}from"../../../chunks/index-DsloP0ml.js";import{a as B}from"../../../chunks/index-wkMXT2wB.js";import{i as j}from"../../../chunks/helper-BlxFN3eF.js";import{useEsc as E}from"../../../composables/useEsc.js";import{useDateInputMask as F}from"../../../composables/useDateInputMask.js";const S=/* @__PURE__ */e({name:"CLInputDatePicker",__name:"CLInputDatePicker",props:/* @__PURE__ */a({ariaLabel:{default:void 0},borderRadius:{default:void 0},color:{default:M.Neutral},size:{default:x.Small},variant:{default:L.Outline},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},form:{default:void 0},id:{},isRange:{type:Boolean,default:!0},label:{default:void 0},messages:{default:()=>[]},messageType:{default:void 0},name:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},orientation:{default:B.Vertical},placement:{default:V.BottomStart},placeholder:{default:void 0},required:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},testId:{default:"clll-input-date-picker"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,V="clll-input-date-picker",x=l(!1),M=l(),B=l(),S=l(),$=t(e,"modelValue"),z=l(""),{handleDateInput:w,isoToSlash:q,slashToISO:T,validateDate:O}=F();u($,()=>{const e=q($.value?.start??null),l=q($.value?.end??null);e?a.isRange&&l?z.value=`${e} - ${l}`:z.value=e:z.value=""},{immediate:!0,deep:!0});const P=n(()=>M.value?.$el),{floatingStyles:U}=g(P,S,{middleware:[h(8),k(),C()],placement:l(a.placement),whileElementsMounted:_,open:x}),G=()=>{a.disabled||a.busy||(x.value=!x.value,x.value?(a.onFocus?.(new FocusEvent("focus")),B.value?.initializeDraft()):a.onBlur?.(new FocusEvent("blur")))},H=n(()=>{const e=B.value?.draftStart,l=B.value?.draftEnd;return a.isRange?!!e&&!!l:!!e}),N=()=>{x.value&&(x.value=!1,a.onBlur?.(new FocusEvent("blur")))};E({escHandler:N});const A=e=>{const a=e.target,l=M.value?.$el,t=S.value;x.value&&l&&t&&!l.contains(a)&&!t.contains(a)&&N()},J=()=>{H.value&&(B.value?.apply(),N(),a.onChange?.())},K=e=>{const l=O(e,a.isRange),t=M.value?.inputRef;return t&&(e&&!l?t.setCustomValidity("Invalid date format. Use YYYY/MM/DD"):t.setCustomValidity("")),l},Q=e=>{e&&w(e,z,a.isRange,()=>{K(z.value)})},W=e=>{if(!e)return;const l=e.target.value,t=K(l);if(!l.trim())return $.value={start:null,end:null},void a.onChange?.();if(t){if(a.isRange){const[e,a]=l.split("-").map(e=>e.trim());$.value={start:T(e),end:T(a)}}else $.value={start:T(l.trim()),end:null};a.onChange?.()}};return d(()=>{j&&document.addEventListener("click",A)}),s(()=>{j&&document.removeEventListener("click",A)}),(a,l)=>(i(),o("div",{class:r([V,e.fluid?`${V}--fluid`:""])},[f(p(Y),{id:e.id,ref_key:"inputRef",ref:M,modelValue:p(z),"onUpdate:modelValue":l[0]||(l[0]=e=>c(z)?z.value=e:null),"aria-label":e.ariaLabel,"border-radius":e.borderRadius,busy:e.busy,color:e.color,disabled:e.disabled,fluid:e.fluid,form:e.form,label:e.label,messages:e.messages,"message-type":e.messageType,name:e.name,orientation:e.orientation,placeholder:e.placeholder||(e.isRange?"YYYY/MM/DD - YYYY/MM/DD":"YYYY/MM/DD"),required:e.required,rounded:e.rounded,size:e.size,suffix:p(I).Calendar,"suffix-aria-label":e.ariaLabel||"Open calendar","test-id":e.testId,variant:e.variant,onInput:Q,onChange:W,onSuffixClick:G},null,8,["id","modelValue","aria-label","border-radius","busy","color","disabled","fluid","form","label","messages","message-type","name","orientation","placeholder","required","rounded","size","suffix","suffix-aria-label","test-id","variant"]),p(x)?(i(),o("div",{key:0,ref_key:"popoverRef",ref:S,class:r(`${V}__popover`),style:v({...p(U),zIndex:100})},[f(p(D),{"border-radius":e.borderRadius,variant:p(L).Ghost,padded:!1,rounded:e.rounded,elevated:""},{default:b(()=>[y("div",{class:r(`${V}__calendar-container`)},[f(p(R),{ref_key:"calendarRef",ref:B,modelValue:$.value,"onUpdate:modelValue":l[1]||(l[1]=e=>$.value=e),disabled:e.disabled,busy:e.busy,"is-range":e.isRange,fluid:"",onDateSelect:J},null,8,["modelValue","disabled","busy","is-range"])],2)]),_:1},8,["border-radius","variant","rounded"])],6)):m("",!0)],2))}});export{S as CLInputDatePicker,S as default};

package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.vue.d.ts

@@ -70,14 +70,15 @@ declare const _default: import('vue').DefineComponent<{
         start: string | null;
     } | null) => any) | undefined;
 }>, {
+    form: string;
+    label: string;
+    isRange: boolean;
     size: CLSizes;
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
     fluid: boolean;
     rounded: boolean;
     testId: string;
-    form: string;
-    label: string;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;
@@ -87,7 +88,6 @@ declare const _default: import('vue').DefineComponent<{
     busy: boolean;
     disabled: boolean;
     placeholder: string;
-    isRange: boolean;
     orientation: CLOrientation;
     messages: string[];
     messageType: CLColors;
@@ -104,6 +104,9 @@ declare const _default: import('vue').DefineComponent<{
         reset: (...args: any[]) => void;
         "update:modelValue": (value: string | number) => void;
     }, import('vue').PublicProps, {
+        form: string;
+        label: string;
+        pattern: string;
         size: CLSizes;
         color: CLColors;
         variant: CLColorVariants.Outline | CLColorVariants.Ghost;
@@ -111,9 +114,6 @@ declare const _default: import('vue').DefineComponent<{
         rounded: boolean;
         testId: string;
         type: import('@codeandfunction/callaloo-types').CLInputTypes;
-        form: string;
-        label: string;
-        pattern: string;
         onFocus: CLGenericFocusFunction;
         onBlur: CLGenericFocusFunction;
         onChange: CLGenericFunction;
@@ -158,6 +158,9 @@ declare const _default: import('vue').DefineComponent<{
     }>, {
         inputRef: Readonly<globalThis.ShallowRef<HTMLInputElement | null>>;
     }, {}, {}, {}, {
+        form: string;
+        label: string;
+        pattern: string;
         size: CLSizes;
         color: CLColors;
         variant: CLColorVariants.Outline | CLColorVariants.Ghost;
@@ -165,9 +168,6 @@ declare const _default: import('vue').DefineComponent<{
         rounded: boolean;
         testId: string;
         type: import('@codeandfunction/callaloo-types').CLInputTypes;
-        form: string;
-        label: string;
-        pattern: string;
         onFocus: CLGenericFocusFunction;
         onBlur: CLGenericFocusFunction;
         onChange: CLGenericFunction;
@@ -199,13 +199,13 @@ declare const _default: import('vue').DefineComponent<{
     popoverRef: HTMLDivElement;
     calendarRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
         modelValue?: {
-            end: import('../../../composables/useDatePicker').ISODate | null;
-            start: import('../../../composables/useDatePicker').ISODate | null;
+            end: import('../../../index.ts').CLISODate | null;
+            start: import('../../../index.ts').CLISODate | null;
         } | null;
     } & import('../CLCalendar/CLCalendar.vue').CLCalendarProps> & Readonly<{
         "onUpdate:modelValue"?: ((value: {
-            end: import('../../../composables/useDatePicker').ISODate | null;
-            start: import('../../../composables/useDatePicker').ISODate | null;
+            end: import('../../../index.ts').CLISODate | null;
+            start: import('../../../index.ts').CLISODate | null;
         } | null) => any) | undefined;
         "onDate-select"?: ((date: string) => any) | undefined;
     }>, {
@@ -217,18 +217,19 @@ declare const _default: import('vue').DefineComponent<{
         reset: () => void;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         "update:modelValue": (value: {
-            end: import('../../../composables/useDatePicker').ISODate | null;
-            start: import('../../../composables/useDatePicker').ISODate | null;
+            end: import('../../../index.ts').CLISODate | null;
+            start: import('../../../index.ts').CLISODate | null;
         } | null) => any;
         "date-select": (date: string) => any;
     }, import('vue').PublicProps, {
+        width: string;
+        allowedDates: import('../../../index.ts').CLAllowedDates;
+        isRange: boolean;
         color: CLColors;
         fluid: boolean;
         testId: string;
-        width: string;
         busy: boolean;
         disabled: boolean;
-        isRange: boolean;
     }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -238,13 +239,13 @@ declare const _default: import('vue').DefineComponent<{
         Defaults: {};
     }, Readonly<{
         modelValue?: {
-            end: import('../../../composables/useDatePicker').ISODate | null;
-            start: import('../../../composables/useDatePicker').ISODate | null;
+            end: import('../../../index.ts').CLISODate | null;
+            start: import('../../../index.ts').CLISODate | null;
         } | null;
     } & import('../CLCalendar/CLCalendar.vue').CLCalendarProps> & Readonly<{
         "onUpdate:modelValue"?: ((value: {
-            end: import('../../../composables/useDatePicker').ISODate | null;
-            start: import('../../../composables/useDatePicker').ISODate | null;
+            end: import('../../../index.ts').CLISODate | null;
+            start: import('../../../index.ts').CLISODate | null;
         } | null) => any) | undefined;
         "onDate-select"?: ((date: string) => any) | undefined;
     }>, {
@@ -255,13 +256,14 @@ declare const _default: import('vue').DefineComponent<{
         initializeDraft: () => void;
         reset: () => void;
     }, {}, {}, {}, {
+        width: string;
+        allowedDates: import('../../../index.ts').CLAllowedDates;
+        isRange: boolean;
         color: CLColors;
         fluid: boolean;
         testId: string;
-        width: string;
         busy: boolean;
         disabled: boolean;
-        isRange: boolean;
     }> | null;
 }, HTMLDivElement>;
 export default _default;

package/dist/components/Form/CLInputTimePicker/CLInputTimePicker.vue.d.ts

@@ -60,14 +60,14 @@ declare const _default: import('vue').DefineComponent<{
 } & CLInputTimePickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
+    form: string;
+    label: string;
     size: CLSizes;
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
     fluid: boolean;
     rounded: boolean;
     testId: string;
-    form: string;
-    label: string;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;
@@ -95,6 +95,9 @@ declare const _default: import('vue').DefineComponent<{
         reset: (...args: any[]) => void;
         "update:modelValue": (value: string | number) => void;
     }, import('vue').PublicProps, {
+        form: string;
+        label: string;
+        pattern: string;
         size: CLSizes;
         color: CLColors;
         variant: CLColorVariants.Outline | CLColorVariants.Ghost;
@@ -102,9 +105,6 @@ declare const _default: import('vue').DefineComponent<{
         rounded: boolean;
         testId: string;
         type: import('@codeandfunction/callaloo-types').CLInputTypes;
-        form: string;
-        label: string;
-        pattern: string;
         onFocus: CLGenericFocusFunction;
         onBlur: CLGenericFocusFunction;
         onChange: CLGenericFunction;
@@ -149,6 +149,9 @@ declare const _default: import('vue').DefineComponent<{
     }>, {
         inputRef: Readonly<globalThis.ShallowRef<HTMLInputElement | null>>;
     }, {}, {}, {}, {
+        form: string;
+        label: string;
+        pattern: string;
         size: CLSizes;
         color: CLColors;
         variant: CLColorVariants.Outline | CLColorVariants.Ghost;
@@ -156,9 +159,6 @@ declare const _default: import('vue').DefineComponent<{
         rounded: boolean;
         testId: string;
         type: import('@codeandfunction/callaloo-types').CLInputTypes;
-        form: string;
-        label: string;
-        pattern: string;
         onFocus: CLGenericFocusFunction;
         onBlur: CLGenericFocusFunction;
         onChange: CLGenericFunction;
@@ -206,10 +206,10 @@ declare const _default: import('vue').DefineComponent<{
         "update:modelValue": (value: string | null) => any;
         "time-select": (time: string) => any;
     }, import('vue').PublicProps, {
+        width: string;
         color: CLColors;
         fluid: boolean;
         testId: string;
-        width: string;
         use24Hour: boolean;
         busy: boolean;
         disabled: boolean;
@@ -236,10 +236,10 @@ declare const _default: import('vue').DefineComponent<{
         initializeDraft: () => void;
         reset: () => void;
     }, {}, {}, {}, {
+        width: string;
         color: CLColors;
         fluid: boolean;
         testId: string;
-        width: string;
         use24Hour: boolean;
         busy: boolean;
         disabled: boolean;

package/dist/components/Form/CLInputTimePicker/index.d.ts

@@ -8,14 +8,14 @@ export declare const CLInputTimePicker: import('vue').DefineComponent<{
 } & import('./CLInputTimePicker.vue').CLInputTimePickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
+    form: string;
+    label: string;
     size: import('@codeandfunction/callaloo-tokens').CLSizes;
     color: import('@codeandfunction/callaloo-tokens').CLColors;
     variant: import("@codeandfunction/callaloo-tokens").CLColorVariants.Outline | import("@codeandfunction/callaloo-tokens").CLColorVariants.Ghost;
     fluid: boolean;
     rounded: boolean;
     testId: string;
-    form: string;
-    label: string;
     onFocus: import('../../..').CLGenericFocusFunction;
     onBlur: import('../../..').CLGenericFocusFunction;
     onChange: import('../../..').CLGenericFunction;
@@ -43,6 +43,9 @@ export declare const CLInputTimePicker: import('vue').DefineComponent<{
         reset: (...args: any[]) => void;
         "update:modelValue": (value: string | number) => void;
     }, import('vue').PublicProps, {
+        form: string;
+        label: string;
+        pattern: string;
         size: import('@codeandfunction/callaloo-tokens').CLSizes;
         color: import('@codeandfunction/callaloo-tokens').CLColors;
         variant: import("@codeandfunction/callaloo-tokens").CLColorVariants.Outline | import("@codeandfunction/callaloo-tokens").CLColorVariants.Ghost;
@@ -50,9 +53,6 @@ export declare const CLInputTimePicker: import('vue').DefineComponent<{
         rounded: boolean;
         testId: string;
         type: import('@codeandfunction/callaloo-types').CLInputTypes;
-        form: string;
-        label: string;
-        pattern: string;
         onFocus: import('../../..').CLGenericFocusFunction;
         onBlur: import('../../..').CLGenericFocusFunction;
         onChange: import('../../..').CLGenericFunction;
@@ -97,6 +97,9 @@ export declare const CLInputTimePicker: import('vue').DefineComponent<{
     }>, {
         inputRef: Readonly<globalThis.ShallowRef<HTMLInputElement | null>>;
     }, {}, {}, {}, {
+        form: string;
+        label: string;
+        pattern: string;
         size: import('@codeandfunction/callaloo-tokens').CLSizes;
         color: import('@codeandfunction/callaloo-tokens').CLColors;
         variant: import("@codeandfunction/callaloo-tokens").CLColorVariants.Outline | import("@codeandfunction/callaloo-tokens").CLColorVariants.Ghost;
@@ -104,9 +107,6 @@ export declare const CLInputTimePicker: import('vue').DefineComponent<{
         rounded: boolean;
         testId: string;
         type: import('@codeandfunction/callaloo-types').CLInputTypes;
-        form: string;
-        label: string;
-        pattern: string;
         onFocus: import('../../..').CLGenericFocusFunction;
         onBlur: import('../../..').CLGenericFocusFunction;
         onChange: import('../../..').CLGenericFunction;
@@ -154,10 +154,10 @@ export declare const CLInputTimePicker: import('vue').DefineComponent<{
         "update:modelValue": (value: string | null) => any;
         "time-select": (time: string) => any;
     }, import('vue').PublicProps, {
+        width: string;
         color: import('@codeandfunction/callaloo-tokens').CLColors;
         fluid: boolean;
         testId: string;
-        width: string;
         use24Hour: boolean;
         busy: boolean;
         disabled: boolean;
@@ -184,10 +184,10 @@ export declare const CLInputTimePicker: import('vue').DefineComponent<{
         initializeDraft: () => void;
         reset: () => void;
     }, {}, {}, {}, {
+        width: string;
         color: import('@codeandfunction/callaloo-tokens').CLColors;
         fluid: boolean;
         testId: string;
-        width: string;
         use24Hour: boolean;
         busy: boolean;
         disabled: boolean;

package/dist/components/Form/CLTimePicker/CLTimePicker.vue.d.ts

@@ -38,10 +38,10 @@ declare const _default: import('vue').DefineComponent<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onTime-select"?: ((time: string) => any) | undefined;
 }>, {
+    width: string;
     color: CLColors;
     fluid: boolean;
     testId: string;
-    width: string;
     use24Hour: boolean;
     busy: boolean;
     disabled: boolean;

package/dist/components/Form/CLTimePicker/index.d.ts

@@ -19,10 +19,10 @@ export declare const CLTimePicker: import('vue').DefineComponent<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onTime-select"?: ((time: string) => any) | undefined;
 }>, {
+    width: string;
     color: import('@codeandfunction/callaloo-tokens').CLColors;
     fluid: boolean;
     testId: string;
-    width: string;
     use24Hour: boolean;
     busy: boolean;
     disabled: boolean;

package/dist/components/Indicators/CLBanner/CLBanner.vue.d.ts

@@ -36,12 +36,12 @@ export interface CLBannerProps {
     variant?: CLColorVariants.Ghost | CLColorVariants.Outline | CLColorVariants.Soft | CLColorVariants.Solid;
 }
 declare const _default: import('vue').DefineComponent<CLBannerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLBannerProps> & Readonly<{}>, {
+    width: string;
+    height: string;
     color: CLColors;
     variant: CLColorVariants.Ghost | CLColorVariants.Outline | CLColorVariants.Soft | CLColorVariants.Solid;
     rounded: boolean;
     testId: string;
-    width: string;
-    height: string;
     align: CLAlign;
     busy: boolean;
     bordered: boolean;

package/dist/components/Loading/CLSkeleton/CLSkeleton.vue.d.ts

@@ -12,9 +12,9 @@ export interface CLSkeletonProps {
     width?: string;
 }
 declare const _default: import('vue').DefineComponent<CLSkeletonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLSkeletonProps> & Readonly<{}>, {
-    rounded: boolean;
-    testId: string;
     width: string;
     height: string;
+    rounded: boolean;
+    testId: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Modals/CLModal/CLModal.vue.d.ts

@@ -38,9 +38,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
     "onModal-open"?: (() => any) | undefined;
     "onModal-close"?: (() => any) | undefined;
 }>, {
+    title: string;
     close: boolean;
     testId: string;
-    title: string;
     borderRadius: CLBorderRadius;
     overlay: boolean;
     dismissible: boolean;

package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLModalDatePicker.css';
-import{defineComponent as e,mergeModels as a,ref as t,computed as l,useModel as i,onMounted as d,onBeforeUnmount as o,createBlock as r,openBlock as u,withCtx as n,createElementVNode as s,normalizeClass as b,unref as c,createCommentVNode as f,createVNode as p,createElementBlock as m,createTextVNode as _,toDisplayString as v,nextTick as y}from"vue";import{_ as h}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-pE0JrYmS.js";import{_ as L}from"../../../chunks/CLFormField.vue_vue_type_style_index_0_lang-Rf_Mo_VS.js";import{_ as k}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-DoM5X-sA.js";import{_ as $}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-DLUfvRC_.js";import{_ as g}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-PiGGhTHo.js";import{c as X,e as C,f as B,h as R,a as z,b as S}from"../../../chunks/index-DsloP0ml.js";import{a as w}from"../../../chunks/index-wkMXT2wB.js";import{i as x}from"../../../chunks/helper-BlxFN3eF.js";import{useDatePicker as q}from"../../../composables/useDatePicker.js";const F=["data-testid"],V=["name","value","required"],j=/* @__PURE__ */e({name:"CLModalDatePicker",__name:"CLModalDatePicker",props:/* @__PURE__ */a({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:S.Primary},buttonLabel:{default:"Select dates"},buttonSize:{default:X.Small},buttonVariant:{default:z.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},isRange:{type:Boolean,default:!0},label:{default:void 0},name:{default:void 0},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{},orientation:{default:w.Vertical},required:{type:Boolean,default:!1},testId:{default:"clll-date-picker-modal"},title:{default:"Select dates"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,j="clll-date-picker-modal",M=t(!1),E=l(()=>`date-picker-modal-${a.id}`),P=t(),D=i(e,"modelValue"),{rangeLabel:W}=q({appliedStart:l(()=>D.value?.start??null),appliedEnd:l(()=>D.value?.end??null),isRange:a.isRange}),A=t(!1),I=()=>{x&&(A.value=window.innerWidth<480)},N=()=>{if(a.disabled||a.busy)return;I(),M.value=!0,y(()=>{P.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});a.onFocus?.(e)},G=()=>{M.value=!1,P.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});a.onBlur?.(e)},T=()=>{P.value?.apply(),M.value=!1,a.onChange?.()},H=()=>{P.value?.reset(),a.onReset?.()},O=l(()=>A.value);d(()=>{x&&(I(),window.addEventListener("resize",I))}),o(()=>{x&&window.removeEventListener("resize",I)});const U={[X.Tiny]:C.Tiny,[X.Small]:C.Small,[X.Medium]:C.Medium,[X.Large]:C.Large,[X.XL]:C.XL,[X.XXL]:C.XXL,[X.XXXL]:C.XXXL,[X.XXXXL]:C.XXXXL},J=l(()=>[j,a.buttonBorderRadius?`${j}--${a.buttonBorderRadius}`:"",a.busy?`${j}--busy`:`${j}--ready`,`${j}--${a.buttonColor}`,`${j}--${a.buttonSize}`,`${j}--${a.buttonVariant}`,a.disabled||a.busy?`${j}--disabled`:`${j}--active`,a.fluid||a.orientation===w.Horizontal?`${j}--fluid`:`${j}--fixed`,a.label?`${j}--haslabel`:"",a.orientation?`${j}--${a.orientation}`:"",a.required?`${j}--required`:`${j}--optional`]),K=l(()=>{const e=P.value?.draftStart,t=P.value?.draftEnd;return a.isRange?!!e&&!!t:!!e});return(a,t)=>(u(),r(L,{fluid:e.fluid,orientation:e.orientation},{default:n(()=>[s("div",{class:b(c(J)),"data-testid":e.testId},[e.label?(u(),r(k,{key:0,"css-prefix":j,"html-for":e.id,label:e.label,required:e.required,size:e.buttonSize,onClick:N},null,8,["html-for","label","required","size"])):f("",!0),p(c(h),{id:e.id,"aria-label":e.buttonAriaLabel||"Open date picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":c(B).Calendar,"icon-size":U[e.buttonSize],"on-click":N,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:n(()=>[_(v(c(W)||e.buttonLabel),1)]),_:1},8,["id","aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),e.name||e.required?(u(),m("input",{key:1,class:b(`${j}__hidden-input`),name:e.name,value:c(W)||"",required:e.required,tabindex:"-1","aria-hidden":"true"},null,10,V)):f("",!0),p(c($),{"border-radius":c(O)?c(R).None:c(R).Medium,fullscreen:c(O),"is-open":c(M),"max-width":"336px","modal-id":c(E),"on-close":G,title:e.title},{body:n(()=>[p(c(g),{ref_key:"calendarRef",ref:P,modelValue:D.value,"onUpdate:modelValue":t[0]||(t[0]=e=>D.value=e),busy:e.busy,disabled:e.disabled,fluid:c(O),"is-range":e.isRange},null,8,["modelValue","busy","disabled","fluid","is-range"])]),footer:n(()=>[s("div",{class:b(`${j}__footer-actions`)},[p(c(h),{"border-radius":e.buttonBorderRadius,color:c(S).Neutral,"on-click":G,variant:c(z).Ghost},{default:n(()=>[...t[1]||(t[1]=[_(" Cancel ",-1)])]),_:1},8,["border-radius","color","variant"]),s("div",{class:b(`${j}__footer-right`)},[p(c(h),{"border-radius":e.buttonBorderRadius,color:c(S).Neutral,disabled:!c(P)?.draftStart&&!c(P)?.draftEnd,"on-click":H,variant:c(z).Ghost},{default:n(()=>[...t[2]||(t[2]=[_(" Reset ",-1)])]),_:1},8,["border-radius","color","disabled","variant"]),p(c(h),{"border-radius":e.buttonBorderRadius,color:c(S).Primary,disabled:!c(K),"on-click":T},{default:n(()=>[...t[3]||(t[3]=[_(" Apply ",-1)])]),_:1},8,["border-radius","color","disabled"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,F)]),_:1},8,["fluid","orientation"]))}});export{j as CLModalDatePicker,j as default};
+import{defineComponent as e,mergeModels as a,ref as t,computed as l,useModel as d,toRef as o,onMounted as i,onBeforeUnmount as r,createBlock as u,openBlock as n,withCtx as s,createElementVNode as b,normalizeClass as c,unref as f,createCommentVNode as p,createVNode as m,createElementBlock as _,createTextVNode as v,toDisplayString as y,nextTick as h}from"vue";import{_ as L}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-pE0JrYmS.js";import{_ as k}from"../../../chunks/CLFormField.vue_vue_type_style_index_0_lang-Rf_Mo_VS.js";import{_ as $}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-DoM5X-sA.js";import{_ as w}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-DLUfvRC_.js";import{_ as g}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-DUc5dHAZ.js";import{c as X,e as C,f as B,h as R,a as z,b as S}from"../../../chunks/index-DsloP0ml.js";import{a as x}from"../../../chunks/index-wkMXT2wB.js";import{i as D}from"../../../chunks/helper-BlxFN3eF.js";import{useDatePicker as F}from"../../../composables/useDatePicker.js";const j=["data-testid"],q=["name","value","required"],V=/* @__PURE__ */e({name:"CLModalDatePicker",__name:"CLModalDatePicker",props:/* @__PURE__ */a({allowedDates:{type:[Array,Object,Function],default:void 0},buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:S.Primary},buttonLabel:{default:"Select dates"},buttonSize:{default:X.Small},buttonVariant:{default:z.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},isRange:{type:Boolean,default:!0},label:{default:void 0},name:{default:void 0},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{},orientation:{default:x.Vertical},required:{type:Boolean,default:!1},testId:{default:"clll-date-picker-modal"},title:{default:"Select dates"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,V="clll-date-picker-modal",M=t(!1),E=l(()=>`date-picker-modal-${a.id}`),P=t(),W=d(e,"modelValue"),{rangeLabel:A}=F({allowedDates:o(a,"allowedDates"),appliedStart:l(()=>W.value?.start??null),appliedEnd:l(()=>W.value?.end??null),isRange:a.isRange}),I=t(!1),N=()=>{D&&(I.value=window.innerWidth<480)},G=()=>{if(a.disabled||a.busy)return;N(),M.value=!0,h(()=>{P.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});a.onFocus?.(e)},O=()=>{M.value=!1,P.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});a.onBlur?.(e)},T=()=>{P.value?.apply(),M.value=!1,a.onChange?.()},H=()=>{P.value?.reset(),a.onReset?.()},U=l(()=>I.value);i(()=>{D&&(N(),window.addEventListener("resize",N))}),r(()=>{D&&window.removeEventListener("resize",N)});const J={[X.Tiny]:C.Tiny,[X.Small]:C.Small,[X.Medium]:C.Medium,[X.Large]:C.Large,[X.XL]:C.XL,[X.XXL]:C.XXL,[X.XXXL]:C.XXXL,[X.XXXXL]:C.XXXXL},K=l(()=>[V,a.buttonBorderRadius?`${V}--${a.buttonBorderRadius}`:"",a.busy?`${V}--busy`:`${V}--ready`,`${V}--${a.buttonColor}`,`${V}--${a.buttonSize}`,`${V}--${a.buttonVariant}`,a.disabled||a.busy?`${V}--disabled`:`${V}--active`,a.fluid||a.orientation===x.Horizontal?`${V}--fluid`:`${V}--fixed`,a.label?`${V}--haslabel`:"",a.orientation?`${V}--${a.orientation}`:"",a.required?`${V}--required`:`${V}--optional`]),Q=l(()=>{const e=P.value?.draftStart,t=P.value?.draftEnd;return a.allowedDates?!!e:a.isRange?!!e&&!!t:!!e});return(a,t)=>(n(),u(k,{fluid:e.fluid,orientation:e.orientation},{default:s(()=>[b("div",{class:c(f(K)),"data-testid":e.testId},[e.label?(n(),u($,{key:0,"css-prefix":V,"html-for":e.id,label:e.label,required:e.required,size:e.buttonSize,onClick:G},null,8,["html-for","label","required","size"])):p("",!0),m(f(L),{id:e.id,"aria-label":e.buttonAriaLabel||"Open date picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":f(B).Calendar,"icon-size":J[e.buttonSize],"on-click":G,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:s(()=>[v(y(f(A)||e.buttonLabel),1)]),_:1},8,["id","aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),e.name||e.required?(n(),_("input",{key:1,class:c(`${V}__hidden-input`),name:e.name,value:f(A)||"",required:e.required,tabindex:"-1","aria-hidden":"true"},null,10,q)):p("",!0),m(f(w),{"border-radius":f(U)?f(R).None:f(R).Medium,fullscreen:f(U),"is-open":f(M),"max-width":"336px","modal-id":f(E),"on-close":O,title:e.title},{body:s(()=>[m(f(g),{ref_key:"calendarRef",ref:P,modelValue:W.value,"onUpdate:modelValue":t[0]||(t[0]=e=>W.value=e),"allowed-dates":e.allowedDates,busy:e.busy,disabled:e.disabled,fluid:f(U),"is-range":!e.allowedDates&&e.isRange},null,8,["modelValue","allowed-dates","busy","disabled","fluid","is-range"])]),footer:s(()=>[b("div",{class:c(`${V}__footer-actions`)},[m(f(L),{"border-radius":e.buttonBorderRadius,color:f(S).Neutral,"on-click":O,variant:f(z).Ghost},{default:s(()=>[...t[1]||(t[1]=[v(" Cancel ",-1)])]),_:1},8,["border-radius","color","variant"]),b("div",{class:c(`${V}__footer-right`)},[m(f(L),{"border-radius":e.buttonBorderRadius,color:f(S).Neutral,disabled:!f(P)?.draftStart&&!f(P)?.draftEnd,"on-click":H,variant:f(z).Ghost},{default:s(()=>[...t[2]||(t[2]=[v(" Reset ",-1)])]),_:1},8,["border-radius","color","disabled","variant"]),m(f(L),{"border-radius":e.buttonBorderRadius,color:f(S).Primary,disabled:!f(Q),"on-click":T},{default:s(()=>[...t[3]||(t[3]=[v(" Apply ",-1)])]),_:1},8,["border-radius","color","disabled"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,j)]),_:1},8,["fluid","orientation"]))}});export{V as CLModalDatePicker,V as default};