@progress/kendo-vue-common 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/es/icons/SvgIcon.js

@@ -0,0 +1,120 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { SIZE_CLASSES } from './constants';
+import { getDefaultSlots } from '../defaultSlots';
+/**
+ * @hidden
+ */
+var SvgIconVue2 = {
+  name: 'KendoSvgIcon',
+  // @ts-ignore
+  emits: {
+    click: null
+  },
+  props: {
+    icon: Object,
+    themeColor: {
+      type: String
+    },
+    size: {
+      type: String
+    },
+    flip: {
+      type: String
+    },
+    id: String,
+    ariaLabel: String,
+    title: String,
+    viewBox: {
+      type: String,
+      default: '0 0 24 24'
+    },
+    tabIndex: Number
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+      var _b = this.$props,
+        name = _b.name,
+        flip = _b.flip,
+        size = _b.size,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-svg-icon': true
+      }, _a['k-color-' + themeColor] = true, _a['k-svg-i-' + name] = name, _a['k-flip-h'] = flip === 'horizontal' || flip === 'both', _a['k-flip-v'] = flip === 'vertical' || flip === 'both', _a[SIZE_CLASSES[size]] = true, _a;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+      svgClassName = _a.svgClassName,
+      icon = _a.icon,
+      id = _a.id,
+      tabIndex = _a.tabIndex,
+      svgStyle = _a.svgStyle,
+      viewBox = _a.viewBox,
+      title = _a.title,
+      ariaLabel = _a.ariaLabel;
+    var innerHTML = icon ? icon.content : undefined;
+    var attrs = {
+      id: id,
+      title: title,
+      'aria-hidden': true,
+      tabIndex: tabIndex,
+      ariaLabel: ariaLabel,
+      focusable: 'false',
+      xmlns: 'http://www.w3.org/2000/svg',
+      viewBox: icon ? icon.viewBox : viewBox
+    };
+    var svg = h('svg', __assign(__assign({}, attrs), {
+      attrs: attrs,
+      domProps: {
+        innerHTML: innerHTML
+      },
+      innerHTML: innerHTML,
+      'class': svgClassName,
+      style: svgStyle
+    }), [icon ? undefined : defaultSlot]);
+    return h("span", {
+      "class": this.wrapperClass,
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick
+      }
+    }, [svg]);
+  },
+  methods: {
+    handleClick: function handleClick(e) {
+      this.$emit('click', e);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var SvgIcon = SvgIconVue2;
+export { SvgIcon, SvgIconVue2 };

package/dist/es/icons/constants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export declare const SIZE_CLASSES: {
+    default: string;
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+};

package/dist/es/icons/constants.js

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export var SIZE_CLASSES = {
+    'default': '',
+    'xsmall': 'k-icon-xs',
+    'small': 'k-icon-sm',
+    'medium': 'k-icon-md',
+    'large': 'k-icon-lg',
+    'xlarge': 'k-icon-xl'
+};

package/dist/es/icons/models/flip.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Specifies the icon flip direction.
+ *
+ * The possible values are:
+ * * `default` (Default)—No flipping applied.
+ * * `horizontal`—Flips the icon in horizontal direction.
+ * * `vertical`—Flips the icon in vertical direction.
+ * * `both`—Flips the icon in both horizontal and vertical directions.
+ *
+ */
+export declare type IconFlip = 'default' | 'horizontal' | 'vertical' | 'both';

package/dist/es/icons/models/flip.js

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

package/dist/es/icons/models/size.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Specifies the size of the icon.
+ *
+ * The possible values are:
+ * * `default` (Default)—Font-size: 16px; Width: 16px; Height: 16px.
+ * * `xsmall`—Font-size: 8px; Width: 8px; Height: 8px.
+ * * `small`—Font-size: 12px; Width: 12px; Height: 12px.
+ * * `medium`—Font-size: 32px; Width: 32px; Height: 32px.
+ * * `large`—Font-size: 48px; Width: 48px; Height: 48px.
+ * * `xlarge`—Font-size: 64px; Width: 64px; Height: 64px.
+ *
+ */
+export declare type IconSize = 'default' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

package/dist/es/icons/models/size.js

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

package/dist/es/icons/models/theme-color.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Specifies the theme color of the Icon.
+ *
+ * The possible values are:
+ * * `inherit` (Default)—Applies coloring based on the current color.
+ * * `primary` —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.
+ *
+ * If the property is not set, the icon inherits the color from its parent.
+ *
+ * You can use the `style` prop to apply custom color related properties to the icon.
+ */
+export declare type IconThemeColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

package/dist/es/icons/models/theme-color.js

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

package/dist/es/main.d.ts

@@ -23,3 +23,9 @@ export * from './treeDataOperations';
 export * from './browser-support.service';
 export * from './scrollbarWidth';
 export * from './hasRelativeStackingContext';
+export * from './icons/Icon';
+export * from './icons/FontIcon';
+export * from './icons/SvgIcon';
+export * from './icons/models/flip';
+export * from './icons/models/size';
+export * from './icons/models/theme-color';

package/dist/es/main.js

@@ -22,3 +22,9 @@ export * from './treeDataOperations';
 export * from './browser-support.service';
 export * from './scrollbarWidth';
 export * from './hasRelativeStackingContext';
+export * from './icons/Icon';
+export * from './icons/FontIcon';
+export * from './icons/SvgIcon';
+export * from './icons/models/flip';
+export * from './icons/models/size';
+export * from './icons/models/theme-color';

package/dist/esm/icons/BaseIconProps.d.ts

@@ -0,0 +1,74 @@
+import { IconThemeColor } from './models/theme-color';
+import { IconSize } from './models/size';
+import { IconFlip } from './models/flip';
+/**
+ * @hidden
+ */
+export interface BaseIconProps {
+    /**
+     * Sets the `tabIndex` of the icon element.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `id` of the icon element.
+     */
+    id?: string;
+    /**
+     * Sets the `aria-label` of the icon element.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the `title` of the icon element.
+     */
+    title?: string;
+    /**
+     * Specifies a list of CSS classes that will be added to the root DOM element.
+     */
+    class?: string;
+    /**
+     * Specifies the theme color of the Icon.
+     *
+     * The possible values are:
+     * * `inherit` (Default)—Applies coloring based on the current color.
+     * * `primary` —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.
+     *
+     * If the property is not set, the icon inherits the color from its parent.
+     *
+     * You can use the `style` prop to apply custom color related properties to the icon.
+     */
+    themeColor?: IconThemeColor | string;
+    /**
+     * Specifies the size of the icon.
+     *
+     * The possible values are:
+     * * `default` (Default)—Font-size: 16px; Width: 16px; Height: 16px.
+     * * `xsmall`—Font-size: 8px; Width: 8px; Height: 8px.
+     * * `small`—Font-size: 12px; Width: 12px; Height: 12px.
+     * * `medium`—Font-size: 32px; Width: 32px; Height: 32px.
+     * * `large`—Font-size: 48px; Width: 48px; Height: 48px.
+     * * `xlarge`—Font-size: 64px; Width: 64px; Height: 64px.
+     *
+     * You can use the `style` prop to apply custom font size to the icon.
+     */
+    size?: IconSize | string;
+    /**
+     * Specifies the icon flip direction.
+     *
+     * The possible values are:
+     * * `default` (Default)—No flipping applied.
+     * * `horizontal`—Flips the icon in horizontal direction.
+     * * `vertical`—Flips the icon in vertical direction.
+     * * `both`—Flips the icon in both horizontal and vertical directions.
+     *
+     */
+    flip?: IconFlip | string;
+}

package/dist/esm/icons/BaseIconProps.js

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

package/dist/esm/icons/FontIcon.d.ts

@@ -0,0 +1,51 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { BaseIconProps } from './BaseIconProps';
+/**
+ * Represents the props of the [Kendo UI for Vue Icon component]({% slug overview_icon %}).
+ */
+export interface FontIconProps extends BaseIconProps {
+    /**
+     * Represents the name of the icon.
+     */
+    name?: string;
+}
+/**
+ * @hidden
+ */
+export interface FontIconState {
+}
+/**
+ * @hidden
+ */
+export interface FontIconComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface FontIconMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface FontIconData {
+}
+/**
+ * @hidden
+ */
+export interface FontIconAll extends Vue2type, FontIconMethods, FontIconData, FontIconComputed, FontIconState {
+}
+/**
+ * @hidden
+ */
+declare let FontIconVue2: ComponentOptions<FontIconAll, DefaultData<FontIconData>, DefaultMethods<FontIconAll>, FontIconComputed, RecordPropsDefinition<FontIconProps>>;
+/**
+ * @hidden
+ */
+declare const FontIcon: DefineComponent<FontIconProps, any, FontIconData, FontIconComputed, FontIconMethods, {}, {}, {}, string, FontIconProps, FontIconProps, {}>;
+export { FontIcon, FontIconVue2 };

package/dist/esm/icons/FontIcon.js

@@ -0,0 +1,90 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { SIZE_CLASSES } from './constants.js';
+/**
+ * @hidden
+ */
+var FontIconVue2 = {
+  name: 'KendoFontIcon',
+  // @ts-ignore
+  emits: {
+    click: null
+  },
+  props: {
+    name: String,
+    themeColor: {
+      type: String
+    },
+    size: {
+      type: String
+    },
+    flip: {
+      type: String
+    },
+    id: String,
+    ariaLabel: String,
+    title: String,
+    tabIndex: Number
+  },
+  computed: {
+    fontClassNames: function fontClassNames() {
+      var _a;
+      var _b = this.$props,
+        name = _b.name,
+        flip = _b.flip,
+        size = _b.size,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-icon': true
+      }, _a['k-i-' + name] = name, _a['k-color-' + themeColor] = themeColor, _a['k-flip-h'] = flip === 'horizontal' || flip === 'both', _a['k-flip-v'] = flip === 'vertical' || flip === 'both', _a[SIZE_CLASSES[size]] = size, _a;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      id = _a.id,
+      title = _a.title,
+      tabIndex = _a.tabIndex,
+      ariaLabel = _a.ariaLabel;
+    return h("span", {
+      "class": this.fontClassNames,
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id,
+        title: title,
+        "aria-label": ariaLabel,
+        tabIndex: tabIndex,
+        role: "presentation"
+      },
+      title: title,
+      "aria-label": ariaLabel,
+      tabIndex: tabIndex,
+      role: "presentation",
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick
+      }
+    });
+  },
+  methods: {
+    handleClick: function handleClick(e) {
+      this.$emit('click', e);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var FontIcon = FontIconVue2;
+export { FontIcon, FontIconVue2 };

package/dist/esm/icons/Icon.d.ts

@@ -0,0 +1,49 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { SvgIconProps } from './SvgIcon';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface IconProps extends SvgIconProps {
+    iconType?: string;
+    name?: string;
+}
+/**
+ * @hidden
+ */
+export interface IconState {
+}
+/**
+ * @hidden
+ */
+export interface IconComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface IconMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface IconData {
+}
+/**
+ * @hidden
+ */
+export interface IconAll extends Vue2type, IconMethods, IconData, IconComputed, IconState {
+}
+/**
+ * @hidden
+ */
+declare let IconVue2: ComponentOptions<IconAll, DefaultData<IconData>, DefaultMethods<IconAll>, IconComputed, RecordPropsDefinition<IconProps>>;
+/**
+ * @hidden
+ */
+declare const Icon: DefineComponent<IconProps, any, IconData, IconComputed, IconMethods, {}, {}, {}, string, IconProps, IconProps, {}>;
+export { Icon, IconVue2 };

package/dist/esm/icons/Icon.js

@@ -0,0 +1,125 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { FontIcon } from './FontIcon.js';
+import { SvgIcon } from './SvgIcon.js';
+/**
+ * @hidden
+ */
+var IconVue2 = {
+  name: 'KendoIcon',
+  // @ts-ignore
+  emits: {
+    click: null
+  },
+  inject: {
+    kendoIcons: {
+      default: {
+        type: 'font',
+        icons: {}
+      }
+    }
+  },
+  props: {
+    name: String,
+    icon: Object,
+    title: String,
+    themeColor: {
+      type: String
+    },
+    size: {
+      type: String
+    },
+    flip: {
+      type: String
+    },
+    id: String,
+    ariaLabel: String,
+    viewBox: {
+      type: String,
+      default: '0 0 24 24'
+    },
+    tabIndex: Number
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      name = _a.name,
+      icon = _a.icon,
+      themeColor = _a.themeColor,
+      size = _a.size,
+      flip = _a.flip,
+      id = _a.id,
+      viewBox = _a.viewBox,
+      tabIndex = _a.tabIndex,
+      title = _a.title,
+      ariaLabel = _a.ariaLabel;
+    var svg = icon || name && this.kendoIcons.icons[name];
+    var renderSVG = this.kendoIcons.type === 'svg' && svg !== undefined;
+    var resolvedName = name || (icon && icon.name ? icon.name : undefined);
+    var commonProps = {
+      themeColor: themeColor,
+      size: size,
+      flip: flip,
+      id: id,
+      tabIndex: tabIndex,
+      title: title,
+      ariaLabel: ariaLabel
+    };
+    var fontIcon = h(FontIcon, __assign(__assign({}, commonProps), {
+      name: resolvedName,
+      attrs: this.v3 ? undefined : __assign(__assign({}, commonProps), {
+        name: resolvedName
+      }),
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        'click': this.handleClick
+      }
+    }));
+    var svgIcon = h(SvgIcon, __assign(__assign({}, commonProps), {
+      icon: icon,
+      viewBox: viewBox,
+      attrs: this.v3 ? undefined : __assign(__assign({}, commonProps), {
+        icon: icon,
+        viewBox: viewBox
+      }),
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        'click': this.handleClick
+      }
+    }));
+    return renderSVG ? svgIcon : fontIcon;
+  },
+  methods: {
+    handleClick: function handleClick(e) {
+      this.$emit('click', e);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var Icon = IconVue2;
+export { Icon, IconVue2 };