@coolon/angular-ui-powerups 12.4.0-alpha.3 → 12.4.0-alpha.31

package/bundles/coolon-angular-ui-powerups-cypress.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@coolon/typescript-utilities'), require('lodash'), require('@angular/router')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups/cypress', ['exports', '@coolon/typescript-utilities', 'lodash', '@angular/router'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = global.coolon['angular-ui-powerups'] || {}, global.coolon['angular-ui-powerups'].cypress = {}), global.typescriptUtilities, global._, global.ng.router));
-}(this, (function (exports, typescriptUtilities, _, router) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@coolon/typescript-utilities'), require('lodash'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@angular/router')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups/cypress', ['exports', '@coolon/typescript-utilities', 'lodash', '@typescript-plus/fast-memoize-decorator/dist/src', '@angular/router'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = global.coolon['angular-ui-powerups'] || {}, global.coolon['angular-ui-powerups'].cypress = {}), global.typescriptUtilities, global._, global.src, global.ng.router));
+}(this, (function (exports, typescriptUtilities, _, src, router) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,53 +26,6 @@
 
     var ___namespace = /*#__PURE__*/_interopNamespace(_);
 
-    var PageElement = /** @class */ (function () {
-        function PageElement(parent, selector) {
-            this.parentElementAccessor = parent instanceof PageElement ? function () { return parent.element(); } : parent;
-            this.elementAccessStrategy = ___namespace.isString(selector) ? {
-                findIn: function (p) { return p.find(selector); },
-                shouldNotExist: function (p) { return p.should('not.exist', selector); }
-            } : selector;
-        }
-        PageElement.prototype.element = function () {
-            var parent = this.getParentElement();
-            return parent ? this.elementAccessStrategy.findIn(parent) : undefined;
-        };
-        PageElement.prototype.getParentElement = function () {
-            return this.parentElementAccessor ? this.parentElementAccessor() : undefined;
-        };
-        PageElement.prototype.find = function (selector) {
-            var _this = this;
-            return new PageElement(function () { return _this.element(); }, selector);
-        };
-        PageElement.prototype.click = function (text) {
-            text ? this.element().contains(text).click() : this.element().click();
-        };
-        Object.defineProperty(PageElement.prototype, "should", {
-            get: function () {
-                return this.getShoulder(this.getShouldElement());
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PageElement.prototype.getShoulder = function (element) {
-            return element.should.bind(element);
-        };
-        PageElement.prototype.getShouldElement = function () {
-            return this.element();
-        };
-        PageElement.prototype.shouldBeVisible = function () {
-            this.should('be.visible');
-        };
-        PageElement.prototype.shouldNotBeVisible = function () {
-            if (!this.elementAccessStrategy.shouldNotExist) {
-                typescriptUtilities.lang.abstractMethod(this.constructor);
-            }
-            this.elementAccessStrategy.shouldNotExist(this.getParentElement());
-        };
-        return PageElement;
-    }());
-
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -385,112 +338,104 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var urlSerialiser = new router.DefaultUrlSerializer();
-    exports.Path = /** @class */ (function () {
-        function Path(segments) {
-            this.segments = segments;
+    exports.ElementLocator = void 0;
+    (function (ElementLocator) {
+        function findByCssSelector(selector) {
+            return function (parent) { return parent.dom().find(selector); };
         }
-        Path.extractVisitParameters = function (url) {
-            var result = {};
-            var urlTree = urlSerialiser.parse(url);
-            urlTree.root.children.primary.segments.forEach(function (s) {
-                result = Object.assign(Object.assign({}, result), s.parameters);
-            });
-            return result;
+        ElementLocator.findByCssSelector = findByCssSelector;
+        function findByTextContent(text) {
+            return function (parent) { return parent.dom().contains(text); };
+        }
+        ElementLocator.findByTextContent = findByTextContent;
+        function findBySelectorAndTextContent(selector, text) {
+            return function (parent) { return parent.dom().contains(selector, text); };
+        }
+        ElementLocator.findBySelectorAndTextContent = findBySelectorAndTextContent;
+    })(exports.ElementLocator || (exports.ElementLocator = {}));
+
+    var PageElement = /** @class */ (function () {
+        function PageElement(parent, selectorOrLocator) {
+            this.parent = parent;
+            this.domElementLocator = ___namespace.isNil(selectorOrLocator) ?
+                this.getDefaultElementLocator() :
+                ___namespace.isString(selectorOrLocator) ?
+                    exports.ElementLocator.findByCssSelector(selectorOrLocator) :
+                    selectorOrLocator;
+        }
+        PageElement.prototype.getDefaultElementLocator = function () {
+            return exports.ElementLocator.findByCssSelector(this.getDefaultElementSelector());
         };
-        Path.prototype.toUrl = function (matrixParams) {
-            return this.segments.map(function (s) { return s.toUrlPart(matrixParams); }).join('/');
+        PageElement.prototype.getDefaultElementSelector = function () {
+            return typescriptUtilities.Stringy.from(this.constructor.name).dasherize().toString();
         };
-        return Path;
+        PageElement.prototype.dom = function () {
+            return this.domElementLocator(this.parent);
+        };
+        PageElement.prototype.find = function (selector) {
+            return new PageElement(this, selector);
+        };
+        PageElement.prototype.click = function (text) {
+            text ? this.dom().contains(text).click() : this.dom().click();
+        };
+        Object.defineProperty(PageElement.prototype, "should", {
+            get: function () {
+                return this.getShoulder(this.getShouldElement());
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PageElement.prototype.getShoulder = function (element) {
+            return element.should.bind(element);
+        };
+        PageElement.prototype.getShouldElement = function () {
+            return this.dom();
+        };
+        PageElement.prototype.shouldBeVisible = function () {
+            this.should('be.visible');
+        };
+        PageElement.prototype.shouldNotBeVisible = function () {
+            this.should('not.be.visible');
+        };
+        PageElement.prototype.shouldExist = function () {
+            this.dom().should('exist');
+        };
+        PageElement.prototype.shouldNotExist = function () {
+            this.dom().should('not.exist');
+        };
+        return PageElement;
     }());
-    (function (Path) {
-        function setUrlSerialiser(serialiser) {
-            urlSerialiser = serialiser;
-        }
-        Path.setUrlSerialiser = setUrlSerialiser;
-        var Segment = /** @class */ (function () {
-            function Segment(path, params) {
-                if (params === void 0) { params = {}; }
-                var _a;
-                this.path = path;
-                this.routeId = params === null || params === void 0 ? void 0 : params.routeId;
-                this.visitParams = (_a = params === null || params === void 0 ? void 0 : params.visitParams) !== null && _a !== void 0 ? _a : [];
-            }
-            Segment.prototype.toUrlPart = function (params) {
-                var path = this.path;
-                this.visitParams.forEach(function (p) {
-                    var value = params[p];
-                    if (value) {
-                        path = path + ";" + p + "=" + value;
-                    }
-                });
-                if (this.routeId && params[this.routeId]) {
-                    path = path + '/' + params[this.routeId];
-                }
-                return path;
-            };
-            return Segment;
-        }());
-        Path.Segment = Segment;
-        var Builder = /** @class */ (function () {
-            function Builder() {
-                this.segments = [];
-            }
-            Builder.prototype.segment = function (name, params) {
-                var builder = new Segment(name, params);
-                this.segments.push(builder);
-                return this;
-            };
-            Builder.prototype.getPath = function () {
-                return new Path(this.segments);
-            };
-            return Builder;
-        }());
-        Path.Builder = Builder;
-    })(exports.Path || (exports.Path = {}));
 
-    var FaceAccessor = /** @class */ (function () {
-        function FaceAccessor(face) {
-            this.face = face;
-        }
-        FaceAccessor.prototype.findIn = function (parent) {
-            return this.face.text ?
-                parent.contains("aup-command-face", this.face.text()) :
-                this.face.icon ?
-                    parent.find("aup-icon[ng-reflect-icon=" + this.face.icon() + "]").closest('aup-command-face') :
-                    undefined;
-        };
-        FaceAccessor.prototype.shouldNotExist = function (parent) {
-            return this.face.text ?
-                parent.should('not.contain', "aup-command-face", this.face.text()) :
-                this.face.icon ?
-                    parent.should('not.contain', "aup-icon[ng-reflect-icon=" + this.face.icon() + "]") :
-                    undefined;
-        };
-        return FaceAccessor;
-    }());
     var AupCommandFace = /** @class */ (function (_super) {
         __extends(AupCommandFace, _super);
         function AupCommandFace(parentElement, face) {
-            return _super.call(this, function () { return parentElement.element(); }, AupCommandFace.createAccessor(face)) || this;
+            return _super.call(this, parentElement, AupCommandFace.createElementLocator(face)) || this;
         }
-        AupCommandFace.createAccessor = function (face) {
-            return new FaceAccessor(face);
+        AupCommandFace.createElementLocator = function (face) {
+            var locator = function (parent) {
+                return face.text ?
+                    parent.dom().contains("aup-command-face", face.text()) :
+                    face.icon ?
+                        parent.dom().find("aup-icon[ng-reflect-icon=" + face.icon() + "]").closest('aup-command-face') :
+                        undefined;
+            };
+            // aot compiler doesn't like lambas
+            return locator;
         };
         return AupCommandFace;
     }(PageElement));
 
     var AupCommand = /** @class */ (function (_super) {
         __extends(AupCommand, _super);
-        function AupCommand(parent, face) {
-            var _this = this;
-            var faceAccessor = AupCommandFace.createAccessor(face);
-            _this = _super.call(this, parent, {
-                findIn: function (parentElement) {
-                    return faceAccessor.findIn(parentElement).closest('aup-command');
+        function AupCommand(parent, faceOrSelector) {
+            return _super.call(this, parent, function (parentElement) {
+                if (___namespace.isString(faceOrSelector)) {
+                    return parentElement.dom().find(faceOrSelector);
+                }
+                else {
+                    return AupCommandFace.createElementLocator(faceOrSelector)(parentElement).closest('aup-command');
                 }
             }) || this;
-            return _this;
         }
         AupCommand.prototype.click = function () {
             this.getButton().click();
@@ -501,25 +446,39 @@
         AupCommand.prototype.shouldBeDisabled = function () {
             this.getButton().should('be.disabled');
         };
+        AupCommand.prototype.shouldBeEnabled = function () {
+            this.getButton().should('not.be.disabled');
+        };
         AupCommand.prototype.getButton = function () {
-            return this.element().find('button');
+            return this.dom().find('button');
         };
         return AupCommand;
     }(PageElement));
 
+    var AupEmptyState = /** @class */ (function (_super) {
+        __extends(AupEmptyState, _super);
+        function AupEmptyState() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        AupEmptyState.prototype.shouldContainText = function (text) {
+            this.dom().should("contain.text", text);
+        };
+        return AupEmptyState;
+    }(PageElement));
+
     exports.AupInput = /** @class */ (function (_super) {
         __extends(AupInput, _super);
         function AupInput() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         AupInput.prototype.label = function () {
-            return this.element().find('label');
+            return this.dom().find('label');
         };
         AupInput.prototype.hint = function () {
-            return this.element().find('mat-hint');
+            return this.dom().find('mat-hint');
         };
         AupInput.prototype.error = function () {
-            return this.element().find('mat-error');
+            return this.dom().find('mat-error');
         };
         Object.defineProperty(AupInput.prototype, "labelShould", {
             get: function () {
@@ -551,6 +510,18 @@
         AupInput.prototype.errorShouldBe = function (text) {
             return this.errorShould("have.text", text);
         };
+        AupInput.prototype.shouldBeFocused = function () {
+            this.input().should("have.focus");
+        };
+        AupInput.prototype.shouldNotBeFocused = function () {
+            this.input().should("not.have.focus");
+        };
+        AupInput.prototype.type = function (characters) {
+            this.input().type(characters);
+        };
+        AupInput.prototype.hitEnter = function () {
+            this.type("{enter}");
+        };
         return AupInput;
     }(PageElement));
     (function (AupInput) {
@@ -560,7 +531,7 @@
                 return _super !== null && _super.apply(this, arguments) || this;
             }
             HtmlInput.prototype.input = function () {
-                return this.element().find('input');
+                return this.dom().find('input');
             };
             HtmlInput.prototype.clear = function () {
                 this.input().clear();
@@ -586,7 +557,7 @@
                 return this.input();
             };
             TextAreaInput.prototype.input = function () {
-                return this.element().find('textarea');
+                return this.dom().find('textarea');
             };
             TextAreaInput.prototype.clear = function () {
                 this.input().clear();
@@ -602,6 +573,59 @@
         AupInput.TextAreaInput = TextAreaInput;
     })(exports.AupInput || (exports.AupInput = {}));
 
+    var AupPopupMenuPanel = /** @class */ (function (_super) {
+        __extends(AupPopupMenuPanel, _super);
+        function AupPopupMenuPanel() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return AupPopupMenuPanel;
+    }(PageElement));
+
+    var AupAbstractPopupMenu = /** @class */ (function (_super) {
+        __extends(AupAbstractPopupMenu, _super);
+        function AupAbstractPopupMenu(parent, locator) {
+            var _this = _super.call(this, parent, locator) || this;
+            _this.popup = new AupPopupMenuPanel(_this, function (p) { return _this.findPopupIn(p); });
+            return _this;
+        }
+        AupAbstractPopupMenu.prototype.findPopupIn = function (p) {
+            return this.getOverlay().find('.mat-menu-panel');
+        };
+        AupAbstractPopupMenu.prototype.getOverlay = function () {
+            return this.dom().closest('body').find('.cdk-overlay-container');
+        };
+        AupAbstractPopupMenu.prototype.getBackdrop = function () {
+            return this.getOverlay().find('.cdk-overlay-backdrop');
+        };
+        AupAbstractPopupMenu.prototype.openPopup = function () {
+            this.shouldNotBeOpen();
+            this.click();
+            return this.popup;
+        };
+        AupAbstractPopupMenu.prototype.closePopup = function () {
+            this.shouldBeOpen();
+            this.getBackdrop().click();
+        };
+        AupAbstractPopupMenu.prototype.shouldBeOpen = function () {
+            this.popup.shouldBeVisible();
+        };
+        AupAbstractPopupMenu.prototype.shouldNotBeOpen = function () {
+            this.dom().closest('body').find('.mat-menu-panel').should("not.exist");
+        };
+        return AupAbstractPopupMenu;
+    }(PageElement));
+
+    var AupMoreMenu = /** @class */ (function (_super) {
+        __extends(AupMoreMenu, _super);
+        function AupMoreMenu() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        AupMoreMenu.create = function (parent, selector) {
+            return new AupMoreMenu(parent, exports.ElementLocator.findByCssSelector(selector !== null && selector !== void 0 ? selector : 'aup-more-menu'));
+        };
+        return AupMoreMenu;
+    }(AupAbstractPopupMenu));
+
     var AupNavigation = /** @class */ (function (_super) {
         __extends(AupNavigation, _super);
         function AupNavigation() {
@@ -617,61 +641,197 @@
             this.face(label).shouldBeVisible();
         };
         AupNavigation.prototype.shouldNotHaveLink = function (label) {
-            this.face(label).shouldNotBeVisible();
+            this.face(label).shouldNotExist();
         };
         return AupNavigation;
     }(PageElement));
 
-    exports.AupTable = /** @class */ (function (_super) {
-        __extends(AupTable, _super);
-        function AupTable(parentElementAccessor, selector) {
-            return _super.call(this, parentElementAccessor, selector) || this;
+    var AupTableCell = /** @class */ (function (_super) {
+        __extends(AupTableCell, _super);
+        function AupTableCell() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        AupTable.prototype.row = function (rowId) {
-            var _this = this;
-            return new AupTable.Row(function () { return _this.element(); }, "tr[aup-table-id=" + rowId + "]");
+        AupTableCell.prototype.rowId = function () {
+            return this.dom().closest('tr').invoke('attr', 'aup-row-id');
         };
-        AupTable.prototype.column = function (columnId) {
-            return new AupTable.Column(this, columnId);
+        AupTableCell.prototype.row = function () {
+            var self = this;
+            return this.parent.createRow(function (parent) {
+                return self.rowId().then(function (rowId) { return parent.dom().find(exports.AupAbstractTable.cssSelectorForTableRowById(rowId)); });
+            });
         };
-        return AupTable;
+        return AupTableCell;
     }(PageElement));
-    (function (AupTable) {
+
+    var AupTableColumn = /** @class */ (function (_super) {
+        __extends(AupTableColumn, _super);
+        function AupTableColumn(table, columnId) {
+            var _this = _super.call(this, table, exports.AupAbstractTable.cssSelectorForColumnCellRendererById(columnId)) || this;
+            _this.columnId = columnId;
+            return _this;
+        }
+        AupTableColumn.prototype.cellContaining = function (content) {
+            var self = this;
+            return new AupTableCell(this.parent, function (parent) {
+                return parent.dom().contains(exports.AupAbstractTable.cssSelectorForColumnCellRendererById(self.columnId), content);
+            });
+        };
+        AupTableColumn.prototype.rowContaining = function (content) {
+            return this.cellContaining(content).row();
+        };
+        return AupTableColumn;
+    }(PageElement));
+
+    var AupTableSelectionColumn = /** @class */ (function (_super) {
+        __extends(AupTableSelectionColumn, _super);
+        function AupTableSelectionColumn() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        AupTableSelectionColumn.prototype.selectAll = function () {
+        };
+        return AupTableSelectionColumn;
+    }(AupTableColumn));
+
+    exports.AupAbstractTable = /** @class */ (function (_super) {
+        __extends(AupAbstractTable, _super);
+        function AupAbstractTable() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        AupAbstractTable.prototype.row = function (rowId) {
+            return this.createRow(function (parent) {
+                return parent.dom().find(AupAbstractTable.cssSelectorForTableRowById(rowId));
+            });
+        };
+        AupAbstractTable.prototype.rowNumber = function (rowNumber) {
+            return this.createRow(function (parent) {
+                return parent.dom().find(AupAbstractTable.cssSelectorForNthTableRow(rowNumber));
+            });
+        };
+        AupAbstractTable.prototype.column = function (columnId) {
+            return new AupTableColumn(this, columnId);
+        };
+        Object.defineProperty(AupAbstractTable.prototype, "selectionColumn", {
+            get: function () {
+                return new AupTableSelectionColumn(this, 'selection-column');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AupAbstractTable;
+    }(PageElement));
+    __decorate([
+        src.Memoize(),
+        __metadata("design:type", AupTableSelectionColumn),
+        __metadata("design:paramtypes", [])
+    ], exports.AupAbstractTable.prototype, "selectionColumn", null);
+    (function (AupAbstractTable) {
+        function cssSelectorForTableRowById(rowId) {
+            return "tbody tr[aup-row-id=" + rowId + "]";
+        }
+        AupAbstractTable.cssSelectorForTableRowById = cssSelectorForTableRowById;
+        function cssSelectorForNthTableRow(rowNumber) {
+            return "tbody tr:nth-child(" + rowNumber + ")";
+        }
+        AupAbstractTable.cssSelectorForNthTableRow = cssSelectorForNthTableRow;
+        function cssSelectorForColumnCellRendererById(columnOrId) {
+            var columnId = ___namespace.isString(columnOrId) ? columnOrId : columnOrId.columnId;
+            return "aup-table-cell-renderer[column-id=" + columnId + "]";
+        }
+        AupAbstractTable.cssSelectorForColumnCellRendererById = cssSelectorForColumnCellRendererById;
+        function cssSelectorForCell(rowId, columnOrId) {
+            return cssSelectorForTableRowById(rowId) + " " + cssSelectorForColumnCellRendererById(columnOrId);
+        }
+        AupAbstractTable.cssSelectorForCell = cssSelectorForCell;
+    })(exports.AupAbstractTable || (exports.AupAbstractTable = {}));
+
+    var AupTableRow = /** @class */ (function (_super) {
+        __extends(AupTableRow, _super);
+        function AupTableRow() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        AupTableRow.prototype.rowId = function () {
+            return this.dom()
+                .invoke('attr', 'aup-row-id');
+        };
+        AupTableRow.prototype.shouldHaveRowId = function (rowId) {
+            this.rowId().should('eq', rowId);
+        };
+        AupTableRow.prototype.cell = function (columnOrId) {
+            var self = this;
+            return new AupTableCell(this.parent, function (parent) {
+                return self.rowId()
+                    .then(function (rowId) { return exports.AupAbstractTable.cssSelectorForCell(rowId, columnOrId); })
+                    .then(function (selector) { return parent.dom().find(selector); });
+            });
+        };
+        AupTableRow.prototype.shouldBeSelected = function () {
+            this.dom().should('have.class', 'aup-row-selected');
+        };
+        AupTableRow.prototype.shouldNotBeSelected = function () {
+            this.dom().should('not.have.class', 'aup-row-selected');
+        };
+        return AupTableRow;
+    }(PageElement));
+
+    var AupTable = /** @class */ (function (_super) {
+        __extends(AupTable, _super);
+        function AupTable() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        AupTable.prototype.createRow = function (locator) {
+            return new AupTableRow(this, locator);
+        };
+        return AupTable;
+    }(exports.AupAbstractTable));
+
+    exports.AupTreeTable = /** @class */ (function (_super) {
+        __extends(AupTreeTable, _super);
+        function AupTreeTable() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(AupTreeTable.prototype, "treeControlColumn", {
+            get: function () {
+                return new AupTreeTable.TreeControlColumn(this, 'tree-label');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AupTreeTable.prototype.createRow = function (locator) {
+            return new AupTreeTable.Row(this, locator);
+        };
+        return AupTreeTable;
+    }(exports.AupAbstractTable));
+    __decorate([
+        src.Memoize(),
+        __metadata("design:type", exports.AupTreeTable.TreeControlColumn),
+        __metadata("design:paramtypes", [])
+    ], exports.AupTreeTable.prototype, "treeControlColumn", null);
+    (function (AupTreeTable) {
         var Row = /** @class */ (function (_super) {
             __extends(Row, _super);
             function Row() {
                 return _super !== null && _super.apply(this, arguments) || this;
             }
-            return Row;
-        }(PageElement));
-        AupTable.Row = Row;
-        var Column = /** @class */ (function () {
-            function Column(table, columnId) {
-                this.table = table;
-                this.columnId = columnId;
-            }
-            Column.prototype.cell = function (content) {
-                var self = this;
-                return new Cell(this.table, {
-                    findIn: function (parent) {
-                        return parent.contains("aup-table-cell-renderer[column-id=" + self.columnId + "]", content);
-                    }
-                });
+            Row.prototype.shouldBeExpanded = function () {
+                this.dom().should("not.have.class", "aup-node-collapsed");
             };
-            return Column;
-        }());
-        AupTable.Column = Column;
-        var Cell = /** @class */ (function (_super) {
-            __extends(Cell, _super);
-            function Cell() {
+            Row.prototype.shouldBeCollapsed = function () {
+                this.dom().should("have.class", "aup-node-collapsed");
+            };
+            return Row;
+        }(AupTableRow));
+        AupTreeTable.Row = Row;
+        var TreeControlColumn = /** @class */ (function (_super) {
+            __extends(TreeControlColumn, _super);
+            function TreeControlColumn() {
                 return _super !== null && _super.apply(this, arguments) || this;
             }
-            return Cell;
-        }(PageElement));
-        AupTable.Cell = Cell;
-    })(exports.AupTable || (exports.AupTable = {}));
+            return TreeControlColumn;
+        }(AupTableColumn));
+        AupTreeTable.TreeControlColumn = TreeControlColumn;
+    })(exports.AupTreeTable || (exports.AupTreeTable = {}));
 
-    function ButtonMixin(Base) {
+    function FormElementMixin(Base) {
         return /** @class */ (function (_super) {
             __extends(class_1, _super);
             function class_1() {
@@ -681,12 +841,8 @@
                 }
                 return _super.apply(this, __spreadArray([], __read(args))) || this;
             }
-            class_1.prototype.click = function () {
-                return this.element().click();
-            };
             class_1.prototype.shouldBeDisabled = function () {
                 this.should("be.disabled");
-                // this.should("have.css", "color", "rgba(0,0,0,0.26)")
             };
             return class_1;
         }(Base));
@@ -695,88 +851,346 @@
     var Button = /** @class */ (function (_super) {
         __extends(Button, _super);
         function Button(parentElementAccessor, buttonText) {
-            return _super.call(this, parentElementAccessor, {
-                findIn: function (parent) {
-                    return parent.contains('button', buttonText);
-                },
-                shouldNotExist: function (parent) {
-                    return parent.should('not.contain', buttonText);
-                }
-            }) || this;
+            return _super.call(this, parentElementAccessor, exports.ElementLocator.findBySelectorAndTextContent('button', buttonText)) || this;
         }
         return Button;
-    }(ButtonMixin(PageElement)));
+    }(FormElementMixin(PageElement)));
 
-    exports.Section = void 0;
-    (function (Section) {
+    var MatCheckbox = /** @class */ (function (_super) {
+        __extends(MatCheckbox, _super);
+        function MatCheckbox(parentElementAccessor, text) {
+            return _super.call(this, parentElementAccessor, exports.ElementLocator.findBySelectorAndTextContent('mat-checkbox', text)) || this;
+        }
+        MatCheckbox.prototype.shouldBeChecked = function () {
+            this.hiddenCheckBoxElement().should('be.checked');
+        };
+        MatCheckbox.prototype.shouldNotBeChecked = function () {
+            this.hiddenCheckBoxElement().should('not.be.checked');
+        };
+        MatCheckbox.prototype.hiddenCheckBoxElement = function () {
+            return this.dom().find('input[type=checkbox]');
+        };
+        MatCheckbox.prototype.check = function () {
+            var _this = this;
+            this.hiddenCheckBoxElement().then(function (el) {
+                if (!el.prop('checked')) {
+                    _this.click();
+                    _this.shouldBeChecked();
+                }
+            });
+        };
+        MatCheckbox.prototype.uncheck = function () {
+            var _this = this;
+            this.hiddenCheckBoxElement().then(function (el) {
+                if (el.prop('checked')) {
+                    _this.click();
+                    _this.shouldNotBeChecked();
+                }
+            });
+        };
+        return MatCheckbox;
+    }(FormElementMixin(PageElement)));
+
+    exports.ComponentBuilder = /** @class */ (function () {
+        function ComponentBuilder(parentPageElement) {
+            this.parentPageElement = parentPageElement;
+        }
+        ComponentBuilder.prototype.find = function (selector) {
+            return new PageElement(this.parentPageElement, selector);
+        };
+        ComponentBuilder.prototype.section = function (selector, builder) {
+            return this.component(PageElement, selector, builder);
+        };
+        ComponentBuilder.prototype.contains = function (text) {
+            return new PageElement(this.parentPageElement, exports.ElementLocator.findByTextContent(text));
+        };
+        ComponentBuilder.prototype.button = function (text) {
+            return new Button(this.parentPageElement, text);
+        };
+        ComponentBuilder.prototype.matCheckbox = function (text) {
+            return new MatCheckbox(this.parentPageElement, text);
+        };
+        ComponentBuilder.prototype.aupStringInput = function (selector) {
+            return new exports.AupInput.HtmlInput(this.parentPageElement, selector !== null && selector !== void 0 ? selector : 'aup-string-input');
+        };
+        ComponentBuilder.prototype.aupTextInput = function (selector) {
+            return new exports.AupInput.TextAreaInput(this.parentPageElement, selector !== null && selector !== void 0 ? selector : 'aup-text-input');
+        };
+        ComponentBuilder.prototype.aupPasswordInput = function (selector) {
+            return new exports.AupInput.HtmlInput(this.parentPageElement, selector !== null && selector !== void 0 ? selector : 'aup-password-input');
+        };
+        ComponentBuilder.prototype.aupNumberInput = function (selector) {
+            return new exports.AupInput.HtmlInput(this.parentPageElement, selector !== null && selector !== void 0 ? selector : 'aup-number-input');
+        };
+        ComponentBuilder.prototype.aupCommand = function (faceOrSelector) {
+            return new AupCommand(this.parentPageElement, faceOrSelector);
+        };
+        ComponentBuilder.prototype.aupTabbedNavigation = function () {
+            return new AupNavigation(this.parentPageElement, 'aup-tabbed-place-navigation');
+        };
+        ComponentBuilder.prototype.aupSideNavigation = function () {
+            return new AupNavigation(this.parentPageElement, 'aup-list-place-nav');
+        };
+        ComponentBuilder.prototype.aupMoreMenu = function (selector) {
+            return AupMoreMenu.create(this.parentPageElement, selector);
+        };
+        ComponentBuilder.prototype.aupTable = function (selectorOrBuilder, optionalBuilder) {
+            return this.component(AupTable, selectorOrBuilder, optionalBuilder);
+        };
+        ComponentBuilder.prototype.aupTreeTable = function (selectorOrBuilder, optionalBuilder) {
+            return this.component(exports.AupTreeTable, selectorOrBuilder, optionalBuilder);
+        };
+        ComponentBuilder.prototype.aupEmptyState = function (selectorOrBuilder, optionalBuilder) {
+            return this.component(AupEmptyState, selectorOrBuilder, optionalBuilder);
+        };
+        ComponentBuilder.prototype.component = function (klass, selectorOrBuilder, optionalBuilder) {
+            var selector = ___namespace.isString(selectorOrBuilder) ? selectorOrBuilder : undefined;
+            var builder = ___namespace.isFunction(selectorOrBuilder) ? selectorOrBuilder : optionalBuilder;
+            var element = new klass(this.parentPageElement, selector);
+            if (builder) {
+                // create the B&E type that the builder has access to
+                var decoratedElement = typescriptUtilities.Mixin.createProxy(element, new ComponentBuilder(element));
+                // create final type that has the E & T type
+                return typescriptUtilities.Mixin.createProxy(decoratedElement, builder(decoratedElement));
+            }
+            else {
+                return element;
+            }
+        };
+        return ComponentBuilder;
+    }());
+    (function (ComponentBuilder) {
         function Mixin(Base) {
             return /** @class */ (function (_super) {
                 __extends(class_1, _super);
                 function class_1() {
-                    return _super !== null && _super.apply(this, arguments) || this;
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
+                    var _this = _super.apply(this, __spreadArray([], __read(args))) || this;
+                    _this.builder = new ComponentBuilder(_this);
+                    return _this;
                 }
-                class_1.prototype.section = function (selector, section) {
-                    var _this = this;
-                    var impl = new Impl(function () { return _this.element(); }, selector);
-                    return typescriptUtilities.Mixin.createProxy(section(impl), impl);
-                };
-                class_1.prototype.find = function (selector) {
-                    var _this = this;
-                    return new PageElement(function () { return _this.element(); }, selector);
-                };
-                class_1.prototype.contains = function (text) {
-                    var _this = this;
-                    return new PageElement(function () { return _this.element(); }, {
-                        findIn: function (parent) { return parent.contains(text); },
-                        shouldNotExist: function (parent) { return parent.should('not.contain', text); }
-                    });
-                };
-                class_1.prototype.button = function (text) {
-                    var _this = this;
-                    return new Button(function () { return _this.element(); }, text);
-                };
-                class_1.prototype.aupStringInput = function (selector) {
-                    var _this = this;
-                    return new exports.AupInput.HtmlInput(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-string-input');
-                };
-                class_1.prototype.aupTextInput = function (selector) {
-                    var _this = this;
-                    return new exports.AupInput.TextAreaInput(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-text-input');
-                };
-                class_1.prototype.aupPasswordInput = function (selector) {
-                    var _this = this;
-                    return new exports.AupInput.HtmlInput(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-password-input');
-                };
-                class_1.prototype.aupNumberInput = function (selector) {
-                    var _this = this;
-                    return new exports.AupInput.HtmlInput(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-number-input');
-                };
-                class_1.prototype.aupCommand = function (face) {
-                    return new AupCommand(this, face);
-                };
-                class_1.prototype.aupTabbedNavigation = function () {
-                    return new AupNavigation(this, 'aup-tabbed-place-navigation');
-                };
-                class_1.prototype.aupSideNavigation = function () {
-                    var _this = this;
-                    return new AupNavigation(function () { return _this.element(); }, 'aup-list-place-nav');
-                };
-                class_1.prototype.aupTable = function (selector) {
-                    var _this = this;
-                    return new exports.AupTable(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-table');
-                };
                 return class_1;
             }(Base));
         }
-        Section.Mixin = Mixin;
-        var Impl = /** @class */ (function (_super) {
-            __extends(Impl, _super);
-            function Impl() {
-                return _super !== null && _super.apply(this, arguments) || this;
+        ComponentBuilder.Mixin = Mixin;
+    })(exports.ComponentBuilder || (exports.ComponentBuilder = {}));
+
+    var AupAbstractActivity = /** @class */ (function (_super) {
+        __extends(AupAbstractActivity, _super);
+        function AupAbstractActivity(parent, selector) {
+            var _this = 
+            // @ts-ignore
+            _super.call(this, parent, selector) || this;
+            _this.title = _this.find('aup-activity-title');
+            _this._confirmCommand = _this.builder.aupCommand('[data-cy=confirm-command]');
+            _this._cancelCommand = _this.builder.aupCommand('[data-cy=cancel-command]');
+            return _this;
+        }
+        return AupAbstractActivity;
+    }(exports.ComponentBuilder.Mixin(PageElement)));
+
+    var AupAlert = /** @class */ (function (_super) {
+        __extends(AupAlert, _super);
+        function AupAlert(parent, selector) {
+            return _super.call(this, parent, selector) || this;
+        }
+        Object.defineProperty(AupAlert.prototype, "closeCommand", {
+            get: function () {
+                return this._confirmCommand;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AupAlert.prototype.clickClose = function () {
+            this.closeCommand.click();
+        };
+        return AupAlert;
+    }(AupAbstractActivity));
+
+    function AupModalMixin(Base) {
+        return /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                return _super.apply(this, __spreadArray([], __read(args))) || this;
             }
-            return Impl;
-        }(Mixin(PageElement)));
-    })(exports.Section || (exports.Section = {}));
+            class_1.prototype.getDefaultElementLocator = function () {
+                var _this = this;
+                return function (parent) {
+                    return parent.dom().closest('body').find(_this.getDefaultElementSelector());
+                };
+            };
+            class_1.prototype.clickBackdrop = function () {
+                this.dom()
+                    .closest(".cdk-overlay-container")
+                    .find(".cdk-overlay-backdrop").click(-50, -50, { force: true });
+            };
+            return class_1;
+        }(Base));
+    }
+
+    var AupAlertDialog = /** @class */ (function (_super) {
+        __extends(AupAlertDialog, _super);
+        function AupAlertDialog(parent, selector) {
+            return _super.call(this, parent, selector) || this;
+        }
+        return AupAlertDialog;
+    }(AupModalMixin(AupAlert)));
+
+    var AupConfirm = /** @class */ (function (_super) {
+        __extends(AupConfirm, _super);
+        function AupConfirm(parent, selector) {
+            return _super.call(this, parent, selector) || this;
+        }
+        Object.defineProperty(AupConfirm.prototype, "confirmCommand", {
+            get: function () {
+                return this._confirmCommand;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AupConfirm.prototype.clickConfirm = function () {
+            this.confirmCommand.click();
+        };
+        Object.defineProperty(AupConfirm.prototype, "cancelCommand", {
+            get: function () {
+                return this._cancelCommand;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AupConfirm.prototype.clickCancel = function () {
+            this.cancelCommand.click();
+        };
+        return AupConfirm;
+    }(AupAbstractActivity));
+
+    var AupConfirmDialog = /** @class */ (function (_super) {
+        __extends(AupConfirmDialog, _super);
+        function AupConfirmDialog(parent, selector) {
+            return _super.call(this, parent, selector) || this;
+        }
+        return AupConfirmDialog;
+    }(AupModalMixin(AupConfirm)));
+
+    var AupActivity = /** @class */ (function (_super) {
+        __extends(AupActivity, _super);
+        function AupActivity(parent, selector) {
+            return _super.call(this, parent, selector) || this;
+        }
+        Object.defineProperty(AupActivity.prototype, "confirmCommand", {
+            get: function () {
+                return this._confirmCommand;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AupActivity.prototype, "cancelCommand", {
+            get: function () {
+                return this._cancelCommand;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AupActivity;
+    }(AupAbstractActivity));
+
+    var AupModalActivity = /** @class */ (function (_super) {
+        __extends(AupModalActivity, _super);
+        function AupModalActivity() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return AupModalActivity;
+    }(AupModalMixin(AupActivity)));
+
+    var PageBuilder = /** @class */ (function (_super) {
+        __extends(PageBuilder, _super);
+        function PageBuilder() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        PageBuilder.prototype.aupModalActivity = function (selector, builder) {
+            return this.component(AupModalActivity, selector, builder);
+        };
+        PageBuilder.prototype.aupModalAlert = function (builder) {
+            return this.component(AupAlertDialog, builder);
+        };
+        PageBuilder.prototype.aupModelConfirm = function (builder) {
+            return this.component(AupConfirmDialog, builder);
+        };
+        return PageBuilder;
+    }(exports.ComponentBuilder));
+
+    var urlSerialiser = new router.DefaultUrlSerializer();
+    exports.Path = /** @class */ (function () {
+        function Path(segments) {
+            this.segments = segments;
+        }
+        Path.extractVisitParameters = function (url) {
+            var _a, _b;
+            var result = {};
+            var urlTree = urlSerialiser.parse(url);
+            var urlSegments = (_b = (_a = urlTree.root.children.primary) === null || _a === void 0 ? void 0 : _a.segments) !== null && _b !== void 0 ? _b : [];
+            urlSegments === null || urlSegments === void 0 ? void 0 : urlSegments.forEach(function (s) {
+                result = Object.assign(Object.assign({}, result), s.parameters);
+            });
+            return result;
+        };
+        Path.prototype.toUrl = function (matrixParams) {
+            return this.segments.map(function (s) { return s.toUrlPart(matrixParams); }).join('/');
+        };
+        return Path;
+    }());
+    (function (Path) {
+        function setUrlSerialiser(serialiser) {
+            urlSerialiser = serialiser;
+        }
+        Path.setUrlSerialiser = setUrlSerialiser;
+        var Segment = /** @class */ (function () {
+            function Segment(path, params) {
+                if (params === void 0) { params = {}; }
+                var _a;
+                this.path = path;
+                this.routeId = params === null || params === void 0 ? void 0 : params.routeId;
+                this.visitParams = (_a = params === null || params === void 0 ? void 0 : params.visitParams) !== null && _a !== void 0 ? _a : [];
+            }
+            Segment.prototype.toUrlPart = function (params) {
+                var path = this.path;
+                this.visitParams.forEach(function (p) {
+                    var value = params[p];
+                    if (value) {
+                        path = path + ";" + p + "=" + value;
+                    }
+                });
+                if (this.routeId && params[this.routeId]) {
+                    path = path + '/' + params[this.routeId];
+                }
+                return path;
+            };
+            return Segment;
+        }());
+        Path.Segment = Segment;
+        var Builder = /** @class */ (function () {
+            function Builder() {
+                this.segments = [];
+            }
+            Builder.prototype.segment = function (name, params) {
+                var builder = new Segment(name, params);
+                this.segments.push(builder);
+                return this;
+            };
+            Builder.prototype.getPath = function () {
+                return new Path(this.segments);
+            };
+            return Builder;
+        }());
+        Path.Builder = Builder;
+    })(exports.Path || (exports.Path = {}));
 
     exports.Page = /** @class */ (function (_super) {
         __extends(Page, _super);
@@ -786,7 +1200,7 @@
             _this.rootElementSelector = 'body';
             return _this;
         }
-        Page.prototype.element = function () {
+        Page.prototype.dom = function () {
             return cy.get(this.rootElementSelector);
         };
         Page.prototype.visit = function (visitParams, queryParams) {
@@ -813,7 +1227,7 @@
         };
         Page.prototype.shouldBeActive = function (withParameters) {
             // Note: cy.window() doesn't return a promise... it's a chainable.
-            cy["waitUntil"](function () {
+            cy['waitUntil'](function () {
                 return cy.window().then(function (window) {
                     return window['aup.PlaceRouter'] && !window['aup.PlaceRouter'].isNavigating();
                 });
@@ -832,26 +1246,19 @@
         return Page;
     }(PageElement));
     (function (Page) {
-        function create(pathOrPathBuilder, page) {
+        function create(pathOrPathBuilder, builder) {
             var pathBuilder = new exports.Path.Builder();
             if (___namespace.isString(pathOrPathBuilder)) {
-                pathOrPathBuilder.split("/").filter(function (p) { return !___namespace.isEmpty(p); }).forEach(function (p) { return pathBuilder.segment(p); });
+                pathOrPathBuilder.split('/').filter(function (p) { return !___namespace.isEmpty(p); }).forEach(function (p) { return pathBuilder.segment(p); });
             }
             else {
                 pathOrPathBuilder(pathBuilder);
             }
-            var builder = new PageBuilder(pathBuilder.getPath());
-            return typescriptUtilities.Mixin.createProxy(page(builder), builder);
+            var instance = new Page(pathBuilder.getPath());
+            var content = builder.call(instance, new PageBuilder(instance));
+            return typescriptUtilities.Mixin.createProxy(content, instance);
         }
         Page.create = create;
-        var PageBuilder = /** @class */ (function (_super) {
-            __extends(PageBuilder, _super);
-            function PageBuilder() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            return PageBuilder;
-        }(exports.Section.Mixin(Page)));
-        Page.PageBuilder = PageBuilder;
     })(exports.Page || (exports.Page = {}));
 
     var AupCommandGroup = /** @class */ (function (_super) {
@@ -862,49 +1269,41 @@
         return AupCommandGroup;
     }(PageElement));
 
-    var AupMoreMenu = /** @class */ (function (_super) {
-        __extends(AupMoreMenu, _super);
-        function AupMoreMenu() {
+    var AupToolBar = /** @class */ (function (_super) {
+        __extends(AupToolBar, _super);
+        function AupToolBar() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        AupMoreMenu.create = function (parent) {
-            return new AupMoreMenu(parent, 'aup-more-menu');
+        AupToolBar.create = function (parent, face) {
+            // const findFace = AupCommandFace.createFinder(() => parent.element(), face)
+            // return new AupCommandGroup(() => findFace().closest('button'));
         };
-        return AupMoreMenu;
+        return AupToolBar;
     }(PageElement));
 
     var AupPopupMenu = /** @class */ (function (_super) {
         __extends(AupPopupMenu, _super);
         function AupPopupMenu(parentElementAccessor, face) {
             var _this = this;
-            var accessor = AupCommandFace.createAccessor(face);
-            _this = _super.call(this, parentElementAccessor, {
-                findIn: function (parent) {
-                    return accessor.findIn(parent).closest('button');
-                },
-                shouldNotExist: function (parent) {
-                    accessor.shouldNotExist(parent);
-                }
-            }) || this;
+            var locator = AupCommandFace.createElementLocator(face);
+            _this = _super.call(this, parentElementAccessor, function (parent) { return locator(parent).closest('button'); }) || this;
             return _this;
         }
         AupPopupMenu.create = function (parent, face) {
             return new AupPopupMenu(parent, face);
         };
         return AupPopupMenu;
-    }(PageElement));
+    }(AupAbstractPopupMenu));
 
-    var AupToolBar = /** @class */ (function (_super) {
-        __extends(AupToolBar, _super);
-        function AupToolBar() {
+    var AupTableSelectionCell = /** @class */ (function (_super) {
+        __extends(AupTableSelectionCell, _super);
+        function AupTableSelectionCell() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        AupToolBar.create = function (parent, face) {
-            // const findFace = AupCommandFace.createFinder(() => parent.element(), face)
-            // return new AupCommandGroup(() => findFace().closest('button'));
+        AupTableSelectionCell.prototype.selectAll = function () {
         };
-        return AupToolBar;
-    }(PageElement));
+        return AupTableSelectionCell;
+    }(AupTableCell));
 
     /**
      * @file Automatically generated by barrelsby.
@@ -914,16 +1313,34 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.AupAbstractActivity = AupAbstractActivity;
+    exports.AupAbstractPopupMenu = AupAbstractPopupMenu;
+    exports.AupActivity = AupActivity;
+    exports.AupAlert = AupAlert;
+    exports.AupAlertDialog = AupAlertDialog;
     exports.AupCommand = AupCommand;
     exports.AupCommandFace = AupCommandFace;
     exports.AupCommandGroup = AupCommandGroup;
+    exports.AupConfirm = AupConfirm;
+    exports.AupConfirmDialog = AupConfirmDialog;
+    exports.AupEmptyState = AupEmptyState;
+    exports.AupModalActivity = AupModalActivity;
+    exports.AupModalMixin = AupModalMixin;
     exports.AupMoreMenu = AupMoreMenu;
     exports.AupNavigation = AupNavigation;
     exports.AupPopupMenu = AupPopupMenu;
+    exports.AupPopupMenuPanel = AupPopupMenuPanel;
+    exports.AupTable = AupTable;
+    exports.AupTableCell = AupTableCell;
+    exports.AupTableColumn = AupTableColumn;
+    exports.AupTableRow = AupTableRow;
+    exports.AupTableSelectionCell = AupTableSelectionCell;
+    exports.AupTableSelectionColumn = AupTableSelectionColumn;
     exports.AupToolBar = AupToolBar;
     exports.Button = Button;
-    exports.ButtonMixin = ButtonMixin;
-    exports.FaceAccessor = FaceAccessor;
+    exports.FormElementMixin = FormElementMixin;
+    exports.MatCheckbox = MatCheckbox;
+    exports.PageBuilder = PageBuilder;
     exports.PageElement = PageElement;
 
     Object.defineProperty(exports, '__esModule', { value: true });