@kong/kongponents 9.64.21 → 9.64.22-pr.3447.2d54e3f.0

package/dist/kongponents102.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("@kong/icons"),f=require("./kongponents183.cjs"),h={class:"k-collapse"},C={class:"collapse-trigger"},b=["aria-controls","aria-expanded","aria-label"],V={key:0,class:"collapse-trigger-label","data-testid":"collapse-trigger-label"},k={key:0,class:"collapse-visible-content","data-testid":"collapse-visible-content"},S=["id"],N=e.defineComponent({__name:"KCollapse",props:{modelValue:{type:Boolean,default:!0},title:{default:""},titleTag:{default:"div"},triggerLabel:{default:""},triggerAlignment:{default:"trailing"}},emits:["toggle","update:modelValue"],setup(l,{emit:c}){const r=c,u=e.useSlots(),d=e.useId(),o=e.ref(!0),s=e.ref(!1),g=e.computed(()=>l.triggerAlignment==="trailing"),m=()=>!!u["visible-content"],v=e.computed({get(){return l.modelValue},set(t){i(t)}}),a=e.computed(()=>s.value?o.value:l.modelValue),i=t=>{s.value||(o.value=l.modelValue),o.value=t!==void 0?t:!o.value,s.value=!0,r("toggle",o.value),r("update:modelValue",o.value)};return e.watch(v,(t,n)=>{t!==n&&i(t)}),(t,n)=>(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",{class:e.normalizeClass(["collapse-heading",{"has-trailing-trigger":g.value}])},[l.title||t.$slots.title?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.titleTag),{key:0,class:"collapse-title","data-testid":"collapse-title"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(l.title),1)],!0)]),_:3})):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.renderSlot(t.$slots,"trigger",{isCollapsed:a.value,toggle:i},()=>[e.createElementVNode("button",{"aria-controls":e.unref(d),"aria-expanded":!a.value,"aria-label":l.triggerLabel?void 0:"Toggle content",class:"collapse-trigger-content","data-testid":"collapse-trigger-content",type:"button",onClick:n[0]||(n[0]=e.withModifiers(y=>i(),["prevent","stop"]))},[e.renderSlot(t.$slots,"trigger-content",{},()=>[e.createVNode(e.unref(p.ChevronRightIcon),{class:e.normalizeClass(["collapse-trigger-icon",{"collapse-expanded":!a.value}]),"data-testid":"collapse-trigger-icon",decorative:"",size:`var(--kui-icon-size-40, ${e.unref(f.KUI_ICON_SIZE_40)})`},null,8,["class","size"]),l.triggerLabel?(e.openBlock(),e.createElementBlock("span",V,e.toDisplayString(l.triggerLabel),1)):e.createCommentVNode("",!0)],!0)],8,b)],!0)])],2),m()?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(t.$slots,"visible-content",{},void 0,!0)])):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"kongponents-fade-transition"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{id:e.unref(d),class:"collapse-hidden-content","data-testid":"collapse-hidden-content"},[e.renderSlot(t.$slots,"default",{},void 0,!0)],8,S),[[e.vShow,!a.value]])]),_:3})]))}});exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("@kong/icons"),f=require("./kongponents184.cjs"),h={class:"k-collapse"},C={class:"collapse-trigger"},b=["aria-controls","aria-expanded","aria-label"],V={key:0,class:"collapse-trigger-label","data-testid":"collapse-trigger-label"},k={key:0,class:"collapse-visible-content","data-testid":"collapse-visible-content"},S=["id"],N=e.defineComponent({__name:"KCollapse",props:{modelValue:{type:Boolean,default:!0},title:{default:""},titleTag:{default:"div"},triggerLabel:{default:""},triggerAlignment:{default:"trailing"}},emits:["toggle","update:modelValue"],setup(l,{emit:c}){const r=c,u=e.useSlots(),d=e.useId(),o=e.ref(!0),s=e.ref(!1),g=e.computed(()=>l.triggerAlignment==="trailing"),m=()=>!!u["visible-content"],v=e.computed({get(){return l.modelValue},set(t){i(t)}}),a=e.computed(()=>s.value?o.value:l.modelValue),i=t=>{s.value||(o.value=l.modelValue),o.value=t!==void 0?t:!o.value,s.value=!0,r("toggle",o.value),r("update:modelValue",o.value)};return e.watch(v,(t,n)=>{t!==n&&i(t)}),(t,n)=>(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",{class:e.normalizeClass(["collapse-heading",{"has-trailing-trigger":g.value}])},[l.title||t.$slots.title?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.titleTag),{key:0,class:"collapse-title","data-testid":"collapse-title"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(l.title),1)],!0)]),_:3})):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.renderSlot(t.$slots,"trigger",{isCollapsed:a.value,toggle:i},()=>[e.createElementVNode("button",{"aria-controls":e.unref(d),"aria-expanded":!a.value,"aria-label":l.triggerLabel?void 0:"Toggle content",class:"collapse-trigger-content","data-testid":"collapse-trigger-content",type:"button",onClick:n[0]||(n[0]=e.withModifiers(y=>i(),["prevent","stop"]))},[e.renderSlot(t.$slots,"trigger-content",{},()=>[e.createVNode(e.unref(p.ChevronRightIcon),{class:e.normalizeClass(["collapse-trigger-icon",{"collapse-expanded":!a.value}]),"data-testid":"collapse-trigger-icon",decorative:"",size:`var(--kui-icon-size-40, ${e.unref(f.KUI_ICON_SIZE_40)})`},null,8,["class","size"]),l.triggerLabel?(e.openBlock(),e.createElementBlock("span",V,e.toDisplayString(l.triggerLabel),1)):e.createCommentVNode("",!0)],!0)],8,b)],!0)])],2),m()?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(t.$slots,"visible-content",{},void 0,!0)])):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"kongponents-fade-transition"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{id:e.unref(d),class:"collapse-hidden-content","data-testid":"collapse-hidden-content"},[e.renderSlot(t.$slots,"default",{},void 0,!0)],8,S),[[e.vShow,!a.value]])]),_:3})]))}});exports.default=N;

package/dist/kongponents102.es.js

@@ -1,6 +1,6 @@
 import { defineComponent as N, useSlots as T, useId as w, ref as f, computed as g, watch as z, openBlock as n, createElementBlock as u, createElementVNode as r, normalizeClass as h, createBlock as B, resolveDynamicComponent as D, withCtx as b, renderSlot as a, createTextVNode as L, toDisplayString as C, createCommentVNode as v, withModifiers as E, unref as d, createVNode as V, Transition as A, withDirectives as K, vShow as x } from "vue";
 import { ChevronRightIcon as M } from "@kong/icons";
-import { KUI_ICON_SIZE_40 as O } from "./kongponents183.es.js";
+import { KUI_ICON_SIZE_40 as O } from "./kongponents184.es.js";
 const R = { class: "k-collapse" }, U = { class: "collapse-trigger" }, Z = ["aria-controls", "aria-expanded", "aria-label"], j = {
   key: 0,
   class: "collapse-trigger-label",

package/dist/kongponents104.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),N=require("./kongponents38.cjs"),U=require("./kongponents62.cjs"),L=require("./kongponents65.cjs");;/* empty css                 */require("./kongponents7.cjs");const R=require("./kongponents12.cjs"),W=require("@kong/icons"),S=require("./kongponents183.cjs"),F=require("./kongponents182.cjs"),G=require("./kongponents186.cjs"),T=require("./kongponents187.cjs"),V=require("./kongponents188.cjs"),H=["tabindex"],Z=["innerHTML"],j={key:1,class:"range-display"},X={key:3,class:"relative-periods-container"},J={class:"timeframe-section-title"},Q={class:"timeframe-buttons"},Y={class:"datetime-picker-footer-container"},_=e.defineComponent({__name:"KDateTimePicker",props:{clearButton:{type:Boolean},icon:{type:Boolean,default:!0},modelValue:{default:()=>({start:null,end:null})},maxDate:{default:()=>{}},minDate:{default:()=>{}},mode:{},placeholder:{default:"Select a time range"},range:{type:Boolean},timePeriods:{default:()=>[]},width:{default:"100%"},disabled:{type:Boolean},readonly:{type:Boolean},popoverPlacement:{default:"bottom-start"},invalidTimeErrorMessage:{default:"Start time cannot exceed end time."},timeGranularity:{default:"minutely"},sameDayFullRange:{type:Boolean,default:!1},customRangeValidation:{type:Function}},emits:["change","update:modelValue"],setup(a,{emit:q}){const c=q,w=e.ref(null),D=e.computed(()=>a.mode!==R.DateTimePickerModes.Relative),o=e.computed(()=>R.ModeArrayCustom.includes(a.mode)&&!a.range),s=e.computed(()=>a.timePeriods.length>0),u=e.computed(()=>t.tabName==="custom"||!s.value),v=e.ref(!0),h=e.ref(!1),x=e.ref(0),B={start:null,end:null},y=e.ref(a.modelValue.start||null),m=e.ref(a.modelValue||B),P=o.value?y:m,g=e.useTemplateRef("calendarWrapperRef"),$=e.computed(()=>({width:F.normalizeSize(a.width)})),k=Intl.DateTimeFormat().resolvedOptions().timeZone,t=e.reactive({abbreviatedDisplay:a.placeholder,fullRangeDisplay:"",popoverOpen:!1,selectedRange:{start:new Date,end:new Date},previouslySelectedRange:{start:new Date,end:new Date},selectedTimeframe:a.timePeriods[0]?.values[0]||null,previouslySelectedTimeframe:a.timePeriods[0]?.values[0]||null,tabName:"relative"}),b=l=>{if(!l)return;const n=o.value?!l.start:!l.start||!l.end,i=l?.start||new Date,d=l?.end||null;v.value=!!n,!o.value&&l&&l.start&&l.end?(m.value.start=i,m.value.end=d):l&&l.start&&(y.value=i),t.selectedRange=t.previouslySelectedRange={start:i,end:d}},C=(l,n=!1)=>{if(l){if(t.selectedTimeframe=t.previouslySelectedTimeframe=l,t.selectedRange={timePeriodsKey:t.selectedTimeframe.key},t.selectedTimeframe.start&&t.selectedTimeframe.end){const i=new Date(t.selectedTimeframe.start()),d=new Date(t.selectedTimeframe.end());t.fullRangeDisplay=E({start:i,end:d},!1),t.selectedRange.start=i,t.selectedRange.end=d}else t.fullRangeDisplay="";v.value=!1,n&&z()}},K=()=>{m.value=B,y.value=null,t.abbreviatedDisplay=a.placeholder,t.fullRangeDisplay="",s.value&&(t.selectedTimeframe=a.timePeriods[0]?.values[0]||null),t.selectedRange=t.previouslySelectedRange=B,c("change",t.selectedRange),c("update:modelValue",t.selectedRange)},E=(l,n)=>{const{start:i,end:d}=l;let r=a.timeGranularity==="secondly"?"PP hh:mm:ss a":"PP hh:mm a";const f=T.default(i,k,"(z)");return!D.value&&s.value?r="PP hh:mm a":R.ModeDateOnly.includes(a.mode)&&(r="PP"),o.value?`${V.default(i,r)} ${f}`:n?`<div>${V.default(i,r)} -&nbsp;</div><div>${T.default(d,k,r)} ${f}</div>`:`${V.default(i,r)} - ${T.default(d,k,r)} ${f}`},z=async()=>{o.value?t.selectedRange.start&&(c("change",{start:t.selectedRange.start,end:null}),c("update:modelValue",{start:t.selectedRange.start,end:null})):(c("change",t.selectedRange),c("update:modelValue",t.selectedRange)),w.value?.hidePopover(),p()},p=()=>{if(u.value&&t.selectedRange?.start)t.abbreviatedDisplay=E(t.selectedRange,!0);else if(s.value&&!u.value){const l=T.default(new Date,k,"(z)");t.abbreviatedDisplay=`${t.selectedTimeframe?.display} ${l}`}},M=l=>l.charAt(0).toUpperCase()+l.slice(1),O=l=>t.selectedTimeframe?.key===l.key?"primary":"secondary";e.watch(y,(l,n)=>{l!==void 0&&l!==n&&b({start:l,end:null})},{immediate:!0}),e.watch(m,(l,n)=>{l!==void 0&&l!==n&&b(l)},{immediate:!0}),e.watch(()=>t.tabName,(l,n)=>{n!==void 0&&l==="relative"?C(t.previouslySelectedTimeframe):n!==void 0&&l==="custom"&&b(t.previouslySelectedRange)}),e.watch(()=>a.modelValue,()=>{if(R.ModeArrayRelative.includes(a.mode)&&a.modelValue.timePeriodsKey){t.tabName="relative",v.value=!1;for(const l of a.timePeriods){const n=l.values.find(i=>i.key===a.modelValue.timePeriodsKey);if(n){C(n),p();break}}}else t.tabName="custom",b(a.modelValue),(a.modelValue.start&&a.modelValue.end||o.value&&a.modelValue.start)&&p();x.value++},{immediate:!0}),e.watch(()=>a.timeGranularity,()=>{p()});const A=()=>{t.popoverOpen=!1,g.value&&g.value.resetTime()},I=()=>{t.popoverOpen=!0,g.value&&g.value.initTimeInputs()};return(l,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-datetime-picker",{"set-min-width":s.value}]),style:e.normalizeStyle($.value)},[e.createVNode(U.default,{ref_key:"kPop",ref:w,disabled:a.disabled||a.readonly,"hide-caret":"","hide-close-icon":"",offset:`var(--kui-space-40, ${e.unref(S.KUI_SPACE_40)})`,placement:a.popoverPlacement,width:"auto",onClose:A,onOpen:I},{content:e.withCtx(()=>[s.value&&D.value?(e.openBlock(),e.createBlock(L.default,{key:0,modelValue:t.tabName,"onUpdate:modelValue":n[0]||(n[0]=i=>t.tabName=i),class:"datetime-picker-toggle","data-testid":"datetime-picker-toggle",options:[{label:"Relative",value:"relative"},{label:"Custom",value:"custom"}],onClick:n[1]||(n[1]=i=>t.tabName=i)},null,8,["modelValue"])):e.createCommentVNode("",!0),!u.value&&t.fullRangeDisplay?(e.openBlock(),e.createElementBlock("p",j,e.toDisplayString(t.fullRangeDisplay),1)):e.createCommentVNode("",!0),D.value&&u.value?(e.openBlock(),e.createBlock(G.default,{key:x.value,ref:"calendarWrapperRef",modelValue:e.unref(P),"onUpdate:modelValue":n[2]||(n[2]=i=>e.isRef(P)?P.value=i:null),error:h.value,"onUpdate:error":n[3]||(n[3]=i=>h.value=i),"custom-range-validation":a.customRangeValidation,"error-message":a.invalidTimeErrorMessage,"is-range":!o.value,"k-date-picker-mode":a.mode,"max-date":a.maxDate,"min-date":a.minDate,"same-day-full-range":a.sameDayFullRange,"time-granularity":a.timeGranularity},null,8,["modelValue","error","custom-range-validation","error-message","is-range","k-date-picker-mode","max-date","min-date","same-day-full-range","time-granularity"])):s.value&&!o.value?(e.openBlock(),e.createElementBlock("div",X,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.timePeriods,(i,d)=>(e.openBlock(),e.createElementBlock("div",{key:`section-${String(i.section||d)}`,class:"timeframe-section"},[e.createElementVNode("div",J,e.toDisplayString(i.section),1),e.createElementVNode("div",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.values,(r,f)=>(e.openBlock(),e.createBlock(N.default,{key:`time-${f}`,appearance:O(r),class:"timeframe-button","data-testid":`select-timeframe-${r.key}`,onClick:ee=>C(r,!0)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(M(r.timeframeText)),1)]),_:2},1032,["appearance","data-testid","onClick"]))),128))])]))),128))])):e.createCommentVNode("",!0)]),footer:e.withCtx(()=>[e.createElementVNode("div",Y,[a.clearButton?(e.openBlock(),e.createBlock(N.default,{key:0,appearance:"tertiary",class:"action-button","data-testid":"datetime-picker-clear",onClick:n[4]||(n[4]=i=>K())},{default:e.withCtx(()=>[...n[6]||(n[6]=[e.createTextVNode(" Clear ",-1)])]),_:1})):e.createCommentVNode("",!0),u.value?(e.openBlock(),e.createBlock(N.default,{key:1,appearance:"tertiary",class:"action-button","data-testid":"datetime-picker-submit",disabled:v.value||h.value,onClick:n[5]||(n[5]=i=>z())},{default:e.withCtx(()=>[...n[7]||(n[7]=[e.createTextVNode(" Apply ",-1)])]),_:1},8,["disabled"])):e.createCommentVNode("",!0)])]),default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["datetime-picker-trigger-wrapper",{disabled:a.disabled}])},[e.createElementVNode("div",{class:e.normalizeClass(["datetime-picker-trigger",{disabled:a.disabled,readonly:a.readonly}]),"data-testid":"datetime-picker-trigger",role:"button",style:e.normalizeStyle($.value),tabindex:a.disabled?-1:0},[e.createElementVNode("div",{class:e.normalizeClass(["datetime-picker-display",{"has-icon":a.icon,disabled:a.disabled}]),"data-testid":"datetime-picker-display",innerHTML:t.abbreviatedDisplay},null,10,Z)],14,H),a.icon?(e.openBlock(),e.createBlock(e.unref(W.CalIcon),{key:0,class:"calendar-icon",color:`var(--kui-color-text-neutral, ${e.unref(S.KUI_COLOR_TEXT_NEUTRAL)})`,decorative:"",size:`var(--kui-icon-size-40, ${e.unref(S.KUI_ICON_SIZE_40)})`},null,8,["color","size"])):e.createCommentVNode("",!0)],2)]),_:1},8,["disabled","offset","placement"])],6))}});exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),v=require("date-fns"),C=require("./kongponents38.cjs"),F=require("./kongponents62.cjs"),L=require("./kongponents65.cjs");;/* empty css                 */require("./kongponents7.cjs");const R=require("./kongponents12.cjs"),Z=require("@kong/icons"),N=require("./kongponents184.cjs"),W=require("./kongponents182.cjs"),G=require("./kongponents190.cjs"),H=["tabindex"],j=["innerHTML"],X={key:1,class:"range-display"},J={key:3,class:"relative-periods-container"},Q={class:"timeframe-section-title"},Y={class:"timeframe-buttons"},_={class:"datetime-picker-footer-container"},ee=e.defineComponent({__name:"KDateTimePicker",props:{clearButton:{type:Boolean},icon:{type:Boolean,default:!0},modelValue:{default:()=>({start:null,end:null})},maxDate:{default:()=>{}},minDate:{default:()=>{}},mode:{},placeholder:{default:"Select a time range"},range:{type:Boolean},timePeriods:{default:()=>[]},width:{default:"100%"},disabled:{type:Boolean},readonly:{type:Boolean},popoverPlacement:{default:"bottom-start"},invalidTimeErrorMessage:{default:"Start time cannot exceed end time."},timeGranularity:{default:"minutely"},sameDayFullRange:{type:Boolean,default:!1},customRangeValidation:{type:Function}},emits:["change","update:modelValue"],setup(a,{emit:q}){const c=q,S=e.ref(null),D=e.computed(()=>a.mode!==R.DateTimePickerModes.Relative),d=e.computed(()=>R.ModeArrayCustom.includes(a.mode)&&!a.range),s=e.computed(()=>a.timePeriods.length>0),m=e.computed(()=>t.tabName==="custom"||!s.value),y=e.ref(!0),T=e.ref(!1),w=e.ref(0),h={start:null,end:null},g=e.ref(a.modelValue.start||null),u=e.ref(a.modelValue||h),B=d.value?g:u,k=e.useTemplateRef("calendarWrapperRef"),V=e.computed(()=>({width:W.normalizeSize(a.width)})),K=Intl.DateTimeFormat().resolvedOptions().timeZone,t=e.reactive({abbreviatedDisplay:a.placeholder,fullRangeDisplay:"",popoverOpen:!1,selectedRange:{start:new Date,end:new Date},previouslySelectedRange:{start:new Date,end:new Date},selectedTimeframe:a.timePeriods[0]?.values[0]||null,previouslySelectedTimeframe:a.timePeriods[0]?.values[0]||null,tabName:"relative"}),b=l=>{if(!l)return;const n=d.value?!l.start:!l.start||!l.end,i=l?.start||new Date,o=l?.end||null;y.value=!!n,!d.value&&l&&l.start&&l.end?(u.value.start=i,u.value.end=o):l&&l.start&&(g.value=i),t.selectedRange=t.previouslySelectedRange={start:i,end:o}},P=(l,n=!1)=>{if(l){if(t.selectedTimeframe=t.previouslySelectedTimeframe=l,t.selectedRange={timePeriodsKey:t.selectedTimeframe.key},t.selectedTimeframe.start&&t.selectedTimeframe.end){const i=new Date(t.selectedTimeframe.start()),o=new Date(t.selectedTimeframe.end());t.fullRangeDisplay=$({start:i,end:o},!1),t.selectedRange.start=i,t.selectedRange.end=o}else t.fullRangeDisplay="";y.value=!1,n&&E()}},M=()=>{u.value=h,g.value=null,t.abbreviatedDisplay=a.placeholder,t.fullRangeDisplay="",s.value&&(t.selectedTimeframe=a.timePeriods[0]?.values[0]||null),t.selectedRange=t.previouslySelectedRange=h,c("change",t.selectedRange),c("update:modelValue",t.selectedRange)},x=l=>`(${new Intl.DateTimeFormat(void 0,{timeZone:K,timeZoneName:"short"}).formatToParts(l).find(i=>i.type==="timeZoneName")?.value})`,$=(l,n)=>{const{start:i,end:o}=l;let r=a.timeGranularity==="secondly"?"PP hh:mm:ss a":"PP hh:mm a";const f=x(i);return!D.value&&s.value?r="PP hh:mm a":R.ModeDateOnly.includes(a.mode)&&(r="PP"),d.value?`${v.format(i,r)} ${f}`:n?`<div>${v.format(i,r)} -&nbsp;</div><div>${v.format(o,r)} ${f}</div>`:`${v.format(i,r)} - ${v.format(o,r)} ${f}`},E=async()=>{d.value?t.selectedRange.start&&(c("change",{start:t.selectedRange.start,end:null}),c("update:modelValue",{start:t.selectedRange.start,end:null})):(c("change",t.selectedRange),c("update:modelValue",t.selectedRange)),S.value?.hidePopover(),p()},z=l=>!!l&&(l instanceof Date||typeof l=="number"),p=()=>{if(m.value&&z(t.selectedRange?.start)&&(d.value||z(t.selectedRange?.end)))t.abbreviatedDisplay=$(t.selectedRange,!0);else if(s.value&&!m.value){const l=x(new Date);t.abbreviatedDisplay=`${t.selectedTimeframe?.display} ${l}`}},O=l=>l.charAt(0).toUpperCase()+l.slice(1),A=l=>t.selectedTimeframe?.key===l.key?"primary":"secondary";e.watch(g,(l,n)=>{l!==void 0&&l!==n&&b({start:l,end:null})},{immediate:!0}),e.watch(u,(l,n)=>{l!==void 0&&l!==n&&b(l)},{immediate:!0}),e.watch(()=>t.tabName,(l,n)=>{n!==void 0&&l==="relative"?P(t.previouslySelectedTimeframe):n!==void 0&&l==="custom"&&b(t.previouslySelectedRange)}),e.watch(()=>a.modelValue,()=>{if(R.ModeArrayRelative.includes(a.mode)&&a.modelValue.timePeriodsKey){t.tabName="relative",y.value=!1;for(const l of a.timePeriods){const n=l.values.find(i=>i.key===a.modelValue.timePeriodsKey);if(n){P(n),p();break}}}else t.tabName="custom",b(a.modelValue),(a.modelValue.start&&a.modelValue.end||d.value&&a.modelValue.start)&&p();w.value++},{immediate:!0}),e.watch(()=>a.timeGranularity,()=>{p()});const I=()=>{t.popoverOpen=!1,k.value&&k.value.resetTime()},U=()=>{t.popoverOpen=!0,k.value&&k.value.initTimeInputs()};return(l,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-datetime-picker",{"set-min-width":s.value}]),style:e.normalizeStyle(V.value)},[e.createVNode(F.default,{ref_key:"kPop",ref:S,disabled:a.disabled||a.readonly,"hide-caret":"","hide-close-icon":"",offset:`var(--kui-space-40, ${e.unref(N.KUI_SPACE_40)})`,placement:a.popoverPlacement,width:"auto",onClose:I,onOpen:U},{content:e.withCtx(()=>[s.value&&D.value?(e.openBlock(),e.createBlock(L.default,{key:0,modelValue:t.tabName,"onUpdate:modelValue":n[0]||(n[0]=i=>t.tabName=i),class:"datetime-picker-toggle","data-testid":"datetime-picker-toggle",options:[{label:"Relative",value:"relative"},{label:"Custom",value:"custom"}],onClick:n[1]||(n[1]=i=>t.tabName=i)},null,8,["modelValue"])):e.createCommentVNode("",!0),!m.value&&t.fullRangeDisplay?(e.openBlock(),e.createElementBlock("p",X,e.toDisplayString(t.fullRangeDisplay),1)):e.createCommentVNode("",!0),D.value&&m.value?(e.openBlock(),e.createBlock(G.default,{key:w.value,ref:"calendarWrapperRef",modelValue:e.unref(B),"onUpdate:modelValue":n[2]||(n[2]=i=>e.isRef(B)?B.value=i:null),error:T.value,"onUpdate:error":n[3]||(n[3]=i=>T.value=i),"custom-range-validation":a.customRangeValidation,"error-message":a.invalidTimeErrorMessage,"is-range":!d.value,"k-date-picker-mode":a.mode,"max-date":a.maxDate,"min-date":a.minDate,"same-day-full-range":a.sameDayFullRange,"time-granularity":a.timeGranularity},null,8,["modelValue","error","custom-range-validation","error-message","is-range","k-date-picker-mode","max-date","min-date","same-day-full-range","time-granularity"])):s.value&&!d.value?(e.openBlock(),e.createElementBlock("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.timePeriods,(i,o)=>(e.openBlock(),e.createElementBlock("div",{key:`section-${String(i.section||o)}`,class:"timeframe-section"},[e.createElementVNode("div",Q,e.toDisplayString(i.section),1),e.createElementVNode("div",Y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.values,(r,f)=>(e.openBlock(),e.createBlock(C.default,{key:`time-${f}`,appearance:A(r),class:"timeframe-button","data-testid":`select-timeframe-${r.key}`,onClick:te=>P(r,!0)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(O(r.timeframeText)),1)]),_:2},1032,["appearance","data-testid","onClick"]))),128))])]))),128))])):e.createCommentVNode("",!0)]),footer:e.withCtx(()=>[e.createElementVNode("div",_,[a.clearButton?(e.openBlock(),e.createBlock(C.default,{key:0,appearance:"tertiary",class:"action-button","data-testid":"datetime-picker-clear",onClick:n[4]||(n[4]=i=>M())},{default:e.withCtx(()=>[...n[6]||(n[6]=[e.createTextVNode(" Clear ",-1)])]),_:1})):e.createCommentVNode("",!0),m.value?(e.openBlock(),e.createBlock(C.default,{key:1,appearance:"tertiary",class:"action-button","data-testid":"datetime-picker-submit",disabled:y.value||T.value,onClick:n[5]||(n[5]=i=>E())},{default:e.withCtx(()=>[...n[7]||(n[7]=[e.createTextVNode(" Apply ",-1)])]),_:1},8,["disabled"])):e.createCommentVNode("",!0)])]),default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["datetime-picker-trigger-wrapper",{disabled:a.disabled}])},[e.createElementVNode("div",{class:e.normalizeClass(["datetime-picker-trigger",{disabled:a.disabled,readonly:a.readonly}]),"data-testid":"datetime-picker-trigger",role:"button",style:e.normalizeStyle(V.value),tabindex:a.disabled?-1:0},[e.createElementVNode("div",{class:e.normalizeClass(["datetime-picker-display",{"has-icon":a.icon,disabled:a.disabled}]),"data-testid":"datetime-picker-display",innerHTML:t.abbreviatedDisplay},null,10,j)],14,H),a.icon?(e.openBlock(),e.createBlock(e.unref(Z.CalIcon),{key:0,class:"calendar-icon",color:`var(--kui-color-text-neutral, ${e.unref(N.KUI_COLOR_TEXT_NEUTRAL)})`,decorative:"",size:`var(--kui-icon-size-40, ${e.unref(N.KUI_ICON_SIZE_40)})`},null,8,["color","size"])):e.createCommentVNode("",!0)],2)]),_:1},8,["disabled","offset","placement"])],6))}});exports.default=ee;

package/dist/kongponents104.es.js

@@ -1,23 +1,22 @@
-import { defineComponent as ee, ref as u, computed as R, useTemplateRef as te, reactive as ae, watch as D, openBlock as r, createElementBlock as c, normalizeStyle as Z, normalizeClass as w, createVNode as le, unref as T, withCtx as f, createElementVNode as v, createBlock as y, createCommentVNode as g, createTextVNode as A, toDisplayString as E, isRef as ie, Fragment as H, renderList as X } from "vue";
-import I from "./kongponents38.es.js";
-import ne from "./kongponents62.es.js";
-import re from "./kongponents65.es.js";
+import { defineComponent as te, ref as u, computed as R, useTemplateRef as ae, reactive as le, watch as D, openBlock as r, createElementBlock as c, normalizeStyle as G, normalizeClass as w, createVNode as ie, unref as T, withCtx as f, createElementVNode as v, createBlock as y, createCommentVNode as g, createTextVNode as A, toDisplayString as O, isRef as ne, Fragment as H, renderList as X } from "vue";
+import { format as P } from "date-fns";
+import E from "./kongponents38.es.js";
+import re from "./kongponents62.es.js";
+import de from "./kongponents65.es.js";
 /* empty css                  */
 import "./kongponents7.es.js";
-import { DateTimePickerModes as de, ModeArrayCustom as oe, ModeArrayRelative as se, ModeDateOnly as me } from "./kongponents12.es.js";
-import { CalIcon as ue } from "@kong/icons";
-import { KUI_SPACE_40 as ce, KUI_ICON_SIZE_40 as fe, KUI_COLOR_TEXT_NEUTRAL as ve } from "./kongponents183.es.js";
-import { normalizeSize as ye } from "./kongponents182.es.js";
-import ge from "./kongponents186.es.js";
-import x from "./kongponents187.es.js";
-import M from "./kongponents188.es.js";
-const be = ["tabindex"], pe = ["innerHTML"], ke = {
+import { DateTimePickerModes as oe, ModeArrayCustom as se, ModeArrayRelative as me, ModeDateOnly as ue } from "./kongponents12.es.js";
+import { CalIcon as ce } from "@kong/icons";
+import { KUI_SPACE_40 as fe, KUI_ICON_SIZE_40 as ve, KUI_COLOR_TEXT_NEUTRAL as ye } from "./kongponents184.es.js";
+import { normalizeSize as ge } from "./kongponents182.es.js";
+import be from "./kongponents190.es.js";
+const pe = ["tabindex"], ke = ["innerHTML"], Re = {
   key: 1,
   class: "range-display"
-}, Re = {
+}, De = {
   key: 3,
   class: "relative-periods-container"
-}, De = { class: "timeframe-section-title" }, Te = { class: "timeframe-buttons" }, Pe = { class: "datetime-picker-footer-container" }, Ie = /* @__PURE__ */ ee({
+}, Te = { class: "timeframe-section-title" }, Pe = { class: "timeframe-buttons" }, he = { class: "datetime-picker-footer-container" }, Ie = /* @__PURE__ */ te({
   __name: "KDateTimePicker",
   props: {
     clearButton: { type: Boolean },
@@ -42,12 +41,12 @@ const be = ["tabindex"], pe = ["innerHTML"], ke = {
   },
   emits: ["change", "update:modelValue"],
   setup(t, { emit: j }) {
-    const m = j, U = u(null), B = R(() => t.mode !== de.Relative), o = R(() => oe.includes(t.mode) && !t.range), s = R(() => t.timePeriods.length > 0), b = R(() => e.tabName === "custom" || !s.value), P = u(!0), z = u(!1), L = u(0), K = {
+    const m = j, I = u(null), x = R(() => t.mode !== oe.Relative), o = R(() => se.includes(t.mode) && !t.range), s = R(() => t.timePeriods.length > 0), b = R(() => e.tabName === "custom" || !s.value), h = u(!0), B = u(!1), M = u(0), K = {
       start: null,
       end: null
-    }, h = u(t.modelValue.start || null), p = u(t.modelValue || K), V = o.value ? h : p, S = te("calendarWrapperRef"), W = R(() => ({
-      width: ye(t.width)
-    })), $ = Intl.DateTimeFormat().resolvedOptions().timeZone, e = ae({
+    }, S = u(t.modelValue.start || null), p = u(t.modelValue || K), V = o.value ? S : p, $ = ae("calendarWrapperRef"), U = R(() => ({
+      width: ge(t.width)
+    })), q = Intl.DateTimeFormat().resolvedOptions().timeZone, e = le({
       abbreviatedDisplay: t.placeholder,
       fullRangeDisplay: "",
       popoverOpen: !1,
@@ -59,83 +58,83 @@ const be = ["tabindex"], pe = ["innerHTML"], ke = {
     }), C = (a) => {
       if (!a) return;
       const l = o.value ? !a.start : !a.start || !a.end, i = a?.start || /* @__PURE__ */ new Date(), d = a?.end || null;
-      P.value = !!l, !o.value && a && a.start && a.end ? (p.value.start = i, p.value.end = d) : a && a.start && (h.value = i), e.selectedRange = e.previouslySelectedRange = {
+      h.value = !!l, !o.value && a && a.start && a.end ? (p.value.start = i, p.value.end = d) : a && a.start && (S.value = i), e.selectedRange = e.previouslySelectedRange = {
         start: i,
         end: d
       };
-    }, O = (a, l = !1) => {
+    }, z = (a, l = !1) => {
       if (a) {
         if (e.selectedTimeframe = e.previouslySelectedTimeframe = a, e.selectedRange = {
           timePeriodsKey: e.selectedTimeframe.key
         }, e.selectedTimeframe.start && e.selectedTimeframe.end) {
           const i = new Date(e.selectedTimeframe.start()), d = new Date(e.selectedTimeframe.end());
-          e.fullRangeDisplay = G({ start: i, end: d }, !1), e.selectedRange.start = i, e.selectedRange.end = d;
+          e.fullRangeDisplay = F({ start: i, end: d }, !1), e.selectedRange.start = i, e.selectedRange.end = d;
         } else
           e.fullRangeDisplay = "";
-        P.value = !1, l && F();
+        h.value = !1, l && L();
       }
-    }, q = () => {
-      p.value = K, h.value = null, e.abbreviatedDisplay = t.placeholder, e.fullRangeDisplay = "", s.value && (e.selectedTimeframe = t.timePeriods[0]?.values[0] || null), e.selectedRange = e.previouslySelectedRange = K, m("change", e.selectedRange), m("update:modelValue", e.selectedRange);
-    }, G = (a, l) => {
+    }, J = () => {
+      p.value = K, S.value = null, e.abbreviatedDisplay = t.placeholder, e.fullRangeDisplay = "", s.value && (e.selectedTimeframe = t.timePeriods[0]?.values[0] || null), e.selectedRange = e.previouslySelectedRange = K, m("change", e.selectedRange), m("update:modelValue", e.selectedRange);
+    }, Z = (a) => `(${new Intl.DateTimeFormat(void 0, { timeZone: q, timeZoneName: "short" }).formatToParts(a).find((i) => i.type === "timeZoneName")?.value})`, F = (a, l) => {
       const { start: i, end: d } = a;
       let n = t.timeGranularity === "secondly" ? "PP hh:mm:ss a" : "PP hh:mm a";
-      const k = x(i, $, "(z)");
-      return !B.value && s.value ? n = "PP hh:mm a" : me.includes(t.mode) && (n = "PP"), o.value ? `${M(i, n)} ${k}` : l ? `<div>${M(i, n)} -&nbsp;</div><div>${x(d, $, n)} ${k}</div>` : `${M(i, n)} - ${x(d, $, n)} ${k}`;
-    }, F = async () => {
-      o.value ? e.selectedRange.start && (m("change", { start: e.selectedRange.start, end: null }), m("update:modelValue", { start: e.selectedRange.start, end: null })) : (m("change", e.selectedRange), m("update:modelValue", e.selectedRange)), U.value?.hidePopover(), N();
-    }, N = () => {
-      if (b.value && e.selectedRange?.start)
-        e.abbreviatedDisplay = G(e.selectedRange, !0);
+      const k = Z(i);
+      return !x.value && s.value ? n = "PP hh:mm a" : ue.includes(t.mode) && (n = "PP"), o.value ? `${P(i, n)} ${k}` : l ? `<div>${P(i, n)} -&nbsp;</div><div>${P(d, n)} ${k}</div>` : `${P(i, n)} - ${P(d, n)} ${k}`;
+    }, L = async () => {
+      o.value ? e.selectedRange.start && (m("change", { start: e.selectedRange.start, end: null }), m("update:modelValue", { start: e.selectedRange.start, end: null })) : (m("change", e.selectedRange), m("update:modelValue", e.selectedRange)), I.value?.hidePopover(), N();
+    }, W = (a) => !!a && (a instanceof Date || typeof a == "number"), N = () => {
+      if (b.value && W(e.selectedRange?.start) && (o.value || W(e.selectedRange?.end)))
+        e.abbreviatedDisplay = F(e.selectedRange, !0);
       else if (s.value && !b.value) {
-        const a = x(/* @__PURE__ */ new Date(), $, "(z)");
+        const a = Z(/* @__PURE__ */ new Date());
         e.abbreviatedDisplay = `${e.selectedTimeframe?.display} ${a}`;
       }
-    }, J = (a) => a.charAt(0).toUpperCase() + a.slice(1), Q = (a) => e.selectedTimeframe?.key === a.key ? "primary" : "secondary";
-    D(h, (a, l) => {
+    }, Q = (a) => a.charAt(0).toUpperCase() + a.slice(1), Y = (a) => e.selectedTimeframe?.key === a.key ? "primary" : "secondary";
+    D(S, (a, l) => {
       a !== void 0 && a !== l && C({ start: a, end: null });
     }, { immediate: !0 }), D(p, (a, l) => {
       a !== void 0 && a !== l && C(a);
     }, { immediate: !0 }), D(() => e.tabName, (a, l) => {
-      l !== void 0 && a === "relative" ? O(e.previouslySelectedTimeframe) : l !== void 0 && a === "custom" && C(e.previouslySelectedRange);
+      l !== void 0 && a === "relative" ? z(e.previouslySelectedTimeframe) : l !== void 0 && a === "custom" && C(e.previouslySelectedRange);
     }), D(() => t.modelValue, () => {
-      if (se.includes(t.mode) && t.modelValue.timePeriodsKey) {
-        e.tabName = "relative", P.value = !1;
+      if (me.includes(t.mode) && t.modelValue.timePeriodsKey) {
+        e.tabName = "relative", h.value = !1;
         for (const a of t.timePeriods) {
           const l = a.values.find((i) => i.key === t.modelValue.timePeriodsKey);
           if (l) {
-            O(l), N();
+            z(l), N();
             break;
           }
         }
       } else
         e.tabName = "custom", C(t.modelValue), (t.modelValue.start && t.modelValue.end || o.value && t.modelValue.start) && N();
-      L.value++;
+      M.value++;
     }, { immediate: !0 }), D(() => t.timeGranularity, () => {
       N();
     });
-    const Y = () => {
-      e.popoverOpen = !1, S.value && S.value.resetTime();
-    }, _ = () => {
-      e.popoverOpen = !0, S.value && S.value.initTimeInputs();
+    const _ = () => {
+      e.popoverOpen = !1, $.value && $.value.resetTime();
+    }, ee = () => {
+      e.popoverOpen = !0, $.value && $.value.initTimeInputs();
     };
     return (a, l) => (r(), c("div", {
       class: w(["k-datetime-picker", { "set-min-width": s.value }]),
-      style: Z(W.value)
+      style: G(U.value)
     }, [
-      le(ne, {
+      ie(re, {
         ref_key: "kPop",
-        ref: U,
+        ref: I,
         disabled: t.disabled || t.readonly,
         "hide-caret": "",
         "hide-close-icon": "",
-        offset: `var(--kui-space-40, ${T(ce)})`,
+        offset: `var(--kui-space-40, ${T(fe)})`,
         placement: t.popoverPlacement,
         width: "auto",
-        onClose: Y,
-        onOpen: _
+        onClose: _,
+        onOpen: ee
       }, {
         content: f(() => [
-          s.value && B.value ? (r(), y(re, {
+          s.value && x.value ? (r(), y(de, {
             key: 0,
             modelValue: e.tabName,
             "onUpdate:modelValue": l[0] || (l[0] = (i) => e.tabName = i),
@@ -147,14 +146,14 @@ const be = ["tabindex"], pe = ["innerHTML"], ke = {
             ],
             onClick: l[1] || (l[1] = (i) => e.tabName = i)
           }, null, 8, ["modelValue"])) : g("", !0),
-          !b.value && e.fullRangeDisplay ? (r(), c("p", ke, E(e.fullRangeDisplay), 1)) : g("", !0),
-          B.value && b.value ? (r(), y(ge, {
-            key: L.value,
+          !b.value && e.fullRangeDisplay ? (r(), c("p", Re, O(e.fullRangeDisplay), 1)) : g("", !0),
+          x.value && b.value ? (r(), y(be, {
+            key: M.value,
             ref: "calendarWrapperRef",
             modelValue: T(V),
-            "onUpdate:modelValue": l[2] || (l[2] = (i) => ie(V) ? V.value = i : null),
-            error: z.value,
-            "onUpdate:error": l[3] || (l[3] = (i) => z.value = i),
+            "onUpdate:modelValue": l[2] || (l[2] = (i) => ne(V) ? V.value = i : null),
+            error: B.value,
+            "onUpdate:error": l[3] || (l[3] = (i) => B.value = i),
             "custom-range-validation": t.customRangeValidation,
             "error-message": t.invalidTimeErrorMessage,
             "is-range": !o.value,
@@ -163,22 +162,22 @@ const be = ["tabindex"], pe = ["innerHTML"], ke = {
             "min-date": t.minDate,
             "same-day-full-range": t.sameDayFullRange,
             "time-granularity": t.timeGranularity
-          }, null, 8, ["modelValue", "error", "custom-range-validation", "error-message", "is-range", "k-date-picker-mode", "max-date", "min-date", "same-day-full-range", "time-granularity"])) : s.value && !o.value ? (r(), c("div", Re, [
+          }, null, 8, ["modelValue", "error", "custom-range-validation", "error-message", "is-range", "k-date-picker-mode", "max-date", "min-date", "same-day-full-range", "time-granularity"])) : s.value && !o.value ? (r(), c("div", De, [
             (r(!0), c(H, null, X(t.timePeriods, (i, d) => (r(), c("div", {
               key: `section-${String(i.section || d)}`,
               class: "timeframe-section"
             }, [
-              v("div", De, E(i.section), 1),
-              v("div", Te, [
-                (r(!0), c(H, null, X(i.values, (n, k) => (r(), y(I, {
+              v("div", Te, O(i.section), 1),
+              v("div", Pe, [
+                (r(!0), c(H, null, X(i.values, (n, k) => (r(), y(E, {
                   key: `time-${k}`,
-                  appearance: Q(n),
+                  appearance: Y(n),
                   class: "timeframe-button",
                   "data-testid": `select-timeframe-${n.key}`,
-                  onClick: (he) => O(n, !0)
+                  onClick: (Se) => z(n, !0)
                 }, {
                   default: f(() => [
-                    A(E(J(n.timeframeText)), 1)
+                    A(O(Q(n.timeframeText)), 1)
                   ]),
                   _: 2
                 }, 1032, ["appearance", "data-testid", "onClick"]))), 128))
@@ -187,26 +186,26 @@ const be = ["tabindex"], pe = ["innerHTML"], ke = {
           ])) : g("", !0)
         ]),
         footer: f(() => [
-          v("div", Pe, [
-            t.clearButton ? (r(), y(I, {
+          v("div", he, [
+            t.clearButton ? (r(), y(E, {
               key: 0,
               appearance: "tertiary",
               class: "action-button",
               "data-testid": "datetime-picker-clear",
-              onClick: l[4] || (l[4] = (i) => q())
+              onClick: l[4] || (l[4] = (i) => J())
             }, {
               default: f(() => [...l[6] || (l[6] = [
                 A(" Clear ", -1)
               ])]),
               _: 1
             })) : g("", !0),
-            b.value ? (r(), y(I, {
+            b.value ? (r(), y(E, {
               key: 1,
               appearance: "tertiary",
               class: "action-button",
               "data-testid": "datetime-picker-submit",
-              disabled: P.value || z.value,
-              onClick: l[5] || (l[5] = (i) => F())
+              disabled: h.value || B.value,
+              onClick: l[5] || (l[5] = (i) => L())
             }, {
               default: f(() => [...l[7] || (l[7] = [
                 A(" Apply ", -1)
@@ -223,21 +222,21 @@ const be = ["tabindex"], pe = ["innerHTML"], ke = {
               class: w(["datetime-picker-trigger", { disabled: t.disabled, readonly: t.readonly }]),
               "data-testid": "datetime-picker-trigger",
               role: "button",
-              style: Z(W.value),
+              style: G(U.value),
               tabindex: t.disabled ? -1 : 0
             }, [
               v("div", {
                 class: w(["datetime-picker-display", { "has-icon": t.icon, disabled: t.disabled }]),
                 "data-testid": "datetime-picker-display",
                 innerHTML: e.abbreviatedDisplay
-              }, null, 10, pe)
-            ], 14, be),
-            t.icon ? (r(), y(T(ue), {
+              }, null, 10, ke)
+            ], 14, pe),
+            t.icon ? (r(), y(T(ce), {
               key: 0,
               class: "calendar-icon",
-              color: `var(--kui-color-text-neutral, ${T(ve)})`,
+              color: `var(--kui-color-text-neutral, ${T(ye)})`,
               decorative: "",
-              size: `var(--kui-icon-size-40, ${T(fe)})`
+              size: `var(--kui-icon-size-40, ${T(ve)})`
             }, null, 8, ["color", "size"])) : g("", !0)
           ], 2)
         ]),

package/dist/kongponents107.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),b=require("./kongponents38.cjs"),C=require("./kongponents30.cjs");;/* empty css                */const B=require("./kongponents62.cjs"),P=require("./kongponents29.cjs"),T=require("./kongponents50.cjs"),x=require("@kong/icons"),D=require("./kongponents183.cjs"),y={class:"dropdown-list","data-testid":"dropdown-list"},q=e.defineComponent({__name:"KDropdown",props:{selectionMenu:{type:Boolean},appearance:{default:"primary"},triggerText:{default:""},showCaret:{type:Boolean},width:{default:""},kpopAttributes:{default:()=>({})},items:{default:()=>[]},disabled:{type:Boolean},disabledTooltip:{default:""},label:{}},emits:["toggleDropdown","change"],setup(t,{expose:v,emit:g}){e.watch(()=>t.appearance,o=>{(o==="menu"||o==="selectionMenu")&&console.warn("KDropdown: the usage for the `appearance` prop has changed. Please see the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kdropdownmenu")},{immediate:!0}),e.watch(()=>t.label,o=>{o&&console.warn("KDropdown: `label` prop is deprecated. Please use `triggerText` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kdropdownmenu")},{immediate:!0});const s=g,h=e.computed(()=>t.disabledTooltip?C.default:"div"),u=e.useTemplateRef("kPop"),c={hideCaret:!0,popoverClasses:"k-dropdown-popover dropdown-popover",popoverTimeout:0,placement:"bottom-start"},w={...c,...t.kpopAttributes,width:t.width||void 0,popoverClasses:`${c.popoverClasses} ${t.kpopAttributes?.popoverClasses||""}`},p=e.computed(()=>l.value?.label||t.triggerText||t.label||""),l=e.ref(),m=o=>{t.selectionMenu&&(l.value=o)},f=()=>{u.value?.hidePopover()},d=(o,n,r)=>{o.value!==r&&(n(),s("toggleDropdown",o.value))};return e.watch(l,(o,n)=>{o&&o!==n&&s("change",o)}),e.onMounted(()=>{if(t.items){const o=t.items.filter(n=>n.selected);o.length&&(l.value=o[0])}}),v({openDropdown:()=>{u.value?.showPopover()},closeDropdown:f}),(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-dropdown",{"selection-dropdown-menu":t.selectionMenu}])},[e.createVNode(P.default,null,{default:e.withCtx(({toggle:r,isToggled:a})=>[e.createVNode(B.default,e.mergeProps({ref:"kPop"},w,{"close-on-popover-click":"","data-testid":"dropdown-popover","hide-close-icon":"",offset:`var(--kui-space-20, ${e.unref(D.KUI_SPACE_20)})`,onClose:()=>d(a,r,!1),onOpen:()=>d(a,r,!0),onPopoverClick:()=>d(a,r,!1)}),{content:e.withCtx(()=>[e.createElementVNode("ul",y,[e.renderSlot(o.$slots,"items",{closeDropdown:f,handleSelection:m,items:t.items},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(i,k)=>(e.openBlock(),e.createBlock(T.default,e.mergeProps({ref_for:!0},i,{key:`${i.label}-${k}`,item:i,selected:t.selectionMenu&&l.value?.value===i.value,"selection-menu-child":t.selectionMenu,onChange:m}),null,16,["item","selected","selection-menu-child"]))),128))],!0)])]),default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(h.value),{class:"dropdown-trigger","data-testid":"dropdown-trigger",label:t.disabledTooltip?t.disabledTooltip:void 0,"max-width":t.disabledTooltip?"240":void 0,position:t.disabledTooltip?"bottom":void 0},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default",{isOpen:a.value},()=>[p.value?(e.openBlock(),e.createBlock(b.default,{key:0,appearance:t.appearance,class:"dropdown-trigger-button","data-dropdown-trigger":"true","data-testid":"dropdown-trigger-button",disabled:t.disabled},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(p.value)+" ",1),t.showCaret?(e.openBlock(),e.createBlock(e.unref(x.ChevronDownIcon),{key:0,decorative:""})):e.createCommentVNode("",!0)]),_:1},8,["appearance","disabled"])):e.createCommentVNode("",!0)],!0)]),_:2},1032,["label","max-width","position"]))]),_:2},1040,["offset","onClose","onOpen","onPopoverClick"])]),_:3})],2))}});exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),b=require("./kongponents38.cjs"),C=require("./kongponents30.cjs");;/* empty css                */const B=require("./kongponents62.cjs"),P=require("./kongponents29.cjs"),T=require("./kongponents50.cjs"),x=require("@kong/icons"),D=require("./kongponents184.cjs"),y={class:"dropdown-list","data-testid":"dropdown-list"},q=e.defineComponent({__name:"KDropdown",props:{selectionMenu:{type:Boolean},appearance:{default:"primary"},triggerText:{default:""},showCaret:{type:Boolean},width:{default:""},kpopAttributes:{default:()=>({})},items:{default:()=>[]},disabled:{type:Boolean},disabledTooltip:{default:""},label:{}},emits:["toggleDropdown","change"],setup(t,{expose:v,emit:g}){e.watch(()=>t.appearance,o=>{(o==="menu"||o==="selectionMenu")&&console.warn("KDropdown: the usage for the `appearance` prop has changed. Please see the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kdropdownmenu")},{immediate:!0}),e.watch(()=>t.label,o=>{o&&console.warn("KDropdown: `label` prop is deprecated. Please use `triggerText` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kdropdownmenu")},{immediate:!0});const s=g,h=e.computed(()=>t.disabledTooltip?C.default:"div"),u=e.useTemplateRef("kPop"),c={hideCaret:!0,popoverClasses:"k-dropdown-popover dropdown-popover",popoverTimeout:0,placement:"bottom-start"},w={...c,...t.kpopAttributes,width:t.width||void 0,popoverClasses:`${c.popoverClasses} ${t.kpopAttributes?.popoverClasses||""}`},p=e.computed(()=>l.value?.label||t.triggerText||t.label||""),l=e.ref(),m=o=>{t.selectionMenu&&(l.value=o)},f=()=>{u.value?.hidePopover()},d=(o,n,r)=>{o.value!==r&&(n(),s("toggleDropdown",o.value))};return e.watch(l,(o,n)=>{o&&o!==n&&s("change",o)}),e.onMounted(()=>{if(t.items){const o=t.items.filter(n=>n.selected);o.length&&(l.value=o[0])}}),v({openDropdown:()=>{u.value?.showPopover()},closeDropdown:f}),(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-dropdown",{"selection-dropdown-menu":t.selectionMenu}])},[e.createVNode(P.default,null,{default:e.withCtx(({toggle:r,isToggled:a})=>[e.createVNode(B.default,e.mergeProps({ref:"kPop"},w,{"close-on-popover-click":"","data-testid":"dropdown-popover","hide-close-icon":"",offset:`var(--kui-space-20, ${e.unref(D.KUI_SPACE_20)})`,onClose:()=>d(a,r,!1),onOpen:()=>d(a,r,!0),onPopoverClick:()=>d(a,r,!1)}),{content:e.withCtx(()=>[e.createElementVNode("ul",y,[e.renderSlot(o.$slots,"items",{closeDropdown:f,handleSelection:m,items:t.items},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(i,k)=>(e.openBlock(),e.createBlock(T.default,e.mergeProps({ref_for:!0},i,{key:`${i.label}-${k}`,item:i,selected:t.selectionMenu&&l.value?.value===i.value,"selection-menu-child":t.selectionMenu,onChange:m}),null,16,["item","selected","selection-menu-child"]))),128))],!0)])]),default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(h.value),{class:"dropdown-trigger","data-testid":"dropdown-trigger",label:t.disabledTooltip?t.disabledTooltip:void 0,"max-width":t.disabledTooltip?"240":void 0,position:t.disabledTooltip?"bottom":void 0},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default",{isOpen:a.value},()=>[p.value?(e.openBlock(),e.createBlock(b.default,{key:0,appearance:t.appearance,class:"dropdown-trigger-button","data-dropdown-trigger":"true","data-testid":"dropdown-trigger-button",disabled:t.disabled},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(p.value)+" ",1),t.showCaret?(e.openBlock(),e.createBlock(e.unref(x.ChevronDownIcon),{key:0,decorative:""})):e.createCommentVNode("",!0)]),_:1},8,["appearance","disabled"])):e.createCommentVNode("",!0)],!0)]),_:2},1032,["label","max-width","position"]))]),_:2},1040,["offset","onClose","onOpen","onPopoverClick"])]),_:3})],2))}});exports.default=q;

package/dist/kongponents107.es.js

@@ -6,7 +6,7 @@ import U from "./kongponents62.es.js";
 import j from "./kongponents29.es.js";
 import G from "./kongponents50.es.js";
 import { ChevronDownIcon as H } from "@kong/icons";
-import { KUI_SPACE_20 as J } from "./kongponents183.es.js";
+import { KUI_SPACE_20 as J } from "./kongponents184.es.js";
 const Q = {
   class: "dropdown-list",
   "data-testid": "dropdown-list"

package/dist/kongponents113.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@kong/icons"),i=require("./kongponents183.cjs"),B=require("./kongponents38.cjs");require("./kongponents7.cjs");require("./kongponents12.cjs");const a=require("./kongponents13.cjs"),E=require("./kongponents39.cjs"),v={class:"empty-state-content"},S=["aria-hidden"],g={key:0,class:"empty-state-title"},V={key:1,class:"empty-state-message"},C={key:2,class:"empty-state-action"},I={key:0,class:"empty-state-features-container"},$={key:0,"aria-hidden":"true",class:"feature-icon"},h={class:"card-header"},p=["title"],N={key:1,class:"empty-state-footer-container"},T=e.defineComponent({__name:"KEmptyState",props:{title:{default:""},message:{default:""},actionButtonVisible:{type:Boolean,default:!0},actionButtonText:{default:""},actionButtonDisabled:{type:Boolean},iconVariant:{default:()=>a.EmptyStateIconVariants.Default},iconBackground:{type:Boolean,default:!1},features:{default:()=>[]}},emits:["click-action"],setup(o,{emit:c}){const l=c,u=e.useSlots(),d=e.useId(),m=e.computed(()=>{switch(o.iconVariant){case a.EmptyStateIconVariants.Default:return r.AnalyticsIcon;case a.EmptyStateIconVariants.Error:return r.WarningIcon;case a.EmptyStateIconVariants.Search:return r.SearchIcon;case a.EmptyStateIconVariants.Kong:return r.KongIcon;default:return r.AnalyticsIcon}}),k=e.computed(()=>o.iconBackground?`var(--kui-color-text-decorative-aqua, ${i.KUI_COLOR_TEXT_DECORATIVE_AQUA})`:o.iconVariant===a.EmptyStateIconVariants.Error?`var(--kui-color-text-warning, ${i.KUI_COLOR_TEXT_WARNING})`:`var(--kui-color-text-neutral, ${i.KUI_COLOR_TEXT_NEUTRAL})`),y=()=>{if(u.image)return"empty-state-image";const t="empty-state-icon";return o.iconBackground?`${t} has-background`:t};return(t,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-empty-state",[o.iconVariant]])},[e.createElementVNode("div",v,[e.createElementVNode("div",{"aria-hidden":t.$slots.image?void 0:"true",class:e.normalizeClass(y())},[e.renderSlot(t.$slots,"image",{},()=>[e.renderSlot(t.$slots,"icon",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.value),{color:k.value,decorative:"",size:`var(--kui-icon-size-60, ${e.unref(i.KUI_ICON_SIZE_60)})`},null,8,["color","size"]))],!0)],!0)],10,S),o.title||t.$slots.title?(e.openBlock(),e.createElementBlock("div",g,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),o.message||t.$slots.default?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(t.$slots,"default",{},()=>[e.createElementVNode("p",null,e.toDisplayString(o.message),1)],!0)])):e.createCommentVNode("",!0),o.actionButtonVisible&&o.actionButtonText||t.$slots.action?(e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(t.$slots,"action",{},()=>[e.createVNode(B.default,{disabled:o.actionButtonDisabled,type:"button",onClick:s[0]||(s[0]=n=>l("click-action"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action-button-icon",{},void 0,!0),e.createTextVNode(" "+e.toDisplayString(o.actionButtonText),1)]),_:3},8,["disabled"])],!0)])):e.createCommentVNode("",!0)]),o.features.length?(e.openBlock(),e.createElementBlock("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.features,(n,f)=>(e.openBlock(),e.createBlock(E.default,{key:`feature-${e.unref(d)}-${n.key||f}`,class:"empty-state-feature-card"},{title:e.withCtx(()=>[n.key&&t.$slots[`feature-icon-${n.key}`]?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(t.$slots,`feature-icon-${n.key}`,{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",h,e.toDisplayString(n.title),1)]),default:e.withCtx(()=>[e.createElementVNode("div",{title:n.description},e.toDisplayString(n.description),9,p)]),_:2},1024))),128))])):e.createCommentVNode("",!0),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",N,[e.renderSlot(t.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}});exports.default=T;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@kong/icons"),i=require("./kongponents184.cjs"),B=require("./kongponents38.cjs");require("./kongponents7.cjs");require("./kongponents12.cjs");const a=require("./kongponents13.cjs"),E=require("./kongponents39.cjs"),v={class:"empty-state-content"},S=["aria-hidden"],g={key:0,class:"empty-state-title"},V={key:1,class:"empty-state-message"},C={key:2,class:"empty-state-action"},I={key:0,class:"empty-state-features-container"},$={key:0,"aria-hidden":"true",class:"feature-icon"},h={class:"card-header"},p=["title"],N={key:1,class:"empty-state-footer-container"},T=e.defineComponent({__name:"KEmptyState",props:{title:{default:""},message:{default:""},actionButtonVisible:{type:Boolean,default:!0},actionButtonText:{default:""},actionButtonDisabled:{type:Boolean},iconVariant:{default:()=>a.EmptyStateIconVariants.Default},iconBackground:{type:Boolean,default:!1},features:{default:()=>[]}},emits:["click-action"],setup(o,{emit:c}){const l=c,u=e.useSlots(),d=e.useId(),m=e.computed(()=>{switch(o.iconVariant){case a.EmptyStateIconVariants.Default:return r.AnalyticsIcon;case a.EmptyStateIconVariants.Error:return r.WarningIcon;case a.EmptyStateIconVariants.Search:return r.SearchIcon;case a.EmptyStateIconVariants.Kong:return r.KongIcon;default:return r.AnalyticsIcon}}),k=e.computed(()=>o.iconBackground?`var(--kui-color-text-decorative-aqua, ${i.KUI_COLOR_TEXT_DECORATIVE_AQUA})`:o.iconVariant===a.EmptyStateIconVariants.Error?`var(--kui-color-text-warning, ${i.KUI_COLOR_TEXT_WARNING})`:`var(--kui-color-text-neutral, ${i.KUI_COLOR_TEXT_NEUTRAL})`),y=()=>{if(u.image)return"empty-state-image";const t="empty-state-icon";return o.iconBackground?`${t} has-background`:t};return(t,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-empty-state",[o.iconVariant]])},[e.createElementVNode("div",v,[e.createElementVNode("div",{"aria-hidden":t.$slots.image?void 0:"true",class:e.normalizeClass(y())},[e.renderSlot(t.$slots,"image",{},()=>[e.renderSlot(t.$slots,"icon",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.value),{color:k.value,decorative:"",size:`var(--kui-icon-size-60, ${e.unref(i.KUI_ICON_SIZE_60)})`},null,8,["color","size"]))],!0)],!0)],10,S),o.title||t.$slots.title?(e.openBlock(),e.createElementBlock("div",g,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),o.message||t.$slots.default?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(t.$slots,"default",{},()=>[e.createElementVNode("p",null,e.toDisplayString(o.message),1)],!0)])):e.createCommentVNode("",!0),o.actionButtonVisible&&o.actionButtonText||t.$slots.action?(e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(t.$slots,"action",{},()=>[e.createVNode(B.default,{disabled:o.actionButtonDisabled,type:"button",onClick:s[0]||(s[0]=n=>l("click-action"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action-button-icon",{},void 0,!0),e.createTextVNode(" "+e.toDisplayString(o.actionButtonText),1)]),_:3},8,["disabled"])],!0)])):e.createCommentVNode("",!0)]),o.features.length?(e.openBlock(),e.createElementBlock("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.features,(n,f)=>(e.openBlock(),e.createBlock(E.default,{key:`feature-${e.unref(d)}-${n.key||f}`,class:"empty-state-feature-card"},{title:e.withCtx(()=>[n.key&&t.$slots[`feature-icon-${n.key}`]?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(t.$slots,`feature-icon-${n.key}`,{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",h,e.toDisplayString(n.title),1)]),default:e.withCtx(()=>[e.createElementVNode("div",{title:n.description},e.toDisplayString(n.description),9,p)]),_:2},1024))),128))])):e.createCommentVNode("",!0),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",N,[e.renderSlot(t.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}});exports.default=T;

package/dist/kongponents113.es.js

@@ -1,6 +1,6 @@
 import { defineComponent as p, useSlots as b, useId as K, computed as m, openBlock as o, createElementBlock as n, normalizeClass as f, createElementVNode as c, renderSlot as i, createBlock as y, resolveDynamicComponent as S, unref as k, createTextVNode as v, toDisplayString as l, createCommentVNode as s, createVNode as N, withCtx as u, Fragment as O, renderList as D } from "vue";
 import { AnalyticsIcon as $, KongIcon as A, SearchIcon as R, WarningIcon as U } from "@kong/icons";
-import { KUI_COLOR_TEXT_DECORATIVE_AQUA as L, KUI_COLOR_TEXT_NEUTRAL as w, KUI_COLOR_TEXT_WARNING as z, KUI_ICON_SIZE_60 as X } from "./kongponents183.es.js";
+import { KUI_COLOR_TEXT_DECORATIVE_AQUA as L, KUI_COLOR_TEXT_NEUTRAL as w, KUI_COLOR_TEXT_WARNING as z, KUI_ICON_SIZE_60 as X } from "./kongponents184.es.js";
 import W from "./kongponents38.es.js";
 import "./kongponents7.es.js";
 import "./kongponents12.es.js";

package/dist/kongponents115.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),L=require("./kongponents57.cjs"),P=require("./kongponents55.cjs"),B=require("./kongponents38.cjs"),R=require("./kongponents190.cjs"),C=require("@kong/icons"),U=["role"],W={class:"file-upload-input-wrapper"},j={key:1,class:"file-upload-dropzone-wrapper"},O=["aria-disabled","aria-labelledby","tabindex"],G={"aria-hidden":"true",class:"dropzone-icon"},H={key:0},J={key:1},Q=e.defineComponent({inheritAttrs:!1,__name:"KFileUpload",props:{labelAttributes:{default:()=>({})},label:{default:""},help:{},buttonText:{default:"Select file"},placeholder:{default:""},accept:{},maxFileSize:{default:null},error:{type:Boolean},errorMessage:{default:""},disabled:{type:Boolean},appearance:{default:"input"}},emits:["file-added","file-removed","error"],setup(l,{emit:w}){const d=w,x=e.useSlots(),r=e.useAttrs(),{stripRequiredLabel:E}=R.default(),N=e.useId(),b=e.computed(()=>r.id?String(r.id):N),$=e.computed(()=>r.name?String(r.name):"uploaded-file"),D=e.computed(()=>{const a={...r};return delete a.id,delete a.name,a}),h=e.useTemplateRef("input"),F=()=>!!(l.labelAttributes?.info||x["label-tooltip"]),q=e.computed(()=>E(l.label,y.value)),y=e.computed(()=>r?.required!==void 0&&String(r?.required)!=="false"),g=e.computed(()=>o.value?"Drag & drop a file":"No file selected"),c=e.ref(!1),S=e.computed(()=>{if(c.value){let a="bytes",t=n.value;return n.value>=1024&&n.value<1024*1024&&(t=n.value/1024,a="KB"),n.value>=1024*1024&&(t=n.value/(1024*1024),a="MB"),`File size must be less than ${t}${a}.`}return""}),n=e.computed(()=>l.maxFileSize||l.maxFileSize===0?l.maxFileSize:5*1024*1024),v=e.computed(()=>p.value||c.value||l.error),s=e.ref(0),i=e.ref(""),f=e.ref(null),M=e.useTemplateRef("dropzone"),V=a=>{p.value=!1;const t=a.target.files,u=t[0]?.size;Number(u)>n.value&&(s.value++,c.value=!0,d("error",t));const K=h.value?.$el?.querySelector("input");t.length?(f.value=t,i.value=t[0]?.name||"",d("file-added",t)):(K.files=f.value,i.value=f.value?.[0]?.name||"")},k=()=>{if(i.value){I();return}const a=h.value?.$el?.querySelector("input");a&&a.click()},I=()=>{f.value=null,i.value="",s.value++,c.value=!1,d("file-removed")},m=e.ref(!1),p=e.ref(!1),A=a=>a?!l.accept||!Array.isArray(l.accept)||!l.accept.length?!0:l.accept.some(t=>{if(t.startsWith("."))return a.name.toLowerCase().endsWith(t.toLowerCase());if(t.endsWith("/*")){const u=t.slice(0,-2);return a.type.startsWith(u)}else return a.type===t}):!1,z=e.computed(()=>p.value?`Unsupported file type. Please upload one of the following: ${l.accept.join(", ")}`:""),T=a=>{if(!l.disabled){o.value?M.value?.focus():h.value?.input?.focus(),m.value=!1;const t=a.dataTransfer?.files;if(t&&t.length){const u=t[0]?.size;if(Number(u)>n.value){s.value++,c.value=!0,d("error",t);return}A(t[0])?(p.value=!1,f.value=t,i.value=t[0]?.name||"",d("file-added",t)):(p.value=!0,d("error",t))}}},o=e.computed(()=>l.appearance==="dropzone");return e.watch(()=>r.id,()=>{s.value++},{immediate:!0}),(a,t)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:"k-file-upload"},D.value,{role:l.disabled?void 0:"region",onDragleave:t[0]||(t[0]=e.withModifiers(u=>m.value=!1,["prevent"])),onDragover:t[1]||(t[1]=e.withModifiers(u=>m.value=!0,["prevent"])),onDrop:e.withModifiers(T,["prevent"])}),[l.label?(e.openBlock(),e.createBlock(L.default,e.mergeProps({key:0},l.labelAttributes,{id:o.value?`file-upload-dropzone-label-${b.value}`:void 0,for:b.value,required:y.value}),e.createSlots({default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(q.value)+" ",1)]),_:2},[F()?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"label-tooltip",{},void 0,!0)]),key:"0"}:void 0]),1040,["id","for","required"])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",W,[o.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:s.value,class:e.normalizeClass(["file-upload-input-text",{placeholder:!i.value,"has-icon":a.$slots.icon,disabled:l.disabled}])},e.toDisplayString(i.value?i.value:l.placeholder||g.value),3)),(e.openBlock(),e.createBlock(P.default,{id:b.value,key:s.value,ref:"input",accept:l.accept,class:e.normalizeClass(["upload-input",{dragging:m.value&&!l.disabled}]),disabled:l.disabled,error:v.value,"error-message":l.errorMessage||z.value||S.value,help:l.help,hidden:o.value,name:$.value,placeholder:l.placeholder||g.value,title:"",type:"file",onChange:V},e.createSlots({_:2},[a.$slots.icon&&!o.value?{name:"before",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"icon",{},void 0,!0)]),key:"0"}:void 0,o.value?void 0:{name:"after",fn:e.withCtx(()=>[e.createVNode(B.default,{appearance:"tertiary",class:"file-upload-button","data-testid":"file-upload-button",disabled:l.disabled,size:"small",onClick:k},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value?"Clear":l.buttonText),1)]),_:1},8,["disabled"])]),key:"1"}]),1032,["id","accept","class","disabled","error","error-message","help","hidden","name","placeholder"]))],512),[[e.vShow,!o.value]]),o.value?(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("div",{ref:"dropzone","aria-disabled":l.disabled?"true":void 0,"aria-labelledby":l.label?`file-upload-dropzone-label-${b.value}`:void 0,class:e.normalizeClass(["dropzone",{dragging:m.value&&!l.disabled,disabled:l.disabled,error:v.value,"has-file":!!i.value}]),"data-testid":"file-upload-dropzone",role:"button",tabindex:l.disabled?-1:0,onClick:k},[e.createElementVNode("div",G,[e.renderSlot(a.$slots,"icon",{},()=>[i.value?(e.openBlock(),e.createBlock(e.unref(C.FileEmptyIcon),{key:0,decorative:""})):(e.openBlock(),e.createBlock(e.unref(C.UploadIcon),{key:1,decorative:""}))],!0)]),i.value?(e.openBlock(),e.createElementBlock("span",H,e.toDisplayString(i.value),1)):(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(l.placeholder||g.value),1)),e.createVNode(B.default,{appearance:"tertiary",class:"file-upload-button","data-testid":"file-upload-button",disabled:l.disabled,onClick:e.withModifiers(k,["stop"])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value?"Clear":l.buttonText),1)]),_:1},8,["disabled"]),e.renderSlot(a.$slots,"dropzone-footer",{},void 0,!0)],10,O),v.value||l.help?(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["help-text",{error:v.value}])},e.toDisplayString(v.value&&(l.errorMessage||z.value||S.value)||l.help),3)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],16,U))}});exports.default=Q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),L=require("./kongponents57.cjs"),P=require("./kongponents55.cjs"),B=require("./kongponents38.cjs"),R=require("./kongponents183.cjs"),C=require("@kong/icons"),U=["role"],W={class:"file-upload-input-wrapper"},j={key:1,class:"file-upload-dropzone-wrapper"},O=["aria-disabled","aria-labelledby","tabindex"],G={"aria-hidden":"true",class:"dropzone-icon"},H={key:0},J={key:1},Q=e.defineComponent({inheritAttrs:!1,__name:"KFileUpload",props:{labelAttributes:{default:()=>({})},label:{default:""},help:{},buttonText:{default:"Select file"},placeholder:{default:""},accept:{},maxFileSize:{default:null},error:{type:Boolean},errorMessage:{default:""},disabled:{type:Boolean},appearance:{default:"input"}},emits:["file-added","file-removed","error"],setup(l,{emit:w}){const d=w,x=e.useSlots(),r=e.useAttrs(),{stripRequiredLabel:E}=R.default(),N=e.useId(),b=e.computed(()=>r.id?String(r.id):N),$=e.computed(()=>r.name?String(r.name):"uploaded-file"),D=e.computed(()=>{const a={...r};return delete a.id,delete a.name,a}),h=e.useTemplateRef("input"),F=()=>!!(l.labelAttributes?.info||x["label-tooltip"]),q=e.computed(()=>E(l.label,y.value)),y=e.computed(()=>r?.required!==void 0&&String(r?.required)!=="false"),g=e.computed(()=>o.value?"Drag & drop a file":"No file selected"),c=e.ref(!1),S=e.computed(()=>{if(c.value){let a="bytes",t=n.value;return n.value>=1024&&n.value<1024*1024&&(t=n.value/1024,a="KB"),n.value>=1024*1024&&(t=n.value/(1024*1024),a="MB"),`File size must be less than ${t}${a}.`}return""}),n=e.computed(()=>l.maxFileSize||l.maxFileSize===0?l.maxFileSize:5*1024*1024),v=e.computed(()=>p.value||c.value||l.error),s=e.ref(0),i=e.ref(""),f=e.ref(null),M=e.useTemplateRef("dropzone"),V=a=>{p.value=!1;const t=a.target.files,u=t[0]?.size;Number(u)>n.value&&(s.value++,c.value=!0,d("error",t));const K=h.value?.$el?.querySelector("input");t.length?(f.value=t,i.value=t[0]?.name||"",d("file-added",t)):(K.files=f.value,i.value=f.value?.[0]?.name||"")},k=()=>{if(i.value){I();return}const a=h.value?.$el?.querySelector("input");a&&a.click()},I=()=>{f.value=null,i.value="",s.value++,c.value=!1,d("file-removed")},m=e.ref(!1),p=e.ref(!1),A=a=>a?!l.accept||!Array.isArray(l.accept)||!l.accept.length?!0:l.accept.some(t=>{if(t.startsWith("."))return a.name.toLowerCase().endsWith(t.toLowerCase());if(t.endsWith("/*")){const u=t.slice(0,-2);return a.type.startsWith(u)}else return a.type===t}):!1,z=e.computed(()=>p.value?`Unsupported file type. Please upload one of the following: ${l.accept.join(", ")}`:""),T=a=>{if(!l.disabled){o.value?M.value?.focus():h.value?.input?.focus(),m.value=!1;const t=a.dataTransfer?.files;if(t&&t.length){const u=t[0]?.size;if(Number(u)>n.value){s.value++,c.value=!0,d("error",t);return}A(t[0])?(p.value=!1,f.value=t,i.value=t[0]?.name||"",d("file-added",t)):(p.value=!0,d("error",t))}}},o=e.computed(()=>l.appearance==="dropzone");return e.watch(()=>r.id,()=>{s.value++},{immediate:!0}),(a,t)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:"k-file-upload"},D.value,{role:l.disabled?void 0:"region",onDragleave:t[0]||(t[0]=e.withModifiers(u=>m.value=!1,["prevent"])),onDragover:t[1]||(t[1]=e.withModifiers(u=>m.value=!0,["prevent"])),onDrop:e.withModifiers(T,["prevent"])}),[l.label?(e.openBlock(),e.createBlock(L.default,e.mergeProps({key:0},l.labelAttributes,{id:o.value?`file-upload-dropzone-label-${b.value}`:void 0,for:b.value,required:y.value}),e.createSlots({default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(q.value)+" ",1)]),_:2},[F()?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"label-tooltip",{},void 0,!0)]),key:"0"}:void 0]),1040,["id","for","required"])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",W,[o.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:s.value,class:e.normalizeClass(["file-upload-input-text",{placeholder:!i.value,"has-icon":a.$slots.icon,disabled:l.disabled}])},e.toDisplayString(i.value?i.value:l.placeholder||g.value),3)),(e.openBlock(),e.createBlock(P.default,{id:b.value,key:s.value,ref:"input",accept:l.accept,class:e.normalizeClass(["upload-input",{dragging:m.value&&!l.disabled}]),disabled:l.disabled,error:v.value,"error-message":l.errorMessage||z.value||S.value,help:l.help,hidden:o.value,name:$.value,placeholder:l.placeholder||g.value,title:"",type:"file",onChange:V},e.createSlots({_:2},[a.$slots.icon&&!o.value?{name:"before",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"icon",{},void 0,!0)]),key:"0"}:void 0,o.value?void 0:{name:"after",fn:e.withCtx(()=>[e.createVNode(B.default,{appearance:"tertiary",class:"file-upload-button","data-testid":"file-upload-button",disabled:l.disabled,size:"small",onClick:k},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value?"Clear":l.buttonText),1)]),_:1},8,["disabled"])]),key:"1"}]),1032,["id","accept","class","disabled","error","error-message","help","hidden","name","placeholder"]))],512),[[e.vShow,!o.value]]),o.value?(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("div",{ref:"dropzone","aria-disabled":l.disabled?"true":void 0,"aria-labelledby":l.label?`file-upload-dropzone-label-${b.value}`:void 0,class:e.normalizeClass(["dropzone",{dragging:m.value&&!l.disabled,disabled:l.disabled,error:v.value,"has-file":!!i.value}]),"data-testid":"file-upload-dropzone",role:"button",tabindex:l.disabled?-1:0,onClick:k},[e.createElementVNode("div",G,[e.renderSlot(a.$slots,"icon",{},()=>[i.value?(e.openBlock(),e.createBlock(e.unref(C.FileEmptyIcon),{key:0,decorative:""})):(e.openBlock(),e.createBlock(e.unref(C.UploadIcon),{key:1,decorative:""}))],!0)]),i.value?(e.openBlock(),e.createElementBlock("span",H,e.toDisplayString(i.value),1)):(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(l.placeholder||g.value),1)),e.createVNode(B.default,{appearance:"tertiary",class:"file-upload-button","data-testid":"file-upload-button",disabled:l.disabled,onClick:e.withModifiers(k,["stop"])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value?"Clear":l.buttonText),1)]),_:1},8,["disabled"]),e.renderSlot(a.$slots,"dropzone-footer",{},void 0,!0)],10,O),v.value||l.help?(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["help-text",{error:v.value}])},e.toDisplayString(v.value&&(l.errorMessage||z.value||S.value)||l.help),3)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],16,U))}});exports.default=Q;

package/dist/kongponents115.es.js

@@ -2,7 +2,7 @@ import { defineComponent as le, useSlots as ae, useAttrs as te, useId as ie, com
 import ne from "./kongponents57.es.js";
 import se from "./kongponents55.es.js";
 import U from "./kongponents38.es.js";
-import de from "./kongponents190.es.js";
+import de from "./kongponents183.es.js";
 import { FileEmptyIcon as ve, UploadIcon as ce } from "@kong/icons";
 const fe = ["role"], me = { class: "file-upload-input-wrapper" }, be = {
   key: 1,

package/dist/kongponents117.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),D=require("./kongponents190.cjs"),U=require("./kongponents57.cjs"),E=require("./kongponents183.cjs"),V=require("@kong/icons"),z=["id","aria-describedby","aria-invalid","type","value"],H=["aria-label"],J=["id"],Z=e.defineComponent({inheritAttrs:!1,__name:"KInput",props:{modelValue:{default:""},label:{default:""},labelAttributes:{default:()=>({})},help:{default:""},error:{type:Boolean},errorMessage:{default:""},characterLimit:{default:null},hasError:{type:Boolean},type:{default:"text"},showPasswordMaskToggle:{type:Boolean}},emits:["input","update:modelValue","char-limit-exceeded"],setup(l,{expose:B,emit:x}){e.useCssVars(t=>({v091aff92:S.value,b534dd8e:w.value})),e.watch(()=>l.hasError,t=>{t&&console.warn("KInput: `hasError` prop is deprecated. Please use `error` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kinput")},{immediate:!0}),e.watch(()=>l.labelAttributes.help,t=>{t&&console.warn("KInput: `help` property of `labelAttributes` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel")});const f=x,r=e.useSlots(),m=e.useTemplateRef("inputElement"),o=e.ref(""),s=e.ref(!1),v=e.ref(0),{stripRequiredLabel:I}=D.default(),n=e.useAttrs(),k=e.computed(()=>n?.required!==void 0&&String(n?.required)!=="false"),M=e.useId(),b=e.computed(()=>n.id?String(n.id):M),y=e.useId(),T=e.computed(()=>I(l.label,k.value)),C=()=>!!(l.labelAttributes?.info||r["label-tooltip"]),L=e.computed({get(){return l.modelValue},set(t){h({target:{value:t}})}}),N=e.computed(()=>{const t={...n};return delete t.class,delete t.input,delete t.onInput,t}),i=e.computed(()=>{const t=o.value?.toString().length||0,a=l.modelValue?.toString().length||0;let d=t;return!s.value&&a&&(d=a),!!l.characterLimit&&d>l.characterLimit}),q=e.computed(()=>i.value?s.value?`${o.value?.toString().length} / ${l.characterLimit}`:`${l.modelValue?.toString().length} / ${l.characterLimit}`:""),P=()=>!i.value&&!l.error&&!l.hasError&&!!(l.help||r.help),c=e.computed(()=>i.value?q.value:(l.error||l.hasError)&&l.errorMessage?l.errorMessage:l.help);e.watch(i,(t,a)=>{t!==a&&(f("char-limit-exceeded",{value:o.value,length:o.value.length,characterLimit:l.characterLimit,limitExceeded:t}),v.value+=1)}),e.watch(L,(t,a)=>{t!==a&&h({target:{value:t}})});const h=t=>{const a=JSON.parse(JSON.stringify(t?.target?.value));$(a)},$=t=>{o.value=t,s.value=!0,f("input",t),f("update:modelValue",t)},A=()=>o.value||s.value?o.value:l.modelValue;e.watch(()=>l.error,(t,a)=>{t!==a&&(v.value+=1)});const g=e.ref(null),p=e.ref(null),S=e.ref(E.KUI_ICON_SIZE_40),w=e.ref(E.KUI_ICON_SIZE_40),u=e.ref(!1),K=e.computed(()=>l.type==="password"&&u.value?"text":l.type),O=()=>{if(!u.value&&m.value){const t=m.value,{selectionStart:a,selectionEnd:d,selectionDirection:W}=t,R=t.value;t.value=R,t.setSelectionRange(a,d,W??void 0)}u.value=!u.value};return e.onMounted(async()=>{await e.nextTick(),g.value?.offsetWidth&&(S.value=g.value.offsetWidth+"px"),p.value?.offsetWidth&&(w.value=p.value.offsetWidth+"px")}),B({input:m}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-input",[e.unref(n).class,{"input-error":i.value||l.error||l.hasError}]])},[l.label?(e.openBlock(),e.createBlock(U.default,e.mergeProps({key:0,for:b.value},l.labelAttributes,{required:k.value}),e.createSlots({default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(T.value)+" ",1)]),_:2},[C()?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"label-tooltip",{},void 0,!0)]),key:"0"}:void 0]),1040,["for","required"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-element-wrapper",{"has-before-content":r.before,"has-after-content":r.after||l.type==="password"&&l.showPasswordMaskToggle}])},[r.before?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"beforeSlotElement",ref:g,class:"before-content-wrapper"},[e.renderSlot(t.$slots,"before",{},void 0,!0)],512)):e.createCommentVNode("",!0),e.createElementVNode("input",e.mergeProps({id:b.value,ref:"inputElement","aria-describedby":c.value||r.help?e.unref(y):void 0,"aria-invalid":l.error||l.hasError||i.value?"true":void 0,class:"input",type:K.value},N.value,{value:A(),onInput:h}),null,16,z),r.after||l.type==="password"&&l.showPasswordMaskToggle?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"afterSlotElement",ref:p,class:"after-content-wrapper"},[l.type==="password"&&l.showPasswordMaskToggle?(e.openBlock(),e.createElementBlock("button",{key:0,"aria-label":`${u.value?"Hide":"Show"} value`,class:"mask-value-toggle-button",type:"button",onClick:e.withModifiers(O,["stop"]),onMousedown:a[0]||(a[0]=e.withModifiers(()=>{},["prevent"])),onMouseup:a[1]||(a[1]=e.withModifiers(()=>{},["prevent"]))},[u.value?(e.openBlock(),e.createBlock(e.unref(V.VisibilityOffIcon),{key:0,decorative:""})):(e.openBlock(),e.createBlock(e.unref(V.VisibilityIcon),{key:1,decorative:""}))],40,H)):e.renderSlot(t.$slots,"after",{},void 0,!0,1)],512)):e.createCommentVNode("",!0)],2),e.createVNode(e.Transition,{mode:"out-in",name:"kongponents-fade-transition"},{default:e.withCtx(()=>[c.value||r.help?(e.openBlock(),e.createElementBlock("p",{id:e.unref(y),key:String(v.value),class:"help-text"},[P()?e.renderSlot(t.$slots,"help",{},()=>[e.createTextVNode(e.toDisplayString(c.value),1)],!0,0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(c.value),1)],64))],8,J)):e.createCommentVNode("",!0)]),_:3})],2))}});exports.default=Z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),D=require("./kongponents183.cjs"),U=require("./kongponents57.cjs"),E=require("./kongponents184.cjs"),V=require("@kong/icons"),z=["id","aria-describedby","aria-invalid","type","value"],H=["aria-label"],J=["id"],Z=e.defineComponent({inheritAttrs:!1,__name:"KInput",props:{modelValue:{default:""},label:{default:""},labelAttributes:{default:()=>({})},help:{default:""},error:{type:Boolean},errorMessage:{default:""},characterLimit:{default:null},hasError:{type:Boolean},type:{default:"text"},showPasswordMaskToggle:{type:Boolean}},emits:["input","update:modelValue","char-limit-exceeded"],setup(l,{expose:B,emit:x}){e.useCssVars(t=>({v091aff92:S.value,b534dd8e:w.value})),e.watch(()=>l.hasError,t=>{t&&console.warn("KInput: `hasError` prop is deprecated. Please use `error` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kinput")},{immediate:!0}),e.watch(()=>l.labelAttributes.help,t=>{t&&console.warn("KInput: `help` property of `labelAttributes` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel")});const f=x,r=e.useSlots(),m=e.useTemplateRef("inputElement"),o=e.ref(""),s=e.ref(!1),v=e.ref(0),{stripRequiredLabel:I}=D.default(),n=e.useAttrs(),k=e.computed(()=>n?.required!==void 0&&String(n?.required)!=="false"),M=e.useId(),b=e.computed(()=>n.id?String(n.id):M),y=e.useId(),T=e.computed(()=>I(l.label,k.value)),C=()=>!!(l.labelAttributes?.info||r["label-tooltip"]),L=e.computed({get(){return l.modelValue},set(t){h({target:{value:t}})}}),N=e.computed(()=>{const t={...n};return delete t.class,delete t.input,delete t.onInput,t}),i=e.computed(()=>{const t=o.value?.toString().length||0,a=l.modelValue?.toString().length||0;let d=t;return!s.value&&a&&(d=a),!!l.characterLimit&&d>l.characterLimit}),q=e.computed(()=>i.value?s.value?`${o.value?.toString().length} / ${l.characterLimit}`:`${l.modelValue?.toString().length} / ${l.characterLimit}`:""),P=()=>!i.value&&!l.error&&!l.hasError&&!!(l.help||r.help),c=e.computed(()=>i.value?q.value:(l.error||l.hasError)&&l.errorMessage?l.errorMessage:l.help);e.watch(i,(t,a)=>{t!==a&&(f("char-limit-exceeded",{value:o.value,length:o.value.length,characterLimit:l.characterLimit,limitExceeded:t}),v.value+=1)}),e.watch(L,(t,a)=>{t!==a&&h({target:{value:t}})});const h=t=>{const a=JSON.parse(JSON.stringify(t?.target?.value));$(a)},$=t=>{o.value=t,s.value=!0,f("input",t),f("update:modelValue",t)},A=()=>o.value||s.value?o.value:l.modelValue;e.watch(()=>l.error,(t,a)=>{t!==a&&(v.value+=1)});const g=e.ref(null),p=e.ref(null),S=e.ref(E.KUI_ICON_SIZE_40),w=e.ref(E.KUI_ICON_SIZE_40),u=e.ref(!1),K=e.computed(()=>l.type==="password"&&u.value?"text":l.type),O=()=>{if(!u.value&&m.value){const t=m.value,{selectionStart:a,selectionEnd:d,selectionDirection:W}=t,R=t.value;t.value=R,t.setSelectionRange(a,d,W??void 0)}u.value=!u.value};return e.onMounted(async()=>{await e.nextTick(),g.value?.offsetWidth&&(S.value=g.value.offsetWidth+"px"),p.value?.offsetWidth&&(w.value=p.value.offsetWidth+"px")}),B({input:m}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-input",[e.unref(n).class,{"input-error":i.value||l.error||l.hasError}]])},[l.label?(e.openBlock(),e.createBlock(U.default,e.mergeProps({key:0,for:b.value},l.labelAttributes,{required:k.value}),e.createSlots({default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(T.value)+" ",1)]),_:2},[C()?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"label-tooltip",{},void 0,!0)]),key:"0"}:void 0]),1040,["for","required"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-element-wrapper",{"has-before-content":r.before,"has-after-content":r.after||l.type==="password"&&l.showPasswordMaskToggle}])},[r.before?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"beforeSlotElement",ref:g,class:"before-content-wrapper"},[e.renderSlot(t.$slots,"before",{},void 0,!0)],512)):e.createCommentVNode("",!0),e.createElementVNode("input",e.mergeProps({id:b.value,ref:"inputElement","aria-describedby":c.value||r.help?e.unref(y):void 0,"aria-invalid":l.error||l.hasError||i.value?"true":void 0,class:"input",type:K.value},N.value,{value:A(),onInput:h}),null,16,z),r.after||l.type==="password"&&l.showPasswordMaskToggle?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"afterSlotElement",ref:p,class:"after-content-wrapper"},[l.type==="password"&&l.showPasswordMaskToggle?(e.openBlock(),e.createElementBlock("button",{key:0,"aria-label":`${u.value?"Hide":"Show"} value`,class:"mask-value-toggle-button",type:"button",onClick:e.withModifiers(O,["stop"]),onMousedown:a[0]||(a[0]=e.withModifiers(()=>{},["prevent"])),onMouseup:a[1]||(a[1]=e.withModifiers(()=>{},["prevent"]))},[u.value?(e.openBlock(),e.createBlock(e.unref(V.VisibilityOffIcon),{key:0,decorative:""})):(e.openBlock(),e.createBlock(e.unref(V.VisibilityIcon),{key:1,decorative:""}))],40,H)):e.renderSlot(t.$slots,"after",{},void 0,!0,1)],512)):e.createCommentVNode("",!0)],2),e.createVNode(e.Transition,{mode:"out-in",name:"kongponents-fade-transition"},{default:e.withCtx(()=>[c.value||r.help?(e.openBlock(),e.createElementBlock("p",{id:e.unref(y),key:String(v.value),class:"help-text"},[P()?e.renderSlot(t.$slots,"help",{},()=>[e.createTextVNode(e.toDisplayString(c.value),1)],!0,0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(c.value),1)],64))],8,J)):e.createCommentVNode("",!0)]),_:3})],2))}});exports.default=Z;

package/dist/kongponents117.es.js

@@ -1,7 +1,7 @@
 import { defineComponent as ae, useCssVars as le, watch as f, useSlots as re, useTemplateRef as oe, ref as n, useAttrs as ne, computed as l, useId as N, onMounted as ie, nextTick as ue, openBlock as r, createElementBlock as c, normalizeClass as B, unref as v, createBlock as x, mergeProps as K, createSlots as se, withCtx as I, createTextVNode as L, toDisplayString as M, renderSlot as p, createCommentVNode as b, createElementVNode as W, withModifiers as T, createVNode as de, Transition as ce, Fragment as fe } from "vue";
-import ve from "./kongponents190.es.js";
+import ve from "./kongponents183.es.js";
 import me from "./kongponents57.es.js";
-import { KUI_ICON_SIZE_40 as R } from "./kongponents183.es.js";
+import { KUI_ICON_SIZE_40 as R } from "./kongponents184.es.js";
 import { VisibilityOffIcon as he, VisibilityIcon as ge } from "@kong/icons";
 const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["aria-label"], ye = ["id"], xe = /* @__PURE__ */ ae({
   inheritAttrs: !1,

package/dist/kongponents121.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./kongponents30.cjs");;/* empty css                */const p=require("@kong/icons"),b=require("./kongponents183.cjs"),m=e.defineComponent({__name:"KLabel",props:{info:{default:""},required:{type:Boolean},tooltipAttributes:{default:()=>({})},help:{default:""}},setup(o){e.watch(()=>o.help,t=>{t&&console.warn("KLabel: `help` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel")},{immediate:!0});const r=e.useSlots(),a=()=>!!(o.help||o.info||r.tooltip),l=e.useId(),s=e.useTemplateRef("label"),u=["a[href]","audio[controls]","button","details","embed","iframe","img[usemap]",'input:not([type="hidden"])',"label","select","textarea","video[controls]","area[href]"].join(", ");function c(t){return t.closest(u)}function d(t){const i=t.target,n=c(i);n&&n!==s.value||t.preventDefault()}return(t,i)=>(e.openBlock(),e.createElementBlock("label",{ref:"label",class:e.normalizeClass(["k-label",{required:o.required}])},[e.renderSlot(t.$slots,"default",{},void 0,!0),a()?(e.openBlock(),e.createBlock(f.default,e.mergeProps({key:0},o.tooltipAttributes,{class:"label-tooltip","tooltip-id":e.unref(l),onClick:d}),{content:e.withCtx(()=>[e.renderSlot(t.$slots,"tooltip",{},()=>[e.createTextVNode(e.toDisplayString(o.info||o.help),1)],!0)]),default:e.withCtx(()=>[e.createVNode(e.unref(p.InfoIcon),{"aria-describedby":e.unref(l),class:"tooltip-trigger-icon",color:`var(--kui-color-text-neutral, ${e.unref(b.KUI_COLOR_TEXT_NEUTRAL)})`,tabindex:"0"},null,8,["aria-describedby","color"])]),_:3},16,["tooltip-id"])):e.createCommentVNode("",!0)],2))}});exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./kongponents30.cjs");;/* empty css                */const p=require("@kong/icons"),b=require("./kongponents184.cjs"),m=e.defineComponent({__name:"KLabel",props:{info:{default:""},required:{type:Boolean},tooltipAttributes:{default:()=>({})},help:{default:""}},setup(o){e.watch(()=>o.help,t=>{t&&console.warn("KLabel: `help` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel")},{immediate:!0});const r=e.useSlots(),a=()=>!!(o.help||o.info||r.tooltip),l=e.useId(),s=e.useTemplateRef("label"),u=["a[href]","audio[controls]","button","details","embed","iframe","img[usemap]",'input:not([type="hidden"])',"label","select","textarea","video[controls]","area[href]"].join(", ");function c(t){return t.closest(u)}function d(t){const i=t.target,n=c(i);n&&n!==s.value||t.preventDefault()}return(t,i)=>(e.openBlock(),e.createElementBlock("label",{ref:"label",class:e.normalizeClass(["k-label",{required:o.required}])},[e.renderSlot(t.$slots,"default",{},void 0,!0),a()?(e.openBlock(),e.createBlock(f.default,e.mergeProps({key:0},o.tooltipAttributes,{class:"label-tooltip","tooltip-id":e.unref(l),onClick:d}),{content:e.withCtx(()=>[e.renderSlot(t.$slots,"tooltip",{},()=>[e.createTextVNode(e.toDisplayString(o.info||o.help),1)],!0)]),default:e.withCtx(()=>[e.createVNode(e.unref(p.InfoIcon),{"aria-describedby":e.unref(l),class:"tooltip-trigger-icon",color:`var(--kui-color-text-neutral, ${e.unref(b.KUI_COLOR_TEXT_NEUTRAL)})`,tabindex:"0"},null,8,["aria-describedby","color"])]),_:3},16,["tooltip-id"])):e.createCommentVNode("",!0)],2))}});exports.default=m;

package/dist/kongponents121.es.js

@@ -2,7 +2,7 @@ import { defineComponent as b, watch as h, useSlots as g, useId as k, useTemplat
 import x from "./kongponents30.es.js";
 /* empty css                 */
 import { InfoIcon as B } from "@kong/icons";
-import { KUI_COLOR_TEXT_NEUTRAL as S } from "./kongponents183.es.js";
+import { KUI_COLOR_TEXT_NEUTRAL as S } from "./kongponents184.es.js";
 const w = /* @__PURE__ */ b({
   __name: "KLabel",
   props: {

package/dist/kongponents123.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),x=require("focus-trap-vue"),T=require("./kongponents199.cjs"),B=require("./kongponents38.cjs"),N=require("@kong/icons"),g=require("./kongponents183.cjs"),k=require("./kongponents182.cjs"),w=require("./kongponents203.cjs"),$=["aria-label"],O={key:0,class:"modal-header"},A={key:0,class:"modal-title"},I={class:"modal-footer"},D={class:"footer-actions"},z=e.defineComponent({inheritAttrs:!1,__name:"KModal",props:{visible:{type:Boolean},title:{default:""},actionButtonText:{default:"Submit"},actionButtonAppearance:{default:"primary"},actionButtonDisabled:{type:Boolean},hideCancelButton:{type:Boolean},cancelButtonText:{default:"Cancel"},cancelButtonAppearance:{default:"tertiary"},cancelButtonDisabled:{type:Boolean},tabbableOptions:{default:()=>({})},maxWidth:{default:"500px"},maxHeight:{default:"calc(100vh - 200px)"},closeOnBackdropClick:{type:Boolean},closeOnEscape:{type:Boolean,default:!0},hideCloseIcon:{type:Boolean},fullScreen:{type:Boolean},inputAutofocus:{type:Boolean},zIndex:{default:1100}},emits:["proceed","cancel"],setup(o,{emit:C}){e.useCssVars(t=>({c9546bd4:t.zIndex,v6d2ff071:h.value,v7fba0424:S.value}));const E=C,i=e.useSlots();e.provide(w.POPOVER_PARENT_ZINDEX_KEY,e.computed(()=>o.zIndex));const r=e.useAttrs(),p=T.useTextSelection(),u=`k-modal-${e.useId()}-overflow-hidden`,n=e.ref(null),f=e.ref(null),h=e.computed(()=>o.fullScreen&&!i.content?"95%":k.normalizeSize(o.maxWidth)),S=e.computed(()=>o.fullScreen&&!i.content?"95vh":k.normalizeSize(o.maxHeight)),V=e.computed(()=>{const t=Object.assign({},r);return delete t.class,t}),m=()=>!!o.title||!!i.title||!o.hideCloseIcon,v=t=>{o.visible&&o.closeOnEscape&&t.key==="Escape"&&b(!0)},b=(t=!1,a)=>{(t||a?.target?.classList?.contains("modal-backdrop")&&o.closeOnBackdropClick&&!p.text.value)&&E("cancel")},s=async t=>{t?(await e.nextTick(),await new Promise(a=>setTimeout(a,0)),n.value?.activate()):n.value?.deactivate()},d=t=>{typeof document<"u"&&(t?document?.addEventListener("keydown",v):document?.removeEventListener("keydown",v))},y=()=>{const t=n.value?.$el?.querySelector(".modal-content")?.querySelectorAll("input");t?.length&&Array.from(t).every(a=>!a.disabled&&!a.readOnly?(a.focus(),!1):!0)};e.watch(()=>o.visible,async t=>{t?(await s(!0),o.inputAutofocus&&y(),d(!0)):(await s(!1),d(!1)),typeof document<"u"&&document?.body?.classList?.toggle(u,t)},{immediate:!0}),e.watch(()=>o.inputAutofocus,async t=>{t&&(await e.nextTick(),y())});const l=e.ref(null);return e.onMounted(()=>{typeof document<"u"&&(l.value=document.createElement("style"),l.value.textContent=`body.${u} { overflow: hidden; }`,document.head.appendChild(l.value))}),e.onBeforeUnmount(async()=>{await s(!1),d(!1)}),e.onUnmounted(()=>{l.value?.remove()}),(t,a)=>o.visible?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,"aria-label":o.title,"aria-modal":"true",class:["k-modal",[e.unref(r).class]]},V.value,{role:"dialog"}),[e.createElementVNode("div",{ref_key:"modalWrapperElement",ref:f,class:e.normalizeClass(["modal-backdrop",{"modal-full-screen":o.fullScreen&&!t.$slots.content}]),onClick:a[3]||(a[3]=c=>b(!1,c))},[e.createVNode(e.unref(x.FocusTrap),{ref_key:"focusTrapElement",ref:n,active:!1,"fallback-focus":()=>f.value,"tabbable-options":o.tabbableOptions},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["modal-container",{"custom-content":t.$slots.content}]),tabindex:"-1"},[e.renderSlot(t.$slots,"content",{},()=>[m()?(e.openBlock(),e.createElementBlock("div",O,[o.title||t.$slots.title?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),o.hideCloseIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,"aria-label":"Close",class:"close-icon","data-testid":"modal-close-icon",type:"button",onClick:a[0]||(a[0]=c=>t.$emit("cancel"))},[e.createVNode(e.unref(N.CloseIcon),{color:`var(--kui-color-text-neutral, ${e.unref(g.KUI_COLOR_TEXT_NEUTRAL)})`,decorative:""},null,8,["color"])]))])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["modal-content",{"no-header":!m()}])},[e.renderSlot(t.$slots,"default",{},void 0,!0)],2),e.createElementVNode("div",I,[e.renderSlot(t.$slots,"footer",{},()=>[e.createElementVNode("div",D,[e.renderSlot(t.$slots,"footer-actions",{},()=>[o.hideCancelButton?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(B.default,{key:0,appearance:o.cancelButtonAppearance,"data-testid":"modal-cancel-button",disabled:o.cancelButtonDisabled,onClick:a[1]||(a[1]=c=>t.$emit("cancel"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.cancelButtonText),1)]),_:1},8,["appearance","disabled"])),e.createVNode(B.default,{appearance:o.actionButtonAppearance,"data-testid":"modal-action-button",disabled:o.actionButtonDisabled,onClick:a[2]||(a[2]=c=>t.$emit("proceed"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.actionButtonText),1)]),_:1},8,["appearance","disabled"])],!0)])],!0)])],!0)],2)]),_:3},8,["fallback-focus","tabbable-options"])],2)],16,$)):e.createCommentVNode("",!0)}});exports.default=z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),x=require("focus-trap-vue"),T=require("./kongponents196.cjs"),B=require("./kongponents38.cjs"),N=require("@kong/icons"),g=require("./kongponents184.cjs"),k=require("./kongponents182.cjs"),w=require("./kongponents201.cjs"),$=["aria-label"],O={key:0,class:"modal-header"},A={key:0,class:"modal-title"},I={class:"modal-footer"},D={class:"footer-actions"},z=e.defineComponent({inheritAttrs:!1,__name:"KModal",props:{visible:{type:Boolean},title:{default:""},actionButtonText:{default:"Submit"},actionButtonAppearance:{default:"primary"},actionButtonDisabled:{type:Boolean},hideCancelButton:{type:Boolean},cancelButtonText:{default:"Cancel"},cancelButtonAppearance:{default:"tertiary"},cancelButtonDisabled:{type:Boolean},tabbableOptions:{default:()=>({})},maxWidth:{default:"500px"},maxHeight:{default:"calc(100vh - 200px)"},closeOnBackdropClick:{type:Boolean},closeOnEscape:{type:Boolean,default:!0},hideCloseIcon:{type:Boolean},fullScreen:{type:Boolean},inputAutofocus:{type:Boolean},zIndex:{default:1100}},emits:["proceed","cancel"],setup(o,{emit:C}){e.useCssVars(t=>({c9546bd4:t.zIndex,v6d2ff071:h.value,v7fba0424:S.value}));const E=C,i=e.useSlots();e.provide(w.POPOVER_PARENT_ZINDEX_KEY,e.computed(()=>o.zIndex));const r=e.useAttrs(),p=T.useTextSelection(),u=`k-modal-${e.useId()}-overflow-hidden`,n=e.ref(null),f=e.ref(null),h=e.computed(()=>o.fullScreen&&!i.content?"95%":k.normalizeSize(o.maxWidth)),S=e.computed(()=>o.fullScreen&&!i.content?"95vh":k.normalizeSize(o.maxHeight)),V=e.computed(()=>{const t=Object.assign({},r);return delete t.class,t}),m=()=>!!o.title||!!i.title||!o.hideCloseIcon,v=t=>{o.visible&&o.closeOnEscape&&t.key==="Escape"&&b(!0)},b=(t=!1,a)=>{(t||a?.target?.classList?.contains("modal-backdrop")&&o.closeOnBackdropClick&&!p.text.value)&&E("cancel")},s=async t=>{t?(await e.nextTick(),await new Promise(a=>setTimeout(a,0)),n.value?.activate()):n.value?.deactivate()},d=t=>{typeof document<"u"&&(t?document?.addEventListener("keydown",v):document?.removeEventListener("keydown",v))},y=()=>{const t=n.value?.$el?.querySelector(".modal-content")?.querySelectorAll("input");t?.length&&Array.from(t).every(a=>!a.disabled&&!a.readOnly?(a.focus(),!1):!0)};e.watch(()=>o.visible,async t=>{t?(await s(!0),o.inputAutofocus&&y(),d(!0)):(await s(!1),d(!1)),typeof document<"u"&&document?.body?.classList?.toggle(u,t)},{immediate:!0}),e.watch(()=>o.inputAutofocus,async t=>{t&&(await e.nextTick(),y())});const l=e.ref(null);return e.onMounted(()=>{typeof document<"u"&&(l.value=document.createElement("style"),l.value.textContent=`body.${u} { overflow: hidden; }`,document.head.appendChild(l.value))}),e.onBeforeUnmount(async()=>{await s(!1),d(!1)}),e.onUnmounted(()=>{l.value?.remove()}),(t,a)=>o.visible?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,"aria-label":o.title,"aria-modal":"true",class:["k-modal",[e.unref(r).class]]},V.value,{role:"dialog"}),[e.createElementVNode("div",{ref_key:"modalWrapperElement",ref:f,class:e.normalizeClass(["modal-backdrop",{"modal-full-screen":o.fullScreen&&!t.$slots.content}]),onClick:a[3]||(a[3]=c=>b(!1,c))},[e.createVNode(e.unref(x.FocusTrap),{ref_key:"focusTrapElement",ref:n,active:!1,"fallback-focus":()=>f.value,"tabbable-options":o.tabbableOptions},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["modal-container",{"custom-content":t.$slots.content}]),tabindex:"-1"},[e.renderSlot(t.$slots,"content",{},()=>[m()?(e.openBlock(),e.createElementBlock("div",O,[o.title||t.$slots.title?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),o.hideCloseIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,"aria-label":"Close",class:"close-icon","data-testid":"modal-close-icon",type:"button",onClick:a[0]||(a[0]=c=>t.$emit("cancel"))},[e.createVNode(e.unref(N.CloseIcon),{color:`var(--kui-color-text-neutral, ${e.unref(g.KUI_COLOR_TEXT_NEUTRAL)})`,decorative:""},null,8,["color"])]))])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["modal-content",{"no-header":!m()}])},[e.renderSlot(t.$slots,"default",{},void 0,!0)],2),e.createElementVNode("div",I,[e.renderSlot(t.$slots,"footer",{},()=>[e.createElementVNode("div",D,[e.renderSlot(t.$slots,"footer-actions",{},()=>[o.hideCancelButton?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(B.default,{key:0,appearance:o.cancelButtonAppearance,"data-testid":"modal-cancel-button",disabled:o.cancelButtonDisabled,onClick:a[1]||(a[1]=c=>t.$emit("cancel"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.cancelButtonText),1)]),_:1},8,["appearance","disabled"])),e.createVNode(B.default,{appearance:o.actionButtonAppearance,"data-testid":"modal-action-button",disabled:o.actionButtonDisabled,onClick:a[2]||(a[2]=c=>t.$emit("proceed"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.actionButtonText),1)]),_:1},8,["appearance","disabled"])],!0)])],!0)])],!0)],2)]),_:3},8,["fallback-focus","tabbable-options"])],2)],16,$)):e.createCommentVNode("",!0)}});exports.default=z;