@sbb-esta/lyne-elements 1.2.1 → 1.4.0

package/datepicker/datepicker.js

@@ -1,78 +1,75 @@
-import { css as c, LitElement as b, html as f } from "lit";
-import { property as u, state as E, customElement as g } from "lit/decorators.js";
-import { readConfig as v } from "../core/config.js";
-import { SbbConnectedAbortController as C, SbbLanguageController as w } from "../core/controllers.js";
-import { defaultDateAdapter as m } from "../core/datetime.js";
-import { findReferencedElement as D, findInput as h } from "../core/dom.js";
+import { css as v, LitElement as b, html as f } from "lit";
+import { property as u, state as g, customElement as A } from "lit/decorators.js";
+import { readConfig as c } from "../core/config.js";
+import { SbbConnectedAbortController as D, SbbLanguageController as E } from "../core/controllers.js";
+import { defaultDateAdapter as _ } from "../core/datetime.js";
+import { findReferencedElement as w, findInput as C } from "../core/dom.js";
 import { EventEmitter as d } from "../core/eventing.js";
-import { i18nDatePickerPlaceholder as p, i18nDateChangedTo as A } from "../core/i18n.js";
-import { AgnosticMutationObserver as y } from "../core/observers.js";
-const V = c`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (t, e, n, a) => {
-  for (var i = a > 1 ? void 0 : a ? P(e, n) : e, s = t.length - 1, o; s >= 0; s--)
-    (o = t[s]) && (i = (a ? o(e, n, i) : o(i)) || i);
-  return a && i && x(e, n, i), i;
+import { i18nDatePickerPlaceholder as h, i18nDateChangedTo as y } from "../core/i18n.js";
+import { AgnosticMutationObserver as I } from "../core/observers.js";
+const P = v`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var U = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? k(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && U(e, i, s), s;
 };
-const U = /(^0?[1-9]?|[12]?[0-9]?|3?[01]?)[.,\\/\-\s](0?[1-9]?|1?[0-2]?)?[.,\\/\-\s](\d{1,4}$)?/;
-function N(t, e) {
-  var n;
-  if (!e) {
-    const a = (n = t.closest) == null ? void 0 : n.call(t, "sbb-form-field");
-    return a == null ? void 0 : a.querySelector("sbb-datepicker");
-  }
-  return D(e);
+function R(t, e) {
+  var i, a;
+  return e ? w(e) : (a = (i = t.closest) == null ? void 0 : i.call(t, "sbb-form-field")) == null ? void 0 : a.querySelector("sbb-datepicker");
 }
-function _(t, e, n, a) {
-  let i = a.addCalendarDays(t, e);
-  if (n)
-    for (; !n(i); )
-      i = a.addCalendarDays(i, e);
-  return i;
+function m(t, e, i, a) {
+  let s = a.addCalendarDays(t, e);
+  if (i)
+    for (; !i(s); )
+      s = a.addCalendarDays(s, e);
+  return s;
 }
-function $(t, e, n, a) {
-  const i = _(t, -1, e, n), s = n.deserialize(a);
-  return !s || n.isValid(s) && n.compareDate(i, s) >= 0 ? i : t;
+function j(t, e, i, a) {
+  const s = m(t, -1, e, i), r = i.deserialize(a);
+  return !r || i.isValid(r) && i.compareDate(s, r) >= 0 ? s : t;
 }
-function H(t, e, n, a) {
-  const i = _(t, 1, e, n), s = n.deserialize(a);
-  return !s || n.isValid(s) && n.compareDate(i, s) <= 0 ? i : t;
+function q(t, e, i, a) {
+  const s = m(t, 1, e, i), r = i.deserialize(a);
+  return !r || i.isValid(r) && i.compareDate(s, r) <= 0 ? s : t;
 }
-function k(t, e, n, a) {
-  const i = m, s = i.deserialize(n), o = i.deserialize(a);
-  return i.isValid(s) && i.compareDate(t, s) < 0 || i.isValid(o) && i.compareDate(t, o) > 0 ? !1 : e ? e(t) : !0;
+function x(t, e, i, a) {
+  var p;
+  const s = ((p = c().datetime) == null ? void 0 : p.dateAdapter) ?? _, r = s.deserialize(i), o = s.deserialize(a);
+  return s.isValid(r) && s.compareDate(t, r) < 0 || s.isValid(o) && s.compareDate(t, o) > 0 ? !1 : e ? e(t) : !0;
 }
-const j = () => new CustomEvent("datepickerControlRegistered", {
+const $ = () => new CustomEvent("datepickerControlRegistered", {
   bubbles: !1,
   composed: !0
 });
-let r = class extends b {
+let n = class extends b {
   constructor() {
     var t;
-    super(...arguments), this.wide = !1, this.dateFilter = () => !0, this._now = null, this._didChange = new d(this, r.events.didChange, {
+    super(...arguments), this.wide = !1, this.dateFilter = () => !0, this._didChange = new d(this, n.events.didChange, {
       bubbles: !0,
       cancelable: !0
-    }), this._change = new d(this, r.events.change, {
+    }), this._change = new d(this, n.events.change, {
       bubbles: !0
     }), this._inputUpdated = new d(
       this,
-      r.events.inputUpdated,
+      n.events.inputUpdated,
       { bubbles: !0, cancelable: !0 }
     ), this._datePickerUpdated = new d(
       this,
-      r.events.datePickerUpdated,
+      n.events.datePickerUpdated,
       {
         bubbles: !0,
         cancelable: !0
       }
     ), this._validationChange = new d(
       this,
-      r.events.validationChange
-    ), this._inputElementState = null, this._inputObserver = new y(this._onInputPropertiesChange.bind(this)), this._dateAdapter = ((t = v().datetime) == null ? void 0 : t.dateAdapter) ?? m, this._abort = new C(this), this._language = new w(this).withHandler(() => {
-      if (this._inputElement) {
-        this._inputElement.placeholder = p[this._language.current];
-        const e = this.getValueAsDate();
-        e && (this._inputElement.value = this._format(e));
+      n.events.validationChange
+    ), this._inputElement = null, this._inputElementPlaceholderMutable = !1, this._inputObserver = new I((e) => {
+      if (this._emitInputUpdated(), this._inputElement && (e != null && e.some((i) => i.attributeName === "value"))) {
+        const i = this._inputElement.getAttribute("value");
+        this.valueAsDate = this._dateAdapter.parse(i, this.now) ?? i;
       }
+    }), this._dateAdapter = ((t = c().datetime) == null ? void 0 : t.dateAdapter) ?? _, this._abort = new D(this), this._language = new E(this).withHandler(() => {
+      this._inputElement && (this._inputElementPlaceholderMutable && (this._inputElement.placeholder = h[this._language.current]), this.valueAsDate && (this._inputElement.value = this._format(this.valueAsDate)));
     });
   }
   set now(t) {
@@ -81,145 +78,111 @@ let r = class extends b {
   get now() {
     return this._now ?? this._dateAdapter.today();
   }
-  get _inputElement() {
-    return this._inputElementState;
-  }
-  set _inputElement(t) {
-    const e = this._inputElementState;
-    this._inputElementState = t, this._registerInputElement(this._inputElementState, e);
-  }
-  _findInput(t, e) {
-    t !== e && (this._inputElement = h(this, this.input));
-  }
-  _registerInputElement(t, e) {
-    var n, a;
-    if (t !== e) {
-      if ((n = this._datePickerController) == null || n.abort(), this._datePickerController = new AbortController(), !this._inputElement)
-        return;
-      (a = this._inputObserver) == null || a.disconnect(), this._inputObserver.observe(this._inputElement, {
-        attributeFilter: ["disabled", "readonly", "min", "max", "value"]
-      }), this._inputElement.type = "text", this._inputElement.placeholder || (this._inputElement.placeholder = p[this._language.current]), this._inputElement.addEventListener(
-        "change",
-        (i) => {
-          i instanceof CustomEvent || this._valueChanged(i);
-        },
-        {
-          signal: this._datePickerController.signal
-        }
-      );
-    }
-  }
-  /** Gets the input value with the correct date format. */
-  getValueAsDate() {
-    if (this._inputElement && this._inputElement.value)
-      return this._parse(this._inputElement.value);
-  }
-  /** Set the input value to the correctly formatted value. */
-  setValueAsDate(t) {
-    const e = t instanceof Date ? t : new Date(t);
-    this._inputElement && (this._formatAndUpdateValue(this._inputElement.value, e), this._inputElement.dispatchEvent(new Event("blur", { composed: !0 })));
+  set valueAsDate(t) {
+    this._valueAsDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t)), this._tryApplyFormatToInput() && this._inputElement.dispatchEvent(new Event("blur", { composed: !0 }));
   }
-  /**
-   * @internal
-   * Whether a custom now is configured.
-   */
-  hasCustomNow() {
-    return !!this._now;
-  }
-  _onInputPropertiesChange(t) {
-    var e, n, a, i;
-    this._inputUpdated.emit({
-      disabled: (e = this._inputElement) == null ? void 0 : e.disabled,
-      readonly: (n = this._inputElement) == null ? void 0 : n.readOnly,
-      min: (a = this._inputElement) == null ? void 0 : a.min,
-      max: (i = this._inputElement) == null ? void 0 : i.max
-    }), this._inputElement && t && Array.from(t).some((s) => s.attributeName === "value") && (this._inputElement.value = this._getValidValue(this._inputElement.getAttribute("value")));
+  get valueAsDate() {
+    return this._valueAsDate ?? null;
   }
   connectedCallback() {
-    super.connectedCallback();
-    const t = this._abort.signal;
-    this.addEventListener("datepickerControlRegistered", () => this._onInputPropertiesChange(), {
-      signal: t
-    }), this._inputElement = h(this, this.input), this._inputElement && (this._inputElement.value = this._getValidValue(this._inputElement.value), this._inputUpdated.emit({
-      disabled: this._inputElement.disabled,
-      readonly: this._inputElement.readOnly,
-      min: this._inputElement.min,
-      max: this._inputElement.max
-    }));
+    super.connectedCallback(), this.addEventListener("datepickerControlRegistered", () => this._emitInputUpdated(), {
+      signal: this._abort.signal
+    }), this._attachInput(), this._inputElement && this._emitInputUpdated();
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("input") && this._findInput(this.input, t.get("input")), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this._datePickerUpdated.emit();
+    super.willUpdate(t), t.has("input") && this._attachInput(), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this._datePickerUpdated.emit(), t.has("valueAsDate") && this._setAriaLiveMessage();
   }
   disconnectedCallback() {
     var t, e;
     super.disconnectedCallback(), (t = this._inputObserver) == null || t.disconnect(), (e = this._datePickerController) == null || e.abort();
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this._setAriaLiveMessage(this.getValueAsDate());
+    super.firstUpdated(t), this._setAriaLiveMessage();
   }
-  _parseAndFormatValue(t) {
-    const e = this._parse(t);
-    return this._dateAdapter.isValid(e) ? this._format(e) : t;
+  /**
+   * Gets the input value with the correct date format.
+   * @deprecated Use property valueAsDate instead.
+   */
+  getValueAsDate() {
+    return this.valueAsDate ?? void 0;
   }
-  _createAndComposeDate(t) {
-    const e = new Date(t);
-    return this._format(e);
+  /**
+   * Set the input value to the correctly formatted value.
+   * @deprecated Use property valueAsDate instead.
+   */
+  setValueAsDate(t) {
+    this.valueAsDate = t;
   }
-  _valueChanged(t) {
-    const e = t.target.value;
-    this._formatAndUpdateValue(e, this._parse(e));
+  /**
+   * @internal
+   * Whether a custom now is configured.
+   */
+  hasCustomNow() {
+    return !!this._now;
   }
-  /** Applies the correct format to values and triggers event dispatch. */
-  _formatAndUpdateValue(t, e) {
-    var n, a;
-    if (this._inputElement) {
-      this._inputElement.value = this._dateAdapter.isValid(e) ? this._format(e) : t;
-      const i = !t || !!e && k(
-        e,
-        this.dateFilter,
-        (n = this._inputElement) == null ? void 0 : n.min,
-        (a = this._inputElement) == null ? void 0 : a.max
-      ), s = !this._inputElement.hasAttribute("data-sbb-invalid");
-      this._inputElement.toggleAttribute("data-sbb-invalid", !i), s !== i && this._validationChange.emit({ valid: i }), this._emitChange(e);
+  _attachInput() {
+    var e, i;
+    const t = C(this, this.input);
+    if (this._inputElement !== t && (this._inputElement && ((e = this._datePickerController) == null || e.abort(), (i = this._inputObserver) == null || i.disconnect()), this._inputElement = t, t)) {
+      this._datePickerController = new AbortController(), this._inputObserver.observe(t, {
+        attributeFilter: ["disabled", "readonly", "min", "max", "value"]
+      }), this._inputElementPlaceholderMutable = !t.placeholder, t.type = "text", this._inputElementPlaceholderMutable && (t.placeholder = h[this._language.current]);
+      const a = { signal: this._datePickerController.signal };
+      t.addEventListener("input", () => this._parseInput(), a), t.addEventListener("change", () => this._handleInputChange(), a), this._parseInput(!0), this._tryApplyFormatToInput(), this._validateDate();
     }
   }
-  /** Emits the change event. */
-  _emitChange(t) {
-    this._setAriaLiveMessage(t), this._change.emit(), this._didChange.emit(), this._inputElement && (this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._inputElement.dispatchEvent(
-      new CustomEvent("change", { bubbles: !0, composed: !0 })
+  _emitInputUpdated() {
+    const { disabled: t, readOnly: e, min: i, max: a } = this._inputElement ?? {};
+    this._inputUpdated.emit({ disabled: t, readonly: e, min: i, max: a });
+  }
+  _handleInputChange() {
+    this._tryApplyFormatToInput() || (this._validateDate(), this._setAriaLiveMessage(), this._change.emit(), this._didChange.emit());
+  }
+  _tryApplyFormatToInput() {
+    if (!this._inputElement)
+      return !1;
+    const t = this.valueAsDate ? this._format(this.valueAsDate) : "";
+    return t && this._inputElement.value !== t ? (this._inputElement.value = t, this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._inputElement.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), !0) : !1;
+  }
+  _validateDate() {
+    var i, a;
+    if (!this._inputElement)
+      return;
+    const t = !this._inputElement.value || !!this.valueAsDate && x(
+      this.valueAsDate,
+      this.dateFilter,
+      (i = this._inputElement) == null ? void 0 : i.min,
+      (a = this._inputElement) == null ? void 0 : a.max
+    ), e = !this._inputElement.hasAttribute("data-sbb-invalid");
+    this._inputElement.toggleAttribute("data-sbb-invalid", !t), e !== t && this._validationChange.emit({ valid: t });
+  }
+  _parseInput(t = !1) {
+    const e = this._inputElement.value, i = this.dateParser ?? ((a) => this._dateAdapter.parse(a, this.now));
+    this._valueAsDate = this._dateAdapter.getValidDateOrNull(i(e)), t && !this._valueAsDate && (this._valueAsDate = this._dateAdapter.getValidDateOrNull(
+      this._dateAdapter.deserialize(e)
     ));
   }
-  _getValidValue(t) {
-    if (!t)
-      return "";
-    const e = t.match(U);
-    return (e == null ? void 0 : e.index) === 0 ? this._parseAndFormatValue(t) : Number.isInteger(+t) ? this._createAndComposeDate(+t) : this._dateAdapter.isValid(new Date(t)) ? this._createAndComposeDate(t) : t;
-  }
-  _parse(t) {
-    return this.dateParser ? this.dateParser(t) : this._dateAdapter.parse(t, this.now);
-  }
   _format(t) {
     return this.format ? this.format(t) : this._dateAdapter.format(t);
   }
-  _setAriaLiveMessage(t) {
-    var i, s;
-    const e = new Intl.DateTimeFormat(`${this._language.current}-CH`, {
-      weekday: "long"
-    }), n = new Intl.DateTimeFormat("de-CH", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric"
-    }), a = (s = (i = this.shadowRoot) == null ? void 0 : i.querySelector) == null ? void 0 : s.call(i, "#status-container");
-    a && (a.innerText = t ? `${A[this._language.current]} ${e.format(
-      t
-    )}, ${n.format(t)}` : "");
+  _setAriaLiveMessage() {
+    var e, i;
+    const t = (i = (e = this.shadowRoot) == null ? void 0 : e.querySelector) == null ? void 0 : i.call(e, "#status-container");
+    if (t)
+      if (!this.valueAsDate)
+        t.innerText = "";
+      else {
+        const a = this._dateAdapter.format(this.valueAsDate, { weekdayStyle: "long" });
+        t.innerText = `${y[this._language.current]} ${a}`;
+      }
+    else return;
   }
   render() {
     return f`<p id="status-container" role="status"></p>`;
   }
 };
-r.styles = V;
-r.events = {
+n.styles = P;
+n.events = {
   didChange: "didChange",
   change: "change",
   inputUpdated: "inputUpdated",
@@ -228,34 +191,37 @@ r.events = {
 };
 l([
   u({ type: Boolean })
-], r.prototype, "wide", 2);
+], n.prototype, "wide", 2);
 l([
-  u({ attribute: "date-filter" })
-], r.prototype, "dateFilter", 2);
+  u({ attribute: !1 })
+], n.prototype, "dateFilter", 2);
 l([
-  u({ attribute: "date-parser" })
-], r.prototype, "dateParser", 2);
+  u({ attribute: !1 })
+], n.prototype, "dateParser", 2);
 l([
-  u()
-], r.prototype, "format", 2);
+  u({ attribute: !1 })
+], n.prototype, "format", 2);
 l([
   u()
-], r.prototype, "input", 2);
+], n.prototype, "input", 2);
 l([
   u()
-], r.prototype, "now", 1);
+], n.prototype, "now", 1);
+l([
+  u({ attribute: !1 })
+], n.prototype, "valueAsDate", 1);
 l([
-  E()
-], r.prototype, "_inputElement", 1);
-r = l([
-  g("sbb-datepicker")
-], r);
+  g()
+], n.prototype, "_inputElement", 2);
+n = l([
+  A("sbb-datepicker")
+], n);
 export {
-  r as SbbDatepickerElement,
-  j as datepickerControlRegisteredEventFactory,
-  H as findNextAvailableDate,
-  $ as findPreviousAvailableDate,
-  _ as getAvailableDate,
-  N as getDatePicker,
-  k as isDateAvailable
+  n as SbbDatepickerElement,
+  $ as datepickerControlRegisteredEventFactory,
+  q as findNextAvailableDate,
+  j as findPreviousAvailableDate,
+  m as getAvailableDate,
+  R as getDatePicker,
+  x as isDateAvailable
 };

package/development/autocomplete/autocomplete-base-element.d.ts

@@ -0,0 +1,93 @@
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
+import { SbbConnectedAbortController } from '../core/controllers.js';
+import { SbbOptionBaseElement } from '../option.js';
+
+declare const SbbAutocompleteBaseElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
+export declare abstract class SbbAutocompleteBaseElement extends SbbAutocompleteBaseElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The element where the autocomplete will attach; accepts both an element's id or an HTMLElement.
+     * If not set, it will search for the first 'sbb-form-field' ancestor.
+     */
+    origin?: string | HTMLElement;
+    /**
+     * The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement.
+     * By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element.
+     * If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor.
+     */
+    trigger?: string | HTMLInputElement;
+    /** Whether the icon space is preserved when no icon is set. */
+    preserveIconSpace?: boolean;
+    /** Returns the element where autocomplete overlay is attached to. */
+    get originElement(): HTMLElement;
+    private _originElement?;
+    /** Returns the trigger element. */
+    get triggerElement(): HTMLInputElement | undefined;
+    private _triggerElement;
+    protected abstract overlayId: string;
+    protected abstract panelRole: string;
+    protected abort: SbbConnectedAbortController;
+    private _overlay;
+    private _optionContainer;
+    private _triggerEventsController;
+    private _openPanelEventsController;
+    private _didLoad;
+    private _isPointerDownEventOnMenu;
+    protected abstract get options(): SbbOptionBaseElement[];
+    protected abstract syncNegative(): void;
+    protected abstract setTriggerAttributes(element: HTMLInputElement): void;
+    protected abstract openedPanelKeyboardInteraction(event: KeyboardEvent): void;
+    protected abstract selectByKeyboard(event: KeyboardEvent): void;
+    protected abstract setNextActiveOption(event: KeyboardEvent): void;
+    protected abstract resetActiveElement(): void;
+    protected abstract onOptionClick(event: MouseEvent): void;
+    /** Opens the autocomplete. */
+    open(): void;
+    /** Closes the autocomplete. */
+    close(): void;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    /** When an option is selected, update the input value and close the autocomplete. */
+    protected onOptionSelected(event: CustomEvent): void;
+    private _handleSlotchange;
+    /** The autocomplete should inherit 'readonly' state from the trigger. */
+    private get _readonly();
+    /** Removes trigger click listener on trigger change. */
+    private _resetOriginClickListener;
+    /** Removes trigger click listener on trigger change. */
+    private _resetTriggerClickListener;
+    private _componentSetup;
+    /**
+     * Retrieve the element where the autocomplete will be attached.
+     * @returns 'origin' or the first 'sbb-form-field' ancestor.
+     */
+    private _findOriginElement;
+    /**
+     * Retrieve the element that will trigger the autocomplete opening.
+     * @returns 'trigger' or the first 'input' inside the origin element.
+     */
+    private _getTriggerElement;
+    private _bindTo;
+    private _setupTriggerEvents;
+    private _setOverlayPosition;
+    /** On open/close animation end.
+     *  In rare cases it can be that the animationEnd event is triggered twice.
+     *  To avoid entering a corrupt state, exit when state is not expected.
+     */
+    private _onAnimationEnd;
+    private _onOpenAnimationEnd;
+    private _onCloseAnimationEnd;
+    private _attachOpenPanelEvents;
+    private _pointerDownListener;
+    private _closeOnBackdropClick;
+    private _closedPanelKeyboardInteraction;
+    /** Highlight the searched text on the options. */
+    private _highlightOptions;
+    private _removeTriggerAttributes;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=autocomplete-base-element.d.ts.map

package/development/autocomplete/autocomplete-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}

package/development/autocomplete/autocomplete.d.ts

@@ -1,7 +1,6 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
+import { SbbOptionElement } from '../option.js';
+import { SbbAutocompleteBaseElement } from './autocomplete-base-element.js';
 
-declare const SbbAutocompleteElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * Combined with a native input, it displays a panel with a list of available options.
  *
@@ -14,95 +13,23 @@ declare const SbbAutocompleteElement_base: import('../core/mixins.js').AbstractC
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
-export declare class SbbAutocompleteElement extends SbbAutocompleteElement_base {
-    static styles: CSSResultGroup;
-    /**
-     * The element where the autocomplete will attach; accepts both an element's id or an HTMLElement.
-     * If not set, will search for the first 'sbb-form-field' ancestor.
-     */
-    origin?: string | HTMLElement;
-    /**
-     * The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement.
-     * By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element.
-     * If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor.
-     */
-    trigger?: string | HTMLInputElement;
-    /** Whether the icon space is preserved when no icon is set. */
-    preserveIconSpace?: boolean;
-    private _overlay;
-    private _optionContainer;
-    /** Returns the element where autocomplete overlay is attached to. */
-    get originElement(): HTMLElement;
-    private _originElement?;
-    /** Returns the trigger element. */
-    get triggerElement(): HTMLInputElement | undefined;
-    private _triggerElement;
-    private _triggerEventsController;
-    private _openPanelEventsController;
-    private _overlayId;
+export declare class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
+    protected overlayId: string;
+    protected panelRole: string;
     private _activeItemIndex;
-    private _didLoad;
-    private _isPointerDownEventOnMenu;
-    private _abort;
-    /** The autocomplete should inherit 'readonly' state from the trigger. */
-    private get _readonly();
-    private get _options();
-    /** Opens the autocomplete. */
-    open(): void;
-    /** Closes the autocomplete. */
-    close(): void;
-    /** Removes trigger click listener on trigger change. */
-    private _resetOriginClickListener;
-    /** Removes trigger click listener on trigger change. */
-    private _resetTriggerClickListener;
-    /** When an option is selected, update the input value and close the autocomplete. */
-    private _onOptionSelected;
-    private _onOptionClick;
+    protected get options(): SbbOptionElement[];
+    protected onOptionClick(event: MouseEvent): void;
     connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    private _syncNegative;
-    disconnectedCallback(): void;
-    private _componentSetup;
-    /**
-     * Retrieve the element where the autocomplete will be attached.
-     * @returns 'origin' or the first 'sbb-form-field' ancestor.
-     */
-    private _findOriginElement;
-    /**
-     * Retrieve the element that will trigger the autocomplete opening.
-     * @returns 'trigger' or the first 'input' inside the origin element.
-     */
-    private _getTriggerElement;
-    private _bindTo;
-    private _setupTriggerEvents;
-    private _setOverlayPosition;
-    /** On open/close animation end.
-     *  In rare cases it can be that the animationEnd event is triggered twice.
-     *  To avoid entering a corrupt state, exit when state is not expected.
-     */
-    private _onAnimationEnd;
-    private _onOpenAnimationEnd;
-    private _onCloseAnimationEnd;
-    private _attachOpenPanelEvents;
-    private _pointerDownListener;
-    private _closeOnBackdropClick;
-    private _closedPanelKeyboardInteraction;
-    private _openedPanelKeyboardInteraction;
-    private _selectByKeyboard;
-    private _setNextActiveOption;
-    private _resetActiveElement;
-    /** Highlight the searched text on the options. */
-    private _highlightOptions;
-    private _setTriggerAttributes;
-    private _removeTriggerAttributes;
-    private _handleSlotchange;
-    protected render(): TemplateResult;
+    protected syncNegative(): void;
+    protected openedPanelKeyboardInteraction(event: KeyboardEvent): void;
+    protected selectByKeyboard(): void;
+    protected setNextActiveOption(event: KeyboardEvent): void;
+    protected resetActiveElement(): void;
+    protected setTriggerAttributes(element: HTMLInputElement): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'sbb-autocomplete': SbbAutocompleteElement;
     }
 }
-export {};
 //# sourceMappingURL=autocomplete.d.ts.map

package/development/autocomplete/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;;AAwBnE;;;;;;;;;;;GAWG;AACH,qBAKa,sBAAuB,SAAQ,2BAE3C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAEjD;;;;OAIG;IACgB,OAAO,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAEvD,+DAA+D;IAExD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEnC,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,gBAAgB,CAAe;IAEvC,qEAAqE;IACrE,IAAW,aAAa,IAAI,WAAW,CAKtC;IACD,OAAO,CAAC,cAAc,CAAC,CAAc;IAErC,mCAAmC;IACnC,IAAW,cAAc,IAAI,gBAAgB,GAAG,SAAS,CAExD;IACD,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,wBAAwB,CAAmB;IACnD,OAAO,CAAC,0BAA0B,CAAmB;IACrD,OAAO,CAAC,UAAU,CAAkC;IACpD,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,MAAM,CAAyC;IAEvD,yEAAyE;IACzE,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,8BAA8B;IACvB,IAAI,IAAI,IAAI;IAYnB,+BAA+B;IACxB,KAAK,IAAI,IAAI;IAYpB,wDAAwD;IACxD,OAAO,CAAC,yBAAyB;IASjC,wDAAwD;IACxD,OAAO,CAAC,0BAA0B;IASlC,qFAAqF;IACrF,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,cAAc;IAUN,iBAAiB,IAAI,IAAI;cA0BtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAczD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,aAAa;IAQL,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,eAAe;IAgBvB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,mBAAmB;IA0B3B,OAAO,CAAC,mBAAmB;IAU3B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,sBAAsB;IAgC9B,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAQ3B;IAEF,OAAO,CAAC,+BAA+B;IAcvC,OAAO,CAAC,+BAA+B;IAsBvC,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,mBAAmB;IAU3B,kDAAkD;IAClD,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAU5E;;;;;;;;;;;GAWG;AACH,qBAKa,sBAAuB,SAAQ,0BAA0B;IACpE,SAAS,CAAC,SAAS,SAAkC;IACrD,SAAS,CAAC,SAAS,SAAa;IAChC,OAAO,CAAC,gBAAgB,CAAM;IAE9B,SAAS,KAAK,OAAO,IAAI,gBAAgB,EAAE,CAE1C;IAED,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAUhC,iBAAiB,IAAI,IAAI;IAUzC,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAsBpE,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAQlC,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAqBzD,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAUpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}