tosijs-ui 1.4.0 → 1.4.2

package/dist/ab-test.d.ts

@@ -1,5 +1,6 @@
 import { Component } from 'tosijs';
 export declare class AbTest extends Component {
+    static preferredTagName: string;
     static set conditions(context: {
         [key: string]: any;
     });

package/dist/ab-test.js

@@ -0,0 +1,113 @@
+/*#
+# ab-test
+
+`<tosi-ab>` provides a simple method for implementing A|B-testing.
+
+```js
+import { AbTest } from 'tosijs-ui'
+
+function randomize() {
+  const conditions = {
+    testA: Math.random() < 0.5,
+    testB: Math.random() < 0.5,
+    testC: Math.random() < 0.5
+  }
+
+  AbTest.conditions = conditions
+
+  preview.querySelector('pre').innerText = JSON.stringify(conditions, null, 2)
+}
+
+preview.querySelector('.randomize-conditions').addEventListener('click', randomize)
+
+randomize()
+```
+```html
+<div style="display: flex; gap: 10px; align-items: center;">
+  <div style="display: flex; flex-direction: column; gap: 10px;">
+    <tosi-ab class="a" condition="testA">
+      <p>testA</p>
+    </tosi-ab>
+    <tosi-ab class="not-a" not condition="testA">
+      <p>not testA</p>
+    </tosi-ab>
+    <tosi-ab class="b" condition="testB">
+      <p>testB</p>
+    </tosi-ab>
+    <tosi-ab class="not-b" not condition="testB">
+      <p>not testB</p>
+    </tosi-ab>
+    <tosi-ab class="c" condition="testC">
+      <p>testC</p>
+    </tosi-ab>
+    <tosi-ab class="not-c" not condition="testC">
+      <p>not testC</p>
+    </tosi-ab>
+  </div>
+  <pre>
+  </pre>
+</div>
+<button class="randomize-conditions">Randomize</button>
+```
+```css
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.preview p {
+  background: #44c;
+  color: white;
+  display: block;
+  border-radius: 99px;
+  padding: 4px 10px;
+  margin: 0;
+}
+
+.preview tosi-ab[not] p {
+  background: red;
+}
+```
+
+- Set `AbTest.conditions` to anything you like.
+- Use `<tosi-ab>` elements to display conditional content.
+- `condition` attribute determines which value in `AbTest.conditions` controls the element
+- `not` reverses the condition (so `<tosi-ab not condition="foo">` will be visible if `conditions.foo` is `false`)
+*/
+import { Component } from 'tosijs';
+const abTestConditions = {};
+export class AbTest extends Component {
+    static preferredTagName = 'tosi-ab';
+    static set conditions(context) {
+        Object.assign(abTestConditions, context);
+        for (const abTest of [...AbTest.instances]) {
+            abTest.queueRender();
+        }
+    }
+    static initAttributes = {
+        condition: '',
+        not: false,
+    };
+    static instances = new Set();
+    connectedCallback() {
+        super.connectedCallback();
+        AbTest.instances.add(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        AbTest.instances.delete(this);
+    }
+    render() {
+        if (this.condition !== '' &&
+            (this.not
+                ? abTestConditions[this.condition] !== true
+                : abTestConditions[this.condition] === true)) {
+            this.toggleAttribute('hidden', false);
+        }
+        else {
+            this.toggleAttribute('hidden', true);
+        }
+    }
+}
+export const abTest = AbTest.elementCreator();

package/dist/babylon-3d.d.ts

@@ -8,9 +8,10 @@ interface B3dUIOptions {
 }
 type MeshProcessCallback = (meshes: any[]) => void;
 export declare class B3d extends WebComponent {
+    static preferredTagName: string;
     babylonReady: Promise<any>;
     BABYLON?: any;
-    static styleSpec: {
+    static shadowStyleSpec: {
         ':host': {
             display: string;
             position: string;

package/dist/babylon-3d.js

@@ -0,0 +1,293 @@
+/*#
+# 3d
+
+A [babylonjs](https://www.babylonjs.com/) wrapper.
+
+A `<tosi-3d>` element is initialized with an `engine`, `canvas`, `scene`, and an update-loop.
+
+If you view this example with an XR-enabled device, such as the
+[Meta Quest 3](https://www.meta.com/quest/quest-3/), then you should be able to view this
+as an AR scene.
+
+```js
+import { b3d, gamepadText, xrControllers, xrControllersText } from 'tosijs-ui'
+
+preview.append(b3d({
+  async sceneCreated(element, BABYLON) {
+    const camera = new BABYLON.FreeCamera(
+      'camera',
+      new BABYLON.Vector3(0, 1, -4),
+      element.scene
+    )
+    camera.attachControl(element.parts.canvas, true)
+
+    new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0.25, 1, -0.5))
+
+    this.loadScene('/', 'xin3d.glb')
+
+    const size = 1024
+    const textTexture = new BABYLON.DynamicTexture('Text', size, element.scene)
+    const textContext = textTexture.getContext()
+    textTexture.update()
+
+    const textMaterial = new BABYLON.StandardMaterial('Text', element.scene)
+    textMaterial.diffuseTexture = textTexture
+    textMaterial.emissiveTexture = textTexture
+    textMaterial.backfaceCulling = false
+
+    const plaque = BABYLON.MeshBuilder.CreatePlane('Plaque', {size: 1}, element.scene)
+    plaque.position.x = 0
+    plaque.position.y = 2
+    plaque.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL
+    plaque.material = textMaterial
+
+    let controllers
+    if (navigator.xr) {
+      const xrHelper = await element.scene.createDefaultXRExperienceAsync({
+        uiOptions: {
+          sessionMode: 'immersive-ar'
+        }
+      })
+      controllers = xrControllers(xrHelper)
+    }
+
+    const interval = setInterval(() => {
+      if (document.body.contains(element)) {
+        textContext.fillStyle = '#204020'
+        textContext.fillRect(0, 0, size, size)
+        const text = gamepadText() + '\n' + xrControllersText(controllers)
+        const lines = text.split('\n')
+        textContext.fillStyle = '#afa'
+        textContext.font = '32px monospace'
+        for(let i = 0; i < lines.length; i++) {
+          const line = lines[i]
+          textContext.fillText(line, 40, 70 + i * 40)
+        }
+        textContext.fillStyle = '#bbb'
+        textContext.fillText('tosijs-xr — debug info', 40, 984)
+        textTexture.update()
+      } else {
+        clearInterval(interval)
+      }
+    }, 100)
+  },
+}))
+```
+```css
+.preview tosi-3d {
+  width: 100%;
+  height: 100%;
+}
+```
+
+You can access the `scene` and `engine` properties. You can also assign `sceneCreated`
+and `update` callbacks that will be executed when the scene is first initialized and
+before each update, respectively. (See the example, it does both.)
+
+Both `sceneCreated` and `update` may be `async`. The component will `await` `sceneCreated`
+before starting the renderLoop, but `update` is simply passed to babylon, so be careful.
+
+By default, this component loads `babylon.js` from the [babylonjs CDN](https://doc.babylonjs.com/setup/frameworkPackages/CDN),
+but if `BABYLON` is already defined (e.g. if you've bundled it) then it will use that instead.
+
+If you need additional libraries, e.g. `https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js` for loading models such as `gltf` and `glb` files, you should load those in `sceneCreated`.
+
+Here's a simple example of a terrain mesh comprising 125k triangles, 50% of which is being scaled using a `profileScale` function that
+takes an array of numbers that use a linear profile to change the landform.
+
+```js
+import { b3d } from 'tosijs-ui'
+import { MoreMath } from 'tosijs'
+
+const debugCutoff = 0.5
+const defaultProfile = [0, 1, 5, 8, 10].map(x => x/10)
+
+const { clamp } = MoreMath
+function profileScale(t = 0, bypass = false, profile = defaultProfile) {
+  if (bypass) {
+    return t
+  }
+  const count = profile.length - 1
+  if (count < 1) {
+    throw new Error('profile must be of length ≥ 2')
+  }
+
+  const s = clamp(0, (t + 1) / 2, 1)
+  const index = Math.floor(s * count)
+  const dt = (s - index / count) * count
+  const min = profile[index]
+  const max = profile[index + 1]
+  const p = dt * (max - min) + min
+  return 2 * p - 1
+}
+
+preview.append(b3d({
+  async sceneCreated(element, BABYLON) {
+    const { scene } = element
+    const { createNoise2D } = await import('https://cdn.jsdelivr.net/npm/simplex-noise@4.0.1/+esm')
+
+    new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0.25, 1, 2))
+
+    const terrain = new BABYLON.Mesh('terrain', scene)
+    const vertexData = new BABYLON.VertexData()
+
+    const noise2D = createNoise2D()
+    const positions = []
+    const indices = []
+    const gridSize = 100
+    const gridResolution = 250
+    const gridPoints = gridResolution + 1
+    const noiseScale = 0.03
+    const heightScale = 4.5
+    terrain.position.y = -5
+    const scale = t => t * gridSize / gridResolution - gridSize * 0.5
+    for(let x = 0; x <= gridResolution; x++) {
+      for(let z = 0; z <= gridResolution; z++) {
+        const y =  profileScale(noise2D(scale(x) * noiseScale, scale(z) * noiseScale), x < gridResolution * debugCutoff)
+        positions.push(scale(x), y * heightScale, scale(z))
+        if (x > 0 && z > 0) {
+          const i = x * gridPoints + z
+          indices.push(
+            i, i - gridPoints - 1, i - 1,
+            i, i - gridPoints, i - gridPoints - 1,
+          )
+        }
+      }
+    }
+    const normals = []
+    BABYLON.VertexData.ComputeNormals(positions, indices, normals);
+
+    vertexData.positions = positions
+    vertexData.indices = indices
+    vertexData.normals = normals
+    vertexData.applyToMesh(terrain)
+  },
+}))
+```
+
+## loadScene
+
+`<tosi-3d>.loadScene(path: string, file: string, callBack(meshes: any[]): void)` can
+be used to load `.glb` files.
+
+## loadUI
+
+`<tosi-3d>.loadUI(options: B3dUIOptions)` loads babylonjs guis, which you can create programmatically or using the [babylonjs gui tool](https://gui.babylonjs.com/).
+*/
+import { Component as WebComponent, elements } from 'tosijs';
+import { scriptTag } from './via-tag';
+import { icons, svg2DataUrl } from './icons';
+const noop = () => {
+    /* do not care */
+};
+export class B3d extends WebComponent {
+    static preferredTagName = 'tosi-3d';
+    babylonReady;
+    BABYLON;
+    static shadowStyleSpec = {
+        ':host': {
+            display: 'block',
+            position: 'relative',
+        },
+        ':host canvas': {
+            width: '100%',
+            height: '100%',
+        },
+        ':host .babylonVRicon': {
+            height: 50,
+            width: 80,
+            backgroundColor: 'transparent',
+            filter: 'drop-shadow(0 0 4px #000c)',
+            backgroundImage: svg2DataUrl(icons.xrColor()),
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+            border: 'none',
+            borderRadius: 5,
+            borderStyle: 'none',
+            outline: 'none',
+            transition: 'transform 0.125s ease-out',
+        },
+        ':host .babylonVRicon:hover': {
+            transform: 'scale(1.1)',
+        },
+    };
+    content = elements.canvas({ part: 'canvas' });
+    constructor() {
+        super();
+        this.babylonReady = (async () => {
+            const { BABYLON } = await scriptTag('https://cdn.babylonjs.com/babylon.js', 'BABYLON');
+            return BABYLON;
+        })();
+    }
+    scene;
+    engine;
+    sceneCreated = noop;
+    update = noop;
+    _update = () => {
+        if (this.scene) {
+            if (this.update !== undefined) {
+                this.update(this, this.BABYLON);
+            }
+            if (this.scene.activeCamera !== undefined) {
+                this.scene.render();
+            }
+        }
+    };
+    onResize() {
+        if (this.engine) {
+            this.engine.resize();
+        }
+    }
+    loadScene = async (path, file, processCallback) => {
+        const { BABYLON } = await scriptTag('https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js', 'BABYLON');
+        BABYLON.SceneLoader.Append(path, file, this.scene, processCallback);
+    };
+    loadUI = async (options) => {
+        const { BABYLON } = await scriptTag('https://cdn.babylonjs.com/gui/babylon.gui.min.js', 'BABYLON');
+        const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('GUI', true, this.scene);
+        const { snippetId, jsonUrl, data, size } = options;
+        if (size) {
+            advancedTexture.idealWidth = size;
+            advancedTexture.renderAtIdealSize = true;
+        }
+        // edit or create your own snippet here
+        // https://gui.babylonjs.com/
+        let gui;
+        if (snippetId) {
+            gui = await advancedTexture.parseFromSnippetAsync(snippetId);
+        }
+        else if (jsonUrl) {
+            gui = await advancedTexture.parseFromURLAsync(jsonUrl);
+        }
+        else if (data) {
+            gui = advancedTexture.parseContent(data);
+        }
+        else {
+            return null;
+        }
+        const root = advancedTexture.getChildren()[0];
+        const widgets = root.children.reduce((map, widget) => {
+            map[widget.name] = widget;
+            return map;
+        }, {});
+        return { advancedTexture, gui, root, widgets };
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        const { canvas } = this.parts;
+        this.babylonReady.then(async (BABYLON) => {
+            this.BABYLON = BABYLON;
+            this.engine = new BABYLON.Engine(canvas, true);
+            this.scene = new BABYLON.Scene(this.engine);
+            if (this.sceneCreated) {
+                await this.sceneCreated(this, BABYLON);
+            }
+            if (this.scene.activeCamera === undefined) {
+                const camera = new BABYLON.ArcRotateCamera('default-camera', -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
+                camera.attachControl(this.parts.canvas, true);
+            }
+            this.engine.runRenderLoop(this._update);
+        });
+    }
+}
+export const b3d = B3d.elementCreator();

package/dist/bodymovin-player.d.ts

@@ -9,6 +9,7 @@ export interface LottieConfig {
     [key: string]: any;
 }
 export declare class BodymovinPlayer extends WebComponent {
+    static preferredTagName: string;
     static initAttributes: {
         src: string;
         json: string;
@@ -17,7 +18,7 @@ export declare class BodymovinPlayer extends WebComponent {
     config: LottieConfig;
     static bodymovinAvailable?: Promise<any>;
     animation: any;
-    static styleSpec: {
+    static shadowStyleSpec: {
         ':host': {
             width: number;
             height: number;

package/dist/bodymovin-player.js

@@ -0,0 +1,172 @@
+/*#
+# lottie / bodymovin
+
+A [lottie](https://airbnb.io/lottie/#/web) (a.k.a. **bodymovin**) player.
+
+It's designed to work like an `<img>` element (just set its `src` attribute).
+
+```js
+import { icons, popFloat, tosiSelect } from 'tosijs-ui'
+import { div, label, input, select, option, span } from 'tosijs'.elements
+
+const tosiPlatform = preview.querySelector('tosi-lottie')
+setTimeout(
+  () => {
+ preview.append(
+   popFloat({
+     draggable: true,
+     content: [
+       { class: 'panel' },
+       div({ class: 'panel-header' }, 'Player Controls' ),
+       label(
+         { class: 'no-drag' },
+         'speed',
+         input({ type: 'range', min: -1, max: 1, step: 0.1, value: 0, onInput(event) {
+           const speed = Math.pow(5, Number(event.target.value))
+           tosiPlatform.animation.setSpeed(speed)
+           event.target.nextSibling.textContent = (speed * 100).toFixed(0) + '%'
+         } }),
+         span('100%', {style: { textAlign: 'right', width: '40px'}})
+       ),
+       label(
+         { class: 'no-drag' },
+         'direction',
+         tosiSelect({
+           value: '1',
+           options: [
+             { caption: 'Forward', value: '1' },
+             { caption: 'Backward', value: '-1' }
+           ],
+           onChange(event) {
+             tosiPlatform.animation.setDirection(event.target.value)
+           }
+         })
+       )
+     ],
+     target: tosiPlatform,
+     position: 's'
+   })
+ )
+  },
+  500
+)
+```
+```html
+<tosi-lottie
+  style="width: 200px; height: 200px;"
+  src="/tosi-platform.json"
+></tosi-lottie>
+<div class="caption">
+  Animation created by <a target="_blank" href="https://pro.fiverr.com/freelancers/anicoremotion">@anicoremotion</a>
+</div>
+```
+```css
+.preview {
+  padding: var(--spacing);
+  text-align: center;
+}
+
+.preview .panel {
+  padding: 10px;
+  border-radius: 5px;
+  gap: 5px;
+  background: var(--background);
+  box-shadow: var(--menu-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.preview .caption {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+}
+
+.preview .panel-header {
+  margin: 0;
+  text-align: center;
+  font-weight: bold;
+  background: var(--brand-color);
+  color: white;
+  padding: 5px;
+  margin: -10px -10px 0 -10px;
+  cursor: move;
+}
+```
+
+You can also directly set its `json` property to the content of a `lottie.json` file.
+
+And of course just access the element's `animation` property to [use the bodymovin API](https://airbnb.io/lottie/#/web).
+
+Also see the [documentation for advanced interactions](https://lottiefiles.github.io/lottie-docs/advanced_interactions/)
+*/
+import { Component as WebComponent } from 'tosijs';
+import { scriptTag } from './via-tag';
+export class BodymovinPlayer extends WebComponent {
+    static preferredTagName = 'tosi-lottie';
+    static initAttributes = {
+        src: '',
+        json: '',
+    };
+    content = null;
+    config = {
+        renderer: 'svg',
+        loop: true,
+        autoplay: true,
+    };
+    static bodymovinAvailable;
+    animation;
+    static shadowStyleSpec = {
+        ':host': {
+            width: 400,
+            height: 400,
+            display: 'inline-block',
+        },
+    };
+    _loading = false;
+    get loading() {
+        return this._loading;
+    }
+    constructor() {
+        super();
+        if (BodymovinPlayer.bodymovinAvailable === undefined) {
+            BodymovinPlayer.bodymovinAvailable = scriptTag('https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js', 'bodymovin');
+        }
+    }
+    doneLoading = () => {
+        this._loading = false;
+    };
+    load = ({ bodymovin }) => {
+        this._loading = true;
+        this.config.container =
+            this.shadowRoot !== null ? this.shadowRoot : undefined;
+        if (this.json !== '') {
+            this.config.animationData = this.json;
+            delete this.config.path;
+        }
+        else if (this.src !== '') {
+            delete this.config.animationData;
+            this.config.path = this.src;
+        }
+        else {
+            console.log('%c<tosi-lottie>%c expected either %cjson%c (animation data) or %csrc% c(url) but found neither.', 'color: #44f; background: #fff; padding: 0 5px', 'color: default', 'color: #44f; background: #fff; padding: 0 5px', 'color: default', 'color: #44f; background: #fff; padding: 0 5px', 'color: default');
+        }
+        if (this.animation) {
+            this.animation.destroy();
+            const root = this.shadowRoot;
+            if (root !== null) {
+                root.querySelector('svg')?.remove();
+            }
+        }
+        this.animation = bodymovin.loadAnimation(this.config);
+        this.animation.addEventListener('DOMLoaded', this.doneLoading);
+    };
+    render() {
+        super.render();
+        BodymovinPlayer.bodymovinAvailable.then(this.load).catch((e) => {
+            console.error(e);
+        });
+    }
+}
+export const bodymovinPlayer = BodymovinPlayer.elementCreator();

package/dist/bp-loader.js

@@ -0,0 +1,26 @@
+export {};
+/*#
+# blueprint loading
+
+<center>
+  <tosi-icon icon="blueprint" class="logo" size=256></tosi-icon>
+</center>
+
+`<xin-loader>` and `<xin-blueprint>` are simple elements provided by `tosijs` for the dynamic loading
+of component **blueprints**.
+
+```html
+<xin-loader>
+  <xin-blueprint tag="swiss-clock" src="https://tonioloewald.github.io/xin-clock/dist/blueprint.js"></xin-blueprint>
+</xin-loader>
+<swiss-clock></swiss-clock>
+```
+
+## Attributes
+
+- `blueprint` is the url of the `blueprint` javascript module (required)
+- `tag` is the tagName you wish to use. If the name of the blueprint is
+  hyphenated, then that will be used by default
+- `property` if the blueprint module exports the blueprint function as
+  a property, you can specify the property here.
+*/

package/dist/carousel.d.ts

@@ -1,5 +1,6 @@
 import { Component as WebComponent, ElementCreator } from 'tosijs';
 export declare class TosiCarousel extends WebComponent {
+    static preferredTagName: string;
     static initAttributes: {
         dots: boolean;
         arrows: boolean;
@@ -17,12 +18,26 @@ export declare class TosiCarousel extends WebComponent {
     set page(p: number);
     get visibleItems(): HTMLElement[];
     get lastPage(): number;
-    static styleSpec: {
+    static shadowStyleSpec: {
         ':host': {
+            _carouselIconSize: number;
+            _carouselButtonColor: string;
+            _carouselButtonHoverColor: string;
+            _carouselButtonActiveColor: string;
+            _carouseButtonWidth: number;
+            _carouselDotCurrentColor: string;
+            _carouselDotSize: number;
+            _carouselDotSpacing: string;
+            _carouselProgressPadding: number;
+            _carouselDotTransition: string;
             display: string;
             flexDirection: string;
             position: string;
         };
+        ':host:focus': {
+            outline: string;
+            boxShadow: string;
+        };
         ':host svg': {
             height: string;
         };
@@ -112,6 +127,8 @@ export declare class TosiCarousel extends WebComponent {
     render(): void;
 }
 /** @deprecated Use TosiCarousel instead */
+export type XinCarousel = TosiCarousel;
+/** @deprecated Use TosiCarousel instead */
 export declare const XinCarousel: typeof TosiCarousel;
 export declare const tosiCarousel: ElementCreator<TosiCarousel>;
 /** @deprecated Use tosiCarousel instead */