@sbb-esta/lyne-elements-experimental 4.0.0-next.1 → 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 +4 -4
- 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 +7 -7
- 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/timetable-duration.component.js +3 -3
- 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 +7 -7
- 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/journey-summary.component.js +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/pearl-chain-time.component.js +12 -12
- 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/timetable-duration.component.js +5 -5
- package/timetable-duration.d.ts +1 -1
- package/timetable-row/timetable-row.component.d.ts +1 -1
- package/timetable-row/timetable-row.component.js +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