npm - @nyaruka/temba-components - Versions diffs - 0.129.0 → 0.129.2 - Mend

@nyaruka/temba-components 0.129.0 → 0.129.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/CHANGELOG.md +16 -0
package/demo/components/alert/example.html +71 -0
package/demo/components/button/example.html +167 -0
package/demo/{chart → components/chart}/example.html +3 -3
package/demo/components/chart/horizontal-demo.html +160 -0
package/demo/components/checkbox/example.html +68 -0
package/demo/components/compose/example.html +69 -0
package/demo/components/datepicker/example.html +3 -3
package/demo/components/datepicker/range-picker-demo.html +2 -2
package/demo/{dialog → components/dialog}/example.html +3 -3
package/demo/components/dropdown/example.html +95 -0
package/demo/{flow → components/flow}/example.html +1 -1
package/demo/{misc → components/misc}/example.html +3 -3
package/demo/components/progress/example.html +62 -0
package/demo/components/select/drag-and-drop.html +162 -0
package/demo/components/select/example.html +76 -0
package/demo/components/select/multi.html +72 -0
package/demo/components/slider/example.html +55 -0
package/demo/{sortable-list → components/sortable-list}/example.html +3 -3
package/demo/components/tabs/example.html +91 -0
package/demo/{textinput → components/textinput}/completion.html +3 -3
package/demo/components/textinput/example.html +141 -0
package/demo/{webchat → components/webchat}/example.html +3 -3
package/demo/index.html +21 -21
package/demo/static/css/styles.css +253 -0
package/demo/sticky-note-demo.html +88 -85
package/demo/styles.css +24 -0
package/dist/locales/es.js +5 -5
package/dist/locales/es.js.map +1 -1
package/dist/locales/fr.js +5 -5
package/dist/locales/fr.js.map +1 -1
package/dist/locales/locale-codes.js +2 -11
package/dist/locales/locale-codes.js.map +1 -1
package/dist/locales/pt.js +5 -5
package/dist/locales/pt.js.map +1 -1
package/dist/temba-components.js +4 -4
package/dist/temba-components.js.map +1 -1
package/out-tsc/src/chart/TembaChart.js +5 -1
package/out-tsc/src/chart/TembaChart.js.map +1 -1
package/out-tsc/src/datepicker/RangePicker.js +15 -4
package/out-tsc/src/datepicker/RangePicker.js.map +1 -1
package/out-tsc/src/locales/es.js +5 -5
package/out-tsc/src/locales/es.js.map +1 -1
package/out-tsc/src/locales/fr.js +5 -5
package/out-tsc/src/locales/fr.js.map +1 -1
package/out-tsc/src/locales/locale-codes.js +2 -11
package/out-tsc/src/locales/locale-codes.js.map +1 -1
package/out-tsc/src/locales/pt.js +5 -5
package/out-tsc/src/locales/pt.js.map +1 -1
package/package.json +1 -1
package/screenshots/truth/datepicker/range-picker-all.png +0 -0
package/screenshots/truth/datepicker/range-picker-button-states.png +0 -0
package/screenshots/truth/datepicker/range-picker-default.png +0 -0
package/screenshots/truth/datepicker/range-picker-editing-start.png +0 -0
package/screenshots/truth/datepicker/range-picker-initial-values.png +0 -0
package/screenshots/truth/datepicker/range-picker-min-max.png +0 -0
package/screenshots/truth/datepicker/range-picker-week.png +0 -0
package/screenshots/truth/datepicker/range-picker-year.png +0 -0
package/src/chart/TembaChart.ts +4 -1
package/src/datepicker/RangePicker.ts +16 -4
package/src/locales/es.ts +13 -18
package/src/locales/fr.ts +13 -18
package/src/locales/locale-codes.ts +2 -11
package/src/locales/pt.ts +13 -18
package/demo/alert/example.html +0 -65
package/demo/button/example.html +0 -71
package/demo/chart/horizontal-demo.html +0 -81
package/demo/checkbox/example.html +0 -72
package/demo/compose/example.html +0 -72
package/demo/dropdown/example.html +0 -99
package/demo/progress/example.html +0 -59
package/demo/select/drag-and-drop.html +0 -142
package/demo/select/example.html +0 -82
package/demo/select/multi.html +0 -73
package/demo/slider/example.html +0 -59
package/demo/tabs/example.html +0 -91
package/demo/textinput/example.html +0 -61

package/CHANGELOG.md CHANGED Viewed

@@ -4,8 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+#### [v0.129.2](https://github.com/nyaruka/temba-components/compare/v0.129.1...v0.129.2)
+- Add option for chart to not fetch until a window is provided [`#596`](https://github.com/nyaruka/temba-components/pull/596)
+- Standardize component documentation structure and remove inline styles [`#595`](https://github.com/nyaruka/temba-components/pull/595)
+- Fix demo links for styles and module import [`5c06b5a`](https://github.com/nyaruka/temba-components/commit/5c06b5a58118450d330d0a0370b0e0a5a3a40d58)
+- Standardize sticky-note-demo.html and horizontal-demo.html documentation [`36ad3c1`](https://github.com/nyaruka/temba-components/commit/36ad3c14a23c4419a7f0ed32c613cdc53b3737a7)
+- Move all component demos under demo/components directory [`dd2e778`](https://github.com/nyaruka/temba-components/commit/dd2e7787c9114912bc746bcb5fe2341db0ae2e0f)
+#### [v0.129.1](https://github.com/nyaruka/temba-components/compare/v0.129.0...v0.129.1)
+> 25 June 2025
+- Fix formatting for range dates [`#590`](https://github.com/nyaruka/temba-components/pull/590)
 #### [v0.129.0](https://github.com/nyaruka/temba-components/compare/v0.128.0...v0.129.0)
+> 24 June 2025
 - Smarter monthly paging [`#589`](https://github.com/nyaruka/temba-components/pull/589)
 - Add horizontal chart option [`#588`](https://github.com/nyaruka/temba-components/pull/588)
 - Add date range component [`#587`](https://github.com/nyaruka/temba-components/pull/587)

package/demo/components/alert/example.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Alert Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Alert Examples</h1>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
+    <div class="example">
+      <h3>Basic Alert</h3>
+      <p>A simple alert component</p>
+      <temba-alert>This is a basic alert message.</temba-alert>
+    </div>
+    <div class="example">
+      <h3>Success Alert</h3>
+      <p>An alert for successful actions</p>
+      <temba-alert level="success"
+        >Your changes have been saved successfully!</temba-alert
+      >
+    </div>
+    <div class="example">
+      <h3>Warning Alert</h3>
+      <p>An alert for warning messages</p>
+      <temba-alert level="warning"
+        >Please review your input before proceeding.</temba-alert
+      >
+    </div>
+    <div class="example">
+      <h3>Error Alert</h3>
+      <p>An alert for error messages</p>
+      <temba-alert level="error"
+        >An error occurred while processing your request.</temba-alert
+      >
+    </div>
+    <div class="example">
+      <h3>Info Alert</h3>
+      <p>An alert for informational messages</p>
+      <temba-alert level="info"
+        >This feature is currently in beta testing.</temba-alert
+      >
+    </div>
+    <div class="example">
+      <h3>Dismissible Alert</h3>
+      <p>An alert that can be closed</p>
+      <temba-alert dismissible
+        >This alert can be dismissed by clicking the X button.</temba-alert
+      >
+    </div>
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>

package/demo/components/button/example.html ADDED Viewed

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Button Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+    <link href="/demo/static/css/prism.css" rel="stylesheet" />
+    <script type="module" src="/demo/static/js/prism-loader.js"></script>
+  </head>
+  <body>
+    <h1>Button Examples</h1>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
+    <table class="attr-table">
+      <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>name</td>
+          <td>Text displayed on the button</td>
+          <td>None (required)</td>
+        </tr>
+        <tr>
+          <td>primary</td>
+          <td>Applies primary button styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>secondary</td>
+          <td>Applies secondary button styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>attention</td>
+          <td>Applies attention-grabbing styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>destructive</td>
+          <td>Applies destructive action styling (red)</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>light</td>
+          <td>Applies light button styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>disabled</td>
+          <td>Disables the button and prevents interaction</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>submitting</td>
+          <td>Shows loading state during form submission</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>small</td>
+          <td>Applies smaller button size</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>lined</td>
+          <td>Applies outlined button styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>href</td>
+          <td>URL to navigate to when clicked (makes button a link)</td>
+          <td>None</td>
+        </tr>
+        <tr>
+          <td>icon</td>
+          <td>Icon name to display alongside button text</td>
+          <td>None</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="example">
+      <h3>Basic Button</h3>
+      <p>A simple button component</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button name="Click Me"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button name="Click Me"></temba-button>
+    </div>
+    <div class="example">
+      <h3>Primary Button</h3>
+      <p>A primary styled button</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button primary name="Primary Action"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button primary name="Primary Action"></temba-button>
+    </div>
+    <div class="example">
+      <h3>Secondary Button</h3>
+      <p>A secondary styled button</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button secondary name="Secondary Action"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button secondary name="Secondary Action"></temba-button>
+    </div>
+    <div class="example">
+      <h3>Small Button</h3>
+      <p>A smaller button variant</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button small name="Small Button"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button small name="Small Button"></temba-button>
+    </div>
+    <div class="example">
+      <h3>Disabled Button</h3>
+      <p>A button that cannot be clicked</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button disabled name="Disabled Button"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button disabled name="Disabled Button"></temba-button>
+    </div>
+    <div class="example">
+      <h3>Multiple Buttons</h3>
+      <p>Several buttons in a row with proper constraints</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;div class="button-group"&gt;
+  &lt;div&gt;&lt;temba-button name="Save"&gt;&lt;/temba-button&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;temba-button secondary name="Cancel"&gt;&lt;/temba-button&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;temba-button primary name="Submit"&gt;&lt;/temba-button&gt;&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+      <div class="button-group">
+        <div>
+          <temba-button name="Save"></temba-button>
+        </div>
+        <div>
+          <temba-button secondary name="Cancel"></temba-button>
+        </div>
+        <div>
+          <temba-button primary name="Submit"></temba-button>
+        </div>
+      </div>
+    </div>
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>

package/demo/{chart → components/chart}/example.html RENAMED Viewed

@@ -12,7 +12,7 @@
       href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
       rel="stylesheet"
     />
-    <link href="../styles.css" rel="stylesheet" type="text/css" />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
     <style>
       .palette {
         display: flex;
@@ -45,7 +45,7 @@
   <body>
     <temba-store></temba-store>
     <h1>Chart Examples</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
     <div class="example">
       <h3>Summation Chart</h3>
@@ -387,7 +387,7 @@
     </div>
     <script type="module">
-      import '../../out-tsc/temba-modules.js';
+      import '/out-tsc/temba-modules.js';
     </script>
   </body>
 </html>

package/demo/components/chart/horizontal-demo.html ADDED Viewed

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Chart Example - Horizontal Charts</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+    <script type="module" src="../../../src/chart/TembaChart.ts"></script>
+    <link href="/demo/static/css/prism.css" rel="stylesheet" />
+    <script type="module" src="/demo/static/js/prism-loader.js"></script>
+  </head>
+  <body>
+    <h1>Chart Example - Horizontal Charts</h1>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
+    <table class="attr-table">
+      <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>chartType</td>
+          <td>Type of chart to display ('bar', 'line', 'pie', etc.)</td>
+          <td>'bar'</td>
+        </tr>
+        <tr>
+          <td>horizontal</td>
+          <td>Whether to display the bar chart horizontally</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>header</td>
+          <td>Title text displayed above the chart</td>
+          <td>''</td>
+        </tr>
+        <tr>
+          <td>data</td>
+          <td>Chart data object containing labels and datasets</td>
+          <td>None (required)</td>
+        </tr>
+        <tr>
+          <td>percent</td>
+          <td>Whether to show percentage values on chart</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>maxChartHeight</td>
+          <td>Maximum height for the chart in pixels</td>
+          <td>250</td>
+        </tr>
+        <tr>
+          <td>legend</td>
+          <td>Whether to show the chart legend</td>
+          <td>false</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="example">
+      <h3>Regular Vertical Bar Chart</h3>
+      <p>Default vertical bar chart display</p>
+      <pre class="example-html"><code class="language-markup">&lt;temba-chart
+  type="bar"
+  header="Monthly Sales (Vertical)"
+  style="height: 300px; display: block"
+&gt;&lt;/temba-chart&gt;</code></pre>
+      <temba-chart
+        type="bar"
+        header="Monthly Sales (Vertical)"
+        style="height: 300px; display: block"
+        id="vertical-chart"
+      ></temba-chart>
+    </div>
+    <div class="example">
+      <h3>Horizontal Bar Chart</h3>
+      <p>Bar chart displayed horizontally using the horizontal attribute</p>
+      <pre class="example-html"><code class="language-markup">&lt;temba-chart
+  type="bar"
+  horizontal
+  header="Monthly Sales (Horizontal)"
+  style="height: 300px; display: block"
+&gt;&lt;/temba-chart&gt;</code></pre>
+      <temba-chart
+        type="bar"
+        horizontal
+        header="Monthly Sales (Horizontal)"
+        style="height: 300px; display: block"
+        id="horizontal-chart"
+      ></temba-chart>
+    </div>
+    <div class="example">
+      <h3>Horizontal Bar Chart with Percentages</h3>
+      <p>Horizontal bar chart showing percentage values</p>
+      <pre class="example-html"><code class="language-markup">&lt;temba-chart
+  type="bar"
+  horizontal
+  percent
+  header="Monthly Sales with Percentages (Horizontal)"
+  style="height: 300px; display: block"
+&gt;&lt;/temba-chart&gt;</code></pre>
+      <temba-chart
+        type="bar"
+        horizontal
+        percent
+        header="Monthly Sales with Percentages (Horizontal)"
+        style="height: 300px; display: block"
+        id="horizontal-percent-chart"
+      ></temba-chart>
+    </div>
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+      // Sample data for the charts
+      const sampleData = {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+        datasets: [
+          {
+            label: 'Product A',
+            data: [65, 59, 80, 81, 56, 55],
+            backgroundColor: 'rgba(54, 162, 235, 0.6)',
+            borderColor: 'rgba(54, 162, 235, 1)',
+            borderWidth: 1
+          },
+          {
+            label: 'Product B',
+            data: [28, 48, 40, 19, 86, 27],
+            backgroundColor: 'rgba(255, 99, 132, 0.6)',
+            borderColor: 'rgba(255, 99, 132, 1)',
+            borderWidth: 1
+          }
+        ]
+      };
+      // Wait for the DOM to be ready and charts to be defined
+      document.addEventListener('DOMContentLoaded', () => {
+        setTimeout(() => {
+          const charts = document.querySelectorAll('temba-chart');
+          charts.forEach((chart) => {
+            chart.data = sampleData;
+          });
+        }, 100);
+      });
+    </script>
+  </body>
+</html>

package/demo/components/checkbox/example.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Checkbox Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Checkbox Examples</h1>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
+    <div class="example">
+      <h3>Basic Checkbox</h3>
+      <p>A simple checkbox component</p>
+      <temba-checkbox label="Check this out" checked></temba-checkbox>
+    </div>
+    <div class="example">
+      <h3>Unchecked Checkbox</h3>
+      <p>A checkbox that starts unchecked</p>
+      <temba-checkbox label="This is not checked"></temba-checkbox>
+    </div>
+    <div class="example">
+      <h3>Checkbox with Help Text</h3>
+      <p>A checkbox with additional help text</p>
+      <temba-checkbox
+        name="schedule"
+        label="Schedule for later delivery"
+        help_text="This is something you should think long and hard about"
+      ></temba-checkbox>
+    </div>
+    <div class="example">
+      <h3>Disabled Checkbox</h3>
+      <p>A checkbox that cannot be changed</p>
+      <temba-checkbox
+        name="disabled"
+        label="You can't check this one"
+        help_text="It is disabled, don't click it"
+        disabled
+      ></temba-checkbox>
+    </div>
+    <div class="example">
+      <h3>Multiple Checkboxes</h3>
+      <p>Several checkboxes in a row</p>
+      <div style="display: flex; flex-wrap: wrap; gap: 20px">
+        <temba-checkbox label="Option 1" checked></temba-checkbox>
+        <temba-checkbox label="Option 2"></temba-checkbox>
+        <temba-checkbox label="Option 3" checked></temba-checkbox>
+      </div>
+    </div>
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>

package/demo/components/compose/example.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Compose Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Compose Examples</h1>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
+    <div class="example">
+      <h3>Basic Compose</h3>
+      <p>A simple compose component for text input</p>
+      <temba-compose placeholder="Type your message here..."></temba-compose>
+    </div>
+    <div class="example">
+      <h3>Compose with Counter</h3>
+      <p>A compose component with character counting</p>
+      <temba-compose
+        placeholder="Enter your message (max 160 characters)..."
+        counter
+        maxlength="160"
+      >
+      </temba-compose>
+    </div>
+    <div class="example">
+      <h3>Compose with Attachments</h3>
+      <p>A compose component that supports file attachments</p>
+      <temba-compose
+        placeholder="Write your message and attach files..."
+        attachments
+      >
+      </temba-compose>
+    </div>
+    <div class="example">
+      <h3>Rich Text Compose</h3>
+      <p>A compose component with rich text formatting</p>
+      <temba-compose
+        placeholder="Format your text with rich editing..."
+        rich-text
+      >
+      </temba-compose>
+    </div>
+    <div class="example">
+      <h3>Multi-line Compose</h3>
+      <p>A compose component with multiple lines</p>
+      <temba-compose placeholder="Enter a longer message..." rows="4">
+      </temba-compose>
+    </div>
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>

package/demo/components/datepicker/example.html CHANGED Viewed

@@ -12,11 +12,11 @@
       href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
       rel="stylesheet"
     />
-    <link href="../../styles.css" rel="stylesheet" type="text/css" />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <h1>Date Picker Examples</h1>
-    <p><a href="../../index.html">← Back to main demo</a></p>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
     <div class="example">
       <h3>Date and Time Picker</h3>
@@ -57,7 +57,7 @@
     </script>
     <script type="module">
-      import '../../out-tsc/temba-modules.js';
+      import '/out-tsc/temba-modules.js';
     </script>
   </body>
 </html>

package/demo/components/datepicker/range-picker-demo.html CHANGED Viewed

@@ -12,14 +12,14 @@
       href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
       rel="stylesheet"
     />
-    <link href="../../styles.css" rel="stylesheet" type="text/css" />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
     <script type="module" src="../../../src/datepicker/RangePicker.ts"></script>
     <link href="/demo/static/css/prism.css" rel="stylesheet" />
     <script type="module" src="/demo/static/js/prism-loader.js"></script>
   </head>
   <body>
     <h1>Range Picker Example</h1>
-    <p><a href="../../index.html">← Back to main demo</a></p>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
     <table class="attr-table">
       <thead>

package/demo/{dialog → components/dialog}/example.html RENAMED Viewed

@@ -12,11 +12,11 @@
       href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
       rel="stylesheet"
     />
-    <link href="../styles.css" rel="stylesheet" type="text/css" />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <h1>Dialog Examples</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
     <div class="example">
       <h3>Basic Dialog</h3>
@@ -101,7 +101,7 @@
     </div>
     <script type="module">
-      import '../../out-tsc/temba-modules.js';
+      import '/out-tsc/temba-modules.js';
     </script>
   </body>
 </html>