@microsoft/fast-html 1.0.0-alpha.31 → 1.0.0-alpha.32

package/dist/esm/fixtures/repeat/main.js

@@ -1,44 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { FASTElement, observable } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.list = ["Foo", "Bar"];
-        this.item_parent = "Bat";
-    }
-}
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "list", void 0);
-RenderableFASTElement(TestElement).defineAsync({
-    name: "test-element",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementInnerWhen extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.list = [
-            {
-                show: true,
-                text: "Foo",
-            },
-            {
-                show: false,
-                text: "Bar",
-            },
-        ];
-    }
-}
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElementInnerWhen.prototype, "list", void 0);
-RenderableFASTElement(TestElementInnerWhen).defineAsync({
-    name: "test-element-inner-when",
-    templateOptions: "defer-and-hydrate",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/repeat/repeat.spec.js

@@ -1,36 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a repeat directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/repeat");
-        const customElement = yield page.locator("test-element");
-        let customElementListItems = yield customElement.locator("li");
-        expect(yield customElementListItems.count()).toEqual(2);
-        expect(yield customElementListItems.nth(0).textContent()).toEqual("Foo - Bat");
-        expect(yield customElementListItems.nth(1).textContent()).toEqual("Bar - Bat");
-        yield page.evaluate(() => {
-            const customElement = document.getElementsByTagName("test-element");
-            customElement.item(0).list = [
-                "A",
-                "B",
-                "C"
-            ];
-        });
-        const timeout = new Promise(function (resolve) {
-            setTimeout(resolve, 100);
-        });
-        yield timeout;
-        customElementListItems = yield customElement.locator("li");
-        expect(yield customElementListItems.count()).toEqual(3);
-        expect(yield customElementListItems.nth(0).textContent()).toEqual("A - Bat");
-        expect(yield customElementListItems.nth(1).textContent()).toEqual("B - Bat");
-        expect(yield customElementListItems.nth(2).textContent()).toEqual("C - Bat");
-    }));
-    test("create a repeat directive with an inner when", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/repeat");
-        const customElement = yield page.locator("test-element-inner-when");
-        let customElementListItems = yield customElement.locator("li");
-        expect(yield customElementListItems.count()).toEqual(1);
-        expect(yield customElementListItems.nth(0).textContent()).toEqual("Foo");
-    }));
-}));

package/dist/esm/fixtures/slotted/main.js

@@ -1,33 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { FASTElement, observable } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.slottedNodes = [];
-        this.slottedFooNodes = [];
-        this.slottedBarNodes = [];
-    }
-    slottedFooNodesChanged() {
-        this.classList.add(`class-${this.slottedFooNodes.length}`);
-    }
-}
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "slottedNodes", void 0);
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "slottedFooNodes", void 0);
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "slottedBarNodes", void 0);
-RenderableFASTElement(TestElement).defineAsync({
-    name: "test-element",
-    templateOptions: "defer-and-hydrate",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/slotted/slotted.spec.js

@@ -1,24 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => {
-    let element;
-    test.beforeEach(({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/slotted");
-        element = page.locator("test-element");
-    }));
-    test("create a slotted directive", () => __awaiter(void 0, void 0, void 0, function* () {
-        yield expect(element).toHaveJSProperty("classList.length", 2);
-        yield element.evaluate((node) => {
-            const newElement = document.createElement("button");
-            newElement.slot = "foo";
-            node.append(newElement);
-        });
-        yield expect(element).toHaveJSProperty("classList.length", 3);
-    }));
-    test("slotted nodes are filtered by elements()", () => __awaiter(void 0, void 0, void 0, function* () {
-        yield expect(element).toHaveJSProperty("slottedNodes.length", 1);
-    }));
-    test("slotted nodes are filtered by elements() with query", () => __awaiter(void 0, void 0, void 0, function* () {
-        yield expect(element).toHaveJSProperty("slottedBarNodes.length", 1);
-    }));
-});

package/dist/esm/fixtures/when/main.js

@@ -1,156 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { attr, FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.show = false;
-    }
-}
-__decorate([
-    attr({ mode: "boolean" }),
-    __metadata("design:type", Boolean)
-], TestElement.prototype, "show", void 0);
-RenderableFASTElement(TestElement).defineAsync({
-    name: "test-element",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementNot extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.hide = false;
-    }
-}
-__decorate([
-    attr({ mode: "boolean" }),
-    __metadata("design:type", Boolean)
-], TestElementNot.prototype, "hide", void 0);
-RenderableFASTElement(TestElementNot).defineAsync({
-    name: "test-element-not",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementEquals extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.varA = 0;
-    }
-}
-__decorate([
-    attr({ attribute: "var-a" }),
-    __metadata("design:type", Number)
-], TestElementEquals.prototype, "varA", void 0);
-RenderableFASTElement(TestElementEquals).defineAsync({
-    name: "test-element-equals",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementNotEquals extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.varA = 0;
-    }
-}
-__decorate([
-    attr({ attribute: "var-a" }),
-    __metadata("design:type", Number)
-], TestElementNotEquals.prototype, "varA", void 0);
-RenderableFASTElement(TestElementNotEquals).defineAsync({
-    name: "test-element-not-equals",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementGe extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.varA = 0;
-    }
-}
-__decorate([
-    attr({ attribute: "var-a" }),
-    __metadata("design:type", Number)
-], TestElementGe.prototype, "varA", void 0);
-RenderableFASTElement(TestElementGe).defineAsync({
-    name: "test-element-ge",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementGt extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.varA = 0;
-    }
-}
-__decorate([
-    attr({ attribute: "var-a" }),
-    __metadata("design:type", Number)
-], TestElementGt.prototype, "varA", void 0);
-RenderableFASTElement(TestElementGt).defineAsync({
-    name: "test-element-gt",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementLe extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.varA = 0;
-    }
-}
-__decorate([
-    attr({ attribute: "var-a" }),
-    __metadata("design:type", Number)
-], TestElementLe.prototype, "varA", void 0);
-RenderableFASTElement(TestElementLe).defineAsync({
-    name: "test-element-le",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementLt extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.varA = 0;
-    }
-}
-__decorate([
-    attr({ attribute: "var-a" }),
-    __metadata("design:type", Number)
-], TestElementLt.prototype, "varA", void 0);
-RenderableFASTElement(TestElementLt).defineAsync({
-    name: "test-element-lt",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementOr extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.thisVar = false;
-        this.thatVar = false;
-    }
-}
-__decorate([
-    attr({ attribute: "this-var", mode: "boolean" }),
-    __metadata("design:type", Boolean)
-], TestElementOr.prototype, "thisVar", void 0);
-__decorate([
-    attr({ attribute: "that-var", mode: "boolean" }),
-    __metadata("design:type", Boolean)
-], TestElementOr.prototype, "thatVar", void 0);
-RenderableFASTElement(TestElementOr).defineAsync({
-    name: "test-element-or",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementAnd extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.thisVar = false;
-        this.thatVar = false;
-    }
-}
-__decorate([
-    attr({ attribute: "this-var", mode: "boolean" }),
-    __metadata("design:type", Boolean)
-], TestElementAnd.prototype, "thisVar", void 0);
-__decorate([
-    attr({ attribute: "that-var", mode: "boolean" }),
-    __metadata("design:type", Boolean)
-], TestElementAnd.prototype, "thatVar", void 0);
-RenderableFASTElement(TestElementAnd).defineAsync({
-    name: "test-element-and",
-    templateOptions: "defer-and-hydrate",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/when/when.spec.js

@@ -1,82 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a when directive for a boolean: true", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#show");
-        const customElementHide = yield page.locator("#hide");
-        yield expect(customElementShow).toHaveText("Hello world");
-        yield expect(customElementHide).not.toHaveText("Hello world");
-        yield page.evaluate(() => {
-            const customElementShow = document.getElementById("show");
-            const customElementHide = document.getElementById("hide");
-            customElementShow === null || customElementShow === void 0 ? void 0 : customElementShow.removeAttribute("show");
-            customElementHide === null || customElementHide === void 0 ? void 0 : customElementHide.setAttribute("show", "");
-        });
-        yield expect(customElementShow).not.toHaveText("Hello world");
-        yield expect(customElementHide).toHaveText("Hello world");
-    }));
-    test("create a when directive for a boolean: false", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#show-not");
-        const customElementHide = yield page.locator("#hide-not");
-        yield expect(customElementShow).toHaveText("Hello world");
-        yield expect(customElementHide).not.toHaveText("Hello world");
-    }));
-    test("create a when directive value uses equals", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#equals-true");
-        const customElementHide = yield page.locator("#equals-false");
-        yield expect(customElementShow).toHaveText("Equals 3");
-        yield expect(customElementHide).not.toHaveText("Equals 3");
-    }));
-    test("create a when directive value uses not equals", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#not-equals-true");
-        const customElementHide = yield page.locator("#not-equals-false");
-        yield expect(customElementShow).toHaveText("Not equals 3");
-        yield expect(customElementHide).not.toHaveText("Not equals 3");
-    }));
-    test("create a when directive value uses greater than or equals", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#ge-true");
-        const customElementHide = yield page.locator("#ge-false");
-        yield expect(customElementShow).toHaveText("Two and Over");
-        yield expect(customElementHide).not.toHaveText("Two and Over");
-    }));
-    test("create a when directive value uses greater than", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#gt-true");
-        const customElementHide = yield page.locator("#gt-false");
-        yield expect(customElementShow).toHaveText("Over two");
-        yield expect(customElementHide).not.toHaveText("Over two");
-    }));
-    test("create a when directive value uses less than or equals", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#le-true");
-        const customElementHide = yield page.locator("#le-false");
-        yield expect(customElementShow).toHaveText("Two and Under");
-        yield expect(customElementHide).not.toHaveText("Two and Under");
-    }));
-    test("create a when directive value uses less than", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#lt-true");
-        const customElementHide = yield page.locator("#lt-false");
-        yield expect(customElementShow).toHaveText("Under two");
-        yield expect(customElementHide).not.toHaveText("Under two");
-    }));
-    test("create a when directive value uses or", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#or-true");
-        const customElementHide = yield page.locator("#or-false");
-        yield expect(customElementShow).toHaveText("This or That");
-        yield expect(customElementHide).not.toHaveText("This or That");
-    }));
-    test("create a when directive value uses and", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/when");
-        const customElementShow = yield page.locator("#and-true");
-        const customElementHide = yield page.locator("#and-false");
-        yield expect(customElementShow).toHaveText("This and That");
-        yield expect(customElementHide).not.toHaveText("This and That");
-    }));
-}));