@golemui/gui-lit 1.0.3 → 1.1.1-rc.0

package/lib/components/date-picker.element.d.ts

@@ -7,23 +7,12 @@ export declare class DatePickerElement extends LitElement implements WithWidget
     widget: InputWidget<string>;
     formContext: LitFormContext<any>;
     adapter: InputWidgetAdapter<string, DatePickerProps>;
-    dateInput?: HTMLElement;
-    calendarInput?: HTMLElement;
-    isCalendarOpen: boolean;
     subscriptions: Subscription[];
-    onFocusOut: (event: FocusEvent) => void;
-    onDocumentClick: (event: MouseEvent) => void;
     createRenderRoot(): this;
     updated(changedProperties: any): void;
     connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
     valueChanged(event: CustomEvent): void;
-    onCalendarChange(event: CustomEvent): void;
-    onBlurCalendar(): void;
     onInputError(event: CustomEvent): void;
-    onKeyUp(event: Event): void;
-    toggleCalendar(event: Event): void;
-    openCalendar(): void;
-    closeCalendar(): void;
     disconnectedCallback(): void;
 }

package/lib/components/date-time-calendar.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { DateTimeCalendarProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class DateTimeCalendarElement extends LitElement implements WithWidget {
+    widget: InputWidget<string>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<string, DateTimeCalendarProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/date-time-picker.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { DateTimePickerProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class DateTimePickerElement extends LitElement implements WithWidget {
+    widget: InputWidget<string>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<string, DateTimePickerProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/date-time.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { DateTimeInputProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class DateTimeElement extends LitElement implements WithWidget {
+    widget: InputWidget<string>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<string, DateTimeInputProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/dropdown.element.d.ts

@@ -18,6 +18,7 @@ export declare class DropdownElement extends LitElement implements WithWidget {
     private _selectedItem;
     private _inputRef;
     private _listRef;
+    private _ignoreNextFocus;
     onDocumentClick: (event: MouseEvent) => void;
     createRenderRoot(): this;
     updated(changedProperties: any): void;
@@ -31,6 +32,7 @@ export declare class DropdownElement extends LitElement implements WithWidget {
     private _onKeyDown;
     private _onInput;
     private _filterItems;
+    private _onWidgetKeyDown;
     private _onFocus;
     private _onFocusOutInput;
     private _onBlur;

package/lib/components/range-calendar.element.d.ts

@@ -12,6 +12,7 @@ export declare class RangeCalendarElement extends LitElement implements WithWidg
     updated(changedProperties: any): void;
     connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    valueChanged(event: InputEvent): void;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
     disconnectedCallback(): void;
 }

package/lib/components/range-date-picker.element.d.ts

@@ -7,27 +7,12 @@ export declare class RangeDatePickerElement extends LitElement implements WithWi
     widget: InputWidget<DateRange[]>;
     formContext: LitFormContext<any>;
     adapter: InputWidgetAdapter<DateRange[], RangeDatePickerProps>;
-    dateInput?: HTMLElement;
-    calendarInput?: HTMLElement;
-    isCalendarOpen: boolean;
-    focusDate: string | undefined;
     subscriptions: Subscription[];
-    private _ignoreNextFocusOut;
-    onFocusOut: (event: FocusEvent) => void;
-    onDocumentClick: (event: MouseEvent) => void;
-    onDropdownToggle: (event: Event) => void;
     createRenderRoot(): this;
     updated(changedProperties: any): void;
     connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
     valueChanged(event: CustomEvent): void;
-    onBlurCalendar(): void;
     onInputError(event: CustomEvent): void;
-    onPillClick(event: CustomEvent): void;
-    onKeyUp(event: Event): void;
-    toggleCalendar(event: Event): void;
-    openCalendar(): void;
-    closeCalendar(): void;
-    private closePillsDropdown;
     disconnectedCallback(): void;
 }

package/lib/components/range-date-time-calendar.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { DateTimeRange, RangeDateTimeCalendarProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class RangeDateTimeCalendarElement extends LitElement implements WithWidget {
+    widget: InputWidget<DateTimeRange[]>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<DateTimeRange[], RangeDateTimeCalendarProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/range-date-time-input.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { DateTimeRange, RangeDateTimeInputProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class RangeDateTimeInputElement extends LitElement implements WithWidget {
+    widget: InputWidget<DateTimeRange[]>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<DateTimeRange[], RangeDateTimeInputProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/range-date-time-picker.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { DateTimeRange, RangeDateTimePickerProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class RangeDateTimePickerElement extends LitElement implements WithWidget {
+    widget: InputWidget<DateTimeRange[]>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<DateTimeRange[], RangeDateTimePickerProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/range-time-input.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { TimeRange, RangeTimeInputProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class RangeTimeInputElement extends LitElement implements WithWidget {
+    widget: InputWidget<TimeRange[]>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<TimeRange[], RangeTimeInputProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/range-time-picker.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { TimeRange, RangeTimePickerProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class RangeTimePickerElement extends LitElement implements WithWidget {
+    widget: InputWidget<TimeRange[]>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<TimeRange[], RangeTimePickerProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/time-picker.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { TimePickerProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class TimePickerElement extends LitElement implements WithWidget {
+    widget: InputWidget<string>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<string, TimePickerProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/lib/components/time.element.d.ts

@@ -0,0 +1,18 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { TimeInputProps } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class TimeElement extends LitElement implements WithWidget {
+    widget: InputWidget<string>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<string, TimeInputProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    onInputError(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/list-D730tmGN.js

@@ -0,0 +1,297 @@
+import { html as u, LitElement as c } from "lit";
+import { classMap as p } from "lit/directives/class-map.js";
+import "@golemui/core";
+import { property as a, state as h, query as m, customElement as f } from "lit/decorators.js";
+const F = (e) => {
+  const t = {
+    "gui-list__item": !0,
+    "gui-list__item-selected": !!e.selected,
+    "gui-list__item-focused": !!e.focused,
+    "gui-list__item-disabled": !!e.disabled
+  };
+  return u`
+    <div
+      role="option"
+      class=${p(t)}
+      aria-selected=${e.selected ? "true" : "false"}
+      aria-disabled=${e.disabled ? "true" : "false"}
+    >
+      ${e.template}
+    </div>
+  `;
+}, b = (e) => e !== null && typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "template") && Object.prototype.hasOwnProperty.call(e, "value");
+function v(e) {
+  const t = typeof e;
+  return t === "string" || t === "number";
+}
+const g = (e, { valueField: t }) => {
+  if (e === null || typeof e != "object")
+    return !1;
+  const s = e, o = t ?? "value";
+  return !!Object.prototype.hasOwnProperty.call(s, o);
+};
+function y(e, { valueField: t }) {
+  if (e === null || typeof e != "object")
+    throw new Error("Provided value is not an object");
+  const s = e, o = t ?? "value", i = Object.prototype.hasOwnProperty.call(s, o) ? o : void 0;
+  if (!i)
+    throw new Error("No valueField exists on the object");
+  return (r) => {
+    if (r === null || typeof r != "object")
+      throw new Error("Item is not an object");
+    const d = r;
+    return {
+      template: r,
+      value: i ? d[i] : "",
+      ...typeof d.disabled == "boolean" ? { disabled: d.disabled } : {}
+    };
+  };
+}
+const I = (e, t) => {
+  if (Array.isArray(e) && e.length > 0 && !b(e[0])) {
+    if (v(e[0]))
+      return e.map((s) => ({
+        template: s,
+        value: s
+      }));
+    if (g(e[0], t)) {
+      const s = y(e[0], t);
+      return e.map(s);
+    } else
+      throw new Error("Invalid list item shape");
+  }
+  return e;
+};
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? _(t, s) : t, r = e.length - 1, d; r >= 0; r--)
+    (d = e[r]) && (i = (o ? d(t, s, i) : d(i)) || i);
+  return o && i && w(t, s, i), i;
+};
+let n = class extends c {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.valueField = void 0, this.label = void 0, this.hint = void 0, this.items = [], this.itemHeight = void 0, this.height = void 0, this._items = [], this._scrollTop = 0, this._viewportHeight = 0, this._focusedIndex = -1, this.buffer = 5, this.onKeyDown = (e) => {
+      if (this.disabled || this.readOnly) return;
+      const t = this.itemHeight ?? 40, s = Math.ceil(this._viewportHeight / t), o = this.items.length - 1;
+      let i = !1;
+      switch (e.key) {
+        case "ArrowDown":
+          this.setFocusedIndex(this.findEnabledIndex(Math.min(this._focusedIndex + 1, o), 1)), i = !0;
+          break;
+        case "ArrowUp":
+          this.setFocusedIndex(this.findEnabledIndex(Math.max(this._focusedIndex - 1, 0), -1)), i = !0;
+          break;
+        case "PageDown":
+          this.setFocusedIndex(
+            this.findEnabledIndex(Math.min(this._focusedIndex + s, o), 1)
+          ), i = !0;
+          break;
+        case "PageUp":
+          this.setFocusedIndex(
+            this.findEnabledIndex(Math.max(this._focusedIndex - s, 0), -1)
+          ), i = !0;
+          break;
+        case "Home":
+          this.setFocusedIndex(this.findEnabledIndex(0, 1)), i = !0;
+          break;
+        case "End":
+          this.setFocusedIndex(this.findEnabledIndex(o, -1)), i = !0;
+          break;
+        case "Enter":
+        case " ": {
+          const r = this._items[this._focusedIndex];
+          this._focusedIndex >= 0 && r != null && !r.disabled && this.selectItem(r), i = !0;
+          break;
+        }
+      }
+      i && e.preventDefault();
+    }, this.onFocus = () => {
+      if (!this.value || !this.items.length) return;
+      const e = this._items.findIndex((t) => t.value === this.value);
+      this._focusedIndex = e, this.scrollToIndex(e), this.dispatchEvent(
+        new CustomEvent("gui-focus-change", {
+          detail: { index: e },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this.onFocusOut = (e) => {
+      e.relatedTarget && this.contains(e.relatedTarget) || (this._focusedIndex = -1, this.dispatchEvent(
+        new CustomEvent("gui-focus-change", {
+          detail: { index: -1 },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 })));
+    };
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("items") && this.updateItems(), (e.has("items") || e.has("_scrollTop") || e.has("height")) && this.emitRangeChange(), this.syncHostAria();
+  }
+  syncHostAria() {
+    this.setAttribute("role", "listbox"), this.tabIndex = this.disabled ? -1 : 0;
+    const e = (t, s) => {
+      s === null ? this.removeAttribute(t) : this.setAttribute(t, s);
+    };
+    e("aria-required", this.required ? "true" : null), e("aria-disabled", this.disabled || this.readOnly ? "true" : null), e(
+      "aria-activedescendant",
+      this._focusedIndex >= 0 ? `${this.uid}-item-${this._focusedIndex}` : null
+    ), e("aria-label", this.label ?? null), e("aria-description", this.hint ?? null);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focus", this.onFocus), this.addEventListener("focusout", this.onFocusOut);
+  }
+  firstUpdated() {
+    this.measureViewport(), new ResizeObserver(() => this.measureViewport()).observe(this.viewportElement);
+  }
+  render() {
+    const e = this.height ?? 300, t = this.itemHeight ?? 40, s = (this.items?.length ?? 0) * t, { offsetY: o } = this.calculateRange();
+    return u`
+      <div
+        class="gui-list__scroll-viewport"
+        style="max-height: ${e}px; min-height: 40px; overflow-y: auto; position: relative; display: block;"
+        @scroll="${this.onScroll}"
+      >
+        <div
+          class="gui-list__spacer"
+          style="height: ${s}px; width: 1px; opacity: 0; pointer-events: none;"
+        ></div>
+
+        <div
+          class="gui-list__content"
+          style="transform: translateY(${o}px); position: absolute; top: 0; left: 0; width: 100%;"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  focusItemAtIndex(e) {
+    this._focusedIndex = e;
+  }
+  scrollToSelectedIndex() {
+    const e = this._items.findIndex((t) => t.value === this.value);
+    this.scrollToIndex(e);
+  }
+  scrollToIndex(e) {
+    const t = this.itemHeight ?? 40, s = this.height ?? 300, o = e * t, i = o + t, r = this.viewportElement.scrollTop, d = r + s;
+    o < r ? this.viewportElement.scrollTop = o : i > d && (this.viewportElement.scrollTop = i - s);
+  }
+  selectItem(e) {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: e.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * First enabled item index walking from `from` in `direction`, or -1 when
+   * every item that way is disabled — keyboard navigation skips disabled rows.
+   */
+  findEnabledIndex(e, t) {
+    for (let s = e; s >= 0 && s < this._items.length; s += t)
+      if (!this._items[s]?.disabled) return s;
+    return -1;
+  }
+  setFocusedIndex(e) {
+    e < 0 || e >= this.items.length || (this._focusedIndex = e, this.scrollToIndex(e), this.dispatchEvent(
+      new CustomEvent("gui-focus-change", {
+        detail: { index: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  updateItems() {
+    this._items = I(this.items, { valueField: this.valueField }), this.dispatchEvent(
+      new CustomEvent("gui-update-items", {
+        detail: this._items,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  emitRangeChange() {
+    const { startIndex: e, endIndex: t } = this.calculateRange();
+    this.dispatchEvent(
+      new CustomEvent("gui-range-change", {
+        detail: { startIndex: e, endIndex: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  measureViewport() {
+    this.viewportElement && (this._viewportHeight = this.viewportElement.offsetHeight, this.emitRangeChange());
+  }
+  onScroll(e) {
+    const t = e.target;
+    this._scrollTop = t.scrollTop;
+  }
+  calculateRange() {
+    const e = this.itemHeight ?? 40, t = this.items?.length ?? 0, s = Math.ceil(this._viewportHeight / e), o = Math.floor(this._scrollTop / e), i = Math.max(0, o - this.buffer), r = Math.min(t, o + s + this.buffer), d = i * e;
+    return { startIndex: i, endIndex: r, offsetY: d };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("focus", this.onFocus), this.removeEventListener("focusout", this.onFocusOut);
+  }
+};
+l([
+  a({ type: String })
+], n.prototype, "uid", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "touched", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "required", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "disabled", 2);
+l([
+  a({ type: Boolean, attribute: "readonly" })
+], n.prototype, "readOnly", 2);
+l([
+  a({ type: String })
+], n.prototype, "value", 2);
+l([
+  a({ type: String })
+], n.prototype, "valueField", 2);
+l([
+  a({ type: String })
+], n.prototype, "label", 2);
+l([
+  a({ type: String })
+], n.prototype, "hint", 2);
+l([
+  a({ type: Array })
+], n.prototype, "items", 2);
+l([
+  a({ type: Number })
+], n.prototype, "itemHeight", 2);
+l([
+  a({ type: Number })
+], n.prototype, "height", 2);
+l([
+  h()
+], n.prototype, "_items", 2);
+l([
+  h()
+], n.prototype, "_scrollTop", 2);
+l([
+  h()
+], n.prototype, "_viewportHeight", 2);
+l([
+  h()
+], n.prototype, "_focusedIndex", 2);
+l([
+  m(".gui-list__scroll-viewport")
+], n.prototype, "viewportElement", 2);
+n = l([
+  f("gui-list")
+], n);
+typeof customElements < "u" && !customElements.get("gui-list") && customElements.define("gui-list", n);
+export {
+  F as d
+};