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

package/dist/npm/icons/Icon.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var __assign = undefined && undefined.__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);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconVue2 = exports.Icon = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var FontIcon_1 = require("./FontIcon");
+var SvgIcon_1 = require("./SvgIcon");
+/**
+ * @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_1.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_1.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);
+    }
+  }
+};
+exports.IconVue2 = IconVue2;
+/**
+ * @hidden
+ */
+var Icon = IconVue2;
+exports.Icon = Icon;

package/dist/npm/icons/SvgIcon.d.ts

@@ -0,0 +1,95 @@
+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';
+/**
+ * Specifies the SVG icon.
+ */
+export interface SVGIcon {
+    /**
+     * The unique name of the icon.
+     */
+    name: string;
+    /**
+     * The entire SVG content of the icon.
+     */
+    content: string;
+    /**
+     * The [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)
+     * definition that should be used for the icon.
+     */
+    viewBox: string;
+}
+/**
+ * @hidden
+ */
+export interface SvgIconHandle {
+    /**
+     * The SvgIconHandle element.
+     */
+    element: HTMLSpanElement | null;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue SvgIcon component]({% slug overview_svgicon %}).
+ */
+export interface SvgIconProps extends BaseIconProps {
+    /**
+     * Specifies the SVG icon.
+     *
+     * * The possible keys are:
+     * * `name`&mdash;The unique name of the icon.
+     * * `content`&mdash;The entire SVG content of the icon.
+     * * `viewBox`&mdash;The viewBox definition that should be used for the icon.
+     */
+    icon?: SVGIcon;
+    /**
+     * Specifies the viewBox of the custom SVG icon.
+     */
+    viewBox?: string;
+    /**
+     * Specifies a list of CSS classes that will be added to the svg element.
+     */
+    svgClassName?: string;
+    /**
+     * Sets additional CSS styles to the svg element.
+     */
+    svgStyle?: object;
+}
+/**
+ * @hidden
+ */
+export interface SvgIconState {
+}
+/**
+ * @hidden
+ */
+export interface SvgIconComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SvgIconMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SvgIconData {
+}
+/**
+ * @hidden
+ */
+export interface SvgIconAll extends Vue2type, SvgIconMethods, SvgIconData, SvgIconComputed, SvgIconState {
+}
+/**
+ * @hidden
+ */
+declare let SvgIconVue2: ComponentOptions<SvgIconAll, DefaultData<SvgIconData>, DefaultMethods<SvgIconAll>, SvgIconComputed, RecordPropsDefinition<SvgIconProps>>;
+/**
+ * @hidden
+ */
+declare const SvgIcon: DefineComponent<SvgIconProps, any, SvgIconData, SvgIconComputed, SvgIconMethods, {}, {}, {}, string, SvgIconProps, SvgIconProps, {}>;
+export { SvgIcon, SvgIconVue2 };

package/dist/npm/icons/SvgIcon.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var __assign = undefined && undefined.__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);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SvgIconVue2 = exports.SvgIcon = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var constants_1 = require("./constants");
+var defaultSlots_1 = require("../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[constants_1.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 = (0, defaultSlots_1.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);
+    }
+  }
+};
+exports.SvgIconVue2 = SvgIconVue2;
+/**
+ * @hidden
+ */
+var SvgIcon = SvgIconVue2;
+exports.SvgIcon = SvgIcon;

package/dist/npm/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/npm/icons/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIZE_CLASSES = void 0;
+/**
+ * @hidden
+ */
+exports.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/npm/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/npm/icons/models/flip.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/icons/models/size.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/icons/models/theme-color.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/main.js

@@ -69,3 +69,9 @@ __exportStar(require("./treeDataOperations"), exports);
 __exportStar(require("./browser-support.service"), exports);
 __exportStar(require("./scrollbarWidth"), exports);
 __exportStar(require("./hasRelativeStackingContext"), exports);
+__exportStar(require("./icons/Icon"), exports);
+__exportStar(require("./icons/FontIcon"), exports);
+__exportStar(require("./icons/SvgIcon"), exports);
+__exportStar(require("./icons/models/flip"), exports);
+__exportStar(require("./icons/models/size"), exports);
+__exportStar(require("./icons/models/theme-color"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-common",
   "description": "Kendo UI for Vue Common Utilities package",
-  "version": "3.7.4-dev.202212020747",
+  "version": "3.7.4-dev.202301091431",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -32,14 +32,16 @@
     "framework": "Kendo UI for Vue"
   },
   "peerDependencies": {
-    "@progress/kendo-licensing": "^1.1.0",
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0",
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
     "@progress/kendo-draggable": "^3.0.1"
   },
   "devDependencies": {
-    "@progress/kendo-licensing": "^1.1.0"
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",