@kubex/zinc 1.1.62 → 1.1.64

package/src/components/preview-frame/preview-frame.component.ts

@@ -0,0 +1,246 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
+import {property, query, state} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './preview-frame.scss';
+
+/**
+ * @summary Embeds a live preview iframe and drives the hp-preview postMessage
+ * protocol: answers the frame's ready handshake with a config payload fetched
+ * from data-uri, auto-saves watched forms on change, and refreshes the
+ * preview after each save.
+ * @documentation https://zinc.style/components/preview-frame
+ * @status experimental
+ * @since 1.0
+ *
+ * @event zn-error - Emitted when the preview reports a render error or a save fails.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart iframe - The preview iframe.
+ * @csspart error - The error overlay.
+ */
+export default class ZnPreviewFrame extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  /** URL of the preview shell page (tokened embed URL). */
+  @property() src = '';
+
+  /** Expected origin of the iframe; all postMessage traffic is checked against it. */
+  @property({attribute: 'frame-origin'}) frameOrigin = '';
+
+  /** Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution. */
+  @property({attribute: 'data-uri'}) dataUri = '';
+
+  /**
+   * Selector (resolved against the component's root node) for the forms to watch.
+   * Defaults to only forms explicitly opted in via a `data-auto-save` attribute —
+   * unmarked forms keep normal submit behavior and are never intercepted,
+   * auto-saved, or used to trigger a preview refresh. Override to widen the scope.
+   */
+  @property() watch = 'form[data-auto-save]';
+
+  /** Debounce in ms between a form change and its auto-save. */
+  @property({type: Number}) debounce = 400;
+
+  /**
+   * Zooms the previewed page out (0–1]. The frame always fills the panel;
+   * zoom shrinks the content browser-style, so 0.4 shows the page at 40%
+   * size with correspondingly more of it visible. 1 = natural size.
+   */
+  @property({type: Number}) zoom = 1;
+
+  /**
+   * The visible height (in CSS pixels) of the preview panel. Fixed rather
+   * than measured, because a measured height would feed back into the
+   * scaled iframe's layout box and grow unbounded.
+   */
+  @property({type: Number, attribute: 'min-height'}) minHeight = 480;
+
+  @query('iframe') frame: HTMLIFrameElement;
+
+  @state() private error = '';
+
+  private _generation = 0;
+
+  private readonly _watchedForms = new Set<HTMLFormElement>();
+  private readonly _debounceTimers = new Map<HTMLFormElement, number>();
+
+  // Forms are siblings in light DOM and get replaced when other content
+  // re-renders; re-resolve them whenever the surrounding DOM changes.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  private readonly _formObserver = new MutationController(this, {
+    target: null,
+    config: {subtree: true, childList: true},
+    callback: () => this._attachForms(),
+  });
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('message', this._onMessage);
+    this._attachForms();
+    const root = this.getRootNode();
+    if (root instanceof Document) {
+      this._formObserver.observe(root.body);
+    } else if (root instanceof ShadowRoot) {
+      // MutationController's type only accepts Element, but MutationObserver.observe()
+      // accepts any Node at runtime, including a ShadowRoot.
+      this._formObserver.observe(root as unknown as Element);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('message', this._onMessage);
+    this._watchedForms.forEach(form => this._detachForm(form));
+    this._watchedForms.clear();
+  }
+
+  private readonly _onMessage = (e: MessageEvent) => {
+    // Fail closed: with frame-origin unset, every message is rejected.
+    if (e.origin !== this.frameOrigin) return;
+    if (!this.frame || e.source !== this.frame.contentWindow) return;
+
+    const data = e.data as {type?: string; message?: string} | undefined;
+    switch (data?.type) {
+      case 'hp-preview:ready':
+        void this._sendConfig();
+        break;
+      case 'hp-preview:rendered':
+        this.error = '';
+        break;
+      case 'hp-preview:error':
+        this._fail(String(data.message ?? 'Preview failed to render'));
+        break;
+    }
+  };
+
+  /** Re-fetches the payload and pushes a fresh config to the preview. */
+  refresh() {
+    return this._sendConfig();
+  }
+
+  private async _sendConfig() {
+    const generation = ++this._generation;
+    try {
+      const response = await fetch(this.dataUri, {
+        credentials: 'same-origin',
+        // The console proxy pagelet-wraps app responses; 'download' streams
+        // the endpoint's raw JSON through verbatim.
+        headers: {'x-kx-fetch-style': 'download'},
+      });
+      if (!response.ok) {
+        throw new Error(await response.text() || response.statusText);
+      }
+      const payload = await response.json() as Record<string, unknown>;
+      if (generation !== this._generation) return; // a newer refresh is in flight
+      this.frame?.contentWindow?.postMessage(
+        {type: 'hp-preview:config', ...payload},
+        this.frameOrigin
+      );
+    } catch (err) {
+      if (generation === this._generation) {
+        this._fail(err instanceof Error ? err.message : String(err));
+      }
+    }
+  }
+
+  private _attachForms() {
+    const root = this.getRootNode() as Document | ShadowRoot;
+    const matched = new Set<HTMLFormElement>();
+    root.querySelectorAll(this.watch).forEach(node => {
+      if (node instanceof HTMLFormElement) matched.add(node);
+    });
+
+    this._watchedForms.forEach(form => {
+      if (!matched.has(form)) {
+        this._detachForm(form);
+        this._watchedForms.delete(form);
+      }
+    });
+
+    matched.forEach(form => {
+      if (this._watchedForms.has(form)) return;
+      this._watchedForms.add(form);
+      form.addEventListener('submit', this._onSubmit, {capture: true});
+      form.addEventListener('zn-change', this._onChange);
+      form.addEventListener('zn-input', this._onChange);
+      form.addEventListener('change', this._onChange);
+    });
+  }
+
+  private _detachForm(form: HTMLFormElement) {
+    form.removeEventListener('submit', this._onSubmit, {capture: true});
+    form.removeEventListener('zn-change', this._onChange);
+    form.removeEventListener('zn-input', this._onChange);
+    form.removeEventListener('change', this._onChange);
+    const timer = this._debounceTimers.get(form);
+    if (timer) window.clearTimeout(timer);
+    this._debounceTimers.delete(form);
+  }
+
+  private readonly _onChange = (e: Event) => {
+    const form = e.currentTarget as HTMLFormElement;
+    const existing = this._debounceTimers.get(form);
+    if (existing) window.clearTimeout(existing);
+    this._debounceTimers.set(form, window.setTimeout(() => {
+      this._debounceTimers.delete(form);
+      if (!form.isConnected) return;
+      form.requestSubmit();
+    }, this.debounce));
+  };
+
+  private readonly _onSubmit = (e: SubmitEvent) => {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    void this._save(e.currentTarget as HTMLFormElement);
+  };
+
+  private async _save(form: HTMLFormElement) {
+    try {
+      const response = await fetch(form.getAttribute('action') || '', {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: new FormData(form),
+      });
+      if (!response.ok) {
+        throw new Error(await response.text() || response.statusText);
+      }
+      await this._sendConfig();
+    } catch (err) {
+      this._fail(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  private _fail(message: string) {
+    this.error = message;
+    this.emit('zn-error', {detail: {message}});
+  }
+
+  render() {
+    const zoom = this.zoom > 0 && this.zoom <= 1 ? this.zoom : 1;
+    // Browser-style zoom-out: the iframe lays out oversized (1/zoom) and is
+    // transformed back down, so the frame fills the panel while the content
+    // renders smaller and more of the page is visible. Percentage width means
+    // nothing is measured — no layout feedback loop.
+    const iframeStyles = {
+      width: `${100 / zoom}%`,
+      height: `${this.minHeight / zoom}px`,
+      transform: `scale(${zoom})`,
+      transformOrigin: '0 0',
+    };
+    const containerStyles = {height: `${this.minHeight}px`};
+
+    return html`
+      <div part="base" class="preview" style="${styleMap(containerStyles)}">
+        <iframe part="iframe"
+                src="${this.src}"
+                title="Payment form preview"
+                allow="local-network-access"
+                style="${styleMap(iframeStyles)}"></iframe>
+        ${this.error ? html`
+          <div part="error" class="preview__error">${this.error}</div>` : ''}
+      </div>`;
+  }
+}

package/src/components/preview-frame/preview-frame.scss

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+.preview {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+iframe {
+  display: block;
+  width: 100%;
+  border: 0;
+}
+
+.preview__error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.65);
+  color: #fff;
+}

package/src/components/preview-frame/preview-frame.test.ts

@@ -0,0 +1,268 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+
+// The container's ResizeObserver can emit a benign "loop completed with undelivered
+// notifications" warning when the panel resizes during layout-measuring tests. It's
+// not a real error — ignore it so the test runner doesn't treat it as an uncaught
+// exception (capture phase runs before the runner's).
+window.addEventListener('error', (e: ErrorEvent) => {
+  if (typeof e.message === 'string' && e.message.includes('ResizeObserver loop')) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}, true);
+
+describe('<zn-preview-frame>', () => {
+  it('renders an iframe pointing at src', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame
+        src="https://site.example/embed/preview?t=x"
+        frame-origin="https://site.example"
+        data-uri="/payload"></zn-preview-frame>`);
+
+    const iframe = el.shadowRoot!.querySelector('iframe');
+    expect(iframe).to.exist;
+    expect(iframe!.getAttribute('src')).to.equal('https://site.example/embed/preview?t=x');
+  });
+
+  const FIXTURE = html`
+    <zn-preview-frame
+      src="about:blank"
+      frame-origin="https://site.example"
+      data-uri="/payload"></zn-preview-frame>`;
+
+  const PAYLOAD = {pageType: 'payment.subscribe', page: {Name: 'Page'}, config: {BaseProduct: 'prod'}};
+
+  let fetchCalls: {uri: string; init?: RequestInit}[];
+  const realFetch = window.fetch;
+
+  beforeEach(() => {
+    fetchCalls = [];
+    window.fetch = (uri: RequestInfo | URL, init?: RequestInit) => {
+      fetchCalls.push({uri: String(uri), init});
+      return Promise.resolve(new Response(JSON.stringify(PAYLOAD), {
+        status: 200,
+        headers: {'Content-Type': 'application/json'}
+      }));
+    };
+  });
+
+  afterEach(() => {
+    window.fetch = realFetch;
+  });
+
+  function ready(el: Element, origin = 'https://site.example') {
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    window.dispatchEvent(new MessageEvent('message', {
+      data: {type: 'hp-preview:ready'},
+      origin,
+      source: iframe.contentWindow
+    }));
+    return iframe;
+  }
+
+  it('answers hp-preview:ready by fetching the payload and posting hp-preview:config', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: {msg: Record<string, unknown>; origin: string}[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>, origin: string) => void}).postMessage =
+      (msg: Record<string, unknown>, origin: string) => posted.push({msg, origin});
+
+    ready(el);
+
+    await waitUntil(() => posted.length === 1);
+    expect(fetchCalls[0].uri).to.equal('/payload');
+    expect((fetchCalls[0].init?.headers as Record<string, string>)['x-kx-fetch-style']).to.equal('download');
+    expect(posted[0].origin).to.equal('https://site.example');
+    expect(posted[0].msg['type']).to.equal('hp-preview:config');
+    expect(posted[0].msg['pageType']).to.equal('payment.subscribe');
+    expect(posted[0].msg['config']).to.deep.equal({BaseProduct: 'prod'});
+  });
+
+  it('refresh() re-fetches the payload and posts a fresh config', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: Record<string, unknown>[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>) => void}).postMessage = (msg: Record<string, unknown>) => posted.push(msg);
+
+    await (el as HTMLElement & {refresh: () => Promise<void>}).refresh();
+
+    expect(fetchCalls[0].uri).to.equal('/payload');
+    expect(posted[0]['type']).to.equal('hp-preview:config');
+  });
+
+  it('ignores messages from other origins', async () => {
+    const el = await fixture(FIXTURE);
+    ready(el, 'https://evil.example');
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(fetchCalls.length).to.equal(0);
+  });
+
+  it('rejects all messages when frame-origin is unset', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame src="about:blank" data-uri="/payload"></zn-preview-frame>`);
+    ready(el, 'https://site.example');
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(fetchCalls.length).to.equal(0);
+  });
+
+  it('auto-saves a watched form on change, then refreshes the preview', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post" data-auto-save>
+          <input name="caption" value="hello">
+        </form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          debounce="10"></zn-preview-frame>
+      </div>`);
+
+    const el = wrapper.querySelector('zn-preview-frame')!;
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: Record<string, unknown>[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>) => void}).postMessage = (msg: Record<string, unknown>) => posted.push(msg);
+
+    const form = wrapper.querySelector('form')!;
+    form.querySelector('input')!.dispatchEvent(
+      new Event('change', {bubbles: true}));
+
+    await waitUntil(() => fetchCalls.length === 2);
+    expect(fetchCalls[0].uri).to.contain('/save');
+    expect(fetchCalls[0].init?.method).to.equal('POST');
+    expect(fetchCalls[0].init?.body).to.be.instanceOf(FormData);
+    expect((fetchCalls[0].init!.body as FormData).get('caption')).to.equal('hello');
+    expect(fetchCalls[1].uri).to.equal('/payload');
+    await waitUntil(() => posted.length === 1);
+    expect(posted[0]['type']).to.equal('hp-preview:config');
+  });
+
+  it('intercepts watched form submits so they never bubble to the shell', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post" data-auto-save><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"></zn-preview-frame>
+      </div>`);
+
+    let bubbled = false;
+    wrapper.addEventListener('submit', () => { bubbled = true; });
+
+    wrapper.querySelector('form')!.requestSubmit();
+
+    await waitUntil(() => fetchCalls.length >= 1);
+    expect(bubbled).to.equal(false);
+    expect(fetchCalls[0].uri).to.contain('/save');
+  });
+
+  it('does not save a form removed from the DOM mid-debounce', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post" data-auto-save><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          debounce="10"></zn-preview-frame>
+      </div>`);
+
+    const form = wrapper.querySelector('form')!;
+    form.querySelector('input')!.dispatchEvent(new Event('change', {bubbles: true}));
+    form.remove();
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(fetchCalls.length).to.equal(0);
+  });
+
+  it('leaves forms without data-auto-save alone', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post"><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          debounce="10"></zn-preview-frame>
+      </div>`);
+
+    let bubbled = false;
+    wrapper.addEventListener('submit', e => { bubbled = true; e.preventDefault(); });
+
+    const form = wrapper.querySelector('form')!;
+    form.querySelector('input')!.dispatchEvent(new Event('change', {bubbles: true}));
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(fetchCalls.length).to.equal(0);
+
+    form.requestSubmit();
+    expect(bubbled).to.equal(true);
+  });
+
+  it('shows hp-preview:error messages in the overlay and clears on rendered', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    let znError: CustomEvent<{message?: string}> | null = null;
+    el.addEventListener('zn-error', (e: Event) => { znError = e as CustomEvent<{message?: string}>; });
+
+    window.dispatchEvent(new MessageEvent('message', {
+      data: {type: 'hp-preview:error', message: 'bad config'},
+      origin: 'https://site.example',
+      source: iframe.contentWindow
+    }));
+
+    await waitUntil(() => el.shadowRoot!.querySelector('[part="error"]'));
+    expect(el.shadowRoot!.querySelector('[part="error"]')!.textContent).to.contain('bad config');
+    expect(znError).to.exist;
+    expect(znError!.detail.message).to.equal('bad config');
+
+    window.dispatchEvent(new MessageEvent('message', {
+      data: {type: 'hp-preview:rendered'},
+      origin: 'https://site.example',
+      source: iframe.contentWindow
+    }));
+
+    await waitUntil(() => !el.shadowRoot!.querySelector('[part="error"]'));
+  });
+
+  it('shows a payload fetch failure in the overlay', async () => {
+    window.fetch = () => Promise.resolve(new Response('payload exploded', {status: 500}));
+    const el = await fixture(FIXTURE);
+    ready(el);
+
+    await waitUntil(() => el.shadowRoot!.querySelector('[part="error"]'));
+    expect(el.shadowRoot!.querySelector('[part="error"]')!.textContent).to.contain('payload exploded');
+  });
+
+  it('zooms the content out: oversized layout scaled back into the frame', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame
+        src="about:blank"
+        frame-origin="https://site.example"
+        data-uri="/payload"
+        zoom="0.4"
+        min-height="600"></zn-preview-frame>`);
+
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    await waitUntil(() => iframe.style.transform === 'scale(0.4)');
+    // 1/zoom oversize, transformed back down — the frame itself fills the
+    // panel while the page renders at 40%.
+    expect(iframe.style.width).to.equal('250%');
+    expect(iframe.style.height).to.equal('1500px');
+    const container = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+    expect(container.style.height).to.equal('600px');
+  });
+
+  it('renders at natural size by default', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    await waitUntil(() => iframe.style.transform === 'scale(1)');
+    expect(iframe.style.width).to.equal('100%');
+    expect(iframe.style.height).to.equal('480px');
+    const container = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+    expect(container.style.height).to.equal('480px');
+  });
+});

package/src/components/query-builder/query-builder.component.ts

@@ -167,6 +167,10 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
   }) showValues: string[] = [];
 
 
+  private get _usedFilterIds(): Set<string> {
+    return new Set([...this._selectedRules.values()].map(rule => rule.id));
+  }
+
   get validationMessage(): string {
     return '';
   }
@@ -196,7 +200,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
                    size="medium"
                    placeholder="Select Filter"
                    @zn-change="${this._addRule}">
-          ${this.filters && this.filters.map(item => html`
+          ${this.filters && this.filters.filter(item => !this._usedFilterIds.has(item.id)).map(item => html`
             <zn-option value="${item.id}">
               ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
             </zn-option>`)}
@@ -227,6 +231,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
 
     const filter: QueryBuilderItem | undefined = this.filters.find(item => item.id === id);
     if (filter === undefined) return;
+    if (this._usedFilterIds.has(filter.id)) return;
 
     const uniqueId = Math.random().toString(36).substring(7);
 
@@ -237,11 +242,12 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
       value: ''
     });
 
+    const availableFilters = this.filters.filter(item => item.id === filter.id || !this._usedFilterIds.has(item.id));
     const select = html`
       <zn-select class="query-builder__key"
                  @zn-change="${(e: ZnChangeEvent) => this._changeRule(uniqueId, e)}"
                  value="${filter?.id}">
-        ${this.filters.map((item: QueryBuilderItem) => {
+        ${availableFilters.map((item: QueryBuilderItem) => {
           return html`
             <zn-option value="${item.id}">
               ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
@@ -338,7 +344,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
         break;
       }
       case 'dateTime': {
-        input = this._createDateInput(uniqueId, true , filter.dateSubmitFormat);
+        input = this._createDateInput(uniqueId, true, filter.dateSubmitFormat);
         break;
       }
       default: {
@@ -401,9 +407,9 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
         ?time-picker="${hasTime}"
         class="query-builder__value"
         @zn-change="${(e: ZnChangeEvent) => this._updateDateValue(uniqueId, e, submitFormat)}"
-        >
+      >
       </zn-datepicker>
-      `;
+    `;
     return litToHTML<ZnDatepicker>(input);
   }
 
@@ -451,7 +457,9 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     this._handleChange();
   }
 
-  private _updateDateValue(id: string, event: Event | { target: ZnDatepicker | HTMLDivElement }, submitFormat: QueryBuilderDateSubmitFormat = 'legacy') {
+  private _updateDateValue(id: string, event: Event | {
+    target: ZnDatepicker | HTMLDivElement
+  }, submitFormat: QueryBuilderDateSubmitFormat = 'legacy') {
     const filter = this._selectedRules.get(id);
     if (!filter) return;
 

package/src/components/remarkd-editor/index.ts

@@ -0,0 +1,12 @@
+import ZnRemarkdEditor from './remarkd-editor.component';
+
+export * from './remarkd-editor.component';
+export default ZnRemarkdEditor;
+
+ZnRemarkdEditor.define('zn-remarkd-editor');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-remarkd-editor': ZnRemarkdEditor;
+  }
+}