@theseam/ui-common 0.3.13-beta.1 → 0.3.15-beta.0

package/bundles/theseam-ui-common-datatable.umd.js

@@ -459,7 +459,7 @@
         { type: i0.Component, args: [{
                     selector: 'seam-datatable-action-menu',
                     template: "<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n\n  <ng-container *ngFor=\"let item of items\">\n    <ng-container *ngIf=\"(item.routerLink || item.href) && !item.confirmDialog; else noRouterLink\">\n      <a *ngIf=\"item.href; else noHref\"\n        seamMenuItem\n        class=\"list-group-item list-group-item-action py-1\"\n        [disabled]=\"item.disabled\"\n        [attr.href]=\"item.href\"\n        [target]=\"item.target\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a seamMenuItem\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [queryParams]=\"item.queryParams\"\n          [fragment]=\"$any(item.fragment)\"\n          [queryParamsHandling]=\"item.queryParamsHandling\"\n          [preserveFragment]=\"$any(item.preserveFragment)\"\n          [skipLocationChange]=\"$any(item.skipLocationChange)\"\n          [replaceUrl]=\"$any(item.replaceUrl)\"\n          [state]=\"$any(item.state)\"\n          [routerLink]=\"item.routerLink\"\n          [target]=\"$any(item.target)\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </a>\n      </ng-template>\n    </ng-container>\n    <ng-template #noRouterLink>\n      <button seamMenuItem\n        type=\"button\"\n        class=\"list-group-item list-group-item-action py-1\"\n        [disabled]=\"item.disabled\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </button>\n    </ng-template>\n  </ng-container>\n</seam-menu>\n\n<button type=\"button\" class=\"datatable-action-button btn\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"_actionMenuPositions || []\"\n  title=\"Row Actions\">\n  <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n</button>\n",
-                    styles: [":host{display:block;position:relative}.datatable-action-button{font-size:20px;line-height:20px;width:30px;height:30px;padding:0;border-radius:15px;text-align:center}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"]
+                    styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"]
                 },] }
     ];
     DatatableActionMenuComponent.ctorParameters = function () { return [
@@ -853,7 +853,7 @@
     }(collections.DataSource));
 
     var ACTION_MENU_COLUMN_PROP = '$$__actionMenu__';
-    function createActionMenuColumn(cellTemplate, headerTemplate) {
+    function createActionMenuColumn(cellTemplate, headerTemplate, frozenLeft, frozenRight) {
         return {
             prop: ACTION_MENU_COLUMN_PROP,
             name: '',
@@ -864,7 +864,8 @@
             sortable: false,
             draggable: false,
             // TODO: Fix column auto sizing with fixed column and cell overlay before enabling.
-            // frozenRight: true,
+            frozenLeft: frozenLeft,
+            frozenRight: frozenRight,
             cellTemplate: cellTemplate,
             headerTemplate: headerTemplate,
         };
@@ -1003,6 +1004,13 @@
                 this._updateColumns.next(undefined);
             }
         };
+        ColumnsManagerService.prototype.setActionItemColumnPosition = function (actionItemColumnPosition) {
+            var changed = this._actionItemColumnPosition !== actionItemColumnPosition;
+            this._actionItemColumnPosition = actionItemColumnPosition;
+            if (changed) {
+                this._updateColumns.next(undefined);
+            }
+        };
         ColumnsManagerService.prototype.setActionMenuCellTpl = function (actionMenuCellTpl) {
             var changed = this._actionMenuCellTpl !== actionMenuCellTpl;
             this._actionMenuCellTpl = actionMenuCellTpl;
@@ -1087,7 +1095,13 @@
                 finally { if (e_1) throw e_1.error; }
             }
             if (this._shouldAddRowActionColumn()) {
-                cols.push(createActionMenuColumn(this._actionMenuCellTpl, this._blankHeaderTpl));
+                var actionMenuColumn = createActionMenuColumn(this._actionMenuCellTpl, this._blankHeaderTpl, this._rowActionColumnIsFrozenLeft(), this._rowActionColumnIsFrozenRight());
+                if (this._rowActionColumnIsStaticLeft()) {
+                    cols.unshift(actionMenuColumn);
+                }
+                else {
+                    cols.push(actionMenuColumn);
+                }
             }
             // Make sure the default for any missing props are set.
             // TODO: Determine if this should be done earlier, because I don't like
@@ -1184,6 +1198,18 @@
         ColumnsManagerService.prototype._shouldAddRowActionColumn = function () {
             return this._rowActionItem !== undefined;
         };
+        ColumnsManagerService.prototype._rowActionColumnIsFrozenLeft = function () {
+            return this._actionItemColumnPosition === 'frozenLeft';
+        };
+        ColumnsManagerService.prototype._rowActionColumnIsFrozenRight = function () {
+            return this._actionItemColumnPosition === 'frozenRight';
+        };
+        ColumnsManagerService.prototype._rowActionColumnIsStaticLeft = function () {
+            return this._actionItemColumnPosition === 'staticLeft';
+        };
+        ColumnsManagerService.prototype._rowActionColumnIsStaticRight = function () {
+            return this._actionItemColumnPosition === 'staticRight';
+        };
         ColumnsManagerService.prototype._shouldAddTreeToggleColumn = function (column) {
             return column.isTreeColumn !== undefined && column.isTreeColumn &&
                 (!utils.hasProperty(column, 'treeToggleTemplate') || !utils.notNullOrUndefined(column.treeToggleTemplate));
@@ -1867,6 +1893,11 @@
         return alterations;
     }
 
+    var ActionItemColumnPosition = ['frozenLeft', 'frozenRight', 'staticLeft', 'staticRight'];
+    function isActionItemColumnPosition(input) {
+        return ActionItemColumnPosition.indexOf(input) != -1;
+    }
+
     /**
      * Intended for internal classes declared by the `TheSeamDatatableModule`.
      */
@@ -1937,6 +1968,7 @@
             this.footerHeight = 40;
             this.scrollbarV = true;
             this.scrollbarH = true;
+            this._actionItemColumnPosition = 'frozenRight';
             this.scroll = new i0.EventEmitter();
             this.activate = new i0.EventEmitter();
             this.select = new i0.EventEmitter();
@@ -2100,6 +2132,22 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DatatableComponent.prototype, "actionItemColumnPosition", {
+            /**
+             * Sets position behavior for optional Action Menu Button column.
+             *
+             * Defaults to `frozenRight`.
+             */
+            get: function () { return this._actionItemColumnPosition; },
+            set: function (value) {
+                if (value && isActionItemColumnPosition(value)) {
+                    this._actionItemColumnPosition = value;
+                }
+                this._columnsManager.setActionItemColumnPosition(this._actionItemColumnPosition);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DatatableComponent.prototype, "columnComponents", {
             set: function (value) {
                 var _a;
@@ -2400,6 +2448,7 @@
         scrollbarV: [{ type: i0.Input }],
         scrollbarH: [{ type: i0.Input }],
         dataSource: [{ type: i0.Input }],
+        actionItemColumnPosition: [{ type: i0.Input }],
         scroll: [{ type: i0.Output }],
         activate: [{ type: i0.Output }],
         select: [{ type: i0.Output }],