@sbb-esta/lyne-elements-experimental 4.0.0-next.2 → 4.0.0-next.3
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.
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts +38 -0
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +88 -0
- package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.d.ts +31 -0
- package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +55 -0
- package/autocomplete-grid/autocomplete-grid-button.d.ts +5 -0
- package/autocomplete-grid/autocomplete-grid-button.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-button.js +4 -0
- package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.d.ts +19 -0
- package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js +25 -0
- package/autocomplete-grid/autocomplete-grid-cell.d.ts +5 -0
- package/autocomplete-grid/autocomplete-grid-cell.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-cell.js +4 -0
- package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.d.ts +19 -0
- package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js +24 -0
- package/autocomplete-grid/autocomplete-grid-optgroup.d.ts +5 -0
- package/autocomplete-grid/autocomplete-grid-optgroup.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-optgroup.js +4 -0
- package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.d.ts +27 -0
- package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +42 -0
- package/autocomplete-grid/autocomplete-grid-option.d.ts +5 -0
- package/autocomplete-grid/autocomplete-grid-option.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-option.js +5 -0
- package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.d.ts +20 -0
- package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +28 -0
- package/autocomplete-grid/autocomplete-grid-row.d.ts +5 -0
- package/autocomplete-grid/autocomplete-grid-row.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid-row.js +4 -0
- package/autocomplete-grid/autocomplete-grid.d.ts +5 -0
- package/autocomplete-grid/autocomplete-grid.d.ts.map +1 -0
- package/autocomplete-grid/autocomplete-grid.js +4 -0
- package/autocomplete-grid.d.ts +10 -0
- package/autocomplete-grid.d.ts.map +1 -0
- package/autocomplete-grid.js +15 -0
- package/core/datetime.d.ts +1 -1
- package/core/timetable/access-leg-helper.d.ts +1 -1
- package/core/timetable/timetable-helper.d.ts +1 -1
- package/core/timetable.d.ts +3 -3
- package/custom-elements.json +949 -106
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts +38 -0
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +139 -0
- package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.d.ts +31 -0
- package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +82 -0
- package/development/autocomplete-grid/autocomplete-grid-button.d.ts +5 -0
- package/development/autocomplete-grid/autocomplete-grid-button.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-button.js +5 -0
- package/development/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.d.ts +19 -0
- package/development/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js +40 -0
- package/development/autocomplete-grid/autocomplete-grid-cell.d.ts +5 -0
- package/development/autocomplete-grid/autocomplete-grid-cell.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-cell.js +5 -0
- package/development/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.d.ts +19 -0
- package/development/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js +34 -0
- package/development/autocomplete-grid/autocomplete-grid-optgroup.d.ts +5 -0
- package/development/autocomplete-grid/autocomplete-grid-optgroup.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-optgroup.js +5 -0
- package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.d.ts +27 -0
- package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +139 -0
- package/development/autocomplete-grid/autocomplete-grid-option.d.ts +5 -0
- package/development/autocomplete-grid/autocomplete-grid-option.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-option.js +6 -0
- package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.d.ts +20 -0
- package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +115 -0
- package/development/autocomplete-grid/autocomplete-grid-row.d.ts +5 -0
- package/development/autocomplete-grid/autocomplete-grid-row.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid-row.js +5 -0
- package/development/autocomplete-grid/autocomplete-grid.d.ts +5 -0
- package/development/autocomplete-grid/autocomplete-grid.d.ts.map +1 -0
- package/development/autocomplete-grid/autocomplete-grid.js +5 -0
- package/development/autocomplete-grid.d.ts +10 -0
- package/development/autocomplete-grid.d.ts.map +1 -0
- package/development/autocomplete-grid.js +16 -0
- package/development/core/datetime.d.ts +1 -1
- package/development/core/timetable/access-leg-helper.d.ts +1 -1
- package/development/core/timetable/access-leg-helper.js +1 -1
- package/development/core/timetable/timetable-helper.d.ts +1 -1
- package/development/core/timetable/timetable-helper.js +1 -1
- package/development/core/timetable.d.ts +3 -3
- package/development/journey-summary/journey-summary.component.d.ts +1 -1
- package/development/journey-summary/journey-summary.component.js +1 -1
- package/development/journey-summary.d.ts +1 -1
- package/development/pearl-chain/pearl-chain.component.d.ts +1 -1
- package/development/pearl-chain/pearl-chain.component.js +1 -1
- package/development/pearl-chain-time/pearl-chain-time.component.d.ts +1 -1
- package/development/pearl-chain-time/pearl-chain-time.component.js +1 -1
- package/development/pearl-chain-time.d.ts +1 -1
- package/development/pearl-chain-vertical-item.d.ts +1 -1
- package/development/pearl-chain-vertical.d.ts +1 -1
- package/development/pearl-chain.d.ts +1 -1
- package/development/seat-reservation/common/mapper/icon-mapper.js +1 -1
- package/development/seat-reservation/common/mapper/mapper.d.ts +1 -1
- package/development/seat-reservation/common/mapper/mapper.js +1 -1
- package/development/seat-reservation/common/mapper.d.ts +2 -2
- package/development/seat-reservation/common/translations.d.ts +1 -1
- package/development/seat-reservation/common.d.ts +4 -4
- package/development/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts +2 -1
- package/development/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts.map +1 -1
- package/development/seat-reservation/seat-reservation/seat-reservation-base-element.js +9 -2
- package/development/seat-reservation/seat-reservation/seat-reservation.component.d.ts +1 -1
- package/development/seat-reservation/seat-reservation/seat-reservation.component.d.ts.map +1 -1
- package/development/seat-reservation/seat-reservation/seat-reservation.component.js +7 -4
- package/development/seat-reservation/seat-reservation-area.d.ts +1 -1
- package/development/seat-reservation/seat-reservation-graphic/seat-reservation-assets.js +1 -1
- package/development/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.js +1 -1
- package/development/seat-reservation/seat-reservation-graphic.d.ts +1 -1
- package/development/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.d.ts +7 -3
- package/development/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.d.ts.map +1 -1
- package/development/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js +52 -17
- package/development/seat-reservation/seat-reservation-navigation-coach.d.ts +1 -1
- package/development/seat-reservation/seat-reservation-navigation-services/seat-reservation-navigation-services.component.js +1 -1
- package/development/seat-reservation/seat-reservation-navigation-services.d.ts +1 -1
- package/development/seat-reservation/seat-reservation-place-control/seat-reservation-place-control.component.d.ts +1 -1
- package/development/seat-reservation/seat-reservation-place-control/seat-reservation-place-control.component.js +1 -1
- package/development/seat-reservation/seat-reservation-place-control.d.ts +1 -1
- package/development/seat-reservation/seat-reservation-scoped.d.ts +1 -1
- package/development/seat-reservation/seat-reservation.d.ts +2 -2
- package/development/seat-reservation.d.ts +8 -8
- package/development/timetable-duration.d.ts +1 -1
- package/development/timetable-row/timetable-row.component.d.ts +1 -1
- package/development/timetable-row/timetable-row.component.js +1 -1
- package/development/timetable-row.d.ts +1 -1
- package/index.d.ts +12 -0
- package/index.js +12 -0
- package/journey-summary/journey-summary.component.d.ts +1 -1
- package/journey-summary.d.ts +1 -1
- package/package.json +37 -2
- package/pearl-chain/pearl-chain.component.d.ts +1 -1
- package/pearl-chain-time/pearl-chain-time.component.d.ts +1 -1
- package/pearl-chain-time.d.ts +1 -1
- package/pearl-chain-vertical-item.d.ts +1 -1
- package/pearl-chain-vertical.d.ts +1 -1
- package/pearl-chain.d.ts +1 -1
- package/seat-reservation/common/mapper/mapper.d.ts +1 -1
- package/seat-reservation/common/mapper.d.ts +2 -2
- package/seat-reservation/common/translations.d.ts +1 -1
- package/seat-reservation/common.d.ts +4 -4
- package/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts +2 -1
- package/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts.map +1 -1
- package/seat-reservation/seat-reservation/seat-reservation-base-element.js +23 -22
- package/seat-reservation/seat-reservation/seat-reservation.component.d.ts +1 -1
- package/seat-reservation/seat-reservation/seat-reservation.component.d.ts.map +1 -1
- package/seat-reservation/seat-reservation/seat-reservation.component.js +13 -14
- package/seat-reservation/seat-reservation-area.d.ts +1 -1
- package/seat-reservation/seat-reservation-graphic.d.ts +1 -1
- package/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.d.ts +7 -3
- package/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.d.ts.map +1 -1
- package/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js +147 -126
- package/seat-reservation/seat-reservation-navigation-coach.d.ts +1 -1
- package/seat-reservation/seat-reservation-navigation-services.d.ts +1 -1
- package/seat-reservation/seat-reservation-place-control/seat-reservation-place-control.component.d.ts +1 -1
- package/seat-reservation/seat-reservation-place-control.d.ts +1 -1
- package/seat-reservation/seat-reservation-scoped.d.ts +1 -1
- package/seat-reservation/seat-reservation.d.ts +2 -2
- package/seat-reservation.d.ts +8 -8
- package/timetable-duration.d.ts +1 -1
- package/timetable-row/timetable-row.component.d.ts +1 -1
- package/timetable-row.d.ts +1 -1
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { SbbAutocompleteBaseElement } from '@sbb-esta/lyne-elements/autocomplete.js';
|
|
2
|
+
import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.ts';
|
|
3
|
+
/**
|
|
4
|
+
* Combined with a native input, it displays a panel with a list of available options with connected buttons.
|
|
5
|
+
*
|
|
6
|
+
* @slot - Use the unnamed slot to add `sbb-autocomplete-grid-row` or `sbb-autocomplete-grid-optgroup` elements to the `sbb-autocomplete-grid`.
|
|
7
|
+
* @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
|
|
8
|
+
* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
|
|
9
|
+
* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
|
|
10
|
+
*/
|
|
11
|
+
export declare class SbbAutocompleteGridElement<T = string> extends SbbAutocompleteBaseElement<T> {
|
|
12
|
+
static readonly role: string | null;
|
|
13
|
+
protected overlayId: string;
|
|
14
|
+
protected panelRole: string;
|
|
15
|
+
private _activeColumnIndex;
|
|
16
|
+
protected get options(): SbbAutocompleteGridOptionElement<T>[];
|
|
17
|
+
constructor();
|
|
18
|
+
protected syncNegative(): void;
|
|
19
|
+
protected openedPanelKeyboardInteraction(event: KeyboardEvent): void;
|
|
20
|
+
/**
|
|
21
|
+
* Select an element on 'Enter' keypress.
|
|
22
|
+
*
|
|
23
|
+
* Due to keyboard navigation code, the `_activeColumnIndex` is zero when an option is 'focused'
|
|
24
|
+
* and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
|
|
25
|
+
* would always return a `SbbAutocompleteGridButtonElement`.
|
|
26
|
+
*/
|
|
27
|
+
protected selectByKeyboard(event: KeyboardEvent): void;
|
|
28
|
+
protected setNextActiveOption(event?: KeyboardEvent): void;
|
|
29
|
+
private _setNextHorizontalActiveElement;
|
|
30
|
+
protected resetActiveElement(): void;
|
|
31
|
+
protected setTriggerAttributes(element: HTMLInputElement): void;
|
|
32
|
+
}
|
|
33
|
+
declare global {
|
|
34
|
+
interface HTMLElementTagNameMap {
|
|
35
|
+
'sbb-autocomplete-grid': SbbAutocompleteGridElement;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=autocomplete-grid.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AASrF,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;IA+B1D,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"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { __esDecorate as h, __runInitializers as v } from "tslib";
|
|
2
|
+
import { SbbAutocompleteBaseElement as g } from "@sbb-esta/lyne-elements/autocomplete.js";
|
|
3
|
+
import { getNextElementIndex as u } from "@sbb-esta/lyne-elements/core/a11y.js";
|
|
4
|
+
import { isSafari as f } from "@sbb-esta/lyne-elements/core/dom.js";
|
|
5
|
+
import { setAriaComboBoxAttributes as A } from "@sbb-esta/lyne-elements/core/overlay.js";
|
|
6
|
+
import { customElement as O } from "lit/decorators.js";
|
|
7
|
+
import { SbbAutocompleteGridOptionElement as b } from "../autocomplete-grid-option.js";
|
|
8
|
+
let x = 0;
|
|
9
|
+
const m = f;
|
|
10
|
+
let k = (() => {
|
|
11
|
+
var o;
|
|
12
|
+
let d = [O("sbb-autocomplete-grid")], l, n = [], i, c = g;
|
|
13
|
+
return o = class extends c {
|
|
14
|
+
get options() {
|
|
15
|
+
return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-option") ?? []);
|
|
16
|
+
}
|
|
17
|
+
constructor() {
|
|
18
|
+
super(), this.overlayId = `sbb-autocomplete-grid-${++x}`, this.panelRole = "grid", this._activeColumnIndex = 0, this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t));
|
|
19
|
+
}
|
|
20
|
+
syncNegative() {
|
|
21
|
+
this.querySelectorAll?.("sbb-divider, sbb-autocomplete-grid-button, sbb-option-hint").forEach((t) => t.negative = this.negative), this.querySelectorAll?.("sbb-autocomplete-grid-row, sbb-autocomplete-grid-option, sbb-autocomplete-grid-optgroup").forEach((t) => t.toggleAttribute("data-negative", this.negative));
|
|
22
|
+
}
|
|
23
|
+
openedPanelKeyboardInteraction(t) {
|
|
24
|
+
if (this.state === "opened")
|
|
25
|
+
switch (t.key) {
|
|
26
|
+
case "Tab":
|
|
27
|
+
this.close();
|
|
28
|
+
break;
|
|
29
|
+
case "Enter":
|
|
30
|
+
this.selectByKeyboard(t);
|
|
31
|
+
break;
|
|
32
|
+
case "ArrowDown":
|
|
33
|
+
case "ArrowUp":
|
|
34
|
+
this.setNextActiveOption(t);
|
|
35
|
+
break;
|
|
36
|
+
case "ArrowRight":
|
|
37
|
+
case "ArrowLeft":
|
|
38
|
+
this._setNextHorizontalActiveElement(t);
|
|
39
|
+
break;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Select an element on 'Enter' keypress.
|
|
44
|
+
*
|
|
45
|
+
* Due to keyboard navigation code, the `_activeColumnIndex` is zero when an option is 'focused'
|
|
46
|
+
* and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
|
|
47
|
+
* would always return a `SbbAutocompleteGridButtonElement`.
|
|
48
|
+
*/
|
|
49
|
+
selectByKeyboard(t) {
|
|
50
|
+
t.preventDefault(), this._activeColumnIndex !== 0 ? this.activeOption?.closest("sbb-autocomplete-grid-row")?.querySelectorAll("sbb-autocomplete-grid-button")[
|
|
51
|
+
// We ignore the option in the selector. Therefore, we have to shift the activeColumnIndex by one.
|
|
52
|
+
this._activeColumnIndex - 1
|
|
53
|
+
]?.click() : this.activeOption?.selectViaUserInteraction(!0);
|
|
54
|
+
}
|
|
55
|
+
setNextActiveOption(t) {
|
|
56
|
+
const e = this.options.filter((r) => !r.matches(":state(disabled)"));
|
|
57
|
+
if (this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-row [data-focus-visible]") ?? []).forEach((r) => r.removeAttribute("data-focus-visible")), this._activeColumnIndex = 0, !e.length) {
|
|
58
|
+
this.activeOption = null;
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const a = this.activeOption ? e.indexOf(this.activeOption) : -1, s = u(t, a, e.length);
|
|
62
|
+
this.activeOption = e[s], this.activeOption.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", this.activeOption.id), this.activeOption.scrollIntoView({ block: "nearest" }), this.autoSelectActiveOption && this.onOptionArrowsSelected(this.activeOption);
|
|
63
|
+
}
|
|
64
|
+
_setNextHorizontalActiveElement(t) {
|
|
65
|
+
if (!this.activeOption)
|
|
66
|
+
return;
|
|
67
|
+
const e = Array.from(this.activeOption?.closest("sbb-autocomplete-grid-row")?.querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button") ?? [])?.filter((p) => !p.matches(":state(disabled)"));
|
|
68
|
+
if (!e.length)
|
|
69
|
+
return;
|
|
70
|
+
const a = u(t, this._activeColumnIndex, e.length), s = e[a];
|
|
71
|
+
s instanceof b ? s.setActive(!0) : s.toggleAttribute("data-focus-visible", !0);
|
|
72
|
+
const r = e[this._activeColumnIndex];
|
|
73
|
+
r instanceof b ? r.setActive(!1) : r.toggleAttribute("data-focus-visible", !1), this.triggerElement?.setAttribute("aria-activedescendant", s.id), s.scrollIntoView({ block: "nearest" }), this._activeColumnIndex = a;
|
|
74
|
+
}
|
|
75
|
+
resetActiveElement() {
|
|
76
|
+
this._activeColumnIndex !== 0 && this.activeOption?.closest("sbb-autocomplete-grid-row")?.querySelectorAll("sbb-autocomplete-grid-button").forEach((t) => t.toggleAttribute("data-focus-visible", !1)), this.activeOption?.setActive(!1), this.activeOption = null, this._activeColumnIndex = 0, this.triggerElement?.removeAttribute("aria-activedescendant");
|
|
77
|
+
}
|
|
78
|
+
setTriggerAttributes(t) {
|
|
79
|
+
A(t, m ? this.id : this.overlayId, !1, "grid");
|
|
80
|
+
}
|
|
81
|
+
}, i = o, (() => {
|
|
82
|
+
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
|
|
83
|
+
h(null, l = { value: i }, d, { kind: "class", name: i.name, metadata: t }, null, n), i = l.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
84
|
+
})(), o.role = m ? "grid" : null, v(i, n), i;
|
|
85
|
+
})();
|
|
86
|
+
export {
|
|
87
|
+
k as SbbAutocompleteGridElement
|
|
88
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { SbbActionBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
|
|
2
|
+
import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
3
|
+
import { SbbAutocompleteGridOptgroupElement } from '../autocomplete-grid-optgroup.ts';
|
|
4
|
+
import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.ts';
|
|
5
|
+
declare const SbbAutocompleteGridButtonElement_base: import('@sbb-esta/lyne-elements/core/mixins.js').AbstractConstructor<import('@sbb-esta/lyne-elements/core/mixins.js').SbbDisabledMixinType> & import('@sbb-esta/lyne-elements/core/mixins.js').AbstractConstructor<import('@sbb-esta/lyne-elements/core/mixins.js').SbbNegativeMixinType> & import('@sbb-esta/lyne-elements/core/mixins.js').AbstractConstructor<import('@sbb-esta/lyne-elements/icon.js').SbbIconNameMixinType> & typeof SbbActionBaseElement;
|
|
6
|
+
/**
|
|
7
|
+
* It displays an icon-only button that can be used in `sbb-autocomplete-grid`.
|
|
8
|
+
*
|
|
9
|
+
* @slot icon - Slot used to display the icon, if one is set
|
|
10
|
+
*/
|
|
11
|
+
export declare class SbbAutocompleteGridButtonElement extends SbbAutocompleteGridButtonElement_base {
|
|
12
|
+
static readonly role = "button";
|
|
13
|
+
static styles: CSSResultGroup;
|
|
14
|
+
/** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
|
|
15
|
+
get option(): SbbAutocompleteGridOptionElement | null;
|
|
16
|
+
get optgroup(): SbbAutocompleteGridOptgroupElement | null;
|
|
17
|
+
constructor();
|
|
18
|
+
protected isDisabledExternally(): boolean;
|
|
19
|
+
protected renderTemplate(): TemplateResult;
|
|
20
|
+
connectedCallback(): void;
|
|
21
|
+
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
22
|
+
private _updateInternals;
|
|
23
|
+
private _handleButtonClick;
|
|
24
|
+
}
|
|
25
|
+
declare global {
|
|
26
|
+
interface HTMLElementTagNameMap {
|
|
27
|
+
'sbb-autocomplete-grid-button': SbbAutocompleteGridButtonElement;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=autocomplete-grid-button.component.d.ts.map
|
package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAOrF,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9F,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,kCAAkC,CAAC;AAC3F,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;;AAIvF;;;;GAIG;AACH,qBAMM,gCAAiC,SAAQ,qCAE9C;IACC,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAAsC;IAEnF,+EAA+E;IAC/E,IAAW,MAAM,IAAI,gCAAgC,GAAG,IAAI,CAK3D;IAED,IAAW,QAAQ,IAAI,kCAAkC,GAAG,IAAI,CAE/D;;cAmBkB,oBAAoB,IAAI,OAAO;cAI/B,cAAc,IAAI,cAAc;IAInC,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO5E,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,kBAAkB,CAIxB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { __esDecorate as o, __runInitializers as n } from "tslib";
|
|
2
|
+
import { miniButtonStyle as u } from "@sbb-esta/lyne-elements/button/common.js";
|
|
3
|
+
import { SbbActionBaseElement as d } from "@sbb-esta/lyne-elements/core/base-elements.js";
|
|
4
|
+
import { SbbAncestorWatcherController as b } from "@sbb-esta/lyne-elements/core/controllers.js";
|
|
5
|
+
import { hostAttributes as c } from "@sbb-esta/lyne-elements/core/decorators.js";
|
|
6
|
+
import { isEventPrevented as m } from "@sbb-esta/lyne-elements/core/eventing.js";
|
|
7
|
+
import { SbbDisabledMixin as p, SbbNegativeMixin as h } from "@sbb-esta/lyne-elements/core/mixins.js";
|
|
8
|
+
import { boxSizingStyles as f } from "@sbb-esta/lyne-elements/core/styles.js";
|
|
9
|
+
import { SbbIconNameMixin as S } from "@sbb-esta/lyne-elements/icon.js";
|
|
10
|
+
import { isServer as g } from "lit";
|
|
11
|
+
import { customElement as _ } from "lit/decorators.js";
|
|
12
|
+
let y = 0, M = (() => {
|
|
13
|
+
var t;
|
|
14
|
+
let l = [_("sbb-autocomplete-grid-button"), c({
|
|
15
|
+
tabindex: null,
|
|
16
|
+
"data-button": ""
|
|
17
|
+
})], i, r = [], s, a = p(h(S(d)));
|
|
18
|
+
return t = class extends a {
|
|
19
|
+
/** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
|
|
20
|
+
get option() {
|
|
21
|
+
return this.closest("sbb-autocomplete-grid-row")?.querySelector("sbb-autocomplete-grid-option") || null;
|
|
22
|
+
}
|
|
23
|
+
get optgroup() {
|
|
24
|
+
return this.closest("sbb-autocomplete-grid-optgroup");
|
|
25
|
+
}
|
|
26
|
+
constructor() {
|
|
27
|
+
super(), this._handleButtonClick = async (e) => {
|
|
28
|
+
await m(e) || this.closest("form");
|
|
29
|
+
}, g || (this.setupBaseEventHandlers(), this.addEventListener("click", this._handleButtonClick), this.addController(new b(this, () => this.closest("sbb-autocomplete-grid-optgroup"), {
|
|
30
|
+
disabled: () => this._updateInternals()
|
|
31
|
+
})));
|
|
32
|
+
}
|
|
33
|
+
isDisabledExternally() {
|
|
34
|
+
return this.optgroup?.disabled ?? !1;
|
|
35
|
+
}
|
|
36
|
+
renderTemplate() {
|
|
37
|
+
return super.renderIconSlot();
|
|
38
|
+
}
|
|
39
|
+
connectedCallback() {
|
|
40
|
+
super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-button-${++y}`;
|
|
41
|
+
}
|
|
42
|
+
willUpdate(e) {
|
|
43
|
+
super.willUpdate(e), e.has("disabled") && this._updateInternals();
|
|
44
|
+
}
|
|
45
|
+
_updateInternals() {
|
|
46
|
+
this.disabled || this.optgroup?.disabled ? (this.internals.states.add("disabled"), this.internals.ariaDisabled = "true") : (this.internals.states.delete("disabled"), this.internals.ariaDisabled = null);
|
|
47
|
+
}
|
|
48
|
+
}, s = t, (() => {
|
|
49
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
|
|
50
|
+
o(null, i = { value: s }, l, { kind: "class", name: s.name, metadata: e }, null, r), s = i.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
51
|
+
})(), t.role = "button", t.styles = [f, u], n(s, r), s;
|
|
52
|
+
})();
|
|
53
|
+
export {
|
|
54
|
+
M as SbbAutocompleteGridButtonElement
|
|
55
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-button.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-button.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kEAAkE,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
|
|
2
|
+
declare const SbbAutocompleteGridCellElement_base: import('@sbb-esta/lyne-elements/core/mixins.js').AbstractConstructor<import('@sbb-esta/lyne-elements/core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('@sbb-esta/lyne-elements/core/mixins.js').SbbElementInternalsConstructor;
|
|
3
|
+
/**
|
|
4
|
+
* A wrapper component for autocomplete-grid action button.
|
|
5
|
+
*
|
|
6
|
+
* @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-button` element.
|
|
7
|
+
*/
|
|
8
|
+
export declare class SbbAutocompleteGridCellElement extends SbbAutocompleteGridCellElement_base {
|
|
9
|
+
static readonly role = "gridcell";
|
|
10
|
+
static styles: CSSResultGroup;
|
|
11
|
+
protected render(): TemplateResult;
|
|
12
|
+
}
|
|
13
|
+
declare global {
|
|
14
|
+
interface HTMLElementTagNameMap {
|
|
15
|
+
'sbb-autocomplete-grid-cell': SbbAutocompleteGridCellElement;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=autocomplete-grid-cell.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-cell.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAKjF;;;;GAIG;AACH,qBAEM,8BAA+B,SAAQ,mCAAoC;IAC/E,gBAAgC,IAAI,cAAc;IAClD,OAAuB,MAAM,EAAE,cAAc,CAA4B;cAEtD,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,4BAA4B,EAAE,8BAA8B,CAAC;KAC9D;CACF"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { __esDecorate as o, __runInitializers as c } from "tslib";
|
|
2
|
+
import { SbbElementInternalsMixin as m } from "@sbb-esta/lyne-elements/core/mixins.js";
|
|
3
|
+
import { boxSizingStyles as n } from "@sbb-esta/lyne-elements/core/styles.js";
|
|
4
|
+
import { css as b, LitElement as u, html as p } from "lit";
|
|
5
|
+
import { customElement as d } from "lit/decorators.js";
|
|
6
|
+
const f = b`:host{display:block}.sbb-autocomplete-grid-cell{display:flex;column-gap:var(--sbb-spacing-fixed-6x)}`;
|
|
7
|
+
let h = (() => {
|
|
8
|
+
var t;
|
|
9
|
+
let i = [d("sbb-autocomplete-grid-cell")], a, s = [], e, r = m(u);
|
|
10
|
+
return t = class extends r {
|
|
11
|
+
render() {
|
|
12
|
+
return p`
|
|
13
|
+
<span class="sbb-autocomplete-grid-cell">
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</span>
|
|
16
|
+
`;
|
|
17
|
+
}
|
|
18
|
+
}, e = t, (() => {
|
|
19
|
+
const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
|
|
20
|
+
o(null, a = { value: e }, i, { kind: "class", name: e.name, metadata: l }, null, s), e = a.value, l && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
|
|
21
|
+
})(), t.role = "gridcell", t.styles = [n, f], c(e, s), e;
|
|
22
|
+
})();
|
|
23
|
+
export {
|
|
24
|
+
h as SbbAutocompleteGridCellElement
|
|
25
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-cell.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-cell.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8DAA8D,CAAC"}
|
package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { SbbAutocompleteBaseElement } from '@sbb-esta/lyne-elements/autocomplete.js';
|
|
2
|
+
import { SbbOptgroupBaseElement } from '@sbb-esta/lyne-elements/option/optgroup.js';
|
|
3
|
+
import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.ts';
|
|
4
|
+
/**
|
|
5
|
+
* It can be used as a container for one or more `sbb-autocomplete-grid-option`.
|
|
6
|
+
*
|
|
7
|
+
* @slot - Use the unnamed slot to add `sbb-autocomplete-grid-option` elements to the `sbb-autocomplete-grid-optgroup`.
|
|
8
|
+
*/
|
|
9
|
+
export declare class SbbAutocompleteGridOptgroupElement extends SbbOptgroupBaseElement {
|
|
10
|
+
protected get options(): SbbAutocompleteGridOptionElement[];
|
|
11
|
+
protected getAutocompleteParent(): SbbAutocompleteBaseElement | null;
|
|
12
|
+
protected setAttributeFromParent(): void;
|
|
13
|
+
}
|
|
14
|
+
declare global {
|
|
15
|
+
interface HTMLElementTagNameMap {
|
|
16
|
+
'sbb-autocomplete-grid-optgroup': SbbAutocompleteGridOptgroupElement;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=autocomplete-grid-optgroup.component.d.ts.map
|
package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-optgroup.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAC1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAGpF,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;AAEvF;;;;GAIG;AACH,qBAEM,kCAAmC,SAAQ,sBAAsB;IACrE,SAAS,KAAK,OAAO,IAAI,gCAAgC,EAAE,CAI1D;IAED,SAAS,CAAC,qBAAqB,IAAI,0BAA0B,GAAG,IAAI;IAIpE,SAAS,CAAC,sBAAsB,IAAI,IAAI;CAIzC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gCAAgC,EAAE,kCAAkC,CAAC;KACtE;CACF"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { __esDecorate as i, __runInitializers as m } from "tslib";
|
|
2
|
+
import { SbbOptgroupBaseElement as n } from "@sbb-esta/lyne-elements/option/optgroup.js";
|
|
3
|
+
import { customElement as u } from "lit/decorators.js";
|
|
4
|
+
let d = (() => {
|
|
5
|
+
var e;
|
|
6
|
+
let s = [u("sbb-autocomplete-grid-optgroup")], r, l = [], t, o = n;
|
|
7
|
+
return e = class extends o {
|
|
8
|
+
get options() {
|
|
9
|
+
return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-option") ?? []);
|
|
10
|
+
}
|
|
11
|
+
getAutocompleteParent() {
|
|
12
|
+
return this.closest?.("sbb-autocomplete-grid") || null;
|
|
13
|
+
}
|
|
14
|
+
setAttributeFromParent() {
|
|
15
|
+
this.negative = !!this.closest(":is(sbb-autocomplete-grid, sbb-form-field)[negative]"), this.toggleAttribute("data-negative", this.negative);
|
|
16
|
+
}
|
|
17
|
+
}, t = e, (() => {
|
|
18
|
+
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
|
|
19
|
+
i(null, r = { value: t }, s, { kind: "class", name: t.name, metadata: a }, null, l), t = r.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), m(t, l);
|
|
20
|
+
})(), t;
|
|
21
|
+
})();
|
|
22
|
+
export {
|
|
23
|
+
d as SbbAutocompleteGridOptgroupElement
|
|
24
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-optgroup.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-optgroup.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sEAAsE,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { SbbOptionBaseElement } from '@sbb-esta/lyne-elements/option.js';
|
|
2
|
+
import { CSSResultGroup, PropertyValues } from 'lit';
|
|
3
|
+
export declare const autocompleteGridOptionId: string;
|
|
4
|
+
/**
|
|
5
|
+
* It displays an option item which can be used in `sbb-autocomplete-grid`.
|
|
6
|
+
*
|
|
7
|
+
* @slot - Use the unnamed slot to add content to the option label.
|
|
8
|
+
* @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
|
|
9
|
+
* @cssprop [--sbb-option-icon-container-display=none] - Can be used to reserve space even
|
|
10
|
+
* when preserve-icon-space on autocomplete is not set or iconName is not set.
|
|
11
|
+
* @overrideType value - T = string
|
|
12
|
+
*/
|
|
13
|
+
export declare class SbbAutocompleteGridOptionElement<T = string> extends SbbOptionBaseElement<T> {
|
|
14
|
+
static readonly role = "gridcell";
|
|
15
|
+
static styles: CSSResultGroup;
|
|
16
|
+
protected optionId: string;
|
|
17
|
+
constructor();
|
|
18
|
+
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
19
|
+
protected setAttributeFromParent(): void;
|
|
20
|
+
protected selectByClick(event: MouseEvent): void;
|
|
21
|
+
}
|
|
22
|
+
declare global {
|
|
23
|
+
interface HTMLElementTagNameMap {
|
|
24
|
+
'sbb-autocomplete-grid-option': SbbAutocompleteGridOptionElement;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=autocomplete-grid-option.component.d.ts.map
|
package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1D,eAAO,MAAM,wBAAwB,EAAE,MAAuC,CAAC;AAE/E;;;;;;;;GAQG;AACH,qBAEM,gCAAgC,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAChF,gBAAgC,IAAI,cAAc;IAClD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,SAAS,CAAC,QAAQ,SAA4B;;cAkB3B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW5E,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAexC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;CAQjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { __esDecorate as l, __runInitializers as r } from "tslib";
|
|
2
|
+
import { SbbAncestorWatcherController as n } from "@sbb-esta/lyne-elements/core/controllers.js";
|
|
3
|
+
import { boxSizingStyles as d } from "@sbb-esta/lyne-elements/core/styles.js";
|
|
4
|
+
import { SbbOptionBaseElement as c } from "@sbb-esta/lyne-elements/option.js";
|
|
5
|
+
import { customElement as p } from "lit/decorators.js";
|
|
6
|
+
import { css as u } from "lit";
|
|
7
|
+
const h = u`:host{--sbb-option-color: var(--sbb-color-3);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}.sbb-option{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;min-height:var(--sbb-option-min-height);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`, m = "sbb-autocomplete-grid-option";
|
|
8
|
+
let w = (() => {
|
|
9
|
+
var o;
|
|
10
|
+
let b = [p("sbb-autocomplete-grid-option")], e, s = [], i, a = c;
|
|
11
|
+
return o = class extends a {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(), this.optionId = m, this.addController(new n(this, () => this.closest("sbb-autocomplete-grid-optgroup"), {
|
|
14
|
+
disabled: (t) => {
|
|
15
|
+
this.disabledFromGroup = t.disabled, this.closest?.("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup);
|
|
16
|
+
},
|
|
17
|
+
label: (t) => this.groupLabel = t.label
|
|
18
|
+
}));
|
|
19
|
+
}
|
|
20
|
+
willUpdate(t) {
|
|
21
|
+
super.willUpdate(t), t.has("disabled") && (this.closest?.("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
|
|
22
|
+
}
|
|
23
|
+
setAttributeFromParent() {
|
|
24
|
+
const t = this.closest("sbb-autocomplete-grid-optgroup");
|
|
25
|
+
t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.closest("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.negative = !!this.closest(":is(sbb-autocomplete-grid[negative],sbb-form-field[negative])"), this.toggleAttribute("data-negative", this.negative);
|
|
26
|
+
}
|
|
27
|
+
selectByClick(t) {
|
|
28
|
+
if (this.disabled || this.disabledFromGroup) {
|
|
29
|
+
t.stopPropagation();
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
this.selectViaUserInteraction(!0);
|
|
33
|
+
}
|
|
34
|
+
}, i = o, (() => {
|
|
35
|
+
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
|
|
36
|
+
l(null, e = { value: i }, b, { kind: "class", name: i.name, metadata: t }, null, s), i = e.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
37
|
+
})(), o.role = "gridcell", o.styles = [d, h], r(i, s), i;
|
|
38
|
+
})();
|
|
39
|
+
export {
|
|
40
|
+
w as SbbAutocompleteGridOptionElement,
|
|
41
|
+
m as autocompleteGridOptionId
|
|
42
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-option.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-option.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kEAAkE,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
|
|
2
|
+
declare const SbbAutocompleteGridRowElement_base: import('@sbb-esta/lyne-elements/core/mixins.js').AbstractConstructor<import('@sbb-esta/lyne-elements/core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('@sbb-esta/lyne-elements/core/mixins.js').SbbElementInternalsConstructor;
|
|
3
|
+
/**
|
|
4
|
+
* The component is used as a wrapper for options and action buttons.
|
|
5
|
+
*
|
|
6
|
+
* @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-cell` with one or more `sbb-autocomplete-grid-button`.
|
|
7
|
+
*/
|
|
8
|
+
export declare class SbbAutocompleteGridRowElement extends SbbAutocompleteGridRowElement_base {
|
|
9
|
+
static readonly role = "row";
|
|
10
|
+
static styles: CSSResultGroup;
|
|
11
|
+
connectedCallback(): void;
|
|
12
|
+
protected render(): TemplateResult;
|
|
13
|
+
}
|
|
14
|
+
declare global {
|
|
15
|
+
interface HTMLElementTagNameMap {
|
|
16
|
+
'sbb-autocomplete-grid-row': SbbAutocompleteGridRowElement;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
export {};
|
|
20
|
+
//# sourceMappingURL=autocomplete-grid-row.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-row.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAOjF;;;;GAIG;AACH,qBAEM,6BAA8B,SAAQ,kCAAoC;IAC9E,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzD,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { __esDecorate as s, __runInitializers as c } from "tslib";
|
|
2
|
+
import { SbbElementInternalsMixin as i } from "@sbb-esta/lyne-elements/core/mixins.js";
|
|
3
|
+
import { boxSizingStyles as d } from "@sbb-esta/lyne-elements/core/styles.js";
|
|
4
|
+
import { css as n, LitElement as u, html as m } from "lit";
|
|
5
|
+
import { customElement as g } from "lit/decorators.js";
|
|
6
|
+
const p = n`:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-3);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-border-color: light-dark( var(--sbb-color-graphite), var(--sbb-color-smoke) );--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-pointer);display:block}:host([data-negative]){--sbb-autocomplete-grid-row-color: var(--sbb-color-3-negative);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3-negative);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-border-color-5);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not([data-disabled])){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host([data-disabled]){--sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host([data-disabled]){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x));overflow-x:hidden}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host([data-disabled]) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host([data-disabled]) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media(forced-colors:active){:host([data-disabled]) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
|
|
7
|
+
let v = 0, y = (() => {
|
|
8
|
+
var o;
|
|
9
|
+
let l = [g("sbb-autocomplete-grid-row")], t, a = [], r, b = i(u);
|
|
10
|
+
return o = class extends b {
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-row-${++v}`;
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
return m`
|
|
16
|
+
<span class="sbb-autocomplete-grid-row">
|
|
17
|
+
<slot></slot>
|
|
18
|
+
</span>
|
|
19
|
+
`;
|
|
20
|
+
}
|
|
21
|
+
}, r = o, (() => {
|
|
22
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
|
|
23
|
+
s(null, t = { value: r }, l, { kind: "class", name: r.name, metadata: e }, null, a), r = t.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
24
|
+
})(), o.role = "row", o.styles = [d, p], c(r, a), r;
|
|
25
|
+
})();
|
|
26
|
+
export {
|
|
27
|
+
y as SbbAutocompleteGridRowElement
|
|
28
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid-row.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-row.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4DAA4D,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/autocomplete-grid/autocomplete-grid.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oDAAoD,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @entrypoint
|
|
3
|
+
*/
|
|
4
|
+
export * from './autocomplete-grid/autocomplete-grid.ts';
|
|
5
|
+
export * from './autocomplete-grid/autocomplete-grid-button.ts';
|
|
6
|
+
export * from './autocomplete-grid/autocomplete-grid-cell.ts';
|
|
7
|
+
export * from './autocomplete-grid/autocomplete-grid-optgroup.ts';
|
|
8
|
+
export * from './autocomplete-grid/autocomplete-grid-option.ts';
|
|
9
|
+
export * from './autocomplete-grid/autocomplete-grid-row.ts';
|
|
10
|
+
//# sourceMappingURL=autocomplete-grid.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/autocomplete-grid.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0CAA0C,CAAC;AACzD,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mDAAmD,CAAC;AAClE,cAAc,iDAAiD,CAAC;AAChE,cAAc,8CAA8C,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SbbAutocompleteGridElement as t } from "./autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js";
|
|
2
|
+
import { SbbAutocompleteGridButtonElement as m } from "./autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js";
|
|
3
|
+
import { SbbAutocompleteGridCellElement as l } from "./autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js";
|
|
4
|
+
import { SbbAutocompleteGridOptgroupElement as i } from "./autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js";
|
|
5
|
+
import { SbbAutocompleteGridOptionElement as u, autocompleteGridOptionId as d } from "./autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js";
|
|
6
|
+
import { SbbAutocompleteGridRowElement as G } from "./autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js";
|
|
7
|
+
export {
|
|
8
|
+
m as SbbAutocompleteGridButtonElement,
|
|
9
|
+
l as SbbAutocompleteGridCellElement,
|
|
10
|
+
t as SbbAutocompleteGridElement,
|
|
11
|
+
i as SbbAutocompleteGridOptgroupElement,
|
|
12
|
+
u as SbbAutocompleteGridOptionElement,
|
|
13
|
+
G as SbbAutocompleteGridRowElement,
|
|
14
|
+
d as autocompleteGridOptionId
|
|
15
|
+
};
|
package/core/datetime.d.ts
CHANGED