@progress/kendo-vue-indicators 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/badge/BadgeProps.d.ts

@@ -0,0 +1,183 @@
+/**
+ * Represents the props of the [KendoReact Badge component]({% slug overview_badge %}).
+ */
+export interface BadgeProps {
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the size of the Badge.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * null—Does not set a size `className`
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Specifies the roundness of the Badge.
+     *
+     * The possible values are:
+     * - small
+     * - medium (Default)
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Specifies the appearance fill style of the Badge.
+     *
+     * The possible values are:
+     * * `solid` (Default)
+     * * `outline`
+     * * null—Does not set a fillMode `className`
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | string;
+    /**
+     * Specifies the theme color of the Badge.
+     *
+     * The possible values are:
+     * * `primary` (Default)—Applies coloring based on primary theme color.
+     * * `secondary`—Applies coloring based on secondary theme color.
+     * * `tertiary`— Applies coloring based on tertiary theme color.
+     * * `inherit`— Applies inherited coloring value.
+     * * `info`—Applies coloring based on info theme color.
+     * * `success`— Applies coloring based on success theme color.
+     * * `warning`— Applies coloring based on warning theme color.
+     * * `error`— Applies coloring based on error theme color.
+     * * `dark`— Applies coloring based on dark theme color.
+     * * `light`— Applies coloring based on light theme color.
+     * * `inverse`— Applies coloring based on inverse theme color.
+     * * null—Does not set a themeColor `className`.
+     *
+     * @default `primary`
+     */
+    themeColor?: null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit' | string;
+    /**
+     * Specifies the alignment of the Badge.
+     *
+     * The possible keys are:
+     * * `horizontal`— Defines the possible horizontal alignment of the Badge.
+     *   * `start`—Uses the start point of the parent element.
+     *   * `end`(Default)—Uses the end point of the parent element.
+     * * `vertical`— Defines the possible vertical alignment of the Badge.
+     *   * `top`(Default)—Uses the top point of the parent element.
+     *   * `bottom`—Uses the bottom point of the parent element.
+     *
+     */
+    align?: {
+        /**
+         * Defines the possible horizontal alignment of the Badge.
+         *
+         * The available values are:
+         * - `start`—Uses the start point of the parent element.
+         * - `end`(Default)—Uses the end point of the parent element.
+         */
+        horizontal: 'start' | 'end';
+        /**
+         * Defines the possible vertical alignment of the Badge.
+         *
+         * The available values are:
+         * - `top`(Default)—Uses the top point of the parent element.
+         * - `bottom`—Uses the bottom point of the parent element.
+         */
+        vertical: 'top' | 'bottom';
+    };
+    /**
+     * Specifies the position of the Badge relative to the edge of the container element.
+     *
+     * The possible values are:
+     * * `edge` (Default)—The center of the Badge is positioned on the edge of the container element.
+     * * `outside`—The Badge is entirely positioned outside the edge of the container element.
+     * * `inside`—The Badge is entirely positioned inside the edge of the the container element.
+     *
+     * @default `edge`
+     */
+    position?: 'edge' | 'outside' | 'inside' | string;
+    /**
+     * Specifies wether or not to render additional "cutout" border around the Badge.
+     *
+     * The possible values are:
+     * * `true`
+     * * `false` (Default)
+     *
+     */
+    cutoutBorder?: boolean;
+}
+/**
+ * Specifies the theme color of the Badge.
+ *
+ * The possible values are:
+ * * `primary` (Default)—Applies coloring based on primary theme color.
+ * * `secondary`—Applies coloring based on secondary theme color.
+ * * `tertiary`— Applies coloring based on tertiary theme color.
+ * * `inherit`— Applies inherited coloring value.
+ * * `info`—Applies coloring based on info theme color.
+ * * `success`— Applies coloring based on success theme color.
+ * * `warning`— Applies coloring based on warning theme color.
+ * * `error`— Applies coloring based on error theme color.
+ * * `dark`— Applies coloring based on dark theme color.
+ * * `light`— Applies coloring based on light theme color.
+ * * `inverse`— Applies coloring based on inverse theme color.
+ *
+ */
+export declare type BadgeThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit';
+/**
+ * Specifies the size of the Badge.
+ *
+ * The possible values are:
+ * * `small`
+ * * `medium` (Default)
+ * * `large`
+ *
+ */
+export declare type BadgeSize = 'small' | 'medium' | 'large';
+/**
+ * Specifies the horizontal and vertical alignment of the Badge in a relation to the element.
+ */
+export interface BadgeAlign {
+    /**
+     * Defines the possible horizontal alignment of the Badge.
+     *
+     * The available values are:
+     * - `start`—Uses the start point of the parent element.
+     * - `end`(Default)—Uses the end point of the parent element.
+     */
+    horizontal: 'start' | 'end';
+    /**
+     * Defines the possible vertical alignment of the Badge.
+     *
+     * The available values are:
+     * - `top`(Default)—Uses the top point of the parent element.
+     * - `bottom`—Uses the bottom point of the parent element.
+     */
+    vertical: 'top' | 'bottom';
+}
+/**
+ * Specifies the appearance fill style of the Badge.
+ *
+ * The possible values are:
+ * * `solid` (Default)
+ * * `outline`
+ *
+ */
+export declare type BadgeFill = 'solid' | 'outline';
+/**
+ * Specifies the position of the Badge relative to the edge of the container element.
+ *
+ * The possible values are:
+ * * `edge` (Default)—The center of the Badge is positioned on the edge of the container element.
+ * * `outside`—The Badge is entirely positioned outside the edge of the container element.
+ * * `inside`—The Badge is entirely positioned inside the edge of the the container element.
+ *
+ */
+export declare type BadgePosition = 'edge' | 'outside' | 'inside';

package/dist/esm/badge/BadgeProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/loader/Loader.d.ts

@@ -0,0 +1,57 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { LoaderProps } from './LoaderProps';
+/**
+ * @hidden
+ */
+export interface LoaderHandle {
+    /**
+     * The Loader element.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Focus the Loader.
+     */
+    focus: () => void;
+}
+/**
+ * @hidden
+ */
+export interface LoaderState {
+}
+/**
+ * @hidden
+ */
+export interface LoaderComputed {
+    [key: string]: any;
+    loaderClasses: object;
+}
+/**
+ * @hidden
+ */
+export interface LoaderMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface LoaderData {
+}
+/**
+ * @hidden
+ */
+export interface LoaderAll extends Vue, LoaderMethods, LoaderData, LoaderComputed, LoaderState {
+}
+/**
+ * @hidden
+ */
+declare let LoaderVue2: ComponentOptions<LoaderAll, DefaultData<LoaderData>, DefaultMethods<LoaderAll>, LoaderComputed, RecordPropsDefinition<LoaderProps>>;
+/**
+ * @hidden
+ */
+declare const Loader: DefineComponent<LoaderProps, any, LoaderData, LoaderComputed, LoaderMethods, {}, {}, {}, string, LoaderProps, LoaderProps, {}>;
+export { Loader, LoaderVue2 };

package/dist/esm/loader/Loader.js

@@ -0,0 +1,114 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+var SEGMENT_COUNT = {
+  'pulsing': 2,
+  'infinite-spinner': 3,
+  'converging-spinner': 4
+};
+var TYPE_CLASSES = {
+  'pulsing': 'k-loader-pulsing-2',
+  'infinite-spinner': 'k-loader-spinner-3',
+  'converging-spinner': 'k-loader-spinner-4'
+};
+/**
+ * @hidden
+ */
+
+var LoaderVue2 = {
+  name: 'KendoLoader',
+  props: {
+    type: {
+      type: String,
+      default: 'pulsing',
+      validator: function validator(value) {
+        return ['pulsing', 'infinite-spinner', 'converging-spinner'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    },
+    themeColor: {
+      type: String,
+      default: 'primary',
+      validator: function validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'].includes(value);
+      }
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  computed: {
+    loaderClasses: function loaderClasses() {
+      var _a = this.$props,
+          type = _a.type,
+          size = _a.size,
+          themeColor = _a.themeColor;
+      return {
+        'k-loader': true,
+        'k-loader-sm': size === 'small',
+        'k-loader-md': size === 'medium',
+        'k-loader-lg': size === 'large',
+        'k-loader-primary': themeColor === 'primary',
+        'k-loader-secondary': themeColor === 'secondary',
+        'k-loader-tertiary': themeColor === 'tertiary',
+        'k-loader-info': themeColor === 'info',
+        'k-loader-success': themeColor === 'success',
+        'k-loader-warning': themeColor === 'warning',
+        'k-loader-error': themeColor === 'error',
+        'k-loader-dark': themeColor === 'dark',
+        'k-loader-light': themeColor === 'light',
+        'k-loader-inverse': themeColor === 'inverse',
+        'k-loader-pulsing-2': type === 'pulsing',
+        'k-loader-spinner-3': type === 'infinite-spinner',
+        'k-loader-spinner-4': type === 'converging-spinner'
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var type = this.$props.type;
+    var spans = new Array(SEGMENT_COUNT[type]);
+    spans.fill(0, 0, SEGMENT_COUNT[type]);
+    return h("div", {
+      "class": this.loaderClasses
+    }, [h("div", {
+      "class": "k-loader-canvas"
+    }, [spans.map(function (_, i) {
+      return h("span", {
+        key: i,
+        "class": "k-loader-segment"
+      });
+    }, this)])]);
+  },
+  methods: {
+    focus: function focus(e) {
+      if (this.$el) {
+        this.$el.focus(e);
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var Loader = LoaderVue2;
+export { Loader, LoaderVue2 };

package/dist/esm/loader/LoaderProps.d.ts

@@ -0,0 +1,43 @@
+import { LoaderSize } from './models/size';
+import { LoaderThemeColor } from './models/theme-color';
+import { LoaderType } from './models/type';
+/**
+ * Represents the props of the [Kendo UI for Vue Loader component]({% slug overview_loader %}).
+ */
+export interface LoaderProps {
+    /**
+     * Specifies the size of the Loader.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     *
+     */
+    size?: LoaderSize | string;
+    /**
+     * Specifies the theme color of the Loader.
+     *
+     * The possible values are:
+     * * `primary` (Default)—Applies coloring based on primary theme color.
+     * * `secondary`—Applies coloring based on secondary theme color.
+     * * `tertiary`— Applies coloring based on tertiary theme color.
+     * * `info`—Applies coloring based on info theme color.
+     * * `success`— Applies coloring based on success theme color.
+     * * `warning`— Applies coloring based on warning theme color.
+     * * `error`— Applies coloring based on error theme color.
+     * * `dark`— Applies coloring based on dark theme color.
+     * * `light`— Applies coloring based on light theme color.
+     * * `inverse`— Applies coloring based on inverse theme color.
+     */
+    themeColor?: LoaderThemeColor | string;
+    /**
+     * Specifies the Loader animation type.
+     *
+     * The possible values are:
+     * - `pulsing` (default)
+     * - `infinite-spinner`
+     * - `converging-spinner`
+     */
+    type?: LoaderType | string;
+}

package/dist/esm/loader/LoaderProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/loader/models/size.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Specifies the size of the Loader
+ * ([see example]({% slug appearance_loader %}#toc-size)).
+ *
+ * The possible values are:
+ * * `small`
+ * * `medium` (Default)
+ * * `large`
+ *
+ */
+export declare type LoaderSize = 'small' | 'medium' | 'large';

package/dist/esm/loader/models/size.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/loader/models/theme-color.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Specifies the theme color of the Loader.
+ * ([see example]({% slug appearance_loader %}#toc-theme-color)).
+ *
+ * The possible values are:
+ * * `primary` (Default)—Applies coloring based on primary theme color.
+ * * `secondary`—Applies coloring based on secondary theme color.
+ * * `tertiary`— Applies coloring based on tertiary theme color.
+ * * `info`—Applies coloring based on info theme color.
+ * * `success`— Applies coloring based on success theme color.
+ * * `warning`— Applies coloring based on warning theme color.
+ * * `error`— Applies coloring based on error theme color.
+ * * `dark`— Applies coloring based on dark theme color.
+ * * `light`— Applies coloring based on light theme color.
+ * * `inverse`— Applies coloring based on inverted theme color.
+ *
+ */
+export declare type LoaderThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

package/dist/esm/loader/models/theme-color.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/loader/models/type.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Specifies the Loader animation type.
+ *
+ * The possible values are:
+ * - `pulsing` (default)
+ * - `infinite-spinner`
+ * - `converging-spinner`
+ *
+ */
+export declare type LoaderType = 'pulsing' | 'infinite-spinner' | 'converging-spinner';

package/dist/esm/loader/models/type.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/main.d.ts

@@ -0,0 +1,11 @@
+export * from './badge/Badge';
+export * from './badge/BadgeProps';
+export * from './badge/BadgeContainer';
+export * from './badge/BadgeContainerProps';
+export * from './loader/Loader';
+export * from './loader/LoaderProps';
+export * from './loader/models/size';
+export * from './loader/models/theme-color';
+export * from './loader/models/type';
+export * from './skeleton/Skeleton';
+export * from './skeleton/SkeletonProps';

package/dist/esm/main.js

@@ -0,0 +1,11 @@
+export * from './badge/Badge.js';
+export * from './badge/BadgeProps.js';
+export * from './badge/BadgeContainer.js';
+export * from './badge/BadgeContainerProps.js';
+export * from './loader/Loader.js';
+export * from './loader/LoaderProps.js';
+export * from './loader/models/size.js';
+export * from './loader/models/theme-color.js';
+export * from './loader/models/type.js';
+export * from './skeleton/Skeleton.js';
+export * from './skeleton/SkeletonProps.js';

package/dist/esm/package-metadata.d.ts

@@ -0,0 +1,5 @@
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/dist/esm/package-metadata.js

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export var packageMetadata = {
+    name: '@progress/kendo-vue-indicators',
+    productName: 'Kendo UI for Vue',
+    productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
+    publishDate: 1660543598,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
+};

package/dist/esm/package.json

@@ -0,0 +1,3 @@
+{
+                    "type": "module"
+                 }

package/dist/esm/skeleton/Skeleton.d.ts

@@ -0,0 +1,57 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { SkeletonProps } from './SkeletonProps';
+/**
+ * @hidden
+ */
+export interface SkeletonHandle {
+    /**
+     * The Skeleton element.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Focus the Skeleton.
+     */
+    focus: () => void;
+}
+/**
+ * @hidden
+ */
+export interface SkeletonState {
+}
+/**
+ * @hidden
+ */
+export interface SkeletonComputed {
+    [key: string]: any;
+    skeletonClasses: object;
+}
+/**
+ * @hidden
+ */
+export interface SkeletonMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SkeletonData {
+}
+/**
+ * @hidden
+ */
+export interface SkeletonAll extends Vue, SkeletonMethods, SkeletonData, SkeletonComputed, SkeletonState {
+}
+/**
+ * @hidden
+ */
+declare let SkeletonVue2: ComponentOptions<SkeletonAll, DefaultData<SkeletonData>, DefaultMethods<SkeletonAll>, SkeletonComputed, RecordPropsDefinition<SkeletonProps>>;
+/**
+ * @hidden
+ */
+declare const Skeleton: DefineComponent<SkeletonProps, any, SkeletonData, SkeletonComputed, SkeletonMethods, {}, {}, {}, string, SkeletonProps, SkeletonProps, {}>;
+export { Skeleton, SkeletonVue2 };

package/dist/esm/skeleton/Skeleton.js

@@ -0,0 +1,69 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { validatePackage, isObject } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var SkeletonVue2 = {
+  name: 'KendoSkeleton',
+  props: {
+    animation: {
+      type: [Object, Boolean],
+      default: function _default() {
+        return {
+          type: 'pulse'
+        };
+      },
+      validator: function validator(value) {
+        return ['wave', 'pulse'].includes(value.type);
+      }
+    },
+    shape: {
+      type: String,
+      default: 'text',
+      validator: function validator(value) {
+        return ['circle', 'rectangle', 'text'].includes(value);
+      }
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  computed: {
+    skeletonClasses: function skeletonClasses() {
+      return {
+        'k-skeleton': true,
+        'k-skeleton-circle': this.shape === 'circle',
+        'k-skeleton-rectangle': this.shape === 'rectangle',
+        'k-skeleton-text': this.shape === 'text',
+        'k-skeleton-pulse': isObject(this.animation) && this.animation.type === 'pulse',
+        'k-skeleton-wave': isObject(this.animation) && this.animation.type === 'wave' || this.animation === true
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h("span", {
+      "class": this.skeletonClasses
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var Skeleton = SkeletonVue2;
+export { Skeleton, SkeletonVue2 };

package/dist/esm/skeleton/SkeletonProps.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Represents the props of the [Kendo Ui for Vue Skeleton component]({% slug overview_skeleton %}).
+ */
+export interface SkeletonProps {
+    /**
+     * Specifies the animation settings of the Skeleton.
+     *
+     * The possible keys are:
+     * * `type`—Defines the type of the Skeleton animation.
+     *   * `wave`—Shows wave animation effect.
+     *   * `pulse`(Default)—Shows pulse animation effect.
+     *
+     * To disable the animation, set the property to `false`.
+     *
+     */
+    animation?: boolean | SkeletonAnimation;
+    /**
+     * Specifies the shape of the Skeleton.
+     *
+     * The possible values are:
+     * * `circle`—Renders a circular Skeleton.
+     * * `text`(Default)—Renders a line Skeleton.
+     * * `rectangle`—Renders a rectangular Skeleton.
+     *
+     */
+    shape?: SkeletonShape | string;
+}
+/**
+ * Specifies the shape of the Skeleton.
+ *
+ * The possible values are:
+ * * `circle`—Renders a circular Skeleton.
+ * * `text`(Default)—Renders a line Skeleton.
+ * * `rectangle`—Renders a rectangular Skeleton.
+ *
+ */
+export declare type SkeletonShape = 'circle' | 'text' | 'rectangle';
+/**
+ * Specifies the animation settings of the Skeleton.
+ */
+export interface SkeletonAnimation {
+    /**
+     * Specifies the type of the Skeleton animation. Defaults to `pulse`.
+     */
+    type?: 'wave' | 'pulse';
+}

package/dist/esm/skeleton/SkeletonProps.js

@@ -0,0 +1 @@
+export {};