@genesislcap/grid-pro 14.408.0 → 14.409.0-FUI-2495.2

package/dist/esm/cell-renderers/icon.renderer.js

@@ -0,0 +1,149 @@
+import { __decorate } from "tslib";
+import { css, html, observable, when } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
+/**
+ * The AG Icon Renderer Styles.
+ * @public
+ */
+export const agIconRendererStyles = css `
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+
+  .icon-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+  }
+
+  .icon-container.with-hover {
+    padding: 5px;
+    line-height: 1;
+  }
+
+  .icon-container.with-hover:hover {
+    cursor: pointer;
+    background-color: var(--neutral-stroke-hover);
+  }
+
+  .icon-container.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .secondary-icon {
+    position: absolute;
+    top: 50%;
+    bottom: 0px;
+    right: -5px;
+    z-index: 2;
+    line-height: 1;
+  }
+`;
+function hasIconSrc(params) {
+    return (!!params && typeof params.iconSrc === 'string' && params.iconSrc.length > 0);
+}
+function hasIconName(params) {
+    return (!!params && typeof params.iconName === 'string' && params.iconName.length > 0);
+}
+/**
+ * Get a Design System prefixed Icon template.
+ * @param designSystem - The design system prefix to use. Defaults to 'foundation'.
+ * @returns An Icon component template prefixed with the correct design system.
+ * @public
+ */
+export const getIconRendererTemplate = (designSystem = 'rapid') => {
+    const iconComponent = `${designSystem}-icon`;
+    return html `
+    <div
+      class="icon-container ${(x) => { var _a, _b; return classNames(['with-hover', (_a = x.params) === null || _a === void 0 ? void 0 : _a.showHover], ['disabled', (_b = x.params) === null || _b === void 0 ? void 0 : _b.disabled]); }}"
+      @click=${(x, c) => {
+        var _a, _b, _c;
+        return !((_a = x.params) === null || _a === void 0 ? void 0 : _a.disabled) && ((_b = x.params) === null || _b === void 0 ? void 0 : _b.clickHandler)
+            ? (_c = x.params) === null || _c === void 0 ? void 0 : _c.clickHandler(c.event, x.params.data)
+            : null;
+    }}
+    >
+      ${when((x) => hasIconSrc(x.params), html `
+          <img
+            class="icon-image"
+            src="${(x) => (hasIconSrc(x.params) ? x.params.iconSrc : '')}"
+            style="${(x) => {
+        if (!hasIconSrc(x.params))
+            return '';
+        let styles = `height: ${x.params.iconHeight || '14px'}; width: auto;`;
+        if (x.params.iconColor)
+            styles += ` color: ${x.params.iconColor};`;
+        return styles;
+    }}"
+          />
+        `)}
+      ${when((x) => hasIconName(x.params), html `
+        <${iconComponent}
+          class="${(x) => {
+        var _a;
+        let classes = 'icon-element';
+        if ((_a = x.params) === null || _a === void 0 ? void 0 : _a.showHover)
+            classes += ' with-hover';
+        return classes;
+    }}"
+          name="${(x) => (hasIconName(x.params) ? x.params.iconName : '')}"
+          size="${(x) => (hasIconName(x.params) ? x.params.iconSize || 'md' : 'md')}"
+          style="${(x) => (x.params.iconColor ? `color: ${x.params.iconColor};` : '')}"
+          variant="${(x) => x.params.variant}"
+        ></${iconComponent}>
+      `)}
+      ${when((x) => { var _a; return (_a = x.params) === null || _a === void 0 ? void 0 : _a.secondaryIcon; }, html `
+        <${iconComponent}
+          class="secondary-icon"
+          name="${(x) => x.params.secondaryIcon}"
+          size="xs"
+          style="${(x) => (x.params.secondaryIconColor ? `color: ${x.params.secondaryIconColor};` : '')}"
+        ></${iconComponent}>
+      `)}
+    </div>
+  `;
+};
+/**
+ * Plain ag-Grid cell renderer for icons.
+ * This renderer creates the FAST custom element using document.createElement.
+ *
+ * @public
+ */
+export class IconRenderer extends FoundationElement {
+    // private element: HTMLElement;
+    init(params) {
+        this.params = params;
+    }
+    getGui() {
+        return this;
+    }
+    refresh(params) {
+        this.params = params;
+        return true;
+    }
+    destroy() { }
+}
+__decorate([
+    observable
+], IconRenderer.prototype, "params", void 0);
+/**
+ * A function that returns a Foundation Icon Renderer registration for configuring the component with a DesignSystem.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-icon-renderer\>
+ */
+export const foundationIconRenderer = IconRenderer.compose({
+    baseName: 'icon-renderer',
+    template: getIconRendererTemplate(),
+    styles: agIconRendererStyles,
+});

package/dist/esm/cell-renderers/index.js

@@ -2,6 +2,7 @@ export * from './action.renderer';
 export * from './actions-menu.renderer';
 export * from './boolean.renderer';
 export * from './editable.renderer';
+export * from './icon.renderer';
 export * from './text.renderer';
 export * from './text-field.renderer';
 export * from './status-pill.renderer';

package/dist/esm/grid-components.js

@@ -1,5 +1,5 @@
 import { foundationSelectEditor, foundationNumberEditor, foundationMultiselectEditor, foundationDateEditor, foundationStringEditor, } from './cell-editors';
-import { foundationGridProActionRenderer, foundationGridProActionsMenuRenderer, foundationAgBooleanRenderer, foundationAgEditableRenderer, foundationAgSelectRenderer, foundationAgTextRenderer, foundationAgTextFieldRenderer, foundationStatusPillRenderer, StatusPillRenderer, } from './cell-renderers';
+import { foundationGridProActionRenderer, foundationGridProActionsMenuRenderer, foundationAgBooleanRenderer, foundationAgEditableRenderer, foundationAgSelectRenderer, foundationAgTextRenderer, foundationAgTextFieldRenderer, foundationStatusPillRenderer, StatusPillRenderer, foundationIconRenderer, } from './cell-renderers';
 import { foundationGridPro } from './grid-pro';
 import { foundationMulticolumnDropdown } from './multicolumn-dropdown';
 /**
@@ -8,6 +8,7 @@ import { foundationMulticolumnDropdown } from './multicolumn-dropdown';
  * @public
  */
 export const foundationGridComponents = {
+    foundationIconRenderer,
     foundationGridProActionRenderer,
     foundationGridProActionsMenuRenderer,
     foundationAgBooleanRenderer,
@@ -15,7 +16,6 @@ export const foundationGridComponents = {
     foundationAgTextFieldRenderer,
     foundationAgEditableRenderer,
     foundationAgSelectRenderer,
-    foundationGridPro,
     foundationSelectEditor,
     foundationNumberEditor,
     foundationDateEditor,
@@ -24,6 +24,7 @@ export const foundationGridComponents = {
     foundationMulticolumnDropdown,
     foundationStatusPillRenderer,
     StatusPillRenderer,
+    foundationGridPro,
     register(container, ...rest) {
         if (!container) {
             // preserve backward compatibility with code that loops through

package/dist/esm/grid-pro-beta.js

@@ -9,7 +9,7 @@ import * as changeCase from 'change-case';
 import debounce from 'lodash.debounce';
 import { GridProCell } from './cell';
 import { DateEditor, MultiselectEditor, NumberEditor, SelectEditor, StringEditor, } from './cell-editors';
-import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, SelectRenderer, StatusPillRenderer, } from './cell-renderers';
+import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, IconRenderer, SelectRenderer, StatusPillRenderer, } from './cell-renderers';
 import { GridProColumn } from './column';
 import { GridProClientSideDatasource, GridProServerSideDatasource } from './datasource';
 import { baseDatasourceEventNames } from './datasource/base.types';
@@ -489,6 +489,7 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
             [GridProRendererTypes.actionsMenu]: ActionsMenuRenderer,
             [GridProRendererTypes.boolean]: BooleanRenderer,
             [GridProRendererTypes.editable]: EditableRenderer,
+            [GridProRendererTypes.icon]: IconRenderer,
             [GridProRendererTypes.statusPill]: StatusPillRenderer,
             [GridProRendererTypes.select]: SelectRenderer,
             [GridProRendererTypes.selectEditor]: SelectEditor,

package/dist/esm/grid-pro.js

@@ -11,7 +11,7 @@ import * as changeCase from 'change-case';
 import debounce from 'lodash.debounce';
 import { GridProCell } from './cell';
 import { DateEditor, MultiselectEditor, NumberEditor, SelectEditor, StringEditor, } from './cell-editors';
-import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, SelectRenderer, StatusPillRenderer, } from './cell-renderers';
+import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, IconRenderer, SelectRenderer, StatusPillRenderer, } from './cell-renderers';
 import { GridProColumn } from './column';
 import { GridProClientSideDatasource, GridProServerSideDatasource } from './datasource';
 import { baseDatasourceEventNames } from './datasource/base.types';
@@ -551,6 +551,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             [GridProRendererTypes.actionsMenu]: ActionsMenuRenderer,
             [GridProRendererTypes.boolean]: BooleanRenderer,
             [GridProRendererTypes.editable]: EditableRenderer,
+            [GridProRendererTypes.icon]: IconRenderer,
             [GridProRendererTypes.statusPill]: StatusPillRenderer,
             [GridProRendererTypes.select]: SelectRenderer,
             [GridProRendererTypes.selectEditor]: SelectEditor,

package/dist/esm/grid-pro.types.js

@@ -127,6 +127,7 @@ export var GridProRendererTypes;
     GridProRendererTypes["actionsMenu"] = "actionsMenu";
     GridProRendererTypes["boolean"] = "boolean";
     GridProRendererTypes["editable"] = "editable";
+    GridProRendererTypes["icon"] = "icon";
     GridProRendererTypes["text"] = "text";
     GridProRendererTypes["select"] = "select";
     GridProRendererTypes["statusPill"] = "statusPill";