@hotosm/ui 0.2.0-b4 → 0.2.0-b5

package/components/header/header.js

@@ -1,237 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import "../../theme/sl-custom.css";
-import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
-import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
-import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
-import '@shoelace-style/shoelace/dist/components/tab/tab.js';
-import { LitElement, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
-import { cva } from "class-variance-authority";
-import registerBundledIcons from '../../components/icons';
-registerBundledIcons();
-const headerVariants = cva(
-// Defaults to include in all variants
-`
-    flex flex-row bg-[var(--hot-white)] items-center justify-between
-    sm:justify-around p-2 border-b-2 border-b-gray-100 border-b-solid 
-  `, {
-    variants: {
-        size: {
-            small: "h-8",
-            large: "h-14",
-        },
-    },
-});
-export class Header extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.name = "hot-header";
-        /** Use a text-based title in the header. */
-        this.title = '';
-        /** Display a logo on the left of the header. */
-        this.logo = `
-    data:image/png;base64,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
-  `;
-        /** Add a drawer icon with a click event to e.g. open a sidebar. */
-        this.drawer = true;
-        /** Array of menu items to include as navigation tabs. */
-        this.tabs = [];
-        /** Size of toolbar vertically. */
-        this.size = "large";
-        this.selectedTab = 0;
-    }
-    render() {
-        const logoSrc = typeof this.logo === 'string' || this.logo instanceof URL ? (typeof this.logo === 'string' ? this.logo : this.logo.href) : '';
-        return html `
-    <header class=${headerVariants({ size: this.size })}>
-      <a href="/" class="flex flex-row">
-        ${(logoSrc.length > 0) ? html `
-          <img
-            id="logo"
-            src="${this.logo}"
-            alt="Logo"
-            class="h-10 px-10 hover:opacity-90"
-          >
-        ` : null}
-
-        ${(this.title.length > 0) ? html `
-          <h1 class="text-2xl color-primary font-sans font-bold pl-3 m-0">${this.title}</h1>
-        ` : null}
-      </a>
-
-      ${ /* Navigation bar for desktop, hide on mobile */''}
-      <nav className="hidden sm:flex justify-between items-center gap-4 font-semibold">
-        <sl-tab-group>
-          ${this.tabs.map((item, index) => html `
-              <sl-tab 
-                slot="nav" 
-                panel="general"
-                @click=${(e) => { this._selectTab(e, item.clickEvent, index); }}
-                ?selected=${this.selectedTab === index}
-              >${item.label}</sl-tab>
-            `)}
-        </sl-tab-group>
-      </nav>
-
-      ${ /* Stacked navigation drawer for mobile */''}
-      ${ /* NOTE this should probably be in a drawer instead */''}
-      <nav className="sm:hidden flex flex-col items-end gap-1 font-semibold">
-      </nav>
-
-      <div id="right-section" style="display: flex; align-items: center;">
-        <sl-icon-button
-          library="bundled"
-          name="person-circle"
-          style="font-size: 1.8rem;"
-          label="login"
-          @click=${(e) => { this._handleLogin(e); }}
-        ></sl-icon-button>
-        
-        <div id="drawer-block" style="font-size: 2rem;">
-          ${this.drawer ? html `
-            <sl-icon-button library="bundled" name="list" label="drawer-open"></sl-icon-button>
-          ` : null}
-        </div>
-      </div>
-    </header>
-    `;
-    }
-    _selectTab(_e, clickAction, index) {
-        this.selectedTab = index;
-        clickAction();
-    }
-    _handleLogin(_e) {
-        this.dispatchEvent(new Event("login"));
-    }
-}
-Header.styles = [
-    css `@unocss-placeholder;`,
-    css `
-      #right-section {
-        display: flex;
-        align-items: center;
-      }
-      
-      sl-tab-group {
-        display: flex;
-      }
-
-      sl-tab::part(base) {
-        font-size: 1rem;
-        border-bottom: 2px solid transparent;
-      }
-
-      sl-tab[selected]::part(base) {
-        border-bottom: 2px solid white;
-      }
-
-      #drawer-block {
-        display: flex;
-        align-items: center;
-        padding-right: 30px;
-      }
-
-      @media(prefers-color-scheme: light) {
-        header {
-          color: black;
-        }
-        #break {
-          background-color: black;
-        }
-      }
-    `
-];
-__decorate([
-    property()
-], Header.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], Header.prototype, "title", void 0);
-__decorate([
-    property({ type: String })
-], Header.prototype, "logo", void 0);
-__decorate([
-    property({ type: Boolean })
-], Header.prototype, "drawer", void 0);
-__decorate([
-    property({ type: Array })
-], Header.prototype, "tabs", void 0);
-__decorate([
-    property({ type: String })
-], Header.prototype, "size", void 0);
-__decorate([
-    state()
-], Header.prototype, "selectedTab", void 0);
-export default Header;
-// Define web component
-customElements.define("hot-header", Header);

package/components/icons.js

@@ -1,78 +0,0 @@
-//
-// Bundled icons hardcoded into hotosm/ui.
-// They are a subset of used Shoelace icons (which use Bootstrap icons)
-//
-import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
-const icons = {
-    list: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
-    </svg>
-  `,
-    'info-circle': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
-      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
-    </svg>
-  `,
-    'arrow-counterclockwise': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
-      <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
-    </svg>
-  `,
-    'arrow-clockwise': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
-      <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
-    </svg>
-  `,
-    'type-bold': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
-      <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
-    </svg>
-  `,
-    'type-italic': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
-      <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
-    </svg>
-  `,
-    'type-underline': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
-      <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
-    </svg>
-  `,
-    'justify-left': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify-left" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-    </svg>
-  `,
-    justify: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-    </svg>
-  `,
-    'justify-right': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify-right" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-    </svg>
-  `,
-    'person-circle': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
-      <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
-      <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
-    </svg>  
-  `
-};
-const libraryResolver = (name) => {
-    if (name in icons) {
-        return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
-    }
-    return '';
-};
-function registerBundledIcons() {
-    registerIconLibrary('bundled', {
-        resolver: libraryResolver,
-    });
-}
-export default registerBundledIcons;

package/components/index.d.ts

@@ -1,127 +0,0 @@
-import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.component.js';
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js';
-import SlAnimation from '@shoelace-style/shoelace/dist/components/animation/animation.component.js';
-import SlAvatar from '@shoelace-style/shoelace/dist/components/avatar/avatar.component.js';
-import SlBadge from '@shoelace-style/shoelace/dist/components/badge/badge.component.js';
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js';
-import SlButton from '@shoelace-style/shoelace/dist/components/button/button.component.js';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/components/button-group/button-group.component.js';
-import SlCard from '@shoelace-style/shoelace/dist/components/card/card.component.js';
-import SlCarousel from '@shoelace-style/shoelace/dist/components/carousel/carousel.component.js';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js';
-import SlCheckbox from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js';
-import SlColorPicker from '@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js';
-import SlCopyButton from '@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js';
-import SlDetails from '@shoelace-style/shoelace/dist/components/details/details.component.js';
-import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js';
-import SlDivider from '@shoelace-style/shoelace/dist/components/divider/divider.component.js';
-import SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.component.js';
-import SlDropdown from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js';
-import SlFormatBytes from '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js';
-import SlFormatDate from '@shoelace-style/shoelace/dist/components/format-date/format-date.component.js';
-import SlFormatNumber from '@shoelace-style/shoelace/dist/components/format-number/format-number.component.js';
-import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.component.js';
-import SlIconButton from '@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js';
-import SlImageComparer from '@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js';
-import SlInclude from '@shoelace-style/shoelace/dist/components/include/include.component.js';
-import SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js';
-import SlMenu from '@shoelace-style/shoelace/dist/components/menu/menu.component.js';
-import SlMenuItem from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js';
-import SlMenuLabel from '@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js';
-import SlMutationObserver from '@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js';
-import SlOption from '@shoelace-style/shoelace/dist/components/option/option.component.js';
-import SlPopup from '@shoelace-style/shoelace/dist/components/popup/popup.component.js';
-import SlProgressBar from '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js';
-import SlProgressRing from '@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js';
-import SlQRCode from '@shoelace-style/shoelace/dist/components/qr-code/qr-code.component.js';
-import SlRadio from '@shoelace-style/shoelace/dist/components/radio/radio.component.js';
-import SlRadioButton from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js';
-import SlRange from '@shoelace-style/shoelace/dist/components/range/range.component.js';
-import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.component.js';
-import SlRelativeTime from '@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js';
-import SlResizeObserver from '@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js';
-import SlSelect from '@shoelace-style/shoelace/dist/components/select/select.component.js';
-import SlSkeleton from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js';
-import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.component.js';
-import SlSplitPanel from '@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js';
-import SlSwitch from '@shoelace-style/shoelace/dist/components/switch/switch.component.js';
-import SlTab from '@shoelace-style/shoelace/dist/components/tab/tab.component.js';
-import SlTabGroup from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js';
-import SlTabPanel from '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js';
-import SlTag from '@shoelace-style/shoelace/dist/components/tag/tag.component.js';
-import SlTextarea from '@shoelace-style/shoelace/dist/components/textarea/textarea.component.js';
-import SlTooltip from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js';
-import SlTree from '@shoelace-style/shoelace/dist/components/tree/tree.component.js';
-import SlTreeItem from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js';
-import SlVisuallyHidden from '@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js';
-import HotHeader from './header/header';
-import HotToolbar from './toolbar/toolbar';
-import HotTracking from './tracking/tracking';
-declare global {
-    interface HTMLElementTagNameMap {
-        'hot-alert': SlAlert;
-        'hot-animated-image': SlAnimatedImage;
-        'hot-animation': SlAnimation;
-        'hot-avatar': SlAvatar;
-        'hot-badge': SlBadge;
-        'hot-breadcrumb': SlBreadcrumb;
-        'hot-breadcrumb-item': SlBreadcrumbItem;
-        'hot-button': SlButton;
-        'hot-button-group': SlButtonGroup;
-        'hot-card': SlCard;
-        'hot-carousel': SlCarousel;
-        'hot-carousel-item': SlCarouselItem;
-        'hot-checkbox': SlCheckbox;
-        'hot-color-picker': SlColorPicker;
-        'hot-copy-button': SlCopyButton;
-        'hot-details': SlDetails;
-        'hot-dialog': SlDialog;
-        'hot-divider': SlDivider;
-        'hot-drawer': SlDrawer;
-        'hot-dropdown': SlDropdown;
-        'hot-format-bytes': SlFormatBytes;
-        'hot-format-date': SlFormatDate;
-        'hot-format-number': SlFormatNumber;
-        'hot-icon': SlIcon;
-        'hot-icon-button': SlIconButton;
-        'hot-image-comparer': SlImageComparer;
-        'hot-include': SlInclude;
-        'hot-input': SlInput;
-        'hot-menu': SlMenu;
-        'hot-menu-item': SlMenuItem;
-        'hot-menu-label': SlMenuLabel;
-        'hot-mutation-observer': SlMutationObserver;
-        'hot-option': SlOption;
-        'hot-popup': SlPopup;
-        'hot-progress-bar': SlProgressBar;
-        'hot-progress-ring': SlProgressRing;
-        'hot-qrcode': SlQRCode;
-        'hot-radio': SlRadio;
-        'hot-radio-button': SlRadioButton;
-        'hot-radio-group': SlRadioGroup;
-        'hot-range': SlRange;
-        'hot-rating': SlRating;
-        'hot-relative-time': SlRelativeTime;
-        'hot-resize-observer': SlResizeObserver;
-        'hot-select': SlSelect;
-        'hot-skeleton': SlSkeleton;
-        'hot-spinner': SlSpinner;
-        'hot-split-panel': SlSplitPanel;
-        'hot-switch': SlSwitch;
-        'hot-tab': SlTab;
-        'hot-tab-group': SlTabGroup;
-        'hot-tab-panel': SlTabPanel;
-        'hot-tag': SlTag;
-        'hot-textarea': SlTextarea;
-        'hot-tooltip': SlTooltip;
-        'hot-tree': SlTree;
-        'hot-tree-item': SlTreeItem;
-        'hot-visually-hidden': SlVisuallyHidden;
-        'hot-header': HotHeader;
-        'hot-toolbar': HotToolbar;
-        'hot-tracking': HotTracking;
-    }
-}
-export { SlAlert, SlAnimatedImage, SlAnimation, SlAvatar, SlBadge, SlBreadcrumb, SlBreadcrumbItem, SlButton, SlButtonGroup, SlCard, SlCarousel, SlCarouselItem, SlCheckbox, SlColorPicker, SlCopyButton, SlDetails, SlDialog, SlDivider, SlDrawer, SlDropdown, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuItem, SlMenuLabel, SlMutationObserver, SlOption, SlPopup, SlProgressBar, SlProgressRing, SlQRCode, SlRadio, SlRadioButton, SlRadioGroup, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlSelect, SlSkeleton, SlSpinner, SlSplitPanel, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, SlTree, SlTreeItem, SlVisuallyHidden, HotHeader, HotToolbar, HotTracking, };

package/components/index.js

@@ -1,127 +0,0 @@
-// Index to import all components together
-// import '@hotosm/ui/components';
-// Default Shoelace exports
-import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.component.js';
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js';
-import SlAnimation from '@shoelace-style/shoelace/dist/components/animation/animation.component.js';
-import SlAvatar from '@shoelace-style/shoelace/dist/components/avatar/avatar.component.js';
-import SlBadge from '@shoelace-style/shoelace/dist/components/badge/badge.component.js';
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js';
-import SlButton from '@shoelace-style/shoelace/dist/components/button/button.component.js';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/components/button-group/button-group.component.js';
-import SlCard from '@shoelace-style/shoelace/dist/components/card/card.component.js';
-import SlCarousel from '@shoelace-style/shoelace/dist/components/carousel/carousel.component.js';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js';
-import SlCheckbox from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js';
-import SlColorPicker from '@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js';
-import SlCopyButton from '@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js';
-import SlDetails from '@shoelace-style/shoelace/dist/components/details/details.component.js';
-import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js';
-import SlDivider from '@shoelace-style/shoelace/dist/components/divider/divider.component.js';
-import SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.component.js';
-import SlDropdown from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js';
-import SlFormatBytes from '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js';
-import SlFormatDate from '@shoelace-style/shoelace/dist/components/format-date/format-date.component.js';
-import SlFormatNumber from '@shoelace-style/shoelace/dist/components/format-number/format-number.component.js';
-import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.component.js';
-import SlIconButton from '@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js';
-import SlImageComparer from '@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js';
-import SlInclude from '@shoelace-style/shoelace/dist/components/include/include.component.js';
-import SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js';
-import SlMenu from '@shoelace-style/shoelace/dist/components/menu/menu.component.js';
-import SlMenuItem from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js';
-import SlMenuLabel from '@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js';
-import SlMutationObserver from '@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js';
-import SlOption from '@shoelace-style/shoelace/dist/components/option/option.component.js';
-import SlPopup from '@shoelace-style/shoelace/dist/components/popup/popup.component.js';
-import SlProgressBar from '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js';
-import SlProgressRing from '@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js';
-import SlQRCode from '@shoelace-style/shoelace/dist/components/qr-code/qr-code.component.js';
-import SlRadio from '@shoelace-style/shoelace/dist/components/radio/radio.component.js';
-import SlRadioButton from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js';
-import SlRange from '@shoelace-style/shoelace/dist/components/range/range.component.js';
-import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.component.js';
-import SlRelativeTime from '@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js';
-import SlResizeObserver from '@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js';
-import SlSelect from '@shoelace-style/shoelace/dist/components/select/select.component.js';
-import SlSkeleton from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js';
-import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.component.js';
-import SlSplitPanel from '@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js';
-import SlSwitch from '@shoelace-style/shoelace/dist/components/switch/switch.component.js';
-import SlTab from '@shoelace-style/shoelace/dist/components/tab/tab.component.js';
-import SlTabGroup from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js';
-import SlTabPanel from '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js';
-import SlTag from '@shoelace-style/shoelace/dist/components/tag/tag.component.js';
-import SlTextarea from '@shoelace-style/shoelace/dist/components/textarea/textarea.component.js';
-import SlTooltip from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js';
-import SlTree from '@shoelace-style/shoelace/dist/components/tree/tree.component.js';
-import SlTreeItem from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js';
-import SlVisuallyHidden from '@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js';
-// Custom composite components
-import HotHeader from './header/header';
-import HotToolbar from './toolbar/toolbar';
-import HotTracking from './tracking/tracking';
-// Define web component names for Shoelace components
-SlAlert.define('hot-alert');
-SlAnimatedImage.define('hot-animated-image');
-SlAnimation.define('hot-animation');
-SlAvatar.define('hot-avatar');
-SlBadge.define('hot-badge');
-SlBreadcrumb.define('hot-breadcrumb');
-SlBreadcrumbItem.define('hot-breadcrumb-item');
-SlButton.define('hot-button');
-SlButtonGroup.define('hot-button-group');
-SlCard.define('hot-card');
-SlCarousel.define('hot-carousel');
-SlCarouselItem.define('hot-carousel-item');
-SlCheckbox.define('hot-checkbox');
-SlColorPicker.define('hot-color-picker');
-SlCopyButton.define('hot-copy-button');
-SlDetails.define('hot-details');
-SlDialog.define('hot-dialog');
-SlDivider.define('hot-divider');
-SlDrawer.define('hot-drawer');
-SlDropdown.define('hot-dropdown');
-SlFormatBytes.define('hot-format-bytes');
-SlFormatDate.define('hot-format-date');
-SlFormatNumber.define('hot-format-number');
-SlIcon.define('hot-icon');
-SlIconButton.define('hot-icon-button');
-SlImageComparer.define('hot-image-comparer');
-SlInclude.define('hot-include');
-SlInput.define('hot-input');
-SlMenu.define('hot-menu');
-SlMenuItem.define('hot-menu-item');
-SlMenuLabel.define('hot-menu-label');
-SlMutationObserver.define('hot-mutation-observer');
-SlOption.define('hot-option');
-SlPopup.define('hot-popup');
-SlProgressBar.define('hot-progress-bar');
-SlProgressRing.define('hot-progress-ring');
-SlQRCode.define('hot-qr-code');
-SlRadio.define('hot-radio');
-SlRadioButton.define('hot-radio-button');
-SlRadioGroup.define('hot-radio-group');
-SlRange.define('hot-range');
-SlRating.define('hot-rating');
-SlRelativeTime.define('hot-relative-time');
-SlResizeObserver.define('hot-resize-observer');
-SlSelect.define('hot-select');
-SlSkeleton.define('hot-skeleton');
-SlSpinner.define('hot-spinner');
-SlSplitPanel.define('hot-split-panel');
-SlSwitch.define('hot-switch');
-SlTab.define('hot-tab');
-SlTabGroup.define('hot-tab-group');
-SlTabPanel.define('hot-tab-panel');
-SlTag.define('hot-tag');
-SlTextarea.define('hot-textarea');
-SlTooltip.define('hot-tooltip');
-SlTree.define('hot-tree');
-SlTreeItem.define('hot-tree-item');
-SlVisuallyHidden.define('hot-visually-hidden');
-export { SlAlert, SlAnimatedImage, SlAnimation, SlAvatar, SlBadge, SlBreadcrumb, SlBreadcrumbItem, SlButton, SlButtonGroup, SlCard, SlCarousel, SlCarouselItem, SlCheckbox, SlColorPicker, SlCopyButton, SlDetails, SlDialog, SlDivider, SlDrawer, SlDropdown, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuItem, SlMenuLabel, SlMutationObserver, SlOption, SlPopup, SlProgressBar, SlProgressRing, SlQRCode, SlRadio, SlRadioButton, SlRadioGroup, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlSelect, SlSkeleton, SlSpinner, SlSplitPanel, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, SlTree, SlTreeItem, SlVisuallyHidden, 
-// Custom composite components
-HotHeader, HotToolbar, HotTracking, };

package/components/toolbar/toolbar.d.ts

@@ -1,24 +0,0 @@
-import "../../theme/sl-custom.css";
-import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
-import { LitElement } from "lit";
-export declare class Toolbar extends LitElement {
-    name: string;
-    /** Change the position of the tooltips relative to buttons. */
-    tooltipPosition: string;
-    static styles: import("lit").CSSResult[];
-    protected render(): import("lit").TemplateResult<1>;
-    private renderButtonGroup;
-    private renderButton;
-    private readonly undo;
-    private readonly redo;
-    private readonly bold;
-    private readonly italic;
-    private readonly underline;
-    private readonly alignLeft;
-    private readonly alignCenter;
-    private readonly alignRight;
-}
-export default Toolbar;