@aurelia-ui-toolkits/headless 1.0.0

package/dist/splitter/ui-splitter.js

@@ -0,0 +1,257 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-splitter.html?raw';
+let UiSplitter = (() => {
+    let _classDecorators = [customElement({ name: 'ui-splitter', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _direction_decorators;
+    let _direction_initializers = [];
+    let _direction_extraInitializers = [];
+    let _min_decorators;
+    let _min_initializers = [];
+    let _min_extraInitializers = [];
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _storageKey_decorators;
+    let _storageKey_initializers = [];
+    let _storageKey_extraInitializers = [];
+    var UiSplitter = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _size_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _direction_decorators = [bindable];
+            _min_decorators = [bindable];
+            _max_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _storageKey_decorators = [bindable];
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _direction_decorators, { kind: "field", name: "direction", static: false, private: false, access: { has: obj => "direction" in obj, get: obj => obj.direction, set: (obj, value) => { obj.direction = value; } }, metadata: _metadata }, _direction_initializers, _direction_extraInitializers);
+            __esDecorate(null, null, _min_decorators, { kind: "field", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
+            __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_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, null, _storageKey_decorators, { kind: "field", name: "storageKey", static: false, private: false, access: { has: obj => "storageKey" in obj, get: obj => obj.storageKey, set: (obj, value) => { obj.storageKey = value; } }, metadata: _metadata }, _storageKey_initializers, _storageKey_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiSplitter = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        targetElement;
+        startPosition = 0;
+        startSize = 0;
+        dragging = false;
+        pointerMoved = false;
+        expandedSize = 240;
+        targetDisplay = '';
+        targetOverflow = '';
+        size = __runInitializers(this, _size_initializers, 240);
+        sizeChanged() {
+            this.applySize();
+            this.updateValueNow();
+        }
+        direction = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _direction_initializers, 'horizontal'));
+        directionChanged() {
+            this.applySize();
+        }
+        min = (__runInitializers(this, _direction_extraInitializers), __runInitializers(this, _min_initializers, 80));
+        max = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, 800));
+        disabled = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        storageKey = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _storageKey_initializers, void 0));
+        valueNow = (__runInitializers(this, _storageKey_extraInitializers), 240);
+        attaching() {
+            this.targetElement = this.host.previousElementSibling instanceof HTMLElement
+                ? this.host.previousElementSibling
+                : undefined;
+            this.targetDisplay = this.targetElement?.style.display ?? '';
+            this.targetOverflow = this.targetElement?.style.overflow ?? '';
+            this.expandedSize = this.size;
+            this.loadSize();
+            this.applySize();
+            this.updateValueNow();
+        }
+        detaching() {
+            this.stopDragging();
+        }
+        handleEvent(event) {
+            if (event.type === 'pointermove') {
+                this.onPointerMove(event);
+                return;
+            }
+            if (event.type === 'pointerup') {
+                this.onPointerUp();
+            }
+        }
+        onPointerDown(event) {
+            if (this.disabled || !this.targetElement) {
+                return;
+            }
+            event.preventDefault();
+            this.dragging = true;
+            this.pointerMoved = false;
+            this.startPosition = this.direction === 'horizontal' ? event.clientX : event.clientY;
+            this.startSize = this.size;
+            this.host.setPointerCapture(event.pointerId);
+            window.addEventListener('pointermove', this);
+            window.addEventListener('pointerup', this);
+        }
+        onKeyDown(event) {
+            if (this.disabled) {
+                return;
+            }
+            const largeStep = event.shiftKey ? 50 : 10;
+            if (this.direction === 'horizontal') {
+                if (event.key === Keys.ArrowLeft) {
+                    event.preventDefault();
+                    this.setSize(this.size - largeStep, true);
+                    return;
+                }
+                if (event.key === Keys.ArrowRight) {
+                    event.preventDefault();
+                    this.setSize(this.size + largeStep, true);
+                    return;
+                }
+            }
+            else {
+                if (event.key === Keys.ArrowUp) {
+                    event.preventDefault();
+                    this.setSize(this.size - largeStep, true);
+                    return;
+                }
+                if (event.key === Keys.ArrowDown) {
+                    event.preventDefault();
+                    this.setSize(this.size + largeStep, true);
+                    return;
+                }
+            }
+            if (event.key === Keys.Home) {
+                event.preventDefault();
+                this.setSize(this.minSize, true);
+                return;
+            }
+            if (event.key === Keys.End) {
+                event.preventDefault();
+                this.setSize(this.maxSize, true);
+            }
+        }
+        onPointerMove(event) {
+            if (!this.dragging) {
+                return;
+            }
+            const position = this.direction === 'horizontal' ? event.clientX : event.clientY;
+            this.pointerMoved ||= Math.abs(position - this.startPosition) > 3;
+            this.setSize(this.startSize + position - this.startPosition);
+        }
+        onPointerUp() {
+            if (!this.dragging) {
+                return;
+            }
+            this.stopDragging();
+            if (!this.pointerMoved) {
+                this.toggleCollapsed();
+                return;
+            }
+            this.persistSize();
+        }
+        stopDragging() {
+            this.dragging = false;
+            window.removeEventListener('pointermove', this);
+            window.removeEventListener('pointerup', this);
+        }
+        setSize(size, persist = false) {
+            this.size = Math.max(this.minSize, Math.min(this.maxSize, Number(size) || this.minSize));
+            this.expandedSize = this.size;
+            this.applySize();
+            this.updateValueNow();
+            if (persist) {
+                this.persistSize();
+            }
+        }
+        toggleCollapsed() {
+            if (this.size <= 0) {
+                this.size = Math.max(this.minSize, Math.min(this.maxSize, this.expandedSize || this.minSize));
+            }
+            else {
+                this.expandedSize = this.size;
+                this.size = 0;
+            }
+            this.applySize();
+            this.updateValueNow();
+            this.persistSize();
+        }
+        applySize() {
+            if (!this.targetElement) {
+                return;
+            }
+            const sizeValue = Math.max(0, Number(this.size) || 0);
+            const size = `${sizeValue}px`;
+            this.targetElement.style.display = sizeValue === 0 ? 'none' : this.targetDisplay;
+            this.targetElement.style.flexGrow = '0';
+            this.targetElement.style.flexShrink = '0';
+            this.targetElement.style.overflow = sizeValue === 0 ? 'hidden' : this.targetOverflow;
+            if (this.direction === 'horizontal') {
+                this.targetElement.style.width = size;
+                this.targetElement.style.flexBasis = size;
+                this.targetElement.style.height = '';
+                return;
+            }
+            this.targetElement.style.height = size;
+            this.targetElement.style.flexBasis = size;
+            this.targetElement.style.width = '';
+        }
+        updateValueNow() {
+            this.valueNow = Math.max(0, Math.min(this.maxSize, Number(this.size) || 0));
+        }
+        loadSize() {
+            if (!this.storageKey) {
+                return;
+            }
+            try {
+                const value = localStorage.getItem(this.storageId);
+                if (value !== null) {
+                    this.size = Math.max(0, Math.min(this.maxSize, Number(value) || 0));
+                    if (this.size > 0) {
+                        this.expandedSize = this.size;
+                    }
+                }
+            }
+            catch {
+                // Ignore unavailable storage.
+            }
+        }
+        persistSize() {
+            if (!this.storageKey) {
+                return;
+            }
+            try {
+                localStorage.setItem(this.storageId, String(this.size));
+            }
+            catch {
+                // Ignore unavailable storage.
+            }
+        }
+        get minSize() {
+            return Math.max(0, Number(this.min) || 0);
+        }
+        get maxSize() {
+            return Math.max(this.minSize, Number(this.max) || this.minSize);
+        }
+        get storageId() {
+            return `ui-splitter:${this.storageKey}:size`;
+        }
+    };
+    return UiSplitter = _classThis;
+})();
+export { UiSplitter };
+//# sourceMappingURL=ui-splitter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-splitter.js","sourceRoot":"","sources":["../../src/splitter/ui-splitter.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { Keys } from '../base/keys';\nimport template from './ui-splitter.html?raw';\n\ntype SplitterDirection = 'horizontal' | 'vertical';\n\n@customElement({ name: 'ui-splitter', template })\nexport class UiSplitter implements EventListenerObject {\n  private readonly host = resolve(INode) as HTMLElement;\n  private targetElement: HTMLElement | undefined;\n  private startPosition = 0;\n  private startSize = 0;\n  private dragging = false;\n  private pointerMoved = false;\n  private expandedSize = 240;\n  private targetDisplay = '';\n  private targetOverflow = '';\n\n  @bindable({ mode: BindingMode.twoWay })\n  size: number = 240;\n  sizeChanged(): void {\n    this.applySize();\n    this.updateValueNow();\n  }\n\n  @bindable\n  direction: SplitterDirection = 'horizontal';\n  directionChanged(): void {\n    this.applySize();\n  }\n\n  @bindable\n  min: number = 80;\n\n  @bindable\n  max: number = 800;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  @bindable\n  storageKey: string | undefined;\n\n  valueNow = 240;\n\n  attaching(): void {\n    this.targetElement = this.host.previousElementSibling instanceof HTMLElement\n      ? this.host.previousElementSibling\n      : undefined;\n    this.targetDisplay = this.targetElement?.style.display ?? '';\n    this.targetOverflow = this.targetElement?.style.overflow ?? '';\n    this.expandedSize = this.size;\n    this.loadSize();\n    this.applySize();\n    this.updateValueNow();\n  }\n\n  detaching(): void {\n    this.stopDragging();\n  }\n\n  handleEvent(event: Event): void {\n    if (event.type === 'pointermove') {\n      this.onPointerMove(event as PointerEvent);\n      return;\n    }\n\n    if (event.type === 'pointerup') {\n      this.onPointerUp();\n    }\n  }\n\n  onPointerDown(event: PointerEvent): void {\n    if (this.disabled || !this.targetElement) {\n      return;\n    }\n\n    event.preventDefault();\n    this.dragging = true;\n    this.pointerMoved = false;\n    this.startPosition = this.direction === 'horizontal' ? event.clientX : event.clientY;\n    this.startSize = this.size;\n    this.host.setPointerCapture(event.pointerId);\n    window.addEventListener('pointermove', this);\n    window.addEventListener('pointerup', this);\n  }\n\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const largeStep = event.shiftKey ? 50 : 10;\n    if (this.direction === 'horizontal') {\n      if (event.key === Keys.ArrowLeft) {\n        event.preventDefault();\n        this.setSize(this.size - largeStep, true);\n        return;\n      }\n      if (event.key === Keys.ArrowRight) {\n        event.preventDefault();\n        this.setSize(this.size + largeStep, true);\n        return;\n      }\n    } else {\n      if (event.key === Keys.ArrowUp) {\n        event.preventDefault();\n        this.setSize(this.size - largeStep, true);\n        return;\n      }\n      if (event.key === Keys.ArrowDown) {\n        event.preventDefault();\n        this.setSize(this.size + largeStep, true);\n        return;\n      }\n    }\n\n    if (event.key === Keys.Home) {\n      event.preventDefault();\n      this.setSize(this.minSize, true);\n      return;\n    }\n\n    if (event.key === Keys.End) {\n      event.preventDefault();\n      this.setSize(this.maxSize, true);\n    }\n  }\n\n  private onPointerMove(event: PointerEvent): void {\n    if (!this.dragging) {\n      return;\n    }\n\n    const position = this.direction === 'horizontal' ? event.clientX : event.clientY;\n    this.pointerMoved ||= Math.abs(position - this.startPosition) > 3;\n    this.setSize(this.startSize + position - this.startPosition);\n  }\n\n  private onPointerUp(): void {\n    if (!this.dragging) {\n      return;\n    }\n\n    this.stopDragging();\n    if (!this.pointerMoved) {\n      this.toggleCollapsed();\n      return;\n    }\n    this.persistSize();\n  }\n\n  private stopDragging(): void {\n    this.dragging = false;\n    window.removeEventListener('pointermove', this);\n    window.removeEventListener('pointerup', this);\n  }\n\n  private setSize(size: number, persist = false): void {\n    this.size = Math.max(this.minSize, Math.min(this.maxSize, Number(size) || this.minSize));\n    this.expandedSize = this.size;\n    this.applySize();\n    this.updateValueNow();\n    if (persist) {\n      this.persistSize();\n    }\n  }\n\n  private toggleCollapsed(): void {\n    if (this.size <= 0) {\n      this.size = Math.max(this.minSize, Math.min(this.maxSize, this.expandedSize || this.minSize));\n    } else {\n      this.expandedSize = this.size;\n      this.size = 0;\n    }\n    this.applySize();\n    this.updateValueNow();\n    this.persistSize();\n  }\n\n  private applySize(): void {\n    if (!this.targetElement) {\n      return;\n    }\n\n    const sizeValue = Math.max(0, Number(this.size) || 0);\n    const size = `${sizeValue}px`;\n    this.targetElement.style.display = sizeValue === 0 ? 'none' : this.targetDisplay;\n    this.targetElement.style.flexGrow = '0';\n    this.targetElement.style.flexShrink = '0';\n    this.targetElement.style.overflow = sizeValue === 0 ? 'hidden' : this.targetOverflow;\n    if (this.direction === 'horizontal') {\n      this.targetElement.style.width = size;\n      this.targetElement.style.flexBasis = size;\n      this.targetElement.style.height = '';\n      return;\n    }\n\n    this.targetElement.style.height = size;\n    this.targetElement.style.flexBasis = size;\n    this.targetElement.style.width = '';\n  }\n  private updateValueNow(): void {\n    this.valueNow = Math.max(0, Math.min(this.maxSize, Number(this.size) || 0));\n  }\n\n  private loadSize(): void {\n    if (!this.storageKey) {\n      return;\n    }\n\n    try {\n      const value = localStorage.getItem(this.storageId);\n      if (value !== null) {\n        this.size = Math.max(0, Math.min(this.maxSize, Number(value) || 0));\n        if (this.size > 0) {\n          this.expandedSize = this.size;\n        }\n      }\n    } catch {\n      // Ignore unavailable storage.\n    }\n  }\n\n  private persistSize(): void {\n    if (!this.storageKey) {\n      return;\n    }\n\n    try {\n      localStorage.setItem(this.storageId, String(this.size));\n    } catch {\n      // Ignore unavailable storage.\n    }\n  }\n\n  private get minSize(): number {\n    return Math.max(0, Number(this.min) || 0);\n  }\n\n  private get maxSize(): number {\n    return Math.max(this.minSize, Number(this.max) || this.minSize);\n  }\n\n  private get storageId(): string {\n    return `ui-splitter:${this.storageKey}:size`;\n  }\n}\n"]}

package/dist/switch/ui-switch.html

@@ -0,0 +1,23 @@
+<template class="ui-switch"
+  role="switch"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-checked.attr="checked ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? '' : null"
+  data-checked.attr="checked ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-changing.attr="changing ? '' : null"
+  click.trigger="onClick()"
+  keyup.trigger="onKeyUp($event)"
+  keypress.trigger="onKeyPress($event)"
+  mouseenter.trigger="onMouseEnter()"
+  mouseleave.trigger="onMouseLeave()"
+  focusin.trigger="onFocusIn()"
+  focusout.trigger="onFocusOut()"
+  pointerdown.trigger="onPointerDown()"
+  pointerup.trigger="onPointerUp()"
+  pointerleave.trigger="onPointerLeave()">
+  <span class="ui-switch__thumb" aria-hidden="true"></span>
+</template>

package/dist/switch/ui-switch.js

@@ -0,0 +1,121 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-switch.html?raw';
+let UiSwitch = (() => {
+    let _classDecorators = [customElement({ name: 'ui-switch', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _checked_decorators;
+    let _checked_initializers = [];
+    let _checked_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    var UiSwitch = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _checked_decorators = [bindable({ mode: BindingMode.twoWay, set: booleanAttr })];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            __esDecorate(null, null, _checked_decorators, { kind: "field", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_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);
+            UiSwitch = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        checked = __runInitializers(this, _checked_initializers, false);
+        disabled = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        hover = (__runInitializers(this, _disabled_extraInitializers), false);
+        focus = false;
+        active = false;
+        changing = false;
+        changingFrame;
+        onClick() {
+            this.toggle();
+        }
+        onKeyUp(event) {
+            if (event.key === Keys.Space) {
+                event.preventDefault();
+                this.toggle();
+                return;
+            }
+            if (event.key === Keys.Enter) {
+                this.submitClosestForm(event.currentTarget);
+            }
+        }
+        onKeyPress(event) {
+            if (event.key === Keys.Space || event.key === Keys.Enter) {
+                event.preventDefault();
+            }
+        }
+        onMouseEnter() {
+            if (!this.disabled) {
+                this.hover = true;
+            }
+        }
+        onMouseLeave() {
+            this.hover = false;
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut() {
+            this.focus = false;
+        }
+        onPointerDown() {
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        detaching() {
+            if (this.changingFrame) {
+                cancelAnimationFrame(this.changingFrame);
+                this.changingFrame = undefined;
+            }
+        }
+        toggle() {
+            if (this.disabled) {
+                return;
+            }
+            this.changing = true;
+            this.checked = !this.checked;
+            this.host.dispatchEvent(new Event('input', { bubbles: true }));
+            this.host.dispatchEvent(new Event('change', { bubbles: true }));
+            if (this.changingFrame) {
+                cancelAnimationFrame(this.changingFrame);
+            }
+            this.changingFrame = requestAnimationFrame(() => {
+                this.changing = false;
+                this.changingFrame = undefined;
+            });
+        }
+        submitClosestForm(target) {
+            const element = target instanceof HTMLElement ? target : null;
+            const form = element?.closest('form');
+            if (!form || this.disabled) {
+                return;
+            }
+            if (typeof form.requestSubmit === 'function') {
+                form.requestSubmit();
+                return;
+            }
+            form.submit();
+        }
+    };
+    return UiSwitch = _classThis;
+})();
+export { UiSwitch };
+//# sourceMappingURL=ui-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-switch.js","sourceRoot":"","sources":["../../src/switch/ui-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,QAAQ,MAAM,sBAAsB,CAAC;IAG/B,QAAQ;4BADpB,aAAa,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;mCAI5C,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;oCAGxD,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;YAF/B,uKAAA,OAAO,6BAAP,OAAO,yFAAkB;YAGzB,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAP5B,6KAkHC;;;YAlHY,uDAAQ;;QACF,IAAI,GAAG,OAAO,CAAC,KAAK,CAAgB,CAAC;QAGtD,OAAO,kDAAY,KAAK,EAAC;QAGzB,QAAQ,yGAAY,KAAK,GAAC;QAE1B,KAAK,0DAAY,KAAK,EAAC;QACvB,KAAK,GAAY,KAAK,CAAC;QACvB,MAAM,GAAY,KAAK,CAAC;QACxB,QAAQ,GAAY,KAAK,CAAC;QAElB,aAAa,CAAqB;QAE1C,OAAO;YACL,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;QAED,OAAO,CAAC,KAAoB;YAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,OAAO;YACT,CAAC;YAED,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC7B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;QAED,UAAU,CAAC,KAAoB;YAC7B,IAAI,KAAK,CAAC,GAAG,KAAM,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;QAED,YAAY;YACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;QAED,YAAY;YACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,SAAS;YACP,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;QAED,UAAU;YACR,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,aAAa;YACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;QAED,WAAW;YACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QAED,cAAc;YACZ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QAED,SAAS;YACP,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACzC,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;YACjC,CAAC;QACH,CAAC;QAEO,MAAM;YACZ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAC/D,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAEhE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC3C,CAAC;YAED,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBAC9C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;YACjC,CAAC,CAAC,CAAC;QACL,CAAC;QAEO,iBAAiB,CAAC,MAA0B;YAClD,MAAM,OAAO,GAAG,MAAM,YAAY,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9D,MAAM,IAAI,GAAG,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;YAEtC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YAED,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,UAAU,EAAE,CAAC;gBAC7C,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;;;;SAjHU,QAAQ","sourcesContent":["import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { Keys } from '../base/keys';\nimport template from './ui-switch.html?raw';\n\n@customElement({ name: 'ui-switch', template })\nexport class UiSwitch {\n  private readonly host = resolve(INode) as HTMLElement;\n\n  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })\n  checked: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  hover: boolean = false;\n  focus: boolean = false;\n  active: boolean = false;\n  changing: boolean = false;\n\n  private changingFrame: number | undefined;\n\n  onClick(): void {\n    this.toggle();\n  }\n\n  onKeyUp(event: KeyboardEvent): void {\n    if (event.key === Keys.Space) {\n      event.preventDefault();\n      this.toggle();\n      return;\n    }\n\n    if (event.key === Keys.Enter) {\n      this.submitClosestForm(event.currentTarget);\n    }\n  }\n\n  onKeyPress(event: KeyboardEvent): void {\n    if (event.key ===  Keys.Space || event.key === Keys.Enter) {\n      event.preventDefault();\n    }\n  }\n\n  onMouseEnter(): void {\n    if (!this.disabled) {\n      this.hover = true;\n    }\n  }\n\n  onMouseLeave(): void {\n    this.hover = false;\n  }\n\n  onFocusIn(): void {\n    if (!this.disabled) {\n      this.focus = true;\n    }\n  }\n\n  onFocusOut(): void {\n    this.focus = false;\n  }\n\n  onPointerDown(): void {\n    if (!this.disabled) {\n      this.active = true;\n    }\n  }\n\n  onPointerUp(): void {\n    this.active = false;\n  }\n\n  onPointerLeave(): void {\n    this.active = false;\n  }\n\n  detaching(): void {\n    if (this.changingFrame) {\n      cancelAnimationFrame(this.changingFrame);\n      this.changingFrame = undefined;\n    }\n  }\n\n  private toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.changing = true;\n    this.checked = !this.checked;\n    this.host.dispatchEvent(new Event('input', { bubbles: true }));\n    this.host.dispatchEvent(new Event('change', { bubbles: true }));\n\n    if (this.changingFrame) {\n      cancelAnimationFrame(this.changingFrame);\n    }\n\n    this.changingFrame = requestAnimationFrame(() => {\n      this.changing = false;\n      this.changingFrame = undefined;\n    });\n  }\n\n  private submitClosestForm(target: EventTarget | null): void {\n    const element = target instanceof HTMLElement ? target : null;\n    const form = element?.closest('form');\n\n    if (!form || this.disabled) {\n      return;\n    }\n\n    if (typeof form.requestSubmit === 'function') {\n      form.requestSubmit();\n      return;\n    }\n\n    form.submit();\n  }\n}\n"]}

package/dist/table/enhance-ui-table.js

@@ -0,0 +1,25 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { templateCompilerHooks } from 'aurelia';
+let EnhanceUiTable = (() => {
+    let _classDecorators = [templateCompilerHooks];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var EnhanceUiTable = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            EnhanceUiTable = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        compiling(template) {
+            template.innerHTML = template.innerHTML.replace(/\sui-table-column="([^"]*)"/g, ' as-element="ui-table-column" id="$1"');
+            template.innerHTML = template.innerHTML.replace(/\sui-table-column(?:="")?(?=\s|>)/g, ' as-element="ui-table-column"');
+        }
+    };
+    return EnhanceUiTable = _classThis;
+})();
+export { EnhanceUiTable };
+//# sourceMappingURL=enhance-ui-table.js.map

package/dist/table/enhance-ui-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhance-ui-table.js","sourceRoot":"","sources":["../../src/table/enhance-ui-table.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;IAGnC,cAAc;4BAD1B,qBAAqB;;;;;;;;YACtB,6KAKC;;;YALY,uDAAc;;QACzB,SAAS,CAAC,QAA2C;YACnD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,8BAA8B,EAAE,uCAAuC,CAAC,CAAC;YACzH,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,oCAAoC,EAAE,+BAA+B,CAAC,CAAC;QACzH,CAAC;;;;SAJU,cAAc","sourcesContent":["import { templateCompilerHooks } from 'aurelia';\n\n@templateCompilerHooks\nexport class EnhanceUiTable {\n  compiling(template: HTMLElement | HTMLTemplateElement) {\n    template.innerHTML = template.innerHTML.replace(/\\sui-table-column=\"([^\"]*)\"/g, ' as-element=\"ui-table-column\" id=\"$1\"');\n    template.innerHTML = template.innerHTML.replace(/\\sui-table-column(?:=\"\")?(?=\\s|>)/g, ' as-element=\"ui-table-column\"');\n  }\n}\n"]}

package/dist/table/ui-table-column.html

@@ -0,0 +1,17 @@
+<template class="ui-table-column"
+  data-sortable.attr="sortable ? '' : null"
+  data-resizable.attr="resizable ? '' : null"
+  data-sort.attr="direction || ''"
+  aria-sort.attr="direction ? (direction === 'asc' ? 'ascending' : 'descending') : null"
+  click.trigger="onClick($event)">
+  <au-slot></au-slot>
+  <span class="ui-table-column__sort-indicator" if.bind="direction" aria-hidden="true">
+    <span>${direction === 'asc' ? '↑' : '↓'}</span>
+    <span class="ui-table-column__sort-order" if.bind="sortOrder">${sortOrder}</span>
+  </span>
+  <span class="ui-table-column__resize-handle"
+    if.bind="resizable"
+    ref="resizeHandle"
+    aria-hidden="true"
+    pointerdown.trigger="onPointerDown($event)"></span>
+</template>

package/dist/table/ui-table-column.js

@@ -0,0 +1,127 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { UiTable } from './ui-table';
+import template from './ui-table-column.html?raw';
+let UiTableColumn = (() => {
+    let _classDecorators = [customElement({ name: 'ui-table-column', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _sortable_decorators;
+    let _sortable_initializers = [];
+    let _sortable_extraInitializers = [];
+    let _resizable_decorators;
+    let _resizable_initializers = [];
+    let _resizable_extraInitializers = [];
+    let _minWidth_decorators;
+    let _minWidth_initializers = [];
+    let _minWidth_extraInitializers = [];
+    let _direction_decorators;
+    let _direction_initializers = [];
+    let _direction_extraInitializers = [];
+    let _sortOrder_decorators;
+    let _sortOrder_initializers = [];
+    let _sortOrder_extraInitializers = [];
+    var UiTableColumn = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _sortable_decorators = [bindable({ set: booleanAttr })];
+            _resizable_decorators = [bindable({ set: booleanAttr })];
+            _minWidth_decorators = [bindable];
+            _direction_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _sortOrder_decorators = [bindable];
+            __esDecorate(null, null, _sortable_decorators, { kind: "field", name: "sortable", static: false, private: false, access: { has: obj => "sortable" in obj, get: obj => obj.sortable, set: (obj, value) => { obj.sortable = value; } }, metadata: _metadata }, _sortable_initializers, _sortable_extraInitializers);
+            __esDecorate(null, null, _resizable_decorators, { kind: "field", name: "resizable", static: false, private: false, access: { has: obj => "resizable" in obj, get: obj => obj.resizable, set: (obj, value) => { obj.resizable = value; } }, metadata: _metadata }, _resizable_initializers, _resizable_extraInitializers);
+            __esDecorate(null, null, _minWidth_decorators, { kind: "field", name: "minWidth", static: false, private: false, access: { has: obj => "minWidth" in obj, get: obj => obj.minWidth, set: (obj, value) => { obj.minWidth = value; } }, metadata: _metadata }, _minWidth_initializers, _minWidth_extraInitializers);
+            __esDecorate(null, null, _direction_decorators, { kind: "field", name: "direction", static: false, private: false, access: { has: obj => "direction" in obj, get: obj => obj.direction, set: (obj, value) => { obj.direction = value; } }, metadata: _metadata }, _direction_initializers, _direction_extraInitializers);
+            __esDecorate(null, null, _sortOrder_decorators, { kind: "field", name: "sortOrder", static: false, private: false, access: { has: obj => "sortOrder" in obj, get: obj => obj.sortOrder, set: (obj, value) => { obj.sortOrder = value; } }, metadata: _metadata }, _sortOrder_initializers, _sortOrder_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiTableColumn = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        table = resolve(UiTable);
+        resizeHandle;
+        startX = 0;
+        startWidth = 0;
+        resizing = false;
+        sortable = __runInitializers(this, _sortable_initializers, false);
+        resizable = (__runInitializers(this, _sortable_extraInitializers), __runInitializers(this, _resizable_initializers, false));
+        minWidth = (__runInitializers(this, _resizable_extraInitializers), __runInitializers(this, _minWidth_initializers, 64));
+        direction = (__runInitializers(this, _minWidth_extraInitializers), __runInitializers(this, _direction_initializers, void 0));
+        sortOrder = (__runInitializers(this, _direction_extraInitializers), __runInitializers(this, _sortOrder_initializers, void 0));
+        attaching() {
+            this.applyWidth(this.table.getColumnWidth(this.host.id));
+        }
+        detaching() {
+            window.removeEventListener('pointermove', this);
+            window.removeEventListener('pointerup', this);
+        }
+        handleEvent(event) {
+            if (event.type === 'pointermove') {
+                this.onPointerMove(event);
+                return;
+            }
+            if (event.type === 'pointerup') {
+                this.onPointerUp();
+            }
+        }
+        applyWidth(width) {
+            if (width === undefined) {
+                this.host.style.removeProperty('width');
+                this.host.style.removeProperty('min-width');
+                return;
+            }
+            this.host.style.width = `${width}px`;
+            this.host.style.minWidth = `${width}px`;
+        }
+        onClick(event) {
+            if (!this.sortable || this.resizing || this.resizeHandle?.contains(event.target)) {
+                return;
+            }
+            const direction = !this.direction ? 'asc' : this.direction === 'asc' ? 'desc' : undefined;
+            this.host.dispatchEvent(new CustomEvent('column-sort', {
+                bubbles: true,
+                detail: { column: this.host.id, columnViewModel: this, direction, multiple: event.ctrlKey }
+            }));
+        }
+        onPointerDown(event) {
+            if (!this.resizable) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.resizing = true;
+            this.startX = event.clientX;
+            this.startWidth = this.host.getBoundingClientRect().width;
+            this.resizeHandle?.setPointerCapture(event.pointerId);
+            window.addEventListener('pointermove', this);
+            window.addEventListener('pointerup', this);
+        }
+        onPointerMove(event) {
+            if (!this.resizing) {
+                return;
+            }
+            const width = Math.max(Number(this.minWidth) || 64, this.startWidth + event.clientX - this.startX);
+            this.table.setColumnWidth(this.host.id, width);
+        }
+        onPointerUp() {
+            if (!this.resizing) {
+                return;
+            }
+            this.resizing = false;
+            window.removeEventListener('pointermove', this);
+            window.removeEventListener('pointerup', this);
+            this.table.setColumnWidth(this.host.id, this.host.getBoundingClientRect().width, true);
+        }
+        constructor() {
+            __runInitializers(this, _sortOrder_extraInitializers);
+        }
+    };
+    return UiTableColumn = _classThis;
+})();
+export { UiTableColumn };
+//# sourceMappingURL=ui-table-column.js.map

package/dist/table/ui-table-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-table-column.js","sourceRoot":"","sources":["../../src/table/ui-table-column.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { UiTable } from './ui-table';\nimport template from './ui-table-column.html?raw';\n\n@customElement({ name: 'ui-table-column', template })\nexport class UiTableColumn implements EventListenerObject {\n  readonly host = resolve(INode) as HTMLElement;\n  readonly table = resolve(UiTable);\n  private resizeHandle: HTMLElement | undefined;\n  private startX = 0;\n  private startWidth = 0;\n  private resizing = false;\n\n  @bindable({ set: booleanAttr })\n  sortable: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  resizable: boolean = false;\n\n  @bindable\n  minWidth: number = 64;\n\n  @bindable({ mode: BindingMode.twoWay })\n  direction: 'asc' | 'desc' | undefined;\n\n  @bindable\n  sortOrder: number | undefined;\n\n  attaching(): void {\n    this.applyWidth(this.table.getColumnWidth(this.host.id));\n  }\n\n  detaching(): void {\n    window.removeEventListener('pointermove', this);\n    window.removeEventListener('pointerup', this);\n  }\n\n  handleEvent(event: Event): void {\n    if (event.type === 'pointermove') {\n      this.onPointerMove(event as PointerEvent);\n      return;\n    }\n\n    if (event.type === 'pointerup') {\n      this.onPointerUp();\n    }\n  }\n\n  applyWidth(width: number | undefined): void {\n    if (width === undefined) {\n      this.host.style.removeProperty('width');\n      this.host.style.removeProperty('min-width');\n      return;\n    }\n\n    this.host.style.width = `${width}px`;\n    this.host.style.minWidth = `${width}px`;\n  }\n\n  onClick(event: MouseEvent): void {\n    if (!this.sortable || this.resizing || this.resizeHandle?.contains(event.target as Node | null)) {\n      return;\n    }\n\n    const direction = !this.direction ? 'asc' : this.direction === 'asc' ? 'desc' : undefined;\n\n    this.host.dispatchEvent(new CustomEvent('column-sort', {\n      bubbles: true,\n      detail: { column: this.host.id, columnViewModel: this, direction, multiple: event.ctrlKey }\n    }));\n  }\n\n  onPointerDown(event: PointerEvent): void {\n    if (!this.resizable) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n    this.resizing = true;\n    this.startX = event.clientX;\n    this.startWidth = this.host.getBoundingClientRect().width;\n    this.resizeHandle?.setPointerCapture(event.pointerId);\n    window.addEventListener('pointermove', this);\n    window.addEventListener('pointerup', this);\n  }\n\n  private onPointerMove(event: PointerEvent): void {\n    if (!this.resizing) {\n      return;\n    }\n\n    const width = Math.max(Number(this.minWidth) || 64, this.startWidth + event.clientX - this.startX);\n    this.table.setColumnWidth(this.host.id, width);\n  }\n\n  private onPointerUp(): void {\n    if (!this.resizing) {\n      return;\n    }\n\n    this.resizing = false;\n    window.removeEventListener('pointermove', this);\n    window.removeEventListener('pointerup', this);\n    this.table.setColumnWidth(this.host.id, this.host.getBoundingClientRect().width, true);\n  }\n}\n"]}