npm - @codeandfunction/callaloo - Versions diffs - 5.9.0 → 5.10.0 - Mend

@codeandfunction/callaloo 5.9.0 → 5.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

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

@@ -0,0 +1,199 @@
+import { default as CLInputTimePickerComponent } from './CLInputTimePicker.vue';
+export declare const CLInputTimePicker: import('vue').DefineComponent<{
+    modelValue?: string | null;
+} & import('./CLInputTimePicker.vue').CLInputTimePickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: string | null;
+} & import('./CLInputTimePicker.vue').CLInputTimePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    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;
+    onReset: import('../../..').CLGenericFunction;
+    borderRadius: import('@codeandfunction/callaloo-tokens').CLBorderRadius;
+    use24Hour: boolean;
+    required: boolean;
+    ariaLabel: string;
+    busy: boolean;
+    disabled: boolean;
+    placeholder: string;
+    orientation: import('@codeandfunction/callaloo-types').CLOrientation;
+    messages: string[];
+    messageType: import('@codeandfunction/callaloo-tokens').CLColors;
+    placement: import('@codeandfunction/callaloo-tokens').CLPlacement;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: string | number;
+    } & import('../CLInput').CLInputProps> & Readonly<{
+        onReset?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    }>, {
+        inputRef: Readonly<globalThis.ShallowRef<HTMLInputElement | null>>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        reset: (...args: any[]) => void;
+        "update:modelValue": (value: string | number) => void;
+    }, import('vue').PublicProps, {
+        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;
+        type: import('@codeandfunction/callaloo-types').CLInputTypes;
+        form: string;
+        label: string;
+        pattern: string;
+        onFocus: import('../../..').CLGenericFocusFunction;
+        onBlur: import('../../..').CLGenericFocusFunction;
+        onChange: import('../../..').CLGenericFunction;
+        onInput: import('../../..').CLGenericInputFunction;
+        borderRadius: import('@codeandfunction/callaloo-tokens').CLBorderRadius;
+        required: boolean;
+        prefix: string | import('@codeandfunction/callaloo-tokens').CLIconNames;
+        ariaLabel: string;
+        busy: boolean;
+        disabled: boolean;
+        pill: string;
+        placeholder: string;
+        orientation: import('@codeandfunction/callaloo-types').CLOrientation;
+        messages: string[];
+        messageType: import('@codeandfunction/callaloo-tokens').CLColors;
+        maxLength: number;
+        grouped: boolean;
+        suffix: string | import('@codeandfunction/callaloo-tokens').CLIconNames;
+        autoComplete: boolean;
+        charCounter: boolean;
+        minLength: number;
+        onPrefixClick: (event?: MouseEvent) => void;
+        onSuffixClick: (event?: MouseEvent) => void;
+        prefixAriaLabel: string;
+        readonly: boolean;
+        spellCheck: boolean;
+        suffixAriaLabel: string;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        'input-elem': HTMLInputElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: string | number;
+    } & import('../CLInput').CLInputProps> & Readonly<{
+        onReset?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    }>, {
+        inputRef: Readonly<globalThis.ShallowRef<HTMLInputElement | null>>;
+    }, {}, {}, {}, {
+        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;
+        type: import('@codeandfunction/callaloo-types').CLInputTypes;
+        form: string;
+        label: string;
+        pattern: string;
+        onFocus: import('../../..').CLGenericFocusFunction;
+        onBlur: import('../../..').CLGenericFocusFunction;
+        onChange: import('../../..').CLGenericFunction;
+        onInput: import('../../..').CLGenericInputFunction;
+        borderRadius: import('@codeandfunction/callaloo-tokens').CLBorderRadius;
+        required: boolean;
+        prefix: string | import('@codeandfunction/callaloo-tokens').CLIconNames;
+        ariaLabel: string;
+        busy: boolean;
+        disabled: boolean;
+        pill: string;
+        placeholder: string;
+        orientation: import('@codeandfunction/callaloo-types').CLOrientation;
+        messages: string[];
+        messageType: import('@codeandfunction/callaloo-tokens').CLColors;
+        maxLength: number;
+        grouped: boolean;
+        suffix: string | import('@codeandfunction/callaloo-tokens').CLIconNames;
+        autoComplete: boolean;
+        charCounter: boolean;
+        minLength: number;
+        onPrefixClick: (event?: MouseEvent) => void;
+        onSuffixClick: (event?: MouseEvent) => void;
+        prefixAriaLabel: string;
+        readonly: boolean;
+        spellCheck: boolean;
+        suffixAriaLabel: string;
+    }> | null;
+    popoverRef: HTMLDivElement;
+    timePickerRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: string | null;
+    } & import('../CLTimePicker').CLTimePickerProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+        "onTime-select"?: ((time: string) => any) | undefined;
+    }>, {
+        apply: () => void;
+        cancel: () => void;
+        draftHour: globalThis.Ref<string, string>;
+        draftMinute: globalThis.Ref<string, string>;
+        draftPeriod: globalThis.Ref<import('../../../composables/useTimePicker').TimePeriod, import('../../../composables/useTimePicker').TimePeriod>;
+        getFormattedDraft: () => string;
+        initializeDraft: () => void;
+        reset: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:modelValue": (value: string | null) => any;
+        "time-select": (time: string) => any;
+    }, import('vue').PublicProps, {
+        color: import('@codeandfunction/callaloo-tokens').CLColors;
+        fluid: boolean;
+        testId: string;
+        width: string;
+        use24Hour: boolean;
+        busy: boolean;
+        disabled: boolean;
+        headerLabel: string;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: string | null;
+    } & import('../CLTimePicker').CLTimePickerProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+        "onTime-select"?: ((time: string) => any) | undefined;
+    }>, {
+        apply: () => void;
+        cancel: () => void;
+        draftHour: globalThis.Ref<string, string>;
+        draftMinute: globalThis.Ref<string, string>;
+        draftPeriod: globalThis.Ref<import('../../../composables/useTimePicker').TimePeriod, import('../../../composables/useTimePicker').TimePeriod>;
+        getFormattedDraft: () => string;
+        initializeDraft: () => void;
+        reset: () => void;
+    }, {}, {}, {}, {
+        color: import('@codeandfunction/callaloo-tokens').CLColors;
+        fluid: boolean;
+        testId: string;
+        width: string;
+        use24Hour: boolean;
+        busy: boolean;
+        disabled: boolean;
+        headerLabel: string;
+    }> | null;
+}, HTMLDivElement>;
+export type CLInputTimePicker = InstanceType<typeof CLInputTimePickerComponent>;
+export type { CLInputTimePickerProps } from './CLInputTimePicker.vue';
+export default CLInputTimePicker;

package/dist/components/Form/CLRadioButton/CLRadioButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
 import '../../../assets/core.css';
 import './CLRadioButton.css';
 import '../../../assets/shared/form-utilities.css';
-import{defineComponent as e,mergeModels as a,useModel as l,useTemplateRef as s,computed as o,createBlock as d,openBlock as t,withCtx as r,createElementVNode as u,createCommentVNode as n,normalizeStyle as i,normalizeClass as m,unref as c,withDirectives as p,vModelRadio as b,createTextVNode as _,toDisplayString as y}from"vue";import{_ as f,a as $}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-BJ_Y2usB.js";import{_ as g}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CkTc30tw.js";import{C as X,a as v,c as L,d as h}from"../../../chunks/index-C_yUYGq9.js";import{a as B}from"../../../chunks/utils-B8oj25O0.js";import{useTheme as k}from"../../../composables/useTheme.js";const C=["data-testid"],q=["for"],x=["id","aria-label","checked","disabled","name","value","required"],R=/* @__PURE__ */e({name:"CLRadioButton",__name:"CLRadioButton",props:/* @__PURE__ */a({ariaLabel:{},borderRadius:{},busy:{type:Boolean},checked:{type:Boolean},color:{default:h.Neutral},disabled:{type:Boolean},form:{},id:{},label:{},messages:{},messageType:{},name:{},required:{type:Boolean},rounded:{type:Boolean,default:!0},size:{default:X.Small},testId:{default:"clll-radiobutton"},value:{type:[String,Number,Boolean]},variant:{default:L.Outline},onBlur:{},onChange:{},onFocus:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const L={[X.Tiny]:v.Small,[X.Small]:v.Medium,[X.Medium]:v.Medium,[X.Large]:v.Large,[X.XL]:v.XL,[X.XXL]:v.XXL,[X.XXXL]:v.XXXL,[X.XXXXL]:v.XXXXL},h=e,R=k(),T="clll-radiobutton",j=l(e,"modelValue"),M=s("radiobutton-ref"),F=()=>{M.value&&M.value.focus()},S=o(()=>[T,h.borderRadius?`${T}--${h.borderRadius}`:"",h.busy?`${T}--busy`:`${T}--ready`,`${T}--${h.color}`,`${T}--${h.size}`,h.disabled?`${T}--disabled`:`${T}--active`,h.label?`${T}--haslabel`:"",h.messageType?`${T}--${h.messageType}`:"",h.rounded?`${T}--rounded`:`${T}--box`,h.required?`${T}--required`:`${T}--optional`]),V=o(()=>[`${T}__radiobutton-container`,`${T}--${h.variant}`]);return a({radiobuttonRef:M}),(a,l)=>(t(),d(f,null,{default:r(()=>[u("span",{class:m(c(S)),style:i(c(B)({color:e.color,variant:e.variant,theme:c(R)})),"data-testid":e.testId},[u("span",{class:m(c(V)),onClick:F},[u("label",{for:e.id,class:m(`${T}__label`)},[u("span",{class:m([`${T}__radiobutton-frame`,"form-control-flex"])},[p(u("input",{id:e.id,ref:"radiobutton-ref","onUpdate:modelValue":l[0]||(l[0]=e=>j.value=e),"aria-label":e.ariaLabel,class:m(`${T}__radiobutton`),checked:e.checked,disabled:e.disabled||e.busy,name:e.name,value:e.value,required:e.required,type:"radio",onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a))},null,42,x),[[b,j.value]]),u("span",{class:m(`${T}__indicator`)},null,2)],2),e.label?(t(),d(c(g),{key:0,as:"span",type:L[e.size],class:m(e.required?`${T}__label--required`:"")},{default:r(()=>[_(y(e.label),1)]),_:1},8,["type","class"])):n("",!0)],10,q)],2)],14,C),e.id?(t(),d($,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):n("",!0)]),_:1}))}});export{R as CLRadioButton,R as default};
+import{defineComponent as e,mergeModels as a,useModel as l,useTemplateRef as s,computed as o,createBlock as d,openBlock as t,withCtx as r,createElementVNode as u,createCommentVNode as n,normalizeStyle as i,normalizeClass as m,unref as c,withDirectives as p,vModelRadio as b,createTextVNode as _,toDisplayString as y}from"vue";import{_ as f,a as $}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DMZJm-t4.js";import{_ as g}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{C as X,a as v,c as L,d as h}from"../../../chunks/index-CGlfDAYR.js";import{a as B}from"../../../chunks/utils-B5AOZV7T.js";import{useTheme as k}from"../../../composables/useTheme.js";const C=["data-testid"],q=["for"],x=["id","aria-label","checked","disabled","name","value","required"],R=/* @__PURE__ */e({name:"CLRadioButton",__name:"CLRadioButton",props:/* @__PURE__ */a({ariaLabel:{},borderRadius:{},busy:{type:Boolean},checked:{type:Boolean},color:{default:h.Neutral},disabled:{type:Boolean},form:{},id:{},label:{},messages:{},messageType:{},name:{},required:{type:Boolean},rounded:{type:Boolean,default:!0},size:{default:X.Small},testId:{default:"clll-radiobutton"},value:{type:[String,Number,Boolean]},variant:{default:L.Outline},onBlur:{},onChange:{},onFocus:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const L={[X.Tiny]:v.Small,[X.Small]:v.Medium,[X.Medium]:v.Medium,[X.Large]:v.Large,[X.XL]:v.XL,[X.XXL]:v.XXL,[X.XXXL]:v.XXXL,[X.XXXXL]:v.XXXXL},h=e,R=k(),T="clll-radiobutton",j=l(e,"modelValue"),M=s("radiobutton-ref"),F=()=>{M.value&&M.value.focus()},S=o(()=>[T,h.borderRadius?`${T}--${h.borderRadius}`:"",h.busy?`${T}--busy`:`${T}--ready`,`${T}--${h.color}`,`${T}--${h.size}`,h.disabled?`${T}--disabled`:`${T}--active`,h.label?`${T}--haslabel`:"",h.messageType?`${T}--${h.messageType}`:"",h.rounded?`${T}--rounded`:`${T}--box`,h.required?`${T}--required`:`${T}--optional`]),V=o(()=>[`${T}__radiobutton-container`,`${T}--${h.variant}`]);return a({radiobuttonRef:M}),(a,l)=>(t(),d(f,null,{default:r(()=>[u("span",{class:m(c(S)),style:i(c(B)({color:e.color,variant:e.variant,theme:c(R)})),"data-testid":e.testId},[u("span",{class:m(c(V)),onClick:F},[u("label",{for:e.id,class:m(`${T}__label`)},[u("span",{class:m([`${T}__radiobutton-frame`,"form-control-flex"])},[p(u("input",{id:e.id,ref:"radiobutton-ref","onUpdate:modelValue":l[0]||(l[0]=e=>j.value=e),"aria-label":e.ariaLabel,class:m(`${T}__radiobutton`),checked:e.checked,disabled:e.disabled||e.busy,name:e.name,value:e.value,required:e.required,type:"radio",onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a))},null,42,x),[[b,j.value]]),u("span",{class:m(`${T}__indicator`)},null,2)],2),e.label?(t(),d(c(g),{key:0,as:"span",type:L[e.size],class:m(e.required?`${T}__label--required`:"")},{default:r(()=>[_(y(e.label),1)]),_:1},8,["type","class"])):n("",!0)],10,q)],2)],14,C),e.id?(t(),d($,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):n("",!0)]),_:1}))}});export{R as CLRadioButton,R as default};

package/dist/components/Form/CLSelect/CLSelect.js CHANGED Viewed

@@ -1,4 +1,4 @@
 import '../../../assets/core.css';
 import './CLSelect.css';
 import '../../../assets/shared/form-utilities.css';
-import{defineComponent as e,mergeModels as a,useModel as l,useTemplateRef as s,computed as o,createBlock as i,openBlock as t,withCtx as r,createElementVNode as d,createCommentVNode as n,normalizeStyle as u,normalizeClass as m,unref as c,withDirectives as p,createElementBlock as f,Fragment as b,renderList as y,toDisplayString as _,vModelSelect as $,createVNode as v}from"vue";import{_ as g,a as h}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-BJ_Y2usB.js";import{_ as L}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-CAHC-mI7.js";import{_ as C}from"../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-7-UT438b.js";import{C as k,e as X,f as x,c as q,d as z}from"../../../chunks/index-C_yUYGq9.js";import{f as B}from"../../../chunks/index-ojQDOR8H.js";import{s as j}from"../../../chunks/utils-B8oj25O0.js";import{useTheme as T}from"../../../composables/useTheme.js";const S=["data-testid"],F=["id","aria-label","disabled","name","placeholder","form","required"],M=["value","selected","disabled"],V=/* @__PURE__ */e({name:"CLSelect",__name:"CLSelect",props:/* @__PURE__ */a({ariaLabel:{},borderRadius:{},busy:{type:Boolean},color:{default:z.Neutral},disabled:{type:Boolean},fluid:{type:Boolean,default:!1},form:{},id:{},label:{},messages:{},messageType:{},name:{},onBlur:{},onChange:{},onFocus:{},orientation:{default:B.Vertical},options:{},placeholder:{},required:{type:Boolean},rounded:{type:Boolean,default:!0},size:{default:k.Small},testId:{default:"clll-select"},variant:{default:q.Outline}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const q={[k.Tiny]:X.Tiny,[k.Small]:X.Tiny,[k.Medium]:X.Small,[k.Large]:X.Medium,[k.XL]:X.Medium,[k.XXL]:X.Large,[k.XXXL]:X.Large,[k.XXXXL]:X.XL},z=e,V=T(),I="clll-select",R=l(e,"modelValue"),w=s("select-ref"),D=()=>{w.value&&w.value.focus()},H=o(()=>[I,z.borderRadius?`${I}--${z.borderRadius}`:"",z.busy?`${I}--busy`:`${I}--ready`,`${I}--${z.color}`,`${I}--${z.size}`,`${I}--${z.variant}`,z.disabled||z.busy?`${I}--disabled`:`${I}--active`,z.fluid||z.orientation===B.Horizontal?`${I}--fluid`:`${I}--fixed`,z.label?`${I}--haslabel`:"",z.messageType?`${I}--${z.messageType}`:"",z.orientation?`${I}--${z.orientation}`:"",z.rounded?`${I}--rounded`:`${I}--box`,z.required?`${I}--required`:`${I}--optional`]);return a({selectRef:w}),(a,l)=>(t(),i(g,{fluid:e.fluid,orientation:e.orientation},{default:r(()=>[d("span",{class:m(c(H)),style:u(c(j)({color:e.color,variant:e.variant,theme:c(V)})),"data-testid":e.testId},[e.label?(t(),i(L,{key:0,"css-prefix":I,"html-for":e.id,label:e.label,required:e.required,size:e.size},null,8,["html-for","label","required","size"])):n("",!0),d("span",{class:m(`${I}__select-container`),onClick:D},[p(d("select",{id:e.id,ref:"select-ref","onUpdate:modelValue":l[0]||(l[0]=e=>R.value=e),"aria-label":e.ariaLabel,class:m(`${I}__select`),disabled:e.disabled||e.busy,name:e.name,placeholder:e.placeholder,form:e.form,required:e.required,onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a))},[e.options?(t(!0),f(b,{key:0},y(e.options,(a,l)=>(t(),f("option",{key:`${e.id}-option-${l}`,value:a.value,selected:a.value===R.value,disabled:a.disabled},_(a.label),9,M))),128)):n("",!0)],42,F),[[$,R.value]]),d("span",{class:m([`${I}__icon`,"form-select-icon-flex"])},[v(c(C),{name:c(x).ChevronDown,size:q[e.size]},null,8,["name","size"])],2)],2)],14,S),e.id?(t(),i(h,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):n("",!0)]),_:1},8,["fluid","orientation"]))}});export{V as CLSelect,V as default};
+import{defineComponent as e,mergeModels as a,useModel as l,useTemplateRef as s,computed as o,createBlock as i,openBlock as t,withCtx as r,createElementVNode as d,createCommentVNode as n,normalizeStyle as u,normalizeClass as m,unref as c,withDirectives as p,createElementBlock as f,Fragment as b,renderList as y,toDisplayString as _,vModelSelect as $,createVNode as v}from"vue";import{_ as g,a as h}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DMZJm-t4.js";import{_ as L}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-D7aTnF1Y.js";import{_ as C}from"../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-C21socAp.js";import{C as k,e as X,f as x,c as q,d as z}from"../../../chunks/index-CGlfDAYR.js";import{f as B}from"../../../chunks/index-C9S3C1LU.js";import{s as T}from"../../../chunks/utils-B5AOZV7T.js";import{useTheme as j}from"../../../composables/useTheme.js";const S=["data-testid"],F=["id","aria-label","disabled","name","placeholder","form","required"],M=["value","selected","disabled"],V=/* @__PURE__ */e({name:"CLSelect",__name:"CLSelect",props:/* @__PURE__ */a({ariaLabel:{},borderRadius:{},busy:{type:Boolean},color:{default:z.Neutral},disabled:{type:Boolean},fluid:{type:Boolean,default:!1},form:{},id:{},label:{},messages:{},messageType:{},name:{},onBlur:{},onChange:{},onFocus:{},orientation:{default:B.Vertical},options:{},placeholder:{},required:{type:Boolean},rounded:{type:Boolean,default:!0},size:{default:k.Small},testId:{default:"clll-select"},variant:{default:q.Outline}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const q={[k.Tiny]:X.Tiny,[k.Small]:X.Tiny,[k.Medium]:X.Small,[k.Large]:X.Medium,[k.XL]:X.Medium,[k.XXL]:X.Large,[k.XXXL]:X.Large,[k.XXXXL]:X.XL},z=e,V=j(),I="clll-select",R=l(e,"modelValue"),w=s("select-ref"),D=()=>{w.value&&w.value.focus()},H=o(()=>[I,z.borderRadius?`${I}--${z.borderRadius}`:"",z.busy?`${I}--busy`:`${I}--ready`,`${I}--${z.color}`,`${I}--${z.size}`,`${I}--${z.variant}`,z.disabled||z.busy?`${I}--disabled`:`${I}--active`,z.fluid||z.orientation===B.Horizontal?`${I}--fluid`:`${I}--fixed`,z.label?`${I}--haslabel`:"",z.messageType?`${I}--${z.messageType}`:"",z.orientation?`${I}--${z.orientation}`:"",z.rounded?`${I}--rounded`:`${I}--box`,z.required?`${I}--required`:`${I}--optional`]);return a({selectRef:w}),(a,l)=>(t(),i(g,{fluid:e.fluid,orientation:e.orientation},{default:r(()=>[d("span",{class:m(c(H)),style:u(c(T)({color:e.color,variant:e.variant,theme:c(V)})),"data-testid":e.testId},[e.label?(t(),i(L,{key:0,"css-prefix":I,"html-for":e.id,label:e.label,required:e.required,size:e.size},null,8,["html-for","label","required","size"])):n("",!0),d("span",{class:m(`${I}__select-container`),onClick:D},[p(d("select",{id:e.id,ref:"select-ref","onUpdate:modelValue":l[0]||(l[0]=e=>R.value=e),"aria-label":e.ariaLabel,class:m(`${I}__select`),disabled:e.disabled||e.busy,name:e.name,placeholder:e.placeholder,form:e.form,required:e.required,onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a))},[e.options?(t(!0),f(b,{key:0},y(e.options,(a,l)=>(t(),f("option",{key:`${e.id}-option-${l}`,value:a.value,selected:a.value===R.value,disabled:a.disabled},_(a.label),9,M))),128)):n("",!0)],42,F),[[$,R.value]]),d("span",{class:m([`${I}__icon`,"form-select-icon-flex"])},[v(c(C),{name:c(x).ChevronDown,size:q[e.size]},null,8,["name","size"])],2)],2)],14,S),e.id?(t(),i(h,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):n("",!0)]),_:1},8,["fluid","orientation"]))}});export{V as CLSelect,V as default};

package/dist/components/Form/CLTextArea/CLTextArea.js CHANGED Viewed

@@ -1,4 +1,4 @@
 import '../../../assets/core.css';
 import './CLTextArea.css';
 import '../../../assets/shared/form-utilities.css';
-import{defineComponent as e,mergeModels as a,useTemplateRef as l,useModel as o,computed as t,createBlock as r,openBlock as n,withCtx as s,createElementVNode as i,createCommentVNode as u,normalizeStyle as d,normalizeClass as m,unref as p,withDirectives as c,vModelText as h}from"vue";import{_ as f,a as y}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-BJ_Y2usB.js";import{_ as g}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-CAHC-mI7.js";import{_ as b}from"../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-BI9KcBgN.js";import{c as x,C as $,d as _}from"../../../chunks/index-C_yUYGq9.js";import{f as C,C as v}from"../../../chunks/index-ojQDOR8H.js";import{i as L}from"../../../chunks/utils-B8oj25O0.js";import{useTheme as k}from"../../../composables/useTheme.js";const B=["data-testid"],z=["id","aria-label","autocomplete","cols","disabled","form","maxlength","minlength","name","pattern","placeholder","readonly","required","spellcheck","rows"],q=/* @__PURE__ */e({name:"CLTextArea",__name:"CLTextArea",props:/* @__PURE__ */a({ariaLabel:{},autoComplete:{type:Boolean},borderRadius:{},busy:{type:Boolean},charCounter:{type:Boolean},color:{default:_.Neutral},cols:{},disabled:{type:Boolean},fluid:{type:Boolean,default:!1},form:{},id:{},label:{},maxLength:{},messages:{},messageType:{},minLength:{},name:{},onBlur:{},onChange:{},onFocus:{},onInput:{},orientation:{default:C.Vertical},pattern:{},placeholder:{},readonly:{type:Boolean},required:{type:Boolean},resizable:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},rows:{},size:{default:$.Small},spellCheck:{type:Boolean},testId:{default:"clll-textarea"},variant:{default:x.Outline}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const x=e,$=k(),_="clll-textarea",q=l("textarea-ref"),j=o(e,"modelValue"),T=()=>{q.value&&q.value.focus()},I=t(()=>[_,x.borderRadius?`${_}--${x.borderRadius}`:"",x.busy?`${_}--busy`:`${_}--ready`,`${_}--${x.color}`,`${_}--${x.size}`,`${_}--${x.variant}`,x.disabled||x.busy?`${_}--disabled`:`${_}--active`,x.charCounter&&x.maxLength?`${_}--hascharcounter`:"",x.fluid||x.orientation===C.Horizontal?`${_}--fluid`:`${_}--fixed`,x.label?`${_}--haslabel`:"",x.messageType?`${_}--${x.messageType}`:"",x.orientation?`${_}--${x.orientation}`:"",x.resizable?`${_}--resizable`:"",x.readonly?`${_}--readonly`:`${_}--writeable`,x.rounded?`${_}--rounded`:`${_}--box`,x.required?`${_}--required`:`${_}--optional`]);return a({textareaRef:q}),(a,l)=>(n(),r(f,{fluid:e.fluid,"has-char-counter":!(!e.charCounter||!e.maxLength),orientation:e.orientation},{default:s(()=>[i("span",{class:m(p(I)),style:d(p(L)({color:e.color,variant:e.variant,theme:p($)})),"data-testid":e.testId},[e.label?(n(),r(g,{key:0,"css-prefix":_,"html-for":e.id,label:e.label,required:e.required,size:e.size},null,8,["html-for","label","required","size"])):u("",!0),i("span",{class:m(`${_}__input-container`),onClick:T},[c(i("textarea",{id:e.id,ref:"textarea-ref","onUpdate:modelValue":l[0]||(l[0]=e=>j.value=e),"aria-label":e.ariaLabel,autocomplete:e.autoComplete?"on":"off",class:m(`${_}__input`),cols:e.cols,disabled:e.disabled||e.busy,form:e.form,maxlength:e.maxLength,minlength:e.minLength,name:e.name,pattern:e.pattern,placeholder:e.placeholder,readonly:e.readonly,required:e.required,spellcheck:e.spellCheck,rows:e.rows,onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a)),onInput:l[4]||(l[4]=(...a)=>e.onInput&&e.onInput(...a))},null,42,z),[[h,j.value]])],2),e.charCounter&&e.maxLength?(n(),r(b,{key:1,"css-prefix":_,"current-length":j.value?j.value.toString().length:0,"max-length":e.maxLength,color:e.color,size:e.size,layout:p(v).Block},null,8,["current-length","max-length","color","size","layout"])):u("",!0)],14,B),e.id?(n(),r(y,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):u("",!0)]),_:1},8,["fluid","has-char-counter","orientation"]))}});export{q as CLTextArea,q as default};
+import{defineComponent as e,mergeModels as a,useTemplateRef as l,useModel as o,computed as t,createBlock as r,openBlock as n,withCtx as s,createElementVNode as i,createCommentVNode as u,normalizeStyle as d,normalizeClass as m,unref as p,withDirectives as c,vModelText as h}from"vue";import{_ as f,a as y}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DMZJm-t4.js";import{_ as g}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-D7aTnF1Y.js";import{_ as b}from"../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-FFNlcIuE.js";import{c as x,C as $,d as _}from"../../../chunks/index-CGlfDAYR.js";import{f as C,C as v}from"../../../chunks/index-C9S3C1LU.js";import{i as L}from"../../../chunks/utils-B5AOZV7T.js";import{useTheme as k}from"../../../composables/useTheme.js";const B=["data-testid"],z=["id","aria-label","autocomplete","cols","disabled","form","maxlength","minlength","name","pattern","placeholder","readonly","required","spellcheck","rows"],q=/* @__PURE__ */e({name:"CLTextArea",__name:"CLTextArea",props:/* @__PURE__ */a({ariaLabel:{},autoComplete:{type:Boolean},borderRadius:{},busy:{type:Boolean},charCounter:{type:Boolean},color:{default:_.Neutral},cols:{},disabled:{type:Boolean},fluid:{type:Boolean,default:!1},form:{},id:{},label:{},maxLength:{},messages:{},messageType:{},minLength:{},name:{},onBlur:{},onChange:{},onFocus:{},onInput:{},orientation:{default:C.Vertical},pattern:{},placeholder:{},readonly:{type:Boolean},required:{type:Boolean},resizable:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},rows:{},size:{default:$.Small},spellCheck:{type:Boolean},testId:{default:"clll-textarea"},variant:{default:x.Outline}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const x=e,$=k(),_="clll-textarea",q=l("textarea-ref"),T=o(e,"modelValue"),j=()=>{q.value&&q.value.focus()},I=t(()=>[_,x.borderRadius?`${_}--${x.borderRadius}`:"",x.busy?`${_}--busy`:`${_}--ready`,`${_}--${x.color}`,`${_}--${x.size}`,`${_}--${x.variant}`,x.disabled||x.busy?`${_}--disabled`:`${_}--active`,x.charCounter&&x.maxLength?`${_}--hascharcounter`:"",x.fluid||x.orientation===C.Horizontal?`${_}--fluid`:`${_}--fixed`,x.label?`${_}--haslabel`:"",x.messageType?`${_}--${x.messageType}`:"",x.orientation?`${_}--${x.orientation}`:"",x.resizable?`${_}--resizable`:"",x.readonly?`${_}--readonly`:`${_}--writeable`,x.rounded?`${_}--rounded`:`${_}--box`,x.required?`${_}--required`:`${_}--optional`]);return a({textareaRef:q}),(a,l)=>(n(),r(f,{fluid:e.fluid,"has-char-counter":!(!e.charCounter||!e.maxLength),orientation:e.orientation},{default:s(()=>[i("span",{class:m(p(I)),style:d(p(L)({color:e.color,variant:e.variant,theme:p($)})),"data-testid":e.testId},[e.label?(n(),r(g,{key:0,"css-prefix":_,"html-for":e.id,label:e.label,required:e.required,size:e.size},null,8,["html-for","label","required","size"])):u("",!0),i("span",{class:m(`${_}__input-container`),onClick:j},[c(i("textarea",{id:e.id,ref:"textarea-ref","onUpdate:modelValue":l[0]||(l[0]=e=>T.value=e),"aria-label":e.ariaLabel,autocomplete:e.autoComplete?"on":"off",class:m(`${_}__input`),cols:e.cols,disabled:e.disabled||e.busy,form:e.form,maxlength:e.maxLength,minlength:e.minLength,name:e.name,pattern:e.pattern,placeholder:e.placeholder,readonly:e.readonly,required:e.required,spellcheck:e.spellCheck,rows:e.rows,onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a)),onInput:l[4]||(l[4]=(...a)=>e.onInput&&e.onInput(...a))},null,42,z),[[h,T.value]])],2),e.charCounter&&e.maxLength?(n(),r(b,{key:1,"css-prefix":_,"current-length":T.value?T.value.toString().length:0,"max-length":e.maxLength,color:e.color,size:e.size,layout:p(v).Block},null,8,["current-length","max-length","color","size","layout"])):u("",!0)],14,B),e.id?(n(),r(y,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):u("",!0)]),_:1},8,["fluid","has-char-counter","orientation"]))}});export{q as CLTextArea,q as default};

package/dist/components/Form/CLTimePicker/CLTimePicker.css ADDED Viewed

@@ -0,0 +1 @@

+ .clll-time-picker{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;background-color:var(--clll-time-picker-bg);padding:var(--clll-unit-3);width:var(--v09187e41);box-sizing:border-box}.clll-time-picker--fluid{width:100%}.clll-time-picker__header{margin-bottom:var(--clll-unit-3)}.clll-time-picker__controls{display:flex;align-items:flex-start;gap:var(--clll-unit-2)}.clll-time-picker__unit-container{display:flex;flex-direction:column;align-items:center}.clll-time-picker__box{display:flex;align-items:center;justify-content:center;width:80px;height:72px;background-color:var(--clll-time-picker-input-bg);border:2px solid transparent;border-radius:var(--clll-unit-2);transition:border-color .2s,background-color .2s}.clll-time-picker__box:focus-within,.clll-time-picker__box--active{border-color:var(--clll-time-picker-active-border);background-color:var(--clll-time-picker-active-bg)}.clll-time-picker__input{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;width:100%;text-align:center;font-size:2.25rem;font-weight:500;color:var(--clll-time-picker-text);background:transparent;border:none;outline:none;padding:0}.clll-time-picker__input:disabled{cursor:not-allowed;opacity:.6}.clll-time-picker__sublabel{margin-top:var(--clll-unit-2)}.clll-time-picker__separator{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;font-size:2.25rem;font-weight:600;line-height:72px;color:var(--clll-time-picker-text)}.clll-time-picker__period-toggle{display:flex;flex-direction:column;height:72px;width:54px;border:1px solid var(--clll-time-picker-border);border-radius:var(--clll-unit-2);overflow:hidden;margin-left:var(--clll-unit-1)}.clll-time-picker__period-btn{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;flex:1;display:flex;align-items:center;justify-content:center;background:var(--clll-time-picker-input-bg);border:none;font-size:.875rem;font-weight:600;color:var(--clll-time-picker-sublabel);cursor:pointer;transition:background-color .2s,color .2s}.clll-time-picker__period-btn:first-child{border-bottom:1px solid var(--clll-time-picker-border)}.clll-time-picker__period-btn--active{background-color:var(--clll-time-picker-active-bg);color:var(--clll-time-picker-active-text)}.clll-time-picker__period-btn:disabled{cursor:not-allowed;opacity:.6}

package/dist/components/Form/CLTimePicker/CLTimePicker.js ADDED Viewed

@@ -0,0 +1,3 @@
+import '../../../assets/core.css';
+import './CLTimePicker.css';
+import{defineComponent as e,mergeModels as l,useCssVars as a,ref as t,useModel as u,toRef as i,watch as s,createElementBlock as o,openBlock as r,normalizeStyle as d,normalizeClass as n,unref as c,createCommentVNode as p,createElementVNode as m,createVNode as v,withCtx as _,createTextVNode as b,toDisplayString as f,withDirectives as y,isRef as g,vModelText as h}from"vue";import{_ as $}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{d as x,a as M}from"../../../chunks/index-CGlfDAYR.js";import{t as S}from"../../../chunks/utils-B5AOZV7T.js";import{useTimePicker as k}from"../../../composables/useTimePicker.js";import{useTheme as H}from"../../../composables/useTheme.js";const P=["data-testid"],D=["disabled"],I=["disabled"],T=["disabled"],j=["disabled"],B=/* @__PURE__ */e({name:"CLTimePicker",__name:"CLTimePicker",props:/* @__PURE__ */l({color:{default:x.Primary},disabled:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},headerLabel:{default:"Enter time"},testId:{default:"clll-time-picker"},use24Hour:{type:Boolean,default:!1},width:{default:"auto"}},{modelValue:{},modelModifiers:{}}),emits:/* @__PURE__ */l(["time-select"],["update:modelValue"]),setup(e,{expose:l,emit:B}){a(e=>({v09187e41:e.width}));const L=e,C=B,V=H(),A="clll-time-picker",F=t(null),N=u(e,"modelValue"),w=t(N.value??null),{cancelDraft:z,clearDraft:U,draftHour:E,draftMinute:O,draftPeriod:q,formatTimeObject:G,getFormattedDraft:J,initializeDraft:K,parseTime:Q}=k({appliedTime:w,use24Hour:i(L,"use24Hour")});s(N,e=>{w.value=e??null,K()},{immediate:!0});const R=e=>{let l=e.target.value.replace(/\D/g,"");if(!l)return void(E.value="");let a=parseInt(l,10);L.use24Hour?a>23&&(a=23):(a>12&&(a=12),a<1&&l.length>=2&&(a=1)),E.value=String(a).padStart(l.length>=2?2:l.length,"0")},W=()=>{F.value="hour"},X=()=>{if(F.value=null,E.value&&"0"!==E.value&&"00"!==E.value){const e=parseInt(E.value,10);E.value=String(e).padStart(2,"0")}else E.value=L.use24Hour?"00":"12";ae()},Y=e=>{let l=e.target.value.replace(/\D/g,"");if(!l)return void(O.value="");let a=parseInt(l,10);a>59&&(a=59),O.value=String(a).padStart(l.length>=2?2:l.length,"0")},Z=()=>{F.value="minute"},ee=()=>{if(F.value=null,O.value){const e=parseInt(O.value,10);O.value=String(e).padStart(2,"0")}else O.value="00";ae()},le=e=>{L.disabled||L.busy||(q.value=e,ae())},ae=()=>{const e=J();C("time-select",e)};return l({apply:()=>{const e=J();w.value=e,N.value=e},cancel:()=>{z()},draftHour:E,draftMinute:O,draftPeriod:q,getFormattedDraft:J,initializeDraft:K,reset:()=>{U(),w.value=null,N.value=null}}),(l,a)=>(r(),o("div",{class:n([A,e.fluid?`${A}--fluid`:""]),"data-testid":e.testId,style:d(c(S)({color:e.color,theme:c(V)}))},[e.headerLabel?(r(),o("div",{key:0,class:n(`${A}__header`)},[v(c($),{type:c(M).Small,color:c(x).Neutral,medium:""},{default:_(()=>[b(f(e.headerLabel),1)]),_:1},8,["type","color"])],2)):p("",!0),m("div",{class:n(`${A}__controls`)},[m("div",{class:n(`${A}__unit-container`)},[m("div",{class:n([`${A}__box`,"hour"===F.value?`${A}__box--active`:""])},[y(m("input",{"onUpdate:modelValue":a[0]||(a[0]=e=>g(E)?E.value=e:null),type:"text",inputmode:"numeric",maxlength:"2",disabled:e.disabled||e.busy,class:n(`${A}__input`),"aria-label":"Hour input",onInput:R,onFocus:W,onBlur:X},null,42,D),[[h,c(E)]])],2),v(c($),{type:c(M).Small,color:c(x).Neutral,class:n(`${A}__sublabel`)},{default:_(()=>[...a[4]||(a[4]=[b(" Hour ",-1)])]),_:1},8,["type","color","class"])],2),m("div",{class:n(`${A}__separator`)},":",2),m("div",{class:n(`${A}__unit-container`)},[m("div",{class:n([`${A}__box`,"minute"===F.value?`${A}__box--active`:""])},[y(m("input",{"onUpdate:modelValue":a[1]||(a[1]=e=>g(O)?O.value=e:null),type:"text",inputmode:"numeric",maxlength:"2",disabled:e.disabled||e.busy,class:n(`${A}__input`),"aria-label":"Minute input",onInput:Y,onFocus:Z,onBlur:ee},null,42,I),[[h,c(O)]])],2),v(c($),{type:c(M).Small,color:c(x).Neutral,class:n(`${A}__sublabel`)},{default:_(()=>[...a[5]||(a[5]=[b(" Minute ",-1)])]),_:1},8,["type","color","class"])],2),e.use24Hour?p("",!0):(r(),o("div",{key:0,class:n(`${A}__period-toggle`)},[m("button",{type:"button",class:n([`${A}__period-btn`,"AM"===c(q)?`${A}__period-btn--active`:""]),disabled:e.disabled||e.busy,"aria-label":"Select AM",onClick:a[2]||(a[2]=e=>le("AM"))}," AM ",10,T),m("button",{type:"button",class:n([`${A}__period-btn`,"PM"===c(q)?`${A}__period-btn--active`:""]),disabled:e.disabled||e.busy,"aria-label":"Select PM",onClick:a[3]||(a[3]=e=>le("PM"))}," PM ",10,j)],2))],2)],14,P))}});export{B as CLTimePicker,B as default};

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

@@ -0,0 +1,50 @@
+import { CLColors } from '../../../index.ts';
+import { TimePeriod } from '../../../composables/useTimePicker';
+export interface CLTimePickerProps {
+    /** Sets the color theme of the time picker. */
+    color?: CLColors;
+    /** Sets the disabled state. */
+    disabled?: boolean;
+    /** Sets the busy state. */
+    busy?: boolean;
+    /** Whether to make the time picker fluid (100% width). */
+    fluid?: boolean;
+    /** Header label text displayed at top of picker. Defaults to 'Enter time'. */
+    headerLabel?: string;
+    /** Sets custom ID used for unit tests. */
+    testId?: string;
+    /** Whether to use 24-hour format instead of 12-hour AM/PM format. */
+    use24Hour?: boolean;
+    /** Sets the width of the time picker container. */
+    width?: string;
+}
+declare const _default: import('vue').DefineComponent<{
+    modelValue?: string | null;
+} & CLTimePickerProps, {
+    apply: () => void;
+    cancel: () => void;
+    draftHour: globalThis.Ref<string, string>;
+    draftMinute: globalThis.Ref<string, string>;
+    draftPeriod: globalThis.Ref<TimePeriod, TimePeriod>;
+    getFormattedDraft: () => string;
+    initializeDraft: () => void;
+    reset: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+    "time-select": (time: string) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: string | null;
+} & CLTimePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onTime-select"?: ((time: string) => any) | undefined;
+}>, {
+    color: CLColors;
+    fluid: boolean;
+    testId: string;
+    width: string;
+    use24Hour: boolean;
+    busy: boolean;
+    disabled: boolean;
+    headerLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,33 @@
+import { default as CLTimePickerComponent } from './CLTimePicker.vue';
+export declare const CLTimePicker: import('vue').DefineComponent<{
+    modelValue?: string | null;
+} & import('./CLTimePicker.vue').CLTimePickerProps, {
+    apply: () => void;
+    cancel: () => void;
+    draftHour: globalThis.Ref<string, string>;
+    draftMinute: globalThis.Ref<string, string>;
+    draftPeriod: globalThis.Ref<import('../../../composables/useTimePicker').TimePeriod, import('../../../composables/useTimePicker').TimePeriod>;
+    getFormattedDraft: () => string;
+    initializeDraft: () => void;
+    reset: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+    "time-select": (time: string) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: string | null;
+} & import('./CLTimePicker.vue').CLTimePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onTime-select"?: ((time: string) => any) | undefined;
+}>, {
+    color: import('@codeandfunction/callaloo-tokens').CLColors;
+    fluid: boolean;
+    testId: string;
+    width: string;
+    use24Hour: boolean;
+    busy: boolean;
+    disabled: boolean;
+    headerLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export type CLTimePicker = InstanceType<typeof CLTimePickerComponent>;
+export type { CLTimePickerProps } from './CLTimePicker.vue';
+export default CLTimePicker;

package/dist/components/Form/index.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 export { CLCheckbox } from './CLCheckbox';
 export { CLCalendar } from './CLCalendar';
 export { CLInputDatePicker } from './CLInputDatePicker';
+export { CLTimePicker } from './CLTimePicker';
+export { CLInputTimePicker } from './CLInputTimePicker';
 export { CLInput } from './CLInput';
 export { CLRadioButton } from './CLRadioButton';
 export { CLSelect } from './CLSelect';

package/dist/components/Form/utils.d.ts CHANGED Viewed

@@ -66,4 +66,14 @@ export declare const selectTheme: ({ color, variant, theme }: ThemeProps) => {
 export declare const calendarTheme: (theme?: ThemeContext) => {
     '--clll-calendar-content-bg': string;
 };
+export declare const timePickerTheme: ({ color, theme }: ThemeProps) => {
+    '--clll-time-picker-bg': string;
+    '--clll-time-picker-input-bg': string;
+    '--clll-time-picker-text': string;
+    '--clll-time-picker-sublabel': string;
+    '--clll-time-picker-border': string;
+    '--clll-time-picker-active-border': string;
+    '--clll-time-picker-active-bg': string;
+    '--clll-time-picker-active-text': string;
+};
 export {};

package/dist/components/Indicators/CLBadge/CLBadge.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLBadge.css';
-import{defineComponent as t,computed as a,createElementBlock as e,openBlock as l,normalizeStyle as r,normalizeClass as s,unref as d,createElementVNode as o,toDisplayString as i}from"vue";import{c as n,d as u}from"../../../chunks/index-C_yUYGq9.js";import{b as c}from"../../../chunks/utils-BTCQeV7Y.js";const m=["data-testid"],f=/* @__PURE__ */t({name:"CLBadge",__name:"CLBadge",props:{borderRadius:{},color:{default:u.Neutral},elevated:{type:Boolean,default:!1},label:{},limit:{},testId:{default:"clll-badge"},variant:{default:n.Soft}},setup(t){const n=t,u="clll-badge",f=a(()=>{const t=n.limit??0,a=n.label??"";return t&&a.toString().length>t?`${a.toString().slice(0,t)}+`:a}),p=a(()=>[u,n.borderRadius?`${u}--${n.borderRadius}`:"",n.elevated?`${u}--elevated`:"",`${u}--${n.color}--${n.variant}`]);return(a,n)=>(l(),e("div",{class:s(d(p)),"data-testid":t.testId,style:r(d(c)({color:t.color,variant:t.variant}))},[o("span",{class:s(`${u}__count`)},i(d(f)),3)],14,m))}});export{f as CLBadge,f as default};
+import{defineComponent as t,computed as a,createElementBlock as e,openBlock as l,normalizeStyle as r,normalizeClass as s,unref as d,createElementVNode as o,toDisplayString as i}from"vue";import{c as n,d as u}from"../../../chunks/index-CGlfDAYR.js";import{b as c}from"../../../chunks/utils-iQnJybN9.js";const m=["data-testid"],f=/* @__PURE__ */t({name:"CLBadge",__name:"CLBadge",props:{borderRadius:{},color:{default:u.Neutral},elevated:{type:Boolean,default:!1},label:{},limit:{},testId:{default:"clll-badge"},variant:{default:n.Soft}},setup(t){const n=t,u="clll-badge",f=a(()=>{const t=n.limit??0,a=n.label??"";return t&&a.toString().length>t?`${a.toString().slice(0,t)}+`:a}),p=a(()=>[u,n.borderRadius?`${u}--${n.borderRadius}`:"",n.elevated?`${u}--elevated`:"",`${u}--${n.color}--${n.variant}`]);return(a,n)=>(l(),e("div",{class:s(d(p)),"data-testid":t.testId,style:r(d(c)({color:t.color,variant:t.variant}))},[o("span",{class:s(`${u}__count`)},i(d(f)),3)],14,m))}});export{f as CLBadge,f as default};

package/dist/components/Indicators/CLBanner/CLBanner.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLBanner.css';
-import{defineComponent as e,computed as a,createBlock as t,openBlock as o,unref as i,withCtx as s,createElementVNode as n,normalizeStyle as l,normalizeClass as r,createElementBlock as d,createCommentVNode as u,createTextVNode as c,toDisplayString as _,createVNode as b}from"vue";import{_ as y}from"../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-f1fPKzcG.js";import{_ as m}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CjZJuMsj.js";import{_ as k}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-8r8ehDQf.js";import{_ as f}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-BwASexqS.js";import{_ as p}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CkTc30tw.js";import{c as v,d as g,i as h,k as $,a as L,C,e as x,f as B}from"../../../chunks/index-C_yUYGq9.js";import{a as j}from"../../../chunks/utils-BTCQeV7Y.js";const S=["data-testid"],D=/* @__PURE__ */e({name:"CLBanner",__name:"CLBanner",props:{actionLabel:{},align:{default:h.Left},ariaLabel:{},bordered:{type:Boolean,default:!0},borderRadius:{},busy:{type:Boolean,default:!1},color:{default:g.Neutral},height:{default:"auto"},message:{},onAction:{},onClick:{},onDismiss:{},rounded:{type:Boolean,default:!0},testId:{default:"clll-banner"},title:{},width:{default:"100%"},variant:{default:v.Soft}},setup(e){const g=e,h="clll-banner",D=a(()=>[h,g.actionLabel?`${h}--actionable`:"",g.busy?`${h}--busy`:`${h}--ready`,g.bordered&&g.variant!==v.Ghost?`${h}--bordered`:"",g.borderRadius?`${h}--${g.borderRadius}`:"",g.onDismiss?`${h}--dismissable`:"",`${h}--${g.color}--${g.variant}`,`${h}--align-${g.align}`,g.rounded?`${h}--rounded`:`${h}--box`]);return(a,g)=>(o(),t(i(y),{color:e.color,enabled:!(!e.onClick||!e.ariaLabel),rounded:e.rounded},{default:s(()=>[n("div",{class:r(i(D)),"data-testid":e.testId,style:l({...i(j)({color:e.color,variant:e.variant}),width:e.width,height:e.height})},[n("div",{class:r(`${h}__content`)},[n("div",{class:r(`${h}__nested_content`)},[e.busy?(o(),t(i(f),{key:0,"border-radius":e.borderRadius,height:"28px","test-id":`${h}__skeleton-title`},null,8,["border-radius","test-id"])):u("",!0),e.busy?(o(),t(i(f),{key:1,"border-radius":e.borderRadius,width:"70%",height:"20px","test-id":`${h}__skeleton-message`},null,8,["border-radius","test-id"])):u("",!0),e.title&&!e.busy?(o(),t(i(k),{key:2,align:e.align,color:e.color,type:i($).Section},{default:s(()=>[c(_(e.title),1)]),_:1},8,["align","color","type"])):u("",!0),e.message&&!e.busy?(o(),t(i(p),{key:3,align:e.align,color:e.color,type:i(L).Summary},{default:s(()=>[c(_(e.message),1)]),_:1},8,["align","color","type"])):u("",!0)],2),e.onAction&&e.actionLabel?(o(),d("div",{key:0,class:r(`${h}__action-button`)},[b(i(m),{color:e.color,"border-radius":e.borderRadius,"on-click":e.onAction,"test-id":`${h}__action-button`,variant:e.variant===i(v).Solid?i(v).Soft:i(v).Solid},{default:s(()=>[c(_(e.actionLabel),1)]),_:1},8,["color","border-radius","on-click","test-id","variant"])],2)):u("",!0)],2),e.onDismiss?(o(),d("div",{key:0,class:r(`${h}__dismiss-button`)},[b(i(m),{"aria-label":"Dismiss banner",color:e.color,"icon-before":i(B).Delete,"icon-size":i(x).Tiny,"on-click":e.onDismiss,size:i(C).Tiny,"test-id":`${h}__dismiss-button`,variant:e.variant},null,8,["color","icon-before","icon-size","on-click","size","test-id","variant"])],2)):u("",!0),e.onClick&&e.ariaLabel?(o(),d("button",{key:1,class:"sr-only","data-expand-click-area":"",onClick:g[0]||(g[0]=(...a)=>e.onClick&&e.onClick(...a))},_(e.ariaLabel),1)):u("",!0)],14,S)]),_:1},8,["color","enabled","rounded"]))}});export{D as CLBanner,D as default};
+import{defineComponent as e,computed as a,createBlock as t,openBlock as o,unref as i,withCtx as s,createElementVNode as n,normalizeStyle as l,normalizeClass as r,createElementBlock as d,createCommentVNode as u,createTextVNode as c,toDisplayString as _,createVNode as b}from"vue";import{_ as y}from"../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-DmZZOodW.js";import{_ as m}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as f}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";import{_ as k}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-_qLiUhKp.js";import{_ as p}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{c as v,d as g,i as h,l as $,a as L,C,e as x,f as B}from"../../../chunks/index-CGlfDAYR.js";import{a as j}from"../../../chunks/utils-iQnJybN9.js";const S=["data-testid"],D=/* @__PURE__ */e({name:"CLBanner",__name:"CLBanner",props:{actionLabel:{},align:{default:h.Left},ariaLabel:{},bordered:{type:Boolean,default:!0},borderRadius:{},busy:{type:Boolean,default:!1},color:{default:g.Neutral},height:{default:"auto"},message:{},onAction:{},onClick:{},onDismiss:{},rounded:{type:Boolean,default:!0},testId:{default:"clll-banner"},title:{},width:{default:"100%"},variant:{default:v.Soft}},setup(e){const g=e,h="clll-banner",D=a(()=>[h,g.actionLabel?`${h}--actionable`:"",g.busy?`${h}--busy`:`${h}--ready`,g.bordered&&g.variant!==v.Ghost?`${h}--bordered`:"",g.borderRadius?`${h}--${g.borderRadius}`:"",g.onDismiss?`${h}--dismissable`:"",`${h}--${g.color}--${g.variant}`,`${h}--align-${g.align}`,g.rounded?`${h}--rounded`:`${h}--box`]);return(a,g)=>(o(),t(i(y),{color:e.color,enabled:!(!e.onClick||!e.ariaLabel),rounded:e.rounded},{default:s(()=>[n("div",{class:r(i(D)),"data-testid":e.testId,style:l({...i(j)({color:e.color,variant:e.variant}),width:e.width,height:e.height})},[n("div",{class:r(`${h}__content`)},[n("div",{class:r(`${h}__nested_content`)},[e.busy?(o(),t(i(k),{key:0,"border-radius":e.borderRadius,height:"28px","test-id":`${h}__skeleton-title`},null,8,["border-radius","test-id"])):u("",!0),e.busy?(o(),t(i(k),{key:1,"border-radius":e.borderRadius,width:"70%",height:"20px","test-id":`${h}__skeleton-message`},null,8,["border-radius","test-id"])):u("",!0),e.title&&!e.busy?(o(),t(i(f),{key:2,align:e.align,color:e.color,type:i($).Section},{default:s(()=>[c(_(e.title),1)]),_:1},8,["align","color","type"])):u("",!0),e.message&&!e.busy?(o(),t(i(p),{key:3,align:e.align,color:e.color,type:i(L).Summary},{default:s(()=>[c(_(e.message),1)]),_:1},8,["align","color","type"])):u("",!0)],2),e.onAction&&e.actionLabel?(o(),d("div",{key:0,class:r(`${h}__action-button`)},[b(i(m),{color:e.color,"border-radius":e.borderRadius,"on-click":e.onAction,"test-id":`${h}__action-button`,variant:e.variant===i(v).Solid?i(v).Soft:i(v).Solid},{default:s(()=>[c(_(e.actionLabel),1)]),_:1},8,["color","border-radius","on-click","test-id","variant"])],2)):u("",!0)],2),e.onDismiss?(o(),d("div",{key:0,class:r(`${h}__dismiss-button`)},[b(i(m),{"aria-label":"Dismiss banner",color:e.color,"icon-before":i(B).Delete,"icon-size":i(x).Tiny,"on-click":e.onDismiss,size:i(C).Tiny,"test-id":`${h}__dismiss-button`,variant:e.variant},null,8,["color","icon-before","icon-size","on-click","size","test-id","variant"])],2)):u("",!0),e.onClick&&e.ariaLabel?(o(),d("button",{key:1,class:"sr-only","data-expand-click-area":"",onClick:g[0]||(g[0]=(...a)=>e.onClick&&e.onClick(...a))},_(e.ariaLabel),1)):u("",!0)],14,S)]),_:1},8,["color","enabled","rounded"]))}});export{D as CLBanner,D as default};

package/dist/components/Indicators/CLPill/CLPill.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLPill.css';
-import{_ as e}from"../../../chunks/CLPill.vue_vue_type_style_index_0_lang-j0AHu53P.js";export{e as CLPill,e as default};
+import{_ as e}from"../../../chunks/CLPill.vue_vue_type_style_index_0_lang-CoaDiJJy.js";export{e as CLPill,e as default};

package/dist/components/Indicators/CLProgress/CLProgress.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLProgress.css';
-import{defineComponent as e,mergeModels as s,useModel as t,computed as a,createElementBlock as l,openBlock as o,normalizeStyle as r,normalizeClass as d,unref as u,createCommentVNode as i,createElementVNode as n,createVNode as m,withCtx as c,createTextVNode as _,toDisplayString as p}from"vue";import{_ as f}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CkTc30tw.js";import{a as v,d as y,C as $}from"../../../chunks/index-C_yUYGq9.js";import{c as g}from"../../../chunks/utils-BTCQeV7Y.js";import{useTheme as b}from"../../../composables/useTheme.js";const h=["data-testid"],C=/* @__PURE__ */e({name:"CLProgress",__name:"CLProgress",props:/* @__PURE__ */s({color:{default:y.Primary},inverted:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},size:{default:$.Medium},status:{type:Boolean,default:!1},testId:{default:"clll-progress"}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const s=e,$=b(),C=t(e,"modelValue"),j="clll-progress",k=a(()=>[j,`${j}--${s.color}`,`${j}--${s.size}`,s.inverted?`${j}--inverted`:"",s.rounded?`${j}--rounded`:`${j}--not-rounded`]),x=a(()=>`${C.value}%`);return(s,t)=>(o(),l("div",{class:d(u(k)),"data-testid":e.testId,style:r({...u(g)({color:e.color,theme:u($)}),"--clll-progress-value":C.value})},[e.status?(o(),l("div",{key:0,class:d(`${j}__status__container`)},[n("div",{class:d(`${j}__status__label`)},[m(u(f),{color:u(y).Neutral,type:u(v).Summary},{default:c(()=>[_(p(u(x)),1)]),_:1},8,["color","type"])],2)],2)):i("",!0),n("div",{class:d(`${j}__bar-container`)},[n("div",{class:d(`${j}__bar`)},null,2)],2)],14,h))}});export{C as CLProgress,C as default};
+import{defineComponent as e,mergeModels as s,useModel as t,computed as a,createElementBlock as l,openBlock as o,normalizeStyle as r,normalizeClass as d,unref as u,createCommentVNode as i,createElementVNode as n,createVNode as m,withCtx as c,createTextVNode as _,toDisplayString as p}from"vue";import{_ as f}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{a as v,d as y,C as $}from"../../../chunks/index-CGlfDAYR.js";import{c as g}from"../../../chunks/utils-iQnJybN9.js";import{useTheme as b}from"../../../composables/useTheme.js";const h=["data-testid"],C=/* @__PURE__ */e({name:"CLProgress",__name:"CLProgress",props:/* @__PURE__ */s({color:{default:y.Primary},inverted:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},size:{default:$.Medium},status:{type:Boolean,default:!1},testId:{default:"clll-progress"}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const s=e,$=b(),C=t(e,"modelValue"),j="clll-progress",k=a(()=>[j,`${j}--${s.color}`,`${j}--${s.size}`,s.inverted?`${j}--inverted`:"",s.rounded?`${j}--rounded`:`${j}--not-rounded`]),x=a(()=>`${C.value}%`);return(s,t)=>(o(),l("div",{class:d(u(k)),"data-testid":e.testId,style:r({...u(g)({color:e.color,theme:u($)}),"--clll-progress-value":C.value})},[e.status?(o(),l("div",{key:0,class:d(`${j}__status__container`)},[n("div",{class:d(`${j}__status__label`)},[m(u(f),{color:u(y).Neutral,type:u(v).Summary},{default:c(()=>[_(p(u(x)),1)]),_:1},8,["color","type"])],2)],2)):i("",!0),n("div",{class:d(`${j}__bar-container`)},[n("div",{class:d(`${j}__bar`)},null,2)],2)],14,h))}});export{C as CLProgress,C as default};

package/dist/components/Loading/CLSkeleton/CLSkeleton.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLSkeleton.css';
-import{_ as e}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-BwASexqS.js";export{e as CLSkeleton,e as default};
+import{_ as e}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-_qLiUhKp.js";export{e as CLSkeleton,e as default};

package/dist/components/Loading/CLSpinner/CLSpinner.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLSpinner.css';
-import{_ as e}from"../../../chunks/CLSpinner.vue_vue_type_style_index_0_lang-C0jwsD1v.js";export{e as CLSpinner,e as default};
+import{_ as e}from"../../../chunks/CLSpinner.vue_vue_type_style_index_0_lang-BUtkZagF.js";export{e as CLSpinner,e as default};

package/dist/components/Modals/CLModal/CLModal.js CHANGED Viewed

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

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

@@ -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-CjZJuMsj.js";import{_}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-vUfynvl2.js";import{_ as L}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-bEkt9DYK.js";import{C as X,e as g,f as h,h as k,c as $,d as C}from"../../../chunks/index-C_yUYGq9.js";import{i as w}from"../../../chunks/helper-BlxFN3eF.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:$.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=d(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);o(()=>{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(h).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(k).None:s(k).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($).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($).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};
+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-C4FnlILR.js";import{_}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js";import{_ as L}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-DcHQwUiD.js";import{C as X,e as k,f as g,h,c as $,d as C}from"../../../chunks/index-CGlfDAYR.js";import{i as w}from"../../../chunks/helper-BlxFN3eF.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:$.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=d(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);o(()=>{w&&(j(),window.addEventListener("resize",j))}),i(()=>{w&&window.removeEventListener("resize",j)});const N={[X.Tiny]:k.Tiny,[X.Small]:k.Small,[X.Medium]:k.Medium,[X.Large]:k.Large,[X.XL]:k.XL,[X.XXL]:k.XXL,[X.XXXL]:k.XXXL,[X.XXXXL]:k.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(g).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(h).None:s(h).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($).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($).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/CLModalTimePicker/CLModalTimePicker.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .clll-time-picker-modal{box-sizing:border-box}.clll-time-picker-modal--fluid{width:100%}.clll-time-picker-modal__footer-actions{display:flex;justify-content:space-between;align-items:center;width:100%}.clll-time-picker-modal__footer-right{display:flex;gap:var(--clll-unit-2)}

package/dist/components/Modals/CLModalTimePicker/CLModalTimePicker.js ADDED Viewed

@@ -0,0 +1,3 @@
+import '../../../assets/core.css';
+import './CLModalTimePicker.css';
+import{defineComponent as e,mergeModels as t,ref as o,computed as a,useModel as l,onMounted as i,onBeforeUnmount as u,createElementBlock as d,openBlock as r,normalizeClass as n,createVNode as s,unref as c,withCtx as b,createTextVNode as m,toDisplayString as f,createElementVNode as p,nextTick as v}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{CLTimePicker as _}from"../../Form/CLTimePicker/CLTimePicker.js";import{_ as L}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js";import{C as k,e as h,f as X,h as $,c as C,d as w}from"../../../chunks/index-CGlfDAYR.js";import{useTimePicker as B}from"../../../composables/useTimePicker.js";import{i as z}from"../../../chunks/helper-BlxFN3eF.js";const g=["data-testid"],S=/* @__PURE__ */e({name:"CLModalTimePicker",__name:"CLModalTimePicker",props:/* @__PURE__ */t({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:w.Primary},buttonLabel:{default:"Select time"},buttonSize:{default:k.Small},buttonVariant:{default:C.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:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{type:Function,default:void 0},testId:{default:"clll-time-picker-modal"},title:{default:"Select time"},use24Hour:{type:Boolean,default:!1}},{modelValue:{default:null},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const t=e,S="clll-time-picker-modal",F=o(!1),V=a(()=>`time-picker-modal-${t.id}`),P=o(),R=l(e,"modelValue"),{formattedLabel:T}=B({appliedTime:R,use24Hour:t.use24Hour}),x=o(!1),M=()=>{z&&(x.value=window.innerWidth<480)},j=()=>{if(t.disabled||t.busy)return;M(),F.value=!0,v(()=>{P.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});t.onFocus?.(e)},W=()=>{F.value=!1,P.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});t.onBlur?.(e)},E=()=>{P.value?.apply(),F.value=!1,t.onChange?.()},H=()=>{P.value?.reset(),t.onReset?.(),t.onChange?.()},A=a(()=>x.value);i(()=>{z&&(M(),window.addEventListener("resize",M))}),u(()=>{z&&window.removeEventListener("resize",M)});const I={[k.Tiny]:h.Tiny,[k.Small]:h.Small,[k.Medium]:h.Medium,[k.Large]:h.Large,[k.XL]:h.XL,[k.XXL]:h.XXL,[k.XXXL]:h.XXXL,[k.XXXXL]:h.XXXXL},N=a(()=>[S,t.buttonBorderRadius?`${S}--${t.buttonBorderRadius}`:"",t.busy?`${S}--busy`:`${S}--ready`,`${S}--${t.buttonColor}`,`${S}--${t.buttonSize}`,`${S}--${t.buttonVariant}`,t.disabled||t.busy?`${S}--disabled`:`${S}--active`,t.fluid?`${S}--fluid`:`${S}--fixed`]);return(t,o)=>(r(),d("div",{class:n(N.value),"data-testid":e.testId},[s(c(y),{"aria-label":e.buttonAriaLabel||"Open time picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":c(X).Clock,"icon-size":I[e.buttonSize],"on-click":j,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:b(()=>[m(f(c(T)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),s(c(L),{"border-radius":A.value?c($).None:c($).Medium,fullscreen:A.value,"is-open":F.value,"max-width":"340px","modal-id":V.value,"on-close":W,title:e.title},{body:b(()=>[s(c(_),{ref_key:"timePickerRef",ref:P,modelValue:R.value,"onUpdate:modelValue":o[0]||(o[0]=e=>R.value=e),busy:e.busy,disabled:e.disabled,fluid:A.value,"use24-hour":e.use24Hour},null,8,["modelValue","busy","disabled","fluid","use24-hour"])]),footer:b(()=>[p("div",{class:n(`${S}__footer-actions`)},[s(c(y),{color:c(w).Neutral,variant:c(C).Ghost,"on-click":W},{default:b(()=>[...o[1]||(o[1]=[m(" Cancel ",-1)])]),_:1},8,["color","variant"]),p("div",{class:n(`${S}__footer-right`)},[s(c(y),{color:c(w).Neutral,variant:c(C).Ghost,"on-click":H},{default:b(()=>[...o[2]||(o[2]=[m(" Reset ",-1)])]),_:1},8,["color","variant"]),s(c(y),{color:c(w).Primary,"on-click":E},{default:b(()=>[...o[3]||(o[3]=[m(" Apply ",-1)])]),_:1},8,["color"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,g))}});export{S as CLModalTimePicker,S as default};