@sbb-esta/lyne-elements 3.3.0 → 3.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/autocomplete/autocomplete-base-element.d.ts +3 -4
  2. package/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  3. package/autocomplete/autocomplete-base-element.js +88 -83
  4. package/autocomplete/autocomplete.component.d.ts +0 -1
  5. package/autocomplete/autocomplete.component.d.ts.map +1 -1
  6. package/autocomplete/autocomplete.component.js +26 -26
  7. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts +0 -2
  8. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
  9. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +34 -44
  10. package/checkbox/checkbox-panel/checkbox-panel.component.d.ts +3 -2
  11. package/checkbox/checkbox-panel/checkbox-panel.component.d.ts.map +1 -1
  12. package/checkbox/checkbox-panel/checkbox-panel.component.js +36 -33
  13. package/core/mixins/element-internals-mixin.js +6 -6
  14. package/core/mixins/form-associated-mixin.d.ts.map +1 -1
  15. package/core/mixins/form-associated-mixin.js +22 -16
  16. package/core.css +7 -7
  17. package/custom-elements.json +839 -35
  18. package/date-input/date-input.component.d.ts +5 -1
  19. package/date-input/date-input.component.d.ts.map +1 -1
  20. package/date-input/date-input.component.js +24 -15
  21. package/development/autocomplete/autocomplete-base-element.d.ts +3 -4
  22. package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  23. package/development/autocomplete/autocomplete-base-element.js +30 -15
  24. package/development/autocomplete/autocomplete.component.d.ts +0 -1
  25. package/development/autocomplete/autocomplete.component.d.ts.map +1 -1
  26. package/development/autocomplete/autocomplete.component.js +16 -21
  27. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts +0 -2
  28. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
  29. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +26 -35
  30. package/development/checkbox/checkbox-panel/checkbox-panel.component.d.ts +3 -2
  31. package/development/checkbox/checkbox-panel/checkbox-panel.component.d.ts.map +1 -1
  32. package/development/checkbox/checkbox-panel/checkbox-panel.component.js +10 -4
  33. package/development/core/mixins/element-internals-mixin.js +2 -2
  34. package/development/core/mixins/form-associated-mixin.d.ts.map +1 -1
  35. package/development/core/mixins/form-associated-mixin.js +14 -7
  36. package/development/date-input/date-input.component.d.ts +5 -1
  37. package/development/date-input/date-input.component.d.ts.map +1 -1
  38. package/development/date-input/date-input.component.js +11 -1
  39. package/development/form-field/form-field/form-field.component.d.ts +6 -3
  40. package/development/form-field/form-field/form-field.component.d.ts.map +1 -1
  41. package/development/form-field/form-field/form-field.component.js +1 -3
  42. package/development/header/common/header-action-common.js +4 -1
  43. package/development/notification/notification.component.js +1 -1
  44. package/development/option/option/option-base-element.d.ts.map +1 -1
  45. package/development/option/option/option-base-element.js +2 -1
  46. package/development/sbb-tokens-CVLcOi-S.js +1 -1
  47. package/development/time-input/time-input.component.d.ts +5 -1
  48. package/development/time-input/time-input.component.d.ts.map +1 -1
  49. package/development/time-input/time-input.component.js +11 -1
  50. package/development/toggle-check/toggle-check.component.d.ts +2 -2
  51. package/development/toggle-check/toggle-check.component.d.ts.map +1 -1
  52. package/development/toggle-check/toggle-check.component.js +4 -4
  53. package/form-field/form-field/form-field.component.d.ts +6 -3
  54. package/form-field/form-field/form-field.component.d.ts.map +1 -1
  55. package/form-field/form-field/form-field.component.js +0 -2
  56. package/header/common/header-action-common.js +1 -1
  57. package/notification/notification.component.js +1 -1
  58. package/option/option/option-base-element.d.ts.map +1 -1
  59. package/option/option/option-base-element.js +18 -18
  60. package/package.json +1 -1
  61. package/standard-theme.css +7 -7
  62. package/time-input/time-input.component.d.ts +5 -1
  63. package/time-input/time-input.component.d.ts.map +1 -1
  64. package/time-input/time-input.component.js +24 -16
  65. package/toggle-check/toggle-check.component.d.ts +2 -2
  66. package/toggle-check/toggle-check.component.d.ts.map +1 -1
  67. package/toggle-check/toggle-check.component.js +28 -28
package/autocomplete/autocomplete-base-element.d.ts CHANGED
@@ -39,6 +39,7 @@ export declare abstract class SbbAutocompleteBaseElement<T = string> extends Sbb
39
39
  private _triggerElement?;
40
40
  protected abstract overlayId: string;
41
41
  protected abstract panelRole: string;
42
+ protected activeOption: SbbOptionBaseElement<T> | null;
42
43
  private _originResizeObserver;
43
44
  /** Listens to the changes on the `disabled` or `readonly` attribute of the trigger. */
44
45
  private _triggerAttributeObserver;
@@ -48,6 +49,7 @@ export declare abstract class SbbAutocompleteBaseElement<T = string> extends Sbb
48
49
  private _openPanelEventsController;
49
50
  private _isPointerDownEventOnMenu;
50
51
  private _escapableOverlayController;
52
+ private _optionsCount;
51
53
  protected abstract get options(): SbbOptionBaseElement<T>[];
52
54
  protected abstract syncNegative(): void;
53
55
  protected abstract setTriggerAttributes(element: HTMLInputElement): void;
@@ -68,10 +70,7 @@ export declare abstract class SbbAutocompleteBaseElement<T = string> extends Sbb
68
70
  /** When an option is selected, update the input value and close the autocomplete. */
69
71
  protected onOptionSelected(event: Event): void;
70
72
  private _handleSlotchange;
71
- /**
72
- * If the 'input' is focused and there's a change in the number of options, open the autocomplete
73
- */
74
- private _openOnNewOptions;
73
+ private _setNextActiveOptionIfAutoActiveFirstOption;
75
74
  /** The autocomplete should inherit 'readonly' state from the trigger. */
76
75
  private _readonly;
77
76
  private _componentSetup;
package/autocomplete/autocomplete-base-element.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}
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/autocomplete/autocomplete-base-element.js CHANGED
@@ -1,8 +1,8 @@
1
- var N = (i) => {
1
+ var U = (i) => {
2
2
  throw TypeError(i);
3
3
  };
4
- var $ = (i, s, a) => s.has(i) || N("Cannot " + a);
5
- var b = (i, s, a) => ($(i, s, "read from private field"), a ? a.call(i) : s.get(i)), p = (i, s, a) => s.has(i) ? N("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), n = (i, s, a, _) => ($(i, s, "write to private field"), _ ? _.call(i, a) : s.set(i, a), a);
4
+ var $ = (i, s, a) => s.has(i) || U("Cannot " + a);
5
+ var b = (i, s, a) => ($(i, s, "read from private field"), a ? a.call(i) : s.get(i)), p = (i, s, a) => s.has(i) ? U("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), n = (i, s, a, _) => ($(i, s, "write to private field"), _ ? _.call(i, a) : s.set(i, a), a);
6
6
  import { __runInitializers as l, __esDecorate as f } from "tslib";
7
7
  import { ResizeController as Y } from "@lit-labs/observers/resize-controller.js";
8
8
  import { css as Z, isServer as w, nothing as M, html as H } from "lit";
@@ -13,11 +13,11 @@ import { SbbEscapableOverlayController as B } from "../core/controllers.js";
13
13
  import { idReference as q, forceType as j } from "../core/decorators.js";
14
14
  import { isLean as V, isZeroAnimationDuration as G, isSafari as J } from "../core/dom.js";
15
15
  import { SbbNegativeMixin as Q, SbbHydrationMixin as X } from "../core/mixins.js";
16
- import { isEventOnElement as y, removeAriaComboBoxAttributes as ee, setOverlayPosition as te, overlayGapFixCorners as oe } from "../core/overlay.js";
17
- const ie = Z`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([data-state]:not([data-state=closed])){display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel:before,.sbb-autocomplete__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-autocomplete__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-autocomplete__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-autocomplete__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-autocomplete__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media (forced-colors: active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, x = J;
18
- let me = (() => {
16
+ import { isEventOnElement as y, removeAriaComboBoxAttributes as tt, setOverlayPosition as et, overlayGapFixCorners as ot } from "../core/overlay.js";
17
+ const it = Z`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([data-state]:not([data-state=closed])){display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel:before,.sbb-autocomplete__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-autocomplete__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-autocomplete__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-autocomplete__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-autocomplete__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media (forced-colors: active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, x = J;
18
+ let mt = (() => {
19
19
  var d, h, c, v, g, u, r;
20
- let i = Q(X(K)), s, a = [], _ = [], E, k = [], O = [], C, A = [], z = [], P, I = [], S = [], F, D = [], L = [], W, R = [], U = [];
20
+ let i = Q(X(K)), s, a = [], _ = [], E, O = [], k = [], A, C = [], z = [], I, P = [], S = [], F, L = [], D = [], N, W = [], R = [];
21
21
  return r = class extends i {
22
22
  constructor() {
23
23
  super(...arguments);
@@ -27,19 +27,19 @@ let me = (() => {
27
27
  p(this, v);
28
28
  p(this, g);
29
29
  p(this, u);
30
- n(this, d, l(this, a, null)), n(this, h, (l(this, _), l(this, k, null))), n(this, c, (l(this, O), l(this, A, !1))), n(this, v, (l(this, z), l(this, I, !1))), n(this, g, (l(this, S), l(this, D, null))), n(this, u, (l(this, L), l(this, R, V() ? "s" : "m"))), this._triggerElement = l(this, U), this._originResizeObserver = new Y(this, {
30
+ n(this, d, l(this, a, null)), n(this, h, (l(this, _), l(this, O, null))), n(this, c, (l(this, k), l(this, C, !1))), n(this, v, (l(this, z), l(this, P, !1))), n(this, g, (l(this, S), l(this, L, null))), n(this, u, (l(this, D), l(this, W, V() ? "s" : "m"))), this._triggerElement = l(this, R), this.activeOption = null, this._originResizeObserver = new Y(this, {
31
31
  target: null,
32
32
  skipInitial: !0,
33
33
  callback: () => {
34
34
  this.state === "opened" && this._setOverlayPosition();
35
35
  }
36
- }), this._triggerAttributeObserver = w ? null : new MutationObserver((e) => {
37
- const t = e[0].target;
38
- (t.hasAttribute("disabled") || t.hasAttribute("readonly")) && this.close();
39
- }), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new B(this), this._pointerDownListener = (e) => {
40
- this._isPointerDownEventOnMenu = y(this._overlay, e);
41
- }, this._closeOnBackdropClick = (e) => {
42
- !this._isPointerDownEventOnMenu && !y(this._overlay, e) && !y(this.originElement, e) && this.close();
36
+ }), this._triggerAttributeObserver = w ? null : new MutationObserver((t) => {
37
+ const e = t[0].target;
38
+ (e.hasAttribute("disabled") || e.hasAttribute("readonly")) && this.close();
39
+ }), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new B(this), this._optionsCount = 0, this._pointerDownListener = (t) => {
40
+ this._isPointerDownEventOnMenu = y(this._overlay, t);
41
+ }, this._closeOnBackdropClick = (t) => {
42
+ !this._isPointerDownEventOnMenu && !y(this._overlay, t) && !y(this.originElement, t) && this.close();
43
43
  };
44
44
  }
45
45
  /**
@@ -53,8 +53,8 @@ let me = (() => {
53
53
  get origin() {
54
54
  return b(this, d);
55
55
  }
56
- set origin(e) {
57
- n(this, d, e);
56
+ set origin(t) {
57
+ n(this, d, t);
58
58
  }
59
59
  /**
60
60
  * The input element that will trigger the autocomplete opening.
@@ -66,29 +66,29 @@ let me = (() => {
66
66
  get trigger() {
67
67
  return b(this, h);
68
68
  }
69
- set trigger(e) {
70
- n(this, h, e);
69
+ set trigger(t) {
70
+ n(this, h, t);
71
71
  }
72
72
  /** Whether the icon space is preserved when no icon is set. */
73
73
  get preserveIconSpace() {
74
74
  return b(this, c);
75
75
  }
76
- set preserveIconSpace(e) {
77
- n(this, c, e);
76
+ set preserveIconSpace(t) {
77
+ n(this, c, t);
78
78
  }
79
79
  /** Whether the first option is automatically activated when the autocomplete is opened. */
80
80
  get autoActiveFirstOption() {
81
81
  return b(this, v);
82
82
  }
83
- set autoActiveFirstOption(e) {
84
- n(this, v, e);
83
+ set autoActiveFirstOption(t) {
84
+ n(this, v, t);
85
85
  }
86
86
  /** Function that maps an option's control value to its display value in the trigger. */
87
87
  get displayWith() {
88
88
  return b(this, g);
89
89
  }
90
- set displayWith(e) {
91
- n(this, g, e);
90
+ set displayWith(t) {
91
+ n(this, g, t);
92
92
  }
93
93
  /**
94
94
  * Size variant, either m or s.
@@ -97,8 +97,8 @@ let me = (() => {
97
97
  get size() {
98
98
  return b(this, u);
99
99
  }
100
- set size(e) {
101
- n(this, u, e);
100
+ set size(t) {
101
+ n(this, u, t);
102
102
  }
103
103
  /** Returns the element where autocomplete overlay is attached to. */
104
104
  get originElement() {
@@ -113,10 +113,10 @@ let me = (() => {
113
113
  if (this.state !== "closed" || !this._overlay || this.options.length === 0 || this._readonly() || !this.dispatchBeforeOpenEvent())
114
114
  return;
115
115
  this.showPopover?.(), this.state = "opening", this._triggerElement?.toggleAttribute("data-expanded", !0);
116
- const e = this.originElement;
117
- if (!e)
116
+ const t = this.originElement;
117
+ if (!t)
118
118
  throw new Error('Cannot find the origin element. Please specify a valid element or check the usage of the "origin" property from the documentation');
119
- this._setOverlayPosition(e), this.autoActiveFirstOption && this.setNextActiveOption(), this._isZeroAnimationDuration() && this._handleOpening();
119
+ this._setOverlayPosition(t), this._setNextActiveOptionIfAutoActiveFirstOption(), this._isZeroAnimationDuration() && this._handleOpening();
120
120
  }
121
121
  /** Closes the autocomplete. */
122
122
  close() {
@@ -127,40 +127,41 @@ let me = (() => {
127
127
  }
128
128
  connectedCallback() {
129
129
  this.popover = "manual", super.connectedCallback(), x && (this.id ||= this.overlayId);
130
- const e = this.closest("sbb-form-field") ?? this.closest("[data-form-field]");
131
- e && (this.negative = e.hasAttribute("negative")), this.hasUpdated && this._componentSetup(), this.syncNegative();
130
+ const t = this.closest("sbb-form-field") ?? this.closest("[data-form-field]");
131
+ t && (this.negative = t.hasAttribute("negative")), this.hasUpdated && this._componentSetup(), this.syncNegative();
132
132
  }
133
- willUpdate(e) {
134
- super.willUpdate(e), e.has("negative") && this.syncNegative();
133
+ willUpdate(t) {
134
+ super.willUpdate(t), t.has("negative") && this.syncNegative(), t.has("autoActiveFirstOption") && this.isOpen && this._setNextActiveOptionIfAutoActiveFirstOption();
135
135
  }
136
- firstUpdated(e) {
137
- super.firstUpdated(e), this._componentSetup();
136
+ firstUpdated(t) {
137
+ super.firstUpdated(t), this._componentSetup();
138
138
  }
139
139
  disconnectedCallback() {
140
140
  super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._openPanelEventsController?.abort();
141
141
  }
142
- requestUpdate(e, t, o) {
143
- super.requestUpdate(e, t, o), !(w || !this.hasUpdated) && (!e || e === "trigger" ? this._configureTrigger() : (!e || e === "origin") && this.isOpen && this._setOverlayPosition());
142
+ requestUpdate(t, e, o) {
143
+ super.requestUpdate(t, e, o), !(w || !this.hasUpdated) && (!t || t === "trigger" ? this._configureTrigger() : (!t || t === "origin") && this.isOpen && this._setOverlayPosition());
144
144
  }
145
145
  /** When an option is selected, update the input value and close the autocomplete. */
146
- onOptionSelected(e) {
147
- const t = e.target;
148
- if (this.options.filter((o) => o.id !== t.id && o.selected).forEach((o) => o.selected = !1), this.triggerElement) {
149
- const o = this.displayWith?.(t.value) ?? t.value;
146
+ onOptionSelected(t) {
147
+ const e = t.target;
148
+ if (this.options.filter((o) => o.id !== e.id && o.selected).forEach((o) => o.selected = !1), this.triggerElement) {
149
+ const o = this.displayWith?.(e.value) ?? e.value;
150
150
  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this.triggerElement, o), this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.triggerElement.dispatchEvent(new CustomEvent("inputAutocomplete", {
151
- detail: { option: t }
151
+ detail: { option: e }
152
152
  })), this.triggerElement.focus();
153
153
  }
154
154
  this.close();
155
155
  }
156
156
  _handleSlotchange() {
157
- this._highlightOptions(this.triggerElement?.value), this.isOpen && this._setOverlayPosition(), this._openOnNewOptions();
157
+ this._highlightOptions(this.triggerElement?.value), this.isOpen ? (this._setOverlayPosition(), this._setNextActiveOptionIfAutoActiveFirstOption(), this._optionsCount > 0 && this.options.length === 0 && this.close()) : (
158
+ // If the 'input' is focused and the count of options changes from 0 to > 0,
159
+ // the autocomplete should open automatically.
160
+ document?.activeElement === this.triggerElement && this._optionsCount === 0 && this.options.length > 0 && this.open()
161
+ ), this._optionsCount = this.options.length;
158
162
  }
159
- /**
160
- * If the 'input' is focused and there's a change in the number of options, open the autocomplete
161
- */
162
- _openOnNewOptions() {
163
- document?.activeElement === this.triggerElement && (this.options.length > 0 ? this.open() : this.close());
163
+ _setNextActiveOptionIfAutoActiveFirstOption() {
164
+ this.autoActiveFirstOption && (this.resetActiveElement(), this.setNextActiveOption());
164
165
  }
165
166
  /** The autocomplete should inherit 'readonly' state from the trigger. */
166
167
  _readonly() {
@@ -170,11 +171,11 @@ let me = (() => {
170
171
  w || (this.toggleAttribute("data-option-panel-origin-borderless", !!this.closest?.("sbb-form-field")?.hasAttribute("borderless")), this._configureTrigger());
171
172
  }
172
173
  _configureTrigger() {
173
- const e = this.trigger ?? this.closest?.("sbb-form-field")?.querySelector("input");
174
- if (e === this._triggerElement || (this._triggerAbortController?.abort(), ee(this.triggerElement), this._triggerElement = e, !this.triggerElement))
174
+ const t = this.trigger ?? this.closest?.("sbb-form-field")?.querySelector("input");
175
+ if (t === this._triggerElement || (this._triggerAbortController?.abort(), tt(this.triggerElement), this._triggerElement = t, !this.triggerElement))
175
176
  return;
176
- const t = this.originElement;
177
- this.triggerElement === t && this.isOpen && this._setOverlayPosition(t), this._triggerAttributeObserver?.observe(this._triggerElement, {
177
+ const e = this.originElement;
178
+ this.triggerElement === e && this.isOpen && this._setOverlayPosition(e), this._triggerAttributeObserver?.observe(this._triggerElement, {
178
179
  attributes: !0,
179
180
  attributeFilter: ["disabled", "readonly"]
180
181
  }), this.setTriggerAttributes(this.triggerElement), this._triggerAbortController = new AbortController(), this.triggerElement.addEventListener("focus", () => this.open(), {
@@ -191,16 +192,16 @@ let me = (() => {
191
192
  });
192
193
  }
193
194
  // Set overlay position, width and max height
194
- _setOverlayPosition(e = this.originElement) {
195
- e && te(this._overlay, e, this._optionContainer, this.shadowRoot.querySelector(".sbb-autocomplete__container"), this);
195
+ _setOverlayPosition(t = this.originElement) {
196
+ t && et(this._overlay, t, this._optionContainer, this.shadowRoot.querySelector(".sbb-autocomplete__container"), this);
196
197
  }
197
198
  /**
198
199
  * On open/close animation end.
199
200
  * In rare cases it can be that the animationEnd event is triggered twice.
200
201
  * To avoid entering a corrupt state, exit when state is not expected.
201
202
  */
202
- _onAnimationEnd(e) {
203
- e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
203
+ _onAnimationEnd(t) {
204
+ t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
204
205
  }
205
206
  _handleOpening() {
206
207
  this.state = "opened", this._attachOpenPanelEvents(), this.originElement && this._originResizeObserver.observe(this.originElement), this.triggerElement?.setAttribute("aria-expanded", "true"), this._escapableOverlayController.connect(), this.dispatchOpenEvent();
@@ -218,20 +219,24 @@ let me = (() => {
218
219
  }), window.addEventListener("resize", () => this._setOverlayPosition(), {
219
220
  passive: !0,
220
221
  signal: this._openPanelEventsController.signal
221
- }), window.addEventListener("pointerdown", (e) => this._pointerDownListener(e), {
222
+ }), window.addEventListener("pointerdown", (t) => this._pointerDownListener(t), {
223
+ signal: this._openPanelEventsController.signal
224
+ }), window.addEventListener("pointerup", (t) => this._closeOnBackdropClick(t), {
222
225
  signal: this._openPanelEventsController.signal
223
- }), window.addEventListener("pointerup", (e) => this._closeOnBackdropClick(e), {
226
+ }), this.addEventListener("ɵdisabledchange", () => {
227
+ this.activeOption?.disabled && this.resetActiveElement(), this._setNextActiveOptionIfAutoActiveFirstOption();
228
+ }, {
224
229
  signal: this._openPanelEventsController.signal
225
- }), this.triggerElement?.addEventListener("keydown", (e) => this.openedPanelKeyboardInteraction(e), {
230
+ }), this.triggerElement?.addEventListener("keydown", (t) => this.openedPanelKeyboardInteraction(t), {
226
231
  signal: this._openPanelEventsController.signal,
227
232
  // We need key event to run before any other subscription to guarantee a correct
228
233
  // interaction with other components (necessary for the 'sbb-chip-group' use case).
229
234
  capture: !0
230
235
  });
231
236
  }
232
- _closedPanelKeyboardInteraction(e) {
237
+ _closedPanelKeyboardInteraction(t) {
233
238
  if (this.state === "closed")
234
- switch (e.key) {
239
+ switch (t.key) {
235
240
  case "Enter":
236
241
  case "ArrowDown":
237
242
  case "ArrowUp":
@@ -240,26 +245,26 @@ let me = (() => {
240
245
  }
241
246
  }
242
247
  /** Highlight the searched text on the options. */
243
- _highlightOptions(e) {
244
- e != null && this.options.forEach((t) => t.highlight(e));
248
+ _highlightOptions(t) {
249
+ t != null && this.options.forEach((e) => e.highlight(t));
245
250
  }
246
251
  render() {
247
252
  return H`
248
253
  <div class="sbb-autocomplete__gap-fix"></div>
249
254
  <div class="sbb-autocomplete__container">
250
- <div class="sbb-autocomplete__gap-fix">${oe()}</div>
255
+ <div class="sbb-autocomplete__gap-fix">${ot()}</div>
251
256
  <div
252
257
  @animationend=${this._onAnimationEnd}
253
258
  class="sbb-autocomplete__panel"
254
259
  ?data-open=${this.state === "opened" || this.state === "opening"}
255
- ${T((e) => this._overlay = e)}
260
+ ${T((t) => this._overlay = t)}
256
261
  >
257
262
  <div class="sbb-autocomplete__wrapper">
258
263
  <div
259
264
  class="sbb-autocomplete__options"
260
265
  role=${x ? M : this.panelRole}
261
266
  id=${x ? M : this.overlayId}
262
- ${T((e) => this._optionContainer = e)}
267
+ ${T((t) => this._optionContainer = t)}
263
268
  >
264
269
  <slot @slotchange=${this._handleSlotchange}></slot>
265
270
  </div>
@@ -269,22 +274,22 @@ let me = (() => {
269
274
  `;
270
275
  }
271
276
  }, d = new WeakMap(), h = new WeakMap(), c = new WeakMap(), v = new WeakMap(), g = new WeakMap(), u = new WeakMap(), (() => {
272
- const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
273
- s = [q(), m()], E = [q(), m()], C = [j(), m({ attribute: "preserve-icon-space", reflect: !0, type: Boolean })], P = [j(), m({ attribute: "auto-active-first-option", type: Boolean })], F = [m({ attribute: !1 })], W = [m({ reflect: !0 })], f(r, null, s, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (t) => "origin" in t, get: (t) => t.origin, set: (t, o) => {
274
- t.origin = o;
275
- } }, metadata: e }, a, _), f(r, null, E, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, o) => {
276
- t.trigger = o;
277
- } }, metadata: e }, k, O), f(r, null, C, { kind: "accessor", name: "preserveIconSpace", static: !1, private: !1, access: { has: (t) => "preserveIconSpace" in t, get: (t) => t.preserveIconSpace, set: (t, o) => {
278
- t.preserveIconSpace = o;
279
- } }, metadata: e }, A, z), f(r, null, P, { kind: "accessor", name: "autoActiveFirstOption", static: !1, private: !1, access: { has: (t) => "autoActiveFirstOption" in t, get: (t) => t.autoActiveFirstOption, set: (t, o) => {
280
- t.autoActiveFirstOption = o;
281
- } }, metadata: e }, I, S), f(r, null, F, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (t) => "displayWith" in t, get: (t) => t.displayWith, set: (t, o) => {
282
- t.displayWith = o;
283
- } }, metadata: e }, D, L), f(r, null, W, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
284
- t.size = o;
285
- } }, metadata: e }, R, U), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
286
- })(), r.styles = ie, r;
277
+ const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
278
+ s = [q(), m()], E = [q(), m()], A = [j(), m({ attribute: "preserve-icon-space", reflect: !0, type: Boolean })], I = [j(), m({ attribute: "auto-active-first-option", type: Boolean })], F = [m({ attribute: !1 })], N = [m({ reflect: !0 })], f(r, null, s, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (e) => "origin" in e, get: (e) => e.origin, set: (e, o) => {
279
+ e.origin = o;
280
+ } }, metadata: t }, a, _), f(r, null, E, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
281
+ e.trigger = o;
282
+ } }, metadata: t }, O, k), f(r, null, A, { kind: "accessor", name: "preserveIconSpace", static: !1, private: !1, access: { has: (e) => "preserveIconSpace" in e, get: (e) => e.preserveIconSpace, set: (e, o) => {
283
+ e.preserveIconSpace = o;
284
+ } }, metadata: t }, C, z), f(r, null, I, { kind: "accessor", name: "autoActiveFirstOption", static: !1, private: !1, access: { has: (e) => "autoActiveFirstOption" in e, get: (e) => e.autoActiveFirstOption, set: (e, o) => {
285
+ e.autoActiveFirstOption = o;
286
+ } }, metadata: t }, P, S), f(r, null, F, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, o) => {
287
+ e.displayWith = o;
288
+ } }, metadata: t }, L, D), f(r, null, N, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, o) => {
289
+ e.size = o;
290
+ } }, metadata: t }, W, R), t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
291
+ })(), r.styles = it, r;
287
292
  })();
288
293
  export {
289
- me as SbbAutocompleteBaseElement
294
+ mt as SbbAutocompleteBaseElement
290
295
  };
package/autocomplete/autocomplete.component.d.ts CHANGED
@@ -12,7 +12,6 @@ export declare class SbbAutocompleteElement<T = string> extends SbbAutocompleteB
12
12
  static readonly role: string | null;
13
13
  protected overlayId: string;
14
14
  protected panelRole: string;
15
- private _activeItemIndex;
16
15
  protected get options(): SbbOptionElement<T>[];
17
16
  constructor();
18
17
  protected syncNegative(): void;
package/autocomplete/autocomplete.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAwB,MAAM,cAAc,CAAC;AAE/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAU5E;;;;;;;GAOG;AACH,qBAEM,sBAAsB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,0BAA0B,CAAC,CAAC,CAAC;IAC5E,gBAAgC,IAAI,gBAAqC;IACzE,SAAS,CAAC,SAAS,SAAkC;IACrD,SAAS,CAAC,SAAS,SAAa;IAChC,OAAO,CAAC,gBAAgB,CAAM;IAE9B,SAAS,KAAK,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAE7C;;IAOD,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAqBpE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAStD,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI;IAqB1D,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"}
1
+ {"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAwB,MAAM,cAAc,CAAC;AAE/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAU5E;;;;;;;GAOG;AACH,qBAEM,sBAAsB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,0BAA0B,CAAC,CAAC,CAAC;IAC5E,gBAAgC,IAAI,gBAAqC;IACzE,SAAS,CAAC,SAAS,SAAkC;IACrD,SAAS,CAAC,SAAS,SAAa;IAEhC,SAAS,KAAK,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAE7C;;IAOD,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAqBpE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAMtD,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI;IA0B1D,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAMpC,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"}
package/autocomplete/autocomplete.component.js CHANGED
@@ -1,20 +1,20 @@
1
- import { __esDecorate as u, __runInitializers as p } from "tslib";
2
- import { customElement as h } from "lit/decorators.js";
3
- import { getNextElementIndex as v } from "../core/a11y.js";
4
- import { isSafari as f } from "../core/dom.js";
5
- import { setAriaComboBoxAttributes as A } from "../core/overlay.js";
6
- import { SbbAutocompleteBaseElement as I } from "./autocomplete-base-element.js";
7
- let x = 0;
8
- const b = f;
9
- let k = (() => {
1
+ import { __esDecorate as u, __runInitializers as m } from "tslib";
2
+ import { customElement as d } from "lit/decorators.js";
3
+ import { getNextElementIndex as h } from "../core/a11y.js";
4
+ import { isSafari as v } from "../core/dom.js";
5
+ import { setAriaComboBoxAttributes as f } from "../core/overlay.js";
6
+ import { SbbAutocompleteBaseElement as g } from "./autocomplete-base-element.js";
7
+ let A = 0;
8
+ const l = v;
9
+ let _ = (() => {
10
10
  var i;
11
- let d = [h("sbb-autocomplete")], o, r = [], e, n = I;
12
- return i = class extends n {
11
+ let c = [d("sbb-autocomplete")], a, o = [], e, r = g;
12
+ return i = class extends r {
13
13
  get options() {
14
14
  return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
15
15
  }
16
16
  constructor() {
17
- super(), this.overlayId = `sbb-autocomplete-${++x}`, this.panelRole = "listbox", this._activeItemIndex = -1, this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t));
17
+ super(), this.overlayId = `sbb-autocomplete-${++A}`, this.panelRole = "listbox", this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t));
18
18
  }
19
19
  syncNegative() {
20
20
  this.querySelectorAll?.("sbb-divider, sbb-option-hint").forEach((t) => t.negative = this.negative), this.querySelectorAll?.("sbb-option, sbb-optgroup").forEach((t) => t.toggleAttribute("data-negative", this.negative));
@@ -35,28 +35,28 @@ let k = (() => {
35
35
  }
36
36
  }
37
37
  selectByKeyboard(t) {
38
- t.preventDefault();
39
- const s = this.options[this._activeItemIndex];
40
- s && s.selectViaUserInteraction(!0);
38
+ t.preventDefault(), this.activeOption?.selectViaUserInteraction(!0);
41
39
  }
42
40
  setNextActiveOption(t) {
43
- const s = this.options.filter((m) => !m.disabled && !m.hasAttribute("data-group-disabled")), l = v(t, this._activeItemIndex, s.length), a = s[l];
44
- a.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", a.id), a.scrollIntoView({ block: "nearest" });
45
- const c = s[this._activeItemIndex];
46
- c && c.setActive(!1), this._activeItemIndex = l;
41
+ const s = this.options.filter((n) => !n.disabled && !n.hasAttribute("data-group-disabled"));
42
+ if (this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), !s.length) {
43
+ this.activeOption = null;
44
+ return;
45
+ }
46
+ const b = this.activeOption ? s.indexOf(this.activeOption) : -1, p = h(t, b, s.length);
47
+ this.activeOption = s[p], this.activeOption.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", this.activeOption.id), this.activeOption.scrollIntoView({ block: "nearest" });
47
48
  }
48
49
  resetActiveElement() {
49
- const t = this.options[this._activeItemIndex];
50
- t && t.setActive(!1), this._activeItemIndex = -1, this.triggerElement?.removeAttribute("aria-activedescendant");
50
+ this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), this.activeOption = null;
51
51
  }
52
52
  setTriggerAttributes(t) {
53
- A(t, b ? this.id : this.overlayId, !1);
53
+ f(t, l ? this.id : this.overlayId, !1);
54
54
  }
55
55
  }, e = i, (() => {
56
- const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
57
- u(null, o = { value: e }, d, { kind: "class", name: e.name, metadata: t }, null, r), e = o.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
58
- })(), i.role = b ? "listbox" : null, p(e, r), e;
56
+ const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
57
+ u(null, a = { value: e }, c, { kind: "class", name: e.name, metadata: t }, null, o), e = a.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
58
+ })(), i.role = l ? "listbox" : null, m(e, o), e;
59
59
  })();
60
60
  export {
61
- k as SbbAutocompleteElement
61
+ _ as SbbAutocompleteElement
62
62
  };
package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts CHANGED
@@ -12,10 +12,8 @@ export declare class SbbAutocompleteGridElement<T = string> extends SbbAutocompl
12
12
  static readonly role: string | null;
13
13
  protected overlayId: string;
14
14
  protected panelRole: string;
15
- private _activeItemIndex;
16
15
  private _activeColumnIndex;
17
16
  protected get options(): SbbAutocompleteGridOptionElement<T>[];
18
- private get _row();
19
17
  constructor();
20
18
  protected syncNegative(): void;
21
19
  protected openedPanelKeyboardInteraction(event: KeyboardEvent): void;
package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAOnE,OAAO,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;AAWlF;;;;;;;GAOG;AACH,qBAEM,0BAA0B,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,0BAA0B,CAAC,CAAC,CAAC;IAChF,gBAAgC,IAAI,gBAAkC;IACtE,SAAS,CAAC,SAAS,SAAuC;IAC1D,SAAS,CAAC,SAAS,SAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,kBAAkB,CAAK;IAE/B,SAAS,KAAK,OAAO,IAAI,gCAAgC,CAAC,CAAC,CAAC,EAAE,CAM7D;IAED,OAAO,KAAK,IAAI,GAMf;;IAOD,SAAS,CAAC,YAAY,IAAI,IAAI;IAY9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA0BpE;;;;;;OAMG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IActD,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI;IA8B1D,OAAO,CAAC,+BAA+B;IAsCvC,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAkBpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
1
+ {"version":3,"file":"autocomplete-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAOnE,OAAO,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;AAUlF;;;;;;;GAOG;AACH,qBAEM,0BAA0B,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,0BAA0B,CAAC,CAAC,CAAC;IAChF,gBAAgC,IAAI,gBAAkC;IACtE,SAAS,CAAC,SAAS,SAAuC;IAC1D,SAAS,CAAC,SAAS,SAAU;IAC7B,OAAO,CAAC,kBAAkB,CAAK;IAE/B,SAAS,KAAK,OAAO,IAAI,gCAAgC,CAAC,CAAC,CAAC,EAAE,CAM7D;;IAOD,SAAS,CAAC,YAAY,IAAI,IAAI;IAY9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA0BpE;;;;;;OAMG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAgBtD,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI;IA8B1D,OAAO,CAAC,+BAA+B;IAqCvC,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAapC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}