@codeandfunction/callaloo 4.9.6 → 4.9.8

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 d,onMounted as n,onBeforeUnmount as o,createElementBlock as s,openBlock as i,normalizeClass as r,createVNode as f,createCommentVNode as m,unref as p,isRef as v,normalizeStyle as c,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-BGKjh5vA.js";import{CLInput as Y}from"../CLInput/CLInput.js";import{_ as R}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-BqrGuMVB.js";import{CLIconNames as I,CLColorVariants as L,CLPlacement as V,CLOrientation as M,CLSizes as x,CLColors as B}from"../../../index.js";import{i as j}from"../../../chunks/helper-C542dSLs.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:B.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:M.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",M=l(!1),x=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=d(()=>x.value?.$el),{floatingStyles:U}=g(P,S,{middleware:[h(8),k(),C()],placement:l(a.placement),whileElementsMounted:_,open:M}),G=()=>{a.disabled||a.busy||(M.value=!M.value,M.value?(a.onFocus?.(new FocusEvent("focus")),B.value?.initializeDraft()):a.onBlur?.(new FocusEvent("blur")))},H=d(()=>{const e=B.value?.draftStart,l=B.value?.draftEnd;return a.isRange?!!e&&!!l:!!e}),N=()=>{M.value&&(M.value=!1,a.onBlur?.(new FocusEvent("blur")))};E({escHandler:N});const A=e=>{const a=e.target,l=x.value?.$el,t=S.value;M.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=x.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 n(()=>{j&&document.addEventListener("click",A)}),o(()=>{j&&document.removeEventListener("click",A)}),(a,l)=>(i(),s("div",{class:r([V,e.fluid?`${V}--fluid`:""])},[f(p(Y),{ref_key:"inputRef",ref:x,modelValue:p(z),"onUpdate:modelValue":l[0]||(l[0]=e=>v(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,id:e.id,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,["modelValue","aria-label","border-radius","busy","color","disabled","fluid","form","id","label","messages","message-type","name","orientation","placeholder","required","rounded","size","suffix","suffix-aria-label","test-id","variant"]),p(M)?(i(),s("div",{key:0,ref_key:"popoverRef",ref:S,class:r(`${V}__popover`),style:c({...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,onDateSelect:J,fluid:""},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 d,onMounted as n,onBeforeUnmount as o,createElementBlock as s,openBlock as i,normalizeClass as r,createVNode as f,createCommentVNode as m,unref as p,isRef as v,normalizeStyle as c,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-BGKjh5vA.js";import{CLInput as Y}from"../CLInput/CLInput.js";import{_ as R}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-BqrGuMVB.js";import{CLIconNames as I,CLColorVariants as L,CLPlacement as V,CLOrientation as M,CLSizes as x,CLColors as B}from"../../../index.js";import{i as j}from"../../../chunks/helper-C542dSLs.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:B.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:M.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",M=l(!1),x=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=d(()=>x.value?.$el),{floatingStyles:U}=g(P,S,{middleware:[h(8),k(),C()],placement:l(a.placement),whileElementsMounted:_,open:M}),G=()=>{a.disabled||a.busy||(M.value=!M.value,M.value?(a.onFocus?.(new FocusEvent("focus")),B.value?.initializeDraft()):a.onBlur?.(new FocusEvent("blur")))},H=d(()=>{const e=B.value?.draftStart,l=B.value?.draftEnd;return a.isRange?!!e&&!!l:!!e}),N=()=>{M.value&&(M.value=!1,a.onBlur?.(new FocusEvent("blur")))};E({escHandler:N});const A=e=>{const a=e.target,l=x.value?.$el,t=S.value;M.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=x.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 n(()=>{j&&document.addEventListener("click",A)}),o(()=>{j&&document.removeEventListener("click",A)}),(a,l)=>(i(),s("div",{class:r([V,e.fluid?`${V}--fluid`:""])},[f(p(Y),{id:e.id,ref_key:"inputRef",ref:x,modelValue:p(z),"onUpdate:modelValue":l[0]||(l[0]=e=>v(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(M)?(i(),s("div",{key:0,ref_key:"popoverRef",ref:S,class:r(`${V}__popover`),style:c({...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/Indicators/CLBanner/CLBanner.css

@@ -1 +1 @@
-.clll-banner{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;padding:var(--clll-py-3xl) var(--clll-px-2xl);background-color:var(--clll-banner-bg-color, transparent);border-color:var(--clll-banner-border-color, transparent)}.clll-banner .clll-banner__content{position:relative;display:flex;align-items:center;z-index:var(--clll-z-index-10);flex-wrap:wrap;flex:1 1 0%}.clll-banner .clll-banner__content .clll-banner__nested_content{display:flex;flex-direction:column;flex-grow:1;gap:var(--clll-unit-0_5)}.clll-banner .clll-banner__content .clll-banner__action-button{display:flex;justify-content:flex-end;flex-grow:1}.clll-banner .clll-banner__content .clll-heading,.clll-banner .clll-banner__content .clll-text{color:var(--clll-banner-text-color, inherit)}.clll-banner.clll-banner--dismissable .clll-banner__content{padding-right:var(--clll-unit-14)}.clll-banner.clll-banner--dismissable .clll-banner__dismiss-button{position:absolute;top:var(--clll-unit-4);right:var(--clll-unit-4);z-index:var(--clll-z-index-10)}.clll-banner.clll-banner--actionable .clll-banner__content{gap:var(--clll-px-md)}.clll-banner.clll-banner--rounded{border-radius:var(--clll-rounded-sm)}.clll-banner.clll-banner--rounded.clll-banner--rounded-full,.clll-banner.clll-banner--rounded.clll-banner--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-banner.clll-banner--rounded.clll-banner--rounded-lg,.clll-banner.clll-banner--rounded.clll-banner--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-banner.clll-banner--rounded.clll-banner--rounded-md,.clll-banner.clll-banner--rounded.clll-banner--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-banner.clll-banner--rounded.clll-banner--rounded-sm,.clll-banner.clll-banner--rounded.clll-banner--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-banner.clll-banner--rounded.clll-banner--rounded-xs,.clll-banner.clll-banner--rounded.clll-banner--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-banner.clll-banner--rounded.clll-banner--rounded-xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-2xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-3xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-none,.clll-banner.clll-banner--rounded.clll-banner--rounded-none .clll-{border-radius:0}.clll-banner.clll-banner--rounded:not([class*=clll-banner--rounded-]){border-radius:var(--clll-banner-theme-radius, var(--clll-rounded-sm))}.clll-banner.clll-banner--busy{pointer-events:none}.clll-banner.clll-banner--align-left{text-align:left}.clll-banner.clll-banner--align-center{text-align:center}.clll-banner.clll-banner--align-right{text-align:right}.clll-banner.clll-banner--bordered{border-style:solid;border-top-width:1px;border-left-width:1px;border-right-width:1px;border-bottom-width:.25rem}.clll-banner .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
+.clll-banner{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;padding:var(--clll-py-3xl) var(--clll-px-2xl);background-color:var(--clll-banner-bg-color, transparent);border-color:var(--clll-banner-border-color, transparent);min-height:var(--clll-unit-14_5)}.clll-banner .clll-banner__content{position:relative;display:flex;align-items:center;z-index:var(--clll-z-index-10);flex-wrap:wrap;flex:1 1 0%}.clll-banner .clll-banner__content .clll-banner__nested_content{display:flex;flex-direction:column;flex-grow:1;gap:var(--clll-unit-0_5)}.clll-banner .clll-banner__content .clll-banner__action-button{display:flex;justify-content:flex-end;flex-grow:1}.clll-banner .clll-banner__content .clll-heading,.clll-banner .clll-banner__content .clll-text{color:var(--clll-banner-text-color, inherit)}.clll-banner.clll-banner--dismissable .clll-banner__content{padding-right:var(--clll-unit-14)}.clll-banner.clll-banner--dismissable .clll-banner__dismiss-button{position:absolute;top:var(--clll-unit-2);right:var(--clll-unit-2);z-index:var(--clll-z-index-10)}.clll-banner.clll-banner--actionable .clll-banner__content{gap:var(--clll-px-md)}.clll-banner.clll-banner--rounded{border-radius:var(--clll-rounded-sm)}.clll-banner.clll-banner--rounded.clll-banner--rounded-full,.clll-banner.clll-banner--rounded.clll-banner--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-banner.clll-banner--rounded.clll-banner--rounded-lg,.clll-banner.clll-banner--rounded.clll-banner--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-banner.clll-banner--rounded.clll-banner--rounded-md,.clll-banner.clll-banner--rounded.clll-banner--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-banner.clll-banner--rounded.clll-banner--rounded-sm,.clll-banner.clll-banner--rounded.clll-banner--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-banner.clll-banner--rounded.clll-banner--rounded-xs,.clll-banner.clll-banner--rounded.clll-banner--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-banner.clll-banner--rounded.clll-banner--rounded-xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-2xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-3xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-none,.clll-banner.clll-banner--rounded.clll-banner--rounded-none .clll-{border-radius:0}.clll-banner.clll-banner--rounded:not([class*=clll-banner--rounded-]){border-radius:var(--clll-banner-theme-radius, var(--clll-rounded-sm))}.clll-banner.clll-banner--busy{pointer-events:none}.clll-banner.clll-banner--align-left{text-align:left}.clll-banner.clll-banner--align-center{text-align:center}.clll-banner.clll-banner--align-right{text-align:right}.clll-banner.clll-banner--bordered{border-style:solid;border-top-width:1px;border-left-width:1px;border-right-width:1px;border-bottom-width:.25rem}.clll-banner .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

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 d,onMounted as o,onBeforeUnmount as i,createElementBlock as u,openBlock as n,normalizeClass as r,unref as s,createVNode as b,withCtx as c,createTextVNode as f,toDisplayString as p,createElementVNode as v,nextTick as m}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-hEXnJ7H1.js";import{_}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-DroQPRWC.js";import{_ as L}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-BqrGuMVB.js";import{CLSizes as X,CLIconSizes as $,CLIconNames as g,CLBorderRadius as k,CLColorVariants as h,CLColors as C}from"../../../index.js";import{i as w}from"../../../chunks/helper-C542dSLs.js";import{useDatePicker as B}from"../../../composables/useDatePicker.js";const S=["data-testid"],z=/* @__PURE__ */e({name:"CLModalDatePicker",__name:"CLModalDatePicker",props:/* @__PURE__ */a({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:C.Primary},buttonLabel:{default:"Select dates"},buttonSize:{default:X.Small},buttonVariant:{default:h.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},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},rounded:{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,z="clll-date-picker-modal",R=t(!1),x=l(()=>`date-picker-modal-${a.id}`),V=t(),M=d(e,"modelValue"),{rangeLabel:E}=B({appliedStart:l(()=>M.value?.start??null),appliedEnd:l(()=>M.value?.end??null),isRange:a.isRange}),F=t(!1),j=()=>{w&&(F.value=window.innerWidth<480)},P=()=>{if(a.disabled||a.busy)return;j(),R.value=!0,m(()=>{V.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});a.onFocus?.(e)},D=()=>{R.value=!1,V.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});a.onBlur?.(e)},W=()=>{V.value?.apply(),R.value=!1,a.onChange?.()},A=()=>{V.value?.reset(),a.onChange?.()},I=l(()=>F.value);o(()=>{w&&(j(),window.addEventListener("resize",j))}),i(()=>{w&&window.removeEventListener("resize",j)});const N={[X.Tiny]:$.Tiny,[X.Small]:$.Small,[X.Medium]:$.Medium,[X.Large]:$.Large,[X.XL]:$.XL,[X.XXL]:$.XXL,[X.XXXL]:$.XXXL,[X.XXXXL]:$.XXXXL},G=l(()=>[z,a.buttonBorderRadius?`${z}--${a.buttonBorderRadius}`:"",a.busy?`${z}--busy`:`${z}--ready`,`${z}--${a.buttonColor}`,`${z}--${a.buttonSize}`,`${z}--${a.buttonVariant}`,a.disabled||a.busy?`${z}--disabled`:`${z}--active`,a.fluid?`${z}--fluid`:`${z}--fixed`,a.rounded?`${z}--rounded`:`${z}--box`]),T=l(()=>{const e=V.value?.draftStart,t=V.value?.draftEnd;return a.isRange?!!e&&!!t:!!e});return(a,t)=>(n(),u("div",{class:r(s(G)),"data-testid":e.testId},[b(s(y),{"aria-label":e.buttonAriaLabel||"Open date picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":s(g).Calendar,"icon-size":N[e.buttonSize],"on-click":P,rounded:e.rounded,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:c(()=>[f(p(s(E)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","rounded","test-id","size","variant","width","wrap"]),b(s(_),{"border-radius":s(I)?s(k).None:s(k).Medium,fullscreen:s(I),"is-open":s(R),"max-width":"336px","modal-id":s(x),"on-close":D,title:e.title},{body:c(()=>[b(s(L),{ref_key:"calendarRef",ref:V,modelValue:M.value,"onUpdate:modelValue":t[0]||(t[0]=e=>M.value=e),busy:e.busy,disabled:e.disabled,fluid:s(I),"is-range":e.isRange},null,8,["modelValue","busy","disabled","fluid","is-range"])]),footer:c(()=>[v("div",{class:r(`${z}__footer-actions`)},[b(s(y),{color:s(C).Neutral,"on-click":D,variant:s(h).Ghost},{default:c(()=>[...t[1]||(t[1]=[f(" Cancel ",-1)])]),_:1},8,["color","variant"]),v("div",{class:r(`${z}__footer-right`)},[b(s(y),{color:s(C).Neutral,disabled:!s(V)?.draftStart&&!s(V)?.draftEnd,"on-click":A,variant:s(h).Ghost},{default:c(()=>[...t[2]||(t[2]=[f(" Reset ",-1)])]),_:1},8,["color","disabled","variant"]),b(s(y),{color:s(C).Primary,disabled:!s(T),"on-click":W},{default:c(()=>[...t[3]||(t[3]=[f(" Apply ",-1)])]),_:1},8,["color","disabled"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,S))}});export{z as CLModalDatePicker,z as default};
+import{defineComponent as e,mergeModels as a,ref as t,computed as l,useModel as o,onMounted as d,onBeforeUnmount as i,createElementBlock as u,openBlock as n,normalizeClass as r,unref as s,createVNode as b,withCtx as c,createTextVNode as f,toDisplayString as p,createElementVNode as v,nextTick as m}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-hEXnJ7H1.js";import{_}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-DroQPRWC.js";import{_ as L}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-BqrGuMVB.js";import{CLSizes as X,CLIconSizes as g,CLIconNames as k,CLBorderRadius as $,CLColorVariants as h,CLColors as C}from"../../../index.js";import{i as w}from"../../../chunks/helper-C542dSLs.js";import{useDatePicker as R}from"../../../composables/useDatePicker.js";const S=["data-testid"],B=/* @__PURE__ */e({name:"CLModalDatePicker",__name:"CLModalDatePicker",props:/* @__PURE__ */a({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:C.Primary},buttonLabel:{default:"Select dates"},buttonSize:{default:X.Small},buttonVariant:{default:h.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},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{},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,B="clll-date-picker-modal",z=t(!1),V=l(()=>`date-picker-modal-${a.id}`),x=t(),M=o(e,"modelValue"),{rangeLabel:E}=R({appliedStart:l(()=>M.value?.start??null),appliedEnd:l(()=>M.value?.end??null),isRange:a.isRange}),F=t(!1),j=()=>{w&&(F.value=window.innerWidth<480)},P=()=>{if(a.disabled||a.busy)return;j(),z.value=!0,m(()=>{x.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});a.onFocus?.(e)},D=()=>{z.value=!1,x.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});a.onBlur?.(e)},W=()=>{x.value?.apply(),z.value=!1,a.onChange?.()},A=()=>{x.value?.reset(),a.onReset?.()},I=l(()=>F.value);d(()=>{w&&(j(),window.addEventListener("resize",j))}),i(()=>{w&&window.removeEventListener("resize",j)});const N={[X.Tiny]:g.Tiny,[X.Small]:g.Small,[X.Medium]:g.Medium,[X.Large]:g.Large,[X.XL]:g.XL,[X.XXL]:g.XXL,[X.XXXL]:g.XXXL,[X.XXXXL]:g.XXXXL},G=l(()=>[B,a.buttonBorderRadius?`${B}--${a.buttonBorderRadius}`:"",a.busy?`${B}--busy`:`${B}--ready`,`${B}--${a.buttonColor}`,`${B}--${a.buttonSize}`,`${B}--${a.buttonVariant}`,a.disabled||a.busy?`${B}--disabled`:`${B}--active`,a.fluid?`${B}--fluid`:`${B}--fixed`]),T=l(()=>{const e=x.value?.draftStart,t=x.value?.draftEnd;return a.isRange?!!e&&!!t:!!e});return(a,t)=>(n(),u("div",{class:r(s(G)),"data-testid":e.testId},[b(s(y),{"aria-label":e.buttonAriaLabel||"Open date picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":s(k).Calendar,"icon-size":N[e.buttonSize],"on-click":P,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:c(()=>[f(p(s(E)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),b(s(_),{"border-radius":s(I)?s($).None:s($).Medium,fullscreen:s(I),"is-open":s(z),"max-width":"336px","modal-id":s(V),"on-close":D,title:e.title},{body:c(()=>[b(s(L),{ref_key:"calendarRef",ref:x,modelValue:M.value,"onUpdate:modelValue":t[0]||(t[0]=e=>M.value=e),busy:e.busy,disabled:e.disabled,fluid:s(I),"is-range":e.isRange},null,8,["modelValue","busy","disabled","fluid","is-range"])]),footer:c(()=>[v("div",{class:r(`${B}__footer-actions`)},[b(s(y),{color:s(C).Neutral,"on-click":D,variant:s(h).Ghost},{default:c(()=>[...t[1]||(t[1]=[f(" Cancel ",-1)])]),_:1},8,["color","variant"]),v("div",{class:r(`${B}__footer-right`)},[b(s(y),{color:s(C).Neutral,disabled:!s(x)?.draftStart&&!s(x)?.draftEnd,"on-click":A,variant:s(h).Ghost},{default:c(()=>[...t[2]||(t[2]=[f(" Reset ",-1)])]),_:1},8,["color","disabled","variant"]),b(s(y),{color:s(C).Primary,disabled:!s(T),"on-click":W},{default:c(()=>[...t[3]||(t[3]=[f(" Apply ",-1)])]),_:1},8,["color","disabled"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,S))}});export{B as CLModalDatePicker,B as default};

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

@@ -32,8 +32,8 @@ export interface CLModalDatePickerProps {
     onChange?: CLGenericFunction;
     /** A callback function which handles when the date picker gains focus. */
     onFocus?: CLGenericFocusFunction;
-    /** When set to `false` it will not render with rounded corners. */
-    rounded?: boolean;
+    /** A callback function which handles when the date picker is reset. */
+    onReset?: CLGenericFunction;
     /** Sets a custom ID used for unit tests. */
     testId?: string;
     /** The title content of the Modal. */
@@ -62,7 +62,6 @@ declare const _default: import('vue').DefineComponent<{
 }>, {
     title: string;
     fluid: boolean;
-    rounded: boolean;
     testId: string;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;