@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/collection/components/tl-login/tl-login.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
-import { errorMessage } from "../../utils/order-summary";
+import { createElement, loginCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+import { webQuery } from "../../utils/web-query";
 /**
  * tl-login - magic-link sign-in. The customer enters an email, we ask the SDK
  * to send a link (POST /sales/customer-auth/magic-link), then either the link
@@ -11,6 +12,13 @@ import { errorMessage } from "../../utils/order-summary";
  * States: enter email -> check your inbox (resend, enter code) -> signed in
  * (email + sign out).
  *
+ * The web harness for `loginCore`: it renders and it forwards. The phases, the
+ * exchange, the auth subscriptions and every string are in
+ * `@ticketlayer/elements-core` (AGENTS.md, TKT-11). What is left here is the
+ * Stencil surface and the two genuinely web things: the client the page
+ * published on `window.Ticketlayer`, and `window.location.search`, which is
+ * where this runtime keeps the `?code=` the core asks for.
+ *
  * Usage: <tl-login></tl-login>
  *
  * @event tlAuthChanged  - signed in or out ({ customer, authenticated })
@@ -23,167 +31,92 @@ export class TlLogin {
         this.heading = 'Sign in';
         /** Offer a "enter the code" path alongside the emailed link (default true). */
         this.allowCodeEntry = true;
-        this.phase = 'email';
-        this.email = '';
-        this.code = '';
-        this.busy = false;
-        this.error = null;
-        this.notice = null;
-        this.customer = null;
-        this.auth = null;
-        this.unsubscribes = [];
-        // A magic-link code is single-use; never exchange the URL code twice.
-        this.urlCodeUsed = false;
+        this.element = createElement(loginCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            query: webQuery,
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
         this.handleEmailInput = (e) => {
-            this.email = e.target.value;
-            this.error = null;
+            this.element.actions.setEmail(e.target.value);
         };
         this.handleCodeInput = (e) => {
-            this.code = e.target.value;
-            this.error = null;
+            this.element.actions.setCode(e.target.value);
         };
         this.handleEmailSubmit = (e) => {
             e.preventDefault();
-            this.requestLink();
+            this.element.actions.requestLink();
         };
         this.handleCodeSubmit = (e) => {
             e.preventDefault();
-            this.exchange(this.code.trim());
+            this.element.actions.submitCode();
         };
     }
-    async componentWillLoad() {
-        const sdk = await whenSDK().catch(() => null);
-        if (!sdk) {
-            this.error = 'Sign-in is not available right now';
-            return;
-        }
-        this.auth = sdk.getAuthManager?.() ?? null;
-        if (!this.auth) {
-            this.error = 'Sign-in is not available with this SDK';
-            return;
-        }
-        this.syncFromSDK();
-        // The session hydrates after the SDK publishes; follow both signals.
-        this.unsubscribes.push(sdk.on('auth:changed', () => this.syncFromSDK()));
-        this.unsubscribes.push(sdk.on('session:changed', () => this.syncFromSDK()));
-        const urlCode = this.codeFromUrl();
-        if (urlCode && !this.auth.authenticated) {
-            await this.exchange(urlCode);
-        }
+    syncProps() {
+        this.element.setProps({ heading: this.heading, allowCodeEntry: this.allowCodeEntry });
     }
-    disconnectedCallback() {
-        this.unsubscribes.forEach((off) => off());
-        this.unsubscribes = [];
-    }
-    codeFromUrl() {
-        if (typeof window === 'undefined' || !window.location?.search || this.urlCodeUsed)
-            return null;
-        const code = new URLSearchParams(window.location.search).get('code');
-        if (code)
-            this.urlCodeUsed = true;
-        return code;
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    syncFromSDK() {
-        if (!this.auth)
-            return;
-        if (this.auth.authenticated) {
-            this.customer = this.auth.customer ?? null;
-            this.phase = 'signed-in';
-        }
-        else if (this.phase === 'signed-in') {
-            this.customer = null;
-            this.phase = 'email';
-        }
-    }
-    async requestLink(resend = false) {
-        const email = this.email.trim();
-        if (!email) {
-            this.error = 'Enter your email address';
-            return;
-        }
-        if (!this.auth)
-            return;
-        this.busy = true;
-        this.error = null;
-        this.notice = null;
-        try {
-            // Always reports success; account existence is never revealed.
-            await this.auth.requestMagicLink({ email });
-            this.phase = 'sent';
-            this.notice = resend ? 'Sent again. Check your inbox.' : null;
-            this.tlMagicLinkSent.emit({ email });
-        }
-        catch (err) {
-            console.error('[tl-login] Magic-link request failed:', err);
-            this.error = errorMessage(err, 'Could not send your sign-in link');
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.busy = false;
-        }
+    /**
+     * Nothing is painted until this page's client is up.
+     *
+     * A rendering decision, and the harness's to make: Stencil waits on this
+     * promise before the first render, and without it the form would flash
+     * disabled for a microtask on every page. The core is already at work by
+     * now - `connectedCallback` mounted it - so this waits on the same
+     * `whenSDK()` it is waiting on rather than deciding anything of its own, and
+     * a page that never starts Live renders the core's "not available" state
+     * instead of hanging.
+     */
+    componentWillLoad() {
+        return whenSDK().catch(() => undefined);
     }
-    async exchange(code) {
-        if (!code) {
-            this.error = 'Enter the code from your email';
-            return;
-        }
-        if (!this.auth)
-            return;
-        const previous = this.phase;
-        this.busy = true;
-        this.error = null;
-        this.phase = 'verifying';
-        try {
-            const res = (await this.auth.exchange(code));
-            this.customer = this.auth.customer ?? res?.customer ?? null;
-            this.phase = 'signed-in';
-            this.code = '';
-            this.tlAuthChanged.emit({ customer: this.customer, authenticated: true });
-        }
-        catch (err) {
-            console.error('[tl-login] Code exchange failed:', err);
-            this.phase = previous === 'verifying' || previous === 'email' ? 'email' : 'code';
-            this.error = 'That code did not work. Check it and try again, or request a new link.';
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.busy = false;
-        }
+    /**
+     * Off screen: run the mount's teardown, which drops both auth
+     * subscriptions. Not `destroy()`: Stencil calls this for a DOM move as well
+     * as a removal, and a destroyed core never mounts again.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    async signOut() {
-        if (!this.auth)
-            return;
-        this.busy = true;
-        try {
-            await this.auth.logout();
-        }
-        catch (err) {
-            console.error('[tl-login] Sign out failed:', err);
-        }
-        finally {
-            this.busy = false;
-            this.customer = null;
-            this.phase = 'email';
-            this.tlAuthChanged.emit({ customer: null, authenticated: false });
-        }
+    forward(event, detail) {
+        if (event === 'tlAuthChanged')
+            this.tlAuthChanged.emit(detail);
+        else if (event === 'tlMagicLinkSent')
+            this.tlMagicLinkSent.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     renderError() {
-        return this.error ? (h("p", { class: "error", role: "alert" }, this.error)) : null;
+        const error = this.view.state.error;
+        return error ? (h("p", { class: "error", role: "alert" }, error)) : null;
     }
     render() {
-        if (this.phase === 'signed-in') {
-            return (h("div", { class: "login signed-in" }, h("p", { class: "signed-in-text" }, "Signed in as ", h("strong", null, this.customer?.email ?? 'your account')), h("button", { type: "button", class: "secondary", disabled: this.busy, onClick: () => this.signOut() }, "Sign out")));
+        const { status, state, strings, derived } = this.view;
+        if (status === 'signed-in') {
+            return (h("div", { class: "login signed-in" }, h("p", { class: "signed-in-text" }, strings.signedInPrefix, h("strong", null, derived.signedInEmail)), h("button", { type: "button", class: "secondary", disabled: state.busy, onClick: () => this.element.actions.signOut() }, strings.signOut)));
         }
-        if (this.phase === 'verifying') {
-            return (h("div", { class: "login" }, h("h2", { class: "title" }, "Signing you in\u2026"), h("p", { class: "lead" }, "Just a moment.")));
+        if (status === 'verifying') {
+            return (h("div", { class: "login" }, h("h2", { class: "title" }, strings.verifyingTitle), h("p", { class: "lead" }, strings.verifyingLead)));
         }
-        if (this.phase === 'sent') {
-            return (h("div", { class: "login" }, h("h2", { class: "title" }, "Check your inbox"), h("p", { class: "lead" }, "We've sent a sign-in link to ", h("strong", null, this.email), ". Open it on this device to continue."), this.notice && h("p", { class: "notice" }, this.notice), this.renderError(), h("div", { class: "actions" }, h("button", { type: "button", class: "secondary", disabled: this.busy, onClick: () => this.requestLink(true) }, this.busy ? 'Sending…' : 'Resend link'), this.allowCodeEntry && (h("button", { type: "button", class: "link", onClick: () => (this.phase = 'code') }, "Enter the code instead")), h("button", { type: "button", class: "link", onClick: () => (this.phase = 'email') }, "Use a different email"))));
+        if (status === 'sent') {
+            return (h("div", { class: "login" }, h("h2", { class: "title" }, strings.sentTitle), h("p", { class: "lead" }, strings.sentLeadBefore, h("strong", null, state.email), strings.sentLeadAfter), state.notice && h("p", { class: "notice" }, state.notice), this.renderError(), h("div", { class: "actions" }, h("button", { type: "button", class: "secondary", disabled: state.busy, onClick: () => this.element.actions.requestLink(true) }, derived.resendLabel), derived.showCodeEntry && (h("button", { type: "button", class: "link", onClick: () => this.element.actions.goTo('code') }, strings.enterCodeInstead)), h("button", { type: "button", class: "link", onClick: () => this.element.actions.goTo('email') }, strings.differentEmail))));
         }
-        if (this.phase === 'code') {
-            return (h("form", { class: "login", onSubmit: this.handleCodeSubmit }, h("h2", { class: "title" }, "Enter your code"), h("p", { class: "lead" }, "Type the 6-digit code from the email we sent to ", h("strong", null, this.email), "."), h("label", { class: "label", htmlFor: "tl-login-code" }, "Code"), h("input", { id: "tl-login-code", class: "input code-input", type: "text", inputmode: "numeric", autocomplete: "one-time-code", placeholder: "123456", value: this.code, disabled: this.busy, onInput: this.handleCodeInput }), this.renderError(), h("button", { type: "submit", class: "primary", disabled: this.busy }, this.busy ? 'Checking…' : 'Sign in'), h("div", { class: "actions" }, h("button", { type: "button", class: "link", onClick: () => this.requestLink(true) }, "Resend link"), h("button", { type: "button", class: "link", onClick: () => (this.phase = 'sent') }, "Back"))));
+        if (status === 'code') {
+            return (h("form", { class: "login", onSubmit: this.handleCodeSubmit }, h("h2", { class: "title" }, strings.codeTitle), h("p", { class: "lead" }, strings.codeLeadBefore, h("strong", null, state.email), strings.codeLeadAfter), h("label", { class: "label", htmlFor: "tl-login-code" }, strings.codeLabel), h("input", { id: "tl-login-code", class: "input code-input", type: "text", inputmode: "numeric", autocomplete: "one-time-code", placeholder: strings.codePlaceholder, value: state.code, disabled: state.busy, onInput: this.handleCodeInput }), this.renderError(), h("button", { type: "submit", class: "primary", disabled: state.busy }, derived.codeSubmitLabel), h("div", { class: "actions" }, h("button", { type: "button", class: "link", onClick: () => this.element.actions.requestLink(true) }, strings.resendLink), h("button", { type: "button", class: "link", onClick: () => this.element.actions.goTo('sent') }, strings.back))));
         }
-        return (h("form", { class: "login", onSubmit: this.handleEmailSubmit }, h("h2", { class: "title" }, this.heading), h("p", { class: "lead" }, "Enter your email and we'll send you a secure sign-in link. No password needed."), h("label", { class: "label", htmlFor: "tl-login-email" }, "Email address"), h("input", { id: "tl-login-email", class: "input", type: "email", autocomplete: "email", placeholder: "you@example.com", required: true, value: this.email, disabled: this.busy || !this.auth, onInput: this.handleEmailInput }), this.renderError(), h("button", { type: "submit", class: "primary", disabled: this.busy || !this.auth }, this.busy ? 'Sending link…' : 'Email me a sign-in link')));
+        return (h("form", { class: "login", onSubmit: this.handleEmailSubmit }, h("h2", { class: "title" }, this.heading), h("p", { class: "lead" }, strings.emailLead), h("label", { class: "label", htmlFor: "tl-login-email" }, strings.emailLabel), h("input", { id: "tl-login-email", class: "input", type: "email", autocomplete: "email", placeholder: strings.emailPlaceholder, required: true, value: state.email, disabled: derived.inputsDisabled, onInput: this.handleEmailInput }), this.renderError(), h("button", { type: "submit", class: "primary", disabled: derived.inputsDisabled }, derived.emailSubmitLabel)));
     }
     static get is() { return "tl-login"; }
     static get encapsulation() { return "shadow"; }
@@ -243,13 +176,7 @@ export class TlLogin {
     }
     static get states() {
         return {
-            "phase": {},
-            "email": {},
-            "code": {},
-            "busy": {},
-            "error": {},
-            "notice": {},
-            "customer": {}
+            "view": {}
         };
     }
     static get events() {
@@ -306,4 +233,13 @@ export class TlLogin {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "heading",
+                "methodName": "syncProps"
+            }, {
+                "propName": "allowCodeEntry",
+                "methodName": "syncProps"
+            }];
+    }
 }

package/dist/collection/components/tl-my-orders/tl-my-orders.js

@@ -1,12 +1,16 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
-import { errorMessage, formatDate, formatPrice, isAuthError, orderEventName, statusLabel, statusTone, ticketCount, } from "../../utils/order-summary";
+import { createElement, myOrdersCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 /**
  * tl-my-orders - the signed-in customer's orders (GET /sales/my-orders through
  * the SDK): event, date, ticket count, total and status per row. Clicking a
  * row expands it to show the order's tickets (tl-order-tickets). Shows
  * tl-login inline when nobody is signed in.
  *
+ * The web harness for `myOrdersCore`: it renders and it forwards. Who is
+ * signed in, the two auth subscriptions that keep that current, the listing
+ * and every string are in `@ticketlayer/elements-core` (AGENTS.md, TKT-11).
+ *
  * Usage: <tl-my-orders></tl-my-orders>
  *
  * @event tlOrderSelect - a row was expanded ({ orderId })
@@ -18,107 +22,60 @@ export class TlMyOrders {
         this.emptyMessage = "When you buy tickets they'll show up here, ready to view and download.";
         /** Columns for the expanded ticket grid. */
         this.columns = 2;
-        this.orders = [];
-        this.authenticated = false;
-        this.loading = true;
-        this.error = null;
-        this.expandedId = null;
-        this.sdk = null;
-        this.unsubscribes = [];
+        this.element = createElement(myOrdersCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
-    async componentWillLoad() {
-        this.sdk = await whenSDK().catch(() => null);
-        if (!this.sdk) {
-            this.loading = false;
-            this.error = 'Orders are not available right now';
-            return;
-        }
-        // Older SDKs have no auth accessor: try the list and let a 401 decide.
-        const auth = this.sdk.getAuthManager?.();
-        this.authenticated = auth ? auth.authenticated : true;
-        // The session hydrates after the SDK publishes; follow both signals.
-        this.unsubscribes.push(this.sdk.on('auth:changed', () => this.syncAuth()));
-        this.unsubscribes.push(this.sdk.on('session:changed', () => this.syncAuth()));
-        if (this.authenticated) {
-            await this.load();
-        }
-        else {
-            this.loading = false;
-        }
+    syncProps() {
+        this.element.setProps({ emptyMessage: this.emptyMessage, columns: this.columns });
     }
-    disconnectedCallback() {
-        this.unsubscribes.forEach((off) => off());
-        this.unsubscribes = [];
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    syncAuth() {
-        const auth = this.sdk?.getAuthManager?.();
-        if (!auth)
-            return;
-        const was = this.authenticated;
-        this.authenticated = auth.authenticated;
-        if (this.authenticated && !was) {
-            this.load();
-        }
-        else if (!this.authenticated && was) {
-            this.orders = [];
-            this.expandedId = null;
-        }
-    }
-    async load() {
-        if (!this.sdk)
-            return;
-        try {
-            this.loading = true;
-            this.error = null;
-            const orders = this.sdk.getOrdersManager?.();
-            if (!orders)
-                throw new Error('Orders are not available');
-            const list = (await orders.mine());
-            this.orders = list ?? [];
-            this.authenticated = true;
-        }
-        catch (err) {
-            if (isAuthError(err)) {
-                // Not signed in: fall through to the inline login rather than an error.
-                this.authenticated = false;
-                this.orders = [];
-            }
-            else {
-                console.error('[tl-my-orders] Failed to load orders:', err);
-                this.error = errorMessage(err, 'Failed to load your orders');
-                this.tlError.emit({ message: this.error });
-            }
-        }
-        finally {
-            this.loading = false;
-        }
+    /**
+     * Off screen: run the mount's teardown, which drops both auth
+     * subscriptions. Not `destroy()`: Stencil calls this for a DOM move as well
+     * as a removal, and a destroyed core never mounts again.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    toggle(orderId) {
-        const opening = this.expandedId !== orderId;
-        this.expandedId = opening ? orderId : null;
-        if (opening)
-            this.tlOrderSelect.emit({ orderId });
+    forward(event, detail) {
+        if (event === 'tlOrderSelect')
+            this.tlOrderSelect.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
-    renderRow(order) {
-        const expanded = this.expandedId === order.id;
-        const count = ticketCount(order);
-        const tone = statusTone(order.status);
-        return (h("li", { class: { order: true, expanded }, key: order.id }, h("button", { type: "button", class: "order-row", "aria-expanded": expanded ? 'true' : 'false', onClick: () => this.toggle(order.id) }, h("span", { class: "order-main" }, h("span", { class: "order-number" }, "Order ", order.orderNumber), h("span", { class: "order-event" }, orderEventName(order) ?? 'Order'), h("span", { class: "order-meta" }, order.createdAt && h("span", null, formatDate(order.createdAt)), h("span", null, count, " ticket", count === 1 ? '' : 's'))), h("span", { class: "order-side" }, h("span", { class: "order-total" }, formatPrice(order.total, order.currency)), h("span", { class: `status status-${tone}` }, statusLabel(order.status)), h("svg", { class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 18l6-6-6-6" })))), expanded && (h("div", { class: "order-tickets" }, h("tl-order-tickets", { orderId: order.id, columns: this.columns })))));
+    renderRow(row) {
+        return (h("li", { class: { order: true, expanded: row.expanded }, key: row.id }, h("button", { type: "button", class: "order-row", "aria-expanded": row.expanded ? 'true' : 'false', onClick: () => this.element.actions.toggle(row.id) }, h("span", { class: "order-main" }, h("span", { class: "order-number" }, row.numberLabel), h("span", { class: "order-event" }, row.eventName), h("span", { class: "order-meta" }, row.dateLabel && h("span", null, row.dateLabel), h("span", null, row.countLabel))), h("span", { class: "order-side" }, h("span", { class: "order-total" }, row.totalLabel), h("span", { class: `status status-${row.statusTone}` }, row.statusLabel), h("svg", { class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 18l6-6-6-6" })))), row.expanded && (h("div", { class: "order-tickets" }, h("tl-order-tickets", { orderId: row.id, columns: this.columns })))));
     }
     render() {
-        if (this.loading) {
+        const { status, strings, state, derived } = this.view;
+        if (status === 'loading') {
             return (h("div", { class: "orders" }, [0, 1, 2].map((i) => (h("div", { class: "skeleton", key: i })))));
         }
-        if (!this.authenticated) {
-            return (h("div", { class: "orders" }, h("div", { class: "signin" }, h("p", { class: "signin-title" }, "Sign in to see your orders"), h("p", { class: "signin-text" }, "Your tickets and order history live in your account.")), h("tl-login", null)));
+        if (status === 'signed-out') {
+            return (h("div", { class: "orders" }, h("div", { class: "signin" }, h("p", { class: "signin-title" }, strings.signInTitle), h("p", { class: "signin-text" }, strings.signInText)), h("tl-login", null)));
         }
-        if (this.error) {
-            return (h("div", { class: "orders" }, h("div", { class: "state error" }, h("p", { class: "state-title" }, "Could not load your orders"), h("p", { class: "state-text" }, this.error))));
+        if (status === 'error') {
+            return (h("div", { class: "orders" }, h("div", { class: "state error" }, h("p", { class: "state-title" }, strings.errorTitle), h("p", { class: "state-text" }, state.error))));
         }
-        if (this.orders.length === 0) {
-            return (h("div", { class: "orders" }, h("div", { class: "state empty" }, h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M13 5v2M13 17v2M13 11v2" })), h("p", { class: "state-title" }, "No orders yet"), h("p", { class: "state-text" }, this.emptyMessage))));
+        if (status === 'empty') {
+            return (h("div", { class: "orders" }, h("div", { class: "state empty" }, h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M13 5v2M13 17v2M13 11v2" })), h("p", { class: "state-title" }, strings.emptyTitle), h("p", { class: "state-text" }, this.emptyMessage))));
         }
-        return (h("div", { class: "orders" }, h("ul", { class: "order-list" }, this.orders.map((o) => this.renderRow(o)))));
+        return (h("div", { class: "orders" }, h("ul", { class: "order-list" }, derived.rows.map((row) => this.renderRow(row)))));
     }
     static get is() { return "tl-my-orders"; }
     static get encapsulation() { return "shadow"; }
@@ -178,11 +135,7 @@ export class TlMyOrders {
     }
     static get states() {
         return {
-            "orders": {},
-            "authenticated": {},
-            "loading": {},
-            "error": {},
-            "expandedId": {}
+            "view": {}
         };
     }
     static get events() {
@@ -218,4 +171,13 @@ export class TlMyOrders {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "emptyMessage",
+                "methodName": "syncProps"
+            }, {
+                "propName": "columns",
+                "methodName": "syncProps"
+            }];
+    }
 }