@pnp/sp 2.7.0 → 2.11.0

package/clientside-pages/types.js

@@ -1,1486 +1,1497 @@
-import { __awaiter, __decorate, __extends, __generator, __read, __spreadArray } from "tslib";
-import { invokableFactory, body, headers } from "@pnp/odata";
-import { assign, getGUID, hOP, stringIsNullOrEmpty, objectDefinedNotNull, combine, isUrlAbsolute, isArray } from "@pnp/common";
-import { Item } from "../items/types.js";
-import { SharePointQueryable, _SharePointQueryable, SharePointQueryableCollection } from "../sharepointqueryable.js";
-import { metadata } from "../utils/metadata.js";
-import { List } from "../lists/types.js";
-import { odataUrlFrom } from "../odata.js";
-import { Web } from "../webs/types.js";
-import { extractWebUrl } from "../utils/extractweburl.js";
-import { Site } from "../sites/types.js";
-import { spPost } from "../operations.js";
-import { getNextOrder, reindex } from "./funcs.js";
-import "../files/web.js";
-import "../comments/item.js";
-import { tag } from "../telemetry.js";
-/**
- * Page promotion state
- */
-export var PromotedState;
-(function (PromotedState) {
-    /**
-     * Regular client side page
-     */
-    PromotedState[PromotedState["NotPromoted"] = 0] = "NotPromoted";
-    /**
-     * Page that will be promoted as news article after publishing
-     */
-    PromotedState[PromotedState["PromoteOnPublish"] = 1] = "PromoteOnPublish";
-    /**
-     * Page that is promoted as news article
-     */
-    PromotedState[PromotedState["Promoted"] = 2] = "Promoted";
-})(PromotedState || (PromotedState = {}));
-function initFrom(o, url) {
-    return ClientsidePage(extractWebUrl(o.toUrl()), url).configureFrom(o);
-}
-/**
- * Represents the data and methods associated with client side "modern" pages
- */
-var _ClientsidePage = /** @class */ (function (_super) {
-    __extends(_ClientsidePage, _super);
-    /**
-     * PLEASE DON'T USE THIS CONSTRUCTOR DIRECTLY, thank you 🐇
-     */
-    function _ClientsidePage(baseUrl, path, json, noInit, sections, commentsDisabled) {
-        if (noInit === void 0) { noInit = false; }
-        if (sections === void 0) { sections = []; }
-        if (commentsDisabled === void 0) { commentsDisabled = false; }
-        var _this = _super.call(this, baseUrl, path) || this;
-        _this.json = json;
-        _this.sections = sections;
-        _this.commentsDisabled = commentsDisabled;
-        _this._bannerImageDirty = false;
-        _this._bannerImageThumbnailUrlDirty = false;
-        // ensure we have a good url to build on for the pages api
-        if (typeof baseUrl === "string") {
-            _this.data.parentUrl = "";
-            _this.data.url = combine(extractWebUrl(baseUrl), path);
-        }
-        else {
-            _this.assign(initFrom(baseUrl, null), path);
-        }
-        // set a default page settings slice
-        _this._pageSettings = { controlType: 0, pageSettingsSlice: { isDefaultDescription: true, isDefaultThumbnail: true } };
-        // set a default layout part
-        _this._layoutPart = _ClientsidePage.getDefaultLayoutPart();
-        if (typeof json !== "undefined" && !noInit) {
-            _this.fromJSON(json);
-        }
-        return _this;
-    }
-    _ClientsidePage.getDefaultLayoutPart = function () {
-        return {
-            dataVersion: "1.4",
-            description: "Title Region Description",
-            id: "cbe7b0a9-3504-44dd-a3a3-0e5cacd07788",
-            instanceId: "cbe7b0a9-3504-44dd-a3a3-0e5cacd07788",
-            properties: {
-                authorByline: [],
-                authors: [],
-                layoutType: "FullWidthImage",
-                showPublishDate: false,
-                showTopicHeader: false,
-                textAlignment: "Left",
-                title: "",
-                topicHeader: "",
-            },
-            reservedHeight: 280,
-            serverProcessedContent: { htmlStrings: {}, searchablePlainTexts: {}, imageSources: {}, links: {} },
-            title: "Title area",
-        };
-    };
-    Object.defineProperty(_ClientsidePage.prototype, "pageLayout", {
-        get: function () {
-            return this.json.PageLayoutType;
-        },
-        set: function (value) {
-            this.json.PageLayoutType = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "bannerImageUrl", {
-        get: function () {
-            return this.json.BannerImageUrl;
-        },
-        set: function (value) {
-            this.setBannerImage(value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "thumbnailUrl", {
-        get: function () {
-            return this._pageSettings.pageSettingsSlice.isDefaultThumbnail ? this.json.BannerImageUrl : this.json.BannerThumbnailUrl;
-        },
-        set: function (value) {
-            this.json.BannerThumbnailUrl = value;
-            this._bannerImageThumbnailUrlDirty = true;
-            this._pageSettings.pageSettingsSlice.isDefaultThumbnail = false;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "topicHeader", {
-        get: function () {
-            return objectDefinedNotNull(this.json.TopicHeader) ? this.json.TopicHeader : "";
-        },
-        set: function (value) {
-            this.json.TopicHeader = value;
-            this._layoutPart.properties.topicHeader = value;
-            if (stringIsNullOrEmpty(value)) {
-                this.showTopicHeader = false;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "title", {
-        get: function () {
-            return this._layoutPart.properties.title;
-        },
-        set: function (value) {
-            this.json.Title = value;
-            this._layoutPart.properties.title = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "reservedHeight", {
-        get: function () {
-            return this._layoutPart.reservedHeight;
-        },
-        set: function (value) {
-            this._layoutPart.reservedHeight = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "description", {
-        get: function () {
-            return this.json.Description;
-        },
-        set: function (value) {
-            if (!stringIsNullOrEmpty(value) && value.length > 255) {
-                throw Error("Modern Page description is limited to 255 chars.");
-            }
-            this.json.Description = value;
-            if (!hOP(this._pageSettings, "htmlAttributes")) {
-                this._pageSettings.htmlAttributes = [];
-            }
-            if (this._pageSettings.htmlAttributes.indexOf("modifiedDescription") < 0) {
-                this._pageSettings.htmlAttributes.push("modifiedDescription");
-            }
-            this._pageSettings.pageSettingsSlice.isDefaultDescription = false;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "layoutType", {
-        get: function () {
-            return this._layoutPart.properties.layoutType;
-        },
-        set: function (value) {
-            this._layoutPart.properties.layoutType = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "headerTextAlignment", {
-        get: function () {
-            return this._layoutPart.properties.textAlignment;
-        },
-        set: function (value) {
-            this._layoutPart.properties.textAlignment = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "showTopicHeader", {
-        get: function () {
-            return this._layoutPart.properties.showTopicHeader;
-        },
-        set: function (value) {
-            this._layoutPart.properties.showTopicHeader = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "showPublishDate", {
-        get: function () {
-            return this._layoutPart.properties.showPublishDate;
-        },
-        set: function (value) {
-            this._layoutPart.properties.showPublishDate = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "hasVerticalSection", {
-        get: function () {
-            return this.sections.findIndex(function (s) { return s.layoutIndex === 2; }) > -1;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "authorByLine", {
-        get: function () {
-            if (isArray(this._layoutPart.properties.authorByline) && this._layoutPart.properties.authorByline.length > 0) {
-                return this._layoutPart.properties.authorByline[0];
-            }
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(_ClientsidePage.prototype, "verticalSection", {
-        get: function () {
-            if (this.hasVerticalSection) {
-                return this.addVerticalSection();
-            }
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Add a section to this page
-     */
-    _ClientsidePage.prototype.addSection = function () {
-        var section = new CanvasSection(this, getNextOrder(this.sections), 1);
-        this.sections.push(section);
-        return section;
-    };
-    /**
-     * Add a section to this page
-     */
-    _ClientsidePage.prototype.addVerticalSection = function () {
-        // we can only have one vertical section so we find it if it exists
-        var sectionIndex = this.sections.findIndex(function (s) { return s.layoutIndex === 2; });
-        if (sectionIndex > -1) {
-            return this.sections[sectionIndex];
-        }
-        var section = new CanvasSection(this, getNextOrder(this.sections), 2);
-        this.sections.push(section);
-        return section;
-    };
-    /**
-     * Loads this instance from the appropriate JSON data
-     *
-     * @param pageData JSON data to load (replaces any existing data)
-     */
-    _ClientsidePage.prototype.fromJSON = function (pageData) {
-        this.json = pageData;
-        var canvasControls = JSON.parse(pageData.CanvasContent1);
-        var layouts = JSON.parse(pageData.LayoutWebpartsContent);
-        if (layouts && layouts.length > 0) {
-            this._layoutPart = layouts[0];
-        }
-        this.setControls(canvasControls);
-        return this;
-    };
-    /**
-     * Loads this page's content from the server
-     */
-    _ClientsidePage.prototype.load = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var item, pageData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.getItem("Id", "CommentsDisabled")];
-                    case 1:
-                        item = _a.sent();
-                        return [4 /*yield*/, SharePointQueryable(this, "_api/sitepages/pages(" + item.Id + ")")()];
-                    case 2:
-                        pageData = _a.sent();
-                        this.commentsDisabled = item.CommentsDisabled;
-                        return [2 /*return*/, this.fromJSON(pageData)];
-                }
-            });
-        });
-    };
-    /**
-     * Persists the content changes (sections, columns, and controls) [does not work with batching]
-     *
-     * @param publish If true the page is published, if false the changes are persisted to SharePoint but not published [Default: true]
-     */
-    _ClientsidePage.prototype.save = function (publish) {
-        if (publish === void 0) { publish = true; }
-        return __awaiter(this, void 0, void 0, function () {
-            var serverRelativePath, imgInfo_1, webUrl_1, web, batch, f, saveBody, bannerImageUrlValue, updater, r;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (this.json.Id === null) {
-                            throw Error("The id for this page is null. If you want to create a new page, please use ClientSidePage.Create");
-                        }
-                        if (!this._bannerImageDirty) return [3 /*break*/, 2];
-                        serverRelativePath = this.bannerImageUrl;
-                        web = Web(extractWebUrl(this.toUrl())).configureFrom(this);
-                        batch = web.createBatch();
-                        web.getFileByServerRelativePath(serverRelativePath.replace(/%20/ig, " "))
-                            .select("ListId", "WebId", "UniqueId", "Name", "SiteId").inBatch(batch)().then(function (r1) { return imgInfo_1 = r1; });
-                        web.select("Url").inBatch(batch)().then(function (r2) { return webUrl_1 = r2.Url; });
-                        // we know the .then calls above will run before execute resolves, ensuring the vars are set
-                        return [4 /*yield*/, batch.execute()];
-                    case 1:
-                        // we know the .then calls above will run before execute resolves, ensuring the vars are set
-                        _a.sent();
-                        f = SharePointQueryable(webUrl_1, "_layouts/15/getpreview.ashx");
-                        f.query.set("guidSite", "" + imgInfo_1.SiteId);
-                        f.query.set("guidWeb", "" + imgInfo_1.WebId);
-                        f.query.set("guidFile", "" + imgInfo_1.UniqueId);
-                        this.bannerImageUrl = f.toUrlAndQuery();
-                        if (!objectDefinedNotNull(this._layoutPart.serverProcessedContent)) {
-                            this._layoutPart.serverProcessedContent = {};
-                        }
-                        this._layoutPart.serverProcessedContent.imageSources = { imageSource: serverRelativePath };
-                        if (!objectDefinedNotNull(this._layoutPart.serverProcessedContent.customMetadata)) {
-                            this._layoutPart.serverProcessedContent.customMetadata = {};
-                        }
-                        this._layoutPart.serverProcessedContent.customMetadata.imageSource = {
-                            listId: imgInfo_1.ListId,
-                            siteId: imgInfo_1.SiteId,
-                            uniqueId: imgInfo_1.UniqueId,
-                            webId: imgInfo_1.WebId,
-                        };
-                        this._layoutPart.properties.webId = imgInfo_1.WebId;
-                        this._layoutPart.properties.siteId = imgInfo_1.SiteId;
-                        this._layoutPart.properties.listId = imgInfo_1.ListId;
-                        this._layoutPart.properties.uniqueId = imgInfo_1.UniqueId;
-                        _a.label = 2;
-                    case 2:
-                        if (!!this.json.IsPageCheckedOutToCurrentUser) return [3 /*break*/, 4];
-                        return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/checkoutpage"))];
-                    case 3:
-                        _a.sent();
-                        _a.label = 4;
-                    case 4:
-                        saveBody = Object.assign(metadata("SP.Publishing.SitePage"), {
-                            AuthorByline: this.json.AuthorByline || [],
-                            CanvasContent1: this.getCanvasContent1(),
-                            Description: this.description,
-                            LayoutWebpartsContent: this.getLayoutWebpartsContent(),
-                            Title: this.title,
-                            TopicHeader: this.topicHeader,
-                        });
-                        if (this._bannerImageDirty || this._bannerImageThumbnailUrlDirty) {
-                            bannerImageUrlValue = this._bannerImageThumbnailUrlDirty ? this.thumbnailUrl : this.bannerImageUrl;
-                            saveBody = assign(saveBody, {
-                                BannerImageUrl: bannerImageUrlValue,
-                            });
-                        }
-                        updater = initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/savepage");
-                        return [4 /*yield*/, spPost(updater, headers({ "if-match": "*" }, body(saveBody)))];
-                    case 5:
-                        _a.sent();
-                        r = true;
-                        if (!publish) return [3 /*break*/, 7];
-                        return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/publish"))];
-                    case 6:
-                        r = _a.sent();
-                        if (r) {
-                            this.json.IsPageCheckedOutToCurrentUser = false;
-                        }
-                        _a.label = 7;
-                    case 7:
-                        this._bannerImageDirty = false;
-                        this._bannerImageThumbnailUrlDirty = false;
-                        // we need to ensure we reload from the latest data to ensure all urls are updated and current in the object (expecially for new pages)
-                        return [4 /*yield*/, this.load()];
-                    case 8:
-                        // we need to ensure we reload from the latest data to ensure all urls are updated and current in the object (expecially for new pages)
-                        _a.sent();
-                        return [2 /*return*/, r];
-                }
-            });
-        });
-    };
-    /**
-     * Discards the checkout of this page
-     */
-    _ClientsidePage.prototype.discardPageCheckout = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var d;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (this.json.Id === null) {
-                            throw Error("The id for this page is null. If you want to create a new page, please use ClientSidePage.Create");
-                        }
-                        return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/discardPage"), body(metadata("SP.Publishing.SitePage")))];
-                    case 1:
-                        d = _a.sent();
-                        this.fromJSON(d);
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Promotes this page as a news item
-     */
-    _ClientsidePage.prototype.promoteToNews = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.promoteNewsImpl("promoteToNews")];
-            });
-        });
-    };
-    // API is currently broken on server side
-    // public async demoteFromNews(): Promise<boolean> {
-    //     return this.promoteNewsImpl("demoteFromNews");
-    // }
-    /**
-     * Finds a control by the specified instance id
-     *
-     * @param id Instance id of the control to find
-     */
-    _ClientsidePage.prototype.findControlById = function (id) {
-        return this.findControl(function (c) { return c.id === id; });
-    };
-    /**
-     * Finds a control within this page's control tree using the supplied predicate
-     *
-     * @param predicate Takes a control and returns true or false, if true that control is returned by findControl
-     */
-    _ClientsidePage.prototype.findControl = function (predicate) {
-        // check all sections
-        for (var i = 0; i < this.sections.length; i++) {
-            // check all columns
-            for (var j = 0; j < this.sections[i].columns.length; j++) {
-                // check all controls
-                for (var k = 0; k < this.sections[i].columns[j].controls.length; k++) {
-                    // check to see if the predicate likes this control
-                    if (predicate(this.sections[i].columns[j].controls[k])) {
-                        return this.sections[i].columns[j].controls[k];
-                    }
-                }
-            }
-        }
-        // we found nothing so give nothing back
-        return null;
-    };
-    /**
-     * Creates a new page with all of the content copied from this page
-     *
-     * @param web The web where we will create the copy
-     * @param pageName The file name of the new page
-     * @param title The title of the new page
-     * @param publish If true the page will be published (Default: true)
-     */
-    _ClientsidePage.prototype.copy = function (web, pageName, title, publish, promotedState) {
-        if (publish === void 0) { publish = true; }
-        return __awaiter(this, void 0, void 0, function () {
-            var page;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, CreateClientsidePage(web, pageName, title, this.pageLayout, promotedState)];
-                    case 1:
-                        page = _a.sent();
-                        return [2 /*return*/, this.copyTo(page, publish)];
-                }
-            });
-        });
-    };
-    /**
-     * Copies the content from this page to the supplied page instance NOTE: fully overwriting any previous content!!
-     *
-     * @param page Page whose content we replace with this page's content
-     * @param publish If true the page will be published after the copy, if false it will be saved but left unpublished (Default: true)
-     */
-    _ClientsidePage.prototype.copyTo = function (page, publish) {
-        if (publish === void 0) { publish = true; }
-        return __awaiter(this, void 0, void 0, function () {
-            var url, makeGuid, guidSite, guidWeb, guidFile, site, id, openWeb, file, props;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        // we know the method is on the class - but it is protected so not part of the interface
-                        page.setControls(this.getControls());
-                        if (!!stringIsNullOrEmpty(this.json.BannerImageUrl)) return [3 /*break*/, 4];
-                        url = new URL(this.json.BannerImageUrl);
-                        makeGuid = function (s) { return s.replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/g, "$1-$2-$3-$4-$5"); };
-                        if (!(url.searchParams.has("guidSite") && url.searchParams.has("guidWeb") && url.searchParams.has("guidFile"))) return [3 /*break*/, 4];
-                        guidSite = makeGuid(url.searchParams.get("guidSite"));
-                        guidWeb = makeGuid(url.searchParams.get("guidWeb"));
-                        guidFile = makeGuid(url.searchParams.get("guidFile"));
-                        site = Site(extractWebUrl(this.toUrl()));
-                        return [4 /*yield*/, site.select("Id")()];
-                    case 1:
-                        id = _a.sent();
-                        if (!(id.Id === guidSite)) return [3 /*break*/, 4];
-                        return [4 /*yield*/, site.openWebById(guidWeb)];
-                    case 2:
-                        openWeb = _a.sent();
-                        return [4 /*yield*/, openWeb.web.getFileById(guidFile).select("ServerRelativeUrl")()];
-                    case 3:
-                        file = _a.sent();
-                        props = {};
-                        if (this._layoutPart.properties) {
-                            if (hOP(this._layoutPart.properties, "translateX")) {
-                                props.translateX = this._layoutPart.properties.translateX;
-                            }
-                            if (hOP(this._layoutPart.properties, "translateY")) {
-                                props.translateY = this._layoutPart.properties.translateY;
-                            }
-                            if (hOP(this._layoutPart.properties, "imageSourceType")) {
-                                props.imageSourceType = this._layoutPart.properties.imageSourceType;
-                            }
-                            if (hOP(this._layoutPart.properties, "altText")) {
-                                props.altText = this._layoutPart.properties.altText;
-                            }
-                        }
-                        page.setBannerImage(file.ServerRelativeUrl, props);
-                        _a.label = 4;
-                    case 4: return [4 /*yield*/, page.save(publish)];
-                    case 5:
-                        _a.sent();
-                        return [2 /*return*/, page];
-                }
-            });
-        });
-    };
-    /**
-     * Sets the modern page banner image
-     *
-     * @param url Url of the image to display
-     * @param altText Alt text to describe the image
-     * @param bannerProps Additional properties to control display of the banner
-     */
-    _ClientsidePage.prototype.setBannerImage = function (url, props) {
-        if (isUrlAbsolute(url)) {
-            // do our best to make this a server relative url by removing the x.sharepoint.com part
-            url = url.replace(/^https?:\/\/[a-z0-9.]*?\.[a-z]{2,3}\//i, "/");
-        }
-        this.json.BannerImageUrl = url;
-        this._bannerImageDirty = true;
-        /*
-            setting the banner image resets the thumbnail image (matching UI functionality)
-            but if the thumbnail is dirty they are likely trying to set them both to
-            different values, so we allow that here.
-            Also allows the banner image to be updated safely with the calculated one in save()
-        */
-        if (!this._bannerImageThumbnailUrlDirty) {
-            this.thumbnailUrl = url;
-            this._pageSettings.pageSettingsSlice.isDefaultThumbnail = true;
-        }
-        // this seems to always be true, so default
-        this._layoutPart.properties.imageSourceType = 2;
-        if (objectDefinedNotNull(props)) {
-            if (hOP(props, "translateX")) {
-                this._layoutPart.properties.translateX = props.translateX;
-            }
-            if (hOP(props, "translateY")) {
-                this._layoutPart.properties.translateY = props.translateY;
-            }
-            if (hOP(props, "imageSourceType")) {
-                this._layoutPart.properties.imageSourceType = props.imageSourceType;
-            }
-            if (hOP(props, "altText")) {
-                this._layoutPart.properties.altText = props.altText;
-            }
-        }
-    };
-    /**
-     * Sets the banner image url from an external source. You must call save to persist the changes
-     *
-     * @param url absolute url of the external file
-     * @param props optional set of properties to control display of the banner image
-     */
-    _ClientsidePage.prototype.setBannerImageFromExternalUrl = function (url, props) {
-        return __awaiter(this, void 0, void 0, function () {
-            var fileUrl, pageName, filename, request, result;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        fileUrl = new URL(url);
-                        pageName = this.json.FileName.replace(/\.[^/.]+$/, "");
-                        filename = fileUrl.pathname.split(/[\\/]/i).pop();
-                        request = initFrom(this, "_api/sitepages/AddImageFromExternalUrl");
-                        request.query.set("imageFileName", "'" + encodeURIComponent(filename) + "'");
-                        request.query.set("pageName", "'" + encodeURIComponent(pageName) + "'");
-                        request.query.set("externalUrl", "'" + encodeURIComponent(url) + "'");
-                        request.select("ServerRelativeUrl");
-                        return [4 /*yield*/, spPost(request)];
-                    case 1:
-                        result = _a.sent();
-                        // set with the newly created relative url
-                        this.setBannerImage(result.ServerRelativeUrl, props);
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Sets the authors for this page from the supplied list of user integer ids
-     *
-     * @param authorId The integer id of the user to set as the author
-     */
-    _ClientsidePage.prototype.setAuthorById = function (authorId) {
-        return __awaiter(this, void 0, void 0, function () {
-            var userLoginData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, SharePointQueryableCollection(extractWebUrl(this.toUrl()), "/_api/web/siteusers")
-                            .configureFrom(this)
-                            .filter("Id eq " + authorId)
-                            .select("LoginName")()];
-                    case 1:
-                        userLoginData = _a.sent();
-                        if (userLoginData.length < 1) {
-                            throw Error("Could not find user with id " + authorId + ".");
-                        }
-                        return [2 /*return*/, this.setAuthorByLoginName(userLoginData[0].LoginName)];
-                }
-            });
-        });
-    };
-    /**
-     * Sets the authors for this page from the supplied list of user integer ids
-     *
-     * @param authorLoginName The login name of the user (ex: i:0#.f|membership|name@tenant.com)
-     */
-    _ClientsidePage.prototype.setAuthorByLoginName = function (authorLoginName) {
-        return __awaiter(this, void 0, void 0, function () {
-            var userLoginData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, SharePointQueryableCollection(extractWebUrl(this.toUrl()), "/_api/web/siteusers")
-                            .configureFrom(this)
-                            .filter("LoginName eq '" + authorLoginName + "'")
-                            .select("UserPrincipalName", "Title")()];
-                    case 1:
-                        userLoginData = _a.sent();
-                        if (userLoginData.length < 1) {
-                            throw Error("Could not find user with login name '" + authorLoginName + "'.");
-                        }
-                        this.json.AuthorByline = [userLoginData[0].UserPrincipalName];
-                        this._layoutPart.properties.authorByline = [userLoginData[0].UserPrincipalName];
-                        this._layoutPart.properties.authors = [{
-                                id: authorLoginName,
-                                name: userLoginData[0].Title,
-                                role: "",
-                                upn: userLoginData[0].UserPrincipalName,
-                            }];
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Gets the list item associated with this clientside page
-     *
-     * @param selects Specific set of fields to include when getting the item
-     */
-    _ClientsidePage.prototype.getItem = function () {
-        var selects = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            selects[_i] = arguments[_i];
-        }
-        return __awaiter(this, void 0, void 0, function () {
-            var initer, listData, item, itemData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        initer = initFrom(this, "/_api/lists/EnsureClientRenderedSitePagesLibrary").select("EnableModeration", "EnableMinorVersions", "Id");
-                        return [4 /*yield*/, spPost(initer)];
-                    case 1:
-                        listData = _a.sent();
-                        item = (List(listData["odata.id"])).configureFrom(this).items.getById(this.json.Id);
-                        return [4 /*yield*/, item.select.apply(item, __spreadArray([], __read(selects)))()];
-                    case 2:
-                        itemData = _a.sent();
-                        return [2 /*return*/, assign((Item(odataUrlFrom(itemData))).configureFrom(this), itemData)];
-                }
-            });
-        });
-    };
-    /**
-     * Recycle this page
-     */
-    _ClientsidePage.prototype.recycle = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var item;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.getItem()];
-                    case 1:
-                        item = _a.sent();
-                        return [4 /*yield*/, item.recycle()];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Delete this page
-     */
-    _ClientsidePage.prototype.delete = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var item;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.getItem()];
-                    case 1:
-                        item = _a.sent();
-                        return [4 /*yield*/, item.delete()];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    // not yet active in service
-    // /**
-    //  * Schedules a page for publishing
-    //  *
-    //  * @param publishDate Date to publish the item
-    //  * @returns Publish work item details
-    //  */
-    // public async schedulePublish(publishDate: Date): Promise<string> {
-    //     let r: string;
-    //     // currently the server throws an exception, but then the page is published as expected
-    //     // so we just ignore that error for now, YMMV
-    //     try {
-    //         r = await spPost(initFrom(this, `_api/sitepages/pages(${this.json.Id})/SchedulePublish`), body({
-    //             sitePage: { PublishStartDate: publishDate },
-    //         }));
-    //     } catch {
-    //         r = "";
-    //     }
-    //     return r;
-    // }
-    /**
-     * Saves a copy of this page as a template in this library's Templates folder
-     *
-     * @param publish If true the template is published, false the template is not published (default: true)
-     * @returns IClientsidePage instance representing the new template page
-     */
-    _ClientsidePage.prototype.saveAsTemplate = function (publish) {
-        if (publish === void 0) { publish = true; }
-        return __awaiter(this, void 0, void 0, function () {
-            var data, page;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/SavePageAsTemplate"))];
-                    case 1:
-                        data = _a.sent();
-                        page = ClientsidePage(this, null, data);
-                        page.title = this.title;
-                        return [4 /*yield*/, page.save(publish)];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/, page];
-                }
-            });
-        });
-    };
-    /**
-     * Share this Page's Preview content by Email
-     *
-     * @param emails Set of emails to which the preview is shared
-     * @param message The message to include
-     * @returns void
-     */
-    _ClientsidePage.prototype.share = function (emails, message) {
-        return spPost(initFrom(this, "_api/SP.Publishing.RichSharing/SharePageByEmail"), body({
-            recipientEmails: emails,
-            message: message,
-            url: this.json.AbsoluteUrl,
-        }));
-    };
-    /**
-     * Extends this queryable from the provided parent
-     *
-     * @param parent Parent queryable from which we will derive a base url
-     * @param path Additional path
-     */
-    _ClientsidePage.prototype.assign = function (parent, path) {
-        this.data.parentUrl = parent.data.url;
-        this.data.url = combine(this.data.parentUrl, path || "");
-        this.configureFrom(parent);
-    };
-    _ClientsidePage.prototype.getCanvasContent1 = function () {
-        return JSON.stringify(this.getControls());
-    };
-    _ClientsidePage.prototype.getLayoutWebpartsContent = function () {
-        if (this._layoutPart) {
-            return JSON.stringify([this._layoutPart]);
-        }
-        else {
-            return JSON.stringify(null);
-        }
-    };
-    _ClientsidePage.prototype.setControls = function (controls) {
-        // reset the sections
-        this.sections = [];
-        if (controls && controls.length) {
-            for (var i = 0; i < controls.length; i++) {
-                // if no control type is present this is a column which we give type 0 to let us process it
-                var controlType = hOP(controls[i], "controlType") ? controls[i].controlType : 0;
-                switch (controlType) {
-                    case 0:
-                        // empty canvas column or page settings
-                        if (hOP(controls[i], "pageSettingsSlice")) {
-                            this._pageSettings = controls[i];
-                        }
-                        else {
-                            // we have an empty column
-                            this.mergeColumnToTree(new CanvasColumn(controls[i]));
-                        }
-                        break;
-                    case 3: {
-                        var part = new ClientsideWebpart(controls[i]);
-                        this.mergePartToTree(part, part.data.position);
-                        break;
-                    }
-                    case 4: {
-                        var textData = controls[i];
-                        var text = new ClientsideText(textData.innerHTML, textData);
-                        this.mergePartToTree(text, text.data.position);
-                        break;
-                    }
-                }
-            }
-            reindex(this.sections);
-        }
-    };
-    _ClientsidePage.prototype.getControls = function () {
-        var _this = this;
-        // reindex things
-        reindex(this.sections);
-        // rollup the control changes
-        var canvasData = [];
-        this.sections.forEach(function (section) {
-            section.columns.forEach(function (column) {
-                if (column.controls.length < 1) {
-                    // empty column
-                    canvasData.push({
-                        displayMode: column.data.displayMode,
-                        emphasis: _this.getEmphasisObj(section.emphasis),
-                        position: column.data.position,
-                    });
-                }
-                else {
-                    column.controls.forEach(function (control) {
-                        control.data.emphasis = _this.getEmphasisObj(section.emphasis);
-                        canvasData.push(_this.specialSaveHandling(control).data);
-                    });
-                }
-            });
-        });
-        canvasData.push(this._pageSettings);
-        return canvasData;
-    };
-    _ClientsidePage.prototype.getEmphasisObj = function (value) {
-        if (value < 1 || value > 3) {
-            return {};
-        }
-        return { zoneEmphasis: value };
-    };
-    _ClientsidePage.prototype.promoteNewsImpl = function (method) {
-        return __awaiter(this, void 0, void 0, function () {
-            var lastPubData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (this.json.Id === null) {
-                            throw Error("The id for this page is null.");
-                        }
-                        if (!stringIsNullOrEmpty(this.json.VersionInfo.LastVersionCreatedBy)) return [3 /*break*/, 2];
-                        lastPubData = new Date(this.json.VersionInfo.LastVersionCreated);
-                        if (!(lastPubData.getFullYear() < 2000)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.save(true)];
-                    case 1:
-                        _a.sent();
-                        _a.label = 2;
-                    case 2: return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/" + method), body(metadata("SP.Publishing.SitePage")))];
-                    case 3: return [2 /*return*/, _a.sent()];
-                }
-            });
-        });
-    };
-    /**
-     * Merges the control into the tree of sections and columns for this page
-     *
-     * @param control The control to merge
-     */
-    _ClientsidePage.prototype.mergePartToTree = function (control, positionData) {
-        var _a, _b, _c;
-        var column = null;
-        var sectionFactor = 12;
-        var sectionIndex = 0;
-        var zoneIndex = 0;
-        var layoutIndex = 1;
-        // handle case where we don't have position data (shouldn't happen?)
-        if (positionData) {
-            if (hOP(positionData, "zoneIndex")) {
-                zoneIndex = positionData.zoneIndex;
-            }
-            if (hOP(positionData, "sectionIndex")) {
-                sectionIndex = positionData.sectionIndex;
-            }
-            if (hOP(positionData, "sectionFactor")) {
-                sectionFactor = positionData.sectionFactor;
-            }
-            if (hOP(positionData, "layoutIndex")) {
-                layoutIndex = positionData.layoutIndex;
-            }
-        }
-        var zoneEmphasis = (_c = (_b = (_a = control.data) === null || _a === void 0 ? void 0 : _a.emphasis) === null || _b === void 0 ? void 0 : _b.zoneEmphasis) !== null && _c !== void 0 ? _c : 0;
-        var section = this.getOrCreateSection(zoneIndex, layoutIndex, zoneEmphasis);
-        var columns = section.columns.filter(function (c) { return c.order === sectionIndex; });
-        if (columns.length < 1) {
-            column = section.addColumn(sectionFactor, layoutIndex);
-        }
-        else {
-            column = columns[0];
-        }
-        control.column = column;
-        column.addControl(control);
-    };
-    /**
-     * Merges the supplied column into the tree
-     *
-     * @param column Column to merge
-     * @param position The position data for the column
-     */
-    _ClientsidePage.prototype.mergeColumnToTree = function (column) {
-        var _a, _b;
-        var order = hOP(column.data, "position") && hOP(column.data.position, "zoneIndex") ? column.data.position.zoneIndex : 0;
-        var layoutIndex = hOP(column.data, "position") && hOP(column.data.position, "layoutIndex") ? column.data.position.layoutIndex : 1;
-        var section = this.getOrCreateSection(order, layoutIndex, ((_b = (_a = column.data) === null || _a === void 0 ? void 0 : _a.emphasis) === null || _b === void 0 ? void 0 : _b.zoneEmphasis) || 0);
-        column.section = section;
-        section.columns.push(column);
-    };
-    /**
-     * Handle the logic to get or create a section based on the supplied order and layoutIndex
-     *
-     * @param order Section order
-     * @param layoutIndex Layout Index (1 === normal, 2 === vertical section)
-     * @param emphasis The section emphasis
-     */
-    _ClientsidePage.prototype.getOrCreateSection = function (order, layoutIndex, emphasis) {
-        var section = null;
-        var sections = this.sections.filter(function (s) { return s.order === order && s.layoutIndex === layoutIndex; });
-        if (sections.length < 1) {
-            section = layoutIndex === 2 ? this.addVerticalSection() : this.addSection();
-            section.order = order;
-            section.emphasis = emphasis;
-        }
-        else {
-            section = sections[0];
-        }
-        return section;
-    };
-    /**
-     * Based on issue #1690 we need to take special case actions to ensure some things
-     * can be saved properly without breaking existing pages.
-     *
-     * @param control The control we are ensuring is "ready" to be saved
-     */
-    _ClientsidePage.prototype.specialSaveHandling = function (control) {
-        var _a, _b, _c;
-        // this is to handle the special case in issue #1690
-        // must ensure that searchablePlainTexts values have < replaced with &lt; in links web part
-        if (control.data.controlType === 3 && control.data.webPartId === "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd") {
-            var texts = ((_c = (_b = (_a = control.data) === null || _a === void 0 ? void 0 : _a.webPartData) === null || _b === void 0 ? void 0 : _b.serverProcessedContent) === null || _c === void 0 ? void 0 : _c.searchablePlainTexts) || null;
-            if (objectDefinedNotNull(texts)) {
-                var keys = Object.getOwnPropertyNames(texts);
-                for (var i = 0; i < keys.length; i++) {
-                    texts[keys[i]] = texts[keys[i]].replace(/</ig, "&lt;");
-                    control.data.webPartData.serverProcessedContent.searchablePlainTexts = texts;
-                }
-            }
-        }
-        return control;
-    };
-    __decorate([
-        tag("csp.load")
-    ], _ClientsidePage.prototype, "load", null);
-    __decorate([
-        tag("csp.save")
-    ], _ClientsidePage.prototype, "save", null);
-    __decorate([
-        tag("csp.discardPageCheckout")
-    ], _ClientsidePage.prototype, "discardPageCheckout", null);
-    __decorate([
-        tag("csp.promoteToNews")
-    ], _ClientsidePage.prototype, "promoteToNews", null);
-    __decorate([
-        tag("csp.copy")
-    ], _ClientsidePage.prototype, "copy", null);
-    __decorate([
-        tag("csp.copyTo")
-    ], _ClientsidePage.prototype, "copyTo", null);
-    __decorate([
-        tag("csp.getItem")
-    ], _ClientsidePage.prototype, "getItem", null);
-    return _ClientsidePage;
-}(_SharePointQueryable));
-export { _ClientsidePage };
-/**
- * Invokable factory for IClientSidePage instances
- */
-var ClientsidePage = function (baseUrl, path, json, noInit, sections, commentsDisabled) {
-    if (noInit === void 0) { noInit = false; }
-    if (sections === void 0) { sections = []; }
-    if (commentsDisabled === void 0) { commentsDisabled = false; }
-    return invokableFactory(_ClientsidePage)(baseUrl, path, json, noInit, sections, commentsDisabled);
-};
-/**
- * Loads a client side page from the supplied IFile instance
- *
- * @param file Source IFile instance
- */
-export var ClientsidePageFromFile = function (file) { return __awaiter(void 0, void 0, void 0, function () {
-    var item, page;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, file.getItem()];
-            case 1:
-                item = _a.sent();
-                page = ClientsidePage(extractWebUrl(file.toUrl()), "", { Id: item.Id }, true);
-                return [2 /*return*/, page.configureFrom(file).load()];
-        }
-    });
-}); };
-/**
- * Creates a new client side page
- *
- * @param web The web or list
- * @param pageName The name of the page (filename)
- * @param title The page's title
- * @param PageLayoutType Layout to use when creating the page
- */
-export var CreateClientsidePage = function (web, pageName, title, PageLayoutType, promotedState) {
-    if (PageLayoutType === void 0) { PageLayoutType = "Article"; }
-    if (promotedState === void 0) { promotedState = 0; }
-    return __awaiter(void 0, void 0, void 0, function () {
-        var pageInitData, newPage;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    // patched because previously we used the full page name with the .aspx at the end
-                    // this allows folk's existing code to work after the re-write to the new API
-                    pageName = pageName.replace(/\.aspx$/i, "");
-                    return [4 /*yield*/, spPost(initFrom(web, "_api/sitepages/pages"), body(Object.assign(metadata("SP.Publishing.SitePage"), {
-                            PageLayoutType: PageLayoutType,
-                            PromotedState: promotedState,
-                        })))];
-                case 1:
-                    pageInitData = _a.sent();
-                    newPage = ClientsidePage(web, "", pageInitData);
-                    newPage.title = pageName;
-                    return [4 /*yield*/, newPage.save(false)];
-                case 2:
-                    _a.sent();
-                    newPage.title = title;
-                    return [2 /*return*/, newPage];
-            }
-        });
-    });
-};
-var CanvasSection = /** @class */ (function () {
-    function CanvasSection(page, order, layoutIndex, columns, _emphasis) {
-        if (columns === void 0) { columns = []; }
-        if (_emphasis === void 0) { _emphasis = 0; }
-        this.page = page;
-        this.columns = columns;
-        this._emphasis = _emphasis;
-        this._memId = getGUID();
-        this._order = order;
-        this._layoutIndex = layoutIndex;
-    }
-    Object.defineProperty(CanvasSection.prototype, "order", {
-        get: function () {
-            return this._order;
-        },
-        set: function (value) {
-            this._order = value;
-            for (var i = 0; i < this.columns.length; i++) {
-                this.columns[i].data.position.zoneIndex = value;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CanvasSection.prototype, "layoutIndex", {
-        get: function () {
-            return this._layoutIndex;
-        },
-        set: function (value) {
-            this._layoutIndex = value;
-            for (var i = 0; i < this.columns.length; i++) {
-                this.columns[i].data.position.layoutIndex = value;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CanvasSection.prototype, "defaultColumn", {
-        /**
-         * Default column (this.columns[0]) for this section
-         */
-        get: function () {
-            if (this.columns.length < 1) {
-                this.addColumn(12);
-            }
-            return this.columns[0];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Adds a new column to this section
-     */
-    CanvasSection.prototype.addColumn = function (factor, layoutIndex) {
-        if (layoutIndex === void 0) { layoutIndex = this.layoutIndex; }
-        var column = new CanvasColumn();
-        column.section = this;
-        column.data.position.zoneIndex = this.order;
-        column.data.position.layoutIndex = layoutIndex;
-        column.data.position.sectionFactor = factor;
-        column.order = getNextOrder(this.columns);
-        this.columns.push(column);
-        return column;
-    };
-    /**
-     * Adds a control to the default column for this section
-     *
-     * @param control Control to add to the default column
-     */
-    CanvasSection.prototype.addControl = function (control) {
-        this.defaultColumn.addControl(control);
-        return this;
-    };
-    Object.defineProperty(CanvasSection.prototype, "emphasis", {
-        get: function () {
-            return this._emphasis;
-        },
-        set: function (value) {
-            this._emphasis = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Removes this section and all contained columns and controls from the collection
-     */
-    CanvasSection.prototype.remove = function () {
-        var _this = this;
-        this.page.sections = this.page.sections.filter(function (section) { return section._memId !== _this._memId; });
-        reindex(this.page.sections);
-    };
-    return CanvasSection;
-}());
-export { CanvasSection };
-var CanvasColumn = /** @class */ (function () {
-    function CanvasColumn(json, controls) {
-        if (json === void 0) { json = JSON.parse(JSON.stringify(CanvasColumn.Default)); }
-        if (controls === void 0) { controls = []; }
-        this.json = json;
-        this.controls = controls;
-        this._section = null;
-        this._memId = getGUID();
-    }
-    Object.defineProperty(CanvasColumn.prototype, "data", {
-        get: function () {
-            return this.json;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CanvasColumn.prototype, "section", {
-        get: function () {
-            return this._section;
-        },
-        set: function (section) {
-            this._section = section;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CanvasColumn.prototype, "order", {
-        get: function () {
-            return this.data.position.sectionIndex;
-        },
-        set: function (value) {
-            this.data.position.sectionIndex = value;
-            for (var i = 0; i < this.controls.length; i++) {
-                this.controls[i].data.position.zoneIndex = this.data.position.zoneIndex;
-                this.controls[i].data.position.layoutIndex = this.data.position.layoutIndex;
-                this.controls[i].data.position.sectionIndex = value;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CanvasColumn.prototype, "factor", {
-        get: function () {
-            return this.data.position.sectionFactor;
-        },
-        set: function (value) {
-            this.data.position.sectionFactor = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CanvasColumn.prototype.addControl = function (control) {
-        control.column = this;
-        this.controls.push(control);
-        return this;
-    };
-    CanvasColumn.prototype.getControl = function (index) {
-        return this.controls[index];
-    };
-    CanvasColumn.prototype.remove = function () {
-        var _this = this;
-        this.section.columns = this.section.columns.filter(function (column) { return column._memId !== _this._memId; });
-        reindex(this.section.columns);
-    };
-    CanvasColumn.Default = {
-        controlType: 0,
-        displayMode: 2,
-        emphasis: {},
-        position: {
-            layoutIndex: 1,
-            sectionFactor: 12,
-            sectionIndex: 1,
-            zoneIndex: 1,
-        },
-    };
-    return CanvasColumn;
-}());
-export { CanvasColumn };
-var ColumnControl = /** @class */ (function () {
-    function ColumnControl(json) {
-        this.json = json;
-    }
-    Object.defineProperty(ColumnControl.prototype, "id", {
-        get: function () {
-            return this.json.id;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ColumnControl.prototype, "data", {
-        get: function () {
-            return this.json;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ColumnControl.prototype, "column", {
-        get: function () {
-            return this._column;
-        },
-        set: function (value) {
-            this._column = value;
-            this.onColumnChange(this._column);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ColumnControl.prototype.remove = function () {
-        var _this = this;
-        this.column.controls = this.column.controls.filter(function (control) { return control.id !== _this.id; });
-        reindex(this.column.controls);
-    };
-    ColumnControl.prototype.setData = function (data) {
-        this.json = data;
-    };
-    return ColumnControl;
-}());
-export { ColumnControl };
-var ClientsideText = /** @class */ (function (_super) {
-    __extends(ClientsideText, _super);
-    function ClientsideText(text, json) {
-        if (json === void 0) { json = JSON.parse(JSON.stringify(ClientsideText.Default)); }
-        var _this = this;
-        if (stringIsNullOrEmpty(json.id)) {
-            json.id = getGUID();
-            json.anchorComponentId = json.id;
-        }
-        _this = _super.call(this, json) || this;
-        _this.text = text;
-        return _this;
-    }
-    Object.defineProperty(ClientsideText.prototype, "text", {
-        get: function () {
-            return this.data.innerHTML;
-        },
-        set: function (value) {
-            this.data.innerHTML = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ClientsideText.prototype, "order", {
-        get: function () {
-            return this.data.position.controlIndex;
-        },
-        set: function (value) {
-            this.data.position.controlIndex = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ClientsideText.prototype.onColumnChange = function (col) {
-        this.data.position.sectionFactor = col.factor;
-        this.data.position.controlIndex = getNextOrder(col.controls);
-        this.data.position.zoneIndex = col.data.position.zoneIndex;
-        this.data.position.sectionIndex = col.order;
-        this.data.position.layoutIndex = col.data.position.layoutIndex;
-    };
-    ClientsideText.Default = {
-        addedFromPersistedData: false,
-        anchorComponentId: "",
-        controlType: 4,
-        displayMode: 2,
-        editorType: "CKEditor",
-        emphasis: {},
-        id: "",
-        innerHTML: "",
-        position: {
-            controlIndex: 1,
-            layoutIndex: 1,
-            sectionFactor: 12,
-            sectionIndex: 1,
-            zoneIndex: 1,
-        },
-    };
-    return ClientsideText;
-}(ColumnControl));
-export { ClientsideText };
-var ClientsideWebpart = /** @class */ (function (_super) {
-    __extends(ClientsideWebpart, _super);
-    function ClientsideWebpart(json) {
-        if (json === void 0) { json = JSON.parse(JSON.stringify(ClientsideWebpart.Default)); }
-        return _super.call(this, json) || this;
-    }
-    ClientsideWebpart.fromComponentDef = function (definition) {
-        var part = new ClientsideWebpart();
-        part.import(definition);
-        return part;
-    };
-    Object.defineProperty(ClientsideWebpart.prototype, "title", {
-        get: function () {
-            return this.data.webPartData.title;
-        },
-        set: function (value) {
-            this.data.webPartData.title = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ClientsideWebpart.prototype, "description", {
-        get: function () {
-            return this.data.webPartData.description;
-        },
-        set: function (value) {
-            this.data.webPartData.description = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ClientsideWebpart.prototype, "order", {
-        get: function () {
-            return this.data.position.controlIndex;
-        },
-        set: function (value) {
-            this.data.position.controlIndex = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ClientsideWebpart.prototype, "height", {
-        get: function () {
-            return this.data.reservedHeight;
-        },
-        set: function (value) {
-            this.data.reservedHeight = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ClientsideWebpart.prototype, "width", {
-        get: function () {
-            return this.data.reservedWidth;
-        },
-        set: function (value) {
-            this.data.reservedWidth = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ClientsideWebpart.prototype, "dataVersion", {
-        get: function () {
-            return this.data.webPartData.dataVersion;
-        },
-        set: function (value) {
-            this.data.webPartData.dataVersion = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ClientsideWebpart.prototype.setProperties = function (properties) {
-        this.data.webPartData.properties = assign(this.data.webPartData.properties, properties);
-        return this;
-    };
-    ClientsideWebpart.prototype.getProperties = function () {
-        return this.data.webPartData.properties;
-    };
-    ClientsideWebpart.prototype.onColumnChange = function (col) {
-        this.data.position.sectionFactor = col.factor;
-        this.data.position.controlIndex = getNextOrder(col.controls);
-        this.data.position.zoneIndex = col.data.position.zoneIndex;
-        this.data.position.sectionIndex = col.data.position.sectionIndex;
-        this.data.position.layoutIndex = col.data.position.layoutIndex;
-    };
-    ClientsideWebpart.prototype.import = function (component) {
-        var id = getGUID();
-        var componendId = component.Id.replace(/^\{|\}$/g, "").toLowerCase();
-        var manifest = JSON.parse(component.Manifest);
-        var preconfiguredEntries = manifest.preconfiguredEntries[0];
-        this.setData(Object.assign({}, this.data, {
-            id: id,
-            webPartData: {
-                dataVersion: "1.0",
-                description: preconfiguredEntries.description.default,
-                id: componendId,
-                instanceId: id,
-                properties: preconfiguredEntries.properties,
-                title: preconfiguredEntries.title.default,
-            },
-            webPartId: componendId,
-        }));
-    };
-    ClientsideWebpart.Default = {
-        addedFromPersistedData: false,
-        controlType: 3,
-        displayMode: 2,
-        emphasis: {},
-        id: null,
-        position: {
-            controlIndex: 1,
-            layoutIndex: 1,
-            sectionFactor: 12,
-            sectionIndex: 1,
-            zoneIndex: 1,
-        },
-        reservedHeight: 500,
-        reservedWidth: 500,
-        webPartData: null,
-        webPartId: null,
-    };
-    return ClientsideWebpart;
-}(ColumnControl));
-export { ClientsideWebpart };
+import { __awaiter, __decorate, __extends, __generator, __read, __spreadArray } from "tslib";
+import { invokableFactory, body, headers } from "@pnp/odata";
+import { assign, getGUID, hOP, stringIsNullOrEmpty, objectDefinedNotNull, combine, isUrlAbsolute, isArray } from "@pnp/common";
+import { Item } from "../items/types.js";
+import { SharePointQueryable, _SharePointQueryable, SharePointQueryableCollection } from "../sharepointqueryable.js";
+import { metadata } from "../utils/metadata.js";
+import { List } from "../lists/types.js";
+import { odataUrlFrom } from "../odata.js";
+import { Web } from "../webs/types.js";
+import { extractWebUrl } from "../utils/extractweburl.js";
+import { Site } from "../sites/types.js";
+import { spPost } from "../operations.js";
+import { getNextOrder, reindex } from "./funcs.js";
+import "../files/web.js";
+import "../comments/item.js";
+import { tag } from "../telemetry.js";
+/**
+ * Page promotion state
+ */
+export var PromotedState;
+(function (PromotedState) {
+    /**
+     * Regular client side page
+     */
+    PromotedState[PromotedState["NotPromoted"] = 0] = "NotPromoted";
+    /**
+     * Page that will be promoted as news article after publishing
+     */
+    PromotedState[PromotedState["PromoteOnPublish"] = 1] = "PromoteOnPublish";
+    /**
+     * Page that is promoted as news article
+     */
+    PromotedState[PromotedState["Promoted"] = 2] = "Promoted";
+})(PromotedState || (PromotedState = {}));
+function initFrom(o, url) {
+    return ClientsidePage(extractWebUrl(o.toUrl()), url).configureFrom(o);
+}
+/**
+ * Represents the data and methods associated with client side "modern" pages
+ */
+var _ClientsidePage = /** @class */ (function (_super) {
+    __extends(_ClientsidePage, _super);
+    /**
+     * PLEASE DON'T USE THIS CONSTRUCTOR DIRECTLY, thank you 🐇
+     */
+    function _ClientsidePage(baseUrl, path, json, noInit, sections, commentsDisabled) {
+        if (noInit === void 0) { noInit = false; }
+        if (sections === void 0) { sections = []; }
+        if (commentsDisabled === void 0) { commentsDisabled = false; }
+        var _this = _super.call(this, baseUrl, path) || this;
+        _this.json = json;
+        _this.sections = sections;
+        _this.commentsDisabled = commentsDisabled;
+        _this._bannerImageDirty = false;
+        _this._bannerImageThumbnailUrlDirty = false;
+        // ensure we have a good url to build on for the pages api
+        if (typeof baseUrl === "string") {
+            _this.data.parentUrl = "";
+            _this.data.url = combine(extractWebUrl(baseUrl), path);
+        }
+        else {
+            _this.assign(initFrom(baseUrl, null), path);
+        }
+        // set a default page settings slice
+        _this._pageSettings = { controlType: 0, pageSettingsSlice: { isDefaultDescription: true, isDefaultThumbnail: true } };
+        // set a default layout part
+        _this._layoutPart = _ClientsidePage.getDefaultLayoutPart();
+        if (typeof json !== "undefined" && !noInit) {
+            _this.fromJSON(json);
+        }
+        return _this;
+    }
+    _ClientsidePage.getDefaultLayoutPart = function () {
+        return {
+            dataVersion: "1.4",
+            description: "Title Region Description",
+            id: "cbe7b0a9-3504-44dd-a3a3-0e5cacd07788",
+            instanceId: "cbe7b0a9-3504-44dd-a3a3-0e5cacd07788",
+            properties: {
+                authorByline: [],
+                authors: [],
+                layoutType: "FullWidthImage",
+                showPublishDate: false,
+                showTopicHeader: false,
+                textAlignment: "Left",
+                title: "",
+                topicHeader: "",
+            },
+            reservedHeight: 280,
+            serverProcessedContent: { htmlStrings: {}, searchablePlainTexts: {}, imageSources: {}, links: {} },
+            title: "Title area",
+        };
+    };
+    Object.defineProperty(_ClientsidePage.prototype, "pageLayout", {
+        get: function () {
+            return this.json.PageLayoutType;
+        },
+        set: function (value) {
+            this.json.PageLayoutType = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "bannerImageUrl", {
+        get: function () {
+            return this.json.BannerImageUrl;
+        },
+        set: function (value) {
+            this.setBannerImage(value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "thumbnailUrl", {
+        get: function () {
+            return this._pageSettings.pageSettingsSlice.isDefaultThumbnail ? this.json.BannerImageUrl : this.json.BannerThumbnailUrl;
+        },
+        set: function (value) {
+            this.json.BannerThumbnailUrl = value;
+            this._bannerImageThumbnailUrlDirty = true;
+            this._pageSettings.pageSettingsSlice.isDefaultThumbnail = false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "topicHeader", {
+        get: function () {
+            return objectDefinedNotNull(this.json.TopicHeader) ? this.json.TopicHeader : "";
+        },
+        set: function (value) {
+            this.json.TopicHeader = value;
+            this._layoutPart.properties.topicHeader = value;
+            if (stringIsNullOrEmpty(value)) {
+                this.showTopicHeader = false;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "title", {
+        get: function () {
+            return this._layoutPart.properties.title;
+        },
+        set: function (value) {
+            this.json.Title = value;
+            this._layoutPart.properties.title = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "reservedHeight", {
+        get: function () {
+            return this._layoutPart.reservedHeight;
+        },
+        set: function (value) {
+            this._layoutPart.reservedHeight = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "description", {
+        get: function () {
+            return this.json.Description;
+        },
+        set: function (value) {
+            if (!stringIsNullOrEmpty(value) && value.length > 255) {
+                throw Error("Modern Page description is limited to 255 chars.");
+            }
+            this.json.Description = value;
+            if (!hOP(this._pageSettings, "htmlAttributes")) {
+                this._pageSettings.htmlAttributes = [];
+            }
+            if (this._pageSettings.htmlAttributes.indexOf("modifiedDescription") < 0) {
+                this._pageSettings.htmlAttributes.push("modifiedDescription");
+            }
+            this._pageSettings.pageSettingsSlice.isDefaultDescription = false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "layoutType", {
+        get: function () {
+            return this._layoutPart.properties.layoutType;
+        },
+        set: function (value) {
+            this._layoutPart.properties.layoutType = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "headerTextAlignment", {
+        get: function () {
+            return this._layoutPart.properties.textAlignment;
+        },
+        set: function (value) {
+            this._layoutPart.properties.textAlignment = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "showTopicHeader", {
+        get: function () {
+            return this._layoutPart.properties.showTopicHeader;
+        },
+        set: function (value) {
+            this._layoutPart.properties.showTopicHeader = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "showPublishDate", {
+        get: function () {
+            return this._layoutPart.properties.showPublishDate;
+        },
+        set: function (value) {
+            this._layoutPart.properties.showPublishDate = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "hasVerticalSection", {
+        get: function () {
+            return this.sections.findIndex(function (s) { return s.layoutIndex === 2; }) > -1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "authorByLine", {
+        get: function () {
+            if (isArray(this._layoutPart.properties.authorByline) && this._layoutPart.properties.authorByline.length > 0) {
+                return this._layoutPart.properties.authorByline[0];
+            }
+            return null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(_ClientsidePage.prototype, "verticalSection", {
+        get: function () {
+            if (this.hasVerticalSection) {
+                return this.addVerticalSection();
+            }
+            return null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Add a section to this page
+     */
+    _ClientsidePage.prototype.addSection = function () {
+        var section = new CanvasSection(this, getNextOrder(this.sections), 1);
+        this.sections.push(section);
+        return section;
+    };
+    /**
+     * Add a section to this page
+     */
+    _ClientsidePage.prototype.addVerticalSection = function () {
+        // we can only have one vertical section so we find it if it exists
+        var sectionIndex = this.sections.findIndex(function (s) { return s.layoutIndex === 2; });
+        if (sectionIndex > -1) {
+            return this.sections[sectionIndex];
+        }
+        var section = new CanvasSection(this, getNextOrder(this.sections), 2);
+        this.sections.push(section);
+        return section;
+    };
+    /**
+     * Loads this instance from the appropriate JSON data
+     *
+     * @param pageData JSON data to load (replaces any existing data)
+     */
+    _ClientsidePage.prototype.fromJSON = function (pageData) {
+        this.json = pageData;
+        var canvasControls = JSON.parse(pageData.CanvasContent1);
+        var layouts = JSON.parse(pageData.LayoutWebpartsContent);
+        if (layouts && layouts.length > 0) {
+            this._layoutPart = layouts[0];
+        }
+        this.setControls(canvasControls);
+        return this;
+    };
+    /**
+     * Loads this page's content from the server
+     */
+    _ClientsidePage.prototype.load = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var item, pageData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getItem("Id", "CommentsDisabled")];
+                    case 1:
+                        item = _a.sent();
+                        return [4 /*yield*/, SharePointQueryable(this, "_api/sitepages/pages(" + item.Id + ")")()];
+                    case 2:
+                        pageData = _a.sent();
+                        this.commentsDisabled = item.CommentsDisabled;
+                        return [2 /*return*/, this.fromJSON(pageData)];
+                }
+            });
+        });
+    };
+    /**
+     * Persists the content changes (sections, columns, and controls) [does not work with batching]
+     *
+     * @param publish If true the page is published, if false the changes are persisted to SharePoint but not published [Default: true]
+     */
+    _ClientsidePage.prototype.save = function (publish) {
+        if (publish === void 0) { publish = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var previewPartialUrl, serverRelativePath, imgInfo_1, webUrl_1, web, batch, f, saveBody, bannerImageUrlValue, updater, r;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.json.Id === null) {
+                            throw Error("The id for this page is null. If you want to create a new page, please use ClientSidePage.Create");
+                        }
+                        previewPartialUrl = "_layouts/15/getpreview.ashx";
+                        if (!(this._bannerImageDirty && !this.bannerImageUrl.includes(previewPartialUrl))) return [3 /*break*/, 2];
+                        serverRelativePath = this.bannerImageUrl;
+                        web = Web(extractWebUrl(this.toUrl())).configureFrom(this);
+                        batch = web.createBatch();
+                        web.getFileByServerRelativePath(serverRelativePath.replace(/%20/ig, " "))
+                            .select("ListId", "WebId", "UniqueId", "Name", "SiteId").inBatch(batch)().then(function (r1) { return imgInfo_1 = r1; });
+                        web.select("Url").inBatch(batch)().then(function (r2) { return webUrl_1 = r2.Url; });
+                        // we know the .then calls above will run before execute resolves, ensuring the vars are set
+                        return [4 /*yield*/, batch.execute()];
+                    case 1:
+                        // we know the .then calls above will run before execute resolves, ensuring the vars are set
+                        _a.sent();
+                        f = SharePointQueryable(webUrl_1, previewPartialUrl);
+                        f.query.set("guidSite", "" + imgInfo_1.SiteId);
+                        f.query.set("guidWeb", "" + imgInfo_1.WebId);
+                        f.query.set("guidFile", "" + imgInfo_1.UniqueId);
+                        this.bannerImageUrl = f.toUrlAndQuery();
+                        if (!objectDefinedNotNull(this._layoutPart.serverProcessedContent)) {
+                            this._layoutPart.serverProcessedContent = {};
+                        }
+                        this._layoutPart.serverProcessedContent.imageSources = { imageSource: serverRelativePath };
+                        if (!objectDefinedNotNull(this._layoutPart.serverProcessedContent.customMetadata)) {
+                            this._layoutPart.serverProcessedContent.customMetadata = {};
+                        }
+                        this._layoutPart.serverProcessedContent.customMetadata.imageSource = {
+                            listId: imgInfo_1.ListId,
+                            siteId: imgInfo_1.SiteId,
+                            uniqueId: imgInfo_1.UniqueId,
+                            webId: imgInfo_1.WebId,
+                        };
+                        this._layoutPart.properties.webId = imgInfo_1.WebId;
+                        this._layoutPart.properties.siteId = imgInfo_1.SiteId;
+                        this._layoutPart.properties.listId = imgInfo_1.ListId;
+                        this._layoutPart.properties.uniqueId = imgInfo_1.UniqueId;
+                        _a.label = 2;
+                    case 2:
+                        if (!!this.json.IsPageCheckedOutToCurrentUser) return [3 /*break*/, 4];
+                        return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/checkoutpage"))];
+                    case 3:
+                        _a.sent();
+                        _a.label = 4;
+                    case 4:
+                        saveBody = Object.assign(metadata("SP.Publishing.SitePage"), {
+                            AuthorByline: this.json.AuthorByline || [],
+                            CanvasContent1: this.getCanvasContent1(),
+                            Description: this.description,
+                            LayoutWebpartsContent: this.getLayoutWebpartsContent(),
+                            Title: this.title,
+                            TopicHeader: this.topicHeader,
+                            BannerImageUrl: this.bannerImageUrl,
+                        });
+                        if (this._bannerImageDirty || this._bannerImageThumbnailUrlDirty) {
+                            bannerImageUrlValue = this._bannerImageThumbnailUrlDirty ? this.thumbnailUrl : this.bannerImageUrl;
+                            saveBody = assign(saveBody, {
+                                BannerImageUrl: bannerImageUrlValue,
+                            });
+                        }
+                        updater = initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/savepage");
+                        return [4 /*yield*/, spPost(updater, headers({ "if-match": "*" }, body(saveBody)))];
+                    case 5:
+                        _a.sent();
+                        r = true;
+                        if (!publish) return [3 /*break*/, 7];
+                        return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/publish"))];
+                    case 6:
+                        r = _a.sent();
+                        if (r) {
+                            this.json.IsPageCheckedOutToCurrentUser = false;
+                        }
+                        _a.label = 7;
+                    case 7:
+                        this._bannerImageDirty = false;
+                        this._bannerImageThumbnailUrlDirty = false;
+                        // we need to ensure we reload from the latest data to ensure all urls are updated and current in the object (expecially for new pages)
+                        return [4 /*yield*/, this.load()];
+                    case 8:
+                        // we need to ensure we reload from the latest data to ensure all urls are updated and current in the object (expecially for new pages)
+                        _a.sent();
+                        return [2 /*return*/, r];
+                }
+            });
+        });
+    };
+    /**
+     * Discards the checkout of this page
+     */
+    _ClientsidePage.prototype.discardPageCheckout = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var d;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.json.Id === null) {
+                            throw Error("The id for this page is null. If you want to create a new page, please use ClientSidePage.Create");
+                        }
+                        return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/discardPage"), body(metadata("SP.Publishing.SitePage")))];
+                    case 1:
+                        d = _a.sent();
+                        this.fromJSON(d);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Promotes this page as a news item
+     */
+    _ClientsidePage.prototype.promoteToNews = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.promoteNewsImpl("promoteToNews")];
+            });
+        });
+    };
+    // API is currently broken on server side
+    // public async demoteFromNews(): Promise<boolean> {
+    //     return this.promoteNewsImpl("demoteFromNews");
+    // }
+    /**
+     * Finds a control by the specified instance id
+     *
+     * @param id Instance id of the control to find
+     */
+    _ClientsidePage.prototype.findControlById = function (id) {
+        return this.findControl(function (c) { return c.id === id; });
+    };
+    /**
+     * Finds a control within this page's control tree using the supplied predicate
+     *
+     * @param predicate Takes a control and returns true or false, if true that control is returned by findControl
+     */
+    _ClientsidePage.prototype.findControl = function (predicate) {
+        // check all sections
+        for (var i = 0; i < this.sections.length; i++) {
+            // check all columns
+            for (var j = 0; j < this.sections[i].columns.length; j++) {
+                // check all controls
+                for (var k = 0; k < this.sections[i].columns[j].controls.length; k++) {
+                    // check to see if the predicate likes this control
+                    if (predicate(this.sections[i].columns[j].controls[k])) {
+                        return this.sections[i].columns[j].controls[k];
+                    }
+                }
+            }
+        }
+        // we found nothing so give nothing back
+        return null;
+    };
+    /**
+     * Creates a new page with all of the content copied from this page
+     *
+     * @param web The web where we will create the copy
+     * @param pageName The file name of the new page
+     * @param title The title of the new page
+     * @param publish If true the page will be published (Default: true)
+     */
+    _ClientsidePage.prototype.copy = function (web, pageName, title, publish, promotedState) {
+        if (publish === void 0) { publish = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var page;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, CreateClientsidePage(web, pageName, title, this.pageLayout, promotedState)];
+                    case 1:
+                        page = _a.sent();
+                        return [2 /*return*/, this.copyTo(page, publish)];
+                }
+            });
+        });
+    };
+    /**
+     * Copies the content from this page to the supplied page instance NOTE: fully overwriting any previous content!!
+     *
+     * @param page Page whose content we replace with this page's content
+     * @param publish If true the page will be published after the copy, if false it will be saved but left unpublished (Default: true)
+     */
+    _ClientsidePage.prototype.copyTo = function (page, publish) {
+        if (publish === void 0) { publish = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var url, makeGuid, guidSite, guidWeb, guidFile, site, id, openWeb, file, props;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // we know the method is on the class - but it is protected so not part of the interface
+                        page.setControls(this.getControls());
+                        if (!!stringIsNullOrEmpty(this.json.BannerImageUrl)) return [3 /*break*/, 4];
+                        url = new URL(this.json.BannerImageUrl);
+                        makeGuid = function (s) { return s.replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/g, "$1-$2-$3-$4-$5"); };
+                        if (!(url.searchParams.has("guidSite") && url.searchParams.has("guidWeb") && url.searchParams.has("guidFile"))) return [3 /*break*/, 4];
+                        guidSite = makeGuid(url.searchParams.get("guidSite"));
+                        guidWeb = makeGuid(url.searchParams.get("guidWeb"));
+                        guidFile = makeGuid(url.searchParams.get("guidFile"));
+                        site = Site(extractWebUrl(this.toUrl()));
+                        return [4 /*yield*/, site.select("Id")()];
+                    case 1:
+                        id = _a.sent();
+                        if (!(id.Id === guidSite)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, site.openWebById(guidWeb)];
+                    case 2:
+                        openWeb = _a.sent();
+                        return [4 /*yield*/, openWeb.web.getFileById(guidFile).select("ServerRelativeUrl")()];
+                    case 3:
+                        file = _a.sent();
+                        props = {};
+                        if (this._layoutPart.properties) {
+                            if (hOP(this._layoutPart.properties, "translateX")) {
+                                props.translateX = this._layoutPart.properties.translateX;
+                            }
+                            if (hOP(this._layoutPart.properties, "translateY")) {
+                                props.translateY = this._layoutPart.properties.translateY;
+                            }
+                            if (hOP(this._layoutPart.properties, "imageSourceType")) {
+                                props.imageSourceType = this._layoutPart.properties.imageSourceType;
+                            }
+                            if (hOP(this._layoutPart.properties, "altText")) {
+                                props.altText = this._layoutPart.properties.altText;
+                            }
+                        }
+                        page.setBannerImage(file.ServerRelativeUrl, props);
+                        _a.label = 4;
+                    case 4: return [4 /*yield*/, page.save(publish)];
+                    case 5:
+                        _a.sent();
+                        return [2 /*return*/, page];
+                }
+            });
+        });
+    };
+    /**
+     * Sets the modern page banner image
+     *
+     * @param url Url of the image to display
+     * @param altText Alt text to describe the image
+     * @param bannerProps Additional properties to control display of the banner
+     */
+    _ClientsidePage.prototype.setBannerImage = function (url, props) {
+        if (isUrlAbsolute(url)) {
+            // do our best to make this a server relative url by removing the x.sharepoint.com part
+            url = url.replace(/^https?:\/\/[a-z0-9.]*?\.[a-z]{2,3}\//i, "/");
+        }
+        this.json.BannerImageUrl = url;
+        // update serverProcessedContent (page behavior change 2021-Oct-13)
+        this._layoutPart.serverProcessedContent = { imageSources: { imageSource: url }, };
+        this._bannerImageDirty = true;
+        /*
+            setting the banner image resets the thumbnail image (matching UI functionality)
+            but if the thumbnail is dirty they are likely trying to set them both to
+            different values, so we allow that here.
+            Also allows the banner image to be updated safely with the calculated one in save()
+        */
+        if (!this._bannerImageThumbnailUrlDirty) {
+            this.thumbnailUrl = url;
+            this._pageSettings.pageSettingsSlice.isDefaultThumbnail = true;
+        }
+        // this seems to always be true, so default
+        this._layoutPart.properties.imageSourceType = 2;
+        if (objectDefinedNotNull(props)) {
+            if (hOP(props, "translateX")) {
+                this._layoutPart.properties.translateX = props.translateX;
+            }
+            if (hOP(props, "translateY")) {
+                this._layoutPart.properties.translateY = props.translateY;
+            }
+            if (hOP(props, "imageSourceType")) {
+                this._layoutPart.properties.imageSourceType = props.imageSourceType;
+            }
+            if (hOP(props, "altText")) {
+                this._layoutPart.properties.altText = props.altText;
+            }
+        }
+    };
+    /**
+     * Sets the banner image url from an external source. You must call save to persist the changes
+     *
+     * @param url absolute url of the external file
+     * @param props optional set of properties to control display of the banner image
+     */
+    _ClientsidePage.prototype.setBannerImageFromExternalUrl = function (url, props) {
+        return __awaiter(this, void 0, void 0, function () {
+            var fileUrl, pageName, filename, request, result;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        fileUrl = new URL(url);
+                        pageName = this.json.FileName.replace(/\.[^/.]+$/, "");
+                        filename = fileUrl.pathname.split(/[\\/]/i).pop();
+                        request = initFrom(this, "_api/sitepages/AddImageFromExternalUrl");
+                        request.query.set("imageFileName", "'" + encodeURIComponent(filename) + "'");
+                        request.query.set("pageName", "'" + encodeURIComponent(pageName) + "'");
+                        request.query.set("externalUrl", "'" + encodeURIComponent(url) + "'");
+                        request.select("ServerRelativeUrl");
+                        return [4 /*yield*/, spPost(request)];
+                    case 1:
+                        result = _a.sent();
+                        // set with the newly created relative url
+                        this.setBannerImage(result.ServerRelativeUrl, props);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Sets the authors for this page from the supplied list of user integer ids
+     *
+     * @param authorId The integer id of the user to set as the author
+     */
+    _ClientsidePage.prototype.setAuthorById = function (authorId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var userLoginData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, SharePointQueryableCollection(extractWebUrl(this.toUrl()), "/_api/web/siteusers")
+                            .configureFrom(this)
+                            .filter("Id eq " + authorId)
+                            .select("LoginName")()];
+                    case 1:
+                        userLoginData = _a.sent();
+                        if (userLoginData.length < 1) {
+                            throw Error("Could not find user with id " + authorId + ".");
+                        }
+                        return [2 /*return*/, this.setAuthorByLoginName(userLoginData[0].LoginName)];
+                }
+            });
+        });
+    };
+    /**
+     * Sets the authors for this page from the supplied list of user integer ids
+     *
+     * @param authorLoginName The login name of the user (ex: i:0#.f|membership|name@tenant.com)
+     */
+    _ClientsidePage.prototype.setAuthorByLoginName = function (authorLoginName) {
+        return __awaiter(this, void 0, void 0, function () {
+            var userLoginData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, SharePointQueryableCollection(extractWebUrl(this.toUrl()), "/_api/web/siteusers")
+                            .configureFrom(this)
+                            .filter("LoginName eq '" + authorLoginName + "'")
+                            .select("UserPrincipalName", "Title")()];
+                    case 1:
+                        userLoginData = _a.sent();
+                        if (userLoginData.length < 1) {
+                            throw Error("Could not find user with login name '" + authorLoginName + "'.");
+                        }
+                        this.json.AuthorByline = [userLoginData[0].UserPrincipalName];
+                        this._layoutPart.properties.authorByline = [userLoginData[0].UserPrincipalName];
+                        this._layoutPart.properties.authors = [{
+                                id: authorLoginName,
+                                name: userLoginData[0].Title,
+                                role: "",
+                                upn: userLoginData[0].UserPrincipalName,
+                            }];
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Gets the list item associated with this clientside page
+     *
+     * @param selects Specific set of fields to include when getting the item
+     */
+    _ClientsidePage.prototype.getItem = function () {
+        var selects = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            selects[_i] = arguments[_i];
+        }
+        return __awaiter(this, void 0, void 0, function () {
+            var initer, listData, item, itemData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        initer = initFrom(this, "/_api/lists/EnsureClientRenderedSitePagesLibrary").select("EnableModeration", "EnableMinorVersions", "Id");
+                        return [4 /*yield*/, spPost(initer)];
+                    case 1:
+                        listData = _a.sent();
+                        item = (List(listData["odata.id"])).configureFrom(this).items.getById(this.json.Id);
+                        return [4 /*yield*/, item.select.apply(item, __spreadArray([], __read(selects), false))()];
+                    case 2:
+                        itemData = _a.sent();
+                        return [2 /*return*/, assign((Item(odataUrlFrom(itemData))).configureFrom(this), itemData)];
+                }
+            });
+        });
+    };
+    /**
+     * Recycle this page
+     */
+    _ClientsidePage.prototype.recycle = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var item;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getItem()];
+                    case 1:
+                        item = _a.sent();
+                        return [4 /*yield*/, item.recycle()];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Delete this page
+     */
+    _ClientsidePage.prototype.delete = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var item;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getItem()];
+                    case 1:
+                        item = _a.sent();
+                        return [4 /*yield*/, item.delete()];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // not yet active in service
+    // /**
+    //  * Schedules a page for publishing
+    //  *
+    //  * @param publishDate Date to publish the item
+    //  * @returns Publish work item details
+    //  */
+    // public async schedulePublish(publishDate: Date): Promise<string> {
+    //     let r: string;
+    //     // currently the server throws an exception, but then the page is published as expected
+    //     // so we just ignore that error for now, YMMV
+    //     try {
+    //         r = await spPost(initFrom(this, `_api/sitepages/pages(${this.json.Id})/SchedulePublish`), body({
+    //             sitePage: { PublishStartDate: publishDate },
+    //         }));
+    //     } catch {
+    //         r = "";
+    //     }
+    //     return r;
+    // }
+    /**
+     * Saves a copy of this page as a template in this library's Templates folder
+     *
+     * @param publish If true the template is published, false the template is not published (default: true)
+     * @returns IClientsidePage instance representing the new template page
+     */
+    _ClientsidePage.prototype.saveAsTemplate = function (publish) {
+        if (publish === void 0) { publish = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var data, page;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/SavePageAsTemplate"))];
+                    case 1:
+                        data = _a.sent();
+                        page = ClientsidePage(this, null, data);
+                        page.title = this.title;
+                        return [4 /*yield*/, page.save(publish)];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/, page];
+                }
+            });
+        });
+    };
+    /**
+     * Share this Page's Preview content by Email
+     *
+     * @param emails Set of emails to which the preview is shared
+     * @param message The message to include
+     * @returns void
+     */
+    _ClientsidePage.prototype.share = function (emails, message) {
+        return spPost(initFrom(this, "_api/SP.Publishing.RichSharing/SharePageByEmail"), body({
+            recipientEmails: emails,
+            message: message,
+            url: this.json.AbsoluteUrl,
+        }));
+    };
+    /**
+     * Extends this queryable from the provided parent
+     *
+     * @param parent Parent queryable from which we will derive a base url
+     * @param path Additional path
+     */
+    _ClientsidePage.prototype.assign = function (parent, path) {
+        this.data.parentUrl = parent.data.url;
+        this.data.url = combine(this.data.parentUrl, path || "");
+        this.configureFrom(parent);
+    };
+    _ClientsidePage.prototype.getCanvasContent1 = function () {
+        return JSON.stringify(this.getControls());
+    };
+    _ClientsidePage.prototype.getLayoutWebpartsContent = function () {
+        if (this._layoutPart) {
+            return JSON.stringify([this._layoutPart]);
+        }
+        else {
+            return JSON.stringify(null);
+        }
+    };
+    _ClientsidePage.prototype.setControls = function (controls) {
+        // reset the sections
+        this.sections = [];
+        if (controls && controls.length) {
+            for (var i = 0; i < controls.length; i++) {
+                // if no control type is present this is a column which we give type 0 to let us process it
+                var controlType = hOP(controls[i], "controlType") ? controls[i].controlType : 0;
+                switch (controlType) {
+                    case 0:
+                        // empty canvas column or page settings
+                        if (hOP(controls[i], "pageSettingsSlice")) {
+                            this._pageSettings = controls[i];
+                        }
+                        else {
+                            // we have an empty column
+                            this.mergeColumnToTree(new CanvasColumn(controls[i]));
+                        }
+                        break;
+                    case 3: {
+                        var part = new ClientsideWebpart(controls[i]);
+                        this.mergePartToTree(part, part.data.position);
+                        break;
+                    }
+                    case 4: {
+                        var textData = controls[i];
+                        var text = new ClientsideText(textData.innerHTML, textData);
+                        this.mergePartToTree(text, text.data.position);
+                        break;
+                    }
+                }
+            }
+            reindex(this.sections);
+        }
+    };
+    _ClientsidePage.prototype.getControls = function () {
+        var _this = this;
+        // reindex things
+        reindex(this.sections);
+        // rollup the control changes
+        var canvasData = [];
+        this.sections.forEach(function (section) {
+            section.columns.forEach(function (column) {
+                if (column.controls.length < 1) {
+                    // empty column
+                    canvasData.push({
+                        displayMode: column.data.displayMode,
+                        emphasis: _this.getEmphasisObj(section.emphasis),
+                        position: column.data.position,
+                    });
+                }
+                else {
+                    column.controls.forEach(function (control) {
+                        control.data.emphasis = _this.getEmphasisObj(section.emphasis);
+                        canvasData.push(_this.specialSaveHandling(control).data);
+                    });
+                }
+            });
+        });
+        canvasData.push(this._pageSettings);
+        return canvasData;
+    };
+    _ClientsidePage.prototype.getEmphasisObj = function (value) {
+        if (value < 1 || value > 3) {
+            return {};
+        }
+        return { zoneEmphasis: value };
+    };
+    _ClientsidePage.prototype.promoteNewsImpl = function (method) {
+        return __awaiter(this, void 0, void 0, function () {
+            var lastPubData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.json.Id === null) {
+                            throw Error("The id for this page is null.");
+                        }
+                        if (!stringIsNullOrEmpty(this.json.VersionInfo.LastVersionCreatedBy)) return [3 /*break*/, 2];
+                        lastPubData = new Date(this.json.VersionInfo.LastVersionCreated);
+                        if (!(lastPubData.getFullYear() < 2000)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.save(true)];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [4 /*yield*/, spPost(initFrom(this, "_api/sitepages/pages(" + this.json.Id + ")/" + method), body(metadata("SP.Publishing.SitePage")))];
+                    case 3: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    };
+    /**
+     * Merges the control into the tree of sections and columns for this page
+     *
+     * @param control The control to merge
+     */
+    _ClientsidePage.prototype.mergePartToTree = function (control, positionData) {
+        var _a, _b, _c;
+        var column = null;
+        var sectionFactor = 12;
+        var sectionIndex = 0;
+        var zoneIndex = 0;
+        var layoutIndex = 1;
+        // handle case where we don't have position data (shouldn't happen?)
+        if (positionData) {
+            if (hOP(positionData, "zoneIndex")) {
+                zoneIndex = positionData.zoneIndex;
+            }
+            if (hOP(positionData, "sectionIndex")) {
+                sectionIndex = positionData.sectionIndex;
+            }
+            if (hOP(positionData, "sectionFactor")) {
+                sectionFactor = positionData.sectionFactor;
+            }
+            if (hOP(positionData, "layoutIndex")) {
+                layoutIndex = positionData.layoutIndex;
+            }
+        }
+        var zoneEmphasis = (_c = (_b = (_a = control.data) === null || _a === void 0 ? void 0 : _a.emphasis) === null || _b === void 0 ? void 0 : _b.zoneEmphasis) !== null && _c !== void 0 ? _c : 0;
+        var section = this.getOrCreateSection(zoneIndex, layoutIndex, zoneEmphasis);
+        var columns = section.columns.filter(function (c) { return c.order === sectionIndex; });
+        if (columns.length < 1) {
+            column = section.addColumn(sectionFactor, layoutIndex);
+        }
+        else {
+            column = columns[0];
+        }
+        control.column = column;
+        column.addControl(control);
+    };
+    /**
+     * Merges the supplied column into the tree
+     *
+     * @param column Column to merge
+     * @param position The position data for the column
+     */
+    _ClientsidePage.prototype.mergeColumnToTree = function (column) {
+        var _a, _b;
+        var order = hOP(column.data, "position") && hOP(column.data.position, "zoneIndex") ? column.data.position.zoneIndex : 0;
+        var layoutIndex = hOP(column.data, "position") && hOP(column.data.position, "layoutIndex") ? column.data.position.layoutIndex : 1;
+        var section = this.getOrCreateSection(order, layoutIndex, ((_b = (_a = column.data) === null || _a === void 0 ? void 0 : _a.emphasis) === null || _b === void 0 ? void 0 : _b.zoneEmphasis) || 0);
+        column.section = section;
+        section.columns.push(column);
+    };
+    /**
+     * Handle the logic to get or create a section based on the supplied order and layoutIndex
+     *
+     * @param order Section order
+     * @param layoutIndex Layout Index (1 === normal, 2 === vertical section)
+     * @param emphasis The section emphasis
+     */
+    _ClientsidePage.prototype.getOrCreateSection = function (order, layoutIndex, emphasis) {
+        var section = null;
+        var sections = this.sections.filter(function (s) { return s.order === order && s.layoutIndex === layoutIndex; });
+        if (sections.length < 1) {
+            section = layoutIndex === 2 ? this.addVerticalSection() : this.addSection();
+            section.order = order;
+            section.emphasis = emphasis;
+        }
+        else {
+            section = sections[0];
+        }
+        return section;
+    };
+    /**
+     * Based on issue #1690 we need to take special case actions to ensure some things
+     * can be saved properly without breaking existing pages.
+     *
+     * @param control The control we are ensuring is "ready" to be saved
+     */
+    _ClientsidePage.prototype.specialSaveHandling = function (control) {
+        var _a, _b, _c;
+        // this is to handle the special case in issue #1690
+        // must ensure that searchablePlainTexts values have < replaced with &lt; in links web part
+        if (control.data.controlType === 3 && control.data.webPartId === "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd") {
+            var texts = ((_c = (_b = (_a = control.data) === null || _a === void 0 ? void 0 : _a.webPartData) === null || _b === void 0 ? void 0 : _b.serverProcessedContent) === null || _c === void 0 ? void 0 : _c.searchablePlainTexts) || null;
+            if (objectDefinedNotNull(texts)) {
+                var keys = Object.getOwnPropertyNames(texts);
+                for (var i = 0; i < keys.length; i++) {
+                    texts[keys[i]] = texts[keys[i]].replace(/</ig, "&lt;");
+                    control.data.webPartData.serverProcessedContent.searchablePlainTexts = texts;
+                }
+            }
+        }
+        return control;
+    };
+    __decorate([
+        tag("csp.load")
+    ], _ClientsidePage.prototype, "load", null);
+    __decorate([
+        tag("csp.save")
+    ], _ClientsidePage.prototype, "save", null);
+    __decorate([
+        tag("csp.discardPageCheckout")
+    ], _ClientsidePage.prototype, "discardPageCheckout", null);
+    __decorate([
+        tag("csp.promoteToNews")
+    ], _ClientsidePage.prototype, "promoteToNews", null);
+    __decorate([
+        tag("csp.copy")
+    ], _ClientsidePage.prototype, "copy", null);
+    __decorate([
+        tag("csp.copyTo")
+    ], _ClientsidePage.prototype, "copyTo", null);
+    __decorate([
+        tag("csp.getItem")
+    ], _ClientsidePage.prototype, "getItem", null);
+    return _ClientsidePage;
+}(_SharePointQueryable));
+export { _ClientsidePage };
+/**
+ * Invokable factory for IClientSidePage instances
+ */
+var ClientsidePage = function (baseUrl, path, json, noInit, sections, commentsDisabled) {
+    if (noInit === void 0) { noInit = false; }
+    if (sections === void 0) { sections = []; }
+    if (commentsDisabled === void 0) { commentsDisabled = false; }
+    return invokableFactory(_ClientsidePage)(baseUrl, path, json, noInit, sections, commentsDisabled);
+};
+/**
+ * Loads a client side page from the supplied IFile instance
+ *
+ * @param file Source IFile instance
+ */
+export var ClientsidePageFromFile = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+    var item, page;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, file.getItem()];
+            case 1:
+                item = _a.sent();
+                page = ClientsidePage(extractWebUrl(file.toUrl()), "", { Id: item.Id }, true);
+                return [2 /*return*/, page.configureFrom(file).load()];
+        }
+    });
+}); };
+/**
+ * Creates a new client side page
+ *
+ * @param web The web or list
+ * @param pageName The name of the page (filename)
+ * @param title The page's title
+ * @param PageLayoutType Layout to use when creating the page
+ */
+export var CreateClientsidePage = function (web, pageName, title, PageLayoutType, promotedState) {
+    if (PageLayoutType === void 0) { PageLayoutType = "Article"; }
+    if (promotedState === void 0) { promotedState = 0; }
+    return __awaiter(void 0, void 0, void 0, function () {
+        var pageInitData, newPage;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // patched because previously we used the full page name with the .aspx at the end
+                    // this allows folk's existing code to work after the re-write to the new API
+                    pageName = pageName.replace(/\.aspx$/i, "");
+                    return [4 /*yield*/, spPost(initFrom(web, "_api/sitepages/pages"), body(Object.assign(metadata("SP.Publishing.SitePage"), {
+                            PageLayoutType: PageLayoutType,
+                            PromotedState: promotedState,
+                        })))];
+                case 1:
+                    pageInitData = _a.sent();
+                    newPage = ClientsidePage(web, "", pageInitData);
+                    newPage.title = pageName;
+                    return [4 /*yield*/, newPage.save(false)];
+                case 2:
+                    _a.sent();
+                    newPage.title = title;
+                    return [2 /*return*/, newPage];
+            }
+        });
+    });
+};
+var CanvasSection = /** @class */ (function () {
+    function CanvasSection(page, order, layoutIndex, columns, _emphasis) {
+        if (columns === void 0) { columns = []; }
+        if (_emphasis === void 0) { _emphasis = 0; }
+        this.page = page;
+        this.columns = columns;
+        this._emphasis = _emphasis;
+        this._memId = getGUID();
+        this._order = order;
+        this._layoutIndex = layoutIndex;
+    }
+    Object.defineProperty(CanvasSection.prototype, "order", {
+        get: function () {
+            return this._order;
+        },
+        set: function (value) {
+            this._order = value;
+            for (var i = 0; i < this.columns.length; i++) {
+                this.columns[i].data.position.zoneIndex = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CanvasSection.prototype, "layoutIndex", {
+        get: function () {
+            return this._layoutIndex;
+        },
+        set: function (value) {
+            this._layoutIndex = value;
+            for (var i = 0; i < this.columns.length; i++) {
+                this.columns[i].data.position.layoutIndex = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CanvasSection.prototype, "defaultColumn", {
+        /**
+         * Default column (this.columns[0]) for this section
+         */
+        get: function () {
+            if (this.columns.length < 1) {
+                this.addColumn(12);
+            }
+            return this.columns[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Adds a new column to this section
+     */
+    CanvasSection.prototype.addColumn = function (factor, layoutIndex) {
+        if (layoutIndex === void 0) { layoutIndex = this.layoutIndex; }
+        var column = new CanvasColumn();
+        column.section = this;
+        column.data.position.zoneIndex = this.order;
+        column.data.position.layoutIndex = layoutIndex;
+        column.data.position.sectionFactor = factor;
+        column.order = getNextOrder(this.columns);
+        this.columns.push(column);
+        return column;
+    };
+    /**
+     * Adds a control to the default column for this section
+     *
+     * @param control Control to add to the default column
+     */
+    CanvasSection.prototype.addControl = function (control) {
+        this.defaultColumn.addControl(control);
+        return this;
+    };
+    Object.defineProperty(CanvasSection.prototype, "emphasis", {
+        get: function () {
+            return this._emphasis;
+        },
+        set: function (value) {
+            this._emphasis = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Removes this section and all contained columns and controls from the collection
+     */
+    CanvasSection.prototype.remove = function () {
+        var _this = this;
+        this.page.sections = this.page.sections.filter(function (section) { return section._memId !== _this._memId; });
+        reindex(this.page.sections);
+    };
+    return CanvasSection;
+}());
+export { CanvasSection };
+var CanvasColumn = /** @class */ (function () {
+    function CanvasColumn(json, controls) {
+        if (json === void 0) { json = JSON.parse(JSON.stringify(CanvasColumn.Default)); }
+        if (controls === void 0) { controls = []; }
+        this.json = json;
+        this.controls = controls;
+        this._section = null;
+        this._memId = getGUID();
+    }
+    Object.defineProperty(CanvasColumn.prototype, "data", {
+        get: function () {
+            return this.json;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CanvasColumn.prototype, "section", {
+        get: function () {
+            return this._section;
+        },
+        set: function (section) {
+            this._section = section;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CanvasColumn.prototype, "order", {
+        get: function () {
+            return this.data.position.sectionIndex;
+        },
+        set: function (value) {
+            this.data.position.sectionIndex = value;
+            for (var i = 0; i < this.controls.length; i++) {
+                this.controls[i].data.position.zoneIndex = this.data.position.zoneIndex;
+                this.controls[i].data.position.layoutIndex = this.data.position.layoutIndex;
+                this.controls[i].data.position.sectionIndex = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CanvasColumn.prototype, "factor", {
+        get: function () {
+            return this.data.position.sectionFactor;
+        },
+        set: function (value) {
+            this.data.position.sectionFactor = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    CanvasColumn.prototype.addControl = function (control) {
+        control.column = this;
+        this.controls.push(control);
+        return this;
+    };
+    CanvasColumn.prototype.getControl = function (index) {
+        return this.controls[index];
+    };
+    CanvasColumn.prototype.remove = function () {
+        var _this = this;
+        this.section.columns = this.section.columns.filter(function (column) { return column._memId !== _this._memId; });
+        reindex(this.section.columns);
+    };
+    CanvasColumn.Default = {
+        controlType: 0,
+        displayMode: 2,
+        emphasis: {},
+        position: {
+            layoutIndex: 1,
+            sectionFactor: 12,
+            sectionIndex: 1,
+            zoneIndex: 1,
+        },
+    };
+    return CanvasColumn;
+}());
+export { CanvasColumn };
+var ColumnControl = /** @class */ (function () {
+    function ColumnControl(json) {
+        this.json = json;
+    }
+    Object.defineProperty(ColumnControl.prototype, "id", {
+        get: function () {
+            return this.json.id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ColumnControl.prototype, "data", {
+        get: function () {
+            return this.json;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ColumnControl.prototype, "column", {
+        get: function () {
+            return this._column;
+        },
+        set: function (value) {
+            this._column = value;
+            this.onColumnChange(this._column);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ColumnControl.prototype.remove = function () {
+        var _this = this;
+        this.column.controls = this.column.controls.filter(function (control) { return control.id !== _this.id; });
+        reindex(this.column.controls);
+    };
+    ColumnControl.prototype.setData = function (data) {
+        this.json = data;
+    };
+    return ColumnControl;
+}());
+export { ColumnControl };
+var ClientsideText = /** @class */ (function (_super) {
+    __extends(ClientsideText, _super);
+    function ClientsideText(text, json) {
+        if (json === void 0) { json = JSON.parse(JSON.stringify(ClientsideText.Default)); }
+        var _this = this;
+        if (stringIsNullOrEmpty(json.id)) {
+            json.id = getGUID();
+            json.anchorComponentId = json.id;
+        }
+        _this = _super.call(this, json) || this;
+        _this.text = text;
+        return _this;
+    }
+    Object.defineProperty(ClientsideText.prototype, "text", {
+        get: function () {
+            return this.data.innerHTML;
+        },
+        set: function (value) {
+            this.data.innerHTML = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ClientsideText.prototype, "order", {
+        get: function () {
+            return this.data.position.controlIndex;
+        },
+        set: function (value) {
+            this.data.position.controlIndex = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ClientsideText.prototype.onColumnChange = function (col) {
+        this.data.position.sectionFactor = col.factor;
+        this.data.position.controlIndex = getNextOrder(col.controls);
+        this.data.position.zoneIndex = col.data.position.zoneIndex;
+        this.data.position.sectionIndex = col.order;
+        this.data.position.layoutIndex = col.data.position.layoutIndex;
+    };
+    ClientsideText.Default = {
+        addedFromPersistedData: false,
+        anchorComponentId: "",
+        controlType: 4,
+        displayMode: 2,
+        editorType: "CKEditor",
+        emphasis: {},
+        id: "",
+        innerHTML: "",
+        position: {
+            controlIndex: 1,
+            layoutIndex: 1,
+            sectionFactor: 12,
+            sectionIndex: 1,
+            zoneIndex: 1,
+        },
+    };
+    return ClientsideText;
+}(ColumnControl));
+export { ClientsideText };
+var ClientsideWebpart = /** @class */ (function (_super) {
+    __extends(ClientsideWebpart, _super);
+    function ClientsideWebpart(json) {
+        if (json === void 0) { json = JSON.parse(JSON.stringify(ClientsideWebpart.Default)); }
+        return _super.call(this, json) || this;
+    }
+    ClientsideWebpart.fromComponentDef = function (definition) {
+        var part = new ClientsideWebpart();
+        part.import(definition);
+        return part;
+    };
+    Object.defineProperty(ClientsideWebpart.prototype, "title", {
+        get: function () {
+            return this.data.webPartData.title;
+        },
+        set: function (value) {
+            this.data.webPartData.title = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ClientsideWebpart.prototype, "description", {
+        get: function () {
+            return this.data.webPartData.description;
+        },
+        set: function (value) {
+            this.data.webPartData.description = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ClientsideWebpart.prototype, "order", {
+        get: function () {
+            return this.data.position.controlIndex;
+        },
+        set: function (value) {
+            this.data.position.controlIndex = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ClientsideWebpart.prototype, "height", {
+        get: function () {
+            return this.data.reservedHeight;
+        },
+        set: function (value) {
+            this.data.reservedHeight = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ClientsideWebpart.prototype, "width", {
+        get: function () {
+            return this.data.reservedWidth;
+        },
+        set: function (value) {
+            this.data.reservedWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ClientsideWebpart.prototype, "dataVersion", {
+        get: function () {
+            return this.data.webPartData.dataVersion;
+        },
+        set: function (value) {
+            this.data.webPartData.dataVersion = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ClientsideWebpart.prototype.setProperties = function (properties) {
+        this.data.webPartData.properties = assign(this.data.webPartData.properties, properties);
+        return this;
+    };
+    ClientsideWebpart.prototype.setServerProcessedContent = function (properties) {
+        this.data.webPartData.serverProcessedContent = assign(this.data.webPartData.serverProcessedContent || {}, properties);
+        return this;
+    };
+    ClientsideWebpart.prototype.getProperties = function () {
+        return this.data.webPartData.properties;
+    };
+    ClientsideWebpart.prototype.getServerProcessedContent = function () {
+        return this.data.webPartData.serverProcessedContent;
+    };
+    ClientsideWebpart.prototype.onColumnChange = function (col) {
+        this.data.position.sectionFactor = col.factor;
+        this.data.position.controlIndex = getNextOrder(col.controls);
+        this.data.position.zoneIndex = col.data.position.zoneIndex;
+        this.data.position.sectionIndex = col.data.position.sectionIndex;
+        this.data.position.layoutIndex = col.data.position.layoutIndex;
+    };
+    ClientsideWebpart.prototype.import = function (component) {
+        var id = getGUID();
+        var componendId = component.Id.replace(/^\{|\}$/g, "").toLowerCase();
+        var manifest = JSON.parse(component.Manifest);
+        var preconfiguredEntries = manifest.preconfiguredEntries[0];
+        this.setData(Object.assign({}, this.data, {
+            id: id,
+            webPartData: {
+                dataVersion: "1.0",
+                description: preconfiguredEntries.description.default,
+                id: componendId,
+                instanceId: id,
+                properties: preconfiguredEntries.properties,
+                title: preconfiguredEntries.title.default,
+            },
+            webPartId: componendId,
+        }));
+    };
+    ClientsideWebpart.Default = {
+        addedFromPersistedData: false,
+        controlType: 3,
+        displayMode: 2,
+        emphasis: {},
+        id: null,
+        position: {
+            controlIndex: 1,
+            layoutIndex: 1,
+            sectionFactor: 12,
+            sectionIndex: 1,
+            zoneIndex: 1,
+        },
+        reservedHeight: 500,
+        reservedWidth: 500,
+        webPartData: null,
+        webPartId: null,
+    };
+    return ClientsideWebpart;
+}(ColumnControl));
+export { ClientsideWebpart };
 //# sourceMappingURL=types.js.map