@monimesl/dot-cli 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/templates/showcase/pages/components/tabs/state.ts

@@ -0,0 +1,127 @@
+export type Kind = 'album' | 'song';
+export type Genre = 'Kriofusion' | 'Afropop' | 'Hip hop' | 'R&B' | 'Palm-wine' | 'Gospel' | 'Bubu';
+
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+  kind: Kind;
+  genre: Genre;
+}
+
+export interface Show {
+  id: string;
+  title: string;
+  place: string;
+  date: string;
+  city: string;
+}
+
+function release(
+  id: string,
+  title: string,
+  artist: string,
+  year: number,
+  kind: Kind,
+  genre: Genre,
+): Release {
+  return { id, title, artist, year, kind, genre };
+}
+
+// Newest first.
+const releases: Release[] = [
+  release('audacity', 'AUDACITY', 'Drizilik', 2026, 'album', 'Kriofusion'),
+  release('money-or-honey', 'Money or Honey', 'Boii', 2025, 'album', 'R&B'),
+  release('control', 'Control', 'ApreeL', 2025, 'song', 'Afropop'),
+  release('wait-and-see', 'Wait and See', 'Drizilik', 2025, 'album', 'Kriofusion'),
+  release('blunt', 'Blunt', 'Donii Major', 2023, 'song', 'R&B'),
+  release('ashobi', 'Ashobi', 'Drizilik', 2022, 'album', 'Kriofusion'),
+  release('nack', 'Nack', 'The Therapist', 2022, 'song', 'Afropop'),
+  release('hannah', 'Hannah', 'Donii Major', 2021, 'song', 'R&B'),
+  release('shukubly', 'Shukubly', 'Drizilik', 2018, 'album', 'Kriofusion'),
+  release('en-yay-sah', 'En Yay Sah', 'Janka Nabay and the Bubu Gang', 2012, 'album', 'Bubu'),
+  release('red-album', 'Red Album', 'LAJ', 2013, 'album', 'Hip hop'),
+  release(
+    'ghetto-struggle',
+    'Ghetto Struggle',
+    'Kao Denero, with Busy Signal',
+    2013,
+    'song',
+    'Hip hop',
+  ),
+  release('borbor-bele', 'Borbor Bele', 'Emmerson', 2004, 'album', 'Afropop'),
+  release('corruption', 'Corruption', 'Daddy Saj', 2003, 'album', 'Hip hop'),
+  release('cry-africa', 'Cry Africa', 'Vicky Fornah', 1999, 'song', 'Gospel'),
+  release('kormot-bi-en-me', 'Kormot Bi En Me', 'Steady Bongo', 1996, 'album', 'Afropop'),
+  release('dead-men', "Dead Men Don't Smoke Marijuana", 'S. E. Rogie', 1994, 'album', 'Palm-wine'),
+  release('let-me-love-you', 'Let Me Love You', 'Bunny Mack', 1981, 'song', 'Afropop'),
+];
+
+export default {
+  releases,
+  // The releases the tab and the chosen genre leave.
+  shown: releases,
+  tab: 'all',
+  albums: releases.filter((item) => item.kind === 'album').length,
+  songs: releases.filter((item) => item.kind === 'song').length,
+  genres: ['All', 'Kriofusion', 'Afropop', 'Hip hop', 'R&B', 'Palm-wine', 'Gospel', 'Bubu'],
+  genre: 'All',
+  query: '',
+  liked: false,
+  // Shows at home in Sierra Leone, and abroad in the Mano River region.
+  where: 'home',
+  home: [
+    {
+      id: 'sledu-2026',
+      title: 'SLeDU National Music Awards',
+      place: 'Bintumani Conference Centre',
+      date: '27 March 2026',
+      city: 'Freetown',
+    },
+    {
+      id: 'special-guests-4',
+      title: 'Drizilik & Special Guests',
+      place: 'Fourah Bay College Amphitheatre',
+      date: '28 November 2025',
+      city: 'Freetown',
+    },
+    {
+      id: 'christmas-jam',
+      title: 'Christmas Jam',
+      place: 'Coronation Field',
+      date: '26 December 2025',
+      city: 'Bo',
+    },
+    {
+      id: 'gospel-night',
+      title: 'Gospel Night',
+      place: 'Kenema City Hall',
+      date: '15 November 2025',
+      city: 'Kenema',
+    },
+  ] as Show[],
+  abroad: [
+    {
+      id: 'monrovia-live',
+      title: 'Salone Sounds Live',
+      place: 'EJS Ministerial Complex',
+      date: '20 December 2025',
+      city: 'Monrovia',
+    },
+    {
+      id: 'mano-river-festival',
+      title: 'Mano River Music Festival',
+      place: 'Palais du Peuple',
+      date: '8 November 2025',
+      city: 'Conakry',
+    },
+    {
+      id: 'abidjan-night',
+      title: 'Salone Night',
+      place: 'Palais de la Culture',
+      date: '13 September 2025',
+      city: 'Abidjan',
+    },
+  ] as Show[],
+};

package/dist/templates/showcase/pages/components/tabs/view.dml

@@ -0,0 +1,57 @@
+<View>
+  <Text variant="title">Tabs and chips</Text>
+  <Text>Tabs change what the page shows. Chips and a search narrow it down. Try Songs with Palm-wine: nothing matches.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Tabs and Chip</Text>
+    <Text variant="caption" tone="muted">The underline tabs, with a badge for each count. A chip is selected when the page says so. An Input with type="search" and clearable makes a search box.</Text>
+    <Tabs variant="underline" value="{{ tab }}" onChange="chooseTab">
+      <Tab value="all" label="All" />
+      <Tab value="album" label="Albums" badge="{{ albums }}" />
+      <Tab value="song" label="Songs" badge="{{ songs }}" />
+    </Tabs>
+    <Input type="search" placeholder="Search by title" clearable value="{{ query }}" onChange="search" />
+    <View direction="row" gap="small" wrap>
+      <For each="{{ genres }}" item="option" key="*this">
+        <Chip label="{{ option }}" selected="{{ option === genre }}" data-genre="{{ option }}" onTap="chooseGenre" />
+      </For>
+    </View>
+    <If condition="{{ shown.length > 0 }}">
+      <List>
+        <For each="{{ shown }}" item="release" key="id">
+          <ListItem icon="{{ release.kind === 'album' ? 'playlist' : 'music' }}" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.genre }}">
+            <Badge>{{ release.year }}</Badge>
+          </ListItem>
+        </For>
+      </List>
+    </If>
+    <Else>
+      <EmptyState icon="search" title="Nothing here" text="No release matches this tab, genre and search.">
+        <Button variant="secondary" onClick="clearFilters">Clear filters</Button>
+      </EmptyState>
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Chip with an icon</Text>
+    <Text variant="caption" tone="muted">A disabled chip can't be tapped, such as a filter with nothing behind it.</Text>
+    <View direction="row" gap="small" wrap>
+      <Chip icon="heart" label="Liked" selected="{{ liked }}" onTap="toggleLiked" />
+      <Chip icon="download" label="Downloaded" disabled />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">variant="segmented"</Text>
+    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region.</Text>
+    <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
+      <Tab value="home" label="Sierra Leone" />
+      <Tab value="abroad" label="Abroad" />
+    </Tabs>
+    <List>
+      <For each="{{ where === 'home' ? home : abroad }}" item="show" key="id">
+        <ListItem icon="ticket" title="{{ show.title }}" subtitle="{{ show.place }} · {{ show.date }}" value="{{ show.city }}" />
+      </For>
+    </List>
+  </View>
+</View>

package/dist/templates/showcase/pages/components/text/controller.ts

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Text and links' } },
+  mutations: {
+    like: (state) => ({ likes: state.likes + 1 }),
+    unlike: (state) => ({ likes: Math.max(0, state.likes - 1) }),
+  },
+});

package/dist/templates/showcase/pages/components/text/state.ts

@@ -0,0 +1,3 @@
+export default {
+  likes: 12,
+};

package/dist/templates/showcase/pages/components/text/view.dml

@@ -0,0 +1,95 @@
+<View>
+  <Text variant="title">Text and links</Text>
+  <Text>Text shows words. Its variant sets the size, and the theme sets the font and colours.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">variant</Text>
+    <View variant="card" gap="small">
+      <Text variant="display" numeric>SLE 1,250</Text>
+      <Text variant="title">Palm-wine, a title</Text>
+      <Text variant="subtitle">S. E. Rogie, a subtitle</Text>
+      <Text variant="lead">A lead opens an article. It's a little bigger than body text.</Text>
+      <Text variant="body">Guitar music for a calm evening. This is body text, the default.</Text>
+      <Text variant="caption">Recorded in Freetown, in a caption</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">tone</Text>
+    <View variant="card" direction="row" wrap gap="medium">
+      <Text tone="default">default</Text>
+      <Text tone="muted">muted</Text>
+      <Text tone="info">info</Text>
+      <Text tone="success">success</Text>
+      <Text tone="warning">warning</Text>
+      <Text tone="danger">danger</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">weight, italic and decoration</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="medium">
+        <Text weight="regular">regular</Text>
+        <Text weight="medium">medium</Text>
+        <Text weight="bold">bold</Text>
+        <Text italic>italic</Text>
+      </View>
+      <View direction="row" wrap gap="medium">
+        <Text decoration="underline">underline</Text>
+        <Text decoration="strikethrough">strikethrough</Text>
+        <Text decoration="none">none</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">align and numeric</Text>
+    <Text variant="caption" tone="muted">numeric gives every digit the same width, so amounts line up.</Text>
+    <View variant="card" gap="small">
+      <Text align="start">At the start</Text>
+      <Text align="center">In the center</Text>
+      <Text align="end">At the end</Text>
+      <Text align="end" numeric>SLE 1,111.11</Text>
+      <Text align="end" numeric>SLE 8,888.88</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">maxLines</Text>
+    <Text variant="caption" tone="muted">Cuts the text off after this many lines.</Text>
+    <View variant="card">
+      <Text maxLines="2">Sierra Leone's Refugee All Stars came together in refugee camps in Guinea, recorded their first album, Living Like a Refugee, back in Freetown, and carried Salone music to stages around the world. Two lines are allowed here, so the rest is cut off.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">leading and selectable</Text>
+    <Text variant="caption" tone="muted">leading moves the lines closer or further apart. selectable lets the person copy the text: hold your finger on the last one.</Text>
+    <View variant="card" gap="medium">
+      <Text leading="tight">Tight lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+      <Text leading="normal">Normal lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+      <Text leading="relaxed" selectable>Relaxed lines, and you can select them. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Text inside text</Text>
+    <View variant="card">
+      <Text>Text can hold <Text weight="bold">bold</Text> and <Text tone="danger">red</Text> words.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Link</Text>
+    <Text variant="caption" tone="muted">With href, a link opens a web page in the phone's browser. With onTap, it runs a handler.</Text>
+    <View variant="card" gap="small">
+      <Text>Read about <Link href="https://en.wikipedia.org/wiki/Music_of_Sierra_Leone">the music of Sierra Leone</Link>.</Text>
+      <View direction="row" gap="medium">
+        <Link onTap="like">Like the song</Link>
+        <Link tone="danger" onTap="unlike">Take it back</Link>
+      </View>
+      <Text tone="muted">{{ likes }} {{ likes === 1 ? 'like' : 'likes' }}</Text>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/dash/cache/controller.ts

@@ -0,0 +1,50 @@
+import state from './state';
+
+const RECENT = 'recent/';
+const GENRE = 'genre';
+const RECENT_SECONDS = 30;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.storage.cache' } },
+  hooks: {
+    async onShow() {
+      await this.actions.refresh();
+    },
+  },
+  actions: {
+    async refresh() {
+      const keys = await this.dash.storage.cache.keys();
+      const recent: string[] = [];
+      for (const key of keys.filter((each) => each.startsWith(RECENT))) {
+        recent.push((await this.dash.storage.cache.get<string>(key)) ?? '');
+      }
+      const hasGenre = await this.dash.storage.cache.exists(GENRE);
+      this.setState({
+        recent,
+        genre: hasGenre ? ((await this.dash.storage.cache.get<string>(GENRE)) ?? '') : '',
+        keys: keys.join(', '),
+      });
+    },
+    // Each view lasts 30 seconds, then the cache forgets it.
+    async view(_state, event: DataEvent<{ id: string; name: string }>) {
+      await this.dash.storage.cache.set(`${RECENT}${event.data.id}`, event.data.name, {
+        ttl: RECENT_SECONDS,
+      });
+      await this.actions.refresh();
+    },
+    // With no ttl, the genre lasts until it's removed.
+    async setGenre(_state, event: ValueEvent) {
+      await this.dash.storage.cache.set(GENRE, event.detail.value);
+      await this.actions.refresh();
+    },
+    async forgetGenre() {
+      await this.dash.storage.cache.remove(GENRE);
+      await this.actions.refresh();
+    },
+    async clear() {
+      await this.dash.storage.cache.clear();
+      await this.actions.refresh();
+    },
+  },
+});

package/dist/templates/showcase/pages/dash/cache/state.ts

@@ -0,0 +1,17 @@
+export interface Artist {
+  id: string;
+  name: string;
+}
+
+export default {
+  artists: [
+    { id: 'drizilik', name: 'Drizilik' },
+    { id: 'the-therapist', name: 'The Therapist' },
+    { id: 'emmerson', name: 'Emmerson' },
+    { id: 'kao-denero', name: 'Kao Denero' },
+  ] as Artist[],
+  // The artists viewed in the last 30 seconds, as the cache still has them.
+  recent: [] as string[],
+  genre: '',
+  keys: '',
+};

package/dist/templates/showcase/pages/dash/cache/view.dml

@@ -0,0 +1,48 @@
+<View>
+  <Text variant="title">dash.storage.cache</Text>
+  <Text>The cache keeps small values by name, such as text, numbers or JSON. A value can expire after a while, or stay until it's removed.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">set with a ttl, keys and get</Text>
+    <Text variant="caption" tone="muted">Tap an artist. ttl: 30 keeps it for 30 seconds.</Text>
+    <List>
+      <For each="{{ artists }}" item="artist" key="id">
+        <ListItem icon="microphone" title="{{ artist.name }}" data-id="{{ artist.id }}" data-name="{{ artist.name }}" onTap="view" />
+      </For>
+    </List>
+    <View variant="card" gap="small">
+      <If condition="{{ recent.length > 0 }}">
+        <For each="{{ recent }}" item="name" key="*this">
+          <Text>{{ name }}</Text>
+        </For>
+      </If>
+      <Else>
+        <Text variant="caption" tone="muted">No artists viewed in the last 30 seconds</Text>
+      </Else>
+      <Button variant="secondary" onClick="refresh">Check again</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">set without a ttl, and exists</Text>
+    <Text variant="caption" tone="muted">Your favourite genre stays until it's removed, even after the dot closes.</Text>
+    <View variant="card">
+      <Select label="Genre" placeholder="Choose a genre" value="{{ genre }}" onChange="setGenre">
+        <Option value="Afropop" label="Afropop" />
+        <Option value="Palm-wine" label="Palm-wine" />
+        <Option value="Gumbe" label="Gumbe" />
+      </Select>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">remove and clear</Text>
+    <View variant="card" gap="small">
+      <Text>Keys in the cache: {{ keys || 'none' }}</Text>
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" onClick="forgetGenre" disabled="{{ !genre }}">Forget the genre</Button>
+        <Button variant="secondary" onClick="clear" disabled="{{ !keys }}">Clear the cache</Button>
+      </View>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/dash/calls/controller.ts

@@ -0,0 +1,50 @@
+import type { DashRequest } from '@monimesl/dot-runtime';
+import { errorMessage, isDashError } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+// The long wait, kept so the Cancel button can stop it.
+let wait: DashRequest<void> | null = null;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Calls and errors' } },
+  actions: {
+    // Makes the call a button names, and shows how it ended.
+    async show(_state, event: DataEvent<{ call: string }>) {
+      this.setState({ code: '', message: '' });
+      try {
+        switch (event.data.call) {
+          case 'timeout':
+            // Gives up after 1 second on a wait of 5.
+            await this.dash.system.delay(5000, { timeout: 1000 });
+            break;
+          case 'cancelled':
+            wait = this.dash.system.delay(10_000);
+            this.setState({ waiting: true });
+            await wait;
+            break;
+          case 'invalid':
+            await this.dash.ui.pickDate({ min: '2026-12-31', max: '2026-01-01' });
+            break;
+          case 'denied':
+            await this.dash.network.http.request({ url: 'https://example.com' });
+            break;
+        }
+        this.setState({ code: 'none', message: 'It worked' });
+      } catch (error) {
+        if (isDashError(error)) {
+          this.setState({ code: error.code, message: error.message });
+        } else {
+          this.setState({ code: 'not a DashError', message: errorMessage(error) });
+        }
+      } finally {
+        wait = null;
+        this.setState({ waiting: false });
+      }
+    },
+    cancelWait() {
+      wait?.cancel();
+    },
+  },
+});

package/dist/templates/showcase/pages/dash/calls/state.ts

@@ -0,0 +1,6 @@
+export default {
+  waiting: false,
+  // The last call's outcome: the DashError's code and message, or how it ended.
+  code: '',
+  message: '',
+};

package/dist/templates/showcase/pages/dash/calls/view.dml

@@ -0,0 +1,52 @@
+<View>
+  <Text variant="title">Calls and errors</Text>
+  <Text>Every this.dash call goes to Dash and comes back later, so await it. When it fails, it throws a DashError with a code that says why.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">timeout</Text>
+    <Text variant="caption" tone="muted">The last argument of a call can set a timeout, in milliseconds. This waits 5 seconds with a timeout of 1.</Text>
+    <Button variant="secondary" data-call="timeout" onClick="show">Wait too long</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">cancel</Text>
+    <Text variant="caption" tone="muted">A call can be cancelled while it runs. Calls still running when the page closes are cancelled for you.</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" data-call="cancelled" onClick="show" disabled="{{ waiting }}">Wait 10 seconds</Button>
+      <Button variant="secondary" onClick="cancelWait" disabled="{{ !waiting }}">Cancel</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">DashError codes</Text>
+    <Text variant="caption" tone="muted">isDashError(error) tells a Dash call's error from any other, and isDashError(error, 'timeout') also checks its code. Each code has its own check too, such as isDashCancelled(error).</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="cancelled" value="The person closed it, or the call was cancelled" />
+      <DetailRow label="timeout" value="It took longer than the timeout" />
+      <DetailRow label="denied" value="Not allowed, such as a missing permission" />
+      <DetailRow label="invalid" value="The call's options are wrong" />
+      <DetailRow label="unsupported" value="This Dash can't do it" />
+      <DetailRow label="failed" value="Anything else went wrong" />
+    </View>
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" data-call="invalid" onClick="show">Pick a date between bad limits</Button>
+      <Button variant="secondary" data-call="denied" onClick="show">Reach an unlisted host</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The last call</Text>
+    <View variant="card" gap="none">
+      <If condition="{{ code }}">
+        <DetailRow label="error.code" value="{{ code }}" weight="bold" />
+        <DetailRow label="error.message" value="{{ message }}" />
+      </If>
+      <ElseIf condition="{{ waiting }}">
+        <Text tone="muted">Waiting…</Text>
+      </ElseIf>
+      <Else>
+        <Text tone="muted">Use a button above</Text>
+      </Else>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/dash/contacts/controller.ts

@@ -0,0 +1,30 @@
+import { errorMessage, unlessCancelled } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.contacts' } },
+  actions: {
+    async choose() {
+      try {
+        const contact = await unlessCancelled(this.dash.contacts.pickPhone());
+        if (contact) {
+          this.setState({ contact, note: '' });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async call(state) {
+      if (!state.contact) {
+        return;
+      }
+      try {
+        await this.dash.system.dial(state.contact.phone);
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

package/dist/templates/showcase/pages/dash/contacts/state.ts

@@ -0,0 +1,6 @@
+import type { PickedContact } from '@monimesl/dot-runtime';
+
+export default {
+  contact: null as PickedContact | null,
+  note: '',
+};

package/dist/templates/showcase/pages/dash/contacts/view.dml

@@ -0,0 +1,33 @@
+<View>
+  <Text variant="title">dash.contacts</Text>
+  <Text>The phone's own contacts. The dot sees only the one the person chooses.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">pickPhone</Text>
+    <Text variant="caption" tone="muted">The person chooses one phone number, such as who to send money to. It needs the contacts permission in dot.json.</Text>
+    <View variant="card" gap="medium">
+      <If condition="{{ contact }}">
+        <View direction="row" align="center" gap="medium">
+          <Avatar name="{{ contact.name }}" />
+          <View grow gap="none">
+            <Text weight="medium">{{ contact.name || 'No name' }}</Text>
+            <Text variant="caption" tone="muted">{{ contact.phone }}</Text>
+          </View>
+        </View>
+        <View direction="row" gap="small">
+          <Button variant="secondary" onClick="choose">Choose another</Button>
+          <Button variant="secondary" onClick="call">Call</Button>
+        </View>
+      </If>
+      <Else>
+        <EmptyState icon="users" title="No one chosen" text="Choose a contact to send money to.">
+          <Button onClick="choose">Choose a contact</Button>
+        </EmptyState>
+      </Else>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>