@lemon-fe/components 0.1.154 → 1.1.0-alpha.1

package/es/data-grid/modules/column-tool-panel/columnToolPanel/toolPanelColumnComp.js

@@ -0,0 +1,314 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { _, AgCheckbox, Autowired, Column, Component, CssClassApplier, DragAndDropService, DragSourceType, Events, KeyCode, PostConstruct, RefSelector } from "@ag-grid-community/core";
+import { ToolPanelContextMenu } from "./toolPanelContextMenu";
+export var ToolPanelColumnComp = /*#__PURE__*/function (_Component) {
+  _inherits(ToolPanelColumnComp, _Component);
+  var _super = _createSuper(ToolPanelColumnComp);
+  function ToolPanelColumnComp(column, columnDept, allowDragging, groupsExist, focusWrapper) {
+    var _this;
+    _classCallCheck(this, ToolPanelColumnComp);
+    _this = _super.call(this);
+    _this.column = column;
+    _this.columnDept = columnDept;
+    _this.allowDragging = allowDragging;
+    _this.groupsExist = groupsExist;
+    _this.focusWrapper = focusWrapper;
+    _this.processingColumnStateChange = false;
+    return _this;
+  }
+  _createClass(ToolPanelColumnComp, [{
+    key: "init",
+    value: function init() {
+      var _this2 = this;
+      this.setTemplate(ToolPanelColumnComp.TEMPLATE);
+      this.eDragHandle = _.createIconNoSpan('columnDrag', this.gridOptionsService);
+      this.eDragHandle.classList.add('ag-drag-handle', 'ag-column-select-column-drag-handle');
+      var checkboxGui = this.cbSelect.getGui();
+      var checkboxInput = this.cbSelect.getInputElement();
+      checkboxGui.insertAdjacentElement('afterend', this.eDragHandle);
+      checkboxInput.setAttribute('tabindex', '-1');
+      this.displayName = this.columnModel.getDisplayNameForColumn(this.column, 'columnToolPanel');
+      var displayNameSanitised = _.escapeString(this.displayName);
+      this.eLabel.innerHTML = displayNameSanitised;
+      // if grouping, we add an extra level of indent, to cater for expand/contract icons we need to indent for
+      var indent = this.columnDept;
+      if (this.groupsExist) {
+        this.addCssClass('ag-column-select-add-group-indent');
+      }
+      this.addCssClass("ag-column-select-indent-".concat(indent));
+      this.setupDragging();
+      this.addManagedListener(this.eventService, Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.onColumnStateChanged.bind(this));
+      this.addManagedListener(this.column, Column.EVENT_VALUE_CHANGED, this.onColumnStateChanged.bind(this));
+      this.addManagedListener(this.column, Column.EVENT_PIVOT_CHANGED, this.onColumnStateChanged.bind(this));
+      this.addManagedListener(this.column, Column.EVENT_ROW_GROUP_CHANGED, this.onColumnStateChanged.bind(this));
+      this.addManagedListener(this.column, Column.EVENT_VISIBLE_CHANGED, this.onColumnStateChanged.bind(this));
+      this.addManagedListener(this.focusWrapper, 'keydown', this.handleKeyDown.bind(this));
+      this.addManagedListener(this.focusWrapper, 'contextmenu', this.onContextMenu.bind(this));
+      this.addManagedPropertyListener('functionsReadOnly', this.onColumnStateChanged.bind(this));
+      this.addManagedListener(this.cbSelect, AgCheckbox.EVENT_CHANGED, this.onCheckboxChanged.bind(this));
+      this.addManagedListener(this.eLabel, 'click', this.onLabelClicked.bind(this));
+      this.onColumnStateChanged();
+      this.refreshAriaLabel();
+      this.setupTooltip();
+      var classes = CssClassApplier.getToolPanelClassesFromColDef(this.column.getColDef(), this.gridOptionsService, this.column, null);
+      classes.forEach(function (c) {
+        return _this2.addOrRemoveCssClass(c, true);
+      });
+    }
+  }, {
+    key: "getColumn",
+    value: function getColumn() {
+      return this.column;
+    }
+  }, {
+    key: "setupTooltip",
+    value: function setupTooltip() {
+      var _this3 = this;
+      var refresh = function refresh() {
+        var newTooltipText = _this3.column.getColDef().headerTooltip;
+        _this3.setTooltip(newTooltipText);
+      };
+      refresh();
+      this.addManagedListener(this.eventService, Events.EVENT_NEW_COLUMNS_LOADED, refresh);
+    }
+  }, {
+    key: "getTooltipParams",
+    value: function getTooltipParams() {
+      var res = _get(_getPrototypeOf(ToolPanelColumnComp.prototype), "getTooltipParams", this).call(this);
+      res.location = 'columnToolPanelColumn';
+      res.colDef = this.column.getColDef();
+      return res;
+    }
+  }, {
+    key: "onContextMenu",
+    value: function onContextMenu(e) {
+      var _this4 = this;
+      var column = this.column,
+        gridOptionsService = this.gridOptionsService;
+      if (gridOptionsService.is('functionsReadOnly')) {
+        return;
+      }
+      var contextMenu = this.createBean(new ToolPanelContextMenu(column, e, this.focusWrapper));
+      this.addDestroyFunc(function () {
+        if (contextMenu.isAlive()) {
+          _this4.destroyBean(contextMenu);
+        }
+      });
+    }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.key === KeyCode.SPACE) {
+        e.preventDefault();
+        if (this.isSelectable()) {
+          this.onSelectAllChanged(!this.isSelected());
+        }
+      }
+    }
+  }, {
+    key: "onLabelClicked",
+    value: function onLabelClicked() {
+      if (this.gridOptionsService.is('functionsReadOnly')) {
+        return;
+      }
+      var nextState = !this.cbSelect.getValue();
+      this.onChangeCommon(nextState);
+    }
+  }, {
+    key: "onCheckboxChanged",
+    value: function onCheckboxChanged(event) {
+      this.onChangeCommon(event.selected);
+    }
+  }, {
+    key: "onChangeCommon",
+    value: function onChangeCommon(nextState) {
+      // ignore lock visible columns
+      if (this.cbSelect.isReadOnly()) {
+        return;
+      }
+      this.refreshAriaLabel();
+      // only want to action if the user clicked the checkbox, not if we are setting the checkbox because
+      // of a change in the model
+      if (this.processingColumnStateChange) {
+        return;
+      }
+      this.modelItemUtils.setColumn(this.column, nextState, 'toolPanelUi');
+    }
+  }, {
+    key: "refreshAriaLabel",
+    value: function refreshAriaLabel() {
+      var translate = this.localeService.getLocaleTextFunc();
+      var columnLabel = translate('ariaColumn', 'Column');
+      var state = this.cbSelect.getValue() ? translate('ariaVisible', 'visible') : translate('ariaHidden', 'hidden');
+      var visibilityLabel = translate('ariaToggleVisibility', 'Press SPACE to toggle visibility');
+      _.setAriaLabel(this.focusWrapper, "".concat(this.displayName, " ").concat(columnLabel));
+      this.cbSelect.setInputAriaLabel("".concat(visibilityLabel, " (").concat(state, ")"));
+      _.setAriaDescribedBy(this.focusWrapper, this.cbSelect.getInputElement().id);
+    }
+  }, {
+    key: "setupDragging",
+    value: function setupDragging() {
+      var _this5 = this;
+      if (!this.allowDragging) {
+        _.setDisplayed(this.eDragHandle, false);
+        return;
+      }
+      var hideColumnOnExit = !this.gridOptionsService.is('suppressDragLeaveHidesColumns');
+      var dragSource = {
+        type: DragSourceType.ToolPanel,
+        eElement: this.eDragHandle,
+        dragItemName: this.displayName,
+        defaultIconName: hideColumnOnExit ? DragAndDropService.ICON_HIDE : DragAndDropService.ICON_NOT_ALLOWED,
+        getDragItem: function getDragItem() {
+          return _this5.createDragItem();
+        },
+        onDragStarted: function onDragStarted() {
+          var event = {
+            type: Events.EVENT_COLUMN_PANEL_ITEM_DRAG_START,
+            column: _this5.column
+          };
+          _this5.eventService.dispatchEvent(event);
+        },
+        onDragStopped: function onDragStopped() {
+          var event = {
+            type: Events.EVENT_COLUMN_PANEL_ITEM_DRAG_END
+          };
+          _this5.eventService.dispatchEvent(event);
+        },
+        onGridEnter: function onGridEnter() {
+          if (hideColumnOnExit) {
+            // when dragged into the grid, mimic what happens when checkbox is enabled
+            // this handles the behaviour for pivot which is different to just hiding a column.
+            _this5.onChangeCommon(true);
+          }
+        },
+        onGridExit: function onGridExit() {
+          if (hideColumnOnExit) {
+            // when dragged outside of the grid, mimic what happens when checkbox is disabled
+            // this handles the behaviour for pivot which is different to just hiding a column.
+            _this5.onChangeCommon(false);
+          }
+        }
+      };
+      this.dragAndDropService.addDragSource(dragSource, true);
+      this.addDestroyFunc(function () {
+        return _this5.dragAndDropService.removeDragSource(dragSource);
+      });
+    }
+  }, {
+    key: "createDragItem",
+    value: function createDragItem() {
+      var visibleState = {};
+      visibleState[this.column.getId()] = this.column.isVisible();
+      return {
+        columns: [this.column],
+        visibleState: visibleState
+      };
+    }
+  }, {
+    key: "onColumnStateChanged",
+    value: function onColumnStateChanged() {
+      this.processingColumnStateChange = true;
+      var isPivotMode = this.columnModel.isPivotMode();
+      if (isPivotMode) {
+        // if reducing, checkbox means column is one of pivot, value or group
+        var anyFunctionActive = this.column.isAnyFunctionActive();
+        this.cbSelect.setValue(anyFunctionActive);
+      } else {
+        // if not reducing, the checkbox tells us if column is visible or not
+        this.cbSelect.setValue(this.column.isVisible());
+      }
+      var canBeToggled = true;
+      var canBeDragged = true;
+      if (isPivotMode) {
+        // when in pivot mode, the item should be read only if:
+        //  a) gui is not allowed make any changes
+        var functionsReadOnly = this.gridOptionsService.is('functionsReadOnly');
+        //  b) column is not allow any functions on it
+        var noFunctionsAllowed = !this.column.isAnyFunctionAllowed();
+        canBeToggled = !functionsReadOnly && !noFunctionsAllowed;
+        canBeDragged = canBeToggled;
+      } else {
+        var _this$column$getColDe = this.column.getColDef(),
+          enableRowGroup = _this$column$getColDe.enableRowGroup,
+          enableValue = _this$column$getColDe.enableValue,
+          lockPosition = _this$column$getColDe.lockPosition,
+          suppressMovable = _this$column$getColDe.suppressMovable,
+          lockVisible = _this$column$getColDe.lockVisible;
+        var forceDraggable = !!enableRowGroup || !!enableValue;
+        var disableDraggable = !!lockPosition || !!suppressMovable;
+        canBeToggled = !lockVisible;
+        canBeDragged = forceDraggable || !disableDraggable;
+      }
+      this.cbSelect.setReadOnly(!canBeToggled);
+      this.eDragHandle.classList.toggle('ag-column-select-column-readonly', !canBeDragged);
+      this.addOrRemoveCssClass('ag-column-select-column-readonly', !canBeDragged && !canBeToggled);
+      var checkboxPassive = isPivotMode && this.gridOptionsService.is('functionsPassive');
+      this.cbSelect.setPassive(checkboxPassive);
+      this.processingColumnStateChange = false;
+    }
+  }, {
+    key: "getDisplayName",
+    value: function getDisplayName() {
+      return this.displayName;
+    }
+  }, {
+    key: "onSelectAllChanged",
+    value: function onSelectAllChanged(value) {
+      if (value !== this.cbSelect.getValue()) {
+        if (!this.cbSelect.isReadOnly()) {
+          this.cbSelect.toggle();
+        }
+      }
+    }
+  }, {
+    key: "isSelected",
+    value: function isSelected() {
+      return this.cbSelect.getValue();
+    }
+  }, {
+    key: "isSelectable",
+    value: function isSelectable() {
+      return !this.cbSelect.isReadOnly();
+    }
+  }, {
+    key: "isExpandable",
+    value: function isExpandable() {
+      return false;
+    }
+  }, {
+    key: "setExpanded",
+    value: function setExpanded(value) {
+      console.warn('AG Grid: can not expand a column item that does not represent a column group header');
+    }
+  }]);
+  return ToolPanelColumnComp;
+}(Component);
+ToolPanelColumnComp.TEMPLATE = "<div class=\"ag-column-select-column\" aria-hidden=\"true\">\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-select-column-label\" ref=\"eLabel\"></span>\n        </div>";
+__decorate([Autowired('columnModel')], ToolPanelColumnComp.prototype, "columnModel", void 0);
+__decorate([Autowired('dragAndDropService')], ToolPanelColumnComp.prototype, "dragAndDropService", void 0);
+__decorate([Autowired('modelItemUtils')], ToolPanelColumnComp.prototype, "modelItemUtils", void 0);
+__decorate([RefSelector('eLabel')], ToolPanelColumnComp.prototype, "eLabel", void 0);
+__decorate([RefSelector('cbSelect')], ToolPanelColumnComp.prototype, "cbSelect", void 0);
+__decorate([PostConstruct], ToolPanelColumnComp.prototype, "init", null);

package/es/data-grid/modules/column-tool-panel/columnToolPanel/toolPanelColumnGroupComp.d.ts

@@ -0,0 +1,51 @@
+import { Column, ColumnEventType, Component, ITooltipParams, WithoutGridCommon } from "@ag-grid-community/core";
+import { ColumnModelItem } from "./columnModelItem";
+export declare class ToolPanelColumnGroupComp extends Component {
+    private readonly modelItem;
+    private readonly allowDragging;
+    private readonly eventType;
+    private readonly focusWrapper;
+    private static TEMPLATE;
+    private columnModel;
+    private dragAndDropService;
+    private modelItemUtils;
+    private cbSelect;
+    private eLabel;
+    private eGroupOpenedIcon;
+    private eGroupClosedIcon;
+    private eColumnGroupIcons;
+    private eDragHandle;
+    private readonly columnGroup;
+    private readonly columnDept;
+    private displayName;
+    private processingColumnStateChange;
+    constructor(modelItem: ColumnModelItem, allowDragging: boolean, eventType: ColumnEventType, focusWrapper: HTMLElement);
+    init(): void;
+    getColumns(): Column[];
+    private setupTooltip;
+    getTooltipParams(): WithoutGridCommon<ITooltipParams>;
+    private handleKeyDown;
+    private onContextMenu;
+    private addVisibilityListenersToAllChildren;
+    private setupDragging;
+    private createDragItem;
+    private setupExpandContract;
+    private onLabelClicked;
+    private onCheckboxChanged;
+    private getVisibleLeafColumns;
+    private onChangeCommon;
+    private refreshAriaLabel;
+    onColumnStateChanged(): void;
+    private workOutSelectedValue;
+    private workOutReadOnlyValue;
+    private isColumnChecked;
+    private onExpandOrContractClicked;
+    private onExpandChanged;
+    private setOpenClosedIcons;
+    private refreshAriaExpanded;
+    getDisplayName(): string | null;
+    onSelectAllChanged(value: boolean): void;
+    isSelected(): boolean | undefined;
+    isSelectable(): boolean;
+    setSelected(selected: boolean): void;
+}