tosijs-ui 1.0.0

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
+const { xinProxy } = xinjs
+const { icons, popFloat } = xinjsui
+const { div, label, input, select, option, span } = xinjs.elements
+
+const rocket = preview.querySelector('xin-lottie')
+setTimeout(
+  () => {
+ preview.append(
+   popFloat({
+     content: [
+       { class: 'panel', drag: true },
+       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))
+           rocket.animation.setSpeed(speed)
+           event.target.nextSibling.textContent = (speed * 100).toFixed(0) + '%'
+         } }),
+         span('100%', {style: { textAlign: 'right', width: '40px'}})
+       ),
+       label(
+         { class: 'no-drag' },
+         'direction',
+         select(
+           option('Forwards', {value: 1, selected: true}),
+           option('Backwards', {value: -1}),
+           {
+             onChange(event) {
+               rocket.animation.setDirection(event.target.value)
+             }
+           }
+         ),
+         icons.chevronDown(),
+       )
+     ],
+     target: rocket,
+     position: 's'
+   })
+ )
+  },
+  500
+)
+```
+```html
+<xin-lottie
+  style="height: 100%; max-width: 100%"
+  src="88140-rocket-livetrade.json"
+></xin-lottie>
+<div class="caption">
+  Animation by <a target="_blank" href="https://lottiefiles.com/dvskjbicfc">chiến lê hồng</a>
+</div>
+```
+```css
+.preview {
+  padding: var(--spacing);
+  text-align: center;
+}
+
+.preview .panel {
+  padding: 10px;
+  border-radius: 5px;
+  gap: 5px;
+  background: white;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+  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 'xinjs';
+import { scriptTag } from './via-tag';
+export class BodymovinPlayer extends WebComponent {
+    content = null;
+    src = '';
+    json = '';
+    config = {
+        renderer: 'svg',
+        loop: true,
+        autoplay: true,
+    };
+    static bodymovinAvailable;
+    animation;
+    static styleSpec = {
+        ':host': {
+            width: 400,
+            height: 400,
+            display: 'inline-block',
+        },
+    };
+    _loading = false;
+    get loading() {
+        return this._loading;
+    }
+    constructor() {
+        super();
+        this.initAttributes('src', 'json');
+        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<xin-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({
+    tag: 'xin-lottie',
+});

package/dist/bp-loader.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bp-loader.js

@@ -0,0 +1,26 @@
+export {};
+/*#
+# blueprint loading
+
+<center>
+  <xin-icon icon="blueprint" class="logo" size=256></xin-icon>
+</center>
+
+`<xin-loader>` and `<xin-blueprint>` are simple elements provided by `xinjs` 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

@@ -0,0 +1,113 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+export declare class XinCarousel extends WebComponent {
+    arrows: boolean;
+    dots: boolean;
+    loop: boolean;
+    maxVisibleItems: number;
+    snapDelay: number;
+    snapDuration: number;
+    auto: number;
+    private lastAutoAdvance;
+    private interval?;
+    private autoAdvance;
+    private _page;
+    get page(): number;
+    set page(p: number);
+    get visibleItems(): HTMLElement[];
+    get lastPage(): number;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            flexDirection: string;
+            position: string;
+        };
+        ':host svg': {
+            height: string;
+        };
+        ':host button': {
+            outline: string;
+            border: string;
+            boxShadow: string;
+            background: string;
+            color: string;
+            padding: number;
+        };
+        ':host::part(back), :host::part(forward)': {
+            position: string;
+            top: number;
+            bottom: number;
+            width: string;
+            zIndex: number;
+        };
+        ':host::part(back)': {
+            left: number;
+        };
+        ':host::part(forward)': {
+            right: number;
+        };
+        ':host button:disabled': {
+            opacity: number;
+            pointerEvents: string;
+        };
+        ':host button:hover': {
+            color: string;
+        };
+        ':host button:active': {
+            color: string;
+        };
+        ':host::part(pager)': {
+            position: string;
+        };
+        ':host::part(scroller)': {
+            overflow: string;
+            position: string;
+        };
+        ':host::part(grid)': {
+            display: string;
+            justifyItems: string;
+        };
+        ':host *::-webkit-scrollbar, *::-webkit-scrollbar-thumb': {
+            display: string;
+        };
+        ':host .dot': {
+            background: string;
+            borderRadius: string;
+            height: string;
+            width: string;
+            transition: string;
+        };
+        ':host .dot:not(.current):hover': {
+            background: string;
+            height: string;
+            width: string;
+            margin: string;
+        };
+        ':host .dot:not(.current):active': {
+            background: string;
+        };
+        ':host .dot.current': {
+            background: string;
+        };
+        ':host::part(progress)': {
+            display: string;
+            gap: string;
+            justifyContent: string;
+            padding: string;
+        };
+    };
+    easing: (t: number) => number;
+    indicateCurrent: () => void;
+    snapPosition: () => void;
+    back: () => void;
+    forward: () => void;
+    handleDotClick: (event: Event) => void;
+    private snapTimer;
+    private animationFrame;
+    animateScroll(position: number, startingPosition?: number, timestamp?: number): void;
+    content: () => HTMLDivElement[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): void;
+}
+export declare const xinCarousel: ElementCreator<XinCarousel>;

package/dist/carousel.js

@@ -0,0 +1,308 @@
+/*#
+# carousel
+
+```html
+<xin-carousel arrows dots max-visible-items=2 auto=2 snap-delay=4 snap-duration=0.5 loop>
+  <xin-icon icon="tosiFavicon" class="thing"></xin-icon>
+  <xin-icon icon="tosi" class="thing"></xin-icon>
+  <xin-icon icon="tosiUi" class="thing"></xin-icon>
+  <xin-icon icon="tosiPlatform" class="thing"></xin-icon>
+  <xin-icon icon="tosiXr" class="thing"></xin-icon>
+  <xin-icon icon="blueprint" class="thing"></xin-icon>
+  <xin-icon icon="cmy" class="thing"></xin-icon>
+  <xin-icon icon="rgb" class="thing"></xin-icon>
+</xin-carousel>
+```
+```css
+.thing {
+  --xin-icon-size: 160px;
+  height: 160px;
+  margin: 30px 0 70px;
+  position: relative;
+}
+
+.thing::after {
+  content: attr(icon);
+  color: white;
+  position: absolute;
+  bottom: -50px;
+  left: 50%;
+  padding: 5px 15px;
+  transform: translateX(-50%);
+  filter: drop-shadow(0 1px 1px #0008);
+  background: #0004;
+  border-radius: 5px;
+}
+
+.preview xin-carousel {
+  margin: 10px;
+}
+```
+
+This is a minimalist carousel component that supports the usual stuff.
+
+## Attributes
+
+- `arrows` (boolean, false by default) shows/hides the arrow paging controls
+- `dots` (boolean, false by default) shows/hides the dot progress indicators
+- `max-visible-items` (number, 1 by default) determines how many items are shown at once.
+- `snap-duration` (number, 0.25 [seconds] by default) determines the time taken to scroll / snap scroll.
+- `snap-delay` (number, 0.1 [seconds] by default)
+- `loop` (boolean, false by default) causes next/previous buttons to loop
+- `auto` (number, 0 [seconds] by default) if > 0, automatically advances after that many seconds (always loops!)
+
+<xin-css-var-editor element-selector="xin-carousel"></xin-css-var-editor>
+*/
+import { Component as WebComponent, elements, vars, } from 'xinjs';
+import { icons } from './icons';
+const { button, slot, div } = elements;
+export class XinCarousel extends WebComponent {
+    arrows = false;
+    dots = false;
+    loop = false;
+    maxVisibleItems = 1;
+    snapDelay = 0.1;
+    snapDuration = 0.25;
+    auto = 0;
+    lastAutoAdvance = Date.now();
+    interval;
+    autoAdvance = () => {
+        if (this.auto > 0 && this.auto * 1000 < Date.now() - this.lastAutoAdvance) {
+            this.forward();
+        }
+    };
+    _page = 0;
+    get page() {
+        return this._page;
+    }
+    set page(p) {
+        const { scroller, back, forward } = this.parts;
+        if (this.lastPage <= 0) {
+            forward.disabled = back.disabled = true;
+            p = 0;
+        }
+        else {
+            p = Math.max(0, Math.min(this.lastPage, p));
+            p = isNaN(p) ? 0 : p;
+        }
+        if (this._page !== p) {
+            this._page = isNaN(p) ? 0 : p;
+            this.animateScroll(this._page * scroller.offsetWidth);
+            back.disabled = this.page <= 0 && !this.loop;
+            forward.disabled = this.page >= this.lastPage && !this.loop;
+        }
+    }
+    get visibleItems() {
+        return [...this.children].filter((element) => getComputedStyle(element).display !== 'none');
+    }
+    get lastPage() {
+        return Math.max(Math.ceil(this.visibleItems.length / (this.maxVisibleItems || 1)) - 1, 0);
+    }
+    static styleSpec = {
+        ':host': {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+        },
+        ':host svg': {
+            height: vars.carouselIconSize,
+        },
+        ':host button': {
+            outline: 'none',
+            border: 'none',
+            boxShadow: 'none',
+            background: 'transparent',
+            color: vars.carouselButtonColor,
+            padding: 0,
+        },
+        ':host::part(back), :host::part(forward)': {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            width: vars.carouseButtonWidth,
+            zIndex: 2,
+        },
+        ':host::part(back)': {
+            left: 0,
+        },
+        ':host::part(forward)': {
+            right: 0,
+        },
+        ':host button:disabled': {
+            opacity: 0.5,
+            pointerEvents: 'none',
+        },
+        ':host button:hover': {
+            color: vars.carouselButtonHoverColor,
+        },
+        ':host button:active': {
+            color: vars.carouselButtonActiveColor,
+        },
+        ':host::part(pager)': {
+            position: 'relative',
+        },
+        ':host::part(scroller)': {
+            overflow: 'auto hidden',
+            position: 'relative',
+        },
+        ':host::part(grid)': {
+            display: 'grid',
+            justifyItems: 'center',
+        },
+        ':host *::-webkit-scrollbar, *::-webkit-scrollbar-thumb': {
+            display: 'none',
+        },
+        ':host .dot': {
+            background: vars.carouselButtonColor,
+            borderRadius: vars.carouselDotSize,
+            height: vars.carouselDotSize,
+            width: vars.carouselDotSize,
+            transition: vars.carouselDotTransition,
+        },
+        ':host .dot:not(.current):hover': {
+            background: vars.carouselButtonHoverColor,
+            height: vars.carouselDotSize150,
+            width: vars.carouselDotSize150,
+            margin: vars.carouselDotSize_25,
+        },
+        ':host .dot:not(.current):active': {
+            background: vars.carouselButtonActiveColor,
+        },
+        ':host .dot.current': {
+            background: vars.carouselDotCurrentColor,
+        },
+        ':host::part(progress)': {
+            display: 'flex',
+            gap: vars.carouselDotSpacing,
+            justifyContent: 'center',
+            padding: vars.carouselProgressPadding,
+        },
+    };
+    easing = (t) => {
+        return Math.sin(t * Math.PI * 0.5);
+    };
+    indicateCurrent = () => {
+        const { scroller, progress } = this.parts;
+        const page = scroller.scrollLeft / scroller.offsetWidth;
+        [...progress.children].forEach((dot, index) => {
+            dot.classList.toggle('current', Math.floor(index / this.maxVisibleItems - page) === 0);
+        });
+        this.lastAutoAdvance = Date.now();
+        clearTimeout(this.snapTimer);
+        this.snapTimer = setTimeout(this.snapPosition, this.snapDelay * 1000);
+    };
+    snapPosition = () => {
+        const { scroller } = this.parts;
+        const currentPosition = Math.round(scroller.scrollLeft / scroller.offsetWidth);
+        if (currentPosition !== this.page) {
+            this.page =
+                currentPosition > this.page
+                    ? Math.ceil(currentPosition)
+                    : Math.floor(currentPosition);
+        }
+        this.lastAutoAdvance = Date.now();
+    };
+    back = () => {
+        this.page = this.page > 0 ? this.page - 1 : this.lastPage;
+    };
+    forward = () => {
+        this.page = this.page < this.lastPage ? this.page + 1 : 0;
+    };
+    handleDotClick = (event) => {
+        const { progress } = this.parts;
+        const index = [...progress.children].indexOf(event.target);
+        if (index > -1) {
+            this.page = Math.floor(index / this.maxVisibleItems);
+        }
+    };
+    snapTimer;
+    animationFrame;
+    animateScroll(position, startingPosition = -1, timestamp = 0) {
+        cancelAnimationFrame(this.animationFrame);
+        const { scroller } = this.parts;
+        if (startingPosition === -1) {
+            startingPosition = scroller.scrollLeft;
+            timestamp = Date.now();
+            this.animationFrame = requestAnimationFrame(() => {
+                this.animateScroll(position, startingPosition, timestamp);
+            });
+            return;
+        }
+        const elapsed = (Date.now() - timestamp) / 1000;
+        if (elapsed >= this.snapDuration ||
+            Math.abs(scroller.scrollLeft - position) < 2) {
+            scroller.scrollLeft = position;
+            this.animationFrame = null;
+        }
+        else {
+            scroller.scrollLeft =
+                startingPosition +
+                    this.easing(elapsed / this.snapDuration) * (position - startingPosition);
+            this.animationFrame = requestAnimationFrame(() => {
+                this.animateScroll(position, startingPosition, timestamp);
+            });
+        }
+    }
+    content = () => [
+        div({ part: 'pager' }, button({ title: 'previous slide', part: 'back' }, icons.chevronLeft()), div({ title: 'slides', role: 'group', part: 'scroller' }, div({ part: 'grid' }, slot())), button({ title: 'next slide', part: 'forward' }, icons.chevronRight())),
+        div({ title: 'choose slide to display', role: 'group', part: 'progress' }),
+    ];
+    constructor() {
+        super();
+        this.initAttributes('dots', 'arrows', 'maxVisibleItems', 'snapDuration', 'loop', 'auto');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ariaRoleDescription = 'carousel';
+        this.ariaOrientation = 'horizontal';
+        this.ariaReadOnly = 'true';
+        const { back, forward, scroller, progress } = this.parts;
+        back.addEventListener('click', this.back);
+        forward.addEventListener('click', this.forward);
+        scroller.addEventListener('scroll', this.indicateCurrent);
+        progress.addEventListener('click', this.handleDotClick);
+        this.lastAutoAdvance = Date.now();
+        this.interval = setInterval(this.autoAdvance, 100);
+    }
+    disconnectedCallback() {
+        clearInterval(this.interval);
+    }
+    render() {
+        super.render();
+        const { dots, arrows, visibleItems, lastPage } = this;
+        const { progress, back, forward, grid } = this.parts;
+        visibleItems.forEach((item) => {
+            item.role = 'group';
+        });
+        grid.style.gridTemplateColumns = `${100 / this.maxVisibleItems / (1 + this.lastPage)}% `
+            .repeat(visibleItems.length)
+            .trim();
+        grid.style.width = (1 + this.lastPage) * 100 + '%';
+        progress.textContent = '';
+        progress.append(...visibleItems.map((_, index) => button({ title: `item ${index + 1}`, class: 'dot' })));
+        this.indicateCurrent();
+        progress.style.display = dots && lastPage > 0 ? '' : 'none';
+        back.hidden = forward.hidden = !(arrows && lastPage > 0);
+    }
+}
+export const xinCarousel = XinCarousel.elementCreator({
+    tag: 'xin-carousel',
+    styleSpec: {
+        ':host': {
+            _carouselIconSize: 24,
+            _carouselButtonColor: '#0004',
+            _carouselButtonHoverColor: '#0006',
+            _carouselButtonActiveColor: '#000c',
+            _carouseButtonWidth: 48,
+            _carouselDotCurrentColor: '#0008',
+            _carouselDotSize: 8,
+            _carouselDotSpacing: vars.carouselDotSize,
+            _carouselProgressPadding: 12,
+            _carouselDotTransition: '0.125s ease-in-out',
+        },
+        ':host:focus': {
+            outline: 'none',
+            boxShadow: 'none',
+        },
+    },
+});

package/dist/code-editor.d.ts

@@ -0,0 +1,27 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+export declare class CodeEditor extends WebComponent {
+    private source;
+    get value(): string;
+    set value(text: string);
+    mode: string;
+    disabled: boolean;
+    role: string;
+    get editor(): any;
+    private _editor;
+    private _editorPromise;
+    options: any;
+    theme: string;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            position: string;
+            width: string;
+            height: string;
+        };
+    };
+    constructor();
+    onResize(): void;
+    connectedCallback(): void;
+    render(): void;
+}
+export declare const codeEditor: ElementCreator<CodeEditor>;