@aurelia-ui-toolkits/headless 1.0.0

package/dist/toast/ui-toast-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-toast-service.js","sourceRoot":"","sources":["../../src/toast/ui-toast-service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Aurelia, IContainer, resolve } from 'aurelia';\nimport { AlertTone } from '../alert/ui-alert';\n\ntype EnhancedView = { deactivate(): void | Promise<void> };\n\nexport interface UiToastOptions {\n  tone?: AlertTone;\n  title?: string;\n  message: string;\n  duration?: number;\n}\n\nexport interface UiToastMessage extends Required<Pick<UiToastOptions, 'tone' | 'message' | 'duration'>> {\n  id: number;\n  title?: string;\n}\n\nexport class UiToastService {\n  private readonly container = resolve(IContainer);\n  private host: HTMLElement | undefined;\n  private enhanced: EnhancedView | undefined;\n  private nextId = 0;\n  private timers = new Map<number, ReturnType<typeof setTimeout>>();\n\n  toasts: UiToastMessage[] = [];\n\n  async show(options: string | UiToastOptions): Promise<number> {\n    await this.ensureEnhanced();\n    const toast = this.createToast(options);\n    this.toasts = [...this.toasts, toast];\n\n    if (toast.duration > 0) {\n      this.timers.set(toast.id, setTimeout(() => this.remove(toast.id), toast.duration));\n    }\n\n    return toast.id;\n  }\n\n  info(message: string, title?: string): Promise<number> {\n    return this.show({ tone: 'info', title, message });\n  }\n\n  success(message: string, title?: string): Promise<number> {\n    return this.show({ tone: 'success', title, message });\n  }\n\n  warning(message: string, title?: string): Promise<number> {\n    return this.show({ tone: 'warning', title, message });\n  }\n\n  danger(message: string, title?: string): Promise<number> {\n    return this.show({ tone: 'danger', title, message, duration: 7000 });\n  }\n\n  remove(id: number): void {\n    const timer = this.timers.get(id);\n    if (timer) {\n      clearTimeout(timer);\n      this.timers.delete(id);\n    }\n\n    this.toasts = this.toasts.filter(toast => toast.id !== id);\n  }\n\n  clear(): void {\n    for (const timer of this.timers.values()) {\n      clearTimeout(timer);\n    }\n    this.timers.clear();\n    this.toasts = [];\n  }\n\n  private createToast(options: string | UiToastOptions): UiToastMessage {\n    const normalized = typeof options === 'string' ? { message: options } : options;\n    return {\n      id: ++this.nextId,\n      tone: normalized.tone ?? 'info',\n      title: normalized.title,\n      message: normalized.message,\n      duration: normalized.duration ?? 5000\n    };\n  }\n\n  private async ensureEnhanced(): Promise<void> {\n    if (this.enhanced) {\n      return;\n    }\n\n    this.host = document.createElement('div');\n    this.host.className = 'ui-toast-host';\n    this.host.innerHTML = `<ui-toast-region toasts.bind=\"toasts\" toast-close.trigger=\"remove($event.detail)\"></ui-toast-region>`;\n    document.body.append(this.host);\n\n    this.enhanced = await Aurelia.enhance({\n      host: this.host,\n      component: this,\n      container: this.container\n    }) as EnhancedView;\n  }\n}\n"]}

package/dist/tooltip/ui-tooltip-service.js

@@ -0,0 +1,63 @@
+import { Aurelia, IContainer, resolve } from 'aurelia';
+let nextTooltipId = 0;
+export class UiTooltipService {
+    container = resolve(IContainer);
+    host;
+    enhanced;
+    request = 0;
+    open = false;
+    anchor;
+    text = '';
+    placement = 'top-start';
+    offset = 6;
+    tooltipId = `ui-tooltip-${++nextTooltipId}`;
+    async show(options) {
+        const request = ++this.request;
+        await this.ensureEnhanced();
+        if (request !== this.request) {
+            return;
+        }
+        this.anchor = options.anchor;
+        this.text = options.text;
+        this.placement = options.placement;
+        this.offset = options.offset;
+        this.open = true;
+    }
+    hide(anchor) {
+        if (this.anchor !== anchor) {
+            return;
+        }
+        this.request++;
+        this.open = false;
+        this.anchor = undefined;
+    }
+    async ensureEnhanced() {
+        if (this.enhanced) {
+            return;
+        }
+        this.host = document.createElement('div');
+        this.host.className = 'ui-tooltip';
+        this.host.innerHTML = `
+      <ui-popup
+        open.bind="open"
+        anchor.bind="anchor"
+        placement.bind="placement"
+        offset.bind="offset"
+        focus-on-open.bind="false"
+        restore-focus.bind="false"
+        close-on-outside.bind="false"
+        close-on-escape.bind="false"
+        panel-role="tooltip"
+        panel-id.bind="tooltipId">
+        <span class="ui-tooltip__content">\${text}</span>
+      </ui-popup>
+    `;
+        document.body.append(this.host);
+        this.enhanced = await Aurelia.enhance({
+            host: this.host,
+            component: this,
+            container: this.container
+        });
+    }
+}
+//# sourceMappingURL=ui-tooltip-service.js.map

package/dist/tooltip/ui-tooltip-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-tooltip-service.js","sourceRoot":"","sources":["../../src/tooltip/ui-tooltip-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvD,IAAI,aAAa,GAAG,CAAC,CAAC;AAStB,MAAM,OAAO,gBAAgB;IACV,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAA0B;IAC9B,QAAQ,CAA2B;IACnC,OAAO,GAAG,CAAC,CAAC;IAEpB,IAAI,GAAG,KAAK,CAAC;IACb,MAAM,CAA0B;IAChC,IAAI,GAAG,EAAE,CAAC;IACV,SAAS,GAAqB,WAAW,CAAC;IAC1C,MAAM,GAAG,CAAC,CAAC;IACX,SAAS,GAAG,cAAc,EAAE,aAAa,EAAE,CAAC;IAE5C,KAAK,CAAC,IAAI,CAAC,OAAuB;QAChC,MAAM,OAAO,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC;QAC/B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,IAAI,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,IAAI,CAAC,MAAmB;QACtB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;IAC1B,CAAC;IAEO,KAAK,CAAC,cAAc;QAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;KAcrB,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEhC,IAAI,CAAC,QAAQ,GAAG,MAAM,OAAO,CAAC,OAAO,CAAC;YACpC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAiB,CAAC;IACrB,CAAC;CACF","sourcesContent":["import { Aurelia, IContainer, resolve } from 'aurelia';\n\ntype TooltipPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';\ntype EnhancedView = { deactivate(): void | Promise<void> };\n\nlet nextTooltipId = 0;\n\ninterface TooltipOptions {\n  anchor: HTMLElement;\n  text: string;\n  placement: TooltipPlacement;\n  offset: number;\n}\n\nexport class UiTooltipService {\n  private readonly container = resolve(IContainer);\n  private host: HTMLElement | undefined;\n  private enhanced: EnhancedView | undefined;\n  private request = 0;\n\n  open = false;\n  anchor: HTMLElement | undefined;\n  text = '';\n  placement: TooltipPlacement = 'top-start';\n  offset = 6;\n  tooltipId = `ui-tooltip-${++nextTooltipId}`;\n\n  async show(options: TooltipOptions): Promise<void> {\n    const request = ++this.request;\n    await this.ensureEnhanced();\n    if (request !== this.request) {\n      return;\n    }\n\n    this.anchor = options.anchor;\n    this.text = options.text;\n    this.placement = options.placement;\n    this.offset = options.offset;\n    this.open = true;\n  }\n\n  hide(anchor: HTMLElement): void {\n    if (this.anchor !== anchor) {\n      return;\n    }\n\n    this.request++;\n    this.open = false;\n    this.anchor = undefined;\n  }\n\n  private async ensureEnhanced(): Promise<void> {\n    if (this.enhanced) {\n      return;\n    }\n\n    this.host = document.createElement('div');\n    this.host.className = 'ui-tooltip';\n    this.host.innerHTML = `\n      <ui-popup\n        open.bind=\"open\"\n        anchor.bind=\"anchor\"\n        placement.bind=\"placement\"\n        offset.bind=\"offset\"\n        focus-on-open.bind=\"false\"\n        restore-focus.bind=\"false\"\n        close-on-outside.bind=\"false\"\n        close-on-escape.bind=\"false\"\n        panel-role=\"tooltip\"\n        panel-id.bind=\"tooltipId\">\n        <span class=\"ui-tooltip__content\">\\${text}</span>\n      </ui-popup>\n    `;\n    document.body.append(this.host);\n\n    this.enhanced = await Aurelia.enhance({\n      host: this.host,\n      component: this,\n      container: this.container\n    }) as EnhancedView;\n  }\n}\n\nexport type { TooltipPlacement, TooltipOptions };\n"]}

package/dist/tooltip/ui-tooltip.js

@@ -0,0 +1,221 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customAttribute, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import { UiTooltipService } from './ui-tooltip-service';
+let UiTooltip = (() => {
+    let _classDecorators = [customAttribute({
+            name: 'ui-tooltip',
+            defaultProperty: 'text'
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _text_decorators;
+    let _text_initializers = [];
+    let _text_extraInitializers = [];
+    let _placement_decorators;
+    let _placement_initializers = [];
+    let _placement_extraInitializers = [];
+    let _offset_decorators;
+    let _offset_initializers = [];
+    let _offset_extraInitializers = [];
+    let _openDelay_decorators;
+    let _openDelay_initializers = [];
+    let _openDelay_extraInitializers = [];
+    let _closeDelay_decorators;
+    let _closeDelay_initializers = [];
+    let _closeDelay_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    var UiTooltip = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _text_decorators = [bindable];
+            _placement_decorators = [bindable];
+            _offset_decorators = [bindable];
+            _openDelay_decorators = [bindable];
+            _closeDelay_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            __esDecorate(null, null, _text_decorators, { kind: "field", name: "text", static: false, private: false, access: { has: obj => "text" in obj, get: obj => obj.text, set: (obj, value) => { obj.text = value; } }, metadata: _metadata }, _text_initializers, _text_extraInitializers);
+            __esDecorate(null, null, _placement_decorators, { kind: "field", name: "placement", static: false, private: false, access: { has: obj => "placement" in obj, get: obj => obj.placement, set: (obj, value) => { obj.placement = value; } }, metadata: _metadata }, _placement_initializers, _placement_extraInitializers);
+            __esDecorate(null, null, _offset_decorators, { kind: "field", name: "offset", static: false, private: false, access: { has: obj => "offset" in obj, get: obj => obj.offset, set: (obj, value) => { obj.offset = value; } }, metadata: _metadata }, _offset_initializers, _offset_extraInitializers);
+            __esDecorate(null, null, _openDelay_decorators, { kind: "field", name: "openDelay", static: false, private: false, access: { has: obj => "openDelay" in obj, get: obj => obj.openDelay, set: (obj, value) => { obj.openDelay = value; } }, metadata: _metadata }, _openDelay_initializers, _openDelay_extraInitializers);
+            __esDecorate(null, null, _closeDelay_decorators, { kind: "field", name: "closeDelay", static: false, private: false, access: { has: obj => "closeDelay" in obj, get: obj => obj.closeDelay, set: (obj, value) => { obj.closeDelay = value; } }, metadata: _metadata }, _closeDelay_initializers, _closeDelay_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiTooltip = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        tooltipService = resolve(UiTooltipService);
+        openTimer;
+        closeTimer;
+        pointerInside = false;
+        focusInside = false;
+        described = false;
+        text = __runInitializers(this, _text_initializers, void 0);
+        textChanged() {
+            if (this.described && this.canOpen()) {
+                void this.tooltipService.show(this.getOptions());
+            }
+            else if (this.described) {
+                this.closeNow();
+            }
+        }
+        placement = (__runInitializers(this, _text_extraInitializers), __runInitializers(this, _placement_initializers, 'top-start'));
+        placementChanged() {
+            if (this.described && this.canOpen()) {
+                void this.tooltipService.show(this.getOptions());
+            }
+        }
+        offset = (__runInitializers(this, _placement_extraInitializers), __runInitializers(this, _offset_initializers, 6));
+        offsetChanged() {
+            if (this.described && this.canOpen()) {
+                void this.tooltipService.show(this.getOptions());
+            }
+        }
+        openDelay = (__runInitializers(this, _offset_extraInitializers), __runInitializers(this, _openDelay_initializers, 300));
+        closeDelay = (__runInitializers(this, _openDelay_extraInitializers), __runInitializers(this, _closeDelay_initializers, 0));
+        disabled = (__runInitializers(this, _closeDelay_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        disabledChanged() {
+            if (this.disabled) {
+                this.closeNow();
+            }
+        }
+        attaching() {
+            this.host.addEventListener('pointerenter', this);
+            this.host.addEventListener('pointerleave', this);
+            this.host.addEventListener('focusin', this);
+            this.host.addEventListener('focusout', this);
+            this.host.addEventListener('keydown', this);
+        }
+        detaching() {
+            this.host.removeEventListener('pointerenter', this);
+            this.host.removeEventListener('pointerleave', this);
+            this.host.removeEventListener('focusin', this);
+            this.host.removeEventListener('focusout', this);
+            this.host.removeEventListener('keydown', this);
+            this.clearTimers();
+            this.closeNow();
+        }
+        handleEvent(event) {
+            switch (event.type) {
+                case 'pointerenter':
+                    this.pointerInside = true;
+                    this.scheduleOpen();
+                    break;
+                case 'pointerleave':
+                    this.pointerInside = false;
+                    this.scheduleClose();
+                    break;
+                case 'focusin':
+                    this.focusInside = true;
+                    this.scheduleOpen();
+                    break;
+                case 'focusout':
+                    this.focusInside = false;
+                    this.scheduleClose();
+                    break;
+                case 'keydown':
+                    if (event.key === Keys.Escape) {
+                        this.closeNow();
+                    }
+                    break;
+            }
+        }
+        scheduleOpen() {
+            if (!this.canOpen()) {
+                return;
+            }
+            this.clearCloseTimer();
+            this.clearOpenTimer();
+            this.openTimer = setTimeout(() => {
+                this.addDescribedBy();
+                void this.tooltipService.show(this.getOptions());
+            }, this.getDelay(this.openDelay));
+        }
+        scheduleClose() {
+            this.clearOpenTimer();
+            this.clearCloseTimer();
+            this.closeTimer = setTimeout(() => {
+                if (!this.pointerInside && !this.focusInside) {
+                    this.closeNow();
+                }
+            }, this.getDelay(this.closeDelay));
+        }
+        closeNow() {
+            this.clearTimers();
+            this.removeDescribedBy();
+            this.tooltipService.hide(this.host);
+        }
+        getOptions() {
+            return {
+                anchor: this.host,
+                text: this.text ?? '',
+                placement: this.placement,
+                offset: Number(this.offset) || 0
+            };
+        }
+        canOpen() {
+            return !this.disabled && !!this.text;
+        }
+        getDelay(value) {
+            return Math.max(0, Number(value) || 0);
+        }
+        clearTimers() {
+            this.clearOpenTimer();
+            this.clearCloseTimer();
+        }
+        clearOpenTimer() {
+            if (this.openTimer) {
+                clearTimeout(this.openTimer);
+                this.openTimer = undefined;
+            }
+        }
+        clearCloseTimer() {
+            if (this.closeTimer) {
+                clearTimeout(this.closeTimer);
+                this.closeTimer = undefined;
+            }
+        }
+        addDescribedBy() {
+            if (this.described) {
+                return;
+            }
+            const ids = this.getDescribedByIds();
+            if (!ids.includes(this.tooltipService.tooltipId)) {
+                ids.push(this.tooltipService.tooltipId);
+                this.host.setAttribute('aria-describedby', ids.join(' '));
+            }
+            this.described = true;
+        }
+        removeDescribedBy() {
+            if (!this.described) {
+                return;
+            }
+            const ids = this.getDescribedByIds().filter(id => id !== this.tooltipService.tooltipId);
+            if (ids.length) {
+                this.host.setAttribute('aria-describedby', ids.join(' '));
+            }
+            else {
+                this.host.removeAttribute('aria-describedby');
+            }
+            this.described = false;
+        }
+        getDescribedByIds() {
+            return (this.host.getAttribute('aria-describedby') ?? '')
+                .split(/\s+/)
+                .filter(Boolean);
+        }
+        constructor() {
+            __runInitializers(this, _disabled_extraInitializers);
+        }
+    };
+    return UiTooltip = _classThis;
+})();
+export { UiTooltip };
+//# sourceMappingURL=ui-tooltip.js.map

package/dist/tooltip/ui-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-tooltip.js","sourceRoot":"","sources":["../../src/tooltip/ui-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, customAttribute, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { Keys } from '../base/keys';\nimport { UiTooltipService, TooltipOptions, TooltipPlacement } from './ui-tooltip-service';\n\n@customAttribute({\n  name: 'ui-tooltip',\n  defaultProperty: 'text'\n})\nexport class UiTooltip implements EventListenerObject {\n  private readonly host = resolve(INode) as HTMLElement;\n  private readonly tooltipService = resolve(UiTooltipService);\n  private openTimer: ReturnType<typeof setTimeout> | undefined;\n  private closeTimer: ReturnType<typeof setTimeout> | undefined;\n  private pointerInside = false;\n  private focusInside = false;\n  private described = false;\n\n  @bindable\n  text: string | undefined;\n  textChanged(): void {\n    if (this.described && this.canOpen()) {\n      void this.tooltipService.show(this.getOptions());\n    } else if (this.described) {\n      this.closeNow();\n    }\n  }\n\n  @bindable\n  placement: TooltipPlacement = 'top-start';\n  placementChanged(): void {\n    if (this.described && this.canOpen()) {\n      void this.tooltipService.show(this.getOptions());\n    }\n  }\n\n  @bindable\n  offset: number = 6;\n  offsetChanged(): void {\n    if (this.described && this.canOpen()) {\n      void this.tooltipService.show(this.getOptions());\n    }\n  }\n\n  @bindable\n  openDelay: number = 300;\n\n  @bindable\n  closeDelay: number = 0;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n  disabledChanged(): void {\n    if (this.disabled) {\n      this.closeNow();\n    }\n  }\n\n  attaching(): void {\n    this.host.addEventListener('pointerenter', this);\n    this.host.addEventListener('pointerleave', this);\n    this.host.addEventListener('focusin', this);\n    this.host.addEventListener('focusout', this);\n    this.host.addEventListener('keydown', this);\n  }\n\n  detaching(): void {\n    this.host.removeEventListener('pointerenter', this);\n    this.host.removeEventListener('pointerleave', this);\n    this.host.removeEventListener('focusin', this);\n    this.host.removeEventListener('focusout', this);\n    this.host.removeEventListener('keydown', this);\n    this.clearTimers();\n    this.closeNow();\n  }\n\n  handleEvent(event: Event): void {\n    switch (event.type) {\n      case 'pointerenter':\n        this.pointerInside = true;\n        this.scheduleOpen();\n        break;\n      case 'pointerleave':\n        this.pointerInside = false;\n        this.scheduleClose();\n        break;\n      case 'focusin':\n        this.focusInside = true;\n        this.scheduleOpen();\n        break;\n      case 'focusout':\n        this.focusInside = false;\n        this.scheduleClose();\n        break;\n      case 'keydown':\n        if ((event as KeyboardEvent).key === Keys.Escape) {\n          this.closeNow();\n        }\n        break;\n    }\n  }\n\n  private scheduleOpen(): void {\n    if (!this.canOpen()) {\n      return;\n    }\n\n    this.clearCloseTimer();\n    this.clearOpenTimer();\n    this.openTimer = setTimeout(() => {\n      this.addDescribedBy();\n      void this.tooltipService.show(this.getOptions());\n    }, this.getDelay(this.openDelay));\n  }\n\n  private scheduleClose(): void {\n    this.clearOpenTimer();\n    this.clearCloseTimer();\n    this.closeTimer = setTimeout(() => {\n      if (!this.pointerInside && !this.focusInside) {\n        this.closeNow();\n      }\n    }, this.getDelay(this.closeDelay));\n  }\n\n  private closeNow(): void {\n    this.clearTimers();\n    this.removeDescribedBy();\n    this.tooltipService.hide(this.host);\n  }\n\n  private getOptions(): TooltipOptions {\n    return {\n      anchor: this.host,\n      text: this.text ?? '',\n      placement: this.placement,\n      offset: Number(this.offset) || 0\n    };\n  }\n\n  private canOpen(): boolean {\n    return !this.disabled && !!this.text;\n  }\n\n  private getDelay(value: number): number {\n    return Math.max(0, Number(value) || 0);\n  }\n\n  private clearTimers(): void {\n    this.clearOpenTimer();\n    this.clearCloseTimer();\n  }\n\n  private clearOpenTimer(): void {\n    if (this.openTimer) {\n      clearTimeout(this.openTimer);\n      this.openTimer = undefined;\n    }\n  }\n\n  private clearCloseTimer(): void {\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = undefined;\n    }\n  }\n\n  private addDescribedBy(): void {\n    if (this.described) {\n      return;\n    }\n\n    const ids = this.getDescribedByIds();\n    if (!ids.includes(this.tooltipService.tooltipId)) {\n      ids.push(this.tooltipService.tooltipId);\n      this.host.setAttribute('aria-describedby', ids.join(' '));\n    }\n    this.described = true;\n  }\n\n  private removeDescribedBy(): void {\n    if (!this.described) {\n      return;\n    }\n\n    const ids = this.getDescribedByIds().filter(id => id !== this.tooltipService.tooltipId);\n    if (ids.length) {\n      this.host.setAttribute('aria-describedby', ids.join(' '));\n    } else {\n      this.host.removeAttribute('aria-describedby');\n    }\n    this.described = false;\n  }\n\n  private getDescribedByIds(): string[] {\n    return (this.host.getAttribute('aria-describedby') ?? '')\n      .split(/\\s+/)\n      .filter(Boolean);\n  }\n}\n"]}

package/dist/top-app-bar/ui-top-app-bar.html

@@ -0,0 +1,24 @@
+<template class="ui-top-app-bar"
+  data-sticky.attr="sticky ? '' : null"
+  data-fixed.attr="fixed ? '' : null"
+  data-dense.attr="dense ? '' : null"
+  data-elevated.attr="elevated ? '' : null">
+  <header class="ui-top-app-bar__header">
+    <div class="ui-top-app-bar__navigation">
+      <au-slot name="navigation"></au-slot>
+    </div>
+
+    <div class="ui-top-app-bar__content">
+      <div class="ui-top-app-bar__breadcrumbs">
+        <au-slot name="breadcrumbs"></au-slot>
+      </div>
+      <div class="ui-top-app-bar__title">
+        <au-slot></au-slot>
+      </div>
+    </div>
+
+    <div class="ui-top-app-bar__actions">
+      <au-slot name="actions"></au-slot>
+    </div>
+  </header>
+</template>

package/dist/top-app-bar/ui-top-app-bar.js

@@ -0,0 +1,68 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customElement, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-top-app-bar.html?raw';
+let UiTopAppBar = (() => {
+    let _classDecorators = [customElement({ name: 'ui-top-app-bar', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _sticky_decorators;
+    let _sticky_initializers = [];
+    let _sticky_extraInitializers = [];
+    let _fixed_decorators;
+    let _fixed_initializers = [];
+    let _fixed_extraInitializers = [];
+    let _dense_decorators;
+    let _dense_initializers = [];
+    let _dense_extraInitializers = [];
+    let _elevated_decorators;
+    let _elevated_initializers = [];
+    let _elevated_extraInitializers = [];
+    let _navigationNodes_decorators;
+    let _navigationNodes_initializers = [];
+    let _navigationNodes_extraInitializers = [];
+    let _breadcrumbNodes_decorators;
+    let _breadcrumbNodes_initializers = [];
+    let _breadcrumbNodes_extraInitializers = [];
+    let _actionNodes_decorators;
+    let _actionNodes_initializers = [];
+    let _actionNodes_extraInitializers = [];
+    var UiTopAppBar = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _sticky_decorators = [bindable({ set: booleanAttr })];
+            _fixed_decorators = [bindable({ set: booleanAttr })];
+            _dense_decorators = [bindable({ set: booleanAttr })];
+            _elevated_decorators = [bindable({ set: booleanAttr })];
+            _navigationNodes_decorators = [slotted({ slotName: 'navigation' })];
+            _breadcrumbNodes_decorators = [slotted({ slotName: 'breadcrumbs' })];
+            _actionNodes_decorators = [slotted({ slotName: 'actions' })];
+            __esDecorate(null, null, _sticky_decorators, { kind: "field", name: "sticky", static: false, private: false, access: { has: obj => "sticky" in obj, get: obj => obj.sticky, set: (obj, value) => { obj.sticky = value; } }, metadata: _metadata }, _sticky_initializers, _sticky_extraInitializers);
+            __esDecorate(null, null, _fixed_decorators, { kind: "field", name: "fixed", static: false, private: false, access: { has: obj => "fixed" in obj, get: obj => obj.fixed, set: (obj, value) => { obj.fixed = value; } }, metadata: _metadata }, _fixed_initializers, _fixed_extraInitializers);
+            __esDecorate(null, null, _dense_decorators, { kind: "field", name: "dense", static: false, private: false, access: { has: obj => "dense" in obj, get: obj => obj.dense, set: (obj, value) => { obj.dense = value; } }, metadata: _metadata }, _dense_initializers, _dense_extraInitializers);
+            __esDecorate(null, null, _elevated_decorators, { kind: "field", name: "elevated", static: false, private: false, access: { has: obj => "elevated" in obj, get: obj => obj.elevated, set: (obj, value) => { obj.elevated = value; } }, metadata: _metadata }, _elevated_initializers, _elevated_extraInitializers);
+            __esDecorate(null, null, _navigationNodes_decorators, { kind: "field", name: "navigationNodes", static: false, private: false, access: { has: obj => "navigationNodes" in obj, get: obj => obj.navigationNodes, set: (obj, value) => { obj.navigationNodes = value; } }, metadata: _metadata }, _navigationNodes_initializers, _navigationNodes_extraInitializers);
+            __esDecorate(null, null, _breadcrumbNodes_decorators, { kind: "field", name: "breadcrumbNodes", static: false, private: false, access: { has: obj => "breadcrumbNodes" in obj, get: obj => obj.breadcrumbNodes, set: (obj, value) => { obj.breadcrumbNodes = value; } }, metadata: _metadata }, _breadcrumbNodes_initializers, _breadcrumbNodes_extraInitializers);
+            __esDecorate(null, null, _actionNodes_decorators, { kind: "field", name: "actionNodes", static: false, private: false, access: { has: obj => "actionNodes" in obj, get: obj => obj.actionNodes, set: (obj, value) => { obj.actionNodes = value; } }, metadata: _metadata }, _actionNodes_initializers, _actionNodes_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiTopAppBar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        sticky = __runInitializers(this, _sticky_initializers, false);
+        fixed = (__runInitializers(this, _sticky_extraInitializers), __runInitializers(this, _fixed_initializers, false));
+        dense = (__runInitializers(this, _fixed_extraInitializers), __runInitializers(this, _dense_initializers, false));
+        elevated = (__runInitializers(this, _dense_extraInitializers), __runInitializers(this, _elevated_initializers, false));
+        navigationNodes = (__runInitializers(this, _elevated_extraInitializers), __runInitializers(this, _navigationNodes_initializers, []));
+        breadcrumbNodes = (__runInitializers(this, _navigationNodes_extraInitializers), __runInitializers(this, _breadcrumbNodes_initializers, []));
+        actionNodes = (__runInitializers(this, _breadcrumbNodes_extraInitializers), __runInitializers(this, _actionNodes_initializers, []));
+        constructor() {
+            __runInitializers(this, _actionNodes_extraInitializers);
+        }
+    };
+    return UiTopAppBar = _classThis;
+})();
+export { UiTopAppBar };
+//# sourceMappingURL=ui-top-app-bar.js.map

package/dist/top-app-bar/ui-top-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-top-app-bar.js","sourceRoot":"","sources":["../../src/top-app-bar/ui-top-app-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,QAAQ,MAAM,2BAA2B,CAAC;IAGpC,WAAW;4BADvB,aAAa,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAEjD,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;iCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;iCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;oCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;2CAG9B,OAAO,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;2CAGnC,OAAO,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;uCAGpC,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;YAjBjC,oKAAA,MAAM,6BAAN,MAAM,uFAAkB;YAGxB,iKAAA,KAAK,6BAAL,KAAK,qFAAkB;YAGvB,iKAAA,KAAK,6BAAL,KAAK,qFAAkB;YAGvB,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAG1B,+LAAA,eAAe,6BAAf,eAAe,yGAAuB;YAGtC,+LAAA,eAAe,6BAAf,eAAe,yGAAuB;YAGtC,mLAAA,WAAW,6BAAX,WAAW,iGAAuB;YApBpC,6KAqBC;;;YArBY,uDAAW;;QAEtB,MAAM,iDAAY,KAAK,EAAC;QAGxB,KAAK,qGAAY,KAAK,GAAC;QAGvB,KAAK,oGAAY,KAAK,GAAC;QAGvB,QAAQ,uGAAY,KAAK,GAAC;QAG1B,eAAe,iHAAoB,EAAE,GAAC;QAGtC,eAAe,wHAAoB,EAAE,GAAC;QAGtC,WAAW,oHAAoB,EAAE,GAAC;;;;;;;SApBvB,WAAW","sourcesContent":["import { bindable, customElement, slotted } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport template from './ui-top-app-bar.html?raw';\n\n@customElement({ name: 'ui-top-app-bar', template })\nexport class UiTopAppBar {\n  @bindable({ set: booleanAttr })\n  sticky: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  fixed: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  dense: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  elevated: boolean = false;\n\n  @slotted({ slotName: 'navigation' })\n  navigationNodes: readonly Node[] = [];\n\n  @slotted({ slotName: 'breadcrumbs' })\n  breadcrumbNodes: readonly Node[] = [];\n\n  @slotted({ slotName: 'actions' })\n  actionNodes: readonly Node[] = [];\n}\n"]}

package/dist/tree/ui-tree.html

@@ -0,0 +1,38 @@
+<template class="ui-tree"
+  role="tree"
+  aria-label.attr="label || null"
+  aria-disabled.attr="disabled ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  keydown.trigger="onKeyDown($event)">
+  <div class="ui-tree__item"
+    repeat.for="row of visibleRows"
+    ref="row.element"
+    role="treeitem"
+    tabindex.bind="!disabled && !row.disabled && activeValue === row.value ? 0 : -1"
+    aria-level.attr="row.depth + 1"
+    aria-posinset.attr="row.posInSet"
+    aria-setsize.attr="row.setSize"
+    aria-expanded.attr="row.children.length ? row.expanded ? 'true' : 'false' : null"
+    aria-selected.attr="selectionMode === 'none' ? null : value === row.value ? 'true' : 'false'"
+    aria-disabled.attr="disabled || row.disabled ? '' : null"
+    data-tree-row-id.attr="row.id"
+    data-depth.attr="row.depth"
+    data-expanded.attr="row.expanded ? '' : null"
+    data-selected.attr="value === row.value ? '' : null"
+    data-active.attr="activeValue === row.value ? '' : null"
+    data-disabled.attr="disabled || row.disabled ? '' : null"
+    style.bind="`--ui-tree-depth: ${row.depth}`"
+    click.trigger="onRowClick(row)">
+    <button class="ui-tree__toggle"
+      type="button"
+      tabindex="-1"
+      aria-hidden="true"
+      data-hidden.attr="row.children.length ? null : ''"
+      click.trigger="onToggleClick(row, $event)">
+      <span class="ui-tree__toggle-icon"></span>
+    </button>
+    <div class="ui-tree__content">
+      <au-slot name="item" expose.bind="row.slotHost">${row.label}</au-slot>
+    </div>
+  </div>
+</template>