@api-client/ui 0.0.1

package/dist/ui/tabs/UiTabs.js

@@ -0,0 +1,454 @@
+import { __decorate } from "tslib";
+/* eslint-disable import/no-cycle */
+/* eslint-disable no-param-reassign */
+import { html, LitElement, nothing } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { Easing } from "../motion/animation.js";
+import '../../define/ui/ui-icon-button.js';
+import '../../define/ui/ui-divider.js';
+import '../../define/ui/ui-icon.js';
+/**
+ * Calculates value in percentages
+ * @param w Element width
+ * @param w0 Parent width
+ * @return The percentage of element's width relative to parent.
+ */
+export function calcPercent(w, w0) {
+    return (100 * w) / w0;
+}
+/**
+ * A container for tabs.
+ *
+ * @fires select - A non bubbling event when selection change through user interaction. The `event.detail` object contains the `item` and `index` properties. It also has the `select` property with the value of the `selectedAttribute` on the tab.
+ */
+export default class UiTabs extends LitElement {
+    items = [];
+    activeItem = null;
+    assignedElements;
+    pointer;
+    content;
+    /**
+     * The priority of the tabs.
+     *
+     * @default primary
+     * @attribute
+     */
+    priority = 'primary';
+    /**
+     * If true, tabs are scrollable and the tab width is based on the label width.
+     * @attribute
+     */
+    scrollable;
+    /**
+     * The value of the selected tab.
+     * This is matched with the `aria-controls` of the tab.
+     * @attribute
+     */
+    selected;
+    /**
+     * The attribute on the `ui-tab` that indicates which value for `selected`
+     * corresponds to which tab.
+     *
+     * @default aria-controls
+     * @attribute
+     */
+    selectedAttribute = `aria-controls`;
+    pointerStyles;
+    contentScroll;
+    indicated = false;
+    // constructor() {
+    //   super();
+    //   // this.addEventListener('keydown', this.handleKeydown.bind(this));
+    //   // this.addEventListener('click', this.handleClick.bind(this));
+    // }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'tablist');
+        }
+    }
+    async updateItems() {
+        const elements = this.assignedElements || [];
+        const items = elements.filter(this.isTabItem, this);
+        this.items = items;
+        if (this.activeItem && !items.includes(this.activeItem)) {
+            this.activeItem = null;
+        }
+        await this.updateComplete;
+        this.ensureSelection();
+    }
+    /**
+     * @return Whether the given element is a list item element.
+     */
+    isTabItem(element) {
+        if (element.nodeType !== Node.ELEMENT_NODE) {
+            return false;
+        }
+        return element.localName === 'ui-tab';
+    }
+    isSelectable(element) {
+        if (element.disabled) {
+            return false;
+        }
+        if (element.hidden && element.hasAttribute('hidden')) {
+            return false;
+        }
+        return true;
+    }
+    ensureSelection() {
+        const { selected, selectedAttribute, activeItem, items } = this;
+        if (!selectedAttribute) {
+            return;
+        }
+        const item = items.find(i => i.getAttribute(selectedAttribute) === selected);
+        if (item && item === activeItem) {
+            return;
+        }
+        this.makeSelection(item);
+    }
+    makeSelection(tab, focus = false) {
+        const { activeItem } = this;
+        if (activeItem === tab) {
+            tab.highlight();
+            return;
+        }
+        if (activeItem) {
+            this.deselectItem(activeItem);
+        }
+        if (tab) {
+            this.selectItem(tab, focus);
+            this.positionPointer(tab, activeItem);
+            if (this.activeItem) {
+                // we set this here so we won't notify selection when initializing.
+                this.notifySelect(tab);
+            }
+        }
+    }
+    notifySelect(item) {
+        const index = this.items.indexOf(item);
+        if (index === -1) {
+            return;
+        }
+        const attrValue = item.getAttribute(this.selectedAttribute);
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: {
+                item,
+                index,
+                select: attrValue,
+            }
+        }));
+    }
+    selectItem(tab, focus = false) {
+        if (this.activeItem === tab) {
+            return;
+        }
+        if (this.hasAttribute('tabindex')) {
+            this.removeAttribute('tabindex');
+        }
+        tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute('tabindex', '0');
+        tab.selected = true;
+        this.activeItem = tab;
+        tab.priority = this.priority;
+        tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' });
+        if (focus) {
+            tab.focus();
+        }
+    }
+    deselectItem(tab) {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        tab.selected = false;
+        tab.indicated = false;
+    }
+    async positionPointer(tab, old) {
+        const { items, pointer } = this;
+        const index = items.indexOf(tab);
+        if (index < 0 || !pointer) {
+            this.pointerStyles = undefined;
+            return;
+        }
+        if (!old) {
+            // no start animation, just show indicator.
+            tab.indicated = true;
+            return;
+        }
+        // first position this indicator in the place of the old one.
+        // update the view and then run the animation.
+        this.indicated = true;
+        const isPrimary = this.priority === 'primary';
+        const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old);
+        this.pointerStyles = { left };
+        await this.updateComplete;
+        const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);
+        const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final);
+        if (this.moveAnimation) {
+            this.moveAnimation.cancel();
+        }
+        const moveAnimation = pointer.animate(frames, {
+            duration: 360,
+            iterations: 1,
+            easing: Easing.DECELERATION,
+        });
+        const finalStyles = {
+            left: `${final}px`,
+        };
+        moveAnimation.addEventListener('finish', () => {
+            this.pointerStyles = finalStyles;
+            this.moveAnimation = undefined;
+            tab.indicated = true;
+            this.indicated = false;
+        });
+        moveAnimation.addEventListener('cancel', () => {
+            this.pointerStyles = finalStyles;
+        });
+        this.moveAnimation = moveAnimation;
+    }
+    moveAnimation;
+    getPrimaryLeft(tab) {
+        const contentBox = this.content.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        const leftFromParent = tabRect.x - contentBox.x;
+        const offset = this.scrollable ? 48 : 0; // left button
+        const left = leftFromParent + (tabRect.width / 2) - 20 + offset;
+        return `${left}px`;
+    }
+    getSecondaryLeft(tab) {
+        const contentBox = this.content.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        const offset = this.scrollable ? 48 : 0; // left button
+        const leftFromParent = tabRect.x - contentBox.x + offset;
+        return `${leftFromParent}px`;
+    }
+    getPrimaryKeyframes(start, final) {
+        return [
+            {
+                left: start,
+                width: `40px`,
+            },
+            {
+                width: `80px`,
+            },
+            {
+                left: final,
+                width: `40px`,
+            }
+        ];
+    }
+    getSecondaryKeyframes(start, final) {
+        return [
+            {
+                left: start,
+            },
+            {
+                left: final,
+            }
+        ];
+    }
+    contentClickHandler(e) {
+        this.activateFromEvent(e);
+    }
+    contentKeyDownHandler(e) {
+        if (['Enter', 'Space'].includes(e.code)) {
+            this.activateFromEvent(e);
+        }
+    }
+    activateFromEvent(e) {
+        const { items } = this;
+        const path = e.composedPath();
+        let item;
+        while (!item) {
+            const next = path.shift();
+            if (!next) {
+                break;
+            }
+            if (items.includes(next)) {
+                item = next;
+            }
+        }
+        if (!item) {
+            return;
+        }
+        this.makeSelection(item, true);
+    }
+    handleScrollLeft() {
+        const { contentScroll = 0, content } = this;
+        if (contentScroll === 0) {
+            return;
+        }
+        let left = contentScroll - 80;
+        if (left < 0) {
+            left = 0;
+        }
+        this.contentScroll = left;
+        content.scrollTo({
+            behavior: 'smooth',
+            left,
+        });
+    }
+    handleScrollRight() {
+        const { contentScroll = 0, content } = this;
+        let left = contentScroll + 80;
+        if (left + content.clientWidth > content.scrollWidth) {
+            left = content.scrollWidth - content.clientWidth;
+        }
+        this.contentScroll = left;
+        content.scrollTo({
+            behavior: 'smooth',
+            left,
+        });
+    }
+    handleScroll(e) {
+        const div = e.target;
+        this.contentScroll = div.scrollLeft;
+    }
+    handleKeyDown(e) {
+        if (e.code === 'ArrowRight') {
+            e.preventDefault();
+            const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0];
+            this.makeSelection(tab, true);
+        }
+        else if (e.code === 'ArrowLeft') {
+            e.preventDefault();
+            const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0];
+            this.makeSelection(tab, true);
+        }
+    }
+    getPreviousItem(item) {
+        const { items } = this;
+        const curIndex = items.indexOf(item);
+        if (curIndex < 0) {
+            return item;
+        }
+        let i = curIndex;
+        let result;
+        do {
+            i--;
+            if (i === curIndex) {
+                // looped back from the end, no active element to find.
+                return item;
+            }
+            const tmp = items[i];
+            if (!tmp) {
+                i = items.length;
+                continue;
+            }
+            if (this.isSelectable(tmp)) {
+                result = tmp;
+            }
+        } while (!result);
+        return result || item;
+    }
+    getNextItem(item) {
+        const { items } = this;
+        const curIndex = items.indexOf(item);
+        if (curIndex < 0) {
+            return item;
+        }
+        let i = curIndex;
+        let next;
+        do {
+            i++;
+            if (i === curIndex) {
+                // looped back from the start, no active element to find.
+                return item;
+            }
+            const tmp = items[i];
+            if (!tmp) {
+                i = -1;
+                continue;
+            }
+            if (this.isSelectable(tmp)) {
+                next = tmp;
+            }
+        } while (!next);
+        return next || item;
+    }
+    render() {
+        const classes = {
+            surface: true,
+            scrollable: !!this.scrollable,
+        };
+        return html `
+    <div class="${classMap(classes)}">
+      ${this.renderLeftScrollControl()}
+      <div class="content" @scroll="${this.handleScroll}" @keydown="${this.handleKeyDown}">
+        ${this.renderSlot()}
+      </div>
+      ${this.rightScrollControl()}
+      ${this.renderIndicator()}
+      <div class="divider"></div>
+    </div>
+    `;
+    }
+    renderSlot() {
+        return html `<slot 
+      @slotchange="${this.updateItems}" 
+      @click="${this.contentClickHandler}" 
+      @keydown="${this.contentKeyDownHandler}"></slot>`;
+    }
+    renderIndicator() {
+        const classes = {
+            indicator: true,
+            indicated: this.indicated,
+            primary: this.priority === 'primary',
+            secondary: this.priority === 'secondary',
+        };
+        return html `
+    <div class="${classMap(classes)}">
+      <span role="presentation" class="pointer" style="${styleMap(this.pointerStyles || {})}"></span>
+    </div>
+    `;
+    }
+    renderLeftScrollControl() {
+        if (!this.scrollable) {
+            return nothing;
+        }
+        return html `
+    <div class="scroll-control left">
+      <ui-icon-button aria-label="Scroll tabs left" title="Scroll tabs left" @click="${this.handleScrollLeft}">
+        <ui-icon icon="chevronLeft"></ui-icon>
+      </ui-icon-button>
+    </div>`;
+    }
+    rightScrollControl() {
+        if (!this.scrollable) {
+            return nothing;
+        }
+        return html `<div class="scroll-control right">
+      <ui-icon-button aria-label="Scroll tabs right" title="Scroll tabs right" @click="${this.handleScrollRight}">
+        <ui-icon icon="chevronRight"></ui-icon>
+      </ui-icon-button>
+    </div>`;
+    }
+}
+__decorate([
+    queryAssignedElements({ flatten: true })
+], UiTabs.prototype, "assignedElements", void 0);
+__decorate([
+    query('.pointer')
+], UiTabs.prototype, "pointer", void 0);
+__decorate([
+    query('.content')
+], UiTabs.prototype, "content", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], UiTabs.prototype, "priority", void 0);
+__decorate([
+    property({ type: Boolean })
+], UiTabs.prototype, "scrollable", void 0);
+__decorate([
+    property({ type: String })
+], UiTabs.prototype, "selected", void 0);
+__decorate([
+    property({ type: String })
+], UiTabs.prototype, "selectedAttribute", void 0);
+__decorate([
+    state()
+], UiTabs.prototype, "pointerStyles", void 0);
+__decorate([
+    state()
+], UiTabs.prototype, "indicated", void 0);
+//# sourceMappingURL=UiTabs.js.map

package/dist/ui/tabs/UiTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiTabs.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTabs.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-cycle */\n/* eslint-disable no-param-reassign */\nimport { html, LitElement, nothing, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { Easing } from \"../motion/animation.js\";\nimport UiTab from \"./UiTab.js\";\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-divider.js';\nimport '../../define/ui/ui-icon.js';\n\nexport type TabsPriority = 'primary' | 'secondary';\n\nexport interface TabSelectionDetail {\n  item: UiTab;\n  index: number;\n  select: string | null;\n}\n\n/**\n * Calculates value in percentages\n * @param w Element width\n * @param w0 Parent width\n * @return The percentage of element's width relative to parent.\n */\nexport function calcPercent(w: number, w0: number): number {\n  return (100 * w) / w0;\n}\n\n/**\n * A container for tabs.\n * \n * @fires select - A non bubbling event when selection change through user interaction. The `event.detail` object contains the `item` and `index` properties. It also has the `select` property with the value of the `selectedAttribute` on the tab.\n */\nexport default class UiTabs extends LitElement {\n  items: UiTab[] = [];\n\n  activeItem: UiTab | null = null;\n\n  @queryAssignedElements({ flatten: true }) protected assignedElements!: HTMLElement[] | null;\n\n  @query('.pointer') protected pointer!: HTMLElement;\n\n  @query('.content') protected content!: HTMLElement;\n\n  /**\n   * The priority of the tabs.\n   * \n   * @default primary\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) priority: TabsPriority = 'primary';\n\n  /**\n   * If true, tabs are scrollable and the tab width is based on the label width.\n   * @attribute\n   */\n  @property({ type: Boolean }) scrollable?: boolean;\n\n  /**\n   * The value of the selected tab.\n   * This is matched with the `aria-controls` of the tab.\n   * @attribute\n   */\n  @property({ type: String }) selected?: string;\n\n  /**\n   * The attribute on the `ui-tab` that indicates which value for `selected` \n   * corresponds to which tab. \n   * \n   * @default aria-controls\n   * @attribute\n   */\n  @property({ type: String }) selectedAttribute = `aria-controls`;\n\n  @state() protected pointerStyles?: StyleInfo;\n\n  protected contentScroll?: number;\n\n  @state() protected indicated = false;\n\n  // constructor() {\n  //   super();\n\n  //   // this.addEventListener('keydown', this.handleKeydown.bind(this));\n  //   // this.addEventListener('click', this.handleClick.bind(this));\n  // }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tablist');\n    }\n  }\n\n  protected async updateItems(): Promise<void> {\n    const elements = this.assignedElements || [];\n    const items = elements.filter(this.isTabItem, this);\n    this.items = items;\n    if (this.activeItem && !items.includes(this.activeItem)) {\n      this.activeItem = null;\n    }\n    await this.updateComplete;\n    this.ensureSelection();\n  }\n\n  /** \n   * @return Whether the given element is a list item element. \n   */\n  protected isTabItem(element: Element): element is UiTab {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false;\n    }\n    return element.localName === 'ui-tab';\n  }\n\n  protected isSelectable(element: UiTab): boolean {\n    if (element.disabled) {\n      return false;\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false;\n    }\n    return true;\n  }\n\n  protected ensureSelection(): void {\n    const { selected, selectedAttribute, activeItem, items } = this;\n    if (!selectedAttribute) {\n      return;\n    }\n    const item = items.find(i => i.getAttribute(selectedAttribute) === selected);\n    if (item && item === activeItem) {\n      return;\n    }\n    this.makeSelection(item);\n  }\n\n  protected makeSelection(tab?: UiTab, focus = false): void {\n    const { activeItem } = this;\n    if (activeItem === tab) {\n      tab.highlight();\n      return;\n    }\n    if (activeItem) {\n      this.deselectItem(activeItem);\n    }\n    if (tab) {\n      this.selectItem(tab, focus);\n      this.positionPointer(tab, activeItem);\n      if (this.activeItem) {\n        // we set this here so we won't notify selection when initializing.\n        this.notifySelect(tab);\n      }\n    }\n  }\n\n  notifySelect(item: UiTab): void {\n    const index = this.items.indexOf(item);\n    if (index === -1) {\n      return;\n    }\n    const attrValue = item.getAttribute(this.selectedAttribute);\n    this.dispatchEvent(new CustomEvent<TabSelectionDetail>('select', {\n      detail: {\n        item,\n        index,\n        select: attrValue,\n      }\n    }));\n  }\n\n  protected selectItem(tab: UiTab, focus = false): void {\n    if (this.activeItem === tab) {\n      return;\n    }\n    if (this.hasAttribute('tabindex')) {\n      this.removeAttribute('tabindex');\n    }\n    tab.setAttribute('aria-selected', 'true');\n    tab.setAttribute('tabindex', '0');\n    tab.selected = true;\n    this.activeItem = tab;\n    tab.priority = this.priority;\n    tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' });\n    if (focus) {\n      tab.focus();\n    }\n  }\n\n  protected deselectItem(tab: UiTab): void {\n    tab.setAttribute('aria-selected', 'false');\n    tab.setAttribute('tabindex', '-1');\n    tab.selected = false;\n    tab.indicated = false;\n  }\n\n  protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {\n    const { items, pointer } = this;\n    const index = items.indexOf(tab);\n    if (index < 0 || !pointer) {\n      this.pointerStyles = undefined;\n      return;\n    }\n\n    if (!old) {\n      // no start animation, just show indicator.\n      tab.indicated = true;\n      return;\n    }\n\n    // first position this indicator in the place of the old one.\n    // update the view and then run the animation.\n    this.indicated = true;\n    const isPrimary = this.priority === 'primary';\n    const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old);\n    this.pointerStyles = { left };\n    await this.updateComplete;\n    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);\n    const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final);\n    \n    if (this.moveAnimation) {\n      this.moveAnimation.cancel();\n    }\n    const moveAnimation = pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.DECELERATION,\n    }\n    );\n    const finalStyles: StyleInfo = {\n      left: `${final}px`,\n    };\n    moveAnimation.addEventListener('finish', () => {\n      this.pointerStyles = finalStyles;\n      this.moveAnimation = undefined;\n      tab.indicated = true;\n      this.indicated = false;\n    });\n    moveAnimation.addEventListener('cancel', () => {\n      this.pointerStyles = finalStyles;\n    });\n    this.moveAnimation = moveAnimation;\n  }\n\n  protected moveAnimation?: Animation;\n\n  protected getPrimaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const leftFromParent = tabRect.x - contentBox.x;\n    const offset = this.scrollable ? 48 : 0; // left button\n    const left = leftFromParent + (tabRect.width / 2) - 20 + offset;\n    return `${left}px`;\n  }\n\n  protected getSecondaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const offset = this.scrollable ? 48 : 0; // left button\n    const leftFromParent = tabRect.x - contentBox.x + offset;\n    return `${leftFromParent}px`;\n  }\n\n  protected getPrimaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        left: final,\n        width: `40px`,\n      }\n    ];\n  }\n\n  protected getSecondaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n      },\n      {\n        left: final,\n      }\n    ];\n  }\n\n  protected contentClickHandler(e: PointerEvent): void {\n    this.activateFromEvent(e);\n  }\n\n  protected contentKeyDownHandler(e: KeyboardEvent): void {\n    if (['Enter', 'Space'].includes(e.code)) {\n      this.activateFromEvent(e);\n    }\n  }\n\n  protected activateFromEvent(e: Event): void {\n    const { items } = this;\n    const path = e.composedPath();\n    let item: UiTab | undefined;\n    while (!item) {\n      const next = path.shift() as UiTab;\n      if (!next) {\n        break;\n      }\n      if (items.includes(next)) {\n        item = next;\n      }\n    }\n    if (!item) {\n      return;\n    }\n    this.makeSelection(item, true);\n  }\n\n  protected handleScrollLeft(): void {\n    const { contentScroll = 0, content } = this;\n    if (contentScroll === 0) {\n      return;\n    }\n    let left = contentScroll - 80;\n    if (left < 0) {\n      left = 0;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScrollRight(): void {\n    const { contentScroll = 0, content } = this;\n    let left = contentScroll + 80;\n    if (left + content.clientWidth > content.scrollWidth) {\n      left = content.scrollWidth - content.clientWidth;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScroll(e: Event): void {\n    const div = e.target as HTMLElement;\n    this.contentScroll = div.scrollLeft;\n  }\n\n  protected handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === 'ArrowRight') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    } else if (e.code === 'ArrowLeft') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    }\n  }\n\n  getPreviousItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let result: HTMLElement | undefined;\n    do {\n      i--;\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = items.length;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp;\n      }\n    } while (!result);\n    return result as UiTab || item;\n  }\n\n  getNextItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let next: HTMLElement | undefined;\n    do {\n      i++;\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = -1;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp;\n      }\n    } while (!next);\n    return next as UiTab || item;\n  }\n\n  override render(): TemplateResult {\n    const classes: ClassInfo = {\n      surface: true,\n      scrollable: !!this.scrollable,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderLeftScrollControl()}\n      <div class=\"content\" @scroll=\"${this.handleScroll}\" @keydown=\"${this.handleKeyDown}\">\n        ${this.renderSlot()}\n      </div>\n      ${this.rightScrollControl()}\n      ${this.renderIndicator()}\n      <div class=\"divider\"></div>\n    </div>\n    `;\n  }\n\n  protected renderSlot(): TemplateResult {\n    return html`<slot \n      @slotchange=\"${this.updateItems}\" \n      @click=\"${this.contentClickHandler}\" \n      @keydown=\"${this.contentKeyDownHandler}\"></slot>`;\n  }\n\n  protected renderIndicator(): TemplateResult {\n    const classes: ClassInfo = {\n      indicator: true,\n      indicated: this.indicated,\n      primary: this.priority === 'primary',\n      secondary: this.priority === 'secondary',\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      <span role=\"presentation\" class=\"pointer\" style=\"${styleMap(this.pointerStyles || {})}\"></span>\n    </div>\n    `;\n  }\n\n  protected renderLeftScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`\n    <div class=\"scroll-control left\">\n      <ui-icon-button aria-label=\"Scroll tabs left\" title=\"Scroll tabs left\" @click=\"${this.handleScrollLeft}\">\n        <ui-icon icon=\"chevronLeft\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n\n  protected rightScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`<div class=\"scroll-control right\">\n      <ui-icon-button aria-label=\"Scroll tabs right\" title=\"Scroll tabs right\" @click=\"${this.handleScrollRight}\">\n        <ui-icon icon=\"chevronRight\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n}\n"]}

package/dist/ui/tabs/UiTabs.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=UiTabs.styles.d.ts.map

package/dist/ui/tabs/UiTabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiTabs.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/tabs/UiTabs.styles.ts"],"names":[],"mappings":";AAEA,wBAmEE"}

package/dist/ui/tabs/UiTabs.styles.js

@@ -0,0 +1,70 @@
+import { css } from 'lit';
+export default css `
+:host {
+  display: block;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  flex: 1 1 0%;
+}
+
+.content ::slotted(*) {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.surface {
+  position: relative;
+  display: flex;
+  align-items: center;
+  /* background-color: var(--md-sys-color-surface); */
+}
+
+.indicator {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  overflow: hidden;
+  display: none;
+}
+
+.indicator.indicated {
+  display: block;
+}
+
+.indicator.primary {
+  height: 3px;
+}
+
+.indicator.secondary {
+  height: 2px;
+}
+
+.pointer {
+  height: inherit;
+  display: inline-block;
+  left: 0;
+  width: 40px;
+  background-color: var(--md-sys-color-primary);
+  position: absolute;
+}
+
+.indicator.primary .pointer {
+  border-radius: 3px 3px 0 0;
+}
+
+.divider {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  margin: 0;
+  height: 1px;
+  background-color: var(--md-sys-color-surface-variant);
+}
+`;
+//# sourceMappingURL=UiTabs.styles.js.map

package/dist/ui/tabs/UiTabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiTabs.styles.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n:host {\n  display: block;\n}\n\n.content {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  flex: 1 1 0%;\n}\n\n.content ::slotted(*) {\n  flex: 1;\n  white-space: nowrap;\n}\n\n.surface {\n  position: relative;\n  display: flex;\n  align-items: center;\n  /* background-color: var(--md-sys-color-surface); */\n}\n\n.indicator {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  overflow: hidden;\n  display: none;\n}\n\n.indicator.indicated {\n  display: block;\n}\n\n.indicator.primary {\n  height: 3px;\n}\n\n.indicator.secondary {\n  height: 2px;\n}\n\n.pointer {\n  height: inherit;\n  display: inline-block;\n  left: 0;\n  width: 40px;\n  background-color: var(--md-sys-color-primary);\n  position: absolute;\n}\n\n.indicator.primary .pointer {\n  border-radius: 3px 3px 0 0;\n}\n\n.divider {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  margin: 0;\n  height: 1px;\n  background-color: var(--md-sys-color-surface-variant);\n}\n`;\n"]}

package/dist/visualization/elements/VizAssociationElement.d.ts

@@ -0,0 +1,4 @@
+import { LitElement } from "lit";
+export default class VizAssociationElement extends LitElement {
+}
+//# sourceMappingURL=VizAssociationElement.d.ts.map

package/dist/visualization/elements/VizAssociationElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizAssociationElement.d.ts","sourceRoot":"","sources":["../../../src/visualization/elements/VizAssociationElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;CAE5D"}

package/dist/visualization/elements/VizAssociationElement.js

@@ -0,0 +1,4 @@
+import { LitElement } from "lit";
+export default class VizAssociationElement extends LitElement {
+}
+//# sourceMappingURL=VizAssociationElement.js.map

package/dist/visualization/elements/VizAssociationElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizAssociationElement.js","sourceRoot":"","sources":["../../../src/visualization/elements/VizAssociationElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;CAE5D","sourcesContent":["import { LitElement } from \"lit\";\n\nexport default class VizAssociationElement extends LitElement {\n  \n}\n"]}