@angular/cdk-experimental 20.0.0-next.0 → 20.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,9 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { inject, contentChildren, computed, input, booleanAttribute, model, Directive, ElementRef } from '@angular/core';
3
- import { ListboxPattern, OptionPattern } from '@angular/cdk-experimental/ui-patterns';
4
3
  import { Directionality } from '@angular/cdk/bidi';
5
4
  import { toSignal } from '@angular/core/rxjs-interop';
6
5
  import { _IdGenerator } from '@angular/cdk/a11y';
6
+ import { L as ListboxPattern, O as OptionPattern } from './option-2e2b2e64.mjs';
7
7
 
8
8
  /**
9
9
  * A listbox container.
@@ -57,10 +57,10 @@ class CdkListbox {
57
57
  items: this.items,
58
58
  textDirection: this.textDirection,
59
59
  });
60
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkListbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
61
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.0", type: CdkListbox, isStandalone: true, selector: "[cdkListbox]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, skipDisabled: { classPropertyName: "skipDisabled", publicName: "skipDisabled", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange", activeIndex: "activeIndexChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "pattern.onKeydown($event)", "pointerdown": "pattern.onPointerdown($event)" }, properties: { "attr.tabindex": "pattern.tabindex()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-orientation": "pattern.orientation()", "attr.aria-multiselectable": "pattern.multiselectable()", "attr.aria-activedescendant": "pattern.activedescendant()" }, classAttribute: "cdk-listbox" }, queries: [{ propertyName: "_cdkOptions", predicate: CdkOption, descendants: true, isSignal: true }], exportAs: ["cdkListbox"], ngImport: i0 });
60
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: CdkListbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
61
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.0-next.1", type: CdkListbox, isStandalone: true, selector: "[cdkListbox]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, skipDisabled: { classPropertyName: "skipDisabled", publicName: "skipDisabled", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange", activeIndex: "activeIndexChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "pattern.onKeydown($event)", "pointerdown": "pattern.onPointerdown($event)" }, properties: { "attr.tabindex": "pattern.tabindex()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-orientation": "pattern.orientation()", "attr.aria-multiselectable": "pattern.multiselectable()", "attr.aria-activedescendant": "pattern.activedescendant()" }, classAttribute: "cdk-listbox" }, queries: [{ propertyName: "_cdkOptions", predicate: CdkOption, descendants: true, isSignal: true }], exportAs: ["cdkListbox"], ngImport: i0 });
62
62
  }
63
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkListbox, decorators: [{
63
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: CdkListbox, decorators: [{
64
64
  type: Directive,
65
65
  args: [{
66
66
  selector: '[cdkListbox]',
@@ -109,10 +109,10 @@ class CdkOption {
109
109
  element: this.element,
110
110
  searchTerm: this.searchTerm,
111
111
  });
112
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
113
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.0", type: CdkOption, isStandalone: true, selector: "[cdkOption]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.tabindex": "pattern.tabindex()", "attr.aria-selected": "pattern.selected()", "attr.aria-disabled": "pattern.disabled()" }, classAttribute: "cdk-option" }, exportAs: ["cdkOption"], ngImport: i0 });
112
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: CdkOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
113
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0-next.1", type: CdkOption, isStandalone: true, selector: "[cdkOption]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.tabindex": "pattern.tabindex()", "attr.aria-selected": "pattern.selected()", "attr.aria-disabled": "pattern.disabled()" }, classAttribute: "cdk-option" }, exportAs: ["cdkOption"], ngImport: i0 });
114
114
  }
115
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkOption, decorators: [{
115
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: CdkOption, decorators: [{
116
116
  type: Directive,
117
117
  args: [{
118
118
  selector: '[cdkOption]',
@@ -127,9 +127,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
127
127
  }]
128
128
  }] });
129
129
 
130
- /**
131
- * Generated bundle index. Do not edit.
132
- */
133
-
134
130
  export { CdkListbox, CdkOption };
135
131
  //# sourceMappingURL=listbox.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"listbox.mjs","sources":["../../../../../../src/cdk-experimental/listbox/listbox.ts","../../../../../../src/cdk-experimental/listbox/listbox_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n booleanAttribute,\n computed,\n contentChildren,\n Directive,\n ElementRef,\n inject,\n input,\n model,\n} from '@angular/core';\nimport {ListboxPattern, OptionPattern} from '@angular/cdk-experimental/ui-patterns';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {_IdGenerator} from '@angular/cdk/a11y';\n\n/**\n * A listbox container.\n *\n * Listboxes are used to display a list of items for a user to select from. The CdkListbox is meant\n * to be used in conjunction with CdkOption as follows:\n *\n * ```html\n * <ul cdkListbox>\n * <li cdkOption>Item 1</li>\n * <li cdkOption>Item 2</li>\n * <li cdkOption>Item 3</li>\n * </ul>\n * ```\n */\n@Directive({\n selector: '[cdkListbox]',\n exportAs: 'cdkListbox',\n host: {\n 'role': 'listbox',\n 'class': 'cdk-listbox',\n '[attr.tabindex]': 'pattern.tabindex()',\n '[attr.aria-disabled]': 'pattern.disabled()',\n '[attr.aria-orientation]': 'pattern.orientation()',\n '[attr.aria-multiselectable]': 'pattern.multiselectable()',\n '[attr.aria-activedescendant]': 'pattern.activedescendant()',\n '(keydown)': 'pattern.onKeydown($event)',\n '(pointerdown)': 'pattern.onPointerdown($event)',\n },\n})\nexport class CdkListbox {\n /** The directionality (LTR / RTL) context for the application (or a subtree of it). */\n private readonly _directionality = inject(Directionality);\n\n /** The CdkOptions nested inside of the CdkListbox. */\n private readonly _cdkOptions = contentChildren(CdkOption, {descendants: true});\n\n /** A signal wrapper for directionality. */\n protected textDirection = toSignal(this._directionality.change, {\n initialValue: this._directionality.value,\n });\n\n /** The Option UIPatterns of the child CdkOptions. */\n protected items = computed(() => this._cdkOptions().map(option => option.pattern));\n\n /** Whether the list is vertically or horizontally oriented. */\n orientation = input<'vertical' | 'horizontal'>('vertical');\n\n /** Whether multiple items in the list can be selected at once. */\n multiselectable = input(false, {transform: booleanAttribute});\n\n /** Whether focus should wrap when navigating. */\n wrap = input(true, {transform: booleanAttribute});\n\n /** Whether disabled items in the list should be skipped when navigating. */\n skipDisabled = input(true, {transform: booleanAttribute});\n\n /** The focus strategy used by the list. */\n focusMode = input<'roving' | 'activedescendant'>('roving');\n\n /** The selection strategy used by the list. */\n selectionMode = input<'follow' | 'explicit'>('follow');\n\n /** The amount of time before the typeahead search is reset. */\n typeaheadDelay = input<number>(0.5); // Picked arbitrarily.\n\n /** Whether the listbox is disabled. */\n disabled = input(false, {transform: booleanAttribute});\n\n // TODO(wagnermaciel): Figure out how we want to expose control over the current listbox value.\n /** The ids of the current selected items. */\n selectedIds = model<string[]>([]);\n\n /** The current index that has been navigated to. */\n activeIndex = model<number>(0);\n\n /** The Listbox UIPattern. */\n pattern: ListboxPattern = new ListboxPattern({\n ...this,\n items: this.items,\n textDirection: this.textDirection,\n });\n}\n\n/** A selectable option in a CdkListbox. */\n@Directive({\n selector: '[cdkOption]',\n exportAs: 'cdkOption',\n host: {\n 'role': 'option',\n 'class': 'cdk-option',\n '[attr.tabindex]': 'pattern.tabindex()',\n '[attr.aria-selected]': 'pattern.selected()',\n '[attr.aria-disabled]': 'pattern.disabled()',\n },\n})\nexport class CdkOption {\n /** A reference to the option element. */\n private readonly _elementRef = inject(ElementRef);\n\n /** The parent CdkListbox. */\n private readonly _cdkListbox = inject(CdkListbox);\n\n /** A unique identifier for the option. */\n private readonly _generatedId = inject(_IdGenerator).getId('cdk-option-');\n\n // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.\n /** A unique identifier for the option. */\n protected id = computed(() => this._generatedId);\n\n // TODO(wagnermaciel): See if we want to change how we handle this since textContent is not\n // reactive. See https://github.com/angular/components/pull/30495#discussion_r1961260216.\n /** The text used by the typeahead search. */\n protected searchTerm = computed(() => this.label() ?? this.element().textContent);\n\n /** The parent Listbox UIPattern. */\n protected listbox = computed(() => this._cdkListbox.pattern);\n\n /** A reference to the option element to be focused on navigation. */\n protected element = computed(() => this._elementRef.nativeElement);\n\n /** Whether an item is disabled. */\n disabled = input(false, {transform: booleanAttribute});\n\n /** The text used by the typeahead search. */\n label = input<string>();\n\n /** The Option UIPattern. */\n pattern = new OptionPattern({\n ...this,\n id: this.id,\n listbox: this.listbox,\n element: this.element,\n searchTerm: this.searchTerm,\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"listbox.mjs","sources":["../../../../../../src/cdk-experimental/listbox/listbox.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n booleanAttribute,\n computed,\n contentChildren,\n Directive,\n ElementRef,\n inject,\n input,\n model,\n} from '@angular/core';\nimport {ListboxPattern, OptionPattern} from '../ui-patterns';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {_IdGenerator} from '@angular/cdk/a11y';\n\n/**\n * A listbox container.\n *\n * Listboxes are used to display a list of items for a user to select from. The CdkListbox is meant\n * to be used in conjunction with CdkOption as follows:\n *\n * ```html\n * <ul cdkListbox>\n * <li cdkOption>Item 1</li>\n * <li cdkOption>Item 2</li>\n * <li cdkOption>Item 3</li>\n * </ul>\n * ```\n */\n@Directive({\n selector: '[cdkListbox]',\n exportAs: 'cdkListbox',\n host: {\n 'role': 'listbox',\n 'class': 'cdk-listbox',\n '[attr.tabindex]': 'pattern.tabindex()',\n '[attr.aria-disabled]': 'pattern.disabled()',\n '[attr.aria-orientation]': 'pattern.orientation()',\n '[attr.aria-multiselectable]': 'pattern.multiselectable()',\n '[attr.aria-activedescendant]': 'pattern.activedescendant()',\n '(keydown)': 'pattern.onKeydown($event)',\n '(pointerdown)': 'pattern.onPointerdown($event)',\n },\n})\nexport class CdkListbox {\n /** The directionality (LTR / RTL) context for the application (or a subtree of it). */\n private readonly _directionality = inject(Directionality);\n\n /** The CdkOptions nested inside of the CdkListbox. */\n private readonly _cdkOptions = contentChildren(CdkOption, {descendants: true});\n\n /** A signal wrapper for directionality. */\n protected textDirection = toSignal(this._directionality.change, {\n initialValue: this._directionality.value,\n });\n\n /** The Option UIPatterns of the child CdkOptions. */\n protected items = computed(() => this._cdkOptions().map(option => option.pattern));\n\n /** Whether the list is vertically or horizontally oriented. */\n orientation = input<'vertical' | 'horizontal'>('vertical');\n\n /** Whether multiple items in the list can be selected at once. */\n multiselectable = input(false, {transform: booleanAttribute});\n\n /** Whether focus should wrap when navigating. */\n wrap = input(true, {transform: booleanAttribute});\n\n /** Whether disabled items in the list should be skipped when navigating. */\n skipDisabled = input(true, {transform: booleanAttribute});\n\n /** The focus strategy used by the list. */\n focusMode = input<'roving' | 'activedescendant'>('roving');\n\n /** The selection strategy used by the list. */\n selectionMode = input<'follow' | 'explicit'>('follow');\n\n /** The amount of time before the typeahead search is reset. */\n typeaheadDelay = input<number>(0.5); // Picked arbitrarily.\n\n /** Whether the listbox is disabled. */\n disabled = input(false, {transform: booleanAttribute});\n\n // TODO(wagnermaciel): Figure out how we want to expose control over the current listbox value.\n /** The ids of the current selected items. */\n selectedIds = model<string[]>([]);\n\n /** The current index that has been navigated to. */\n activeIndex = model<number>(0);\n\n /** The Listbox UIPattern. */\n pattern: ListboxPattern = new ListboxPattern({\n ...this,\n items: this.items,\n textDirection: this.textDirection,\n });\n}\n\n/** A selectable option in a CdkListbox. */\n@Directive({\n selector: '[cdkOption]',\n exportAs: 'cdkOption',\n host: {\n 'role': 'option',\n 'class': 'cdk-option',\n '[attr.tabindex]': 'pattern.tabindex()',\n '[attr.aria-selected]': 'pattern.selected()',\n '[attr.aria-disabled]': 'pattern.disabled()',\n },\n})\nexport class CdkOption {\n /** A reference to the option element. */\n private readonly _elementRef = inject(ElementRef);\n\n /** The parent CdkListbox. */\n private readonly _cdkListbox = inject(CdkListbox);\n\n /** A unique identifier for the option. */\n private readonly _generatedId = inject(_IdGenerator).getId('cdk-option-');\n\n // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.\n /** A unique identifier for the option. */\n protected id = computed(() => this._generatedId);\n\n // TODO(wagnermaciel): See if we want to change how we handle this since textContent is not\n // reactive. See https://github.com/angular/components/pull/30495#discussion_r1961260216.\n /** The text used by the typeahead search. */\n protected searchTerm = computed(() => this.label() ?? this.element().textContent);\n\n /** The parent Listbox UIPattern. */\n protected listbox = computed(() => this._cdkListbox.pattern);\n\n /** A reference to the option element to be focused on navigation. */\n protected element = computed(() => this._elementRef.nativeElement);\n\n /** Whether an item is disabled. */\n disabled = input(false, {transform: booleanAttribute});\n\n /** The text used by the typeahead search. */\n label = input<string>();\n\n /** The Option UIPattern. */\n pattern = new OptionPattern({\n ...this,\n id: this.id,\n listbox: this.listbox,\n element: this.element,\n searchTerm: this.searchTerm,\n });\n}\n"],"names":[],"mappings":";;;;;;;AAuBA;;;;;;;;;;;;;AAaG;MAgBU,UAAU,CAAA;;AAEJ,IAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA;;IAGxC,WAAW,GAAG,eAAe,CAAC,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,CAAA;;IAGpE,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;AAC9D,QAAA,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK;AACzC,KAAA,CAAC,CAAA;;IAGQ,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAA;;AAGlF,IAAA,WAAW,GAAG,KAAK,CAA4B,UAAU,CAAC,CAAA;;IAG1D,eAAe,GAAG,KAAK,CAAC,KAAK,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAA;;IAG7D,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAA;;IAGjD,YAAY,GAAG,KAAK,CAAC,IAAI,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAA;;AAGzD,IAAA,SAAS,GAAG,KAAK,CAAgC,QAAQ,CAAC,CAAA;;AAG1D,IAAA,aAAa,GAAG,KAAK,CAAwB,QAAQ,CAAC,CAAA;;AAGtD,IAAA,cAAc,GAAG,KAAK,CAAS,GAAG,CAAC,CAAC;;IAGpC,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAA;;;AAItD,IAAA,WAAW,GAAG,KAAK,CAAW,EAAE,CAAC,CAAA;;AAGjC,IAAA,WAAW,GAAG,KAAK,CAAS,CAAC,CAAC,CAAA;;IAG9B,OAAO,GAAmB,IAAI,cAAc,CAAC;AAC3C,QAAA,GAAG,IAAI;QACP,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,aAAa,EAAE,IAAI,CAAC,aAAa;AAClC,KAAA,CAAC,CAAA;8GAnDS,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,IAAA,EAAA,UAAU,69DAK0B,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;kGAL7C,UAAU,EAAA,UAAA,EAAA,CAAA;kBAftB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,IAAI,EAAE;AACJ,wBAAA,MAAM,EAAE,SAAS;AACjB,wBAAA,OAAO,EAAE,aAAa;AACtB,wBAAA,iBAAiB,EAAE,oBAAoB;AACvC,wBAAA,sBAAsB,EAAE,oBAAoB;AAC5C,wBAAA,yBAAyB,EAAE,uBAAuB;AAClD,wBAAA,6BAA6B,EAAE,2BAA2B;AAC1D,wBAAA,8BAA8B,EAAE,4BAA4B;AAC5D,wBAAA,WAAW,EAAE,2BAA2B;AACxC,wBAAA,eAAe,EAAE,+BAA+B;AACjD,qBAAA;AACF,iBAAA,CAAA;;AAuDD;MAYa,SAAS,CAAA;;AAEH,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;AAGhC,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;IAGhC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;;;IAI/D,EAAE,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,CAAA;;;;AAKtC,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,WAAW,CAAC,CAAA;;AAGvE,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;;AAGlD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAA;;IAGlE,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAA;;IAGtD,KAAK,GAAG,KAAK,EAAU,CAAA;;IAGvB,OAAO,GAAG,IAAI,aAAa,CAAC;AAC1B,QAAA,GAAG,IAAI;QACP,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,KAAA,CAAC,CAAA;8GAtCS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;kGAAT,SAAS,EAAA,UAAA,EAAA,CAAA;kBAXrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,IAAI,EAAE;AACJ,wBAAA,MAAM,EAAE,QAAQ;AAChB,wBAAA,OAAO,EAAE,YAAY;AACrB,wBAAA,iBAAiB,EAAE,oBAAoB;AACvC,wBAAA,sBAAsB,EAAE,oBAAoB;AAC5C,wBAAA,sBAAsB,EAAE,oBAAoB;AAC7C,qBAAA;AACF,iBAAA,CAAA;;;;;"}