@3t-transform/threeteeui 0.0.24 → 0.1.0

package/dist/types/components.d.ts

@@ -14,6 +14,10 @@ export namespace Components {
         "iconposition": 'left' | 'right';
         "notext": boolean;
     }
+    interface TttxForm {
+        "formschema": any;
+        "submitValue": any;
+    }
     interface TttxIcon {
         "color": string;
         "icon": string;
@@ -24,6 +28,7 @@ export namespace Components {
     }
     interface TttxList {
         "data": string | ListItem[];
+        "name": string;
     }
     interface TttxLoadingSpinner {
         "loadingMessage": boolean;
@@ -36,6 +41,7 @@ export namespace Components {
         "errormsg": string;
         "iconleft": string;
         "iconright": string;
+        "inline": boolean;
         "inputAutocapitalize": 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
         "inputAutofocus": boolean;
         /**
@@ -49,6 +55,7 @@ export namespace Components {
          */
         "inputKeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
         "inputTitle": string;
+        "inputicon": string;
         "label": string;
         "max": MinMaxDates | number;
         "maxlength": string | number;
@@ -59,17 +66,16 @@ export namespace Components {
         "placeholder": string;
         "readonly": string | boolean;
         "required": boolean;
+        "showerrorbubble": boolean;
         "showerrormsg": boolean;
         "step": string | number;
         "type": string;
         "value": string | number;
     }
-    interface TttxTable {
-        "data": any[];
-        "headers": any[];
-        "loading": boolean;
-        "selected": number;
-    }
+}
+export interface TttxFormCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxFormElement;
 }
 export interface TttxListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -79,10 +85,6 @@ export interface TttxStandaloneInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxStandaloneInputElement;
 }
-export interface TttxTableCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLTttxTableElement;
-}
 declare global {
     interface HTMLTttxButtonElement extends Components.TttxButton, HTMLStencilElement {
     }
@@ -90,6 +92,12 @@ declare global {
         prototype: HTMLTttxButtonElement;
         new (): HTMLTttxButtonElement;
     };
+    interface HTMLTttxFormElement extends Components.TttxForm, HTMLStencilElement {
+    }
+    var HTMLTttxFormElement: {
+        prototype: HTMLTttxFormElement;
+        new (): HTMLTttxFormElement;
+    };
     interface HTMLTttxIconElement extends Components.TttxIcon, HTMLStencilElement {
     }
     var HTMLTttxIconElement: {
@@ -120,20 +128,14 @@ declare global {
         prototype: HTMLTttxStandaloneInputElement;
         new (): HTMLTttxStandaloneInputElement;
     };
-    interface HTMLTttxTableElement extends Components.TttxTable, HTMLStencilElement {
-    }
-    var HTMLTttxTableElement: {
-        prototype: HTMLTttxTableElement;
-        new (): HTMLTttxTableElement;
-    };
     interface HTMLElementTagNameMap {
         "tttx-button": HTMLTttxButtonElement;
+        "tttx-form": HTMLTttxFormElement;
         "tttx-icon": HTMLTttxIconElement;
         "tttx-keyvalue-block": HTMLTttxKeyvalueBlockElement;
         "tttx-list": HTMLTttxListElement;
         "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
         "tttx-standalone-input": HTMLTttxStandaloneInputElement;
-        "tttx-table": HTMLTttxTableElement;
     }
 }
 declare namespace LocalJSX {
@@ -143,6 +145,12 @@ declare namespace LocalJSX {
         "iconposition"?: 'left' | 'right';
         "notext"?: boolean;
     }
+    interface TttxForm {
+        "formschema"?: any;
+        "onDataChanged"?: (event: TttxFormCustomEvent<{ name: string, value: any }>) => void;
+        "onDataSubmitted"?: (event: TttxFormCustomEvent<FormData>) => void;
+        "submitValue"?: any;
+    }
     interface TttxIcon {
         "color"?: string;
         "icon"?: string;
@@ -153,7 +161,8 @@ declare namespace LocalJSX {
     }
     interface TttxList {
         "data"?: string | ListItem[];
-        "onListItemClick"?: (event: TttxListCustomEvent<any>) => void;
+        "name"?: string;
+        "onListRowClick"?: (event: TttxListCustomEvent<any>) => void;
     }
     interface TttxLoadingSpinner {
         "loadingMessage"?: boolean;
@@ -166,6 +175,7 @@ declare namespace LocalJSX {
         "errormsg"?: string;
         "iconleft"?: string;
         "iconright"?: string;
+        "inline"?: boolean;
         "inputAutocapitalize"?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
         "inputAutofocus"?: boolean;
         /**
@@ -179,6 +189,7 @@ declare namespace LocalJSX {
          */
         "inputKeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
         "inputTitle"?: string;
+        "inputicon"?: string;
         "label"?: string;
         "max"?: MinMaxDates | number;
         "maxlength"?: string | number;
@@ -193,27 +204,20 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         "readonly"?: string | boolean;
         "required"?: boolean;
+        "showerrorbubble"?: boolean;
         "showerrormsg"?: boolean;
         "step"?: string | number;
         "type"?: string;
         "value"?: string | number;
     }
-    interface TttxTable {
-        "data"?: any[];
-        "headers"?: any[];
-        "loading"?: boolean;
-        "onHeaderClicked"?: (event: TttxTableCustomEvent<any>) => void;
-        "onRowSelected"?: (event: TttxTableCustomEvent<any>) => void;
-        "selected"?: number;
-    }
     interface IntrinsicElements {
         "tttx-button": TttxButton;
+        "tttx-form": TttxForm;
         "tttx-icon": TttxIcon;
         "tttx-keyvalue-block": TttxKeyvalueBlock;
         "tttx-list": TttxList;
         "tttx-loading-spinner": TttxLoadingSpinner;
         "tttx-standalone-input": TttxStandaloneInput;
-        "tttx-table": TttxTable;
     }
 }
 export { LocalJSX as JSX };
@@ -221,12 +225,12 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "tttx-button": LocalJSX.TttxButton & JSXBase.HTMLAttributes<HTMLTttxButtonElement>;
+            "tttx-form": LocalJSX.TttxForm & JSXBase.HTMLAttributes<HTMLTttxFormElement>;
             "tttx-icon": LocalJSX.TttxIcon & JSXBase.HTMLAttributes<HTMLTttxIconElement>;
             "tttx-keyvalue-block": LocalJSX.TttxKeyvalueBlock & JSXBase.HTMLAttributes<HTMLTttxKeyvalueBlockElement>;
             "tttx-list": LocalJSX.TttxList & JSXBase.HTMLAttributes<HTMLTttxListElement>;
             "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
             "tttx-standalone-input": LocalJSX.TttxStandaloneInput & JSXBase.HTMLAttributes<HTMLTttxStandaloneInputElement>;
-            "tttx-table": LocalJSX.TttxTable & JSXBase.HTMLAttributes<HTMLTttxTableElement>;
         }
     }
 }

package/dist/types/shared/domsanitiser.options.d.ts

@@ -0,0 +1,10 @@
+declare function tagRegXp(tagName: string): RegExpExecArray;
+declare function attributeNameCheck(): boolean;
+declare const domSanitiserOptions: {
+  CUSTOM_ELEMENT_HANDLING: {
+    tagNameCheck: typeof tagRegXp;
+    attributeNameCheck: typeof attributeNameCheck;
+    allowCustomizedBuiltInElements: boolean;
+  };
+};
+export default domSanitiserOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.0.24",
+    "version": "0.1.0",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/cjs/tttx-table.cjs.entry.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bc080fb4.js');
-
-const tttxTableCss = "// SPACING $spacing-unit: 4px; // REGULAR $horizontal-spacing: $spacing-unit * 4; $vertical-spacing: $spacing-unit * 2; $base-padding: $vertical-spacing $horizontal-spacing; $base-height: $spacing-unit * 9; $component-spacing: $spacing-unit * 4; // SMALL $horizontal-spacing-sm: $spacing-unit * 2; $vertical-spacing-sm: $spacing-unit * 1; $base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm; $base-height-sm: $spacing-unit * 7; // COLOURS $grey-0: #212121; $grey-1: #363636; $grey-2: #4c4c4c; $grey-3: #636363; $grey-4: #757575; $grey-5: #9e9e9e; $grey-6: #aeaeae; $grey-7: #c8c8c8; $grey-8: #e3e3e3; $grey-9: #f0f0f0; $white: white; $black: $grey-0; $transparent: transparent; $blue-0: #00187c; $blue-1: #032e8c; $blue-2: #0849a3; $blue-3: #0951a8; $blue-4: #1169ba; $blue-5: #1479c6; $blue-6: #5194d2; $blue-7: #7aacdd; $blue-8: #b9d5ed; $blue-9: #e7f1f9; $red-0: #7c0000; $red-1: #8c0000; $red-2: #a30000; $red-3: #a80000; $red-4: #ba0000; $red-5: #dc0000; $red-6: #d25151; $red-7: #dd7a7a; $red-8: #edc1c1; $red-9: #f9e7e7; $black-1: #e6e6e6; $brand: $blue-0; $accent: $blue-5; $accent-selected: $blue-9; $error: $red-5; $severity-critical: #dc0000; $severity-warning: #f59500; $severity-success: #a2bb31; $severity-info: $accent; $ui-primary: $black; $ui-secondary: $grey-4; $ui-disabled: $grey-2; $ui-placeholder: $grey-5; $ui-background: $grey-9; $ui-sheet: $white; $ui-border: #d5d5d5; // BORDERS $ui-border-radius: 4px; $ui-border-width: 1px; // TYPOGRAPHY $font-size-default: 16px; $font-size-small: 14px; .material-symbols-rounded{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:hsl(200, 20%, 80%)}100%{background-color:hsl(200, 20%, 95%)}}:host{display:block}table{box-sizing:border-box;width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #ddd;border-bottom:none}thead tr{height:52px;color:#757575}tbody tr{height:48px;color:#212121}tr{font-family:'Roboto', sans-serif;font-weight:400;font-size:16px;display:flex;align-items:center;border-bottom:1px solid #ddd}.selected{background-color:#F0F0F0}.checked{background-color:#e7f1f9}td,th{min-width:300px;margin-left:16px;display:flex;align-items:left}.skeleton{height:24px;display:block}.align-right{margin-left:auto}";
-
-const TttxTable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.rowSelected = index.createEvent(this, "rowSelected", 7);
-    this.headerClicked = index.createEvent(this, "headerClicked", 7);
-    this.headers = [];
-    this.data = [];
-    this.loading = false;
-    this.selected = -1;
-  }
-  handleKeyDown(ev) {
-    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-      this.updateSelectedIndex(ev.key);
-      this.emitRowSelected();
-    }
-  }
-  updateSelectedIndex(key) {
-    if (this.selected === -1) {
-      this.selected = 0;
-    }
-    else {
-      const isArrowDown = key === 'ArrowDown';
-      const isArrowUp = key === 'ArrowUp';
-      if (isArrowDown && this.selected < this.data.length - 1) {
-        this.selected++;
-      }
-      else if (isArrowUp && this.selected > 0) {
-        this.selected--;
-      }
-    }
-  }
-  emitRowSelected() {
-    this.rowSelected.emit(this.data[this.selected]);
-  }
-  rowSelectedHandler(row) {
-    this.rowSelected.emit(row);
-    this.selected = this.data.findIndex((item) => item === row);
-  }
-  headerClickedHandler(key) {
-    this.headerClicked.emit(key);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("table", null, index.h("thead", null, index.h("tr", null, this.loading ?
-      [1, 2, 3].map(() => (index.h("th", null, index.h("div", { class: "skeleton" })))) :
-      this.headers && this.headers.map((header) => (index.h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), index.h("tbody", null, this.loading ?
-      [1, 2, 3].map(() => (index.h("tr", null, index.h("td", null, index.h("div", { class: "skeleton" })), index.h("td", null, index.h("div", { class: "skeleton" })), index.h("td", null, index.h("div", { class: "skeleton" }))))) :
-      Object.keys(this.data).map((key, index$1) => (index.h("tr", { class: index$1 === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (index.h("td", null, this.data[key][header.key], " ", header.actions && index.h("tttx-icon", { class: "align-right", icon: "more_vert" }, index.h("div", { slot: "popover" }, index.h("tttx-popover-content", { header: "The humble egg", body: "Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.", linkcontext: "Wikipedia_egg", linktext: "Learn more about eggs" })))))))))))));
-  }
-};
-TttxTable.style = tttxTableCss;
-
-exports.tttx_table = TttxTable;

package/dist/collection/components/atoms/tttx-button/test/tttx-button.e2e.js

@@ -1,9 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-describe('tttx-button', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<tttx-button></tttx-button>');
-    const element = await page.find('tttx-button');
-    expect(element).toHaveClass('hydrated');
-  });
-});

package/dist/collection/components/atoms/tttx-button/test/tttx-button.spec.js

@@ -1,43 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxButton } from '../tttx-button';
-describe('tttx-button', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [TttxButton],
-      html: '<tttx-button></tttx-button>',
-    });
-    expect(page.root).toEqualHtml(`
-            <tttx-button>
-                <mock:shadow-root>
-                    <button class="button default">
-                        <div class="button-content">
-                            <slot></slot>
-                        </div>
-                    </button>
-                </mock:shadow-root>
-            </tttx-button>
-        `);
-  });
-  it('clicks', async () => {
-    const page = await newSpecPage({
-      components: [TttxButton],
-      html: '<tttx-button></tttx-button>',
-    });
-    expect(page.root).toEqualHtml(`
-            <tttx-button>
-                <mock:shadow-root>
-                    <button class="button default">
-                        <div class="button-content">
-                            <slot></slot>
-                        </div>
-                    </button>
-                </mock:shadow-root>
-            </tttx-button>
-        `);
-    const callbackFn = jest.fn();
-    // add an event listener directly to the tttx-button host and click it
-    page.root.addEventListener('click', callbackFn);
-    page.root.click();
-    expect(callbackFn).toHaveBeenCalled();
-  });
-});

package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.e2e.js

@@ -1,9 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-describe('tttx-icon', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<tttx-icon></tttx-icon>');
-    const element = await page.find('tttx-icon');
-    expect(element).toHaveClass('hydrated');
-  });
-});

package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.spec.js

@@ -1,16 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxIcon } from '../tttx-icon';
-describe('tttx-icon', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [TttxIcon],
-      html: '<tttx-icon color="danger" icon="warning"></tttx-icon>',
-    });
-    expect(page.root).toEqualHtml(`
-        <tttx-icon color="danger" icon="warning">
-            <mock:shadow-root>
-                <span class="material-symbols-rounded danger">warning</span>
-            </mock:shadow-root>
-        </tttx-icon>`);
-  });
-});

package/dist/collection/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.js

@@ -1,164 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxKeyvalueBlock } from '../tttx-keyvalue-block';
-describe('tttx-keyvalue-block', () => {
-  it('renders multiple key value pairs', async () => {
-    const keyValuePair = {
-      'Name': 'John Doe',
-      'Date of birth': '14 Jan 1981',
-      'Start of postcode': 'AB10'
-    };
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValuePair)}' />`
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
-                <mock:shadow-root>
-                    <dl>
-                        <dt>
-                            Name
-                        </dt>
-                        <dd>
-                            John Doe
-                        </dd>
-                        <dt>
-                            Date of birth
-                        </dt>
-                        <dd>
-                            14 Jan 1981
-                        </dd>
-                        <dt>
-                            Start of postcode
-                        </dt>
-                        <dd>
-                            AB10
-                        </dd>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-  it('renders an array of key value subtitles', async () => {
-    const keyValueArray = [
-      { title: "title", subTitle: "sub", data: "data" },
-      { title: "title2", subTitle: "sub2", data: "data2" }
-    ];
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
-                <mock:shadow-root>
-                    <dl>
-                        <dt class="mainTitle">
-                            title
-                        </dt>
-                        <dt class="subTitle">
-                            sub
-                        </dt>
-                        <dd>
-                            data
-                        </dd>
-                        <dt class="mainTitle">
-                            title2
-                        </dt>
-                        <dt class="subTitle">
-                            sub2
-                        </dt>
-                        <dd>
-                            data2
-                        </dd>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-  it('renders multiple horizontal key value pairs', async () => {
-    const keyValuePair = {
-      'Name': 'John Doe',
-      'Date of birth': '14 Jan 1981',
-      'Start of postcode': 'AB10'
-    };
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValuePair)}' />`
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block horizontal="true" keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
-                <mock:shadow-root>
-                    <dl class="horizontal">
-                        <div>
-                            <dt>
-                                Name
-                            </dt>
-                            <dd>
-                                John Doe
-                            </dd>
-                        </div>
-                        <div>
-                            <dt>
-                                Date of birth
-                            </dt>
-                            <dd>
-                                14 Jan 1981
-                            </dd>
-                        </div>
-                        <div>
-                            <dt>
-                                Start of postcode
-                            </dt>
-                            <dd>
-                                AB10
-                            </dd>
-                        </div>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-  it('renders an array of horizontal key value subtitles', async () => {
-    const keyValueArray = [
-      { title: "title", subTitle: "sub", data: "data" },
-      { title: "title2", subTitle: "sub2", data: "data2" }
-    ];
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValueArray)}' />`
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block horizontal="true" keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
-                <mock:shadow-root>
-                    <dl class="horizontal">
-                        <div>
-                            <dt class="mainTitle">
-                                title
-                            </dt>
-                            <dt class="subTitle">
-                                sub
-                            </dt>
-                            <dd>
-                                data
-                            </dd>
-                        </div>
-                        <div>
-                            <dt class="mainTitle">
-                                title2
-                            </dt>
-                            <dt class="subTitle">
-                                sub2
-                            </dt>
-                            <dd>
-                                data2
-                            </dd>
-                        </div>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-});

package/dist/collection/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.js

@@ -1,64 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxLoadingSpinner } from '../tttx-loading-spinner';
-describe('tttx-loading-spinner', () => {
-  it('renders the loading text when the loading message prop is set to true', async () => {
-    const page = await newSpecPage({
-      components: [TttxLoadingSpinner],
-      html: '<tttx-loading-spinner></tttx-loading-spinner>',
-    });
-    page.rootInstance.loadingMessage = true;
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-loading-spinner>
-        <mock:shadow-root>
-          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div><div class='loading-text'>Loading, please wait...</div></div>
-        </mock:shadow-root>
-      </tttx-loading-spinner>
-    `);
-  });
-  it('renders without the loading text when the loading message prop is set to false', async () => {
-    const page = await newSpecPage({
-      components: [TttxLoadingSpinner],
-      html: '<tttx-loading-spinner></tttx-loading-spinner>',
-    });
-    page.rootInstance.loadingMessage = false;
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-loading-spinner>
-        <mock:shadow-root>
-          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
-        </mock:shadow-root>
-      </tttx-loading-spinner>
-    `);
-  });
-  it('renders the small spinner when the size prop is set to small', async () => {
-    const page = await newSpecPage({
-      components: [TttxLoadingSpinner],
-      html: '<tttx-loading-spinner></tttx-loading-spinner>',
-    });
-    page.rootInstance.size = 'small';
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-loading-spinner>
-        <mock:shadow-root>
-          <div class='spinner-container'><div class="loading-box"><span class='spinner small'></span></div></div>
-        </mock:shadow-root>
-      </tttx-loading-spinner>
-    `);
-  });
-  it('renders the large spinner when the size prop is set to large', async () => {
-    const page = await newSpecPage({
-      components: [TttxLoadingSpinner],
-      html: '<tttx-loading-spinner></tttx-loading-spinner>',
-    });
-    page.rootInstance.size = 'large';
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-loading-spinner>
-        <mock:shadow-root>
-          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
-        </mock:shadow-root>
-      </tttx-loading-spinner>
-    `);
-  });
-});