@progress/kendo-charts 1.29.0 → 1.30.0-dev.202307190651

package/dist/es/common/is-plain-object.js

@@ -0,0 +1,3 @@
+export default function isPlainObject(value) {
+    return Object.prototype.toString.call(value) === "[object Object]";
+}

package/dist/es/common/render-icon.js

@@ -0,0 +1,166 @@
+import isObject from './is-object';
+import isPlainObject from './is-plain-object';
+import isString from './is-string';
+import deepExtend from './deep-extend';
+import setDefaultOptions from './set-default-options';
+import addClass from './add-class';
+import removeClass from './remove-class';
+
+var KICON = 'k-icon';
+var KI_PREFFIX = 'k-i-';
+var KSVGICON = 'k-svg-icon';
+var KSVG_PREFFIX = 'k-svg-i-';
+
+var HTMLBaseIcon = function HTMLBaseIcon(element, options) {
+    this.element = element;
+    this.options = deepExtend({}, this.options, options);
+
+    this.wrapper();
+};
+
+HTMLBaseIcon.prototype.wrapper = function wrapper () {
+    this.addClasses();
+};
+
+HTMLBaseIcon.prototype.addClasses = function addClasses () {
+};
+
+HTMLBaseIcon.prototype.html = function html () {
+    return this.element.outerHTML;
+};
+
+setDefaultOptions(HTMLBaseIcon, {
+    name: '',
+    size: 'none',
+    themeColor: 'none',
+    flip: 'default',
+    iconClass: '',
+    stylingOptions: [ 'size', 'themeColor', 'fill' ]
+});
+
+var HTMLFontIcon = (function (HTMLBaseIcon) {
+    function HTMLFontIcon(element, options) {
+        HTMLBaseIcon.call(this, element, options);
+    }
+
+    if ( HTMLBaseIcon ) HTMLFontIcon.__proto__ = HTMLBaseIcon;
+    HTMLFontIcon.prototype = Object.create( HTMLBaseIcon && HTMLBaseIcon.prototype );
+    HTMLFontIcon.prototype.constructor = HTMLFontIcon;
+
+    HTMLFontIcon.prototype.wrapper = function wrapper () {
+            // Find if there is an existing k-i- class appended to the element.
+        var currentIconClass = this.element.className.split(" ").find(function (x) { return x.startsWith(KI_PREFFIX); });
+        var className = this.options.icon ? ("" + (this.options.icon.startsWith(KI_PREFFIX) ? "" : KI_PREFFIX) + (this.options.icon)) : "";
+
+        this._className = className;
+
+        addClass(this.element, KICON);
+        removeClass(this.element, currentIconClass); // Remove any existing icons.
+        addClass(this.element, className);
+        addClass(this.element, this.options.iconClass || '');
+
+        HTMLBaseIcon.prototype.wrapper.call(this);
+    };
+
+    return HTMLFontIcon;
+}(HTMLBaseIcon));
+
+setDefaultOptions(HTMLFontIcon, {
+    name: 'HTMLFontIcon',
+    icon: null
+});
+
+var HTMLSvgIcon = (function (HTMLBaseIcon) {
+    function HTMLSvgIcon(element, options) {
+        // Ensure that the inner contents of the wrapping span element are always removed for re-rendering purposes.
+        element.innerHTML = "";
+
+        HTMLBaseIcon.call(this, element, options);
+    }
+
+    if ( HTMLBaseIcon ) HTMLSvgIcon.__proto__ = HTMLBaseIcon;
+    HTMLSvgIcon.prototype = Object.create( HTMLBaseIcon && HTMLBaseIcon.prototype );
+    HTMLSvgIcon.prototype.constructor = HTMLSvgIcon;
+
+    HTMLSvgIcon.prototype.wrapper = function wrapper () {
+        var icon = this.options.icon;
+        var iconClass = this.options.iconClass;
+        var currentIconClass = this.element.className.split(" ").find(function (x) { return x.startsWith(KSVG_PREFFIX); });
+
+        if (!icon && iconClass) {
+            // match k-i-(some-icon-name)
+            var regex = /k-i-(\w+(?:-\w+)*)/;
+            var iconNameMatch = iconClass.match(regex);
+            if (iconNameMatch) {
+                icon = iconNameMatch[1];
+                iconClass = iconClass.replace(iconNameMatch[0], "");
+            }
+        }
+
+        if (isString(icon)) {
+            icon = icon.replace("k-i-", "").replace(/-./g, function (x) { return x[1].toUpperCase(); });
+            icon = this.options.svgIcons[icon] || this.options.svgIcons[(icon + "Icon")];
+        }
+
+        var className = icon && icon.name ? ("" + KSVG_PREFFIX + (icon.name)) : "";
+        this._className = className;
+
+        addClass(this.element, KSVGICON);
+        removeClass(this.element, currentIconClass);
+        addClass(this.element, className);
+        addClass(this.element, iconClass || "");
+        this.element.setAttribute("aria-hidden", "true");
+
+        if (icon && isPlainObject(icon)) {
+            var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgElement.setAttribute("viewBox", icon.viewBox || "");
+            svgElement.setAttribute("focusable", "false");
+            svgElement.innerHTML = icon.content || "";
+
+            this.element.appendChild(svgElement);
+        }
+
+        HTMLBaseIcon.prototype.wrapper.call(this);
+    };
+
+    return HTMLSvgIcon;
+}(HTMLBaseIcon));
+
+setDefaultOptions(HTMLSvgIcon, {
+    name: 'HTMLSvgIcon',
+    icon: null,
+    svgIcons: {}
+});
+
+var ICON_TYPES = {
+    'svg': HTMLSvgIcon,
+    'font': HTMLFontIcon
+};
+
+export default function renderIcon(iconElement, iconOptions) {
+    var element = iconElement;
+    var options = iconOptions;
+
+    if (!element
+        || (isObject(element) && !(element instanceof HTMLElement))
+        || isString(element)) {
+        options = element;
+        element = document.createElement("span");
+    }
+
+    if (isString(options)) {
+        options = {
+            icon: options
+        };
+    }
+
+    if (!options.type) {
+        options.type = 'svg';
+    }
+
+    if (!ICON_TYPES[options.type]) {
+        return null;
+    }
+
+    return (new ICON_TYPES[options.type](element, options).html());
+}

package/dist/es/common.js

@@ -18,10 +18,12 @@ export { default as isArray } from './common/is-array';
 export { default as isFunction } from './common/is-function';
 export { default as isNumber } from './common/is-number';
 export { default as isObject } from './common/is-object';
+export { default as isPlainObject } from './common/is-plain-object';
 export { default as isString } from './common/is-string';
 export { default as map } from './common/map';
 export { default as mousewheelDelta } from './common/mousewheel-delta';
 export { default as FontLoader } from './common/font-loader';
+export { default as renderIcon } from './common/render-icon';
 export { default as setDefaultOptions } from './common/set-default-options';
 export { default as sparseArrayLimits } from './common/sparse-array-limits';
 export { default as styleValue } from './common/style-value';

package/dist/es/map/layers/marker.js

@@ -4,7 +4,8 @@ import {
     isArray,
     getter,
     deepExtend,
-    setDefaultOptions
+    setDefaultOptions,
+    renderIcon
 } from '../../common';
 
 import { Layer } from './layer';
@@ -285,8 +286,23 @@ export var Marker = (function (Class) {
                 var templateHtml = templateFn(this.dataItem);
                 var templateElement = convertToHtml(templateHtml);
                 element.appendChild(templateElement);
+            } else if (options.svgIcon) {
+                renderIcon(element, { icon: options.svgIcon, iconClass: "k-icon-xxl", svgIcons: this.options.icons.svgIcons, type: "svg" });
             } else {
-                addClass(element, 'k-icon k-icon-xxl k-i-marker-' + toHyphens(options.shape || 'pin'));
+                var iconOptions = { icon: "map-marker", iconClass: "k-icon-xxl", svgIcons: this.options.icons.svgIcons, type: this.options.icons.type };
+
+                if (options.shape) {
+                    if (options.shape === "pinTarget") {
+                        iconOptions.icon = "map-marker-target";
+                        renderIcon(element, iconOptions);
+                    } else if (options.shape === "pin") {
+                        renderIcon(element, iconOptions);
+                    } else {
+                        addClass(element, 'k-icon k-icon-xxl k-i-marker-' + toHyphens(options.shape || 'pin'));
+                    }
+                } else {
+                    renderIcon(element, iconOptions);
+                }
             }
 
             if (options.title) {

package/dist/es/map/map.js

@@ -553,7 +553,7 @@ var Map = (function (Observable) {
 
     Map.prototype._createNavigator = function _createNavigator (options) {
         var element = this._createControlElement(options, 'topLeft');
-        var navigator = this.navigator = new Navigator(element, options);
+        var navigator = this.navigator = new Navigator(element, deepExtend({}, options, { icons: this.options.icons }));
 
         this._navigatorPan = this._navigatorPan.bind(this);
         navigator.bind('pan', this._navigatorPan);
@@ -585,7 +585,7 @@ var Map = (function (Observable) {
 
     Map.prototype._createZoomControl = function _createZoomControl (options) {
         var element = this._createControlElement(options, 'topLeft');
-        var zoomControl = this.zoomControl = new ZoomControl(element, options);
+        var zoomControl = this.zoomControl = new ZoomControl(element, options, this.options.icons);
 
         this._zoomControlChange = this._zoomControlChange.bind(this);
         zoomControl.bind('change', this._zoomControlChange);
@@ -641,7 +641,7 @@ var Map = (function (Observable) {
         var type = options.type || 'shape';
         var layerDefaults = this.options.layerDefaults[type];
         var layerOptions = type === MARKER ?
-            deepExtend({}, this.options.markerDefaults, options) :
+            deepExtend({}, this.options.markerDefaults, options, { icons: this.options.icons }) :
             deepExtend({}, layerDefaults, options);
 
         var layerConstructor = layersMap[type];
@@ -670,7 +670,7 @@ var Map = (function (Observable) {
             return;
         }
 
-        this.markers = new MarkerLayer(this, this.options.markerDefaults);
+        this.markers = new MarkerLayer(this, deepExtend({}, this.options.markerDefaults, { icons: this.options.icons }));
         this.markers.add(this.options.markers);
     };
     /* eslint-enable arrow-body-style */
@@ -935,6 +935,10 @@ setDefaultOptions(Map, {
         0,
         0
     ],
+    icons: {
+        type: "font",
+        svgIcons: {}
+    },
     zoom: 3,
     minSize: 256,
     minZoom: 1,

package/dist/es/map/navigator.js

@@ -2,7 +2,8 @@ import {
     deepExtend,
     addClass,
     keys,
-    setDefaultOptions
+    setDefaultOptions,
+    renderIcon
 } from '../common';
 
 import {
@@ -38,12 +39,12 @@ var directionsMap = {
     }
 };
 
-function createButton(direction) {
+function createButton(direction, iconOptions) {
     var html =
         '<button class="k-button k-button-square k-rounded-full k-button-flat k-button-flat-base k-icon-button ' +
             directionsMap[direction].className +
             '" aria-label="move ' + direction + '">' +
-            '<span class="k-icon ' + directionsMap[direction].iconClass + '" />' +
+            renderIcon({ icon: ("caret-alt-" + direction), iconClass: "k-button-icon", svgIcons: iconOptions.svgIcons, type: iconOptions.type }) +
         '</button>';
 
     return convertToHtml(html);
@@ -56,10 +57,10 @@ export var Navigator = (function (Observable) {
         this.element = element;
         this._initOptions(options);
 
-        var navigateUpButton = createButton("up");
-        var navigateRightlButton = createButton("right");
-        var navigateDownButton = createButton("down");
-        var navigateLeftButton = createButton("left");
+        var navigateUpButton = createButton("up", options.icons);
+        var navigateRightlButton = createButton("right", options.icons);
+        var navigateDownButton = createButton("down", options.icons);
+        var navigateLeftButton = createButton("left", options.icons);
 
         this.element.appendChild(navigateUpButton);
         this.element.appendChild(navigateRightlButton);

package/dist/es/map/zoom.js

@@ -3,7 +3,8 @@ import {
     addClass,
     keys,
     hasClasses,
-    setDefaultOptions
+    setDefaultOptions,
+    renderIcon
 } from '../common';
 
 import {
@@ -17,12 +18,12 @@ import {
     convertToHtml
 } from './utils';
 
-function createButton(direction, iconClass) {
+function createButton(direction, icon, iconOptions) {
     var html =
         '<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button k-zoom-' + direction +
             '" title="zoom-' + direction +
             '" aria-label="zoom-' + direction + '">' +
-            '<span class="k-icon ' + iconClass + '">' + '</span>' +
+            renderIcon({ icon: icon, iconClass: "k-button-icon", svgIcons: iconOptions.svgIcons, type: iconOptions.type }) +
         '</button>';
 
     return convertToHtml(html);
@@ -35,13 +36,13 @@ var FF_MINUS = 173;
 var CHANGE = "change";
 
 export var ZoomControl = (function (Observable) {
-    function ZoomControl(element, options) {
+    function ZoomControl(element, options, iconOptions) {
         Observable.call(this);
         this.element = element;
         this._initOptions(options);
 
-        var zoomInButton = createButton('in', 'k-i-plus');
-        var zoomOutButton = createButton('out', 'k-i-minus');
+        var zoomInButton = createButton('in', 'plus', iconOptions);
+        var zoomOutButton = createButton('out', 'minus', iconOptions);
 
         this.element.appendChild(zoomInButton);
         this.element.appendChild(zoomOutButton);

package/dist/es2015/common/is-plain-object.js

@@ -0,0 +1,3 @@
+export default function isPlainObject(value) {
+    return Object.prototype.toString.call(value) === "[object Object]";
+}

package/dist/es2015/common/render-icon.js

@@ -0,0 +1,156 @@
+import isObject from './is-object';
+import isPlainObject from './is-plain-object';
+import isString from './is-string';
+import deepExtend from './deep-extend';
+import setDefaultOptions from './set-default-options';
+import addClass from './add-class';
+import removeClass from './remove-class';
+
+const KICON = 'k-icon';
+const KI_PREFFIX = 'k-i-';
+const KSVGICON = 'k-svg-icon';
+const KSVG_PREFFIX = 'k-svg-i-';
+
+class HTMLBaseIcon {
+    constructor(element, options) {
+        this.element = element;
+        this.options = deepExtend({}, this.options, options);
+
+        this.wrapper();
+    }
+
+    wrapper() {
+        this.addClasses();
+    }
+
+    addClasses() {
+    }
+
+    html() {
+        return this.element.outerHTML;
+    }
+}
+
+setDefaultOptions(HTMLBaseIcon, {
+    name: '',
+    size: 'none',
+    themeColor: 'none',
+    flip: 'default',
+    iconClass: '',
+    stylingOptions: [ 'size', 'themeColor', 'fill' ]
+});
+
+class HTMLFontIcon extends HTMLBaseIcon {
+    constructor(element, options) {
+        super(element, options);
+    }
+
+    wrapper() {
+            // Find if there is an existing k-i- class appended to the element.
+        let currentIconClass = this.element.className.split(" ").find(x => x.startsWith(KI_PREFFIX));
+        let className = this.options.icon ? `${this.options.icon.startsWith(KI_PREFFIX) ? "" : KI_PREFFIX}${this.options.icon}` : "";
+
+        this._className = className;
+
+        addClass(this.element, KICON);
+        removeClass(this.element, currentIconClass); // Remove any existing icons.
+        addClass(this.element, className);
+        addClass(this.element, this.options.iconClass || '');
+
+        super.wrapper();
+    }
+}
+
+setDefaultOptions(HTMLFontIcon, {
+    name: 'HTMLFontIcon',
+    icon: null
+});
+
+class HTMLSvgIcon extends HTMLBaseIcon {
+    constructor(element, options) {
+        // Ensure that the inner contents of the wrapping span element are always removed for re-rendering purposes.
+        element.innerHTML = "";
+
+        super(element, options);
+    }
+
+    wrapper() {
+        let icon = this.options.icon;
+        let iconClass = this.options.iconClass;
+        let currentIconClass = this.element.className.split(" ").find(x => x.startsWith(KSVG_PREFFIX));
+
+        if (!icon && iconClass) {
+            // match k-i-(some-icon-name)
+            const regex = /k-i-(\w+(?:-\w+)*)/;
+            let iconNameMatch = iconClass.match(regex);
+            if (iconNameMatch) {
+                icon = iconNameMatch[1];
+                iconClass = iconClass.replace(iconNameMatch[0], "");
+            }
+        }
+
+        if (isString(icon)) {
+            icon = icon.replace("k-i-", "").replace(/-./g, x => x[1].toUpperCase());
+            icon = this.options.svgIcons[icon] || this.options.svgIcons[`${icon}Icon`];
+        }
+
+        let className = icon && icon.name ? `${KSVG_PREFFIX}${icon.name}` : "";
+        this._className = className;
+
+        addClass(this.element, KSVGICON);
+        removeClass(this.element, currentIconClass);
+        addClass(this.element, className);
+        addClass(this.element, iconClass || "");
+        this.element.setAttribute("aria-hidden", "true");
+
+        if (icon && isPlainObject(icon)) {
+            let svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgElement.setAttribute("viewBox", icon.viewBox || "");
+            svgElement.setAttribute("focusable", "false");
+            svgElement.innerHTML = icon.content || "";
+
+            this.element.appendChild(svgElement);
+        }
+
+        super.wrapper();
+    }
+}
+
+setDefaultOptions(HTMLSvgIcon, {
+    name: 'HTMLSvgIcon',
+    icon: null,
+    svgIcons: {}
+});
+
+const ICON_TYPES = {
+    'svg': HTMLSvgIcon,
+    'font': HTMLFontIcon
+};
+
+export default function renderIcon(iconElement, iconOptions) {
+    let element = iconElement;
+    let options = iconOptions;
+
+    if (!element
+        || (isObject(element) && !(element instanceof HTMLElement))
+        || isString(element)) {
+        options = element;
+        element = document.createElement("span");
+    }
+
+    if (isString(options)) {
+        options = {
+            icon: options
+        };
+    }
+
+    if (!options.type) {
+        options.type = 'svg';
+    }
+
+    if (!ICON_TYPES[options.type]) {
+        return null;
+    }
+
+    return (new ICON_TYPES[options.type](element, options).html());
+}

package/dist/es2015/common.js

@@ -18,10 +18,12 @@ export { default as isArray } from './common/is-array';
 export { default as isFunction } from './common/is-function';
 export { default as isNumber } from './common/is-number';
 export { default as isObject } from './common/is-object';
+export { default as isPlainObject } from './common/is-plain-object';
 export { default as isString } from './common/is-string';
 export { default as map } from './common/map';
 export { default as mousewheelDelta } from './common/mousewheel-delta';
 export { default as FontLoader } from './common/font-loader';
+export { default as renderIcon } from './common/render-icon';
 export { default as setDefaultOptions } from './common/set-default-options';
 export { default as sparseArrayLimits } from './common/sparse-array-limits';
 export { default as styleValue } from './common/style-value';

package/dist/es2015/map/layers/marker.js

@@ -4,7 +4,8 @@ import {
     isArray,
     getter,
     deepExtend,
-    setDefaultOptions
+    setDefaultOptions,
+    renderIcon
 } from '../../common';
 
 import { Layer } from './layer';
@@ -267,8 +268,23 @@ export class Marker extends Class {
                 const templateHtml = templateFn(this.dataItem);
                 const templateElement = convertToHtml(templateHtml);
                 element.appendChild(templateElement);
+            } else if (options.svgIcon) {
+                renderIcon(element, { icon: options.svgIcon, iconClass: "k-icon-xxl", svgIcons: this.options.icons.svgIcons, type: "svg" });
             } else {
-                addClass(element, 'k-icon k-icon-xxl k-i-marker-' + toHyphens(options.shape || 'pin'));
+                let iconOptions = { icon: "map-marker", iconClass: "k-icon-xxl", svgIcons: this.options.icons.svgIcons, type: this.options.icons.type };
+
+                if (options.shape) {
+                    if (options.shape === "pinTarget") {
+                        iconOptions.icon = "map-marker-target";
+                        renderIcon(element, iconOptions);
+                    } else if (options.shape === "pin") {
+                        renderIcon(element, iconOptions);
+                    } else {
+                        addClass(element, 'k-icon k-icon-xxl k-i-marker-' + toHyphens(options.shape || 'pin'));
+                    }
+                } else {
+                    renderIcon(element, iconOptions);
+                }
             }
 
             if (options.title) {

package/dist/es2015/map/map.js

@@ -527,7 +527,7 @@ class Map extends Observable {
 
     _createNavigator(options) {
         let element = this._createControlElement(options, 'topLeft');
-        let navigator = this.navigator = new Navigator(element, options);
+        let navigator = this.navigator = new Navigator(element, deepExtend({}, options, { icons: this.options.icons }));
 
         this._navigatorPan = this._navigatorPan.bind(this);
         navigator.bind('pan', this._navigatorPan);
@@ -559,7 +559,7 @@ class Map extends Observable {
 
     _createZoomControl(options) {
         let element = this._createControlElement(options, 'topLeft');
-        let zoomControl = this.zoomControl = new ZoomControl(element, options);
+        let zoomControl = this.zoomControl = new ZoomControl(element, options, this.options.icons);
 
         this._zoomControlChange = this._zoomControlChange.bind(this);
         zoomControl.bind('change', this._zoomControlChange);
@@ -613,7 +613,7 @@ class Map extends Observable {
         let type = options.type || 'shape';
         let layerDefaults = this.options.layerDefaults[type];
         let layerOptions = type === MARKER ?
-            deepExtend({}, this.options.markerDefaults, options) :
+            deepExtend({}, this.options.markerDefaults, options, { icons: this.options.icons }) :
             deepExtend({}, layerDefaults, options);
 
         let layerConstructor = layersMap[type];
@@ -642,7 +642,7 @@ class Map extends Observable {
             return;
         }
 
-        this.markers = new MarkerLayer(this, this.options.markerDefaults);
+        this.markers = new MarkerLayer(this, deepExtend({}, this.options.markerDefaults, { icons: this.options.icons }));
         this.markers.add(this.options.markers);
     }
     /* eslint-enable arrow-body-style */
@@ -905,6 +905,10 @@ setDefaultOptions(Map, {
         0,
         0
     ],
+    icons: {
+        type: "font",
+        svgIcons: {}
+    },
     zoom: 3,
     minSize: 256,
     minZoom: 1,

package/dist/es2015/map/navigator.js

@@ -2,7 +2,8 @@ import {
     deepExtend,
     addClass,
     keys,
-    setDefaultOptions
+    setDefaultOptions,
+    renderIcon
 } from '../common';
 
 import {
@@ -38,12 +39,12 @@ const directionsMap = {
     }
 };
 
-function createButton(direction) {
+function createButton(direction, iconOptions) {
     const html =
         '<button class="k-button k-button-square k-rounded-full k-button-flat k-button-flat-base k-icon-button ' +
             directionsMap[direction].className +
             '" aria-label="move ' + direction + '">' +
-            '<span class="k-icon ' + directionsMap[direction].iconClass + '" />' +
+            renderIcon({ icon: `caret-alt-${direction}`, iconClass: "k-button-icon", svgIcons: iconOptions.svgIcons, type: iconOptions.type }) +
         '</button>';
 
     return convertToHtml(html);
@@ -56,10 +57,10 @@ export class Navigator extends Observable {
         this.element = element;
         this._initOptions(options);
 
-        const navigateUpButton = createButton("up");
-        const navigateRightlButton = createButton("right");
-        const navigateDownButton = createButton("down");
-        const navigateLeftButton = createButton("left");
+        const navigateUpButton = createButton("up", options.icons);
+        const navigateRightlButton = createButton("right", options.icons);
+        const navigateDownButton = createButton("down", options.icons);
+        const navigateLeftButton = createButton("left", options.icons);
 
         this.element.appendChild(navigateUpButton);
         this.element.appendChild(navigateRightlButton);