@mathstack/ui 0.0.1-beta.1 → 0.0.1-beta.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/README.md +9 -0
- package/fesm2022/mathstack-ui.mjs +175 -176
- package/fesm2022/mathstack-ui.mjs.map +1 -1
- package/package.json +7 -7
- package/types/mathstack-ui.d.ts +618 -0
- package/index.d.ts +0 -5
- package/lib/combobox/combobox-label/combobox-label.component.d.ts +0 -11
- package/lib/combobox/combobox.component.d.ts +0 -20
- package/lib/combobox/combobox.module.d.ts +0 -15
- package/lib/combobox/combobox.service.d.ts +0 -124
- package/lib/combobox/editable-textbox/editable-textbox.component.d.ts +0 -39
- package/lib/combobox/index.d.ts +0 -11
- package/lib/combobox/listbox/active-index.service.d.ts +0 -32
- package/lib/combobox/listbox/listbox-filtering.service.d.ts +0 -12
- package/lib/combobox/listbox/listbox-scroll.service.d.ts +0 -11
- package/lib/combobox/listbox/listbox.component.d.ts +0 -58
- package/lib/combobox/listbox-group/listbox-group.component.d.ts +0 -16
- package/lib/combobox/listbox-label/listbox-label.component.d.ts +0 -12
- package/lib/combobox/listbox-option/listbox-option.component.d.ts +0 -52
- package/lib/combobox/select-all-listbox-option/select-all-listbox-option.component.d.ts +0 -24
- package/lib/combobox/textbox/textbox.component.d.ts +0 -41
- package/lib/directory/directory.component.d.ts +0 -44
- package/lib/directory/index.d.ts +0 -1
- package/lib/table/index.d.ts +0 -4
- package/lib/table/single-sort-header/single-sort-header.component.d.ts +0 -9
- package/lib/table/table-column.d.ts +0 -53
- package/lib/table/table.component.d.ts +0 -27
- package/lib/table/table.config.d.ts +0 -5
- package/lib/table/table.module.d.ts +0 -11
- package/lib/tabs/index.d.ts +0 -6
- package/lib/tabs/tab-body.component.d.ts +0 -8
- package/lib/tabs/tab-content.directive.d.ts +0 -15
- package/lib/tabs/tab-item.component.d.ts +0 -16
- package/lib/tabs/tab-label.component.d.ts +0 -10
- package/lib/tabs/tabs.component.d.ts +0 -24
- package/lib/tabs/tabs.module.d.ts +0 -11
- package/lib/tabs/tabs.service.d.ts +0 -9
- package/public-api.d.ts +0 -4
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ViewChild, Component, ContentChildren, ContentChild, Injectable,
|
|
2
|
+
import { inject, Input, ViewChild, Component, ContentChildren, ContentChild, Injectable, EventEmitter, DestroyRef, Output, forwardRef, TemplateRef, NgZone, ElementRef, ViewEncapsulation, NgModule, ChangeDetectionStrategy, InjectionToken, Directive } from '@angular/core';
|
|
3
|
+
import { Platform } from '@angular/cdk/platform';
|
|
3
4
|
import { BehaviorSubject, startWith, map, distinctUntilChanged, withLatestFrom, take, delay, skip, combineLatest, filter, pairwise, switchMap, merge, mergeAll, debounceTime, Subject, of, shareReplay, fromEvent, scan } from 'rxjs';
|
|
4
5
|
import * as i1 from '@angular/common';
|
|
5
6
|
import { CommonModule, DOCUMENT, AsyncPipe } from '@angular/common';
|
|
6
7
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
7
|
-
import * as i1$1 from '@angular/
|
|
8
|
-
import { Platform } from '@angular/cdk/platform';
|
|
9
|
-
import * as i2 from '@angular/forms';
|
|
8
|
+
import * as i1$1 from '@angular/forms';
|
|
10
9
|
import { FormsModule } from '@angular/forms';
|
|
11
10
|
import { runNgChangeDetectionThen, NgOnChangesUtilities, safeAssign } from '@mathstack/app-kit';
|
|
12
11
|
import { MatIconModule } from '@angular/material/icon';
|
|
13
12
|
import { ascending, min } from 'd3';
|
|
14
13
|
import { isEqual } from 'lodash-es';
|
|
15
|
-
import * as i2
|
|
14
|
+
import * as i2 from '@angular/cdk/table';
|
|
16
15
|
import { CdkTableModule } from '@angular/cdk/table';
|
|
17
16
|
|
|
18
17
|
let nextUniqueId$3 = 0;
|
|
19
18
|
class ListboxOptionComponent {
|
|
20
|
-
constructor(
|
|
21
|
-
this.service = service;
|
|
19
|
+
constructor() {
|
|
22
20
|
/** Whether the option is selected.
|
|
23
21
|
* If this property is changed during this component's lifecycle, no new value will be emitted from the listbox.
|
|
24
22
|
* Box label and select all button will respond to changes.
|
|
@@ -39,6 +37,7 @@ class ListboxOptionComponent {
|
|
|
39
37
|
this.disabled$ = this._disabled.asObservable();
|
|
40
38
|
this.externalPropertyChanges = new BehaviorSubject(null);
|
|
41
39
|
this.externalPropertyChanges$ = this.externalPropertyChanges.asObservable();
|
|
40
|
+
this.service = inject(ComboboxService);
|
|
42
41
|
}
|
|
43
42
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
44
43
|
get valueToEmit() {
|
|
@@ -101,13 +100,13 @@ class ListboxOptionComponent {
|
|
|
101
100
|
isDisabled() {
|
|
102
101
|
return this._disabled.value;
|
|
103
102
|
}
|
|
104
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
105
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
103
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
104
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ListboxOptionComponent, isStandalone: true, selector: "hsi-ui-listbox-option", inputs: { boxDisplayLabel: "boxDisplayLabel", value: "value", selected: "selected", disabled: "disabled", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "template", first: true, predicate: ["option"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #option>\n <div class=\"hsi-ui-listbox-option-container\">\n @if (isSelected()) {\n <ng-container *ngTemplateOutlet=\"selectedIcon\"></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"unselectedIcon\"></ng-container>\n }\n <div\n #label\n class=\"hsi-ui-listbox-option-label\"\n [attr.aria-label]=\"ariaLabel\"\n ><ng-content></ng-content\n ></div>\n </div>\n</ng-template>\n\n<ng-template #selectedIcon\n ><ng-content select=\"[selectedIcon]\"></ng-content>\n</ng-template>\n<ng-template #unselectedIcon\n ><ng-content select=\"[unselectedIcon]\"></ng-content>\n</ng-template>\n", styles: [".hsi-ui-listbox-option-container{display:var(--hsi-ui-listbox-option-container-display);flex-direction:var(--hsi-ui-listbox-option-container-flex-direction);align-items:var(--hsi-ui-listbox-option-container-align-items);cursor:var(--hsi-ui-listbox-option-cursor);padding:var(--hsi-ui-listbox-option-container-padding);gap:var(--hsi-ui-listbox-option-container-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
106
105
|
}
|
|
107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxOptionComponent, decorators: [{
|
|
108
107
|
type: Component,
|
|
109
108
|
args: [{ selector: 'hsi-ui-listbox-option', imports: [CommonModule], template: "<ng-template #option>\n <div class=\"hsi-ui-listbox-option-container\">\n @if (isSelected()) {\n <ng-container *ngTemplateOutlet=\"selectedIcon\"></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"unselectedIcon\"></ng-container>\n }\n <div\n #label\n class=\"hsi-ui-listbox-option-label\"\n [attr.aria-label]=\"ariaLabel\"\n ><ng-content></ng-content\n ></div>\n </div>\n</ng-template>\n\n<ng-template #selectedIcon\n ><ng-content select=\"[selectedIcon]\"></ng-content>\n</ng-template>\n<ng-template #unselectedIcon\n ><ng-content select=\"[unselectedIcon]\"></ng-content>\n</ng-template>\n", styles: [".hsi-ui-listbox-option-container{display:var(--hsi-ui-listbox-option-container-display);flex-direction:var(--hsi-ui-listbox-option-container-flex-direction);align-items:var(--hsi-ui-listbox-option-container-align-items);cursor:var(--hsi-ui-listbox-option-cursor);padding:var(--hsi-ui-listbox-option-container-padding);gap:var(--hsi-ui-listbox-option-container-gap)}\n"] }]
|
|
110
|
-
}],
|
|
109
|
+
}], propDecorators: { label: [{
|
|
111
110
|
type: ViewChild,
|
|
112
111
|
args: ['label']
|
|
113
112
|
}], template: [{
|
|
@@ -127,19 +126,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
127
126
|
|
|
128
127
|
let nextUniqueId$2 = 0;
|
|
129
128
|
class ListboxLabelComponent {
|
|
130
|
-
constructor(
|
|
131
|
-
this.service =
|
|
129
|
+
constructor() {
|
|
130
|
+
this.service = inject(ComboboxService);
|
|
132
131
|
this.id = `${this.service.id}-listbox-label-${nextUniqueId$2++}`;
|
|
133
132
|
}
|
|
134
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
135
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ListboxLabelComponent, isStandalone: true, selector: "hsi-ui-listbox-label", host: { classAttribute: "hsi-ui-listbox-label" }, viewQueries: [{ propertyName: "labelContent", first: true, predicate: ["label"], descendants: true }, { propertyName: "label", first: true, predicate: ["text"], descendants: true }], ngImport: i0, template: "<ng-template #label let-wrapperHasId=\"wrapperHasId\">\n <p\n class=\"hsi-ui-listbox-label\"\n [attr.id]=\"wrapperHasId ? null : id\"\n role=\"presentation\"\n #text\n >\n <ng-content></ng-content>\n </p>\n</ng-template>\n", styles: [".hsi-ui-listbox-label{padding:var(--hsi-ui-listbox-label-padding);font-size:var(--hsi-ui-listbox-label-font-size);font-weight:var(--hsi-ui-listbox-label-font-weight);text-transform:var(--hsi-ui-listbox-label-text-transform);margin-right:var(--hsi-ui-listbox-label-margin-right)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
136
135
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxLabelComponent, decorators: [{
|
|
138
137
|
type: Component,
|
|
139
138
|
args: [{ selector: 'hsi-ui-listbox-label', imports: [CommonModule], host: {
|
|
140
139
|
class: 'hsi-ui-listbox-label',
|
|
141
|
-
}, template: "<ng-template #label let-
|
|
142
|
-
}], ctorParameters: () => [
|
|
140
|
+
}, template: "<ng-template #label let-wrapperHasId=\"wrapperHasId\">\n <p\n class=\"hsi-ui-listbox-label\"\n [attr.id]=\"wrapperHasId ? null : id\"\n role=\"presentation\"\n #text\n >\n <ng-content></ng-content>\n </p>\n</ng-template>\n", styles: [".hsi-ui-listbox-label{padding:var(--hsi-ui-listbox-label-padding);font-size:var(--hsi-ui-listbox-label-font-size);font-weight:var(--hsi-ui-listbox-label-font-weight);text-transform:var(--hsi-ui-listbox-label-text-transform);margin-right:var(--hsi-ui-listbox-label-margin-right)}\n"] }]
|
|
141
|
+
}], ctorParameters: () => [], propDecorators: { labelContent: [{
|
|
143
142
|
type: ViewChild,
|
|
144
143
|
args: ['label']
|
|
145
144
|
}], label: [{
|
|
@@ -148,16 +147,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
148
147
|
}] } });
|
|
149
148
|
|
|
150
149
|
class ListboxGroupComponent {
|
|
151
|
-
constructor(
|
|
152
|
-
this.service =
|
|
150
|
+
constructor() {
|
|
151
|
+
this.service = inject(ComboboxService);
|
|
153
152
|
}
|
|
154
153
|
ngAfterContentInit() {
|
|
155
154
|
this.options$ = this.options.changes.pipe(startWith(''), map(() => this.options.toArray()));
|
|
156
155
|
}
|
|
157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ListboxGroupComponent, isStandalone: true, selector: "hsi-ui-listbox-group", host: { classAttribute: "hsi-ui-listbox-group" }, queries: [{ propertyName: "label", first: true, predicate: ListboxLabelComponent, descendants: true }, { propertyName: "options", predicate: ListboxOptionComponent }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
|
|
159
158
|
}
|
|
160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxGroupComponent, decorators: [{
|
|
161
160
|
type: Component,
|
|
162
161
|
args: [{
|
|
163
162
|
selector: 'hsi-ui-listbox-group',
|
|
@@ -166,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
166
165
|
class: 'hsi-ui-listbox-group',
|
|
167
166
|
},
|
|
168
167
|
}]
|
|
169
|
-
}],
|
|
168
|
+
}], propDecorators: { label: [{
|
|
170
169
|
type: ContentChild,
|
|
171
170
|
args: [ListboxLabelComponent]
|
|
172
171
|
}], options: [{
|
|
@@ -217,16 +216,16 @@ class ListboxFilteringService {
|
|
|
217
216
|
.indexOf(option.label?.nativeElement.innerText) < 0);
|
|
218
217
|
});
|
|
219
218
|
}
|
|
220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
221
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
219
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxFilteringService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
220
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxFilteringService }); }
|
|
222
221
|
}
|
|
223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxFilteringService, decorators: [{
|
|
224
223
|
type: Injectable
|
|
225
224
|
}] });
|
|
226
225
|
|
|
227
226
|
class ListboxScrollService {
|
|
228
|
-
constructor(
|
|
229
|
-
this.document =
|
|
227
|
+
constructor() {
|
|
228
|
+
this.document = inject(DOCUMENT);
|
|
230
229
|
}
|
|
231
230
|
isElementInView(element) {
|
|
232
231
|
const bounding = element.getBoundingClientRect();
|
|
@@ -255,23 +254,20 @@ class ListboxScrollService {
|
|
|
255
254
|
scrollToTop(scrollParent) {
|
|
256
255
|
scrollParent.scrollTo(0, 0);
|
|
257
256
|
}
|
|
258
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
259
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
257
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
258
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxScrollService }); }
|
|
260
259
|
}
|
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
260
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxScrollService, decorators: [{
|
|
262
261
|
type: Injectable
|
|
263
|
-
}]
|
|
264
|
-
type: Inject,
|
|
265
|
-
args: [DOCUMENT]
|
|
266
|
-
}] }] });
|
|
262
|
+
}] });
|
|
267
263
|
|
|
268
264
|
class ActiveIndexService {
|
|
269
|
-
constructor(
|
|
270
|
-
this.service = service;
|
|
271
|
-
this.filtering = filtering;
|
|
272
|
-
this.scrolling = scrolling;
|
|
265
|
+
constructor() {
|
|
273
266
|
this.activeIndex = new BehaviorSubject(null);
|
|
274
267
|
this.activeIndex$ = this.activeIndex.asObservable().pipe(distinctUntilChanged());
|
|
268
|
+
this.service = inject(ComboboxService);
|
|
269
|
+
this.filtering = inject(ListboxFilteringService);
|
|
270
|
+
this.scrolling = inject(ListboxScrollService);
|
|
275
271
|
}
|
|
276
272
|
init(allOptions$, destroyRef) {
|
|
277
273
|
this.listenToActions(allOptions$, destroyRef);
|
|
@@ -463,25 +459,25 @@ class ActiveIndexService {
|
|
|
463
459
|
this.activeIndex.next(null);
|
|
464
460
|
}
|
|
465
461
|
}
|
|
466
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
467
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
462
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ActiveIndexService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
463
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ActiveIndexService }); }
|
|
468
464
|
}
|
|
469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
465
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ActiveIndexService, decorators: [{
|
|
470
466
|
type: Injectable
|
|
471
|
-
}]
|
|
467
|
+
}] });
|
|
472
468
|
|
|
473
469
|
class ListboxComponent {
|
|
474
|
-
constructor(
|
|
475
|
-
this.service = service;
|
|
476
|
-
this.activeIndex = activeIndex;
|
|
477
|
-
this.filtering = filtering;
|
|
478
|
-
this.scrolling = scrolling;
|
|
479
|
-
this.destroyRef = destroyRef;
|
|
470
|
+
constructor() {
|
|
480
471
|
this.findsOptionOnTyping = true;
|
|
481
472
|
this.isMultiSelect = false;
|
|
482
473
|
this.maxHeight = 300;
|
|
483
474
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
484
475
|
this.valueChanges = new EventEmitter();
|
|
476
|
+
this.service = inject(ComboboxService);
|
|
477
|
+
this.activeIndex = inject(ActiveIndexService);
|
|
478
|
+
this.filtering = inject(ListboxFilteringService);
|
|
479
|
+
this.scrolling = inject(ListboxScrollService);
|
|
480
|
+
this.destroyRef = inject(DestroyRef);
|
|
485
481
|
}
|
|
486
482
|
ngOnChanges(changes) {
|
|
487
483
|
if (changes['isMultiSelect']) {
|
|
@@ -690,14 +686,14 @@ class ListboxComponent {
|
|
|
690
686
|
handleOptionMousedown() {
|
|
691
687
|
this.service.ignoreBlur = true;
|
|
692
688
|
}
|
|
693
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
694
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
689
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
690
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ListboxComponent, isStandalone: true, selector: "hsi-ui-listbox", inputs: { ngFormControl: "ngFormControl", findsOptionOnTyping: "findsOptionOnTyping", isMultiSelect: "isMultiSelect", maxHeight: "maxHeight" }, outputs: { valueChanges: "valueChanges" }, host: { classAttribute: "hsi-ui-listbox-component" }, providers: [
|
|
695
691
|
ListboxFilteringService,
|
|
696
692
|
ListboxScrollService,
|
|
697
693
|
ActiveIndexService,
|
|
698
|
-
], queries: [{ propertyName: "label", first: true, predicate: ListboxLabelComponent }, { propertyName: "options", predicate: ListboxOptionComponent }, { propertyName: "groups", predicate: ListboxGroupComponent }], viewQueries: [{ propertyName: "scrollableContentRef", first: true, predicate: ["scrollableContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #scrollableContent\n role=\"listbox\"\n tabindex=\"-1\"\n [id]=\"service.id + '-listbox'\"\n class=\"hsi-ui-listbox\"\n [class.open]=\"service.isOpen$ | async\"\n [style.--hsi-ui-listbox-max-height.px]=\"maxHeight\"\n [attr.aria-labelledby]=\"\n (service.label$ | async) ? service.comboboxLabelId : label?.id\n \"\n [attr.aria-multiselectable]=\"isMultiSelect\"\n>\n <ng-container\n *ngTemplateOutlet=\"\n label?.labelContent || nullContent;\n context: {
|
|
694
|
+
], queries: [{ propertyName: "label", first: true, predicate: ListboxLabelComponent }, { propertyName: "options", predicate: ListboxOptionComponent }, { propertyName: "groups", predicate: ListboxGroupComponent }], viewQueries: [{ propertyName: "scrollableContentRef", first: true, predicate: ["scrollableContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #scrollableContent\n role=\"listbox\"\n tabindex=\"-1\"\n [id]=\"service.id + '-listbox'\"\n class=\"hsi-ui-listbox\"\n [class.open]=\"service.isOpen$ | async\"\n [style.--hsi-ui-listbox-max-height.px]=\"maxHeight\"\n [attr.aria-labelledby]=\"\n (service.label$ | async) ? service.comboboxLabelId : label?.id\n \"\n [attr.aria-multiselectable]=\"isMultiSelect\"\n>\n <ng-container\n *ngTemplateOutlet=\"\n label?.labelContent || nullContent;\n context: { wrapperHasId: false }\n \"\n ></ng-container>\n @if ((service.groups$ | async)?.length > 0) {\n <ng-container *ngTemplateOutlet=\"groupedOptions\"></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"options\"></ng-container>\n }\n</div>\n\n<ng-template #options>\n @for (\n option of service.allOptions$ | async;\n track option.id;\n let i = $index\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n optionTemplate;\n context: {\n $implicit: option,\n index: i,\n groupIndex: null,\n }\n \"\n ></ng-container>\n }\n</ng-template>\n\n<ng-template #groupedOptions>\n @for (group of service.groups$ | async; track $index; let i = $index) {\n <div class=\"hsi-ui-listbox-group-container\">\n <div\n role=\"group\"\n tabIndex=\"-1\"\n class=\"hsi-ui-listbox-group\"\n [ngClass]=\"'listbox-group-' + i\"\n [attr.aria-labelledby]=\"group.label?.id\"\n >\n @if (group.label) {\n <div\n role=\"presentation\"\n [id]=\"group.label?.id\"\n class=\"hsi-ui-listbox-group-label\"\n [ngClass]=\"'hsi-ui-listbox-group-' + i + '-label'\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n group.label?.labelContent || nullContent;\n context: { wrapperHasId: true }\n \"\n ></ng-container>\n </div>\n }\n @for (\n option of group.options$ | async;\n track option.id;\n let j = $index\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n optionTemplate;\n context: {\n $implicit: option,\n index: j,\n groupIndex: i,\n }\n \"\n ></ng-container>\n }\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template\n #optionTemplate\n let-option\n let-index=\"index\"\n let-groupIndex=\"groupIndex\"\n>\n <div\n role=\"option\"\n tabindex=\"-1\"\n [id]=\"\n service.id +\n '-listbox-option-' +\n (groupIndex !== null\n ? getOptionIndexFromGroups(groupIndex, index)\n : index)\n \"\n class=\"hsi-ui-listbox-option\"\n [class.grouped-option]=\"groupIndex !== null\"\n [ngClass]=\"\n groupIndex !== null\n ? 'hsi-ui-listbox-option-' + getOptionIndexFromGroups(groupIndex, index)\n : 'hsi-ui-listbox-option-' + index\n \"\n [class.current]=\"\n (activeIndex.activeIndex$ | async) ===\n (groupIndex !== null\n ? getOptionIndexFromGroups(groupIndex, index)\n : index) && (option.disabled$ | async) !== true\n \"\n [class.disabled]=\"option.disabled$ | async\"\n [class.keyboard-current]=\"\n (service.isKeyboardEvent$ | async) &&\n (activeIndex.activeIndex$ | async) ===\n (groupIndex !== null\n ? getOptionIndexFromGroups(groupIndex, index)\n : index) &&\n (option.disabled$ | async) !== true\n \"\n [class.multi]=\"isMultiSelect\"\n [class.selected]=\"option.selected$ | async\"\n [attr.aria-checked]=\"isMultiSelect ? (option.selected$ | async) : null\"\n [attr.aria-selected]=\"!isMultiSelect ? (option.selected$ | async) : null\"\n [attr.aria-disabled]=\"option.disabled$ | async\"\n data-cy=\"listbox-option\"\n (click)=\"handleOptionClick($event, index, groupIndex)\"\n (mousedown)=\"handleOptionMousedown()\"\n >\n <ng-container *ngTemplateOutlet=\"option.template\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #nullContent></ng-template>\n", styles: [":host{position:absolute;top:100%;left:0;width:100%;z-index:var(--hsi-ui-listbox-z-index);background:var(--hsi-ui-listbox-background);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius)}:host ::-webkit-scrollbar-track{background:transparent}.hsi-ui-listbox{padding-top:var(--hsi-ui-listbox-padding-top);background:var(--hsi-ui-listbox-background);border-left:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-right:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-bottom:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius);max-height:var(--hsi-ui-listbox-max-height);overflow-y:auto}.hsi-ui-listbox:not(.open){display:none}.hsi-ui-listbox-option{display:block;cursor:pointer;margin-left:var(--hsi-ui-listbox-padding-left);margin-right:var(--hsi-ui-listbox-padding-right)}.hsi-ui-listbox-option:not(.grouped-option):last-child,.hsi-ui-listbox-group-container:last-child .hsi-ui-listbox-option:last-child,.hsi-ui-listbox-option.current.keyboard-current:not(.grouped-option):last-child,.hsi-ui-listbox-group-container:last-child .hsi-ui-listbox-option.current.keyboard-current:last-child{margin-bottom:var(--hsi-ui-listbox-padding-bottom);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius)}.hsi-ui-listbox-option:hover{background:var(--hsi-ui-listbox-option-hover-background);border-radius:var(--hsi-ui-listbox-option-hover-border-radius)}.hsi-ui-listbox-option.selected{background:var(--hsi-ui-listbox-option-selected-background);border-radius:var(--hsi-ui-listbox-option-selected-border-radius)}.hsi-ui-listbox-option.disabled{color:var(--hsi-ui-listbox-option-disabled-color)}.hsi-ui-listbox-option.current.keyboard-current{background:var(--hsi-ui-listbox-option-current-background);color:var(--hsi-ui-listbox-option-current-color);border-radius:var(--hsi-ui-listbox-option-current-border-radius)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
699
695
|
}
|
|
700
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
696
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ListboxComponent, decorators: [{
|
|
701
697
|
type: Component,
|
|
702
698
|
args: [{ selector: 'hsi-ui-listbox', imports: [CommonModule], providers: [
|
|
703
699
|
ListboxFilteringService,
|
|
@@ -705,8 +701,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
705
701
|
ActiveIndexService,
|
|
706
702
|
], host: {
|
|
707
703
|
class: 'hsi-ui-listbox-component',
|
|
708
|
-
}, template: "<div\n #scrollableContent\n role=\"listbox\"\n tabindex=\"-1\"\n [id]=\"service.id + '-listbox'\"\n class=\"hsi-ui-listbox\"\n [class.open]=\"service.isOpen$ | async\"\n [style.--hsi-ui-listbox-max-height.px]=\"maxHeight\"\n [attr.aria-labelledby]=\"\n (service.label$ | async) ? service.comboboxLabelId : label?.id\n \"\n [attr.aria-multiselectable]=\"isMultiSelect\"\n>\n <ng-container\n *ngTemplateOutlet=\"\n label?.labelContent || nullContent;\n context: {
|
|
709
|
-
}],
|
|
704
|
+
}, template: "<div\n #scrollableContent\n role=\"listbox\"\n tabindex=\"-1\"\n [id]=\"service.id + '-listbox'\"\n class=\"hsi-ui-listbox\"\n [class.open]=\"service.isOpen$ | async\"\n [style.--hsi-ui-listbox-max-height.px]=\"maxHeight\"\n [attr.aria-labelledby]=\"\n (service.label$ | async) ? service.comboboxLabelId : label?.id\n \"\n [attr.aria-multiselectable]=\"isMultiSelect\"\n>\n <ng-container\n *ngTemplateOutlet=\"\n label?.labelContent || nullContent;\n context: { wrapperHasId: false }\n \"\n ></ng-container>\n @if ((service.groups$ | async)?.length > 0) {\n <ng-container *ngTemplateOutlet=\"groupedOptions\"></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"options\"></ng-container>\n }\n</div>\n\n<ng-template #options>\n @for (\n option of service.allOptions$ | async;\n track option.id;\n let i = $index\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n optionTemplate;\n context: {\n $implicit: option,\n index: i,\n groupIndex: null,\n }\n \"\n ></ng-container>\n }\n</ng-template>\n\n<ng-template #groupedOptions>\n @for (group of service.groups$ | async; track $index; let i = $index) {\n <div class=\"hsi-ui-listbox-group-container\">\n <div\n role=\"group\"\n tabIndex=\"-1\"\n class=\"hsi-ui-listbox-group\"\n [ngClass]=\"'listbox-group-' + i\"\n [attr.aria-labelledby]=\"group.label?.id\"\n >\n @if (group.label) {\n <div\n role=\"presentation\"\n [id]=\"group.label?.id\"\n class=\"hsi-ui-listbox-group-label\"\n [ngClass]=\"'hsi-ui-listbox-group-' + i + '-label'\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n group.label?.labelContent || nullContent;\n context: { wrapperHasId: true }\n \"\n ></ng-container>\n </div>\n }\n @for (\n option of group.options$ | async;\n track option.id;\n let j = $index\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n optionTemplate;\n context: {\n $implicit: option,\n index: j,\n groupIndex: i,\n }\n \"\n ></ng-container>\n }\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template\n #optionTemplate\n let-option\n let-index=\"index\"\n let-groupIndex=\"groupIndex\"\n>\n <div\n role=\"option\"\n tabindex=\"-1\"\n [id]=\"\n service.id +\n '-listbox-option-' +\n (groupIndex !== null\n ? getOptionIndexFromGroups(groupIndex, index)\n : index)\n \"\n class=\"hsi-ui-listbox-option\"\n [class.grouped-option]=\"groupIndex !== null\"\n [ngClass]=\"\n groupIndex !== null\n ? 'hsi-ui-listbox-option-' + getOptionIndexFromGroups(groupIndex, index)\n : 'hsi-ui-listbox-option-' + index\n \"\n [class.current]=\"\n (activeIndex.activeIndex$ | async) ===\n (groupIndex !== null\n ? getOptionIndexFromGroups(groupIndex, index)\n : index) && (option.disabled$ | async) !== true\n \"\n [class.disabled]=\"option.disabled$ | async\"\n [class.keyboard-current]=\"\n (service.isKeyboardEvent$ | async) &&\n (activeIndex.activeIndex$ | async) ===\n (groupIndex !== null\n ? getOptionIndexFromGroups(groupIndex, index)\n : index) &&\n (option.disabled$ | async) !== true\n \"\n [class.multi]=\"isMultiSelect\"\n [class.selected]=\"option.selected$ | async\"\n [attr.aria-checked]=\"isMultiSelect ? (option.selected$ | async) : null\"\n [attr.aria-selected]=\"!isMultiSelect ? (option.selected$ | async) : null\"\n [attr.aria-disabled]=\"option.disabled$ | async\"\n data-cy=\"listbox-option\"\n (click)=\"handleOptionClick($event, index, groupIndex)\"\n (mousedown)=\"handleOptionMousedown()\"\n >\n <ng-container *ngTemplateOutlet=\"option.template\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #nullContent></ng-template>\n", styles: [":host{position:absolute;top:100%;left:0;width:100%;z-index:var(--hsi-ui-listbox-z-index);background:var(--hsi-ui-listbox-background);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius)}:host ::-webkit-scrollbar-track{background:transparent}.hsi-ui-listbox{padding-top:var(--hsi-ui-listbox-padding-top);background:var(--hsi-ui-listbox-background);border-left:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-right:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-bottom:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius);max-height:var(--hsi-ui-listbox-max-height);overflow-y:auto}.hsi-ui-listbox:not(.open){display:none}.hsi-ui-listbox-option{display:block;cursor:pointer;margin-left:var(--hsi-ui-listbox-padding-left);margin-right:var(--hsi-ui-listbox-padding-right)}.hsi-ui-listbox-option:not(.grouped-option):last-child,.hsi-ui-listbox-group-container:last-child .hsi-ui-listbox-option:last-child,.hsi-ui-listbox-option.current.keyboard-current:not(.grouped-option):last-child,.hsi-ui-listbox-group-container:last-child .hsi-ui-listbox-option.current.keyboard-current:last-child{margin-bottom:var(--hsi-ui-listbox-padding-bottom);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius)}.hsi-ui-listbox-option:hover{background:var(--hsi-ui-listbox-option-hover-background);border-radius:var(--hsi-ui-listbox-option-hover-border-radius)}.hsi-ui-listbox-option.selected{background:var(--hsi-ui-listbox-option-selected-background);border-radius:var(--hsi-ui-listbox-option-selected-border-radius)}.hsi-ui-listbox-option.disabled{color:var(--hsi-ui-listbox-option-disabled-color)}.hsi-ui-listbox-option.current.keyboard-current{background:var(--hsi-ui-listbox-option-current-background);color:var(--hsi-ui-listbox-option-current-color);border-radius:var(--hsi-ui-listbox-option-current-border-radius)}\n"] }]
|
|
705
|
+
}], propDecorators: { ngFormControl: [{
|
|
710
706
|
type: Input
|
|
711
707
|
}], findsOptionOnTyping: [{
|
|
712
708
|
type: Input
|
|
@@ -731,11 +727,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
731
727
|
}] } });
|
|
732
728
|
|
|
733
729
|
class SelectAllListboxOptionComponent extends ListboxOptionComponent {
|
|
734
|
-
constructor(
|
|
735
|
-
super(
|
|
736
|
-
this.listboxComponent = listboxComponent;
|
|
737
|
-
this.destroyRef = destroyRef;
|
|
730
|
+
constructor() {
|
|
731
|
+
super();
|
|
738
732
|
this.boxDisplayLabel = 'Select all';
|
|
733
|
+
this.service = inject(ComboboxService);
|
|
734
|
+
this.listboxComponent = inject(ListboxComponent);
|
|
735
|
+
this.destroyRef = inject(DestroyRef);
|
|
739
736
|
}
|
|
740
737
|
// select all will not respond to changes in selected or disabled properties
|
|
741
738
|
// users should not attempt to change these properties
|
|
@@ -790,15 +787,15 @@ class SelectAllListboxOptionComponent extends ListboxOptionComponent {
|
|
|
790
787
|
this.controlledOptions.forEach((option) => option.deselect());
|
|
791
788
|
}
|
|
792
789
|
}
|
|
793
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
794
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
790
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectAllListboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
791
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: SelectAllListboxOptionComponent, isStandalone: true, selector: "hsi-ui-select-all-listbox-option", inputs: { boxDisplayLabel: "boxDisplayLabel" }, providers: [
|
|
795
792
|
{
|
|
796
793
|
provide: ListboxOptionComponent,
|
|
797
794
|
useExisting: forwardRef(() => SelectAllListboxOptionComponent),
|
|
798
795
|
},
|
|
799
796
|
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #option>\n <div class=\"hsi-ui-listbox-option-container\">\n @if (isSelected()) {\n <ng-container *ngTemplateOutlet=\"selectedIcon\"></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"unselectedIcon\"></ng-container>\n }\n <div\n #label\n class=\"hsi-ui-listbox-option-label\"\n [attr.aria-label]=\"ariaLabel\"\n ><ng-content></ng-content\n ></div>\n </div>\n</ng-template>\n\n<ng-template #selectedIcon\n ><ng-content select=\"[selectedIcon]\"></ng-content>\n</ng-template>\n<ng-template #unselectedIcon\n ><ng-content select=\"[unselectedIcon]\"></ng-content>\n</ng-template>\n", styles: [".hsi-ui-listbox-option-container{display:var(--hsi-ui-listbox-option-container-display);flex-direction:var(--hsi-ui-listbox-option-container-flex-direction);align-items:var(--hsi-ui-listbox-option-container-align-items);cursor:var(--hsi-ui-listbox-option-cursor);padding:var(--hsi-ui-listbox-option-container-padding);gap:var(--hsi-ui-listbox-option-container-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
800
797
|
}
|
|
801
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectAllListboxOptionComponent, decorators: [{
|
|
802
799
|
type: Component,
|
|
803
800
|
args: [{ selector: 'hsi-ui-select-all-listbox-option', imports: [CommonModule], providers: [
|
|
804
801
|
{
|
|
@@ -806,7 +803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
806
803
|
useExisting: forwardRef(() => SelectAllListboxOptionComponent),
|
|
807
804
|
},
|
|
808
805
|
], template: "<ng-template #option>\n <div class=\"hsi-ui-listbox-option-container\">\n @if (isSelected()) {\n <ng-container *ngTemplateOutlet=\"selectedIcon\"></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"unselectedIcon\"></ng-container>\n }\n <div\n #label\n class=\"hsi-ui-listbox-option-label\"\n [attr.aria-label]=\"ariaLabel\"\n ><ng-content></ng-content\n ></div>\n </div>\n</ng-template>\n\n<ng-template #selectedIcon\n ><ng-content select=\"[selectedIcon]\"></ng-content>\n</ng-template>\n<ng-template #unselectedIcon\n ><ng-content select=\"[unselectedIcon]\"></ng-content>\n</ng-template>\n", styles: [".hsi-ui-listbox-option-container{display:var(--hsi-ui-listbox-option-container-display);flex-direction:var(--hsi-ui-listbox-option-container-flex-direction);align-items:var(--hsi-ui-listbox-option-container-align-items);cursor:var(--hsi-ui-listbox-option-cursor);padding:var(--hsi-ui-listbox-option-container-padding);gap:var(--hsi-ui-listbox-option-container-gap)}\n"] }]
|
|
809
|
-
}], ctorParameters: () => [
|
|
806
|
+
}], ctorParameters: () => [], propDecorators: { boxDisplayLabel: [{
|
|
810
807
|
type: Input
|
|
811
808
|
}] } });
|
|
812
809
|
|
|
@@ -868,8 +865,7 @@ var AutoComplete;
|
|
|
868
865
|
AutoComplete["inline"] = "inline";
|
|
869
866
|
})(AutoComplete || (AutoComplete = {}));
|
|
870
867
|
class ComboboxService {
|
|
871
|
-
constructor(
|
|
872
|
-
this.platform = platform;
|
|
868
|
+
constructor() {
|
|
873
869
|
this.id = `combobox-${nextUniqueId$1++}`;
|
|
874
870
|
this.scrollContainerId = `${this.id}-scroll-container`;
|
|
875
871
|
this.comboboxLabelId = `${this.id}-label`;
|
|
@@ -899,6 +895,7 @@ class ComboboxService {
|
|
|
899
895
|
this.textboxBlur$ = this.textboxBlur.asObservable();
|
|
900
896
|
this.touched = new BehaviorSubject(false);
|
|
901
897
|
this.touched$ = this.touched.asObservable();
|
|
898
|
+
this.platform = inject(Platform);
|
|
902
899
|
}
|
|
903
900
|
get isOpen() {
|
|
904
901
|
return this._isOpen.value;
|
|
@@ -983,29 +980,29 @@ class ComboboxService {
|
|
|
983
980
|
this.textboxBlur.complete();
|
|
984
981
|
this.touched.complete();
|
|
985
982
|
}
|
|
986
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
987
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
983
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
984
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxService }); }
|
|
988
985
|
}
|
|
989
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
986
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxService, decorators: [{
|
|
990
987
|
type: Injectable
|
|
991
|
-
}]
|
|
988
|
+
}] });
|
|
992
989
|
|
|
993
990
|
class ComboboxLabelComponent {
|
|
994
|
-
constructor(
|
|
995
|
-
this.service =
|
|
991
|
+
constructor() {
|
|
992
|
+
this.service = inject(ComboboxService);
|
|
996
993
|
}
|
|
997
994
|
ngAfterViewInit() {
|
|
998
995
|
setTimeout(() => {
|
|
999
996
|
this.service.setLabel(this);
|
|
1000
997
|
}, 0);
|
|
1001
998
|
}
|
|
1002
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1003
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
999
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1000
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ComboboxLabelComponent, isStandalone: true, selector: "hsi-ui-combobox-label", viewQueries: [{ propertyName: "labelContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `<ng-template
|
|
1004
1001
|
><p class="combobox-label" [id]="service.comboboxLabelId"
|
|
1005
1002
|
><ng-content></ng-content></p
|
|
1006
1003
|
></ng-template>`, isInline: true }); }
|
|
1007
1004
|
}
|
|
1008
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxLabelComponent, decorators: [{
|
|
1009
1006
|
type: Component,
|
|
1010
1007
|
args: [{
|
|
1011
1008
|
selector: 'hsi-ui-combobox-label',
|
|
@@ -1014,19 +1011,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
1014
1011
|
><ng-content></ng-content></p
|
|
1015
1012
|
></ng-template>`,
|
|
1016
1013
|
}]
|
|
1017
|
-
}],
|
|
1014
|
+
}], propDecorators: { labelContent: [{
|
|
1018
1015
|
type: ViewChild,
|
|
1019
1016
|
args: [TemplateRef]
|
|
1020
1017
|
}] } });
|
|
1021
1018
|
|
|
1022
1019
|
class ComboboxComponent {
|
|
1023
|
-
constructor(
|
|
1024
|
-
this.service =
|
|
1025
|
-
this.platform =
|
|
1026
|
-
this.zone =
|
|
1027
|
-
this.document =
|
|
1028
|
-
this.elRef =
|
|
1029
|
-
this.destroyRef =
|
|
1020
|
+
constructor() {
|
|
1021
|
+
this.service = inject(ComboboxService);
|
|
1022
|
+
this.platform = inject(Platform);
|
|
1023
|
+
this.zone = inject(NgZone);
|
|
1024
|
+
this.document = inject(DOCUMENT);
|
|
1025
|
+
this.elRef = inject(ElementRef);
|
|
1026
|
+
this.destroyRef = inject(DestroyRef);
|
|
1030
1027
|
}
|
|
1031
1028
|
ngOnInit() {
|
|
1032
1029
|
this.handleOutsideClick();
|
|
@@ -1049,16 +1046,13 @@ class ComboboxComponent {
|
|
|
1049
1046
|
});
|
|
1050
1047
|
});
|
|
1051
1048
|
}
|
|
1052
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1053
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1049
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1050
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ComboboxComponent, isStandalone: true, selector: "hsi-ui-combobox", host: { classAttribute: "hsi-ui-combobox" }, providers: [ComboboxService], queries: [{ propertyName: "labelComponent", first: true, predicate: ComboboxLabelComponent, descendants: true }], ngImport: i0, template: "@if (service.label$ | async; as label) {\n <ng-template [ngTemplateOutlet]=\"label.labelContent\"></ng-template>\n}\n<ng-content></ng-content>\n", styles: ["html{--hsi-ui-combobox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-combobox-border-color: var(--hsi-adk-color-muted-primary-40, gray);--hsi-ui-combobox-border-style: solid;--hsi-ui-combobox-border-width: 1px;--hsi-ui-combobox-hover-border-color: var(--hsi-adk-color-muted-primary-20, darkgray);--hsi-ui-combobox-hover-cursor: pointer;--hsi-ui-combobox-max-width: none;--hsi-ui-textbox-display: flex;--hsi-ui-textbox-justify-content: space-between;--hsi-ui-textbox-align-items: center;--hsi-ui-textbox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-textbox-border-bottom-open: 1px solid var(--hsi-adk-color-muted-primary-80, gray);--hsi-ui-textbox-padding: .75rem;--hsi-ui-textbox-label-text-overflow: ellipsis;--hsi-ui-textbox-label-white-space: nowrap;--hsi-ui-textbox-label-overflow: hidden;--hsi-ui-textbox-label-max-width: calc(var(--hsi-ui-combobox-max-width) - 1rem);--hsi-ui-textbox-icon-display: flex;--hsi-ui-textbox-icon-flex-direction: column;--hsi-ui-textbox-icon-justify-content: center;--hsi-ui-textbox-transition-duration: .15s;--hsi-ui-editable-textbox-padding: .5rem;--hsi-ui-editable-textbox-input-border: none;--hsi-ui-editable-textbox-input-border-bottom: 1px solid transparent;--hsi-ui-editable-textbox-input-border-radius: 0;--hsi-ui-editable-textbox-input-width: 100%;--hsi-ui-editable-textbox-input-padding: .25rem .5rem;--hsi-ui-editable-textbox-input-hover-border: 0;--hsi-ui-editable-textbox-input-hover-border-bottom: 1px solid var(--hsi-adk-color-muted-primary-70, gray);--hsi-ui-editable-textbox-input-hover-background: var(--hsi-adk-color-muted-primary-98, #f2f2f2);--hsi-ui-editable-textbox-input-hover-outline: none;--hsi-ui-listbox-z-index: 100;--hsi-ui-listbox-max-height: 300px;--hsi-ui-listbox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-listbox-padding-top: .25rem;--hsi-ui-listbox-padding-right: .25rem;--hsi-ui-listbox-padding-bottom: .25rem;--hsi-ui-listbox-padding-left: .25rem;--hsi-ui-listbox-label-font-size: .9em;--hsi-ui-listbox-label-font-weight: var(--hsi-adk-font-weight-semibold, 600);--hsi-ui-listbox-label-text-transform: uppercase;--hsi-ui-listbox-label-padding: .25rem var(--hsi-ui-listbox-option-container-padding);--hsi-ui-listbox-label-margin-right: var(--hsi-ui-listbox-option-margin-right);--hsi-ui-listbox-option-hover-background: var(--hsi-adk-color-muted-primary-95, #f2f2f2);--hsi-ui-listbox-option-hover-border-radius: 0;--hsi-ui-listbox-option-selected-background: var(--hsi-adk-color-muted-primary-90, lightgray);--hsi-ui-listbox-option-selected-border-radius: 0;--hsi-ui-listbox-option-disabled-color: var(--hsi-adk-color-muted-primary-80, lightgray);--hsi-ui-listbox-option-current-background: var(--hsi-adk-color-muted-primary-40, darkgray);--hsi-ui-listbox-option-current-color: var(--hsi-adk-color-primary-100, white);--hsi-ui-listbox-option-current-border-radius: 0;--hsi-ui-listbox-option-label-padding: .75rem;--hsi-ui-listbox-option-cursor: pointer;--hsi-ui-listbox-option-margin-right: .25rem;--hsi-ui-listbox-option-container-display: flex;--hsi-ui-listbox-option-container-flex-direction: row;--hsi-ui-listbox-option-container-align-items: center;--hsi-ui-listbox-option-container-padding: .5rem;--hsi-ui-listbox-option-container-gap: .5rem}.hsi-ui-combobox{display:block;position:relative;max-width:var(--hsi-ui-combobox-max-width)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1054
1051
|
}
|
|
1055
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1052
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
1056
1053
|
type: Component,
|
|
1057
1054
|
args: [{ selector: 'hsi-ui-combobox', imports: [CommonModule, AsyncPipe], providers: [ComboboxService], encapsulation: ViewEncapsulation.None, host: { class: 'hsi-ui-combobox' }, template: "@if (service.label$ | async; as label) {\n <ng-template [ngTemplateOutlet]=\"label.labelContent\"></ng-template>\n}\n<ng-content></ng-content>\n", styles: ["html{--hsi-ui-combobox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-combobox-border-color: var(--hsi-adk-color-muted-primary-40, gray);--hsi-ui-combobox-border-style: solid;--hsi-ui-combobox-border-width: 1px;--hsi-ui-combobox-hover-border-color: var(--hsi-adk-color-muted-primary-20, darkgray);--hsi-ui-combobox-hover-cursor: pointer;--hsi-ui-combobox-max-width: none;--hsi-ui-textbox-display: flex;--hsi-ui-textbox-justify-content: space-between;--hsi-ui-textbox-align-items: center;--hsi-ui-textbox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-textbox-border-bottom-open: 1px solid var(--hsi-adk-color-muted-primary-80, gray);--hsi-ui-textbox-padding: .75rem;--hsi-ui-textbox-label-text-overflow: ellipsis;--hsi-ui-textbox-label-white-space: nowrap;--hsi-ui-textbox-label-overflow: hidden;--hsi-ui-textbox-label-max-width: calc(var(--hsi-ui-combobox-max-width) - 1rem);--hsi-ui-textbox-icon-display: flex;--hsi-ui-textbox-icon-flex-direction: column;--hsi-ui-textbox-icon-justify-content: center;--hsi-ui-textbox-transition-duration: .15s;--hsi-ui-editable-textbox-padding: .5rem;--hsi-ui-editable-textbox-input-border: none;--hsi-ui-editable-textbox-input-border-bottom: 1px solid transparent;--hsi-ui-editable-textbox-input-border-radius: 0;--hsi-ui-editable-textbox-input-width: 100%;--hsi-ui-editable-textbox-input-padding: .25rem .5rem;--hsi-ui-editable-textbox-input-hover-border: 0;--hsi-ui-editable-textbox-input-hover-border-bottom: 1px solid var(--hsi-adk-color-muted-primary-70, gray);--hsi-ui-editable-textbox-input-hover-background: var(--hsi-adk-color-muted-primary-98, #f2f2f2);--hsi-ui-editable-textbox-input-hover-outline: none;--hsi-ui-listbox-z-index: 100;--hsi-ui-listbox-max-height: 300px;--hsi-ui-listbox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-listbox-padding-top: .25rem;--hsi-ui-listbox-padding-right: .25rem;--hsi-ui-listbox-padding-bottom: .25rem;--hsi-ui-listbox-padding-left: .25rem;--hsi-ui-listbox-label-font-size: .9em;--hsi-ui-listbox-label-font-weight: var(--hsi-adk-font-weight-semibold, 600);--hsi-ui-listbox-label-text-transform: uppercase;--hsi-ui-listbox-label-padding: .25rem var(--hsi-ui-listbox-option-container-padding);--hsi-ui-listbox-label-margin-right: var(--hsi-ui-listbox-option-margin-right);--hsi-ui-listbox-option-hover-background: var(--hsi-adk-color-muted-primary-95, #f2f2f2);--hsi-ui-listbox-option-hover-border-radius: 0;--hsi-ui-listbox-option-selected-background: var(--hsi-adk-color-muted-primary-90, lightgray);--hsi-ui-listbox-option-selected-border-radius: 0;--hsi-ui-listbox-option-disabled-color: var(--hsi-adk-color-muted-primary-80, lightgray);--hsi-ui-listbox-option-current-background: var(--hsi-adk-color-muted-primary-40, darkgray);--hsi-ui-listbox-option-current-color: var(--hsi-adk-color-primary-100, white);--hsi-ui-listbox-option-current-border-radius: 0;--hsi-ui-listbox-option-label-padding: .75rem;--hsi-ui-listbox-option-cursor: pointer;--hsi-ui-listbox-option-margin-right: .25rem;--hsi-ui-listbox-option-container-display: flex;--hsi-ui-listbox-option-container-flex-direction: row;--hsi-ui-listbox-option-container-align-items: center;--hsi-ui-listbox-option-container-padding: .5rem;--hsi-ui-listbox-option-container-gap: .5rem}.hsi-ui-combobox{display:block;position:relative;max-width:var(--hsi-ui-combobox-max-width)}\n"] }]
|
|
1058
|
-
}],
|
|
1059
|
-
type: Inject,
|
|
1060
|
-
args: [DOCUMENT]
|
|
1061
|
-
}] }, { type: i0.ElementRef }, { type: i0.DestroyRef }], propDecorators: { labelComponent: [{
|
|
1055
|
+
}], propDecorators: { labelComponent: [{
|
|
1062
1056
|
type: ContentChild,
|
|
1063
1057
|
args: [ComboboxLabelComponent]
|
|
1064
1058
|
}] } });
|
|
@@ -1315,14 +1309,14 @@ class TextboxComponent {
|
|
|
1315
1309
|
}
|
|
1316
1310
|
return label;
|
|
1317
1311
|
}
|
|
1318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1319
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1313
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TextboxComponent, isStandalone: true, selector: "hsi-ui-textbox", inputs: { ariaLabel: "ariaLabel", selectedCountLabel: "selectedCountLabel", customLabel: "customLabel", dynamicLabel: "dynamicLabel", findsOptionOnTyping: "findsOptionOnTyping" }, host: { classAttribute: "hsi-ui-textbox" }, viewQueries: [{ propertyName: "box", first: true, predicate: ["box"], descendants: true }, { propertyName: "boxIcon", first: true, predicate: ["boxIcon"], descendants: true }], ngImport: i0, template: "<div\n #box\n class=\"hsi-ui-textbox-container\"\n role=\"combobox\"\n tabindex=\"0\"\n [id]=\"service.id + '-textbox'\"\n data-cy=\"combobox-textbox\"\n (click)=\"handleClick()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\"\n [attr.aria-label]=\"\n (service.label$ | async) === null\n ? ariaLabel || service.isMultiSelect\n ? 'Select options'\n : 'Select an option'\n : null\n \"\n [attr.aria-labelledby]=\"\n (service.label$ | async) !== null ? service.comboboxLabelId : null\n \"\n [attr.aria-activedescendant]=\"service.activeDescendant$ | async\"\n [attr.aria-expanded]=\"service.isOpen$ | async\"\n [attr.aria-controls]=\"service.id + '-listbox'\"\n aria-haspopup=\"listbox\"\n [class.open]=\"service.isOpen$ | async\"\n >@if (dynamicLabel && !!(label$ | async)) {\n <div\n class=\"hsi-ui-textbox-label\"\n data-cy=\"textbox-label\"\n >{{ label$ | async }}</div>\n } @else {\n <div class=\"hsi-ui-textbox-label\" data-cy=\"textbox-label\">\n <ng-content select=\"[boxLabel]\"></ng-content>\n </div>\n }\n <div\n #boxIcon\n class=\"hsi-ui-textbox-icon\"\n [class.open]=\"service.isOpen$ | async\"\n ><ng-content select=\"[boxIcon]\"></ng-content></div\n></div>\n", styles: [".hsi-ui-textbox-container{display:var(--hsi-ui-textbox-display);justify-content:var(--hsi-ui-textbox-justify-content);align-items:var(--hsi-ui-textbox-align-items);background:var(--hsi-ui-textbox-background);border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);padding:var(--hsi-ui-textbox-padding);border-radius:var(--hsi-ui-combobox-border-radius);transition:border var(--hsi-ui-textbox-transition-duration) ease-in-out}.hsi-ui-textbox-container:hover{border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-hover-border-color);cursor:var(--hsi-ui-combobox-hover-cursor)}.hsi-ui-textbox-container.open{border-bottom:var(--hsi-ui-textbox-border-bottom-open);border-bottom-left-radius:0;border-bottom-right-radius:0}.hsi-ui-textbox-label{text-overflow:var(--hsi-ui-textbox-label-text-overflow);white-space:var(--hsi-ui-textbox-label-white-space);overflow:var(--hsi-ui-textbox-label-overflow);max-width:var(--hsi-ui-textbox-label-max-width)}.hsi-ui-textbox-icon{display:var(--hsi-ui-textbox-icon-display);flex-direction:var(--hsi-ui-textbox-icon-flex-direction);justify-content:var(--hsi-ui-textbox-icon-justify-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
1320
1314
|
}
|
|
1321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextboxComponent, decorators: [{
|
|
1322
1316
|
type: Component,
|
|
1323
1317
|
args: [{ selector: 'hsi-ui-textbox', imports: [CommonModule], host: {
|
|
1324
1318
|
class: 'hsi-ui-textbox',
|
|
1325
|
-
}, template: "<div\n #box\n class=\"hsi-ui-textbox-container\"\n role=\"combobox\"\n tabindex=\"0\"\n [id]=\"service.id + '-textbox'\"\n data-cy=\"combobox-textbox\"\n (click)=\"handleClick()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\"\n [attr.aria-label]=\"\n (service.label$ | async) === null\n ? ariaLabel || service.isMultiSelect\n ? 'Select options'\n : 'Select an option'\n : null\n \"\n [attr.aria-labelledby]=\"\n (service.label$ | async) !== null ? service.comboboxLabelId : null\n \"\n [attr.aria-activedescendant]=\"service.activeDescendant$ | async\"\n [attr.aria-expanded]=\"service.isOpen$ | async\"\n [attr.aria-controls]=\"service.id + '-listbox'\"\n aria-haspopup=\"listbox\"\n [class.open]=\"service.isOpen$ | async\"\n
|
|
1319
|
+
}, template: "<div\n #box\n class=\"hsi-ui-textbox-container\"\n role=\"combobox\"\n tabindex=\"0\"\n [id]=\"service.id + '-textbox'\"\n data-cy=\"combobox-textbox\"\n (click)=\"handleClick()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\"\n [attr.aria-label]=\"\n (service.label$ | async) === null\n ? ariaLabel || service.isMultiSelect\n ? 'Select options'\n : 'Select an option'\n : null\n \"\n [attr.aria-labelledby]=\"\n (service.label$ | async) !== null ? service.comboboxLabelId : null\n \"\n [attr.aria-activedescendant]=\"service.activeDescendant$ | async\"\n [attr.aria-expanded]=\"service.isOpen$ | async\"\n [attr.aria-controls]=\"service.id + '-listbox'\"\n aria-haspopup=\"listbox\"\n [class.open]=\"service.isOpen$ | async\"\n >@if (dynamicLabel && !!(label$ | async)) {\n <div\n class=\"hsi-ui-textbox-label\"\n data-cy=\"textbox-label\"\n >{{ label$ | async }}</div>\n } @else {\n <div class=\"hsi-ui-textbox-label\" data-cy=\"textbox-label\">\n <ng-content select=\"[boxLabel]\"></ng-content>\n </div>\n }\n <div\n #boxIcon\n class=\"hsi-ui-textbox-icon\"\n [class.open]=\"service.isOpen$ | async\"\n ><ng-content select=\"[boxIcon]\"></ng-content></div\n></div>\n", styles: [".hsi-ui-textbox-container{display:var(--hsi-ui-textbox-display);justify-content:var(--hsi-ui-textbox-justify-content);align-items:var(--hsi-ui-textbox-align-items);background:var(--hsi-ui-textbox-background);border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);padding:var(--hsi-ui-textbox-padding);border-radius:var(--hsi-ui-combobox-border-radius);transition:border var(--hsi-ui-textbox-transition-duration) ease-in-out}.hsi-ui-textbox-container:hover{border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-hover-border-color);cursor:var(--hsi-ui-combobox-hover-cursor)}.hsi-ui-textbox-container.open{border-bottom:var(--hsi-ui-textbox-border-bottom-open);border-bottom-left-radius:0;border-bottom-right-radius:0}.hsi-ui-textbox-label{text-overflow:var(--hsi-ui-textbox-label-text-overflow);white-space:var(--hsi-ui-textbox-label-white-space);overflow:var(--hsi-ui-textbox-label-overflow);max-width:var(--hsi-ui-textbox-label-max-width)}.hsi-ui-textbox-icon{display:var(--hsi-ui-textbox-icon-display);flex-direction:var(--hsi-ui-textbox-icon-flex-direction);justify-content:var(--hsi-ui-textbox-icon-justify-content)}\n"] }]
|
|
1326
1320
|
}], propDecorators: { ariaLabel: [{
|
|
1327
1321
|
type: Input
|
|
1328
1322
|
}], selectedCountLabel: [{
|
|
@@ -1350,6 +1344,7 @@ class EditableTextboxComponent extends TextboxComponent {
|
|
|
1350
1344
|
this.initialValue = '';
|
|
1351
1345
|
this.inputType = 'text';
|
|
1352
1346
|
this.placeholder = '';
|
|
1347
|
+
this.clearOnClick = false;
|
|
1353
1348
|
this.valueChanges = new EventEmitter();
|
|
1354
1349
|
this.moveFocusToTextboxKeys = ['RightArrow', 'LeftArrow', 'Home', 'End'];
|
|
1355
1350
|
this.value = new BehaviorSubject('');
|
|
@@ -1418,6 +1413,9 @@ class EditableTextboxComponent extends TextboxComponent {
|
|
|
1418
1413
|
this.service.closeListbox();
|
|
1419
1414
|
}
|
|
1420
1415
|
else {
|
|
1416
|
+
if (this.clearOnClick) {
|
|
1417
|
+
this.setAndEmitValue('');
|
|
1418
|
+
}
|
|
1421
1419
|
this.service.openListbox();
|
|
1422
1420
|
if (this.autoSelect) {
|
|
1423
1421
|
const inputValue = this.inputElRef.nativeElement.value;
|
|
@@ -1559,10 +1557,10 @@ class EditableTextboxComponent extends TextboxComponent {
|
|
|
1559
1557
|
isPrintableCharacter(str) {
|
|
1560
1558
|
return str.length === 1 && str.match(/\S| /);
|
|
1561
1559
|
}
|
|
1562
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1563
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1560
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EditableTextboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1561
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EditableTextboxComponent, isStandalone: true, selector: "hsi-ui-editable-textbox", inputs: { autoSelect: "autoSelect", autoSelectTrigger: "autoSelectTrigger", displaySelected: "displaySelected", initialValue: "initialValue", inputType: "inputType", ngFormControl: "ngFormControl", placeholder: "placeholder", clearOnClick: "clearOnClick" }, outputs: { valueChanges: "valueChanges" }, host: { classAttribute: "hsi-ui-editable-textbox" }, viewQueries: [{ propertyName: "inputElRef", first: true, predicate: ["box"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"hsi-ui-editable-textbox-container\"\n [class.open]=\"service.isOpen$ | async\"\n #textInputTemplate\n>\n <input\n #box\n class=\"hsi-ui-editable-textbox-input\"\n [attr.type]=\"inputType\"\n role=\"combobox\"\n tabindex=\"0\"\n [id]=\"service.id + '-textbox'\"\n (click)=\"handleClick()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\"\n autocomplete=\"off\"\n [attr.aria-label]=\"\n (service.label$ | async) === null\n ? ariaLabel || placeholder || service.isMultiSelect\n ? 'Search and select options'\n : 'Search and select an option'\n : null\n \"\n [attr.aria-labelledby]=\"\n (service.label$ | async) !== null ? service.comboboxLabelId : null\n \"\n [attr.aria-activedescendant]=\"service.activeDescendant$ | async\"\n [attr.aria-expanded]=\"service.isOpen$ | async\"\n [attr.aria-autocomplete]=\"service.autoComplete\"\n [attr.aria-controls]=\"service.id + '-listbox'\"\n aria-haspopup=\"listbox\"\n data-cy=\"editable-textbox-input\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"value$ | async\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n <div\n class=\"hsi-ui-textbox-icon hsi-ui-editable-textbox-icon\"\n [class.open]=\"service.isOpen$ | async\"\n >\n <ng-content select=\"[boxIcon]\"></ng-content\n ></div>\n</div>\n", styles: [".hsi-ui-editable-textbox-container{display:var(--hsi-ui-textbox-display);justify-content:var(--hsi-ui-textbox-justify-content);align-items:var(--hsi-ui-textbox-align-items);background:var(--hsi-ui-textbox-background);border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);padding:var(--hsi-ui-editable-textbox-padding);border-radius:var(--hsi-ui-combobox-border-radius);transition:border var(--hsi-ui-textbox-transition-duration) ease-in-out}.hsi-ui-editable-textbox-container.open{border-bottom:var(--hsi-ui-textbox-border-bottom-open);border-bottom-left-radius:0;border-bottom-right-radius:0}.hsi-ui-editable-textbox-input{border:var(--hsi-ui-editable-textbox-input-border);border-bottom:var(--hsi-ui-editable-textbox-input-border-bottom);width:var(--hsi-ui-editable-textbox-input-width);padding:var(--hsi-ui-editable-textbox-input-padding);border-radius:var(--hsi-ui-editable-textbox-input-border-radius)}.hsi-ui-editable-textbox-input:hover,.hsi-ui-editable-textbox-input:focus{border:var(--hsi-ui-editable-textbox-input-hover-border);border-bottom:var(--hsi-ui-editable-textbox-input-hover-border-bottom);background:var(--hsi-ui-editable-textbox-input-hover-background);outline:var(--hsi-ui-editable-textbox-input-hover-outline)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
1564
1562
|
}
|
|
1565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EditableTextboxComponent, decorators: [{
|
|
1566
1564
|
type: Component,
|
|
1567
1565
|
args: [{ selector: 'hsi-ui-editable-textbox', imports: [CommonModule, FormsModule], host: {
|
|
1568
1566
|
class: 'hsi-ui-editable-textbox',
|
|
@@ -1584,13 +1582,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
1584
1582
|
type: Input
|
|
1585
1583
|
}], placeholder: [{
|
|
1586
1584
|
type: Input
|
|
1585
|
+
}], clearOnClick: [{
|
|
1586
|
+
type: Input
|
|
1587
1587
|
}], valueChanges: [{
|
|
1588
1588
|
type: Output
|
|
1589
1589
|
}] } });
|
|
1590
1590
|
|
|
1591
1591
|
class HsiUiComboboxModule {
|
|
1592
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1593
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1592
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HsiUiComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1593
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: HsiUiComboboxModule, imports: [ComboboxComponent,
|
|
1594
1594
|
ComboboxLabelComponent,
|
|
1595
1595
|
TextboxComponent,
|
|
1596
1596
|
ListboxComponent,
|
|
@@ -1607,7 +1607,7 @@ class HsiUiComboboxModule {
|
|
|
1607
1607
|
ListboxOptionComponent,
|
|
1608
1608
|
EditableTextboxComponent,
|
|
1609
1609
|
SelectAllListboxOptionComponent] }); }
|
|
1610
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1610
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HsiUiComboboxModule, imports: [ComboboxComponent,
|
|
1611
1611
|
TextboxComponent,
|
|
1612
1612
|
ListboxComponent,
|
|
1613
1613
|
ListboxOptionComponent,
|
|
@@ -1615,7 +1615,7 @@ class HsiUiComboboxModule {
|
|
|
1615
1615
|
EditableTextboxComponent,
|
|
1616
1616
|
SelectAllListboxOptionComponent] }); }
|
|
1617
1617
|
}
|
|
1618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HsiUiComboboxModule, decorators: [{
|
|
1619
1619
|
type: NgModule,
|
|
1620
1620
|
args: [{
|
|
1621
1621
|
imports: [
|
|
@@ -1708,10 +1708,10 @@ class HsiUiDirectoryComponent {
|
|
|
1708
1708
|
this.stateChanges.emit(state);
|
|
1709
1709
|
}
|
|
1710
1710
|
}
|
|
1711
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1712
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1711
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HsiUiDirectoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: HsiUiDirectoryComponent, isStandalone: true, selector: "hsi-ui-directory", inputs: { items: "items", level: "level", path: "path", terminalItemsAreSelectable: "terminalItemsAreSelectable", selectionElementRole: "selectionElementRole", selection: "selection" }, outputs: { selectionChanges: "selectionChanges", stateChanges: "stateChanges" }, usesOnChanges: true, ngImport: i0, template: "@for (item of items; track $index) {\n @if (!!item.children && item.children.length > 0) {\n <!-- This is the template for expandable nodes -->\n <div [style.--level]=\"level\">\n <div\n class=\"item expandable\"\n [ngClass]=\"'level-' + level\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"toggleOpen(item.name)\"\n (enter)=\"toggleOpen(item.name)\"\n >\n <p class=\"name\">{{ item.name }}</p>\n @if (open[item.name]) {\n <span aria-hidden=\"true\" class=\"material-symbols-outlined arrow\"\n >expand_more</span\n >\n } @else {\n <span aria-hidden=\"true\" class=\"material-symbols-outlined arrow\"\n >chevron_right</span\n >\n }\n </div>\n <hsi-ui-directory\n [items]=\"item.children\"\n [level]=\"level + 1\"\n [terminalItemsAreSelectable]=\"terminalItemsAreSelectable\"\n [path]=\"\n path.concat(\n level !== 0\n ? '/' + (item.value || item.name)\n : item.value || item.name\n )\n \"\n [class.invisible]=\"!open[item.name]\"\n (stateChanges)=\"setState($event)\"\n [selection]=\"state$ | async\"\n ></hsi-ui-directory>\n </div>\n } @else {\n <!-- This is the template for leaf nodes -->\n @if (terminalItemsAreSelectable) {\n <div\n class=\"item selectable\"\n [ngClass]=\"'level-' + level\"\n [attr.role]=\"selectionElementRole\"\n tabindex=\"0\"\n [style.--level]=\"level\"\n [class.active]=\"\n (state$ | async).activePath ===\n (level > 0 ? path + '/' : '') + (item.value || item.name)\n \"\n (click)=\"selectItem(item)\"\n (enter)=\"selectItem(item)\"\n >\n <p class=\"name\">{{ item.name }}</p>\n </div>\n } @else {\n <div class=\"item\" [style.--level]=\"level\">\n <p class=\"name\">{{ item.name }}</p>\n </div>\n }\n }\n}\n", styles: [".invisible{display:none}.item{display:flex;align-items:center;justify-content:space-between;margin:1px 0;margin-left:calc(var(--level) * .5rem);padding-right:.5rem;padding-top:.25rem;padding-bottom:.25rem}.item.expandable:hover,.item.selectable:hover{cursor:pointer;background-color:var(--hsi-adk-color-muted-primary-95);transition:all .2s}.item.active{background-color:var(--hsi-adk-color-muted-primary-95);color:var(--hsi-adk-color-primary-40)}.arrow{color:var(--hsi-adk-color-muted-primary-40);width:16px}\n"], dependencies: [{ kind: "component", type: HsiUiDirectoryComponent, selector: "hsi-ui-directory", inputs: ["items", "level", "path", "terminalItemsAreSelectable", "selectionElementRole", "selection"], outputs: ["selectionChanges", "stateChanges"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1713
1713
|
}
|
|
1714
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HsiUiDirectoryComponent, decorators: [{
|
|
1715
1715
|
type: Component,
|
|
1716
1716
|
args: [{ selector: 'hsi-ui-directory', imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of items; track $index) {\n @if (!!item.children && item.children.length > 0) {\n <!-- This is the template for expandable nodes -->\n <div [style.--level]=\"level\">\n <div\n class=\"item expandable\"\n [ngClass]=\"'level-' + level\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"toggleOpen(item.name)\"\n (enter)=\"toggleOpen(item.name)\"\n >\n <p class=\"name\">{{ item.name }}</p>\n @if (open[item.name]) {\n <span aria-hidden=\"true\" class=\"material-symbols-outlined arrow\"\n >expand_more</span\n >\n } @else {\n <span aria-hidden=\"true\" class=\"material-symbols-outlined arrow\"\n >chevron_right</span\n >\n }\n </div>\n <hsi-ui-directory\n [items]=\"item.children\"\n [level]=\"level + 1\"\n [terminalItemsAreSelectable]=\"terminalItemsAreSelectable\"\n [path]=\"\n path.concat(\n level !== 0\n ? '/' + (item.value || item.name)\n : item.value || item.name\n )\n \"\n [class.invisible]=\"!open[item.name]\"\n (stateChanges)=\"setState($event)\"\n [selection]=\"state$ | async\"\n ></hsi-ui-directory>\n </div>\n } @else {\n <!-- This is the template for leaf nodes -->\n @if (terminalItemsAreSelectable) {\n <div\n class=\"item selectable\"\n [ngClass]=\"'level-' + level\"\n [attr.role]=\"selectionElementRole\"\n tabindex=\"0\"\n [style.--level]=\"level\"\n [class.active]=\"\n (state$ | async).activePath ===\n (level > 0 ? path + '/' : '') + (item.value || item.name)\n \"\n (click)=\"selectItem(item)\"\n (enter)=\"selectItem(item)\"\n >\n <p class=\"name\">{{ item.name }}</p>\n </div>\n } @else {\n <div class=\"item\" [style.--level]=\"level\">\n <p class=\"name\">{{ item.name }}</p>\n </div>\n }\n }\n}\n", styles: [".invisible{display:none}.item{display:flex;align-items:center;justify-content:space-between;margin:1px 0;margin-left:calc(var(--level) * .5rem);padding-right:.5rem;padding-top:.25rem;padding-bottom:.25rem}.item.expandable:hover,.item.selectable:hover{cursor:pointer;background-color:var(--hsi-adk-color-muted-primary-95);transition:all .2s}.item.active{background-color:var(--hsi-adk-color-muted-primary-95);color:var(--hsi-adk-color-primary-40)}.arrow{color:var(--hsi-adk-color-muted-primary-40);width:16px}\n"] }]
|
|
1717
1717
|
}], propDecorators: { items: [{
|
|
@@ -1732,6 +1732,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
1732
1732
|
type: Output
|
|
1733
1733
|
}] } });
|
|
1734
1734
|
|
|
1735
|
+
/* eslint-disable @angular-eslint/prefer-standalone */
|
|
1736
|
+
class SingleSortHeaderComponent {
|
|
1737
|
+
getColumnSortClasses() {
|
|
1738
|
+
const baseClasses = [
|
|
1739
|
+
'material-symbols-outlined',
|
|
1740
|
+
this.column.sortDirection,
|
|
1741
|
+
];
|
|
1742
|
+
return this.column.activelySorted
|
|
1743
|
+
? baseClasses.concat('actively-sorted')
|
|
1744
|
+
: baseClasses;
|
|
1745
|
+
}
|
|
1746
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SingleSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1747
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SingleSortHeaderComponent, isStandalone: false, selector: "[hsi-ui-single-sort-header]", inputs: { column: "column", sortIcon: "sortIcon" }, ngImport: i0, template: "<div class=\"header-cell-sort\">\n <span>{{ column.label }}</span>\n <span\n aria-hidden=\"true\"\n class=\"material-symbols-outlined\"\n [ngClass]=\"getColumnSortClasses()\"\n >{{ sortIcon }}</span\n >\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1748
|
+
}
|
|
1749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SingleSortHeaderComponent, decorators: [{
|
|
1750
|
+
type: Component,
|
|
1751
|
+
args: [{ selector: '[hsi-ui-single-sort-header]', standalone: false, template: "<div class=\"header-cell-sort\">\n <span>{{ column.label }}</span>\n <span\n aria-hidden=\"true\"\n class=\"material-symbols-outlined\"\n [ngClass]=\"getColumnSortClasses()\"\n >{{ sortIcon }}</span\n >\n</div>\n" }]
|
|
1752
|
+
}], propDecorators: { column: [{
|
|
1753
|
+
type: Input
|
|
1754
|
+
}], sortIcon: [{
|
|
1755
|
+
type: Input
|
|
1756
|
+
}] } });
|
|
1757
|
+
|
|
1735
1758
|
var SortDirection;
|
|
1736
1759
|
(function (SortDirection) {
|
|
1737
1760
|
SortDirection["asc"] = "asc";
|
|
@@ -1766,35 +1789,12 @@ class TableColumn {
|
|
|
1766
1789
|
}
|
|
1767
1790
|
}
|
|
1768
1791
|
|
|
1769
|
-
/* eslint-disable @angular-eslint/prefer-standalone */
|
|
1770
|
-
class SingleSortHeaderComponent {
|
|
1771
|
-
getColumnSortClasses() {
|
|
1772
|
-
const baseClasses = [
|
|
1773
|
-
'material-symbols-outlined',
|
|
1774
|
-
this.column.sortDirection,
|
|
1775
|
-
];
|
|
1776
|
-
return this.column.activelySorted
|
|
1777
|
-
? baseClasses.concat('actively-sorted')
|
|
1778
|
-
: baseClasses;
|
|
1779
|
-
}
|
|
1780
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SingleSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1781
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: SingleSortHeaderComponent, isStandalone: false, selector: "[hsi-ui-single-sort-header]", inputs: { column: "column", sortIcon: "sortIcon" }, ngImport: i0, template: "<div class=\"header-cell-sort\">\n <span>{{ column.label }}</span>\n <span\n aria-hidden=\"true\"\n class=\"material-symbols-outlined\"\n [ngClass]=\"getColumnSortClasses()\"\n >{{ sortIcon }}</span\n >\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1782
|
-
}
|
|
1783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SingleSortHeaderComponent, decorators: [{
|
|
1784
|
-
type: Component,
|
|
1785
|
-
args: [{ selector: '[hsi-ui-single-sort-header]', standalone: false, template: "<div class=\"header-cell-sort\">\n <span>{{ column.label }}</span>\n <span\n aria-hidden=\"true\"\n class=\"material-symbols-outlined\"\n [ngClass]=\"getColumnSortClasses()\"\n >{{ sortIcon }}</span\n >\n</div>\n" }]
|
|
1786
|
-
}], propDecorators: { column: [{
|
|
1787
|
-
type: Input
|
|
1788
|
-
}], sortIcon: [{
|
|
1789
|
-
type: Input
|
|
1790
|
-
}] } });
|
|
1791
|
-
|
|
1792
1792
|
class TableComponent {
|
|
1793
|
-
constructor(
|
|
1794
|
-
this.destroyRef = destroyRef;
|
|
1793
|
+
constructor() {
|
|
1795
1794
|
this.sortIcon = 'arrow_upward';
|
|
1796
1795
|
this.sort = new BehaviorSubject(null);
|
|
1797
1796
|
this.sort$ = this.sort.asObservable();
|
|
1797
|
+
this.destroyRef = inject(DestroyRef);
|
|
1798
1798
|
}
|
|
1799
1799
|
ngOnInit() {
|
|
1800
1800
|
this.setTableData();
|
|
@@ -1890,13 +1890,13 @@ class TableComponent {
|
|
|
1890
1890
|
columnTrackingFunction(_, column) {
|
|
1891
1891
|
return column.label;
|
|
1892
1892
|
}
|
|
1893
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1894
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1893
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1894
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TableComponent, isStandalone: false, selector: "hsi-ui-table", inputs: { config$: "config$", sortIcon: "sortIcon" }, ngImport: i0, template: "<table class=\"table-container\" cdk-table [dataSource]=\"data$\">\n @for (\n column of columns$ | async;\n track columnTrackingFunction($index, column)\n ) {\n <col span=\"1\" [style]=\"'width:' + column.width\" />\n }\n\n @for (\n column of columns$ | async;\n track columnTrackingFunction(i, column);\n let i = $index\n ) {\n <ng-container [cdkColumnDef]=\"column.label\">\n @if (column.sortable) {\n <th\n hsi-ui-single-sort-header\n scope=\"col\"\n cdk-header-cell\n *cdkHeaderCellDef=\"let element\"\n [ngClass]=\"[column.getAlignment(element), 'sorted-header']\"\n [column]=\"column\"\n [sortIcon]=\"sortIcon\"\n (click)=\"sortTableByColumn(column)\"\n ></th>\n <td\n cdk-cell\n [ngClass]=\"[column.getAlignment(element), 'sorted-header']\"\n *cdkCellDef=\"let element\"\n [attr.scope]=\"column.isRowHeader ? 'row' : null\"\n data-cy=\"table-cell\"\n >\n {{ column.getFormattedValue(element) }}\n </td>\n } @else {\n <th\n cdk-header-cell\n *cdkHeaderCellDef=\"let element\"\n [class]=\"column.getAlignment(element)\"\n scope=\"col\"\n >\n {{ column.label }}\n </th>\n <td\n cdk-cell\n [ngClass]=\"[column.getAlignment(element), 'sorted-cell']\"\n *cdkCellDef=\"let element\"\n [attr.scope]=\"column.isRowHeader ? 'row' : null\"\n data-cy=\"table-cell\"\n >\n {{ column.getFormattedValue(element) }}\n </td>\n }\n </ng-container>\n }\n\n <tr\n cdk-header-row\n class=\"header\"\n *cdkHeaderRowDef=\"tableHeaders$ | async\"\n ></tr>\n <tr\n cdk-row\n class=\"row\"\n data-cy=\"table-row\"\n *cdkRowDef=\"let row; columns: tableHeaders$ | async\"\n ></tr>\n <ng-template></ng-template>\n</table>\n", styles: [".table-container{border-spacing:0}.table-container td:last-child.left{padding-right:0}.table-container th:last-child.left{padding-right:0}.table-container th{vertical-align:bottom}.table-container th.sorted-header{padding-right:0}.table-container .header-cell-sort{display:flex;align-items:flex-end}.table-container .header-cell-sort:hover{cursor:pointer}.table-container .material-symbols-outlined{display:flex;justify-content:center;width:.9rem;height:1.2rem;font-size:1.25rem;margin-left:.2rem;margin-right:.4rem;opacity:.25;transition:all .15s ease-in-out}.table-container .material-symbols-outlined:hover{opacity:.75}.table-container .material-symbols-outlined.actively-sorted{opacity:1}.table-container .desc{transform:rotate(180deg)}.table-container .left{text-align:left}.table-container .right{text-align:right}.table-container .right .header-cell-sort{justify-content:flex-end}.table-container .right.sorted-cell{padding-right:1.5rem}.table-container .center{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout", "recycleRows"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: SingleSortHeaderComponent, selector: "[hsi-ui-single-sort-header]", inputs: ["column", "sortIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1895
1895
|
}
|
|
1896
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableComponent, decorators: [{
|
|
1897
1897
|
type: Component,
|
|
1898
|
-
args: [{ selector: 'hsi-ui-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<table class=\"table-container\" cdk-table [dataSource]=\"data$\">\n
|
|
1899
|
-
}],
|
|
1898
|
+
args: [{ selector: 'hsi-ui-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<table class=\"table-container\" cdk-table [dataSource]=\"data$\">\n @for (\n column of columns$ | async;\n track columnTrackingFunction($index, column)\n ) {\n <col span=\"1\" [style]=\"'width:' + column.width\" />\n }\n\n @for (\n column of columns$ | async;\n track columnTrackingFunction(i, column);\n let i = $index\n ) {\n <ng-container [cdkColumnDef]=\"column.label\">\n @if (column.sortable) {\n <th\n hsi-ui-single-sort-header\n scope=\"col\"\n cdk-header-cell\n *cdkHeaderCellDef=\"let element\"\n [ngClass]=\"[column.getAlignment(element), 'sorted-header']\"\n [column]=\"column\"\n [sortIcon]=\"sortIcon\"\n (click)=\"sortTableByColumn(column)\"\n ></th>\n <td\n cdk-cell\n [ngClass]=\"[column.getAlignment(element), 'sorted-header']\"\n *cdkCellDef=\"let element\"\n [attr.scope]=\"column.isRowHeader ? 'row' : null\"\n data-cy=\"table-cell\"\n >\n {{ column.getFormattedValue(element) }}\n </td>\n } @else {\n <th\n cdk-header-cell\n *cdkHeaderCellDef=\"let element\"\n [class]=\"column.getAlignment(element)\"\n scope=\"col\"\n >\n {{ column.label }}\n </th>\n <td\n cdk-cell\n [ngClass]=\"[column.getAlignment(element), 'sorted-cell']\"\n *cdkCellDef=\"let element\"\n [attr.scope]=\"column.isRowHeader ? 'row' : null\"\n data-cy=\"table-cell\"\n >\n {{ column.getFormattedValue(element) }}\n </td>\n }\n </ng-container>\n }\n\n <tr\n cdk-header-row\n class=\"header\"\n *cdkHeaderRowDef=\"tableHeaders$ | async\"\n ></tr>\n <tr\n cdk-row\n class=\"row\"\n data-cy=\"table-row\"\n *cdkRowDef=\"let row; columns: tableHeaders$ | async\"\n ></tr>\n <ng-template></ng-template>\n</table>\n", styles: [".table-container{border-spacing:0}.table-container td:last-child.left{padding-right:0}.table-container th:last-child.left{padding-right:0}.table-container th{vertical-align:bottom}.table-container th.sorted-header{padding-right:0}.table-container .header-cell-sort{display:flex;align-items:flex-end}.table-container .header-cell-sort:hover{cursor:pointer}.table-container .material-symbols-outlined{display:flex;justify-content:center;width:.9rem;height:1.2rem;font-size:1.25rem;margin-left:.2rem;margin-right:.4rem;opacity:.25;transition:all .15s ease-in-out}.table-container .material-symbols-outlined:hover{opacity:.75}.table-container .material-symbols-outlined.actively-sorted{opacity:1}.table-container .desc{transform:rotate(180deg)}.table-container .left{text-align:left}.table-container .right{text-align:right}.table-container .right .header-cell-sort{justify-content:flex-end}.table-container .right.sorted-cell{padding-right:1.5rem}.table-container .center{text-align:center}\n"] }]
|
|
1899
|
+
}], propDecorators: { config$: [{
|
|
1900
1900
|
type: Input
|
|
1901
1901
|
}], sortIcon: [{
|
|
1902
1902
|
type: Input
|
|
@@ -1906,11 +1906,11 @@ class HsiUiTableConfig {
|
|
|
1906
1906
|
}
|
|
1907
1907
|
|
|
1908
1908
|
class TableModule {
|
|
1909
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1910
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1911
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1909
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1910
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: TableModule, declarations: [TableComponent, SingleSortHeaderComponent], imports: [CommonModule, CdkTableModule, MatIconModule], exports: [TableComponent] }); }
|
|
1911
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableModule, imports: [CommonModule, CdkTableModule, MatIconModule] }); }
|
|
1912
1912
|
}
|
|
1913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableModule, decorators: [{
|
|
1914
1914
|
type: NgModule,
|
|
1915
1915
|
args: [{
|
|
1916
1916
|
declarations: [TableComponent, SingleSortHeaderComponent],
|
|
@@ -1926,16 +1926,17 @@ const HSI_UI_TAB_CONTENT = new InjectionToken('TabContent');
|
|
|
1926
1926
|
* Has the same functionality as https://material.angular.io/components/tabs/overview#lazy-loading
|
|
1927
1927
|
*/
|
|
1928
1928
|
class TabContentDirective {
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1929
|
+
constructor() {
|
|
1930
|
+
/** Content for the tab. */
|
|
1931
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1932
|
+
this.template = inject((TemplateRef));
|
|
1932
1933
|
}
|
|
1933
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1934
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1934
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1935
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TabContentDirective, isStandalone: true, selector: "[hsiUiTabContent]", providers: [
|
|
1935
1936
|
{ provide: HSI_UI_TAB_CONTENT, useExisting: TabContentDirective },
|
|
1936
1937
|
], ngImport: i0 }); }
|
|
1937
1938
|
}
|
|
1938
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1939
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabContentDirective, decorators: [{
|
|
1939
1940
|
type: Directive,
|
|
1940
1941
|
args: [{
|
|
1941
1942
|
selector: '[hsiUiTabContent]',
|
|
@@ -1943,13 +1944,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
1943
1944
|
{ provide: HSI_UI_TAB_CONTENT, useExisting: TabContentDirective },
|
|
1944
1945
|
],
|
|
1945
1946
|
}]
|
|
1946
|
-
}]
|
|
1947
|
+
}] });
|
|
1947
1948
|
|
|
1948
1949
|
class TabBodyComponent {
|
|
1949
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1950
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1950
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TabBodyComponent, isStandalone: true, selector: "hsi-ui-tab-body", queries: [{ propertyName: "lazyLoadedContent", first: true, predicate: TabContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "bodyContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
|
|
1951
1952
|
}
|
|
1952
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabBodyComponent, decorators: [{
|
|
1953
1954
|
type: Component,
|
|
1954
1955
|
args: [{
|
|
1955
1956
|
selector: 'hsi-ui-tab-body',
|
|
@@ -1958,9 +1959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
1958
1959
|
}], propDecorators: { bodyContent: [{
|
|
1959
1960
|
type: ViewChild,
|
|
1960
1961
|
args: [TemplateRef]
|
|
1961
|
-
}],
|
|
1962
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1963
|
-
lazyLoadedContent: [{
|
|
1962
|
+
}], lazyLoadedContent: [{
|
|
1964
1963
|
type: ContentChild,
|
|
1965
1964
|
args: [TabContentDirective, { read: TemplateRef, static: true }]
|
|
1966
1965
|
}] } });
|
|
@@ -1970,12 +1969,12 @@ class TabLabelComponent {
|
|
|
1970
1969
|
constructor() {
|
|
1971
1970
|
this.id = `tab-label-${nextUniqueId++}`;
|
|
1972
1971
|
}
|
|
1973
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1973
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TabLabelComponent, isStandalone: true, selector: "hsi-ui-tab-label", inputs: { value: "value" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }, { propertyName: "labelContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `<ng-template
|
|
1975
1974
|
><div #label class="tab-label" [id]="id"><ng-content></ng-content></div
|
|
1976
1975
|
></ng-template>`, isInline: true }); }
|
|
1977
1976
|
}
|
|
1978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1977
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabLabelComponent, decorators: [{
|
|
1979
1978
|
type: Component,
|
|
1980
1979
|
args: [{
|
|
1981
1980
|
selector: 'hsi-ui-tab-label',
|
|
@@ -1998,33 +1997,33 @@ class TabsService {
|
|
|
1998
1997
|
this.activeTab = new BehaviorSubject(null);
|
|
1999
1998
|
this.activeTab$ = this.activeTab.asObservable();
|
|
2000
1999
|
}
|
|
2001
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2002
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2000
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2001
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsService }); }
|
|
2003
2002
|
}
|
|
2004
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2003
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsService, decorators: [{
|
|
2005
2004
|
type: Injectable
|
|
2006
2005
|
}] });
|
|
2007
2006
|
|
|
2008
2007
|
class TabItemComponent {
|
|
2009
|
-
constructor(
|
|
2010
|
-
this.service = service;
|
|
2008
|
+
constructor() {
|
|
2011
2009
|
this.isActive = false;
|
|
2010
|
+
this.service = inject((TabsService));
|
|
2012
2011
|
}
|
|
2013
2012
|
ngOnChanges() {
|
|
2014
2013
|
if (this.isActive) {
|
|
2015
2014
|
this.service.activeTab.next(this);
|
|
2016
2015
|
}
|
|
2017
2016
|
}
|
|
2018
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2019
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2017
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2018
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TabItemComponent, isStandalone: true, selector: "hsi-ui-tab-item", inputs: { isActive: "isActive", value: "value" }, queries: [{ propertyName: "bodyComponent", first: true, predicate: TabBodyComponent, descendants: true }, { propertyName: "labelComponent", first: true, predicate: TabLabelComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
|
|
2020
2019
|
}
|
|
2021
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2020
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabItemComponent, decorators: [{
|
|
2022
2021
|
type: Component,
|
|
2023
2022
|
args: [{
|
|
2024
2023
|
selector: 'hsi-ui-tab-item',
|
|
2025
2024
|
template: '<ng-content></ng-content>',
|
|
2026
2025
|
}]
|
|
2027
|
-
}],
|
|
2026
|
+
}], propDecorators: { isActive: [{
|
|
2028
2027
|
type: Input
|
|
2029
2028
|
}], value: [{
|
|
2030
2029
|
type: Input
|
|
@@ -2037,10 +2036,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
2037
2036
|
}] } });
|
|
2038
2037
|
|
|
2039
2038
|
class TabsComponent {
|
|
2040
|
-
constructor(
|
|
2041
|
-
this.service = service;
|
|
2042
|
-
this.destroyRef = destroyRef;
|
|
2039
|
+
constructor() {
|
|
2043
2040
|
this.tabChange = new EventEmitter();
|
|
2041
|
+
this.destroyRef = inject(DestroyRef);
|
|
2042
|
+
this.service = inject((TabsService));
|
|
2044
2043
|
}
|
|
2045
2044
|
ngAfterContentInit() {
|
|
2046
2045
|
this.tabItems$ = this.tabs.changes.pipe(takeUntilDestroyed(this.destroyRef), startWith(''), map(() => this.tabs.toArray()));
|
|
@@ -2116,13 +2115,13 @@ class TabsComponent {
|
|
|
2116
2115
|
this.focusTab(this.tabs.last);
|
|
2117
2116
|
}
|
|
2118
2117
|
}
|
|
2119
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2118
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2119
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabsComponent, isStandalone: true, selector: "hsi-ui-tabs", outputs: { tabChange: "tabChange" }, providers: [TabsService], queries: [{ propertyName: "tabs", predicate: TabItemComponent }], ngImport: i0, template: "@if (service.activeTab$ | async; as activeTab) {\n <div class=\"tab-list\" role=\"tablist\">\n @for (item of tabItems$ | async; track item) {\n <div\n role=\"tab\"\n [tabindex]=\"activeTab === item ? 0 : -1\"\n class=\"tab-label-container\"\n (click)=\"selectTab(item)\"\n (keydown)=\"handleKeydown($event, item)\"\n [attr.aria-selected]=\"activeTab === item\"\n [class.active]=\"activeTab === item\"\n aria-controls=\"tabs-component-body\"\n data-cy=\"level\"\n >\n @if (item.labelComponent) {\n <ng-container\n *ngTemplateOutlet=\"item.labelComponent.labelContent\"\n ></ng-container>\n }\n </div>\n }\n </div>\n <div\n class=\"tabs-body\"\n id=\"tabs-component-body\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTab?.labelComponent?.id\"\n >\n @if (activeTab.bodyComponent) {\n @if (activeTab.bodyComponent?.lazyLoadedContent) {\n <ng-container\n *ngTemplateOutlet=\"activeTab.bodyComponent.lazyLoadedContent\"\n >\n </ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"activeTab.bodyComponent.bodyContent\">\n </ng-container>\n }\n }\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
2121
2120
|
}
|
|
2122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
2123
2122
|
type: Component,
|
|
2124
|
-
args: [{ selector: 'hsi-ui-tabs', imports: [CommonModule], providers: [TabsService], template: "
|
|
2125
|
-
}], ctorParameters: () => [
|
|
2123
|
+
args: [{ selector: 'hsi-ui-tabs', imports: [CommonModule], providers: [TabsService], template: "@if (service.activeTab$ | async; as activeTab) {\n <div class=\"tab-list\" role=\"tablist\">\n @for (item of tabItems$ | async; track item) {\n <div\n role=\"tab\"\n [tabindex]=\"activeTab === item ? 0 : -1\"\n class=\"tab-label-container\"\n (click)=\"selectTab(item)\"\n (keydown)=\"handleKeydown($event, item)\"\n [attr.aria-selected]=\"activeTab === item\"\n [class.active]=\"activeTab === item\"\n aria-controls=\"tabs-component-body\"\n data-cy=\"level\"\n >\n @if (item.labelComponent) {\n <ng-container\n *ngTemplateOutlet=\"item.labelComponent.labelContent\"\n ></ng-container>\n }\n </div>\n }\n </div>\n <div\n class=\"tabs-body\"\n id=\"tabs-component-body\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTab?.labelComponent?.id\"\n >\n @if (activeTab.bodyComponent) {\n @if (activeTab.bodyComponent?.lazyLoadedContent) {\n <ng-container\n *ngTemplateOutlet=\"activeTab.bodyComponent.lazyLoadedContent\"\n >\n </ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"activeTab.bodyComponent.bodyContent\">\n </ng-container>\n }\n }\n </div>\n}\n" }]
|
|
2124
|
+
}], ctorParameters: () => [], propDecorators: { tabs: [{
|
|
2126
2125
|
type: ContentChildren,
|
|
2127
2126
|
args: [TabItemComponent]
|
|
2128
2127
|
}], tabChange: [{
|
|
@@ -2130,8 +2129,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
2130
2129
|
}] } });
|
|
2131
2130
|
|
|
2132
2131
|
class TabsModule {
|
|
2133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2134
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2133
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: TabsModule, imports: [TabsComponent,
|
|
2135
2134
|
TabLabelComponent,
|
|
2136
2135
|
TabItemComponent,
|
|
2137
2136
|
TabBodyComponent,
|
|
@@ -2140,9 +2139,9 @@ class TabsModule {
|
|
|
2140
2139
|
TabItemComponent,
|
|
2141
2140
|
TabBodyComponent,
|
|
2142
2141
|
TabContentDirective] }); }
|
|
2143
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2142
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsModule, imports: [TabsComponent] }); }
|
|
2144
2143
|
}
|
|
2145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsModule, decorators: [{
|
|
2146
2145
|
type: NgModule,
|
|
2147
2146
|
args: [{
|
|
2148
2147
|
declarations: [],
|
|
@@ -2171,5 +2170,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
2171
2170
|
* Generated bundle index. Do not edit.
|
|
2172
2171
|
*/
|
|
2173
2172
|
|
|
2174
|
-
export { AutoComplete, ComboboxComponent, ComboboxLabelComponent, ComboboxService, EditableTextboxComponent, FocusTextbox, HSI_UI_TAB_CONTENT, HsiUiComboboxModule, HsiUiDirectoryComponent, HsiUiTableConfig, Key, ListboxAction, ListboxComponent, ListboxGroupComponent, ListboxLabelComponent, ListboxOptionComponent, OptionAction, SelectAllListboxOptionComponent, SortDirection, TabBodyComponent, TabContentDirective, TabItemComponent, TabLabelComponent, TableColumn, TableComponent, TableModule, TabsComponent, TabsModule, TextboxAction, TextboxComponent };
|
|
2173
|
+
export { ActiveIndexService, AutoComplete, ComboboxComponent, ComboboxLabelComponent, ComboboxService, EditableTextboxComponent, FocusTextbox, HSI_UI_TAB_CONTENT, HsiUiComboboxModule, HsiUiDirectoryComponent, HsiUiTableConfig, Key, ListboxAction, ListboxComponent, ListboxFilteringService, ListboxGroupComponent, ListboxLabelComponent, ListboxOptionComponent, ListboxScrollService, OptionAction, SelectAllListboxOptionComponent, SingleSortHeaderComponent, SortDirection, TabBodyComponent, TabContentDirective, TabItemComponent, TabLabelComponent, TableColumn, TableComponent, TableModule, TabsComponent, TabsModule, TabsService, TextboxAction, TextboxComponent };
|
|
2175
2174
|
//# sourceMappingURL=mathstack-ui.mjs.map
|