@coolon/angular-ui-powerups 12.4.0-alpha.18 → 12.4.0-alpha.2

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

@@ -26,6 +26,53 @@
 
     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.have', 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.
 
@@ -338,124 +385,112 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    exports.ElementLocator = void 0;
-    (function (ElementLocator) {
-        function findByCssSelector(selector) {
-            return {
-                findIn: function (parent) { return parent.dom().find(selector); },
-                shouldNotExist: function (p) { return p.dom().find(selector).should('not.exist'); }
-            };
-        }
-        ElementLocator.findByCssSelector = findByCssSelector;
-        function findByTextContent(selector, text) {
-            return {
-                findIn: function (parent) {
-                    return parent.dom().contains(selector, text);
-                },
-                shouldNotExist: function (parent) {
-                    return parent.dom().should('not.contain', text);
-                }
-            };
-        }
-        ElementLocator.findByTextContent = findByTextContent;
-    })(exports.ElementLocator || (exports.ElementLocator = {}));
-
-    var PageElement = /** @class */ (function () {
-        function PageElement(parent, selectorOrLocator) {
-            this.parent = parent;
-            this.elementAccessStrategy = ___namespace.isString(selectorOrLocator) ?
-                exports.ElementLocator.findByCssSelector(selectorOrLocator) :
-                selectorOrLocator;
+    var urlSerialiser = new router.DefaultUrlSerializer();
+    exports.Path = /** @class */ (function () {
+        function Path(segments) {
+            this.segments = segments;
         }
-        PageElement.prototype.dom = function () {
-            return this.elementAccessStrategy.findIn(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');
+        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;
         };
-        PageElement.prototype.shouldExist = function () {
-            this.dom().should('exist');
+        Path.prototype.toUrl = function (matrixParams) {
+            return this.segments.map(function (s) { return s.toUrlPart(matrixParams); }).join('/');
         };
-        PageElement.prototype.shouldNotExist = function () {
-            if (!this.elementAccessStrategy.shouldNotExist) {
-                this.dom().should("not.exist");
+        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 : [];
             }
-            else {
-                this.elementAccessStrategy.shouldNotExist(this.parent);
+            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 = [];
             }
-        };
-        return PageElement;
-    }());
+            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 FaceElementLocator = /** @class */ (function () {
-        function FaceElementLocator(face) {
+    var FaceAccessor = /** @class */ (function () {
+        function FaceAccessor(face) {
             this.face = face;
         }
-        FaceElementLocator.prototype.findIn = function (parent) {
+        FaceAccessor.prototype.findIn = function (parent) {
             return this.face.text ?
-                parent.dom().contains("aup-command-face", this.face.text()) :
+                parent.contains("aup-command-face", this.face.text()) :
                 this.face.icon ?
-                    parent.dom().find("aup-icon[ng-reflect-icon=" + this.face.icon() + "]").closest('aup-command-face') :
+                    parent.find("aup-icon[ng-reflect-icon=" + this.face.icon() + "]").closest('aup-command-face') :
                     undefined;
         };
-        FaceElementLocator.prototype.shouldNotExist = function (parent) {
+        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 FaceElementLocator;
+        return FaceAccessor;
     }());
     var AupCommandFace = /** @class */ (function (_super) {
         __extends(AupCommandFace, _super);
         function AupCommandFace(parentElement, face) {
-            return _super.call(this, parentElement, AupCommandFace.createElementLocator(face)) || this;
+            return _super.call(this, function () { return parentElement.element(); }, AupCommandFace.createAccessor(face)) || this;
         }
-        AupCommandFace.createElementLocator = function (face) {
-            return new FaceElementLocator(face);
+        AupCommandFace.createAccessor = function (face) {
+            return new FaceAccessor(face);
         };
         return AupCommandFace;
     }(PageElement));
 
     var AupCommand = /** @class */ (function (_super) {
         __extends(AupCommand, _super);
-        function AupCommand(parent, faceOrSelector) {
-            return _super.call(this, parent, {
+        function AupCommand(parent, face) {
+            var _this = this;
+            var faceAccessor = AupCommandFace.createAccessor(face);
+            _this = _super.call(this, parent, {
                 findIn: function (parentElement) {
-                    if (___namespace.isString(faceOrSelector)) {
-                        return parentElement.dom().find(faceOrSelector);
-                    }
-                    else {
-                        return AupCommandFace.createElementLocator(faceOrSelector).findIn(parentElement).closest('aup-command');
-                    }
-                },
-                shouldNotExist: function (parentElement) {
-                    this.findIn(parentElement).should("not.exist");
+                    return faceAccessor.findIn(parentElement).closest('aup-command');
                 }
             }) || this;
+            return _this;
         }
         AupCommand.prototype.click = function () {
             this.getButton().click();
@@ -467,35 +502,24 @@
             this.getButton().should('be.disabled');
         };
         AupCommand.prototype.getButton = function () {
-            return this.dom().find('button');
+            return this.element().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.dom().find('label');
+            return this.element().find('label');
         };
         AupInput.prototype.hint = function () {
-            return this.dom().find('mat-hint');
+            return this.element().find('mat-hint');
         };
         AupInput.prototype.error = function () {
-            return this.dom().find('mat-error');
+            return this.element().find('mat-error');
         };
         Object.defineProperty(AupInput.prototype, "labelShould", {
             get: function () {
@@ -527,18 +551,6 @@
         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) {
@@ -548,7 +560,7 @@
                 return _super !== null && _super.apply(this, arguments) || this;
             }
             HtmlInput.prototype.input = function () {
-                return this.dom().find('input');
+                return this.element().find('input');
             };
             HtmlInput.prototype.clear = function () {
                 this.input().clear();
@@ -574,7 +586,7 @@
                 return this.input();
             };
             TextAreaInput.prototype.input = function () {
-                return this.dom().find('textarea');
+                return this.element().find('textarea');
             };
             TextAreaInput.prototype.clear = function () {
                 this.input().clear();
@@ -605,148 +617,61 @@
             this.face(label).shouldBeVisible();
         };
         AupNavigation.prototype.shouldNotHaveLink = function (label) {
-            this.face(label).shouldNotExist();
+            this.face(label).shouldNotBeVisible();
         };
         return AupNavigation;
     }(PageElement));
 
     exports.AupTable = /** @class */ (function (_super) {
         __extends(AupTable, _super);
-        function AupTable() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function AupTable(parentElementAccessor, selector) {
+            return _super.call(this, parentElementAccessor, selector) || this;
         }
         AupTable.prototype.row = function (rowId) {
-            return new AupTable.Row(this, AupTable.cssSelectorForTableRowById(rowId));
-        };
-        AupTable.prototype.rowNumber = function (rowNumber) {
-            return new AupTable.Row(this, AupTable.cssSelectorForNthTableRow(rowNumber));
+            var _this = this;
+            return new AupTable.Row(function () { return _this.element(); }, "tr[aup-table-id=" + rowId + "]");
         };
         AupTable.prototype.column = function (columnId) {
             return new AupTable.Column(this, columnId);
         };
-        AupTable.prototype.selectionColumn = function () {
-            return new AupTable.SelectionColumn(this, 'selection-column');
-        };
         return AupTable;
     }(PageElement));
     (function (AupTable) {
-        function cssSelectorForTableRowById(rowId) {
-            return "tbody tr[aup-row-id=" + rowId + "]";
-        }
-        AupTable.cssSelectorForTableRowById = cssSelectorForTableRowById;
-        function cssSelectorForNthTableRow(rowNumber) {
-            return "tbody tr:nth-child(" + rowNumber + ")";
-        }
-        AupTable.cssSelectorForNthTableRow = cssSelectorForNthTableRow;
-        function cssSelectorForColumnCellRendererById(columnId) {
-            return "aup-table-cell-renderer[column-id=" + columnId + "]";
-        }
-        AupTable.cssSelectorForColumnCellRendererById = cssSelectorForColumnCellRendererById;
-        function cssSelectorForCell(rowId, columnId) {
-            return cssSelectorForTableRowById(rowId) + " " + cssSelectorForColumnCellRendererById(columnId);
-        }
-        AupTable.cssSelectorForCell = cssSelectorForCell;
         var Row = /** @class */ (function (_super) {
             __extends(Row, _super);
-            function Row(table, selectorOrLocator) {
-                var _this = 
-                // @ts-ignore
-                _super.call(this, table, selectorOrLocator) || this;
-                _this.table = table;
-                return _this;
+            function Row() {
+                return _super !== null && _super.apply(this, arguments) || this;
             }
-            Row.prototype.rowId = function () {
-                return this.dom()
-                    .invoke('attr', 'aup-row-id');
-            };
-            Row.prototype.shouldHaveRowId = function (rowId) {
-                this.rowId().should("eq", rowId);
-            };
-            Row.prototype.cell = function (columnOrId) {
-                var self = this;
-                var columnId = ___namespace.isString(columnOrId) ? columnOrId : columnOrId.columnId;
-                return new Cell(this.table, {
-                    findIn: function (parent) {
-                        return self.rowId()
-                            .then(function (rowId) { return AupTable.cssSelectorForCell(rowId, columnId); })
-                            .then(function (selector) { return parent.dom().find(selector); });
-                    }
-                });
-            };
-            Row.prototype.shouldBeSelected = function () {
-                this.dom().should('have.class', 'aup-row-selected');
-            };
-            Row.prototype.shouldNotBeSelected = function () {
-                this.dom().should('not.have.class', 'aup-row-selected');
-            };
             return Row;
         }(PageElement));
         AupTable.Row = Row;
-        var Column = /** @class */ (function (_super) {
-            __extends(Column, _super);
+        var Column = /** @class */ (function () {
             function Column(table, columnId) {
-                var _this = _super.call(this, table, "aup-table-header-cell-renderer[column-id=\"" + columnId + "\"]") || this;
-                _this.table = table;
-                _this.columnId = columnId;
-                return _this;
+                this.table = table;
+                this.columnId = columnId;
             }
-            Column.prototype.cellContaining = function (content) {
+            Column.prototype.cell = function (content) {
                 var self = this;
                 return new Cell(this.table, {
                     findIn: function (parent) {
-                        return parent.dom().contains(cssSelectorForColumnCellRendererById(self.columnId), content);
+                        return parent.contains("aup-table-cell-renderer[column-id=" + self.columnId + "]", content);
                     }
                 });
             };
-            Column.prototype.rowContaining = function (content) {
-                return this.cellContaining(content).row();
-            };
             return Column;
-        }(PageElement));
+        }());
         AupTable.Column = Column;
-        var SelectionColumn = /** @class */ (function (_super) {
-            __extends(SelectionColumn, _super);
-            function SelectionColumn() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            SelectionColumn.prototype.selectAll = function () {
-            };
-            return SelectionColumn;
-        }(Column));
-        AupTable.SelectionColumn = SelectionColumn;
         var Cell = /** @class */ (function (_super) {
             __extends(Cell, _super);
-            function Cell(table, elementLocator) {
-                var _this = _super.call(this, table, elementLocator) || this;
-                _this.table = table;
-                return _this;
+            function Cell() {
+                return _super !== null && _super.apply(this, arguments) || this;
             }
-            Cell.prototype.rowId = function () {
-                return this.dom().closest('tr').invoke('attr', 'aup-row-id');
-            };
-            Cell.prototype.row = function () {
-                var self = this;
-                return new Row(this.table, {
-                    findIn: function (parent) {
-                        return self.rowId()
-                            .then(function (rowId) { return parent.dom().find(AupTable.cssSelectorForTableRowById(rowId)); });
-                    }
-                });
-            };
             return Cell;
         }(PageElement));
         AupTable.Cell = Cell;
-        var SelectionColumnCell = /** @class */ (function (_super) {
-            __extends(SelectionColumnCell, _super);
-            function SelectionColumnCell() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            return SelectionColumnCell;
-        }(Cell));
-        AupTable.SelectionColumnCell = SelectionColumnCell;
     })(exports.AupTable || (exports.AupTable = {}));
 
-    function FormElementMixin(Base) {
+    function ButtonMixin(Base) {
         return /** @class */ (function (_super) {
             __extends(class_1, _super);
             function class_1() {
@@ -756,8 +681,12 @@
                 }
                 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));
@@ -766,294 +695,88 @@
     var Button = /** @class */ (function (_super) {
         __extends(Button, _super);
         function Button(parentElementAccessor, buttonText) {
-            return _super.call(this, parentElementAccessor, exports.ElementLocator.findByTextContent('button', buttonText)) || this;
-        }
-        return Button;
-    }(FormElementMixin(PageElement)));
-
-    var MatCheckbox = /** @class */ (function (_super) {
-        __extends(MatCheckbox, _super);
-        function MatCheckbox(parentElementAccessor, text) {
-            return _super.call(this, parentElementAccessor, exports.ElementLocator.findByTextContent('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)));
-
-    var Builder = /** @class */ (function () {
-        function Builder(parentPageElement) {
-            this.parentPageElement = parentPageElement;
-        }
-        Builder.prototype.find = function (selector) {
-            return new PageElement(this.parentPageElement, selector);
-        };
-        Builder.prototype.section = function (selector, builder) {
-            return this.createContainerElement(PageElement, selector, builder);
-        };
-        Builder.prototype.contains = function (text) {
-            return new PageElement(this.parentPageElement, {
+            return _super.call(this, parentElementAccessor, {
                 findIn: function (parent) {
-                    return parent.dom().contains(text);
+                    return parent.contains('button', buttonText);
                 },
                 shouldNotExist: function (parent) {
-                    return parent.dom().should('not.contain', text);
+                    return parent.should('not.contain', buttonText);
                 }
-            });
-        };
-        Builder.prototype.button = function (text) {
-            return new Button(this.parentPageElement, text);
-        };
-        Builder.prototype.matCheckbox = function (text) {
-            return new MatCheckbox(this.parentPageElement, text);
-        };
-        Builder.prototype.aupStringInput = function (selector) {
-            return new exports.AupInput.HtmlInput(this.parentPageElement, selector !== null && selector !== void 0 ? selector : 'aup-string-input');
-        };
-        Builder.prototype.aupTextInput = function (selector) {
-            return new exports.AupInput.TextAreaInput(this.parentPageElement, selector !== null && selector !== void 0 ? selector : 'aup-text-input');
-        };
-        Builder.prototype.aupPasswordInput = function (selector) {
-            return new exports.AupInput.HtmlInput(this.parentPageElement, selector !== null && selector !== void 0 ? selector : 'aup-password-input');
-        };
-        Builder.prototype.aupNumberInput = function (selector) {
-            return new exports.AupInput.HtmlInput(this.parentPageElement, selector !== null && selector !== void 0 ? selector : 'aup-number-input');
-        };
-        Builder.prototype.aupCommand = function (faceOrSelector) {
-            return new AupCommand(this.parentPageElement, faceOrSelector);
-        };
-        Builder.prototype.aupTabbedNavigation = function () {
-            return new AupNavigation(this.parentPageElement, 'aup-tabbed-place-navigation');
-        };
-        Builder.prototype.aupSideNavigation = function () {
-            return new AupNavigation(this.parentPageElement, 'aup-list-place-nav');
-        };
-        Builder.prototype.aupTable = function (selectorOrBuilder, optionalBuilder) {
-            return this.createContainerElement(exports.AupTable, selectorOrBuilder, optionalBuilder, 'aup-table');
-        };
-        Builder.prototype.aupEmptyState = function (selectorOrBuilder, optionalBuilder) {
-            return this.createContainerElement(AupEmptyState, selectorOrBuilder, optionalBuilder, 'aup-empty-state');
-        };
-        // TODO: use this in all the element factory methods to allow customisation
-        Builder.prototype.createElement = function (klass, selectorOrBuilder, optionalBuilder, defaultSelector) {
-            var selector = ___namespace.isString(selectorOrBuilder) ? selectorOrBuilder : defaultSelector;
-            var builder = ___namespace.isFunction(selectorOrBuilder) ? selectorOrBuilder : optionalBuilder;
-            if (!selector) {
-                typescriptUtilities.lang.illegalState('This element requires a selector but none was provided');
-            }
-            var element = new klass(this.parentPageElement, selector);
-            if (builder) {
-                return typescriptUtilities.Mixin.createProxy(element, builder(element));
-            }
-            else {
-                return element;
-            }
-        };
-        Builder.prototype.createContainerElement = function (klass, selectorOrBuilder, optionalBuilder, defaultSelector) {
-            var selector = ___namespace.isString(selectorOrBuilder) ? selectorOrBuilder : defaultSelector;
-            var builder = ___namespace.isFunction(selectorOrBuilder) ? selectorOrBuilder : optionalBuilder;
-            if (!selector) {
-                typescriptUtilities.lang.illegalState('This element requires a selector but none was provided');
-            }
-            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 Builder(element));
-                // create final type that has the E & T type
-                return typescriptUtilities.Mixin.createProxy(decoratedElement, builder(decoratedElement));
-            }
-            else {
-                return element;
-            }
-        };
-        return Builder;
-    }());
-
-    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 = new Builder(_this).aupCommand('[data-cy=confirm-command]');
-            _this._cancelCommand = new Builder(_this).aupCommand('[data-cy=cancel-command]');
-            return _this;
-        }
-        return AupAbstractActivity;
-    }(PageElement));
-
-    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;
-        }
-        AupModalActivity.prototype.clickBackdrop = function () {
-            this.dom().closest(".cdk-overlay-backdrop").click(-50, -50, { force: true });
-        };
-        return AupModalActivity;
-    }(AupActivity));
-
-    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));
-
-    var AupModalAlert = /** @class */ (function (_super) {
-        __extends(AupModalAlert, _super);
-        function AupModalAlert(parent, selector) {
-            return _super.call(this, parent, selector) || this;
-        }
-        AupModalAlert.prototype.clickBackdrop = function () {
-            this.dom()
-                .closest(".cdk-overlay-container")
-                .find(".cdk-overlay-backdrop").click(-50, -50, { force: true });
-        };
-        return AupModalAlert;
-    }(AupAlert));
-
-    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.createContainerElement(AupModalActivity, ".dialog-interaction-context " + selector, builder);
-        };
-        PageBuilder.prototype.aupModalAlert = function (builder) {
-            return this.createContainerElement(AupModalAlert, ".dialog-interaction-context aup-alert-dialog", builder);
-        };
-        PageBuilder.prototype.aupModelConfirm = function (builder) {
-            return this.aupModalActivity("aup-confirm-dialog", builder);
-        };
-        return PageBuilder;
-    }(Builder));
-
-    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;
+            }) || this;
         }
-        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 Button;
+    }(ButtonMixin(PageElement)));
+
+    exports.Section = void 0;
+    (function (Section) {
+        function Mixin(Base) {
+            return /** @class */ (function (_super) {
+                __extends(class_1, _super);
+                function class_1() {
+                    return _super !== null && _super.apply(this, arguments) || this;
                 }
-                return path;
-            };
-            return Segment;
-        }());
-        Path.Segment = Segment;
-        var Builder = /** @class */ (function () {
-            function Builder() {
-                this.segments = [];
+                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;
             }
-            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 = {}));
+            return Impl;
+        }(Mixin(PageElement)));
+    })(exports.Section || (exports.Section = {}));
 
     exports.Page = /** @class */ (function (_super) {
         __extends(Page, _super);
@@ -1063,7 +786,7 @@
             _this.rootElementSelector = 'body';
             return _this;
         }
-        Page.prototype.dom = function () {
+        Page.prototype.element = function () {
             return cy.get(this.rootElementSelector);
         };
         Page.prototype.visit = function (visitParams, queryParams) {
@@ -1090,7 +813,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();
                 });
@@ -1109,19 +832,26 @@
         return Page;
     }(PageElement));
     (function (Page) {
-        function create(pathOrPathBuilder, builder) {
+        function create(pathOrPathBuilder, page) {
             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 instance = new Page(pathBuilder.getPath());
-            var content = builder.call(instance, new PageBuilder(instance));
-            return typescriptUtilities.Mixin.createProxy(content, instance);
+            var builder = new PageBuilder(pathBuilder.getPath());
+            return typescriptUtilities.Mixin.createProxy(page(builder), builder);
         }
         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) {
@@ -1147,13 +877,13 @@
         __extends(AupPopupMenu, _super);
         function AupPopupMenu(parentElementAccessor, face) {
             var _this = this;
-            var locator = AupCommandFace.createElementLocator(face);
+            var accessor = AupCommandFace.createAccessor(face);
             _this = _super.call(this, parentElementAccessor, {
                 findIn: function (parent) {
-                    return locator.findIn(parent).closest('button');
+                    return accessor.findIn(parent).closest('button');
                 },
                 shouldNotExist: function (parent) {
-                    locator.shouldNotExist(parent);
+                    accessor.shouldNotExist(parent);
                 }
             }) || this;
             return _this;
@@ -1184,25 +914,16 @@
      * Generated bundle index. Do not edit.
      */
 
-    exports.AupAbstractActivity = AupAbstractActivity;
-    exports.AupActivity = AupActivity;
-    exports.AupAlert = AupAlert;
     exports.AupCommand = AupCommand;
     exports.AupCommandFace = AupCommandFace;
     exports.AupCommandGroup = AupCommandGroup;
-    exports.AupEmptyState = AupEmptyState;
-    exports.AupModalActivity = AupModalActivity;
-    exports.AupModalAlert = AupModalAlert;
     exports.AupMoreMenu = AupMoreMenu;
     exports.AupNavigation = AupNavigation;
     exports.AupPopupMenu = AupPopupMenu;
     exports.AupToolBar = AupToolBar;
-    exports.Builder = Builder;
     exports.Button = Button;
-    exports.FaceElementLocator = FaceElementLocator;
-    exports.FormElementMixin = FormElementMixin;
-    exports.MatCheckbox = MatCheckbox;
-    exports.PageBuilder = PageBuilder;
+    exports.ButtonMixin = ButtonMixin;
+    exports.FaceAccessor = FaceAccessor;
     exports.PageElement = PageElement;
 
     Object.defineProperty(exports, '__esModule', { value: true });