@progress/kendo-vue-layout 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/stepper/Step.mjs

@@ -0,0 +1,179 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as j, inject as D, createVNode as n } from "vue";
+import { getDefaultSlots as V, Icon as S, getIconName as M, focusFirstFocusableChild as T } from "@progress/kendo-vue-common";
+import { provideLocalizationService as w } from "@progress/kendo-vue-intl";
+import { checkOutlineIcon as _, exclamationCircleIcon as U } from "@progress/kendo-svg-icons";
+import { DEFAULT_ANIMATION_DURATION as K, NO_ANIMATION as R } from "./contants.mjs";
+import { messages as W, optionalText as q } from "./messages/main.mjs";
+const Z = /* @__PURE__ */ j({
+  name: "KendoStep",
+  props: {
+    current: Boolean,
+    disabled: Boolean,
+    icon: String,
+    svgIcon: Object,
+    index: Number,
+    isValid: {
+      type: Boolean,
+      default: void 0
+    },
+    focused: Boolean,
+    label: String,
+    optional: Boolean,
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    text: String,
+    animationDuration: [Boolean, Number],
+    isVertical: Boolean,
+    item: [String, Object, Boolean, Function],
+    linear: Boolean,
+    mode: String,
+    numOfSteps: Number,
+    value: Number,
+    successIcon: String,
+    successSvgIcon: Object,
+    errorIcon: String,
+    errorSvgIcon: Object,
+    onChange: Function,
+    onFocus: Function
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  computed: {
+    itemClassNames() {
+      const {
+        current: e,
+        disabled: o,
+        focused: r,
+        index: l,
+        isValid: t,
+        optional: s
+      } = this.$props;
+      return {
+        "k-step": !0,
+        "k-step-first": l === 0,
+        "k-step-last": this.numOfSteps && l === this.numOfSteps - 1,
+        "k-step-done": l < this.value,
+        "k-step-current": e,
+        "k-step-optional": s,
+        "k-disabled": o,
+        "k-focus": r,
+        "k-step-error": t !== void 0 && !t,
+        "k-step-success": t
+      };
+    },
+    itemStyles() {
+      const {
+        index: e
+      } = this.$props, o = !this.linear || e === this.value - 1 || e === this.value || e === this.value + 1;
+      return {
+        maxWidth: this.isVertical ? void 0 : `calc(100% / ${this.numOfSteps})`,
+        pointerEvents: o ? void 0 : "none"
+      };
+    }
+  },
+  watch: {
+    focused(e) {
+      this.aElement = this.$refs.aElement, this.aElement && e && this.aElement.focus();
+    }
+  },
+  setup() {
+    return {
+      kendoLocalizationService: D("kendoLocalizationService", {})
+    };
+  },
+  render() {
+    const e = V(this), {
+      current: o,
+      disabled: r,
+      focused: l,
+      icon: t,
+      svgIcon: s,
+      index: c,
+      isValid: i,
+      label: a,
+      optional: v,
+      tabIndex: m,
+      text: f,
+      animationDuration: d,
+      item: I,
+      linear: g,
+      mode: h,
+      value: u,
+      successIcon: x,
+      successSvgIcon: N,
+      errorIcon: O,
+      errorSvgIcon: B
+    } = this.$props, C = !g || c === u - 1 || c === u || c === u + 1, k = h === "labels" || (!!t || !!s) && !!a, F = w(this), L = ((b) => F.toLanguageString(b, W[b]))(q), $ = typeof d == "number" ? d : d !== !1 ? K : R, z = i ? x || "check-circle" : O || "exclamation-circle", y = i ? N || _ : B || U, p = n(S, {
+      class: "k-step-indicator-icon",
+      name: M(z),
+      icon: y,
+      "aria-hidden": "true"
+    }, null), A = function() {
+      return h !== "labels" ? n("span", {
+        class: "k-step-indicator",
+        "aria-hidden": !0,
+        style: {
+          transitionDuration: $ + "ms"
+        }
+      }, [t || s ? !k && i !== void 0 ? p : n(S, {
+        class: "k-step-indicator-icon",
+        name: t,
+        icon: s
+      }, null) : i !== void 0 ? p : n("span", {
+        class: "k-step-indicator-text"
+      }, [f || c + 1])]) : null;
+    }, E = function() {
+      return n("span", {
+        class: "k-step-label"
+      }, [a && n("span", {
+        class: "k-step-text"
+      }, [a]), k && i !== void 0 && p, v && n("span", {
+        class: "k-step-label-optional"
+      }, [L])]);
+    };
+    return n("li", {
+      class: this.itemClassNames,
+      style: this.itemStyles
+    }, [n("a", {
+      ref: "aElement",
+      class: "k-step-link",
+      title: a || void 0,
+      onClick: this.handleClick,
+      onFocusin: this.handleFocus,
+      "tab-index": m || (o ? 0 : -1),
+      "aria-current": o ? !0 : void 0,
+      "aria-disabled": r || !C || void 0,
+      "aria-invalid": i !== void 0 && !i || void 0
+    }, [I ? e : [A.call(this), E.call(this)]])]);
+  },
+  methods: {
+    focus() {
+      this.$el && T(this.$el);
+    },
+    handleClick(e) {
+      this.disabled || this.$emit("change", {
+        event: e,
+        value: this.index,
+        component: this
+      });
+    },
+    handleFocus(e) {
+      this.disabled || this.$emit("focus", e);
+    }
+  }
+});
+export {
+  Z as Step
+};

package/stepper/Stepper.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),i=require("@progress/kendo-vue-common"),I=require("./Step.js"),b=require("@progress/kendo-vue-progressbars"),h=require("./contants.js"),S=require("../package-metadata.js"),c=require("./messages/main.js"),V=require("@progress/kendo-vue-intl"),y=d.defineComponent({name:"KendoStepper",model:{event:"changemodel"},inject:{kendoLocalizationService:{default:null}},props:{animationDuration:{type:[Boolean,Number],default:400},dir:String,disabled:Boolean,item:{type:[String,Object,Function,Boolean],default:void 0},items:Array,linear:Boolean,mode:{type:String,default:"steps",validator:function(e){return["steps","labels"].includes(e)}},orientation:{type:String,default:"horizontal",validator:function(e){return["horizontal","vertical"].includes(e)}},value:{type:Number,default:0},progressTotal:{type:Number},progress:{type:Number},modelValue:Number,successIcon:String,errorIcon:String},created(){i.validatePackage(S.packageMetadata),this.focusedIdx=this.computedValue!==void 0?this.computedValue:0},mounted(){this.currentDir=this.$props.dir!==void 0?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr"},data(){return{currentDir:"ltr",focusedIdx:0,stepper:{},currentFocused:!1}},watch:{value(e){this.focusedIdx=e}},computed:{computedValue(){return this.$props.modelValue!==void 0?this.$props.modelValue:this.$props.value},isVertical(){return this.$props.orientation==="vertical"},numOfSteps(){const{items:e}=this.$props;return e?e.length:0},stepperClasses(){return{"k-stepper":!0,"k-stepper-linear":this.$props.linear}},stepperStyles(){return{display:"grid",gridTemplateColumns:this.isVertical?void 0:"repeat("+this.numOfSteps*2+", 1fr)",gridTemplateRows:this.isVertical?"repeat("+this.numOfSteps*4+", 1fr)":void 0}},listClasses(){return{"k-step-list":!0,"k-step-list-horizontal":!this.isVertical,"k-step-list-vertical":this.isVertical}},listStyles(){return{gridColumnStart:this.isVertical?"":1,gridColumnEnd:this.isVertical?"":-1,gridRowStart:this.isVertical?1:"",gridRowEnd:this.isVertical?-1:""}},progressbarStyles(){return{gridColumnStart:this.isVertical?"":2,gridColumnEnd:this.isVertical?"":this.numOfSteps*2,gridRowStart:this.isVertical?2:"",gridRowEnd:this.isVertical?this.numOfSteps*4-2:""}}},render(){const e=i.getDefaultSlots(this),{animationDuration:t,disabled:s,items:a,orientation:l}=this.$props,n=this.computedValue,p=typeof t=="number"?t:t!==!1?h.DEFAULT_ANIMATION_DURATION:h.NO_ANIMATION,f=V.provideLocalizationService(this).toLanguageString(c.ariaLabel,c.messages[c.ariaLabel]),u=a&&a.map(function(r,o){const m=this.$props.item?i.templateRendering.call(this,this.$props.item,i.getListeners.call(this)):void 0,g=d.createVNode(I.Step,{key:o,index:o,disabled:s||r.disabled,focused:o===this.focusedIdx&&this.currentFocused,current:o===n,onChange:this.handleChange,onFocus:this.handleFocus,class:r.class,style:r.style,icon:r.icon,label:r.label,optional:r.optional,text:r.text,isValid:r.isValid,tabIndex:r.tabIndex,animationDuration:this.animationDuration,isVertical:this.isVertical,item:this.item,linear:this.linear,mode:this.mode,numOfSteps:this.numOfSteps,value:n,successIcon:this.successIcon,errorIcon:this.errorIcon,svgIcon:r.svgIcon,successSvgIcon:r.successSvgIcon,errorSvgIcon:r.errorSvgIcon},null);return i.getTemplate.call(this,{h:d.h,template:m,defaultRendering:g,additionalProps:{...r,disabled:s||r.disabled,focused:o===this.focusedIdx,current:o===n,value:n},additionalListeners:{change:this.handleChange,focus:this.handleFocus}})},this);return d.createVNode("nav",{tabindex:this.currentFocused?-1:0,class:this.stepperClasses,style:this.stepperStyles,dir:this.currentDir,onFocusin:this.handleFocusin,onFocusout:this.handleFocusout,onKeydown:this.handleKeyDown},[d.createVNode("ol",{class:this.listClasses,style:this.listStyles},[u||e]),d.createVNode(b.ProgressBar,{style:this.progressbarStyles,animation:{duration:p},"aria-hidden":!0,"aria-label":f,max:this.progressTotal||this.numOfSteps-1,labelVisible:!1,orientation:l,reverse:l==="vertical",value:this.progress||n,disabled:s,tabIndex:-1},null)])},methods:{focus(){this.$el&&i.focusFirstFocusableChild(this.$el)},dispatchChangeEvent(e,t){const s=t===this.computedValue-1,a=t===this.computedValue,l=t===this.computedValue+1,n=!this.linear||s||a||l;this.computedValue!==t&&!this.disabled&&n&&(this.focusedIdx=t,this.$emit("changemodel",t),this.$emit("update:modelValue",t),this.$emit("change",{component:this,event:e,value:t}))},handleChange(e){let t=e.value;this.dispatchChangeEvent(e,t)},handleFocus(e){this.disabled||this.$emit("focus",e,void 0)},handleEnter(e){const t={component:this,event:e,value:this.focusedIdx};this.dispatchChangeEvent(t,this.focusedIdx)},handleFocusin(){this.currentFocused=!0},handleFocusout(){this.currentFocused=!1},handleKeyDown(e){const t=this.currentDir==="rtl",s=this.focusedIdx,a=this.items.length-1;switch(e.keyCode){case i.Keys.left:e.preventDefault(),!t&&s>0&&(this.focusedIdx=s-1),t&&s<a&&(this.focusedIdx=s+1);break;case i.Keys.right:e.preventDefault(),!t&&s<a&&(this.focusedIdx=s+1),t&&s>0&&(this.focusedIdx=s-1);break;case i.Keys.up:e.preventDefault(),!t&&s>0&&(this.focusedIdx=s-1),t&&s>0&&(this.focusedIdx=s-1);break;case i.Keys.down:e.preventDefault(),!t&&s<a&&(this.focusedIdx=s+1),t&&s<a&&(this.focusedIdx=s+1);break;case i.Keys.home:e.preventDefault(),this.focusedIdx=0;break;case i.Keys.end:e.preventDefault(),this.focusedIdx=a;break;case i.Keys.space:case i.Keys.enter:e.preventDefault(),this.items[s].disabled||this.handleEnter(e);break}}}});exports.Stepper=y;

package/stepper/Stepper.mjs

@@ -0,0 +1,280 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as g, createVNode as d, h as I } from "vue";
+import { validatePackage as b, isRtl as S, getDefaultSlots as V, templateRendering as x, getListeners as v, getTemplate as y, focusFirstFocusableChild as C, Keys as a } from "@progress/kendo-vue-common";
+import { Step as D } from "./Step.mjs";
+import { ProgressBar as F } from "@progress/kendo-vue-progressbars";
+import { DEFAULT_ANIMATION_DURATION as k, NO_ANIMATION as $ } from "./contants.mjs";
+import { packageMetadata as w } from "../package-metadata.mjs";
+import { ariaLabel as u, messages as N } from "./messages/main.mjs";
+import { provideLocalizationService as O } from "@progress/kendo-vue-intl";
+const _ = /* @__PURE__ */ g({
+  name: "KendoStepper",
+  model: {
+    event: "changemodel"
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  props: {
+    animationDuration: {
+      type: [Boolean, Number],
+      default: 400
+    },
+    dir: String,
+    disabled: Boolean,
+    item: {
+      type: [String, Object, Function, Boolean],
+      default: void 0
+    },
+    items: Array,
+    linear: Boolean,
+    mode: {
+      type: String,
+      default: "steps",
+      validator: function(e) {
+        return ["steps", "labels"].includes(e);
+      }
+    },
+    orientation: {
+      type: String,
+      default: "horizontal",
+      validator: function(e) {
+        return ["horizontal", "vertical"].includes(e);
+      }
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    progressTotal: {
+      type: Number
+    },
+    progress: {
+      type: Number
+    },
+    modelValue: Number,
+    successIcon: String,
+    errorIcon: String
+  },
+  created() {
+    b(w), this.focusedIdx = this.computedValue !== void 0 ? this.computedValue : 0;
+  },
+  mounted() {
+    this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : S(this.$el) ? "rtl" : "ltr";
+  },
+  data() {
+    return {
+      currentDir: "ltr",
+      focusedIdx: 0,
+      stepper: {},
+      currentFocused: !1
+    };
+  },
+  watch: {
+    value(e) {
+      this.focusedIdx = e;
+    }
+  },
+  computed: {
+    computedValue() {
+      return this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$props.value;
+    },
+    isVertical() {
+      return this.$props.orientation === "vertical";
+    },
+    numOfSteps() {
+      const {
+        items: e
+      } = this.$props;
+      return e ? e.length : 0;
+    },
+    stepperClasses() {
+      return {
+        "k-stepper": !0,
+        "k-stepper-linear": this.$props.linear
+      };
+    },
+    stepperStyles() {
+      return {
+        display: "grid",
+        gridTemplateColumns: this.isVertical ? void 0 : "repeat(" + this.numOfSteps * 2 + ", 1fr)",
+        gridTemplateRows: this.isVertical ? "repeat(" + this.numOfSteps * 4 + ", 1fr)" : void 0
+      };
+    },
+    listClasses() {
+      return {
+        "k-step-list": !0,
+        "k-step-list-horizontal": !this.isVertical,
+        "k-step-list-vertical": this.isVertical
+      };
+    },
+    listStyles() {
+      return {
+        gridColumnStart: this.isVertical ? "" : 1,
+        gridColumnEnd: this.isVertical ? "" : -1,
+        gridRowStart: this.isVertical ? 1 : "",
+        gridRowEnd: this.isVertical ? -1 : ""
+      };
+    },
+    progressbarStyles() {
+      return {
+        gridColumnStart: this.isVertical ? "" : 2,
+        gridColumnEnd: this.isVertical ? "" : this.numOfSteps * 2,
+        gridRowStart: this.isVertical ? 2 : "",
+        gridRowEnd: this.isVertical ? this.numOfSteps * 4 - 2 : ""
+      };
+    }
+  },
+  render() {
+    const e = V(this), {
+      animationDuration: t,
+      disabled: s,
+      items: r,
+      orientation: l
+    } = this.$props, o = this.computedValue, h = typeof t == "number" ? t : t !== !1 ? k : $, p = O(this).toLanguageString(u, N[u]), c = r && r.map(function(i, n) {
+      const f = this.$props.item ? x.call(this, this.$props.item, v.call(this)) : void 0, m = d(D, {
+        key: n,
+        index: n,
+        disabled: s || i.disabled,
+        focused: n === this.focusedIdx && this.currentFocused,
+        current: n === o,
+        onChange: this.handleChange,
+        onFocus: this.handleFocus,
+        class: i.class,
+        style: i.style,
+        icon: i.icon,
+        label: i.label,
+        optional: i.optional,
+        text: i.text,
+        isValid: i.isValid,
+        tabIndex: i.tabIndex,
+        animationDuration: this.animationDuration,
+        isVertical: this.isVertical,
+        item: this.item,
+        linear: this.linear,
+        mode: this.mode,
+        numOfSteps: this.numOfSteps,
+        value: o,
+        successIcon: this.successIcon,
+        errorIcon: this.errorIcon,
+        svgIcon: i.svgIcon,
+        successSvgIcon: i.successSvgIcon,
+        errorSvgIcon: i.errorSvgIcon
+      }, null);
+      return y.call(this, {
+        h: I,
+        template: f,
+        defaultRendering: m,
+        additionalProps: {
+          ...i,
+          disabled: s || i.disabled,
+          focused: n === this.focusedIdx,
+          current: n === o,
+          value: o
+        },
+        additionalListeners: {
+          change: this.handleChange,
+          focus: this.handleFocus
+        }
+      });
+    }, this);
+    return d("nav", {
+      tabindex: this.currentFocused ? -1 : 0,
+      class: this.stepperClasses,
+      style: this.stepperStyles,
+      dir: this.currentDir,
+      onFocusin: this.handleFocusin,
+      onFocusout: this.handleFocusout,
+      onKeydown: this.handleKeyDown
+    }, [d("ol", {
+      class: this.listClasses,
+      style: this.listStyles
+    }, [c || e]), d(F, {
+      style: this.progressbarStyles,
+      animation: {
+        duration: h
+      },
+      "aria-hidden": !0,
+      "aria-label": p,
+      max: this.progressTotal || this.numOfSteps - 1,
+      labelVisible: !1,
+      orientation: l,
+      reverse: l === "vertical",
+      value: this.progress || o,
+      disabled: s,
+      tabIndex: -1
+    }, null)]);
+  },
+  methods: {
+    focus() {
+      this.$el && C(this.$el);
+    },
+    dispatchChangeEvent(e, t) {
+      const s = t === this.computedValue - 1, r = t === this.computedValue, l = t === this.computedValue + 1, o = !this.linear || s || r || l;
+      this.computedValue !== t && !this.disabled && o && (this.focusedIdx = t, this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", {
+        component: this,
+        event: e,
+        value: t
+      }));
+    },
+    handleChange(e) {
+      let t = e.value;
+      this.dispatchChangeEvent(e, t);
+    },
+    handleFocus(e) {
+      this.disabled || this.$emit("focus", e, void 0);
+    },
+    handleEnter(e) {
+      const t = {
+        component: this,
+        event: e,
+        value: this.focusedIdx
+      };
+      this.dispatchChangeEvent(t, this.focusedIdx);
+    },
+    handleFocusin() {
+      this.currentFocused = !0;
+    },
+    handleFocusout() {
+      this.currentFocused = !1;
+    },
+    handleKeyDown(e) {
+      const t = this.currentDir === "rtl", s = this.focusedIdx, r = this.items.length - 1;
+      switch (e.keyCode) {
+        case a.left:
+          e.preventDefault(), !t && s > 0 && (this.focusedIdx = s - 1), t && s < r && (this.focusedIdx = s + 1);
+          break;
+        case a.right:
+          e.preventDefault(), !t && s < r && (this.focusedIdx = s + 1), t && s > 0 && (this.focusedIdx = s - 1);
+          break;
+        case a.up:
+          e.preventDefault(), !t && s > 0 && (this.focusedIdx = s - 1), t && s > 0 && (this.focusedIdx = s - 1);
+          break;
+        case a.down:
+          e.preventDefault(), !t && s < r && (this.focusedIdx = s + 1), t && s < r && (this.focusedIdx = s + 1);
+          break;
+        case a.home:
+          e.preventDefault(), this.focusedIdx = 0;
+          break;
+        case a.end:
+          e.preventDefault(), this.focusedIdx = r;
+          break;
+        case a.space:
+        case a.enter:
+          e.preventDefault(), this.items[s].disabled || this.handleEnter(e);
+          break;
+      }
+    }
+  }
+});
+export {
+  _ as Stepper
+};

package/stepper/contants.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=400,N=0;exports.DEFAULT_ANIMATION_DURATION=A;exports.NO_ANIMATION=N;

package/stepper/contants.mjs

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const A = 400, N = 0;
+export {
+  A as DEFAULT_ANIMATION_DURATION,
+  N as NO_ANIMATION
+};

package/stepper/messages/main.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="stepper.optionalText",a="stepper.ariaLabel",t={[e]:"(Optional)",[a]:"Progressbar"};exports.ariaLabel=a;exports.messages=t;exports.optionalText=e;

package/stepper/messages/main.mjs

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const e = "stepper.optionalText", a = "stepper.ariaLabel", t = {
+  [e]: "(Optional)",
+  [a]: "Progressbar"
+};
+export {
+  a as ariaLabel,
+  t as messages,
+  e as optionalText
+};

package/tabstrip/TabStrip.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),o=require("./TabStripNavigation.js"),u=require("./TabStripContent.js"),s=require("@progress/kendo-vue-common"),l=require("../package-metadata.js"),T=n.defineComponent({name:"KendoTabStrip",emits:{select:null},props:{animation:{type:Boolean,default:!0},selected:Number,tabPosition:{type:String,default:"top"},tabs:{type:Array,default:void 0},tabIndex:Number,dir:String},data(){return{currentShowAll:!0,currentTabs:[],showLicenseWatermark:!1}},computed:{compTabs(){return this.tabs!==void 0?this.tabs.map(function(e){const t=s.templateRendering.call(this,e.content,s.getListeners.call(this)),i=s.templateRendering.call(this,e.titleRender,s.getListeners.call(this));return{...e,content:t,titleRender:i}},this):this.currentTabs}},provide(){return{addRenderTitle:this.addRenderTitle,addTab:this.addTab,removeTab:this.removeTab}},created(){this.keyBinding={[s.Keys.left]:()=>this.prevNavigatableTab(),[s.Keys.right]:()=>this.nextNavigatableTab(),[s.Keys.down]:()=>this.nextNavigatableTab(),[s.Keys.up]:()=>this.prevNavigatableTab(),[s.Keys.home]:()=>0,[s.Keys.end]:()=>this.compTabs.length-1},s.validatePackage(l.packageMetadata),this.showLicenseWatermark=s.shouldShowValidationUI(l.packageMetadata)},watch:{selected(e,t){this.$props.animation&&(this.currentShowAll=!1,this.$nextTick(function(){this.currentShowAll=!0}))}},methods:{addRenderTitle(e,t){const i=this.compTabs.findIndex(a=>a.tabId===e);this.compTabs[i].titleRender=t},addTab(e){this.currentTabs.push(e)},removeTab(e){const t=this.currentTabs.findIndex(i=>i.tabId===e);this.currentTabs.splice(t,1)},onSelect(e){this.$props.selected!==e&&this.$emit("select",{selected:e})},onKeyDown(e){let t;switch(e.keyCode){case s.Keys.left:t=this.keyBinding[this.invertKeys(s.Keys.left,s.Keys.right)];break;case s.Keys.right:t=this.keyBinding[this.invertKeys(s.Keys.right,s.Keys.left)];break;case s.Keys.up:t=this.keyBinding[s.Keys.up];break;case s.Keys.down:t=this.keyBinding[s.Keys.down];break;case s.Keys.home:t=this.keyBinding[s.Keys.home];break;case s.Keys.end:t=this.keyBinding[s.Keys.end];break}t&&(e.preventDefault(),this.onSelect(t()))},invertKeys(e,t){return this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1?t:e},firstNavigatableTab(){const e=this.compTabs.length;if(e){for(let t=0;t<e;t++)if(!this.compTabs[t].disabled)return t}},lastNavigatableTab(){const e=this.compTabs.length;if(e){for(let t=e-1;t>0;t--)if(!this.compTabs[t].disabled)return t}},prevNavigatableTab(){const e=this.compTabs.length,{selected:t}=this.$props,i=t?t-1:-1;if(i<0)return this.lastNavigatableTab();if(e)for(let a=i;a>-1;a--){if(!this.compTabs[a].disabled)return a;if(a===0)return this.lastNavigatableTab()}},nextNavigatableTab(){const e=this.compTabs.length,{selected:t}=this.$props,i=t?t+1:1;if(i>=e)return this.firstNavigatableTab();if(e)for(let a=i;a<e;a++){if(!this.compTabs[a].disabled)return a;if(a+1===e)return this.firstNavigatableTab()}}},render(){const{tabPosition:e,tabIndex:t=0}=this.$props,i=e==="bottom",a=s.classNames("k-widget","k-pos-relative","k-tabstrip",{"k-tabstrip-left":e==="left","k-tabstrip-right":e==="right","k-tabstrip-bottom":e==="bottom","k-tabstrip-top":e==="top"}),d=this.showLicenseWatermark?n.createVNode(s.WatermarkOverlay,null,null):null,c=function(h){const{selected:r}=h,b=s.getDefaultSlots(this),p={index:r,animation:this.$props.animation,tabs:this.compTabs,hasTabs:this.tabs!==void 0,selected:r,showAll:this.currentShowAll};return n.h(u.TabStripContent,{...p},b)};return n.createVNode("div",{dir:this.$props.dir,class:a},[!i&&n.createVNode(o.TabStripNavigation,{tabs:this.compTabs,selected:this.$props.selected,onSelect:this.onSelect,onKeydown:this.onKeyDown,tabIndex:t},null),c.call(this,this.$props),i&&n.createVNode(o.TabStripNavigation,{tabs:this.compTabs,selected:this.$props.selected,onSelect:this.onSelect,onKeydown:this.onKeyDown,tabIndex:t},null),d])}});exports.TabStrip=T;