@mescius/wijmo.grid.cellmaker 5.20232.939

package/index.d.ts

@@ -0,0 +1,403 @@
+/*!
+    *
+    * Wijmo Library 5.20232.939
+    * https://developer.mescius.com/wijmo
+    *
+    * Copyright(c) MESCIUS inc. All rights reserved.
+    *
+    * Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
+    * us.sales@mescius.com
+    * https://developer.mescius.com/wijmo/licensing
+    *
+    */
+/**
+ * {@module wijmo.grid.cellmaker}
+ * Contains a {@link CellMaker} class that provides methods for creating
+ * cells with custom content such as Buttons, Hyperlinks, Images,
+ * Ratings, and Sparklines.
+ *
+ * To use these methods, assign their result to a column's
+ * {@link Column.cellTemplate} property.
+ */
+/**
+ *
+ */
+export declare var ___keepComment: any;
+import { ICellTemplateFunction, ICellTemplateContext } from '@grapecity/wijmo.grid';
+/**
+ * Specifies parameters used to create cell elements.
+ */
+interface ICellMakerOptions {
+    /** Template string used to set the element's CSS class names. */
+    cssClass?: string;
+    /** Template string used to set the element's "aria-label" attribute. */
+    label?: string;
+    /** Object with attributes to apply to the cell content element. */
+    attributes?: object;
+    /** Function to be executed when the element is clicked. */
+    click?: ICellMakerClickHandler;
+}
+/**
+ * Defines a handler for click events on custom cell content.
+ */
+interface ICellMakerClickHandler {
+    /**
+     * @param e <b>MouseEvent</b> that contains information about the click event.
+     * @param ctx {@link ICellTemplateContext} that contains information about the
+     * custom cell that was clicked.
+     */
+    (e: MouseEvent, ctx: ICellTemplateContext): void;
+}
+/**
+ * Specifies parameters used to create cell buttons with the
+ * {@link CellMaker.makeButton} method.
+ */
+interface IButtonOptions extends ICellMakerOptions {
+    /** Template string used to set the element's display text. */
+    text?: string;
+}
+/**
+ * Specifies parameters used to create cell hyperlinks with the
+ * {@link CellMaker.makeLink} method.
+ */
+interface ILinkOptions extends IButtonOptions {
+    /** Template string used to set the link's <b>href</b> attribute. */
+    href?: string;
+}
+/**
+ * Specifies parameters used to create rating cells with the
+ * {@link CellMaker.makeRating} method.
+ */
+interface IRatingOptions extends ICellMakerOptions {
+    /**
+     * Range of the rating values, expressed as an array with two numbers
+     * (minimum and maximum ratings).
+     *
+     * The default value for this option is [0, 5].
+     */
+    range?: number[];
+    /**
+     * Whether to show symbols for zero ratings.
+     *
+     * The default value for this option is false, which causes the zero
+     * symbol not to be displayed. Users may still click the area to the
+     * left of the first symbol to give the cell a zero rating.
+     */
+    showZeros?: boolean;
+}
+/**
+ * Specifies constants that define Sparkline types.
+ */
+export declare enum SparklineType {
+    /** A mini line chart. */
+    Line = 0,
+    /** A mini column chart. */
+    Column = 1,
+    /** A mini column chart that shows only three values: positive, negative, and zero. */
+    WinLoss = 2
+}
+/**
+ * Specifies constants that define Sparkline markers.
+ */
+export declare enum SparklineMarkers {
+    /** No markers. */
+    None = 0,
+    /** Add marker to first point. */
+    First = 1,
+    /** Add marker to last point. */
+    Last = 2,
+    /** Add marker to highest-value points. */
+    High = 4,
+    /** Add marker to lowest-value points. */
+    Low = 8,
+    /** Add marker to negative-value points. */
+    Negative = 16
+}
+/**
+ * Specifies parameters used to create Sparkline cells with the
+ * {@link CellMaker.makeSparkline} method.
+ */
+interface ISparkLineOptions extends ICellMakerOptions {
+    /**
+     * Type of Sparkline to create.
+     *
+     * The default type is {@link SparklineType.Line}.
+     */
+    type?: SparklineType;
+    /**
+     * Markers to add to Sparkline points.
+     */
+    markers?: SparklineMarkers;
+    /**
+     * Base value (position of the Y-axis) on a sparkline.
+     *
+     * Setting this value to null causes the chart to calculate the base value
+     * automatically so the chart fills the vertical extent of the cell.
+     * This is a good option to highlight relative changes, and is used by
+     * default for Sparklines of type {@link SparklineType.Line}.
+     *
+     * Setting this value to an absolute number (like zero) is a better option
+     * to show absolute changes, and is used by default for Sparklines of type
+     * {@link SparklineType.Column}.
+     */
+    baseValue?: number;
+    /**
+     * Maximum number of points to use in the sparkline or sparkbar.
+     *
+     * Setting this value to null causes the cell to show all points.
+     */
+    maxPoints?: number;
+}
+interface _IScaledValues {
+    min: number;
+    max: number;
+    base: number;
+    points: number[];
+    data: number[];
+}
+/**
+ * Provides methods for creating cells with custom content such as
+ * Buttons, Hyperlinks, Images, Ratings, and Sparklines.
+ *
+ * To use these methods, assign their result to a column's
+ * {@link Column.cellTemplate} property.
+ */
+export declare class CellMaker {
+    static _WJC_CellMaker: string;
+    /**
+     * Creates a cell template with a button.
+     *
+     * By default, the button displays the cell's bound text in it.
+     * If you want to show a fixed string, set the <b>options.text</b>
+     * property to the string you want to show.
+     *
+     * For example, the code below defines a column with button elements.
+     * All buttons show the same text ('Click Me') and show an alert when
+     * clicked:
+     *
+     * ```typescript
+     * new FlexGrid('#theGrid', {
+     *     autoGenerateColumns: false,
+     *     columns: [
+     *         { binding: 'id', header: 'ID', isReadOnly: true },
+     *         {
+     *             binding: 'country',
+     *             header: 'My Buttons',
+     *             cellTemplate: CellMaker.makeButton({
+     *                 text: 'Click Me', // override bound text
+     *                 click: (e: MouseEvent, ctx: ICellTemplateContext) => {
+     *                     alert('Clicked Button ** ' + ctx.item.country + ' **')
+     *                 }
+     *             })
+     *         }
+     *     ]
+     * });
+     * ```
+     *
+     * To avoid disrupting the regular tab navigation, the button's
+     * **tabindex** attribute is set to -1 by default.
+     *
+     * If you want to include the buttons in the tab navigation,
+     * use the **attributes** option to set their **tabindex**
+     * attribute to zero. For example:
+     *
+     * ```typescript
+     * new FlexGrid('#theGrid', {
+     *     autoGenerateColumns: false,
+     *     columns: [
+     *         { binding: 'id', header: 'ID', isReadOnly: true },
+     *         {
+     *             binding: 'country',
+     *             header: 'My Buttons',
+     *             cellTemplate: CellMaker.makeButton({
+     *                 text: 'Click Me', // override bound text
+     *                 click: (e: MouseEvent, ctx: ICellTemplateContext) => {
+     *                     alert('Clicked Button ** ' + ctx.item.country + ' **')
+     *                 },
+     *                 attributes: {
+     *                     tabindex: 0 // make button a tab stop
+     *                 }
+     *             })
+     *         }
+     *     ]
+     * });
+     * ```
+     *
+     * For details on links and button elements, please visit
+     * https://css-tricks.com/a-complete-guide-to-links-and-buttons/.
+     *
+     * @param options {@link IButtonOptions} object containing parameters for the button.
+     * @returns An {@link ICellTemplateFunction} to be assigned to a column's {@link Column.cellTemplate} property.
+     */
+    static makeButton(options?: IButtonOptions): ICellTemplateFunction;
+    /**
+     * Creates a cell template with a hyperlink.
+     *
+     * By default, the link displays the cell's bound text in it.
+     * If you want to show a fixed string, set the <b>options.text</b>
+     * property to the string you want to show.
+     *
+     * For example, the code below defines a column with hyperlink elements.
+     * The links show some custom text and link to a url from the cell's
+     * data item:
+     *
+     * ```typescript
+     * new FlexGrid('#theGrid', {
+     *     autoGenerateColumns: false,
+     *     columns: [
+     *         { binding: 'id', header: 'ID', isReadOnly: true },
+     *         {
+     *             binding: 'country',
+     *             header: 'My Links',
+     *             cellTemplate: CellMaker.makeLink({
+     *                 text: 'Visit ${item.country}', // override bound text
+     *                 href: '${item.url}', // bound link destination
+     *                 attributes: {
+     *                     tabindex: 0 // make hyperlink a tab stop
+     *                 }
+     *             })
+     *         }
+     *     ]
+     * });
+     * ```
+     *
+     * To avoid disrupting the regular tab navigation, the hyperlink's
+     * **tabindex** attribute is set to -1 by default.
+     *
+     * If you want to include the hyperlinks in the tab navigation,
+     * use the **attributes** option to set their **tabindex**
+     * attribute to zero. For example:
+     *
+     * ```typescript
+     * new FlexGrid('#theGrid', {
+     *     autoGenerateColumns: false,
+     *     columns: [
+     *         { binding: 'id', header: 'ID', isReadOnly: true },
+     *         {
+     *             binding: 'country',
+     *             header: 'My Links',
+     *             cellTemplate: CellMaker.makeLink({
+     *                 text: 'Visit ${item.country}', // override bound text
+     *                 href: '${item.url}', // bound link destination
+     *                 // no need for click handler, the link navigates automatically
+     *             })
+     *         }
+     *     ]
+     * });
+     * ```
+     *
+     * For details on links and button elements, please visit
+     * https://css-tricks.com/a-complete-guide-to-links-and-buttons/.
+     *
+     * @param options {@link ILinkOptions} object containing parameters for the hyperlink.
+     * @returns An {@link ICellTemplateFunction} to be assigned to a column's {@link Column.cellTemplate} property.
+     */
+    static makeLink(options?: ILinkOptions): ICellTemplateFunction;
+    /**
+     * Creates a cell template with a sparkline.
+     *
+     * The cell should be bound to an array of numbers to be shown as a
+     * mini line chart.
+     *
+     * For example, the code below defines a column with sparklines
+     * showing the content of the 'history' array in the cell's data item.
+     * You may customize the appearance of the sparklines using CSS:
+     *
+     * ```typescript
+     * new FlexGrid('#theGrid', {
+     *     autoGenerateColumns: false,
+     *     columns: [
+     *         { binding: 'id', header: 'ID', isReadOnly: true },
+     *         {
+     *             binding: 'history',
+     *             header: 'History Sparklines',
+     *             width: 175,
+     *             cellTemplate: CellMaker.makeSparkline({
+     *                 markers: SparklineMarkers.High | SparklineMarkers.Low, // add markers
+     *                 maxPoints: 25, // limit number of points
+     *                 label: '${item.country} sales history line chart', // accessibility
+     *             })
+     *         }
+     *     ]
+     * });
+     * ```
+     * @param options {@link ISparkLineOptions} object containing parameters for the Sparkline.
+     * It should include the <b>label</b> property for accessibility.
+     * @returns An {@link ICellTemplateFunction} to be assigned to a column's {@link Column.cellTemplate} property.
+     */
+    static makeSparkline(options?: ISparkLineOptions): ICellTemplateFunction;
+    /**
+     * Creates a cell template with an image.
+     *
+     * The cell should be bound to a string containing an image URL.
+     *
+     * For example, the code below defines a column with images located
+     * at urls specified by the 'img' member of the data items:
+     *
+     * ```typescript
+     * new FlexGrid('#theGrid', {
+     *     autoGenerateColumns: false,
+     *     columns: [
+     *         { binding: 'id', header: 'ID', isReadOnly: true },
+     *         {
+     *             binding: 'img',
+     *             header: 'Images',
+     *             cssClass: 'cell-img',
+     *             cellTemplate: CellMaker.makeImage({
+     *                 label: 'image for ${item.country}', // accessibility
+     *                 click: (e, ctx) => alert('Clicked image for ' + ctx.item.country)
+     *             })
+     *         }
+     *     ]
+     * });
+     * ```
+     * @param options {@link ICellMakerOptions} object containing parameters for the image.
+     * It should include the <b>label</b> property for accessibility.
+     * @returns An {@link ICellTemplateFunction} to be assigned to a column's {@link Column.cellTemplate} property.
+     */
+    static makeImage(options?: ICellMakerOptions): ICellTemplateFunction;
+    /**
+     * Creates a cell template to show and edit a rating value.
+     *
+     * The cell should be bound to a string containing a number that
+     * represents a rating.
+     *
+     * By default, cells show ratings as stars. You may customize
+     * the appearance of rating cells using CSS.
+     *
+     * For example, the code below defines a column with stars that
+     * show the 'rating' member of the data items.
+     * Since the column is not read-only, users may edit the ratings
+     * using the keyboard or the mouse:
+     *
+     * ```typescript
+     * new FlexGrid('#theGrid', {
+     *     autoGenerateColumns: false,
+     *     columns: [
+     *         { binding: 'id', header: 'ID', isReadOnly: true },
+     *         {
+     *             binding: 'rating',
+     *             header: 'Rating (editable)',
+     *             width: 220,
+     *             align: 'center',
+     *             cellTemplate: CellMaker.makeRating({
+     *                 range: [0, 5], // rating values between 0 and 5
+     *                 label: 'Edit Product Rating'
+     *             })
+     *        }
+     *     ]
+     * });
+     * ```
+     * @param options {@link IRatingOptions} object containing parameters for the rating cell.
+     * @returns An {@link ICellTemplateFunction} to be assigned to a column's {@link Column.cellTemplate} property.
+     */
+    static makeRating(options?: IRatingOptions): ICellTemplateFunction;
+    static _getOptionText(options: any, option: string, ctx: ICellTemplateContext, defVal?: string): string;
+    static _createElement(cell: HTMLElement, html: string, options: ICellMakerOptions, ctx: ICellTemplateContext): HTMLElement;
+    static _cloneContext(ctx: ICellTemplateContext): ICellTemplateContext;
+    static _handleClick(e: MouseEvent): void;
+    static _getSparkline(data: number[], options: ISparkLineOptions): string;
+    static _scaleValues(data: number[], baseVal: number, maxPoints: number): _IScaledValues;
+    static _getMarkers(markers: SparklineMarkers, values: _IScaledValues, index: number): string;
+}
+export {};

package/index.js

@@ -0,0 +1,14 @@
+/*!
+    *
+    * Wijmo Library 5.20232.939
+    * https://developer.mescius.com/wijmo
+    *
+    * Copyright(c) MESCIUS inc. All rights reserved.
+    *
+    * Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
+    * us.sales@mescius.com
+    * https://developer.mescius.com/wijmo/licensing
+    *
+    */
+
+"use strict";var __importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.hasOwnProperty.call(e,t)&&(r[t]=e[t]);r.default=e;return r};Object.defineProperty(exports,"__esModule",{value:!0});var SparklineType,SparklineMarkers,wijmo_1=require("@mescius/wijmo"),wijmo_grid_1=require("@mescius/wijmo.grid"),selfModule=__importStar(require("@mescius/wijmo.grid.cellmaker"));!function(e){e[e.Line=0]="Line";e[e.Column=1]="Column";e[e.WinLoss=2]="WinLoss"}(SparklineType=exports.SparklineType||(exports.SparklineType={}));!function(e){e[e.None=0]="None";e[e.First=1]="First";e[e.Last=2]="Last";e[e.High=4]="High";e[e.Low=8]="Low";e[e.Negative=16]="Negative"}(SparklineMarkers=exports.SparklineMarkers||(exports.SparklineMarkers={}));var CellMaker=function(){function CellMaker(){}CellMaker.makeButton=function(e){return function(r,t){r.col.isReadOnly=!0;t.innerHTML="";var a=wijmo_1.format('<button type="button" tabindex="-1">{txt}</button>',{txt:CellMaker._getOptionText(e,"text",r,r.text)});CellMaker._createElement(t,a,e,r);return null}};CellMaker.makeLink=function(e){return function(r,t){r.col.isReadOnly=!0;t.innerHTML="";var a=wijmo_1.format('<a href="{href}" tabindex="-1">{txt}</a>',{txt:CellMaker._getOptionText(e,"text",r,r.text),href:CellMaker._getOptionText(e,"href",r,"#")});CellMaker._createElement(t,a,e,r);return null}};CellMaker.makeSparkline=function(e){return function(r,t){r.col.isReadOnly=!0;t.innerHTML="";var a=wijmo_1.format("<div><svg><g>{spark}</g></svg></div>",{spark:CellMaker._getSparkline(r.value,e)});CellMaker._createElement(t,a,e,r);return null}};CellMaker.makeImage=function(e){return function(r,t){r.col.isReadOnly=!0;t.innerHTML="";var a=wijmo_1.format('<img src="{src}"></div>',{src:CellMaker._getOptionText(e,"src",r,r.text)});CellMaker._createElement(t,a,e,r);return null}};CellMaker.makeRating=function(e){return function(r,t){var a=r.col,l=wijmo_grid_1.DataMapEditor,i=a.cssClass||"",n=CellMaker._WJC_CellMaker;if(!a.dataMap||a.dataMapEditor!=l.RadioButtons||i.indexOf(n)<0){for(var o=e?e.range:null,s=[],u=(o=o&&wijmo_1.isArray(o)&&o.length>1&&o[1]>o[0]?o:[0,5])[0];u<=o[1];u++)s.push(u);a.dataMap=new wijmo_grid_1.DataMap(s);a.dataMapEditor=l.RadioButtons;i.indexOf(n)<0&&(a.cssClass=(i+" "+n).trim())}if(e&&e.label){var c=CellMaker._getOptionText(e,"label",r);t.setAttribute("aria-label",c.trim())}var m=t.querySelectorAll("label"),k=!!e&&e.showZeros,M=null==t.querySelector("input:checked");for(u=0;u<m.length;u++){var _=(c=m[u]).querySelector("input");wijmo_1.toggleClass(c,"wj-chk-hidden","0"==_.value&&!k);wijmo_1.toggleClass(c,"wj-chk-off",M);M=M||null!=c.querySelector("input:checked")}return null}};CellMaker._getOptionText=function(e,r,t,a){void 0===a&&(a="");var l=e?e[r]:"";return l?wijmo_1.evalTemplate(l,t):a};CellMaker._createElement=function(e,r,t,a){var l=wijmo_1.createElement(r,e),i=CellMaker._WJC_CellMaker;t&&t.cssClass&&(i+=" "+CellMaker._getOptionText(t,"cssClass",a));l.className=i.trim();if(t&&t.label){var n=CellMaker._getOptionText(t,"label",a);l.setAttribute("aria-label",n.trim());l instanceof HTMLImageElement&&l.setAttribute("alt",n.trim())}if(t&&t.attributes)for(var o in t.attributes)l.setAttribute(o,t.attributes[o]);t&&wijmo_1.isFunction(t.click)&&(l.onclick=CellMaker._handleClick.bind({options:t,ctx:CellMaker._cloneContext(a)}));return l};CellMaker._cloneContext=function(e){if(wijmo_1.isFunction(Object.assign))return Object.assign({},e);var r={};for(var t in e)r[t]=e[t];return r};CellMaker._handleClick=function(e){var r=this.options;if(wijmo_1.isFunction(r.click)){e.preventDefault();var t=this.ctx;r.click(e,t)}};CellMaker._getSparkline=function(e,r){var t="",a=SparklineType,l=SparklineMarkers,i=null!=(r=r||{}).type?r.type:a.Line,n=null!=r.markers?r.markers:l.None,o=wijmo_1.isNumber(r.baseValue)?r.baseValue:i==a.Line?null:0,s=wijmo_1.isNumber(r.maxPoints)?r.maxPoints:null;if(e instanceof Array&&e.length>1){i==a.WinLoss&&(e=e.map((function(e){return wijmo_1.isBoolean(e)?e?1:-1:wijmo_1.isNumber(e)?e>0?1:e<0?-1:null:null})));var u=CellMaker._scaleValues(e,o,s),c=u.points,m=u.base,k=100/(c.length-(i==a.Line?1:0)),M=k>4?k-2:k,_=k-M;switch(i){case a.Column:case a.WinLoss:for(var f=0;f<c.length;f++){var p=c[f];null!=p&&(t+=wijmo_1.format("<rect {cls}x={x}% y={y}% width={w}% height={h}% />",{x:(f*k+_).toFixed(2),y:Math.min(m,p),w:M.toFixed(2),h:Math.abs(m-p),cls:CellMaker._getMarkers(n,u,f)}))}break;case a.Line:for(f=0;f<c.length-1;f++){var g=c[f],C=c[f+1];null!=g&&null!=C&&(t+=wijmo_1.format("<line x1={x1}% y1={y1}% x2={x2}% y2={y2}% />",{x1:Math.round(k*f),y1:g,x2:Math.round(k*(f+1)),y2:C}));var x=CellMaker._getMarkers(n,u,f),d='<circle {cls}cx={x}% cy={y}% r="3"/>';x&&(t+=wijmo_1.format(d,{x:Math.round(k*f),y:g,cls:x}));f==c.length-2&&(x=CellMaker._getMarkers(n,u,f+1))&&(t+=wijmo_1.format(d,{x:Math.round(k*(f+1)),y:C,cls:x}))}}null!=o&&i!=a.WinLoss&&(t+=wijmo_1.format('<line class="x-axis" x1=0% y1={base}% x2=100% y2={base}% />',{base:u.base}))}return t};CellMaker._scaleValues=function(e,r,t){var a,l,i=[];t&&t>1&&e.length>t&&(e=e.slice(0,t));e.forEach((function(e){if(wijmo_1.isNumber(e)){a=!wijmo_1.isNumber(a)||e<a?e:a;l=!wijmo_1.isNumber(l)||e>l?e:l}}));if(wijmo_1.isNumber(a)&&wijmo_1.isNumber(l)){if(null!=r){a=Math.min(a,r);l=Math.max(l,r)}else r=a>0?a:l<0?l:0;if(a==l){a--;l++}var n=l-a;e.forEach((function(e){i.push(wijmo_1.isNumber(e)?100-Math.round((e-a)/n*100):null)}));r=100-Math.round((r-a)/n*100)}return{min:a,max:l,base:r,points:i,data:e}};CellMaker._getMarkers=function(e,r,t){var a="",l=SparklineMarkers;if(e){var i=r.data,n="wj-marker-";0!=(e&l.First)&&0==t&&(a+=n+"first ");0!=(e&l.Last)&&t==i.length-1&&(a+=n+"last ");0!=(e&l.High)&&i[t]==r.max&&(a+=n+"high ");0!=(e&l.Low)&&i[t]==r.min&&(a+=n+"low ");0!=(e&l.Negative)&&i[t]<0&&(a+=n+"negative ")}return a?'class="wj-marker '+a.trim()+'"':""};CellMaker._WJC_CellMaker="wj-cell-maker";return CellMaker}();exports.CellMaker=CellMaker;wijmo_1._registerModule("wijmo.grid.cellmaker",selfModule);

package/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "@mescius/wijmo.grid.cellmaker",
+    "version": "5.20232.939",
+    "description": "UI library for pure JS, Angular, React, Vue and more...",
+    "author": "MESCIUS inc",
+    "license": "Commercial",
+    "main": "./index.js",
+    "types": "./index.d.ts",
+    "dependencies": {
+        "@mescius/wijmo": "5.20232.939",
+        "@mescius/wijmo.grid": "5.20232.939"
+    },
+    "homepage": "https://developer.mescius.com/wijmo",
+    "bugs": {
+        "url": "https://developer.mescius.com/forums/wijmo"
+    },
+    "keywords": [
+        "control",
+        "component",
+        "ui",
+        "control library",
+        "component library",
+        "ui library",
+        "control-library",
+        "component-library",
+        "ui-library",
+        "grid",
+        "data grid",
+        "data-grid",
+        "datagrid",
+        "angular grid",
+        "react grid",
+        "vue grid",
+        "angular-grid",
+        "react-grid",
+        "vue-grid"
+    ],
+    "module": "./es5-esm.js",
+    "esm5": "./es5-esm.js",
+    "wj-esm5": "./es5-esm.js",
+    "es2015Cjs": "./es2015-commonjs.js",
+    "wj-es2015Cjs": "./es2015-commonjs.js",
+    "esm2015": "./es2015-esm.js",
+    "wj-esm2015": "./es2015-esm.js"
+}