@italia/globals 0.1.0-alpha.1 → 1.0.0-alpha.4
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/custom-elements.json +1655 -168
- package/dist/src/base-component/base-component.d.ts +28 -13
- package/dist/src/base-component/base-component.d.ts.map +1 -1
- package/dist/src/base-component/base-component.js +27 -17
- package/dist/src/base-component/base-component.js.map +1 -1
- package/dist/src/controllers/aria-keyboard-accordion-controller.d.ts +15 -0
- package/dist/src/controllers/aria-keyboard-accordion-controller.d.ts.map +1 -0
- package/dist/src/controllers/aria-keyboard-accordion-controller.js +52 -0
- package/dist/src/controllers/aria-keyboard-accordion-controller.js.map +1 -0
- package/dist/src/controllers/aria-keyboard-list-controller.d.ts +18 -0
- package/dist/src/controllers/aria-keyboard-list-controller.d.ts.map +1 -0
- package/dist/src/controllers/aria-keyboard-list-controller.js +58 -0
- package/dist/src/controllers/aria-keyboard-list-controller.js.map +1 -0
- package/dist/src/controllers/collapse-controller.d.ts +12 -0
- package/dist/src/controllers/collapse-controller.d.ts.map +1 -0
- package/dist/src/controllers/collapse-controller.js +95 -0
- package/dist/src/controllers/collapse-controller.js.map +1 -0
- package/dist/src/controllers/roving-tabindex-controller.d.ts +85 -0
- package/dist/src/controllers/roving-tabindex-controller.d.ts.map +1 -0
- package/dist/src/controllers/roving-tabindex-controller.js +200 -0
- package/dist/src/controllers/roving-tabindex-controller.js.map +1 -0
- package/dist/src/form/form-control.d.ts +61 -0
- package/dist/src/form/form-control.d.ts.map +1 -0
- package/dist/src/form/form-control.js +259 -0
- package/dist/src/form/form-control.js.map +1 -0
- package/dist/src/form/form-controller.d.ts +68 -0
- package/dist/src/form/form-controller.d.ts.map +1 -0
- package/dist/src/form/form-controller.js +398 -0
- package/dist/src/form/form-controller.js.map +1 -0
- package/dist/src/form/locales/it.d.ts +4 -0
- package/dist/src/form/locales/it.d.ts.map +1 -0
- package/dist/src/form/locales/it.js +12 -0
- package/dist/src/form/locales/it.js.map +1 -0
- package/dist/src/index.d.ts +20 -4
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +18 -4
- package/dist/src/index.js.map +1 -1
- package/dist/src/mixins/validity.d.ts +19 -19
- package/dist/src/mixins/validity.d.ts.map +1 -1
- package/dist/src/mixins/validity.js +6 -68
- package/dist/src/mixins/validity.js.map +1 -1
- package/dist/src/stories/formControlReusableStories.d.ts +19 -0
- package/dist/src/stories/formControlReusableStories.d.ts.map +1 -0
- package/dist/src/stories/formControlReusableStories.js +64 -0
- package/dist/src/stories/formControlReusableStories.js.map +1 -0
- package/dist/src/stories/reusableUsageGuidelinesStories.d.ts +13 -0
- package/dist/src/stories/reusableUsageGuidelinesStories.d.ts.map +1 -0
- package/dist/src/stories/reusableUsageGuidelinesStories.js +39 -0
- package/dist/src/stories/reusableUsageGuidelinesStories.js.map +1 -0
- package/dist/src/window-manager.d.ts +20 -0
- package/dist/src/window-manager.d.ts.map +1 -0
- package/dist/src/window-manager.js +47 -0
- package/dist/src/window-manager.js.map +1 -0
- package/package.json +10 -8
- package/dist/src/mixins/form.d.ts +0 -363
- package/dist/src/mixins/form.d.ts.map +0 -1
- package/dist/src/mixins/form.js +0 -36
- package/dist/src/mixins/form.js.map +0 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
1
2
|
import { LitElement } from 'lit';
|
|
2
3
|
import { Constructor } from '../index.js';
|
|
3
4
|
import { Logger } from '../utils/logger.js';
|
|
4
5
|
export interface BaseComponentInterface {
|
|
5
6
|
addFocus(element: HTMLElement): void;
|
|
6
|
-
composeClass
|
|
7
|
+
composeClass: typeof clsx;
|
|
7
8
|
}
|
|
8
9
|
export type BaseComponentType = typeof LitElement & Constructor<BaseComponentInterface>;
|
|
9
10
|
/**
|
|
@@ -12,20 +13,20 @@ export type BaseComponentType = typeof LitElement & Constructor<BaseComponentInt
|
|
|
12
13
|
*/
|
|
13
14
|
export declare class BaseComponent extends LitElement {
|
|
14
15
|
protected logger: Logger;
|
|
15
|
-
protected
|
|
16
|
+
protected composeClass: typeof clsx;
|
|
16
17
|
protected _id?: string;
|
|
17
18
|
constructor();
|
|
19
|
+
protected get _ariaAttributes(): Record<string, string>;
|
|
18
20
|
generateId(prefix: string): string;
|
|
19
21
|
addFocus(element: HTMLElement): void;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
protected getActiveElement<T extends HTMLElement>(): T | null;
|
|
23
|
+
get focusElement(): HTMLElement | null;
|
|
24
|
+
protected get prefersReducedMotion(): boolean;
|
|
22
25
|
connectedCallback(): void;
|
|
23
26
|
}
|
|
24
27
|
export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
25
28
|
localize: import("@italia/i18n").LocalizeController;
|
|
26
|
-
|
|
27
|
-
lang: string;
|
|
28
|
-
readonly $localize: import("@italia/i18n").LocalizeController<import("@italia/i18n").DefaultTranslation>;
|
|
29
|
+
get $localize(): import("@italia/i18n").LocalizeController<import("@italia/i18n").DefaultTranslation>;
|
|
29
30
|
$t(t: string): string;
|
|
30
31
|
$d(d: Date | string, p: Intl.DateTimeFormatOptions): string;
|
|
31
32
|
$n(d: number, p: Intl.NumberFormatOptions): string;
|
|
@@ -36,10 +37,13 @@ export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
|
36
37
|
accessKey: string;
|
|
37
38
|
readonly accessKeyLabel: string;
|
|
38
39
|
autocapitalize: string;
|
|
40
|
+
autocorrect: boolean;
|
|
41
|
+
dir: string;
|
|
39
42
|
draggable: boolean;
|
|
40
43
|
hidden: boolean;
|
|
41
44
|
inert: boolean;
|
|
42
45
|
innerText: string;
|
|
46
|
+
lang: string;
|
|
43
47
|
readonly offsetHeight: number;
|
|
44
48
|
readonly offsetLeft: number;
|
|
45
49
|
readonly offsetParent: Element | null;
|
|
@@ -141,6 +145,8 @@ export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
|
141
145
|
setPointerCapture(pointerId: number): void;
|
|
142
146
|
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
|
|
143
147
|
webkitMatchesSelector(selectors: string): boolean;
|
|
148
|
+
get textContent(): string;
|
|
149
|
+
set textContent(value: string | null): any;
|
|
144
150
|
readonly baseURI: string;
|
|
145
151
|
readonly childNodes: NodeListOf<ChildNode>;
|
|
146
152
|
readonly firstChild: ChildNode | null;
|
|
@@ -153,7 +159,6 @@ export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
|
153
159
|
readonly parentElement: HTMLElement | null;
|
|
154
160
|
readonly parentNode: ParentNode | null;
|
|
155
161
|
readonly previousSibling: ChildNode | null;
|
|
156
|
-
textContent: string | null;
|
|
157
162
|
appendChild<T_1 extends Node>(node: T_1): T_1;
|
|
158
163
|
cloneNode(subtree?: boolean): Node;
|
|
159
164
|
compareDocumentPosition(other: Node): number;
|
|
@@ -188,6 +193,7 @@ export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
|
188
193
|
readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
|
|
189
194
|
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
|
|
190
195
|
dispatchEvent(event: Event): boolean;
|
|
196
|
+
ariaActiveDescendantElement: Element | null;
|
|
191
197
|
ariaAtomic: string | null;
|
|
192
198
|
ariaAutoComplete: string | null;
|
|
193
199
|
ariaBrailleLabel: string | null;
|
|
@@ -198,21 +204,28 @@ export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
|
198
204
|
ariaColIndex: string | null;
|
|
199
205
|
ariaColIndexText: string | null;
|
|
200
206
|
ariaColSpan: string | null;
|
|
207
|
+
ariaControlsElements: ReadonlyArray<Element> | null;
|
|
201
208
|
ariaCurrent: string | null;
|
|
209
|
+
ariaDescribedByElements: ReadonlyArray<Element> | null;
|
|
202
210
|
ariaDescription: string | null;
|
|
211
|
+
ariaDetailsElements: ReadonlyArray<Element> | null;
|
|
203
212
|
ariaDisabled: string | null;
|
|
213
|
+
ariaErrorMessageElements: ReadonlyArray<Element> | null;
|
|
204
214
|
ariaExpanded: string | null;
|
|
215
|
+
ariaFlowToElements: ReadonlyArray<Element> | null;
|
|
205
216
|
ariaHasPopup: string | null;
|
|
206
217
|
ariaHidden: string | null;
|
|
207
218
|
ariaInvalid: string | null;
|
|
208
219
|
ariaKeyShortcuts: string | null;
|
|
209
220
|
ariaLabel: string | null;
|
|
221
|
+
ariaLabelledByElements: ReadonlyArray<Element> | null;
|
|
210
222
|
ariaLevel: string | null;
|
|
211
223
|
ariaLive: string | null;
|
|
212
224
|
ariaModal: string | null;
|
|
213
225
|
ariaMultiLine: string | null;
|
|
214
226
|
ariaMultiSelectable: string | null;
|
|
215
227
|
ariaOrientation: string | null;
|
|
228
|
+
ariaOwnsElements: ReadonlyArray<Element> | null;
|
|
216
229
|
ariaPlaceholder: string | null;
|
|
217
230
|
ariaPosInSet: string | null;
|
|
218
231
|
ariaPressed: string | null;
|
|
@@ -270,18 +283,19 @@ export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
|
270
283
|
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
271
284
|
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
272
285
|
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
273
|
-
onauxclick: ((this: GlobalEventHandlers, ev:
|
|
286
|
+
onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
274
287
|
onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
|
|
275
|
-
|
|
288
|
+
onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
289
|
+
onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
|
|
276
290
|
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
277
291
|
oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
278
292
|
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
279
293
|
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
280
294
|
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
281
|
-
onclick: ((this: GlobalEventHandlers, ev:
|
|
295
|
+
onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
282
296
|
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
283
297
|
oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
284
|
-
oncontextmenu: ((this: GlobalEventHandlers, ev:
|
|
298
|
+
oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
285
299
|
oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
286
300
|
oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
287
301
|
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
@@ -329,6 +343,7 @@ export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
|
329
343
|
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
330
344
|
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
331
345
|
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
346
|
+
onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
332
347
|
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
333
348
|
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
|
|
334
349
|
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
@@ -347,7 +362,7 @@ export declare const BaseLocalizedComponent: (new (...args: any[]) => {
|
|
|
347
362
|
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
|
348
363
|
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
349
364
|
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
350
|
-
ontoggle: ((this: GlobalEventHandlers, ev:
|
|
365
|
+
ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
|
|
351
366
|
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
352
367
|
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
353
368
|
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-component.d.ts","sourceRoot":"","sources":["../../../src/base-component/base-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAI5C,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,YAAY,
|
|
1
|
+
{"version":3,"file":"base-component.d.ts","sourceRoot":"","sources":["../../../src/base-component/base-component.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAI5C,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,YAAY,EAAE,OAAO,IAAI,CAAC;CAC3B;AAED,MAAM,MAAM,iBAAiB,GAAG,OAAO,UAAU,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;AAExF;;;GAGG;AAEH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,YAAY,cAAQ;IAE9B,SAAS,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;;IAOvB,SAAS,KAAK,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUtD;IAGD,UAAU,CAAC,MAAM,EAAE,MAAM;IAKzB,QAAQ,CAAC,OAAO,EAAE,WAAW;IAK7B,SAAS,CAAC,gBAAgB,CAAC,CAAC,SAAS,WAAW,KAAK,CAAC,GAAG,IAAI;IAQ7D,IAAI,YAAY,IAAI,WAAW,GAAG,IAAI,CAErC;IAGD,SAAS,KAAK,oBAAoB,IAAI,OAAO,CAE5C;IAED,iBAAiB;CAOlB;AAED,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBACi6E,CAAC;4IAAqK,CAAC;wFAAwI,CAAC;+IAA+L,CAAC;2FAAwI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAA8nC,CAAC;;;;;;;;;;;;;;;;;;;;;;;mBAA0jE,CAAC;;;;;;;;;;;;;6BAA4xB,CAAC;8BAAuE,CAAC;kBAA4D,CAAC;;oBAA8F,CAAC;;sBAAkG,CAAC;oBAAkE,CAAC;;;;;;;;gDAAme,CAAC;;;;;;;;;;;;;;;;;qBAA4vB,CAAC;;;uBAAkJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAAiiH,CAAC;yBAA8E,CAAC;UAAoD,GAAG;WAAgD,GAAG;;gBAA6E,GAAG;;;;;;;WAA4V,GAAG;YAAiD,GAAG;;;;;;;;;;;oBAAupC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAiiO,CAAC;cAA6F,CAAC;eAA8F,CAAC;gBAA+F,CAAC;;;;;;;;;;;;;;SAAulC,CAAC;;;iBAA+E,CAAC;yBAD/gtB,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
1
2
|
import { LitElement } from 'lit';
|
|
2
3
|
import { LocalizeMixin } from '@italia/i18n';
|
|
3
4
|
import { Logger } from '../utils/logger.js';
|
|
@@ -8,9 +9,21 @@ import { Logger } from '../utils/logger.js';
|
|
|
8
9
|
export class BaseComponent extends LitElement {
|
|
9
10
|
constructor() {
|
|
10
11
|
super();
|
|
11
|
-
this.
|
|
12
|
+
this.composeClass = clsx;
|
|
12
13
|
this.logger = new Logger(this.tagName.toLowerCase());
|
|
13
14
|
}
|
|
15
|
+
get _ariaAttributes() {
|
|
16
|
+
const attributes = {};
|
|
17
|
+
for (const attr of this.getAttributeNames()) {
|
|
18
|
+
if (attr === 'it-role') {
|
|
19
|
+
attributes.role = this.getAttribute(attr);
|
|
20
|
+
}
|
|
21
|
+
else if (attr.startsWith('it-aria-')) {
|
|
22
|
+
attributes[attr.replace(/^it-/, '')] = this.getAttribute(attr);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return attributes;
|
|
26
|
+
}
|
|
14
27
|
// eslint-disable-next-line class-methods-use-this
|
|
15
28
|
generateId(prefix) {
|
|
16
29
|
return `${prefix}-${Math.random().toString(36).slice(2)}`;
|
|
@@ -20,25 +33,22 @@ export class BaseComponent extends LitElement {
|
|
|
20
33
|
// new TrackFocus(element); // per il momento è stato disattivato perchè ci sono le pseudo classi ::focus-visible per fare quello che fa TrackFocus. Si possono aggiungere regole css in bsi-italia 3 dato che stiamo facendo una breaking release di bsi.
|
|
21
34
|
}
|
|
22
35
|
// eslint-disable-next-line class-methods-use-this
|
|
23
|
-
|
|
24
|
-
let
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
.forEach((newClass) => {
|
|
28
|
-
composedClass += ` ${newClass}`;
|
|
29
|
-
});
|
|
30
|
-
return composedClass.trim();
|
|
31
|
-
}
|
|
32
|
-
getAriaAttributes() {
|
|
33
|
-
for (const attr of this.getAttributeNames()) {
|
|
34
|
-
if (attr.startsWith('aria-')) {
|
|
35
|
-
this._ariaAttributes[attr] = this.getAttribute(attr);
|
|
36
|
-
}
|
|
36
|
+
getActiveElement() {
|
|
37
|
+
let active = document.activeElement;
|
|
38
|
+
while (active && active.shadowRoot && active.shadowRoot.activeElement) {
|
|
39
|
+
active = active.shadowRoot.activeElement;
|
|
37
40
|
}
|
|
41
|
+
return active;
|
|
42
|
+
}
|
|
43
|
+
get focusElement() {
|
|
44
|
+
return this;
|
|
45
|
+
}
|
|
46
|
+
// eslint-disable-next-line class-methods-use-this
|
|
47
|
+
get prefersReducedMotion() {
|
|
48
|
+
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
38
49
|
}
|
|
39
50
|
connectedCallback() {
|
|
40
|
-
super.connectedCallback
|
|
41
|
-
this.getAriaAttributes();
|
|
51
|
+
super.connectedCallback();
|
|
42
52
|
// generate internal _id
|
|
43
53
|
const prefix = this.id?.length > 0 ? this.id : this.tagName.toLowerCase();
|
|
44
54
|
this._id = this.generateId(prefix);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-component.js","sourceRoot":"","sources":["../../../src/base-component/base-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAW5C;;;GAGG;AAEH,MAAM,OAAO,aAAc,SAAQ,UAAU;IAO3C;QACE,KAAK,EAAE,CAAC;QALA,
|
|
1
|
+
{"version":3,"file":"base-component.js","sourceRoot":"","sources":["../../../src/base-component/base-component.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAW5C;;;GAGG;AAEH,MAAM,OAAO,aAAc,SAAQ,UAAU;IAO3C;QACE,KAAK,EAAE,CAAC;QALA,iBAAY,GAAG,IAAI,CAAC;QAM5B,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,IAAc,eAAe;QAC3B,MAAM,UAAU,GAA2B,EAAE,CAAC;QAC9C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;YAC5C,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAE,CAAC;YAC7C,CAAC;iBAAM,IAAI,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;gBACvC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAE,CAAC;YAClE,CAAC;QACH,CAAC;QACD,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,kDAAkD;IAClD,UAAU,CAAC,MAAc;QACvB,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,CAAC;IAED,qFAAqF;IACrF,QAAQ,CAAC,OAAoB;QAC3B,0PAA0P;IAC5P,CAAC;IAED,kDAAkD;IACxC,gBAAgB;QACxB,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;QACpC,OAAO,MAAM,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;YACtE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC;QAC3C,CAAC;QACD,OAAO,MAAkB,CAAC;IAC5B,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,kDAAkD;IAClD,IAAc,oBAAoB;QAChC,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;IACvE,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,wBAAwB;QACxB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC1E,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { LitElement } from 'lit';\nimport { LocalizeMixin } from '@italia/i18n';\nimport { Constructor } from '../index.js';\nimport { Logger } from '../utils/logger.js';\n\n// import TrackFocus from '../utils/track-focus.js';\n\nexport interface BaseComponentInterface {\n addFocus(element: HTMLElement): void;\n composeClass: typeof clsx;\n}\n\nexport type BaseComponentType = typeof LitElement & Constructor<BaseComponentInterface>;\n\n/**\n * Factory function per creare una base class estendibile\n * con stili personalizzati.\n */\n\nexport class BaseComponent extends LitElement {\n protected logger: Logger;\n\n protected composeClass = clsx;\n\n protected _id?: string; // id interno del componente, da usare sui veri elementi HTML\n\n constructor() {\n super();\n this.logger = new Logger(this.tagName.toLowerCase());\n }\n\n protected get _ariaAttributes(): Record<string, string> {\n const attributes: Record<string, string> = {};\n for (const attr of this.getAttributeNames()) {\n if (attr === 'it-role') {\n attributes.role = this.getAttribute(attr)!;\n } else if (attr.startsWith('it-aria-')) {\n attributes[attr.replace(/^it-/, '')] = this.getAttribute(attr)!;\n }\n }\n return attributes;\n }\n\n // eslint-disable-next-line class-methods-use-this\n generateId(prefix: string) {\n return `${prefix}-${Math.random().toString(36).slice(2)}`;\n }\n\n // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n addFocus(element: HTMLElement) {\n // new TrackFocus(element); // per il momento è stato disattivato perchè ci sono le pseudo classi ::focus-visible per fare quello che fa TrackFocus. Si possono aggiungere regole css in bsi-italia 3 dato che stiamo facendo una breaking release di bsi.\n }\n\n // eslint-disable-next-line class-methods-use-this\n protected getActiveElement<T extends HTMLElement>(): T | null {\n let active = document.activeElement;\n while (active && active.shadowRoot && active.shadowRoot.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active as T | null;\n }\n\n get focusElement(): HTMLElement | null {\n return this;\n }\n\n // eslint-disable-next-line class-methods-use-this\n protected get prefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // generate internal _id\n const prefix = this.id?.length > 0 ? this.id : this.tagName.toLowerCase();\n this._id = this.generateId(prefix);\n }\n}\n\nexport const BaseLocalizedComponent = LocalizeMixin(BaseComponent);\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
export interface AriaKeyboardAccordionConfig {
|
|
3
|
+
getItems: () => HTMLElement[];
|
|
4
|
+
setActive: (idx: number) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare class AriaKeyboardAccordionController implements ReactiveController {
|
|
7
|
+
private host;
|
|
8
|
+
private config;
|
|
9
|
+
constructor(host: ReactiveControllerHost);
|
|
10
|
+
setConfig(config: AriaKeyboardAccordionConfig): void;
|
|
11
|
+
hostDisconnected(): void;
|
|
12
|
+
private getActiveElement;
|
|
13
|
+
handleKeyDown(event: KeyboardEvent): void;
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=aria-keyboard-accordion-controller.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria-keyboard-accordion-controller.d.ts","sourceRoot":"","sources":["../../../src/controllers/aria-keyboard-accordion-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEjE,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;IAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,qBAAa,+BAAgC,YAAW,kBAAkB;IACxE,OAAO,CAAC,IAAI,CAAyB;IAErC,OAAO,CAAC,MAAM,CAA+B;gBAEjC,IAAI,EAAE,sBAAsB;IAKxC,SAAS,CAAC,MAAM,EAAE,2BAA2B;IAI7C,gBAAgB;IAKhB,OAAO,CAAC,gBAAgB;IAQxB,aAAa,CAAC,KAAK,EAAE,aAAa;CA2BnC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
export class AriaKeyboardAccordionController {
|
|
2
|
+
constructor(host) {
|
|
3
|
+
this.host = host;
|
|
4
|
+
this.host.addController(this);
|
|
5
|
+
}
|
|
6
|
+
setConfig(config) {
|
|
7
|
+
this.config = config;
|
|
8
|
+
}
|
|
9
|
+
hostDisconnected() {
|
|
10
|
+
this.host.removeController(this);
|
|
11
|
+
}
|
|
12
|
+
// eslint-disable-next-line class-methods-use-this
|
|
13
|
+
getActiveElement() {
|
|
14
|
+
let active = document.activeElement;
|
|
15
|
+
while (active && active.shadowRoot && active.shadowRoot.activeElement) {
|
|
16
|
+
active = active.shadowRoot.activeElement;
|
|
17
|
+
}
|
|
18
|
+
return active;
|
|
19
|
+
}
|
|
20
|
+
handleKeyDown(event) {
|
|
21
|
+
if (!this.config)
|
|
22
|
+
return;
|
|
23
|
+
const items = this.config.getItems();
|
|
24
|
+
const activeElement = this.getActiveElement();
|
|
25
|
+
const currentIndex = items.indexOf(activeElement);
|
|
26
|
+
switch (event.key) {
|
|
27
|
+
case 'ArrowDown':
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
if (items.length)
|
|
30
|
+
this.config.setActive(currentIndex < 0 ? 0 : (currentIndex + 1) % items.length);
|
|
31
|
+
break;
|
|
32
|
+
case 'ArrowUp':
|
|
33
|
+
event.preventDefault();
|
|
34
|
+
if (items.length)
|
|
35
|
+
this.config.setActive(currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length);
|
|
36
|
+
break;
|
|
37
|
+
case 'Home':
|
|
38
|
+
event.preventDefault();
|
|
39
|
+
if (items.length)
|
|
40
|
+
this.config.setActive(0);
|
|
41
|
+
break;
|
|
42
|
+
case 'End':
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
if (items.length)
|
|
45
|
+
this.config.setActive(items.length - 1);
|
|
46
|
+
break;
|
|
47
|
+
default:
|
|
48
|
+
break;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=aria-keyboard-accordion-controller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria-keyboard-accordion-controller.js","sourceRoot":"","sources":["../../../src/controllers/aria-keyboard-accordion-controller.ts"],"names":[],"mappings":"AAOA,MAAM,OAAO,+BAA+B;IAK1C,YAAY,IAA4B;QACtC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,kDAAkD;IAC1C,gBAAgB;QACtB,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;QACpC,OAAO,MAAM,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;YACtE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC;QAC3C,CAAC;QACD,OAAO,MAA4B,CAAC;IACtC,CAAC;IAED,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;QACrC,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC9C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,aAAkC,CAAC,CAAC;QACvE,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,MAAM;oBAAE,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;gBAClG,MAAM;YACR,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,MAAM;oBACd,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;gBAChH,MAAM;YACR,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,MAAM;oBAAE,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBAC3C,MAAM;YACR,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,MAAM;oBAAE,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC1D,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC;CACF","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport interface AriaKeyboardAccordionConfig {\n getItems: () => HTMLElement[];\n setActive: (idx: number) => void;\n}\n\nexport class AriaKeyboardAccordionController implements ReactiveController {\n private host: ReactiveControllerHost;\n\n private config!: AriaKeyboardAccordionConfig;\n\n constructor(host: ReactiveControllerHost) {\n this.host = host;\n this.host.addController(this);\n }\n\n setConfig(config: AriaKeyboardAccordionConfig) {\n this.config = config;\n }\n\n hostDisconnected() {\n this.host.removeController(this);\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getActiveElement(): HTMLElement | null {\n let active = document.activeElement;\n while (active && active.shadowRoot && active.shadowRoot.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active as HTMLElement | null;\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (!this.config) return;\n const items = this.config.getItems();\n const activeElement = this.getActiveElement();\n const currentIndex = items.indexOf(activeElement as HTMLButtonElement);\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (items.length) this.config.setActive(currentIndex < 0 ? 0 : (currentIndex + 1) % items.length);\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (items.length)\n this.config.setActive(currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length);\n break;\n case 'Home':\n event.preventDefault();\n if (items.length) this.config.setActive(0);\n break;\n case 'End':\n event.preventDefault();\n if (items.length) this.config.setActive(items.length - 1);\n break;\n default:\n break;\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
export type AriaKeyboardConfig = {
|
|
3
|
+
getItems: () => HTMLElement[];
|
|
4
|
+
setActive: (idx: number) => void;
|
|
5
|
+
closeMenu: () => void;
|
|
6
|
+
trigger?: HTMLElement | null;
|
|
7
|
+
};
|
|
8
|
+
declare class AriaKeyboardListController implements ReactiveController {
|
|
9
|
+
private host;
|
|
10
|
+
private config;
|
|
11
|
+
constructor(host: ReactiveControllerHost);
|
|
12
|
+
setConfig(config: AriaKeyboardConfig): void;
|
|
13
|
+
hostDisconnected(): void;
|
|
14
|
+
private getActiveElement;
|
|
15
|
+
handleKeyDown(event: KeyboardEvent): void;
|
|
16
|
+
}
|
|
17
|
+
export default AriaKeyboardListController;
|
|
18
|
+
//# sourceMappingURL=aria-keyboard-list-controller.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria-keyboard-list-controller.d.ts","sourceRoot":"","sources":["../../../src/controllers/aria-keyboard-list-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;IAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,cAAM,0BAA2B,YAAW,kBAAkB;IAC5D,OAAO,CAAC,IAAI,CAAyB;IAErC,OAAO,CAAC,MAAM,CAAsB;gBAExB,IAAI,EAAE,sBAAsB;IAKxC,SAAS,CAAC,MAAM,EAAE,kBAAkB;IAIpC,gBAAgB;IAKhB,OAAO,CAAC,gBAAgB;IAQxB,aAAa,CAAC,KAAK,EAAE,aAAa;CAiCnC;AAED,eAAe,0BAA0B,CAAC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
class AriaKeyboardListController {
|
|
2
|
+
constructor(host) {
|
|
3
|
+
this.host = host;
|
|
4
|
+
this.host.addController(this);
|
|
5
|
+
}
|
|
6
|
+
setConfig(config) {
|
|
7
|
+
this.config = config;
|
|
8
|
+
}
|
|
9
|
+
hostDisconnected() {
|
|
10
|
+
this.host.removeController(this);
|
|
11
|
+
}
|
|
12
|
+
// eslint-disable-next-line class-methods-use-this
|
|
13
|
+
getActiveElement() {
|
|
14
|
+
let active = document.activeElement;
|
|
15
|
+
while (active && active.shadowRoot && active.shadowRoot.activeElement) {
|
|
16
|
+
active = active.shadowRoot.activeElement;
|
|
17
|
+
}
|
|
18
|
+
return active;
|
|
19
|
+
}
|
|
20
|
+
handleKeyDown(event) {
|
|
21
|
+
if (!this.config)
|
|
22
|
+
return;
|
|
23
|
+
const items = this.config.getItems();
|
|
24
|
+
const currentIndex = items.indexOf(this.getActiveElement());
|
|
25
|
+
switch (event.key) {
|
|
26
|
+
case 'ArrowDown':
|
|
27
|
+
// case 'ArrowRight':
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
if (items.length && currentIndex < items.length - 1)
|
|
30
|
+
this.config.setActive(currentIndex < 0 ? 0 : currentIndex + 1);
|
|
31
|
+
break;
|
|
32
|
+
case 'ArrowUp':
|
|
33
|
+
// case 'ArrowLeft':
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
if (items.length)
|
|
36
|
+
this.config.setActive(currentIndex < 0 ? items.length - 1 : currentIndex - 1);
|
|
37
|
+
break;
|
|
38
|
+
case 'Home':
|
|
39
|
+
event.preventDefault();
|
|
40
|
+
if (items.length)
|
|
41
|
+
this.config.setActive(0);
|
|
42
|
+
break;
|
|
43
|
+
case 'End':
|
|
44
|
+
event.preventDefault();
|
|
45
|
+
if (items.length)
|
|
46
|
+
this.config.setActive(items.length - 1);
|
|
47
|
+
break;
|
|
48
|
+
case 'Escape':
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
this.config.closeMenu();
|
|
51
|
+
break;
|
|
52
|
+
default:
|
|
53
|
+
break;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
export default AriaKeyboardListController;
|
|
58
|
+
//# sourceMappingURL=aria-keyboard-list-controller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria-keyboard-list-controller.js","sourceRoot":"","sources":["../../../src/controllers/aria-keyboard-list-controller.ts"],"names":[],"mappings":"AASA,MAAM,0BAA0B;IAK9B,YAAY,IAA4B;QACtC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,SAAS,CAAC,MAA0B;QAClC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,kDAAkD;IAC1C,gBAAgB;QACtB,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;QACpC,OAAO,MAAM,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;YACtE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC;QAC3C,CAAC;QACD,OAAO,MAA4B,CAAC;IACtC,CAAC;IAED,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;QAErC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAiB,CAAC,CAAC;QAC3E,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,qBAAqB;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,MAAM,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;oBACjD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;gBACjE,MAAM;YACR,KAAK,SAAS;gBACZ,oBAAoB;gBACpB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,MAAM;oBAAE,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;gBAChG,MAAM;YACR,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,MAAM;oBAAE,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBAC3C,MAAM;YACR,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,MAAM;oBAAE,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC1D,MAAM;YACR,KAAK,QAAQ;gBACX,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;gBACxB,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC;CACF;AAED,eAAe,0BAA0B,CAAC","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport type AriaKeyboardConfig = {\n getItems: () => HTMLElement[];\n setActive: (idx: number) => void;\n closeMenu: () => void;\n trigger?: HTMLElement | null;\n};\n\nclass AriaKeyboardListController implements ReactiveController {\n private host: ReactiveControllerHost;\n\n private config!: AriaKeyboardConfig;\n\n constructor(host: ReactiveControllerHost) {\n this.host = host;\n this.host.addController(this);\n }\n\n setConfig(config: AriaKeyboardConfig) {\n this.config = config;\n }\n\n hostDisconnected() {\n this.host.removeController(this);\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getActiveElement(): HTMLElement | null {\n let active = document.activeElement;\n while (active && active.shadowRoot && active.shadowRoot.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active as HTMLElement | null;\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (!this.config) return;\n const items = this.config.getItems();\n\n const currentIndex = items.indexOf(this.getActiveElement() as HTMLElement);\n switch (event.key) {\n case 'ArrowDown':\n // case 'ArrowRight':\n event.preventDefault();\n if (items.length && currentIndex < items.length - 1)\n this.config.setActive(currentIndex < 0 ? 0 : currentIndex + 1);\n break;\n case 'ArrowUp':\n // case 'ArrowLeft':\n event.preventDefault();\n if (items.length) this.config.setActive(currentIndex < 0 ? items.length - 1 : currentIndex - 1);\n break;\n case 'Home':\n event.preventDefault();\n if (items.length) this.config.setActive(0);\n break;\n case 'End':\n event.preventDefault();\n if (items.length) this.config.setActive(items.length - 1);\n break;\n case 'Escape':\n event.preventDefault();\n this.config.closeMenu();\n break;\n default:\n break;\n }\n }\n}\n\nexport default AriaKeyboardListController;\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
export declare class CollapseAnimationController implements ReactiveController {
|
|
3
|
+
private host;
|
|
4
|
+
private animating;
|
|
5
|
+
constructor(host: ReactiveControllerHost);
|
|
6
|
+
hostDisconnected(): void;
|
|
7
|
+
toggle(element: HTMLElement, triggerElement?: HTMLElement): void;
|
|
8
|
+
show(element: HTMLElement, triggerElement?: HTMLElement): void;
|
|
9
|
+
hide(element: HTMLElement, triggerElement?: HTMLElement): void;
|
|
10
|
+
isOpen(element: HTMLElement): boolean;
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=collapse-controller.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapse-controller.d.ts","sourceRoot":"","sources":["../../../src/controllers/collapse-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEjE,qBAAa,2BAA4B,YAAW,kBAAkB;IACpE,OAAO,CAAC,IAAI,CAAyB;IAErC,OAAO,CAAC,SAAS,CAAuB;gBAE5B,IAAI,EAAE,sBAAsB;IAQxC,gBAAgB;IAIhB,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI;IAYhE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI;IA2C9D,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI;IAiC9D,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;CAGtC"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
export class CollapseAnimationController {
|
|
2
|
+
constructor(host) {
|
|
3
|
+
this.host = host;
|
|
4
|
+
this.animating = new WeakSet();
|
|
5
|
+
this.host.addController(this);
|
|
6
|
+
}
|
|
7
|
+
// hostConnected() {}
|
|
8
|
+
hostDisconnected() {
|
|
9
|
+
this.host.removeController(this);
|
|
10
|
+
}
|
|
11
|
+
toggle(element, triggerElement) {
|
|
12
|
+
// if (this.animating.has(element)) return;
|
|
13
|
+
const isOpen = element.classList.contains('show');
|
|
14
|
+
if (isOpen) {
|
|
15
|
+
this.hide(element, triggerElement);
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
this.show(element, triggerElement);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
// eslint-disable-next-line class-methods-use-this
|
|
22
|
+
show(element, triggerElement) {
|
|
23
|
+
const target = element;
|
|
24
|
+
if (!target)
|
|
25
|
+
return;
|
|
26
|
+
if (triggerElement) {
|
|
27
|
+
// eslint-disable-next-line no-param-reassign
|
|
28
|
+
if ('expanded' in triggerElement)
|
|
29
|
+
triggerElement.expanded = true;
|
|
30
|
+
triggerElement.classList.remove('collapsed');
|
|
31
|
+
}
|
|
32
|
+
// Get target height
|
|
33
|
+
target.style.display = 'block';
|
|
34
|
+
const targetHeight = target.scrollHeight;
|
|
35
|
+
target.style.display = '';
|
|
36
|
+
target.style.setProperty('--collapse-target-height', `${targetHeight}px`);
|
|
37
|
+
requestAnimationFrame(() => {
|
|
38
|
+
// SOSTITUISCI .collapse con .collapsing durante l'animazione
|
|
39
|
+
target.classList.remove('collapse');
|
|
40
|
+
target.classList.add('collapsing');
|
|
41
|
+
requestAnimationFrame(() => {
|
|
42
|
+
// Quando l'animazione finisce: rimuovi .collapsing, ripristina .collapse + .show
|
|
43
|
+
target.classList.remove('collapsing');
|
|
44
|
+
target.classList.add('collapse', 'show');
|
|
45
|
+
target.style.removeProperty('--collapse-target-height');
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
// requestAnimationFrame(() => {
|
|
49
|
+
// target.style.height = `${targetHeight}px`;
|
|
50
|
+
// const onEnd = (e: TransitionEvent) => {
|
|
51
|
+
// if (e.propertyName !== 'height') return;
|
|
52
|
+
// target.removeEventListener('transitionend', onEnd);
|
|
53
|
+
// target.classList.remove('collapsing');
|
|
54
|
+
// target.classList.add('collapse', 'show');
|
|
55
|
+
// target.style.height = 'auto';
|
|
56
|
+
// this.animating.delete(target);
|
|
57
|
+
// };
|
|
58
|
+
// target.addEventListener('transitionend', onEnd);
|
|
59
|
+
// });
|
|
60
|
+
}
|
|
61
|
+
// eslint-disable-next-line class-methods-use-this
|
|
62
|
+
hide(element, triggerElement) {
|
|
63
|
+
if (triggerElement) {
|
|
64
|
+
// eslint-disable-next-line no-param-reassign
|
|
65
|
+
if ('expanded' in triggerElement)
|
|
66
|
+
triggerElement.expanded = false;
|
|
67
|
+
triggerElement.classList.add('collapsed');
|
|
68
|
+
}
|
|
69
|
+
const currentHeight = element.offsetHeight;
|
|
70
|
+
element.style.setProperty('--collapse-target-height', `${currentHeight}px`);
|
|
71
|
+
requestAnimationFrame(() => {
|
|
72
|
+
// SOSTITUISCI .collapse.show con .collapsing durante l'animazione
|
|
73
|
+
element.classList.remove('collapse', 'show');
|
|
74
|
+
element.classList.add('collapsing');
|
|
75
|
+
requestAnimationFrame(() => {
|
|
76
|
+
element.style.setProperty('--collapse-target-height', '0px');
|
|
77
|
+
element.classList.remove('collapsing');
|
|
78
|
+
element.classList.add('collapse');
|
|
79
|
+
element.style.removeProperty('--collapse-target-height');
|
|
80
|
+
// Quando l'animazione finisce: rimuovi .collapsing, ripristina .collapse
|
|
81
|
+
setTimeout(() => {
|
|
82
|
+
element.classList.remove('collapsing');
|
|
83
|
+
element.classList.add('collapse');
|
|
84
|
+
element.style.removeProperty('--collapse-target-height');
|
|
85
|
+
}, 350); // Match transition duration
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
// ...existing code...
|
|
90
|
+
// eslint-disable-next-line class-methods-use-this
|
|
91
|
+
isOpen(element) {
|
|
92
|
+
return element.classList.contains('show');
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
//# sourceMappingURL=collapse-controller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapse-controller.js","sourceRoot":"","sources":["../../../src/controllers/collapse-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class CollapseAnimationController implements ReactiveController {\n private host: ReactiveControllerHost;\n\n private animating: WeakSet<HTMLElement>;\n\n constructor(host: ReactiveControllerHost) {\n this.host = host;\n this.animating = new WeakSet();\n this.host.addController(this);\n }\n\n // hostConnected() {}\n\n hostDisconnected() {\n this.host.removeController(this);\n }\n\n toggle(element: HTMLElement, triggerElement?: HTMLElement): void {\n // if (this.animating.has(element)) return;\n const isOpen = element.classList.contains('show');\n\n if (isOpen) {\n this.hide(element, triggerElement);\n } else {\n this.show(element, triggerElement);\n }\n }\n\n // eslint-disable-next-line class-methods-use-this\n show(element: HTMLElement, triggerElement?: HTMLElement): void {\n const target = element;\n if (!target) return;\n if (triggerElement) {\n // eslint-disable-next-line no-param-reassign\n if ('expanded' in triggerElement) triggerElement.expanded = true;\n triggerElement.classList.remove('collapsed');\n }\n\n // Get target height\n target.style.display = 'block';\n const targetHeight = target.scrollHeight;\n target.style.display = '';\n target.style.setProperty('--collapse-target-height', `${targetHeight}px`);\n\n requestAnimationFrame(() => {\n // SOSTITUISCI .collapse con .collapsing durante l'animazione\n target.classList.remove('collapse');\n target.classList.add('collapsing');\n\n requestAnimationFrame(() => {\n // Quando l'animazione finisce: rimuovi .collapsing, ripristina .collapse + .show\n target.classList.remove('collapsing');\n target.classList.add('collapse', 'show');\n target.style.removeProperty('--collapse-target-height');\n });\n });\n // requestAnimationFrame(() => {\n // target.style.height = `${targetHeight}px`;\n\n // const onEnd = (e: TransitionEvent) => {\n // if (e.propertyName !== 'height') return;\n // target.removeEventListener('transitionend', onEnd);\n // target.classList.remove('collapsing');\n // target.classList.add('collapse', 'show');\n // target.style.height = 'auto';\n // this.animating.delete(target);\n // };\n // target.addEventListener('transitionend', onEnd);\n // });\n }\n\n // eslint-disable-next-line class-methods-use-this\n hide(element: HTMLElement, triggerElement?: HTMLElement): void {\n if (triggerElement) {\n // eslint-disable-next-line no-param-reassign\n if ('expanded' in triggerElement) triggerElement.expanded = false;\n triggerElement.classList.add('collapsed');\n }\n\n const currentHeight = element.offsetHeight;\n element.style.setProperty('--collapse-target-height', `${currentHeight}px`);\n requestAnimationFrame(() => {\n // SOSTITUISCI .collapse.show con .collapsing durante l'animazione\n element.classList.remove('collapse', 'show');\n element.classList.add('collapsing');\n\n requestAnimationFrame(() => {\n element.style.setProperty('--collapse-target-height', '0px');\n element.classList.remove('collapsing');\n element.classList.add('collapse');\n element.style.removeProperty('--collapse-target-height');\n\n // Quando l'animazione finisce: rimuovi .collapsing, ripristina .collapse\n setTimeout(() => {\n element.classList.remove('collapsing');\n element.classList.add('collapse');\n element.style.removeProperty('--collapse-target-height');\n }, 350); // Match transition duration\n });\n });\n }\n\n // ...existing code...\n\n // eslint-disable-next-line class-methods-use-this\n isOpen(element: HTMLElement): boolean {\n return element.classList.contains('show');\n }\n}\n"]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
export interface RovingTabindexConfig<T extends HTMLElement> {
|
|
3
|
+
/**
|
|
4
|
+
* Selector or function to get the items to manage
|
|
5
|
+
*/
|
|
6
|
+
getItems: () => T[];
|
|
7
|
+
/**
|
|
8
|
+
* Callback when an item is selected/activated
|
|
9
|
+
*/
|
|
10
|
+
onSelect?: (item: T, event: KeyboardEvent | PointerEvent | MouseEvent) => void;
|
|
11
|
+
/**
|
|
12
|
+
* Whether items wrap around (last -> first and vice versa)
|
|
13
|
+
* @default true
|
|
14
|
+
*/
|
|
15
|
+
wrap?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Direction of navigation
|
|
18
|
+
* @default 'both'
|
|
19
|
+
*/
|
|
20
|
+
direction?: 'horizontal' | 'vertical' | 'both';
|
|
21
|
+
/**
|
|
22
|
+
* Whether to select items on focus (vs just focusing)
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
selectOnFocus?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Custom logic to determine if an item should be skipped
|
|
28
|
+
* @default (item) => item.hasAttribute('disabled')
|
|
29
|
+
*/
|
|
30
|
+
skipItem?: (item: T) => boolean;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Roving Tabindex Controller
|
|
34
|
+
*
|
|
35
|
+
* Implements the ARIA roving tabindex pattern for keyboard navigation.
|
|
36
|
+
* See: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
|
|
37
|
+
*
|
|
38
|
+
* Usage:
|
|
39
|
+
* ```ts
|
|
40
|
+
* private rovingTabindex = new RovingTabindexController(this, {
|
|
41
|
+
* getItems: () => Array.from(this.querySelectorAll('my-item')),
|
|
42
|
+
* onSelect: (item) => this.selectItem(item),
|
|
43
|
+
* });
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
export declare class RovingTabindexController<T extends HTMLElement> implements ReactiveController {
|
|
47
|
+
private host;
|
|
48
|
+
private config;
|
|
49
|
+
constructor(host: ReactiveControllerHost, config: RovingTabindexConfig<T>);
|
|
50
|
+
hostConnected(): void;
|
|
51
|
+
hostDisconnected(): void;
|
|
52
|
+
/**
|
|
53
|
+
* Update tabindex values for all items
|
|
54
|
+
* @param activeIndex - Index of the item that should be tabbable (default: 0 or first non-disabled)
|
|
55
|
+
*/
|
|
56
|
+
updateTabindices(activeIndex?: number): void;
|
|
57
|
+
/**
|
|
58
|
+
* Handle keyboard navigation
|
|
59
|
+
* @param currentItem - The currently focused item
|
|
60
|
+
* @param event - The keyboard event
|
|
61
|
+
* @returns true if the event was handled, false otherwise
|
|
62
|
+
*/
|
|
63
|
+
handleKeydown(currentItem: T, event: KeyboardEvent): boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Get the next index based on direction
|
|
66
|
+
*/
|
|
67
|
+
private getNextIndex;
|
|
68
|
+
/**
|
|
69
|
+
* Find the next valid (non-disabled) index
|
|
70
|
+
*/
|
|
71
|
+
private findNextValidIndex;
|
|
72
|
+
/**
|
|
73
|
+
* Set focus to a specific item
|
|
74
|
+
*/
|
|
75
|
+
focusItem(item: T): void;
|
|
76
|
+
/**
|
|
77
|
+
* Set focus to the first non-disabled item
|
|
78
|
+
*/
|
|
79
|
+
focusFirst(): void;
|
|
80
|
+
/**
|
|
81
|
+
* Set focus to the last non-disabled item
|
|
82
|
+
*/
|
|
83
|
+
focusLast(): void;
|
|
84
|
+
}
|
|
85
|
+
//# sourceMappingURL=roving-tabindex-controller.d.ts.map
|