@codeandfunction/callaloo 4.10.0 → 4.11.0

package/dist/chunks/CLPill.vue_vue_type_style_index_0_lang-B7EJOOmg.js

@@ -0,0 +1,2 @@
+import '../components/Indicators/CLPill/CLPill.css';
+import{defineComponent as e,computed as l,createElementBlock as n,openBlock as a,normalizeStyle as o,normalizeClass as i,unref as s,createCommentVNode as t,createBlock as c,createVNode as d,withCtx as r,createTextVNode as u,toDisplayString as _,createElementVNode as m}from"vue";import{_ as p}from"./CLButton.vue_vue_type_style_index_0_lang-CqwRXex5.js";import{_ as y}from"./CLIcon.vue_vue_type_style_index_0_lang-MCaGYSd9.js";import{_ as f}from"./CLText.vue_vue_type_style_index_0_lang-CMXJdE-D.js";import{CLColorVariants as v,CLColors as k,CLIconSizes as $,CLTextTypes as b,CLIconNames as C}from"../index.js";import{p as z}from"./utils-CCWSWRuR.js";const x=["data-testid"],D=/* @__PURE__ */e({name:"CLPill",__name:"CLPill",props:{color:{default:k.Neutral},count:{},dismissable:{type:Boolean},elevated:{type:Boolean,default:!1},icon:{},iconFilled:{type:Boolean,default:!1},label:{},onClick:{},onDismiss:{},rounded:{type:Boolean,default:!0},testId:{default:"clll-pill"},variant:{default:v.Soft}},setup(e){const v=e,k="clll-pill",D=l(()=>[k,`${k}--${v.color}--${v.variant}`,v.count?`${k}--has-count`:"",v.dismissable?`${k}--dismissable`:"",v.elevated?`${k}--elevated`:"",v.icon?`${k}--has-icon`:`${k}--has-noicon`,v.rounded?`${k}--rounded`:""]);return(l,v)=>(a(),n("div",{"data-testid":e.testId,class:i(s(D)),style:o(s(z)({color:e.color,variant:e.variant}))},[e.onClick||e.onDismiss?t("",!0):(a(),n("span",{key:0,class:i(`${k}__container`)},[e.icon?(a(),c(s(y),{key:0,filled:e.iconFilled,name:e.icon,size:s($).Tiny},null,8,["filled","name","size"])):t("",!0),d(s(f),{as:"span",type:s(b).Small,truncate:""},{default:r(()=>[u(_(e.label),1)]),_:1},8,["type"]),e.count?(a(),n("span",{key:1,class:i(`${k}__count`)},_(e.count),3)):t("",!0)],2)),e.onClick&&!e.dismissable?(a(),c(s(p),{key:1,color:e.color,"on-click":e.onClick,variant:e.variant,pill:"",rounded:e.rounded},{default:r(()=>[m("span",{class:i(`${k}__button`)},[e.icon?(a(),c(s(y),{key:0,filled:e.iconFilled,name:e.icon,size:s($).Tiny},null,8,["filled","name","size"])):t("",!0),d(s(f),{as:"span",type:s(b).Small,truncate:""},{default:r(()=>[u(_(e.label),1)]),_:1},8,["type"]),e.count?(a(),n("span",{key:1,class:i(`${k}__count`)},_(e.count),3)):t("",!0),e.dismissable?(a(),c(s(y),{key:2,name:s(C).Delete,size:s($).Tiny},null,8,["name","size"])):t("",!0)],2)]),_:1},8,["color","on-click","variant","rounded"])):t("",!0),e.onDismiss&&e.dismissable?(a(),c(s(p),{key:2,color:e.color,"on-click":e.onDismiss,variant:e.variant,pill:"",rounded:e.rounded},{default:r(()=>[m("span",{class:i(`${k}__button`)},[d(s(f),{as:"span",type:s(b).Small,truncate:""},{default:r(()=>[u(_(e.label),1)]),_:1},8,["type"]),e.dismissable?(a(),c(s(y),{key:0,name:s(C).Delete,size:s($).Tiny},null,8,["name","size"])):t("",!0)],2)]),_:1},8,["color","on-click","variant","rounded"])):t("",!0)],14,x))}});export{D as _};

package/dist/components/Form/CLInput/CLInput.js

@@ -1,4 +1,4 @@
 import '../../../assets/core.css';
 import './CLInput.css';
 import '../../../assets/shared/form-utilities.css';
-import{defineComponent as e,computed as l,createElementBlock as a,openBlock as o,normalizeClass as i,unref as t,createBlock as r,Fragment as d,createTextVNode as n,toDisplayString as u,createVNode as s,ref as p,watch as c,createCommentVNode as f,mergeModels as m,useTemplateRef as b,useModel as y,withCtx as x,createElementVNode as v,normalizeStyle as _,withDirectives as g,vModelDynamic as h,isRef as L}from"vue";import{_ as X,i as C,a as z}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DCByJ7MB.js";import{_ as $}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-BPwFZq94.js";import{_ as k}from"../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-BYHbqaf0.js";import{_ as I}from"../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-MCaGYSd9.js";import{_ as F}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CqwRXex5.js";import{CLSizes as S,CLColors as B,CLBorderRadius as T,CLIconSizes as R,CLColorVariants as V,CLIconNames as P,CLInputTypes as j,CLOrientation as q,CLCharCounterLayout as w}from"../../../index.js";import{_ as M}from"../../../chunks/CLPill.vue_vue_type_style_index_0_lang-Dd9Hr0ol.js";const N=["data-testid"],U=/* @__PURE__ */e({name:"CLInputPrefix",__name:"CLInputPrefix",props:{ariaLabel:{default:void 0},borderRadius:{default:T.XS},color:{default:B.Neutral},disabled:{type:Boolean,default:!1},grouped:{type:Boolean,default:!1},onClick:{type:Function,default:void 0},prefix:{},size:{default:S.Small},testId:{default:"clll-input-prefix"}},setup(e){const s=e,p="clll-input",c=e=>Object.values(P).includes(e),f={[S.Tiny]:R.Tiny,[S.Small]:R.Small,[S.Medium]:R.Medium,[S.Large]:R.Large,[S.XL]:R.XL,[S.XXL]:R.XXL,[S.XXXL]:R.XXXL,[S.XXXXL]:R.XXXXL},m=l(()=>!!s.onClick&&c(s.prefix)),b=l(()=>{return[`${p}__input-prefix`,"form-addon-flex","form-addon-flex--left",c(s.prefix)?`${p}__input-prefix--icon form-addon-flex--icon`:`${p}__input-prefix--string form-addon-flex--string`,{"--interactive":m},{"--input-group":s.grouped||s.prefix},{"--disabled":s.disabled},s.grouped?`form-addon-radius--left-${e=s.borderRadius,e?.replace("rounded-","")||"xs"}`:""];var e}),y=e=>{s.onClick&&e&&!s.disabled&&(e.stopPropagation(),s.onClick(e))};return(l,s)=>(o(),a("div",{class:i(t(b))},[t(m)?(o(),r(t(F),{key:0,"aria-label":e.ariaLabel,"border-radius":e.borderRadius,color:e.color,disabled:e.disabled,"icon-before":e.prefix,"icon-size":f[e.size],"on-click":y,size:e.size,"test-id":e.testId,variant:t(V).Text,wrap:""},null,8,["aria-label","border-radius","color","disabled","icon-before","icon-size","size","test-id","variant"])):(o(),a("span",{key:1,class:"icon-container","data-testid":e.testId},[c(e.prefix)?(o(),r(t(I),{key:0,name:e.prefix,size:f[e.size],color:e.color},null,8,["name","size","color"])):(o(),a(d,{key:1},[n(u(e.prefix),1)],64))],8,N))],2))}}),A=["data-testid"],O=/* @__PURE__ */e({name:"CLInputSuffix",__name:"CLInputSuffix",props:{ariaLabel:{default:void 0},borderRadius:{default:T.XS},color:{default:B.Neutral},disabled:{type:Boolean,default:!1},grouped:{type:Boolean,default:!1},onClick:{type:Function,default:void 0},suffix:{},size:{default:S.Small},testId:{default:"clll-input-suffix"}},setup(e){const s=e,p="clll-input",c=e=>Object.values(P).includes(e),f={[S.Tiny]:R.Tiny,[S.Small]:R.Small,[S.Medium]:R.Medium,[S.Large]:R.Large,[S.XL]:R.XL,[S.XXL]:R.XXL,[S.XXXL]:R.XXXL,[S.XXXXL]:R.XXXXL},m=l(()=>!!s.onClick&&c(s.suffix)),b=l(()=>{return[`${p}__input-suffix`,"form-addon-flex","form-addon-flex--right",c(s.suffix)?`${p}__input-suffix--icon form-addon-flex--icon`:`${p}__input-suffix--string form-addon-flex--string`,{"--interactive":m},{"--input-group":s.grouped||s.suffix},{"--disabled":s.disabled},s.grouped?`form-addon-radius--right-${e=s.borderRadius,e?.replace("rounded-","")||"xs"}`:""];var e}),y=e=>{s.onClick&&e&&!s.disabled&&(e.stopPropagation(),s.onClick(e))};return(l,s)=>(o(),a("div",{class:i(t(b))},[t(m)?(o(),r(t(F),{key:0,"aria-label":e.ariaLabel,"border-radius":e.borderRadius,color:e.color,disabled:e.disabled,"icon-before":e.suffix,"icon-size":f[e.size],"on-click":y,size:e.size,"test-id":e.testId,variant:t(V).Text,wrap:""},null,8,["aria-label","border-radius","color","disabled","icon-before","icon-size","size","test-id","variant"])):(o(),a("span",{key:1,class:"icon-container","data-testid":e.testId},[c(e.suffix)?(o(),r(t(I),{key:0,name:e.suffix,size:f[e.size],color:e.color},null,8,["name","size","color"])):(o(),a(d,{key:1},[n(u(e.suffix),1)],64))],8,A))],2))}}),E=["data-testid"],G=/* @__PURE__ */e({name:"CLInputPill",__name:"CLInputPill",props:{color:{default:B.Neutral},label:{},testId:{default:"clll-input-pill"}},setup:e=>(l,r)=>(o(),a("span",{class:i("clll-input__pill"),"data-testid":e.testId},[s(t(M),{color:e.color,label:e.label,variant:t(V).Soft},null,8,["color","label","variant"])],10,E))}),H=["data-testid"],D=/* @__PURE__ */e({name:"CLInputColorTools",__name:"CLInputColorTools",props:{copied:{type:Boolean,default:!1},initialValue:{default:void 0},modelValue:{default:void 0},size:{default:S.Small},testId:{default:"clll-input-color-tools"}},emits:["copy","reset","update:copied"],setup(e,{emit:l}){const d=e,n=l,u="clll-input",s=p(d.copied),m={[S.Tiny]:R.Tiny,[S.Small]:R.Small,[S.Medium]:R.Medium,[S.Large]:R.Large,[S.XL]:R.XL,[S.XXL]:R.XXL,[S.XXXL]:R.XXXL,[S.XXXXL]:R.XXXXL},b=async()=>{try{d.modelValue&&(await navigator.clipboard.writeText(d.modelValue.toString()),s.value=!0,n("update:copied",!0),n("copy"))}catch(e){console.error(e)}},y=()=>{n("reset",d.initialValue)};return c(()=>d.copied,e=>{s.value=e}),c(()=>d.modelValue,()=>{s.value=!1,n("update:copied",!1)}),(l,d)=>(o(),a("span",{class:i(`${u}__selected-color-tools`),"data-testid":e.testId},[e.modelValue?(o(),r(t(F),{key:0,"aria-label":"Copy color to clipboard",class:i(`${u}__copy-to-clipboard`),color:t(B).Neutral,"icon-before":t(s)?t(P).Check:t(P).Copy,"icon-size":m[e.size],"on-click":b,size:e.size,title:t(s)?"Color copied to clipboard":"Copy color to clipboard",variant:t(V).Ghost,wrap:""},null,8,["class","color","icon-before","icon-size","size","title","variant"])):f("",!0),e.modelValue?(o(),r(t(F),{key:1,"aria-label":"Reset selected color",class:i(`${u}__reset-selected-color`),color:t(B).Neutral,"on-click":y,"icon-before":t(P).Restore,"icon-size":m[e.size],size:e.size,title:"Reset selected color",variant:t(V).Ghost,wrap:""},null,8,["class","color","icon-before","icon-size","size","variant"])):f("",!0)],10,H))}}),J=["data-testid"],K=["id","name","aria-label","autocomplete","disabled","form","maxlength","minlength","pattern","placeholder","readonly","required","spellcheck","type"],Q=/* @__PURE__ */e({name:"CLInput",__name:"CLInput",props:/* @__PURE__ */m({ariaLabel:{default:void 0},autoComplete:{type:Boolean,default:void 0},borderRadius:{default:void 0},busy:{type:Boolean,default:!1},charCounter:{type:Boolean,default:!1},color:{default:B.Neutral},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},form:{default:void 0},grouped:{type:Boolean,default:!1},id:{},label:{default:void 0},maxLength:{default:void 0},messages:{default:()=>[]},messageType:{default:void 0},minLength:{default:void 0},name:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onInput:{type:Function,default:void 0},onPrefixClick:{type:Function,default:void 0},onSuffixClick:{type:Function,default:void 0},orientation:{default:q.Vertical},pattern:{default:void 0},pill:{default:void 0},placeholder:{default:void 0},prefix:{default:void 0},prefixAriaLabel:{default:void 0},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},size:{default:S.Small},spellCheck:{type:Boolean,default:void 0},suffix:{default:void 0},suffixAriaLabel:{default:void 0},testId:{default:"clll-input"},type:{default:j.Text},variant:{default:V.Outline}},{modelValue:{},modelModifiers:{}}),emits:/* @__PURE__ */m(["reset"],["update:modelValue"]),setup(e,{expose:d,emit:n}){const s=e,m=n,I="clll-input",F=p(!1),S=b("input-elem"),B=y(e,"modelValue");s.type!==j.Color||B.value||(B.value="#FFFFFF");const T=B.value?.toString(),R=e=>Object.values(P).includes(e),V=l(()=>[I,s.borderRadius?`${I}--${s.borderRadius}`:"",s.busy?`${I}--busy`:`${I}--ready`,`${I}--${s.color}`,`${I}--${s.size}`,`${I}--${s.type}`,`${I}--${s.variant}`,s.disabled||s.busy?`${I}--disabled`:`${I}--active`,s.fluid||s.orientation===q.Horizontal?`${I}--fluid`:`${I}--fixed`,s.grouped?`${I}--grouped`:"",s.label?`${I}--haslabel`:"",s.messageType?`${I}--${s.messageType}`:"",s.orientation?`${I}--${s.orientation}`:"",s.pill?`${I}--haspill`:"",s.charCounter&&s.maxLength&&[j.Email,j.None,j.Text,j.Url].includes(s.type)?`${I}--hascharcounter`:"",s.prefix&&![j.Color,j.File].includes(s.type)?`${I}--hasprefix`:"",s.prefix&&![j.Color,j.File].includes(s.type)?R(s.prefix)?`${I}--hasiconprefix`:`${I}--hascustomprefix`:"",s.readonly?`${I}--readonly`:`${I}--writeable`,s.rounded?`${I}--rounded`:`${I}--box`,s.required?`${I}--required`:`${I}--optional`,s.suffix&&![j.Color,j.File].includes(s.type)?`${I}--hassuffix`:"",s.suffix&&![j.Color,j.File].includes(s.type)?R(s.suffix)?`${I}--hasiconsuffix`:`${I}--hascustomsuffix`:""]),M=l(()=>[`${I}__input`,{"--nocolor":s.type===j.Color&&!B.value},{"--input-group":s.grouped||s.prefix||s.suffix}]),N=e=>{B.value=e,m("reset",B.value)},A=e=>{!e.target.closest('button, a, [role="button"]')&&S.value&&S.value.focus()};return c(B,()=>{F.value=!1}),d({inputRef:S}),(l,d)=>(o(),r(X,{fluid:e.fluid,"has-pill":!!e.pill,"has-char-counter":!(!e.charCounter||!e.maxLength),orientation:e.orientation},{default:x(()=>[v("span",{class:i(t(V)),style:_(t(C)({color:e.color,variant:e.variant})),"data-testid":e.testId},[e.label?(o(),r($,{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"])):f("",!0),v("span",{class:i([`${I}__input-container`,"--focus-within"]),onClick:A},[e.prefix&&![t(j).Color,t(j).File].includes(e.type)?(o(),r(U,{key:0,prefix:e.prefix,size:e.size,grouped:e.grouped,"border-radius":e.borderRadius,color:e.color,"on-click":e.onPrefixClick,"aria-label":e.prefixAriaLabel,disabled:e.disabled||e.busy},null,8,["prefix","size","grouped","border-radius","color","on-click","aria-label","disabled"])):f("",!0),v("span",{class:i(`${I}__input-border-control`)},[g(v("input",{id:e.id,ref:"input-elem","onUpdate:modelValue":d[0]||(d[0]=e=>B.value=e),name:e.name,"aria-label":e.ariaLabel,autocomplete:e.autoComplete?"on":"off",class:i(t(M)),disabled:e.disabled||e.busy,form:e.form,maxlength:e.maxLength,minlength:e.minLength,pattern:e.pattern,placeholder:e.placeholder,readonly:e.readonly,required:e.required,spellcheck:e.spellCheck,type:e.type,onBlur:d[1]||(d[1]=(...l)=>e.onBlur&&e.onBlur(...l)),onChange:d[2]||(d[2]=(...l)=>e.onChange&&e.onChange(...l)),onFocus:d[3]||(d[3]=(...l)=>e.onFocus&&e.onFocus(...l)),onInput:d[4]||(d[4]=(...l)=>e.onInput&&e.onInput(...l))},null,42,K),[[h,B.value]])],2),e.type===t(j).Color?(o(),a("span",{key:1,class:i(`${I}__selected-color`)},u(B.value||"none"),3)):f("",!0),e.type===t(j).Color?(o(),r(D,{key:2,modelValue:B.value,"onUpdate:modelValue":d[5]||(d[5]=e=>B.value=e),copied:t(F),"onUpdate:copied":d[6]||(d[6]=e=>L(F)?F.value=e:null),"initial-value":t(T),size:e.size,onReset:N},null,8,["modelValue","copied","initial-value","size"])):f("",!0),e.suffix&&![t(j).Color,t(j).File].includes(e.type)?(o(),r(O,{key:3,suffix:e.suffix,size:e.size,grouped:e.grouped,"border-radius":e.borderRadius,color:e.color,"on-click":e.onSuffixClick,"aria-label":e.suffixAriaLabel,disabled:e.disabled||e.busy},null,8,["suffix","size","grouped","border-radius","color","on-click","aria-label","disabled"])):f("",!0),e.charCounter&&e.maxLength&&[t(j).Email,t(j).None,t(j).Text,t(j).Url].includes(e.type)?(o(),r(k,{key:4,color:e.color,"css-prefix":I,"current-length":B.value?B.value.toString().length:0,"max-length":e.maxLength,layout:t(w).Inline,size:e.size},null,8,["color","current-length","max-length","layout","size"])):f("",!0)],2)],14,J),e.pill&&e.label&&e.orientation===t(q).Horizontal?(o(),a("span",{key:0,class:i(`${I}__spacer`)},null,2)):f("",!0),e.pill?(o(),r(G,{key:1,label:e.pill,color:e.color},null,8,["label","color"])):f("",!0),e.id?(o(),r(z,{key:2,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):f("",!0)]),_:1},8,["fluid","has-pill","has-char-counter","orientation"]))}});Q.Prefix=U,Q.Suffix=O,Q.Pill=G,Q.ColorTools=D;export{Q as CLInput,Q as default};
+import{defineComponent as e,computed as l,createElementBlock as a,openBlock as o,normalizeClass as i,unref as t,createBlock as r,Fragment as d,createTextVNode as n,toDisplayString as u,createVNode as s,ref as p,watch as c,createCommentVNode as f,mergeModels as m,useTemplateRef as b,useModel as y,withCtx as x,createElementVNode as v,normalizeStyle as _,withDirectives as g,vModelDynamic as h,isRef as L}from"vue";import{_ as X,i as C,a as z}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DCByJ7MB.js";import{_ as $}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-BPwFZq94.js";import{_ as k}from"../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-BYHbqaf0.js";import{_ as I}from"../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-MCaGYSd9.js";import{_ as F}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CqwRXex5.js";import{CLSizes as S,CLColors as B,CLBorderRadius as T,CLIconSizes as R,CLColorVariants as V,CLIconNames as P,CLInputTypes as j,CLOrientation as q,CLCharCounterLayout as w}from"../../../index.js";import{_ as M}from"../../../chunks/CLPill.vue_vue_type_style_index_0_lang-B7EJOOmg.js";const N=["data-testid"],U=/* @__PURE__ */e({name:"CLInputPrefix",__name:"CLInputPrefix",props:{ariaLabel:{default:void 0},borderRadius:{default:T.XS},color:{default:B.Neutral},disabled:{type:Boolean,default:!1},grouped:{type:Boolean,default:!1},onClick:{type:Function,default:void 0},prefix:{},size:{default:S.Small},testId:{default:"clll-input-prefix"}},setup(e){const s=e,p="clll-input",c=e=>Object.values(P).includes(e),f={[S.Tiny]:R.Tiny,[S.Small]:R.Small,[S.Medium]:R.Medium,[S.Large]:R.Large,[S.XL]:R.XL,[S.XXL]:R.XXL,[S.XXXL]:R.XXXL,[S.XXXXL]:R.XXXXL},m=l(()=>!!s.onClick&&c(s.prefix)),b=l(()=>{return[`${p}__input-prefix`,"form-addon-flex","form-addon-flex--left",c(s.prefix)?`${p}__input-prefix--icon form-addon-flex--icon`:`${p}__input-prefix--string form-addon-flex--string`,{"--interactive":m},{"--input-group":s.grouped||s.prefix},{"--disabled":s.disabled},s.grouped?`form-addon-radius--left-${e=s.borderRadius,e?.replace("rounded-","")||"xs"}`:""];var e}),y=e=>{s.onClick&&e&&!s.disabled&&(e.stopPropagation(),s.onClick(e))};return(l,s)=>(o(),a("div",{class:i(t(b))},[t(m)?(o(),r(t(F),{key:0,"aria-label":e.ariaLabel,"border-radius":e.borderRadius,color:e.color,disabled:e.disabled,"icon-before":e.prefix,"icon-size":f[e.size],"on-click":y,size:e.size,"test-id":e.testId,variant:t(V).Text,wrap:""},null,8,["aria-label","border-radius","color","disabled","icon-before","icon-size","size","test-id","variant"])):(o(),a("span",{key:1,class:"icon-container","data-testid":e.testId},[c(e.prefix)?(o(),r(t(I),{key:0,name:e.prefix,size:f[e.size],color:e.color},null,8,["name","size","color"])):(o(),a(d,{key:1},[n(u(e.prefix),1)],64))],8,N))],2))}}),A=["data-testid"],O=/* @__PURE__ */e({name:"CLInputSuffix",__name:"CLInputSuffix",props:{ariaLabel:{default:void 0},borderRadius:{default:T.XS},color:{default:B.Neutral},disabled:{type:Boolean,default:!1},grouped:{type:Boolean,default:!1},onClick:{type:Function,default:void 0},suffix:{},size:{default:S.Small},testId:{default:"clll-input-suffix"}},setup(e){const s=e,p="clll-input",c=e=>Object.values(P).includes(e),f={[S.Tiny]:R.Tiny,[S.Small]:R.Small,[S.Medium]:R.Medium,[S.Large]:R.Large,[S.XL]:R.XL,[S.XXL]:R.XXL,[S.XXXL]:R.XXXL,[S.XXXXL]:R.XXXXL},m=l(()=>!!s.onClick&&c(s.suffix)),b=l(()=>{return[`${p}__input-suffix`,"form-addon-flex","form-addon-flex--right",c(s.suffix)?`${p}__input-suffix--icon form-addon-flex--icon`:`${p}__input-suffix--string form-addon-flex--string`,{"--interactive":m},{"--input-group":s.grouped||s.suffix},{"--disabled":s.disabled},s.grouped?`form-addon-radius--right-${e=s.borderRadius,e?.replace("rounded-","")||"xs"}`:""];var e}),y=e=>{s.onClick&&e&&!s.disabled&&(e.stopPropagation(),s.onClick(e))};return(l,s)=>(o(),a("div",{class:i(t(b))},[t(m)?(o(),r(t(F),{key:0,"aria-label":e.ariaLabel,"border-radius":e.borderRadius,color:e.color,disabled:e.disabled,"icon-before":e.suffix,"icon-size":f[e.size],"on-click":y,size:e.size,"test-id":e.testId,variant:t(V).Text,wrap:""},null,8,["aria-label","border-radius","color","disabled","icon-before","icon-size","size","test-id","variant"])):(o(),a("span",{key:1,class:"icon-container","data-testid":e.testId},[c(e.suffix)?(o(),r(t(I),{key:0,name:e.suffix,size:f[e.size],color:e.color},null,8,["name","size","color"])):(o(),a(d,{key:1},[n(u(e.suffix),1)],64))],8,A))],2))}}),E=["data-testid"],G=/* @__PURE__ */e({name:"CLInputPill",__name:"CLInputPill",props:{color:{default:B.Neutral},label:{},testId:{default:"clll-input-pill"}},setup:e=>(l,r)=>(o(),a("span",{class:i("clll-input__pill"),"data-testid":e.testId},[s(t(M),{color:e.color,label:e.label,variant:t(V).Soft},null,8,["color","label","variant"])],10,E))}),H=["data-testid"],D=/* @__PURE__ */e({name:"CLInputColorTools",__name:"CLInputColorTools",props:{copied:{type:Boolean,default:!1},initialValue:{default:void 0},modelValue:{default:void 0},size:{default:S.Small},testId:{default:"clll-input-color-tools"}},emits:["copy","reset","update:copied"],setup(e,{emit:l}){const d=e,n=l,u="clll-input",s=p(d.copied),m={[S.Tiny]:R.Tiny,[S.Small]:R.Small,[S.Medium]:R.Medium,[S.Large]:R.Large,[S.XL]:R.XL,[S.XXL]:R.XXL,[S.XXXL]:R.XXXL,[S.XXXXL]:R.XXXXL},b=async()=>{try{d.modelValue&&(await navigator.clipboard.writeText(d.modelValue.toString()),s.value=!0,n("update:copied",!0),n("copy"))}catch(e){console.error(e)}},y=()=>{n("reset",d.initialValue)};return c(()=>d.copied,e=>{s.value=e}),c(()=>d.modelValue,()=>{s.value=!1,n("update:copied",!1)}),(l,d)=>(o(),a("span",{class:i(`${u}__selected-color-tools`),"data-testid":e.testId},[e.modelValue?(o(),r(t(F),{key:0,"aria-label":"Copy color to clipboard",class:i(`${u}__copy-to-clipboard`),color:t(B).Neutral,"icon-before":t(s)?t(P).Check:t(P).Copy,"icon-size":m[e.size],"on-click":b,size:e.size,title:t(s)?"Color copied to clipboard":"Copy color to clipboard",variant:t(V).Ghost,wrap:""},null,8,["class","color","icon-before","icon-size","size","title","variant"])):f("",!0),e.modelValue?(o(),r(t(F),{key:1,"aria-label":"Reset selected color",class:i(`${u}__reset-selected-color`),color:t(B).Neutral,"on-click":y,"icon-before":t(P).Restore,"icon-size":m[e.size],size:e.size,title:"Reset selected color",variant:t(V).Ghost,wrap:""},null,8,["class","color","icon-before","icon-size","size","variant"])):f("",!0)],10,H))}}),J=["data-testid"],K=["id","name","aria-label","autocomplete","disabled","form","maxlength","minlength","pattern","placeholder","readonly","required","spellcheck","type"],Q=/* @__PURE__ */e({name:"CLInput",__name:"CLInput",props:/* @__PURE__ */m({ariaLabel:{default:void 0},autoComplete:{type:Boolean,default:void 0},borderRadius:{default:void 0},busy:{type:Boolean,default:!1},charCounter:{type:Boolean,default:!1},color:{default:B.Neutral},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},form:{default:void 0},grouped:{type:Boolean,default:!1},id:{},label:{default:void 0},maxLength:{default:void 0},messages:{default:()=>[]},messageType:{default:void 0},minLength:{default:void 0},name:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onInput:{type:Function,default:void 0},onPrefixClick:{type:Function,default:void 0},onSuffixClick:{type:Function,default:void 0},orientation:{default:q.Vertical},pattern:{default:void 0},pill:{default:void 0},placeholder:{default:void 0},prefix:{default:void 0},prefixAriaLabel:{default:void 0},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},size:{default:S.Small},spellCheck:{type:Boolean,default:void 0},suffix:{default:void 0},suffixAriaLabel:{default:void 0},testId:{default:"clll-input"},type:{default:j.Text},variant:{default:V.Outline}},{modelValue:{},modelModifiers:{}}),emits:/* @__PURE__ */m(["reset"],["update:modelValue"]),setup(e,{expose:d,emit:n}){const s=e,m=n,I="clll-input",F=p(!1),S=b("input-elem"),B=y(e,"modelValue");s.type!==j.Color||B.value||(B.value="#FFFFFF");const T=B.value?.toString(),R=e=>Object.values(P).includes(e),V=l(()=>[I,s.borderRadius?`${I}--${s.borderRadius}`:"",s.busy?`${I}--busy`:`${I}--ready`,`${I}--${s.color}`,`${I}--${s.size}`,`${I}--${s.type}`,`${I}--${s.variant}`,s.disabled||s.busy?`${I}--disabled`:`${I}--active`,s.fluid||s.orientation===q.Horizontal?`${I}--fluid`:`${I}--fixed`,s.grouped?`${I}--grouped`:"",s.label?`${I}--haslabel`:"",s.messageType?`${I}--${s.messageType}`:"",s.orientation?`${I}--${s.orientation}`:"",s.pill?`${I}--haspill`:"",s.charCounter&&s.maxLength&&[j.Email,j.None,j.Text,j.Url].includes(s.type)?`${I}--hascharcounter`:"",s.prefix&&![j.Color,j.File].includes(s.type)?`${I}--hasprefix`:"",s.prefix&&![j.Color,j.File].includes(s.type)?R(s.prefix)?`${I}--hasiconprefix`:`${I}--hascustomprefix`:"",s.readonly?`${I}--readonly`:`${I}--writeable`,s.rounded?`${I}--rounded`:`${I}--box`,s.required?`${I}--required`:`${I}--optional`,s.suffix&&![j.Color,j.File].includes(s.type)?`${I}--hassuffix`:"",s.suffix&&![j.Color,j.File].includes(s.type)?R(s.suffix)?`${I}--hasiconsuffix`:`${I}--hascustomsuffix`:""]),M=l(()=>[`${I}__input`,{"--nocolor":s.type===j.Color&&!B.value},{"--input-group":s.grouped||s.prefix||s.suffix}]),N=e=>{B.value=e,m("reset",B.value)},A=e=>{!e.target.closest('button, a, [role="button"]')&&S.value&&S.value.focus()};return c(B,()=>{F.value=!1}),d({inputRef:S}),(l,d)=>(o(),r(X,{fluid:e.fluid,"has-pill":!!e.pill,"has-char-counter":!(!e.charCounter||!e.maxLength),orientation:e.orientation},{default:x(()=>[v("span",{class:i(t(V)),style:_(t(C)({color:e.color,variant:e.variant})),"data-testid":e.testId},[e.label?(o(),r($,{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"])):f("",!0),v("span",{class:i([`${I}__input-container`,"--focus-within"]),onClick:A},[e.prefix&&![t(j).Color,t(j).File].includes(e.type)?(o(),r(U,{key:0,prefix:e.prefix,size:e.size,grouped:e.grouped,"border-radius":e.borderRadius,color:e.color,"on-click":e.onPrefixClick,"aria-label":e.prefixAriaLabel,disabled:e.disabled||e.busy},null,8,["prefix","size","grouped","border-radius","color","on-click","aria-label","disabled"])):f("",!0),v("span",{class:i(`${I}__input-border-control`)},[g(v("input",{id:e.id,ref:"input-elem","onUpdate:modelValue":d[0]||(d[0]=e=>B.value=e),name:e.name,"aria-label":e.ariaLabel,autocomplete:e.autoComplete?"on":"off",class:i(t(M)),disabled:e.disabled||e.busy,form:e.form,maxlength:e.maxLength,minlength:e.minLength,pattern:e.pattern,placeholder:e.placeholder,readonly:e.readonly,required:e.required,spellcheck:e.spellCheck,type:e.type,onBlur:d[1]||(d[1]=(...l)=>e.onBlur&&e.onBlur(...l)),onChange:d[2]||(d[2]=(...l)=>e.onChange&&e.onChange(...l)),onFocus:d[3]||(d[3]=(...l)=>e.onFocus&&e.onFocus(...l)),onInput:d[4]||(d[4]=(...l)=>e.onInput&&e.onInput(...l))},null,42,K),[[h,B.value]])],2),e.type===t(j).Color?(o(),a("span",{key:1,class:i(`${I}__selected-color`)},u(B.value||"none"),3)):f("",!0),e.type===t(j).Color?(o(),r(D,{key:2,modelValue:B.value,"onUpdate:modelValue":d[5]||(d[5]=e=>B.value=e),copied:t(F),"onUpdate:copied":d[6]||(d[6]=e=>L(F)?F.value=e:null),"initial-value":t(T),size:e.size,onReset:N},null,8,["modelValue","copied","initial-value","size"])):f("",!0),e.suffix&&![t(j).Color,t(j).File].includes(e.type)?(o(),r(O,{key:3,suffix:e.suffix,size:e.size,grouped:e.grouped,"border-radius":e.borderRadius,color:e.color,"on-click":e.onSuffixClick,"aria-label":e.suffixAriaLabel,disabled:e.disabled||e.busy},null,8,["suffix","size","grouped","border-radius","color","on-click","aria-label","disabled"])):f("",!0),e.charCounter&&e.maxLength&&[t(j).Email,t(j).None,t(j).Text,t(j).Url].includes(e.type)?(o(),r(k,{key:4,color:e.color,"css-prefix":I,"current-length":B.value?B.value.toString().length:0,"max-length":e.maxLength,layout:t(w).Inline,size:e.size},null,8,["color","current-length","max-length","layout","size"])):f("",!0)],2)],14,J),e.pill&&e.label&&e.orientation===t(q).Horizontal?(o(),a("span",{key:0,class:i(`${I}__spacer`)},null,2)):f("",!0),e.pill?(o(),r(G,{key:1,label:e.pill,color:e.color},null,8,["label","color"])):f("",!0),e.id?(o(),r(z,{key:2,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):f("",!0)]),_:1},8,["fluid","has-pill","has-char-counter","orientation"]))}});Q.Prefix=U,Q.Suffix=O,Q.Pill=G,Q.ColorTools=D;export{Q as CLInput,Q as default};

package/dist/components/Indicators/CLPill/CLPill.css

@@ -1 +1 @@
-.clll-pill{width:fit-content;background-color:var(--clll-pill-bg-color, transparent);border-color:var(--clll-pill-border-color, transparent);border-style:var(--clll-pill-border-style, none);border-width:var(--clll-pill-border-width, 0)}.clll-pill.clll-pill--rounded{position:relative;overflow:hidden;border-radius:var(--clll-rounded-xs);flex:none;display:inline-flex;align-items:center;box-sizing:border-box;border-radius:var(--clll-pill-theme-radius, var(--clll-rounded-xs))}.clll-pill:not(.clll-pill--rounded){position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box}.clll-pill.clll-pill--has-count>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1)}.clll-pill .clll-pill__count{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0;font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);display:block;font-weight:400;padding:var(--clll-py-xs) var(--clll-px-sm);color:var(--clll-pill-text-color, inherit);background-color:var(--clll-pill-count-bg, transparent);border-left-style:var(--clll-pill-count-border-style, none);border-left-color:var(--clll-pill-count-border-color, transparent);border-left-width:var(--clll-pill-count-border-width, 0)}.clll-pill .clll-pill__label{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0;font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);display:block;font-weight:400;padding:var(--clll-py-xs) var(--clll-px-sm);color:var(--clll-pill-text-color, inherit);background-color:var(--clll-pill-bg-color, transparent)}.clll-pill .clll-icon{color:var(--clll-pill-text-color, inherit);background-color:var(--clll-pill-bg-color, transparent)}.clll-pill.clll-pill--has-count .clll-pill__label{padding-right:var(--clll-px-s-sm)}.clll-pill.clll-pill--has-icon,.clll-pill.clll-pill--has-icon .clll-pill__label{padding-left:var(--clll-px-xs)}.clll-pill.clll-pill--clickable{transition-property:all;transition-duration:.3s;transition-timing-function:ease}.clll-pill.clll-pill--clickable:hover{background-color:var(--clll-pill-hover-bg, transparent)}.clll-pill.clll-pill--elevated{box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}
+.clll-pill{position:relative;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;background-color:var(--clll-pill-bg-color, transparent);border-color:var(--clll-pill-border-color, transparent);border-style:var(--clll-pill-border-style, none);border-width:var(--clll-pill-border-width, 0);width:fit-content;overflow:hidden}.clll-pill.clll-pill--rounded .clll-pill__container,.clll-pill.clll-pill--rounded .clll-pill__button{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box}.clll-pill.clll-pill--rounded{border-radius:var(--clll-pill-theme-radius, var(--clll-rounded-xs))}.clll-pill:not(.clll-pill--rounded){position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box}.clll-pill:not(.clll-pill--rounded) .clll-pill__container,.clll-pill:not(.clll-pill--rounded) .clll-pill__button{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box}.clll-pill .clll-pill__count{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0;font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);display:block;font-weight:400;padding:var(--clll-py-xs) var(--clll-px-md);color:var(--clll-pill-text-color, inherit);background-color:var(--clll-pill-count-bg, transparent);border-left-style:var(--clll-pill-count-border-style, none);border-left-color:var(--clll-pill-count-border-color, transparent);border-left-width:var(--clll-pill-count-border-width, 0)}.clll-pill .clll-text{padding:var(--clll-py-sm) var(--clll-px-lg);color:var(--clll-pill-text-color, inherit);background-color:var(--clll-pill-bg-color, transparent)}.clll-pill .clll-icon{color:var(--clll-pill-text-color, inherit);background-color:var(--clll-pill-bg-color, transparent)}.clll-pill.clll-pill--has-count .clll-pill__container>:not([hidden])~:not([hidden]),.clll-pill.clll-pill--has-count .clll-pill__button>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1)}.clll-pill.clll-pill--has-count .clll-pill__container .clll-text,.clll-pill.clll-pill--has-count .clll-pill__button .clll-text{padding-right:var(--clll-px-s-sm)}.clll-pill.clll-pill--has-icon .clll-pill__container,.clll-pill.clll-pill--has-icon .clll-pill__button,.clll-pill.clll-pill--has-icon .clll-pill__container .clll-text,.clll-pill.clll-pill--has-icon .clll-pill__button .clll-text{padding-left:var(--clll-px-xs)}.clll-pill.clll-pill--dismissable .clll-pill__button{padding-right:var(--clll-px-sm)}.clll-pill .clll-pill__button{transition-property:all;transition-duration:.3s;transition-timing-function:ease}.clll-pill .clll-pill__button:hover{background-color:var(--clll-pill-hover-bg, transparent)}.clll-pill.clll-pill--elevated{box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}

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

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

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

@@ -1,9 +1,11 @@
-import { CLGenericFunction, CLIconNames, CLColors, CLColorVariants } from '../../../types';
+import { CLColors, CLColorVariants, CLIconNames, CLGenericFunction } from '../../../types';
 export interface CLPillProps {
     /** Sets the color of the Pill. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
     color?: CLColors;
     /** The count to display in the Pill. */
     count?: number;
+    /** A boolean value which dictates whether the Pill is dismissable. */
+    dismissable?: boolean;
     /** The `elevated` property displays a shadow to indicate elevation. */
     elevated?: boolean;
     /** Sets the icon which is positioned before the Pill's label. */
@@ -14,6 +16,8 @@ export interface CLPillProps {
     label: string;
     /** A callback function to handle click events. */
     onClick?: CLGenericFunction;
+    /** A callback function to handle when the pill is dismissed. */
+    onDismiss?: CLGenericFunction;
     /** When set to `false` it will not render a Pill with rounded corners. */
     rounded?: boolean;
     /** Sets a custom ID used for unit tests. */
@@ -28,5 +32,5 @@ declare const _default: import('vue').DefineComponent<CLPillProps, {}, {}, {}, {
     testId: string;
     elevated: boolean;
     iconFilled: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;