@db-ux/ngx-core-components 4.14.0 → 5.0.0
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/CHANGELOG.md +28 -0
- package/agent/Drawer.md +0 -8
- package/agent/TabItem.md +6 -2
- package/agent/Tabs.md +30 -30
- package/agent/_instructions.md +1 -1
- package/fesm2022/db-ux-ngx-core-components.mjs +1647 -766
- package/fesm2022/db-ux-ngx-core-components.mjs.map +1 -1
- package/package.json +3 -3
- package/types/db-ux-ngx-core-components.d.ts +318 -134
|
@@ -202,8 +202,21 @@ const getNotificationRole = ({ semantic, role, ariaLive }) => {
|
|
|
202
202
|
return 'article';
|
|
203
203
|
}
|
|
204
204
|
};
|
|
205
|
+
const NAVIGATION_KEYS = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End', 'Enter', ' '];
|
|
206
|
+
/**
|
|
207
|
+
* Checks whether the browser natively supports the `focusgroup` HTML attribute.
|
|
208
|
+
* When supported, the browser handles arrow-key navigation and roving tabindex
|
|
209
|
+
* for composite widgets (tablists, toolbars, etc.), so our JS fallback can be skipped.
|
|
210
|
+
*
|
|
211
|
+
* @public
|
|
212
|
+
*/
|
|
213
|
+
const hasFocusgroupSupport = () => {
|
|
214
|
+
if (typeof HTMLElement === 'undefined')
|
|
215
|
+
return false;
|
|
216
|
+
return 'focusGroup' in HTMLElement.prototype || 'focusgroup' in HTMLElement.prototype;
|
|
217
|
+
};
|
|
205
218
|
|
|
206
|
-
const defaultProps$
|
|
219
|
+
const defaultProps$J = {};
|
|
207
220
|
class DBAccordionItem {
|
|
208
221
|
handleNameAttribute() {
|
|
209
222
|
if (this._ref()?.nativeElement) {
|
|
@@ -353,8 +366,8 @@ class DBAccordionItem {
|
|
|
353
366
|
ngOnDestroy() {
|
|
354
367
|
this.observer()?.disconnect();
|
|
355
368
|
}
|
|
356
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
357
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
|
|
358
371
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
359
372
|
[class]="cls('db-accordion-item', className())"
|
|
360
373
|
>
|
|
@@ -373,7 +386,7 @@ class DBAccordionItem {
|
|
|
373
386
|
</details>
|
|
374
387
|
</li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
375
388
|
}
|
|
376
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBAccordionItem, decorators: [{
|
|
377
390
|
type: Component,
|
|
378
391
|
args: [{ selector: "db-accordion-item", standalone: true, imports: [CommonModule], template: `<li
|
|
379
392
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
@@ -395,7 +408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
395
408
|
</li> `, styles: [":host{display:contents}\n"] }]
|
|
396
409
|
}], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
397
410
|
|
|
398
|
-
const defaultProps$
|
|
411
|
+
const defaultProps$I = {};
|
|
399
412
|
class DBAccordion {
|
|
400
413
|
convertItems() {
|
|
401
414
|
try {
|
|
@@ -575,8 +588,8 @@ class DBAccordion {
|
|
|
575
588
|
ngOnDestroy() {
|
|
576
589
|
this.observer()?.disconnect();
|
|
577
590
|
}
|
|
578
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
579
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
591
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
592
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<ul
|
|
580
593
|
#_ref
|
|
581
594
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
582
595
|
[class]="cls('db-accordion', className())"
|
|
@@ -594,7 +607,7 @@ class DBAccordion {
|
|
|
594
607
|
} }
|
|
595
608
|
</ul> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["defaultOpen", "name", "open", "id", "propOverrides", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
|
|
596
609
|
}
|
|
597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
610
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBAccordion, decorators: [{
|
|
598
611
|
type: Component,
|
|
599
612
|
args: [{ selector: "db-accordion", standalone: true, imports: [CommonModule, DBAccordionItem], template: `<ul
|
|
600
613
|
#_ref
|
|
@@ -721,7 +734,7 @@ const TESTING_VIEWPORTS = [{
|
|
|
721
734
|
const DB_UX_LOCAL_STORAGE_FRAMEWORK = 'db-ux-framework';
|
|
722
735
|
const DB_UX_LOCAL_STORAGE_MODE = 'db-ux-mode';
|
|
723
736
|
|
|
724
|
-
const defaultProps$
|
|
737
|
+
const defaultProps$H = {};
|
|
725
738
|
class DBBadge {
|
|
726
739
|
setupObserver(element) {
|
|
727
740
|
if (!element)
|
|
@@ -834,8 +847,8 @@ class DBBadge {
|
|
|
834
847
|
ngOnDestroy() {
|
|
835
848
|
this.observer()?.disconnect();
|
|
836
849
|
}
|
|
837
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
838
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
850
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBBadge, isStandalone: true, selector: "db-badge", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
|
|
839
852
|
#_ref
|
|
840
853
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
841
854
|
[class]="cls('db-badge', className())"
|
|
@@ -848,7 +861,7 @@ class DBBadge {
|
|
|
848
861
|
>@if(text()){{{text()}}} <ng-content></ng-content
|
|
849
862
|
></span> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
850
863
|
}
|
|
851
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBBadge, decorators: [{
|
|
852
865
|
type: Component,
|
|
853
866
|
args: [{ selector: "db-badge", standalone: true, imports: [CommonModule], template: `<span
|
|
854
867
|
#_ref
|
|
@@ -866,7 +879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
866
879
|
|
|
867
880
|
const BadgePlacementList = ['inline', 'corner-top-left', 'corner-top-right', 'corner-center-left', 'corner-center-right', 'corner-bottom-left', 'corner-bottom-right'];
|
|
868
881
|
|
|
869
|
-
const defaultProps$
|
|
882
|
+
const defaultProps$G = {};
|
|
870
883
|
class DBBrand {
|
|
871
884
|
setupObserver(element) {
|
|
872
885
|
if (!element)
|
|
@@ -952,8 +965,8 @@ class DBBrand {
|
|
|
952
965
|
ngOnDestroy() {
|
|
953
966
|
this.observer()?.disconnect();
|
|
954
967
|
}
|
|
955
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
956
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
968
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBBrand, isStandalone: true, selector: "db-brand", inputs: { hideLogo: { classPropertyName: "hideLogo", publicName: "hideLogo", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
957
970
|
#_ref
|
|
958
971
|
[attr.data-icon]="hideLogo() ? 'none' : icon() ?? DEFAULT_ICON"
|
|
959
972
|
[attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
|
|
@@ -963,7 +976,7 @@ class DBBrand {
|
|
|
963
976
|
<ng-content></ng-content> @if(text()){{{text()}}}
|
|
964
977
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
965
978
|
}
|
|
966
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBBrand, decorators: [{
|
|
967
980
|
type: Component,
|
|
968
981
|
args: [{ selector: "db-brand", standalone: true, imports: [CommonModule], template: `<div
|
|
969
982
|
#_ref
|
|
@@ -976,7 +989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
976
989
|
</div> `, styles: [":host{display:contents}\n"] }]
|
|
977
990
|
}], ctorParameters: () => [], propDecorators: { hideLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLogo", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
978
991
|
|
|
979
|
-
const defaultProps$
|
|
992
|
+
const defaultProps$F = {};
|
|
980
993
|
class DBButton {
|
|
981
994
|
getButtonType() {
|
|
982
995
|
if (this.type()) {
|
|
@@ -1090,8 +1103,8 @@ class DBButton {
|
|
|
1090
1103
|
ngOnDestroy() {
|
|
1091
1104
|
this.observer()?.disconnect();
|
|
1092
1105
|
}
|
|
1093
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1094
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1107
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBButton, isStandalone: true, selector: "db-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, commandfor: { classPropertyName: "commandfor", publicName: "commandfor", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<button
|
|
1095
1108
|
#_ref
|
|
1096
1109
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
1097
1110
|
[class]="cls('db-button', className())"
|
|
@@ -1115,7 +1128,7 @@ class DBButton {
|
|
|
1115
1128
|
@if(text()){{{text()}}} <ng-content></ng-content>
|
|
1116
1129
|
</button> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
1117
1130
|
}
|
|
1118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBButton, decorators: [{
|
|
1119
1132
|
type: Component,
|
|
1120
1133
|
args: [{ selector: "db-button", standalone: true, imports: [CommonModule], template: `<button
|
|
1121
1134
|
#_ref
|
|
@@ -1145,7 +1158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1145
1158
|
const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'];
|
|
1146
1159
|
const ButtonTypeList = ['button', 'reset', 'submit'];
|
|
1147
1160
|
|
|
1148
|
-
const defaultProps$
|
|
1161
|
+
const defaultProps$E = {};
|
|
1149
1162
|
class DBCard {
|
|
1150
1163
|
handleClick(event) {
|
|
1151
1164
|
if (this.click) {
|
|
@@ -1234,8 +1247,8 @@ class DBCard {
|
|
|
1234
1247
|
ngOnDestroy() {
|
|
1235
1248
|
this.observer()?.disconnect();
|
|
1236
1249
|
}
|
|
1237
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
1250
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1251
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBCard, isStandalone: true, selector: "db-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, elevationLevel: { classPropertyName: "elevationLevel", publicName: "elevationLevel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
1239
1252
|
#_ref
|
|
1240
1253
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
1241
1254
|
[class]="cls('db-card', className())"
|
|
@@ -1247,7 +1260,7 @@ class DBCard {
|
|
|
1247
1260
|
<ng-content></ng-content>
|
|
1248
1261
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
1249
1262
|
}
|
|
1250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCard, decorators: [{
|
|
1251
1264
|
type: Component,
|
|
1252
1265
|
args: [{ selector: "db-card", standalone: true, imports: [CommonModule], template: `<div
|
|
1253
1266
|
#_ref
|
|
@@ -1337,7 +1350,7 @@ const addValueResetEventListener = (element, props, resetFunction, signal) => {
|
|
|
1337
1350
|
}, signal);
|
|
1338
1351
|
};
|
|
1339
1352
|
|
|
1340
|
-
const defaultProps$
|
|
1353
|
+
const defaultProps$D = {};
|
|
1341
1354
|
class DBInfotext {
|
|
1342
1355
|
setupObserver(element) {
|
|
1343
1356
|
if (!element)
|
|
@@ -1424,8 +1437,8 @@ class DBInfotext {
|
|
|
1424
1437
|
ngOnDestroy() {
|
|
1425
1438
|
this.observer()?.disconnect();
|
|
1426
1439
|
}
|
|
1427
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1428
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1440
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBInfotext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1441
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBInfotext, isStandalone: true, selector: "db-infotext", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
|
|
1429
1442
|
#_ref
|
|
1430
1443
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
1431
1444
|
[class]="cls('db-infotext', className())"
|
|
@@ -1437,7 +1450,7 @@ class DBInfotext {
|
|
|
1437
1450
|
>@if(text()){{{text()}}} <ng-content></ng-content
|
|
1438
1451
|
></span> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
1439
1452
|
}
|
|
1440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBInfotext, decorators: [{
|
|
1441
1454
|
type: Component,
|
|
1442
1455
|
args: [{ selector: "db-infotext", standalone: true, imports: [CommonModule], template: `<span
|
|
1443
1456
|
#_ref
|
|
@@ -1452,7 +1465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1452
1465
|
></span> `, styles: [":host{display:contents}\n"] }]
|
|
1453
1466
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
1454
1467
|
|
|
1455
|
-
const defaultProps$
|
|
1468
|
+
const defaultProps$C = {};
|
|
1456
1469
|
class DBCheckbox {
|
|
1457
1470
|
hasValidState() {
|
|
1458
1471
|
if (this.validation() === 'no-validation')
|
|
@@ -1812,8 +1825,8 @@ class DBCheckbox {
|
|
|
1812
1825
|
this.abortController()?.abort();
|
|
1813
1826
|
this.observer()?.disconnect();
|
|
1814
1827
|
}
|
|
1815
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1816
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1828
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1829
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, providers: [{
|
|
1817
1830
|
provide: NG_VALUE_ACCESSOR,
|
|
1818
1831
|
useExisting: DBCheckbox,
|
|
1819
1832
|
multi: true
|
|
@@ -1869,7 +1882,7 @@ class DBCheckbox {
|
|
|
1869
1882
|
>
|
|
1870
1883
|
</div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
|
|
1871
1884
|
}
|
|
1872
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCheckbox, decorators: [{
|
|
1873
1886
|
type: Component,
|
|
1874
1887
|
args: [{ providers: [{
|
|
1875
1888
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1931,7 +1944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1931
1944
|
args: ['hidden']
|
|
1932
1945
|
}] } });
|
|
1933
1946
|
|
|
1934
|
-
const defaultProps$
|
|
1947
|
+
const defaultProps$B = {};
|
|
1935
1948
|
class DBCustomButton {
|
|
1936
1949
|
setupObserver(element) {
|
|
1937
1950
|
if (!element)
|
|
@@ -2022,8 +2035,8 @@ class DBCustomButton {
|
|
|
2022
2035
|
ngOnDestroy() {
|
|
2023
2036
|
this.observer()?.disconnect();
|
|
2024
2037
|
}
|
|
2025
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2026
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
2038
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBCustomButton, isStandalone: true, selector: "db-custom-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
2027
2040
|
#_ref
|
|
2028
2041
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
2029
2042
|
[class]="cls('db-custom-button', className())"
|
|
@@ -2039,7 +2052,7 @@ class DBCustomButton {
|
|
|
2039
2052
|
<ng-content></ng-content>
|
|
2040
2053
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
2041
2054
|
}
|
|
2042
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2055
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomButton, decorators: [{
|
|
2043
2056
|
type: Component,
|
|
2044
2057
|
args: [{ selector: "db-custom-button", standalone: true, imports: [CommonModule], template: `<div
|
|
2045
2058
|
#_ref
|
|
@@ -2734,7 +2747,7 @@ class ResizeObserverListener extends AbstractObserverListener {
|
|
|
2734
2747
|
}
|
|
2735
2748
|
}
|
|
2736
2749
|
|
|
2737
|
-
const defaultProps$
|
|
2750
|
+
const defaultProps$A = { width: "fixed" };
|
|
2738
2751
|
class DBCustomSelectDropdown {
|
|
2739
2752
|
setupObserver(element) {
|
|
2740
2753
|
if (!element)
|
|
@@ -2760,7 +2773,7 @@ class DBCustomSelectDropdown {
|
|
|
2760
2773
|
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2761
2774
|
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
2762
2775
|
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
2763
|
-
this.width = input(defaultProps$
|
|
2776
|
+
this.width = input(defaultProps$A["width"], ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
2764
2777
|
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
2765
2778
|
this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
|
|
2766
2779
|
}
|
|
@@ -2815,8 +2828,8 @@ class DBCustomSelectDropdown {
|
|
|
2815
2828
|
ngOnDestroy() {
|
|
2816
2829
|
this.observer()?.disconnect();
|
|
2817
2830
|
}
|
|
2818
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
2831
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2832
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<article
|
|
2820
2833
|
data-spacing="none"
|
|
2821
2834
|
#_ref
|
|
2822
2835
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
@@ -2826,7 +2839,7 @@ class DBCustomSelectDropdown {
|
|
|
2826
2839
|
<ng-content></ng-content>
|
|
2827
2840
|
</article> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
2828
2841
|
}
|
|
2829
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2842
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelectDropdown, decorators: [{
|
|
2830
2843
|
type: Component,
|
|
2831
2844
|
args: [{ selector: "db-custom-select-dropdown", standalone: true, imports: [CommonModule], template: `<article
|
|
2832
2845
|
data-spacing="none"
|
|
@@ -2839,7 +2852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2839
2852
|
</article> `, styles: [":host{display:contents}\n"] }]
|
|
2840
2853
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
2841
2854
|
|
|
2842
|
-
const defaultProps$
|
|
2855
|
+
const defaultProps$z = {};
|
|
2843
2856
|
class DBCustomSelectListItem {
|
|
2844
2857
|
handleChange(event) {
|
|
2845
2858
|
event.stopPropagation();
|
|
@@ -2994,8 +3007,8 @@ class DBCustomSelectListItem {
|
|
|
2994
3007
|
ngOnDestroy() {
|
|
2995
3008
|
this.observer()?.disconnect();
|
|
2996
3009
|
}
|
|
2997
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2998
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, providers: [{
|
|
2999
3012
|
provide: NG_VALUE_ACCESSOR,
|
|
3000
3013
|
useExisting: DBCustomSelectListItem,
|
|
3001
3014
|
multi: true
|
|
@@ -3031,7 +3044,7 @@ class DBCustomSelectListItem {
|
|
|
3031
3044
|
}
|
|
3032
3045
|
</li> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
3033
3046
|
}
|
|
3034
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelectListItem, decorators: [{
|
|
3035
3048
|
type: Component,
|
|
3036
3049
|
args: [{ providers: [{
|
|
3037
3050
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3073,7 +3086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3073
3086
|
args: ['hidden']
|
|
3074
3087
|
}] } });
|
|
3075
3088
|
|
|
3076
|
-
const defaultProps$
|
|
3089
|
+
const defaultProps$y = {};
|
|
3077
3090
|
class DBCustomSelectList {
|
|
3078
3091
|
setupObserver(element) {
|
|
3079
3092
|
if (!element)
|
|
@@ -3155,8 +3168,8 @@ class DBCustomSelectList {
|
|
|
3155
3168
|
ngOnDestroy() {
|
|
3156
3169
|
this.observer()?.disconnect();
|
|
3157
3170
|
}
|
|
3158
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
3171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBCustomSelectList, isStandalone: true, selector: "db-custom-select-list", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
3160
3173
|
[attr.role]="multiple() ? 'group' : 'radiogroup'"
|
|
3161
3174
|
[attr.aria-label]="label()"
|
|
3162
3175
|
#_ref
|
|
@@ -3168,7 +3181,7 @@ class DBCustomSelectList {
|
|
|
3168
3181
|
</ul>
|
|
3169
3182
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
3170
3183
|
}
|
|
3171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelectList, decorators: [{
|
|
3172
3185
|
type: Component,
|
|
3173
3186
|
args: [{ selector: "db-custom-select-list", standalone: true, imports: [CommonModule], template: `<div
|
|
3174
3187
|
[attr.role]="multiple() ? 'group' : 'radiogroup'"
|
|
@@ -3183,7 +3196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3183
3196
|
</div> `, styles: [":host{display:contents}\n"] }]
|
|
3184
3197
|
}], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
3185
3198
|
|
|
3186
|
-
const defaultProps$
|
|
3199
|
+
const defaultProps$x = {};
|
|
3187
3200
|
class DBInput {
|
|
3188
3201
|
hasValidState() {
|
|
3189
3202
|
if (this.validation() === 'no-validation')
|
|
@@ -3606,8 +3619,8 @@ class DBInput {
|
|
|
3606
3619
|
this.abortController()?.abort();
|
|
3607
3620
|
this.observer()?.disconnect();
|
|
3608
3621
|
}
|
|
3609
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3610
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3622
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBInput, isStandalone: true, selector: "db-input", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, enterkeyhint: { classPropertyName: "enterkeyhint", publicName: "enterkeyhint", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageSize: { classPropertyName: "messageSize", publicName: "messageSize", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, validMessageSize: { classPropertyName: "validMessageSize", publicName: "validMessageSize", isSignal: true, isRequired: false, transformFunction: null }, invalidMessageSize: { classPropertyName: "invalidMessageSize", publicName: "invalidMessageSize", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, providers: [{
|
|
3611
3624
|
provide: NG_VALUE_ACCESSOR,
|
|
3612
3625
|
useExisting: DBInput,
|
|
3613
3626
|
multi: true
|
|
@@ -3694,7 +3707,7 @@ class DBInput {
|
|
|
3694
3707
|
>
|
|
3695
3708
|
</div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
|
|
3696
3709
|
}
|
|
3697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBInput, decorators: [{
|
|
3698
3711
|
type: Component,
|
|
3699
3712
|
args: [{ providers: [{
|
|
3700
3713
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3787,7 +3800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3787
3800
|
args: ['hidden']
|
|
3788
3801
|
}] } });
|
|
3789
3802
|
|
|
3790
|
-
const defaultProps$
|
|
3803
|
+
const defaultProps$w = {};
|
|
3791
3804
|
class DBTooltip {
|
|
3792
3805
|
handleClick(event) {
|
|
3793
3806
|
event.stopPropagation();
|
|
@@ -3900,7 +3913,17 @@ class DBTooltip {
|
|
|
3900
3913
|
if (parent.getAttribute("aria-labelledby") === attachedId) {
|
|
3901
3914
|
parent.removeAttribute("aria-labelledby");
|
|
3902
3915
|
}
|
|
3903
|
-
|
|
3916
|
+
// Remove only the tooltip ID from aria-describedby,
|
|
3917
|
+
// preserving any other consumer-provided IDs.
|
|
3918
|
+
const describedBy = parent.getAttribute("aria-describedby") || "";
|
|
3919
|
+
const remaining = describedBy
|
|
3920
|
+
.split(" ")
|
|
3921
|
+
.filter((id) => id !== "" && id !== attachedId)
|
|
3922
|
+
.join(" ");
|
|
3923
|
+
if (remaining) {
|
|
3924
|
+
parent.setAttribute("aria-describedby", remaining);
|
|
3925
|
+
}
|
|
3926
|
+
else if (describedBy) {
|
|
3904
3927
|
parent.removeAttribute("aria-describedby");
|
|
3905
3928
|
}
|
|
3906
3929
|
this._attachedParent.set(undefined);
|
|
@@ -3942,7 +3965,7 @@ class DBTooltip {
|
|
|
3942
3965
|
this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
3943
3966
|
this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
|
|
3944
3967
|
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
3945
|
-
this._id = signal(
|
|
3968
|
+
this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
|
|
3946
3969
|
this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
3947
3970
|
this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : /* istanbul ignore next */ []));
|
|
3948
3971
|
this._intersectionObserverCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_intersectionObserverCallbackId" }] : /* istanbul ignore next */ []));
|
|
@@ -4014,7 +4037,16 @@ class DBTooltip {
|
|
|
4014
4037
|
parent.setAttribute("aria-labelledby", this._id());
|
|
4015
4038
|
}
|
|
4016
4039
|
else {
|
|
4017
|
-
|
|
4040
|
+
// Append tooltip ID to existing aria-describedby to
|
|
4041
|
+
// preserve any consumer-provided description IDs.
|
|
4042
|
+
const existing = parent.getAttribute("aria-describedby") || "";
|
|
4043
|
+
const ids = existing
|
|
4044
|
+
.split(" ")
|
|
4045
|
+
.filter((id) => id !== "");
|
|
4046
|
+
if (!ids.includes(this._id())) {
|
|
4047
|
+
ids.push(this._id());
|
|
4048
|
+
}
|
|
4049
|
+
parent.setAttribute("aria-describedby", ids.join(" "));
|
|
4018
4050
|
}
|
|
4019
4051
|
this._attachedParent.set(parent);
|
|
4020
4052
|
this._attachedId.set(this._id());
|
|
@@ -4080,8 +4112,8 @@ class DBTooltip {
|
|
|
4080
4112
|
this._detachListeners();
|
|
4081
4113
|
this.observer()?.disconnect();
|
|
4082
4114
|
}
|
|
4083
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4084
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4115
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4116
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<i
|
|
4085
4117
|
role="tooltip"
|
|
4086
4118
|
aria-hidden="true"
|
|
4087
4119
|
data-gap="true"
|
|
@@ -4099,7 +4131,7 @@ class DBTooltip {
|
|
|
4099
4131
|
>@if(text()){{{text()}}} <ng-content></ng-content
|
|
4100
4132
|
></i> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
4101
4133
|
}
|
|
4102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTooltip, decorators: [{
|
|
4103
4135
|
type: Component,
|
|
4104
4136
|
args: [{ selector: "db-tooltip", standalone: true, imports: [CommonModule], template: `<i
|
|
4105
4137
|
role="tooltip"
|
|
@@ -4120,7 +4152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4120
4152
|
></i> `, styles: [":host{display:contents}\n"] }]
|
|
4121
4153
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
4122
4154
|
|
|
4123
|
-
const defaultProps$
|
|
4155
|
+
const defaultProps$v = {};
|
|
4124
4156
|
class DBTag {
|
|
4125
4157
|
handleRemove(event) {
|
|
4126
4158
|
if (!event)
|
|
@@ -4227,8 +4259,8 @@ class DBTag {
|
|
|
4227
4259
|
ngOnDestroy() {
|
|
4228
4260
|
this.observer()?.disconnect();
|
|
4229
4261
|
}
|
|
4230
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4231
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4262
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTag, isStandalone: true, selector: "db-tag", inputs: { removeButton: { classPropertyName: "removeButton", publicName: "removeButton", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCheckState: { classPropertyName: "showCheckState", publicName: "showCheckState", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
4232
4264
|
#_ref
|
|
4233
4265
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
4234
4266
|
[class]="cls('db-tag', className())"
|
|
@@ -4257,7 +4289,7 @@ class DBTag {
|
|
|
4257
4289
|
}
|
|
4258
4290
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "placement", "text"] }] }); }
|
|
4259
4291
|
}
|
|
4260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTag, decorators: [{
|
|
4261
4293
|
type: Component,
|
|
4262
4294
|
args: [{ selector: "db-tag", standalone: true, imports: [CommonModule, DBTooltip], template: `<div
|
|
4263
4295
|
#_ref
|
|
@@ -4289,7 +4321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4289
4321
|
</div> `, styles: [":host{display:contents}\n"] }]
|
|
4290
4322
|
}], ctorParameters: () => [], propDecorators: { removeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButton", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showCheckState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckState", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
4291
4323
|
|
|
4292
|
-
const defaultProps$
|
|
4324
|
+
const defaultProps$u = {
|
|
4293
4325
|
clearSelectionText: "Clear selection",
|
|
4294
4326
|
showClearSelection: true,
|
|
4295
4327
|
};
|
|
@@ -4867,8 +4899,8 @@ class DBCustomSelect {
|
|
|
4867
4899
|
this.loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : /* istanbul ignore next */ []));
|
|
4868
4900
|
this.noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : /* istanbul ignore next */ []));
|
|
4869
4901
|
this.mobileCloseButtonText = input(...(ngDevMode ? [undefined, { debugName: "mobileCloseButtonText" }] : /* istanbul ignore next */ []));
|
|
4870
|
-
this.showClearSelection = input(defaultProps$
|
|
4871
|
-
this.clearSelectionText = input(defaultProps$
|
|
4902
|
+
this.showClearSelection = input(defaultProps$u["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : /* istanbul ignore next */ []));
|
|
4903
|
+
this.clearSelectionText = input(defaultProps$u["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : /* istanbul ignore next */ []));
|
|
4872
4904
|
this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
4873
4905
|
this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : /* istanbul ignore next */ []));
|
|
4874
4906
|
this.amountChange = output();
|
|
@@ -5352,8 +5384,8 @@ class DBCustomSelect {
|
|
|
5352
5384
|
}
|
|
5353
5385
|
this.observer()?.disconnect();
|
|
5354
5386
|
}
|
|
5355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
5387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5388
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBCustomSelect, isStandalone: true, selector: "db-custom-select", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectedLabels: { classPropertyName: "selectedLabels", publicName: "selectedLabels", isSignal: true, isRequired: false, transformFunction: null }, transformSelectedLabels: { classPropertyName: "transformSelectedLabels", publicName: "transformSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, amountText: { classPropertyName: "amountText", publicName: "amountText", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTagsTexts: { classPropertyName: "removeTagsTexts", publicName: "removeTagsTexts", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, formFieldWidth: { classPropertyName: "formFieldWidth", publicName: "formFieldWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, selectedPrefix: { classPropertyName: "selectedPrefix", publicName: "selectedPrefix", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseButtonText: { classPropertyName: "mobileCloseButtonText", publicName: "mobileCloseButtonText", isSignal: true, isRequired: false, transformFunction: null }, showClearSelection: { classPropertyName: "showClearSelection", publicName: "showClearSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionText: { classPropertyName: "clearSelectionText", publicName: "clearSelectionText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", disabled: "disabledChange", amountChange: "amountChange", dropdownToggle: "dropdownToggle", optionSelected: "optionSelected", search: "search", value: "valueChange", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, providers: [{
|
|
5357
5389
|
provide: NG_VALUE_ACCESSOR,
|
|
5358
5390
|
useExisting: DBCustomSelect,
|
|
5359
5391
|
multi: true
|
|
@@ -5567,7 +5599,7 @@ class DBCustomSelect {
|
|
|
5567
5599
|
>
|
|
5568
5600
|
</div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["removeButton", "id", "propOverrides", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "propOverrides", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["invalidMessage", "id", "propOverrides", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIconLeading", "showIcon", "iconLeading", "icon", "iconTrailing", "showRequiredAsterisk", "showIconTrailing", "label", "fieldSizing", "name", "type", "multiple", "accept", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "enterkeyhint", "inputmode", "ariaDescribedBy", "messageSize", "messageIcon", "validMessageSize", "invalidMessageSize", "hidden", "errors"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus", "touch"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "propOverrides", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["isGroupTitle", "showDivider", "type", "checked", "id", "propOverrides", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label", "hidden", "errors"], outputs: ["checkedChange", "disabledChange", "change", "touch"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "placement", "text"] }] }); }
|
|
5569
5601
|
}
|
|
5570
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelect, decorators: [{
|
|
5571
5603
|
type: Component,
|
|
5572
5604
|
args: [{ providers: [{
|
|
5573
5605
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -5799,7 +5831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5799
5831
|
|
|
5800
5832
|
const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'];
|
|
5801
5833
|
|
|
5802
|
-
const defaultProps$
|
|
5834
|
+
const defaultProps$t = {};
|
|
5803
5835
|
class DBCustomSelectFormField {
|
|
5804
5836
|
setupObserver(element) {
|
|
5805
5837
|
if (!element)
|
|
@@ -5879,8 +5911,8 @@ class DBCustomSelectFormField {
|
|
|
5879
5911
|
ngOnDestroy() {
|
|
5880
5912
|
this.observer()?.disconnect();
|
|
5881
5913
|
}
|
|
5882
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5883
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
5914
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelectFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5915
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<summary
|
|
5884
5916
|
#_ref
|
|
5885
5917
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
5886
5918
|
[class]="cls('db-custom-select-form-field', className())"
|
|
@@ -5888,7 +5920,7 @@ class DBCustomSelectFormField {
|
|
|
5888
5920
|
<ng-content></ng-content>
|
|
5889
5921
|
</summary> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
5890
5922
|
}
|
|
5891
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBCustomSelectFormField, decorators: [{
|
|
5892
5924
|
type: Component,
|
|
5893
5925
|
args: [{ selector: "db-custom-select-form-field", standalone: true, imports: [CommonModule], template: `<summary
|
|
5894
5926
|
#_ref
|
|
@@ -5903,7 +5935,7 @@ const CustomSelectListItemTypeList = ['checkbox', 'radio'];
|
|
|
5903
5935
|
|
|
5904
5936
|
const SelectedTypeList = ['amount', 'text', 'tag'];
|
|
5905
5937
|
|
|
5906
|
-
const defaultProps$
|
|
5938
|
+
const defaultProps$s = {};
|
|
5907
5939
|
class DBDivider {
|
|
5908
5940
|
setupObserver(element) {
|
|
5909
5941
|
if (!element)
|
|
@@ -5987,8 +6019,8 @@ class DBDivider {
|
|
|
5987
6019
|
ngOnDestroy() {
|
|
5988
6020
|
this.observer()?.disconnect();
|
|
5989
6021
|
}
|
|
5990
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5991
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
6022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
5992
6024
|
#_ref
|
|
5993
6025
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
5994
6026
|
[attr.data-margin]="margin()"
|
|
@@ -5998,7 +6030,7 @@ class DBDivider {
|
|
|
5998
6030
|
[class]="cls('db-divider', className())"
|
|
5999
6031
|
></div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
6000
6032
|
}
|
|
6001
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
6033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBDivider, decorators: [{
|
|
6002
6034
|
type: Component,
|
|
6003
6035
|
args: [{ selector: "db-divider", standalone: true, imports: [CommonModule], template: `<div
|
|
6004
6036
|
#_ref
|
|
@@ -6014,7 +6046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6014
6046
|
const DividerMarginList = ['none', '_'];
|
|
6015
6047
|
const DividerVariantList = ['horizontal', 'vertical'];
|
|
6016
6048
|
|
|
6017
|
-
const defaultProps$
|
|
6049
|
+
const defaultProps$r = {};
|
|
6018
6050
|
class DBDrawer {
|
|
6019
6051
|
isNotModal() {
|
|
6020
6052
|
return (this.position() === "absolute" ||
|
|
@@ -6046,10 +6078,12 @@ class DBDrawer {
|
|
|
6046
6078
|
this.close.emit(event);
|
|
6047
6079
|
}
|
|
6048
6080
|
}
|
|
6049
|
-
|
|
6081
|
+
const isBackdrop = event.target?.nodeName === "DIALOG" &&
|
|
6050
6082
|
event.type === "click" &&
|
|
6051
6083
|
this.backdrop() !== "none" &&
|
|
6052
|
-
this.backdropPointerDown()
|
|
6084
|
+
this.backdropPointerDown();
|
|
6085
|
+
const isCloseButton = Boolean(event.target?.closest?.('[data-action="close"]'));
|
|
6086
|
+
if (isBackdrop || isCloseButton) {
|
|
6053
6087
|
if (this.close) {
|
|
6054
6088
|
this.close.emit(event);
|
|
6055
6089
|
}
|
|
@@ -6062,6 +6096,16 @@ class DBDrawer {
|
|
|
6062
6096
|
handleDialogOpen() {
|
|
6063
6097
|
if (this._ref()?.nativeElement) {
|
|
6064
6098
|
const dialogOpen = getBoolean(this.open(), "open");
|
|
6099
|
+
if (dialogOpen && this._closeTimeoutId() !== undefined) {
|
|
6100
|
+
// Cancel any pending close timeout when reopening to prevent
|
|
6101
|
+
// a stale timer from closing the dialog after it was reopened.
|
|
6102
|
+
clearTimeout(this._closeTimeoutId());
|
|
6103
|
+
this._closeTimeoutId.set(undefined);
|
|
6104
|
+
// Restore the open transition state since the close was cancelled
|
|
6105
|
+
if (this.dialogContainerRef()?.nativeElement) {
|
|
6106
|
+
(this.dialogContainerRef()?.nativeElement).dataset["transition"] = "open";
|
|
6107
|
+
}
|
|
6108
|
+
}
|
|
6065
6109
|
if (dialogOpen && !this._ref()?.nativeElement.open) {
|
|
6066
6110
|
if (this.dialogContainerRef()?.nativeElement) {
|
|
6067
6111
|
(this.dialogContainerRef()?.nativeElement).removeAttribute("data-transition");
|
|
@@ -6070,11 +6114,6 @@ class DBDrawer {
|
|
|
6070
6114
|
this._ref()?.nativeElement.show();
|
|
6071
6115
|
}
|
|
6072
6116
|
else {
|
|
6073
|
-
// Set the closedby attribute imperatively: the JSX
|
|
6074
|
-
// dialog type does not know this attribute yet, and it
|
|
6075
|
-
// only applies to modal dialogs. "any" enables native
|
|
6076
|
-
// light dismiss (backdrop click / Esc).
|
|
6077
|
-
this._ref()?.nativeElement.setAttribute("closedby", "any");
|
|
6078
6117
|
this._ref()?.nativeElement.showModal();
|
|
6079
6118
|
}
|
|
6080
6119
|
void delay(() => {
|
|
@@ -6087,9 +6126,25 @@ class DBDrawer {
|
|
|
6087
6126
|
if (this.dialogContainerRef()?.nativeElement) {
|
|
6088
6127
|
(this.dialogContainerRef()?.nativeElement).dataset["transition"] = "close";
|
|
6089
6128
|
}
|
|
6090
|
-
|
|
6129
|
+
// Cancel any previously scheduled close to prevent double-close on rapid toggling
|
|
6130
|
+
if (this._closeTimeoutId() !== undefined) {
|
|
6131
|
+
clearTimeout(this._closeTimeoutId());
|
|
6132
|
+
}
|
|
6133
|
+
// Read close delay from CSS (already accounts for prefers-reduced-motion)
|
|
6134
|
+
let closeDelay = 0;
|
|
6135
|
+
if (this.dialogContainerRef()?.nativeElement) {
|
|
6136
|
+
const durationStr = getComputedStyle(this.dialogContainerRef()?.nativeElement)
|
|
6137
|
+
.getPropertyValue("--db-drawer-close-delay")
|
|
6138
|
+
.trim();
|
|
6139
|
+
const seconds = parseFloat(durationStr);
|
|
6140
|
+
if (seconds > 0) {
|
|
6141
|
+
closeDelay = seconds * 1000 + 1;
|
|
6142
|
+
}
|
|
6143
|
+
}
|
|
6144
|
+
this._closeTimeoutId.set(window.setTimeout(() => {
|
|
6091
6145
|
this._ref()?.nativeElement?.close();
|
|
6092
|
-
|
|
6146
|
+
this._closeTimeoutId.set(undefined);
|
|
6147
|
+
}, closeDelay));
|
|
6093
6148
|
}
|
|
6094
6149
|
}
|
|
6095
6150
|
}
|
|
@@ -6115,7 +6170,6 @@ class DBDrawer {
|
|
|
6115
6170
|
constructor() {
|
|
6116
6171
|
this.cls = cls;
|
|
6117
6172
|
this.getBooleanAsString = getBooleanAsString;
|
|
6118
|
-
this.DEFAULT_CLOSE_BUTTON = DEFAULT_CLOSE_BUTTON;
|
|
6119
6173
|
this.open = input(...(ngDevMode ? [undefined, { debugName: "open" }] : /* istanbul ignore next */ []));
|
|
6120
6174
|
this.position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : /* istanbul ignore next */ []));
|
|
6121
6175
|
this.backdrop = input(...(ngDevMode ? [undefined, { debugName: "backdrop" }] : /* istanbul ignore next */ []));
|
|
@@ -6124,16 +6178,15 @@ class DBDrawer {
|
|
|
6124
6178
|
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
6125
6179
|
this.direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : /* istanbul ignore next */ []));
|
|
6126
6180
|
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
6127
|
-
this.
|
|
6128
|
-
this.
|
|
6181
|
+
this.containerSize = input(...(ngDevMode ? [undefined, { debugName: "containerSize" }] : /* istanbul ignore next */ []));
|
|
6182
|
+
this.showSpacing = input(...(ngDevMode ? [undefined, { debugName: "showSpacing" }] : /* istanbul ignore next */ []));
|
|
6129
6183
|
this.rounded = input(...(ngDevMode ? [undefined, { debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
6130
|
-
this.closeButtonId = input(...(ngDevMode ? [undefined, { debugName: "closeButtonId" }] : /* istanbul ignore next */ []));
|
|
6131
|
-
this.closeButtonText = input(...(ngDevMode ? [undefined, { debugName: "closeButtonText" }] : /* istanbul ignore next */ []));
|
|
6132
6184
|
this.close = output();
|
|
6133
6185
|
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
6134
6186
|
this.dialogContainerRef = viewChild("dialogContainerRef", ...(ngDevMode ? [{ debugName: "dialogContainerRef" }] : /* istanbul ignore next */ []));
|
|
6135
6187
|
this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
6136
6188
|
this.backdropPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "backdropPointerDown" }] : /* istanbul ignore next */ []));
|
|
6189
|
+
this._closeTimeoutId = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeTimeoutId" }] : /* istanbul ignore next */ []));
|
|
6137
6190
|
this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
|
|
6138
6191
|
if (typeof window !== "undefined") {
|
|
6139
6192
|
effect(() => {
|
|
@@ -6215,10 +6268,21 @@ class DBDrawer {
|
|
|
6215
6268
|
}
|
|
6216
6269
|
}
|
|
6217
6270
|
ngOnDestroy() {
|
|
6271
|
+
// Cancel any pending close timeout to prevent stale references
|
|
6272
|
+
if (this._closeTimeoutId() !== undefined) {
|
|
6273
|
+
clearTimeout(this._closeTimeoutId());
|
|
6274
|
+
}
|
|
6275
|
+
if (this._ref()?.nativeElement && this.position() === "absolute") {
|
|
6276
|
+
const refElement = this._ref()?.nativeElement;
|
|
6277
|
+
const parent = refElement.parentElement;
|
|
6278
|
+
if (parent) {
|
|
6279
|
+
parent.style.position = "";
|
|
6280
|
+
}
|
|
6281
|
+
}
|
|
6218
6282
|
this.observer()?.disconnect();
|
|
6219
6283
|
}
|
|
6220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
6284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBDrawer, isStandalone: true, selector: "db-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, containerSize: { classPropertyName: "containerSize", publicName: "containerSize", isSignal: true, isRequired: false, transformFunction: null }, showSpacing: { classPropertyName: "showSpacing", publicName: "showSpacing", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }, { propertyName: "dialogContainerRef", first: true, predicate: ["dialogContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<dialog
|
|
6222
6286
|
class="db-drawer"
|
|
6223
6287
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
6224
6288
|
#_ref
|
|
@@ -6233,32 +6297,20 @@ class DBDrawer {
|
|
|
6233
6297
|
<article
|
|
6234
6298
|
#dialogContainerRef
|
|
6235
6299
|
[class]="cls('db-drawer-container', className())"
|
|
6236
|
-
[attr.data-
|
|
6237
|
-
[attr.data-
|
|
6300
|
+
[attr.data-container-size]="containerSize()"
|
|
6301
|
+
[attr.data-show-spacing]="getBooleanAsString(showSpacing() ?? true, 'showSpacing')"
|
|
6238
6302
|
[attr.data-direction]="direction()"
|
|
6239
6303
|
[attr.data-rounded]="getBooleanAsString(rounded(), 'rounded')"
|
|
6240
6304
|
>
|
|
6241
|
-
<
|
|
6242
|
-
<div class="db-drawer-header-text">
|
|
6243
|
-
<ng-content select="[drawer-header]"> </ng-content>
|
|
6244
|
-
</div>
|
|
6245
|
-
<db-button
|
|
6246
|
-
icon="cross"
|
|
6247
|
-
variant="ghost"
|
|
6248
|
-
className="button-close-drawer"
|
|
6249
|
-
[id]="closeButtonId()"
|
|
6250
|
-
[noText]="true"
|
|
6251
|
-
(click)="handleClose($event, true)"
|
|
6252
|
-
>{{closeButtonText() ?? DEFAULT_CLOSE_BUTTON}}</db-button
|
|
6253
|
-
>
|
|
6254
|
-
</header>
|
|
6305
|
+
<ng-content select="[header]"> </ng-content>
|
|
6255
6306
|
<div class="db-drawer-content"><ng-content></ng-content></div>
|
|
6307
|
+
<ng-content select="[footer]"> </ng-content>
|
|
6256
6308
|
</article>
|
|
6257
|
-
</dialog> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }
|
|
6309
|
+
</dialog> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
6258
6310
|
}
|
|
6259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
6311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBDrawer, decorators: [{
|
|
6260
6312
|
type: Component,
|
|
6261
|
-
args: [{ selector: "db-drawer", standalone: true, imports: [CommonModule
|
|
6313
|
+
args: [{ selector: "db-drawer", standalone: true, imports: [CommonModule], template: `<dialog
|
|
6262
6314
|
class="db-drawer"
|
|
6263
6315
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
6264
6316
|
#_ref
|
|
@@ -6273,226 +6325,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6273
6325
|
<article
|
|
6274
6326
|
#dialogContainerRef
|
|
6275
6327
|
[class]="cls('db-drawer-container', className())"
|
|
6276
|
-
[attr.data-
|
|
6277
|
-
[attr.data-
|
|
6328
|
+
[attr.data-container-size]="containerSize()"
|
|
6329
|
+
[attr.data-show-spacing]="getBooleanAsString(showSpacing() ?? true, 'showSpacing')"
|
|
6278
6330
|
[attr.data-direction]="direction()"
|
|
6279
6331
|
[attr.data-rounded]="getBooleanAsString(rounded(), 'rounded')"
|
|
6280
6332
|
>
|
|
6281
|
-
<
|
|
6282
|
-
<div class="db-drawer-header-text">
|
|
6283
|
-
<ng-content select="[drawer-header]"> </ng-content>
|
|
6284
|
-
</div>
|
|
6285
|
-
<db-button
|
|
6286
|
-
icon="cross"
|
|
6287
|
-
variant="ghost"
|
|
6288
|
-
className="button-close-drawer"
|
|
6289
|
-
[id]="closeButtonId()"
|
|
6290
|
-
[noText]="true"
|
|
6291
|
-
(click)="handleClose($event, true)"
|
|
6292
|
-
>{{closeButtonText() ?? DEFAULT_CLOSE_BUTTON}}</db-button
|
|
6293
|
-
>
|
|
6294
|
-
</header>
|
|
6333
|
+
<ng-content select="[header]"> </ng-content>
|
|
6295
6334
|
<div class="db-drawer-content"><ng-content></ng-content></div>
|
|
6335
|
+
<ng-content select="[footer]"> </ng-content>
|
|
6296
6336
|
</article>
|
|
6297
6337
|
</dialog> `, styles: [":host{display:contents}\n"] }]
|
|
6298
|
-
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }],
|
|
6299
|
-
|
|
6300
|
-
const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
|
|
6301
|
-
const DrawerDirectionList = ['left', 'right', 'up', 'down'];
|
|
6302
|
-
const DrawerVariantList = ['modal', 'inside'];
|
|
6303
|
-
const DrawerPositionList = ['fixed', 'absolute'];
|
|
6304
|
-
|
|
6305
|
-
const isEventTargetNavigationItem = (event) => {
|
|
6306
|
-
const { target } = event;
|
|
6307
|
-
return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));
|
|
6308
|
-
};
|
|
6309
|
-
class NavigationItemSafeTriangle {
|
|
6310
|
-
constructor(element, subNavigation) {
|
|
6311
|
-
this.parentSubNavigation = null;
|
|
6312
|
-
this.initialized = false;
|
|
6313
|
-
this.mouseX = 0;
|
|
6314
|
-
this.mouseY = 0;
|
|
6315
|
-
this.element = element;
|
|
6316
|
-
this.subNavigation = subNavigation;
|
|
6317
|
-
if (!this.element || !this.subNavigation) {
|
|
6318
|
-
return;
|
|
6319
|
-
}
|
|
6320
|
-
this.parentSubNavigation = this.element?.closest('.db-sub-navigation');
|
|
6321
|
-
/*
|
|
6322
|
-
* only initiate if:
|
|
6323
|
-
* 1. item is not at root navigation level
|
|
6324
|
-
* 2. item is not in the mobile navigation / within db-drawer
|
|
6325
|
-
*/
|
|
6326
|
-
if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
|
|
6327
|
-
this.init();
|
|
6328
|
-
}
|
|
6329
|
-
}
|
|
6330
|
-
init() {
|
|
6331
|
-
const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
|
|
6332
|
-
// the triangle has the width of the sub-navigation, current nav-item can be wider.
|
|
6333
|
-
// so the width of the triangle must be adapted to a possibly wider nav-item.
|
|
6334
|
-
this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);
|
|
6335
|
-
this.initialized = true;
|
|
6336
|
-
}
|
|
6337
|
-
enableFollow() {
|
|
6338
|
-
if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {
|
|
6339
|
-
return;
|
|
6340
|
-
}
|
|
6341
|
-
const dataOutsidePair = handleDataOutside(this.subNavigation);
|
|
6342
|
-
const itemRect = this.element.getBoundingClientRect();
|
|
6343
|
-
const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
|
|
6344
|
-
this.triangleData = {
|
|
6345
|
-
itemRect,
|
|
6346
|
-
parentElementWidth,
|
|
6347
|
-
subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
|
|
6348
|
-
padding: (parentElementWidth - itemRect.width) / 2,
|
|
6349
|
-
outsideVX: dataOutsidePair.vx,
|
|
6350
|
-
outsideVY: dataOutsidePair.vy
|
|
6351
|
-
};
|
|
6352
|
-
}
|
|
6353
|
-
disableFollow() {
|
|
6354
|
-
this.triangleData = undefined;
|
|
6355
|
-
}
|
|
6356
|
-
getTriangleTipX() {
|
|
6357
|
-
if (!this.triangleData)
|
|
6358
|
-
return 0;
|
|
6359
|
-
if (this.triangleData.outsideVX === 'right') {
|
|
6360
|
-
// vertical flipped triangle needs an inverted x pos
|
|
6361
|
-
return this.triangleData.itemRect.width - this.mouseX;
|
|
6362
|
-
}
|
|
6363
|
-
// triangle stops shrinking from 75% x pos
|
|
6364
|
-
return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);
|
|
6365
|
-
}
|
|
6366
|
-
getTriangleTipY() {
|
|
6367
|
-
if (!this.triangleData)
|
|
6368
|
-
return 0;
|
|
6369
|
-
// padding must be added to the y pos of the tip so that the y pos matches the cursor
|
|
6370
|
-
const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
|
|
6371
|
-
if (this.triangleData.outsideVY === 'bottom') {
|
|
6372
|
-
// add offset to tip y pos to match corrected sub-navigation y pos
|
|
6373
|
-
return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);
|
|
6374
|
-
}
|
|
6375
|
-
return mouseYLimited;
|
|
6376
|
-
}
|
|
6377
|
-
hasMouseEnteredSubNavigation() {
|
|
6378
|
-
if (!this.triangleData) {
|
|
6379
|
-
return false;
|
|
6380
|
-
}
|
|
6381
|
-
const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';
|
|
6382
|
-
if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {
|
|
6383
|
-
return true;
|
|
6384
|
-
}
|
|
6385
|
-
if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {
|
|
6386
|
-
return true;
|
|
6387
|
-
}
|
|
6388
|
-
return false;
|
|
6389
|
-
}
|
|
6390
|
-
getTriangleCoordinates(variant) {
|
|
6391
|
-
if (!this.triangleData) {
|
|
6392
|
-
return;
|
|
6393
|
-
}
|
|
6394
|
-
if (variant === 'fill-gap') {
|
|
6395
|
-
const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
|
|
6396
|
-
const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
|
|
6397
|
-
return {
|
|
6398
|
-
lb: `${xStart} ${itemHeight}`,
|
|
6399
|
-
lt: `${xStart} 0`,
|
|
6400
|
-
rt: '100% 0',
|
|
6401
|
-
rb: `100% ${itemHeight}`
|
|
6402
|
-
};
|
|
6403
|
-
}
|
|
6404
|
-
const tipX = this.getTriangleTipX();
|
|
6405
|
-
const tipY = this.getTriangleTipY();
|
|
6406
|
-
const lb = `${tipX}px ${tipY}px`;
|
|
6407
|
-
const lt = `${tipX}px ${tipY}px`;
|
|
6408
|
-
return {
|
|
6409
|
-
lb,
|
|
6410
|
-
lt,
|
|
6411
|
-
rt: '100% 0',
|
|
6412
|
-
rb: '100% 100%'
|
|
6413
|
-
};
|
|
6414
|
-
}
|
|
6415
|
-
followByMouseEvent(event) {
|
|
6416
|
-
if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {
|
|
6417
|
-
return;
|
|
6418
|
-
}
|
|
6419
|
-
this.mouseX = event.clientX - this.triangleData.itemRect.left;
|
|
6420
|
-
this.mouseY = event.clientY - this.triangleData.itemRect.top;
|
|
6421
|
-
const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
|
|
6422
|
-
const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
|
|
6423
|
-
if (!coordinates) {
|
|
6424
|
-
return;
|
|
6425
|
-
}
|
|
6426
|
-
this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);
|
|
6427
|
-
if (isOverSubNavigation) {
|
|
6428
|
-
this.triangleData = undefined;
|
|
6429
|
-
}
|
|
6430
|
-
}
|
|
6431
|
-
}
|
|
6432
|
-
var navigation = {
|
|
6433
|
-
isEventTargetNavigationItem,
|
|
6434
|
-
NavigationItemSafeTriangle
|
|
6435
|
-
};
|
|
6436
|
-
|
|
6437
|
-
/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
|
|
6438
|
-
class SecondaryActionDirective {
|
|
6439
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SecondaryActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6440
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SecondaryActionDirective, isStandalone: true, selector: "[dbSecondaryAction]", ngImport: i0 }); }
|
|
6441
|
-
}
|
|
6442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SecondaryActionDirective, decorators: [{
|
|
6443
|
-
type: Directive,
|
|
6444
|
-
args: [{
|
|
6445
|
-
selector: '[dbSecondaryAction]',
|
|
6446
|
-
standalone: true
|
|
6447
|
-
}]
|
|
6448
|
-
}] });
|
|
6449
|
-
|
|
6450
|
-
/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
|
|
6451
|
-
class MetaNavigationDirective {
|
|
6452
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MetaNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6453
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: MetaNavigationDirective, isStandalone: true, selector: "[dbMetaNavigation]", ngImport: i0 }); }
|
|
6454
|
-
}
|
|
6455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MetaNavigationDirective, decorators: [{
|
|
6456
|
-
type: Directive,
|
|
6457
|
-
args: [{
|
|
6458
|
-
selector: '[dbMetaNavigation]',
|
|
6459
|
-
standalone: true
|
|
6460
|
-
}]
|
|
6461
|
-
}] });
|
|
6462
|
-
|
|
6463
|
-
/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
|
|
6464
|
-
class NavigationDirective {
|
|
6465
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6466
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: NavigationDirective, isStandalone: true, selector: "[dbNavigation]", ngImport: i0 }); }
|
|
6467
|
-
}
|
|
6468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavigationDirective, decorators: [{
|
|
6469
|
-
type: Directive,
|
|
6470
|
-
args: [{
|
|
6471
|
-
selector: '[dbNavigation]',
|
|
6472
|
-
standalone: true
|
|
6473
|
-
}]
|
|
6474
|
-
}] });
|
|
6338
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], containerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerSize", required: false }] }], showSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpacing", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], dialogContainerRef: [{ type: i0.ViewChild, args: ["dialogContainerRef", { isSignal: true }] }] } });
|
|
6475
6339
|
|
|
6476
|
-
const defaultProps$
|
|
6477
|
-
class
|
|
6478
|
-
handleToggle(event) {
|
|
6479
|
-
if (event && event.stopPropagation) {
|
|
6480
|
-
event.stopPropagation();
|
|
6481
|
-
}
|
|
6482
|
-
const open = !getBoolean(this.drawerOpen(), "drawerOpen");
|
|
6483
|
-
if (this.toggle) {
|
|
6484
|
-
this.toggle.emit(open);
|
|
6485
|
-
}
|
|
6486
|
-
}
|
|
6487
|
-
handleNavigationItemClick(event) {
|
|
6488
|
-
if (isEventTargetNavigationItem(event)) {
|
|
6489
|
-
this.handleToggle();
|
|
6490
|
-
}
|
|
6491
|
-
}
|
|
6340
|
+
const defaultProps$q = {};
|
|
6341
|
+
class DBDrawerFooter {
|
|
6492
6342
|
setupObserver(element) {
|
|
6493
6343
|
if (!element)
|
|
6494
6344
|
return;
|
|
6495
|
-
const parent = element.closest("db-
|
|
6345
|
+
const parent = element.closest("db-drawer-footer");
|
|
6496
6346
|
if (!parent || this.observer())
|
|
6497
6347
|
return;
|
|
6498
6348
|
this.observer.set(new MutationObserver((mutations) => {
|
|
@@ -6500,7 +6350,7 @@ class DBHeader {
|
|
|
6500
6350
|
const attr = mutation.target.attributes.getNamedItem(mutation.attributeName ?? "");
|
|
6501
6351
|
return attr?.value !== mutation.oldValue;
|
|
6502
6352
|
})) {
|
|
6503
|
-
this.enableAttributePassing(element, "db-
|
|
6353
|
+
this.enableAttributePassing(element, "db-drawer-footer");
|
|
6504
6354
|
}
|
|
6505
6355
|
}));
|
|
6506
6356
|
this.observer().observe(parent, {
|
|
@@ -6510,17 +6360,468 @@ class DBHeader {
|
|
|
6510
6360
|
}
|
|
6511
6361
|
constructor() {
|
|
6512
6362
|
this.cls = cls;
|
|
6513
|
-
this.DEFAULT_BURGER_MENU = DEFAULT_BURGER_MENU;
|
|
6514
|
-
this.getBoolean = getBoolean;
|
|
6515
|
-
this.forceMobile = input(...(ngDevMode ? [undefined, { debugName: "forceMobile" }] : /* istanbul ignore next */ []));
|
|
6516
|
-
this.drawerOpen = input(...(ngDevMode ? [undefined, { debugName: "drawerOpen" }] : /* istanbul ignore next */ []));
|
|
6517
|
-
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
6518
6363
|
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
6519
6364
|
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
6520
|
-
this.
|
|
6521
|
-
this.
|
|
6522
|
-
this.
|
|
6365
|
+
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
6366
|
+
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
6367
|
+
this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
|
|
6368
|
+
}
|
|
6369
|
+
/**
|
|
6370
|
+
* Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
|
|
6371
|
+
* @param element the ref for the component
|
|
6372
|
+
* @param customElementSelector the custom element like `my-component`
|
|
6373
|
+
*/
|
|
6374
|
+
enableAttributePassing(element, customElementSelector) {
|
|
6375
|
+
const parent = element?.closest(customElementSelector);
|
|
6376
|
+
if (element && parent) {
|
|
6377
|
+
const attributes = parent.attributes;
|
|
6378
|
+
for (let i = 0; i < attributes.length; i++) {
|
|
6379
|
+
const attr = attributes.item(i);
|
|
6380
|
+
if (attr && attr.name !== 'data-density' &&
|
|
6381
|
+
(attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
|
|
6382
|
+
if (attr.value) {
|
|
6383
|
+
element.setAttribute(attr.name, attr.value);
|
|
6384
|
+
}
|
|
6385
|
+
else {
|
|
6386
|
+
element.removeAttribute(attr.name);
|
|
6387
|
+
}
|
|
6388
|
+
parent.removeAttribute(attr.name);
|
|
6389
|
+
}
|
|
6390
|
+
else if (attr && ["style"].includes(attr.name)) {
|
|
6391
|
+
element.setAttribute(attr.name, attr.value);
|
|
6392
|
+
parent.removeAttribute(attr.name);
|
|
6393
|
+
}
|
|
6394
|
+
else if (attr && attr.name === "class") {
|
|
6395
|
+
const isWebComponent = attr.value.includes("hydrated");
|
|
6396
|
+
const value = attr.value.replace("hydrated", "").trim();
|
|
6397
|
+
const currentClass = element.getAttribute("class");
|
|
6398
|
+
element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
|
|
6399
|
+
if (isWebComponent) {
|
|
6400
|
+
// Stencil is using this class for lazy loading component
|
|
6401
|
+
parent.setAttribute("class", "hydrated");
|
|
6402
|
+
}
|
|
6403
|
+
else {
|
|
6404
|
+
parent.removeAttribute(attr.name);
|
|
6405
|
+
}
|
|
6406
|
+
}
|
|
6407
|
+
}
|
|
6408
|
+
}
|
|
6409
|
+
}
|
|
6410
|
+
ngAfterViewInit() {
|
|
6411
|
+
const element = this._ref()?.nativeElement;
|
|
6412
|
+
this.enableAttributePassing(element, "db-drawer-footer");
|
|
6413
|
+
if (typeof window !== "undefined") {
|
|
6414
|
+
this.setupObserver(element);
|
|
6415
|
+
}
|
|
6416
|
+
}
|
|
6417
|
+
ngOnDestroy() {
|
|
6418
|
+
this.observer()?.disconnect();
|
|
6419
|
+
}
|
|
6420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBDrawerFooter, isStandalone: true, selector: "db-drawer-footer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<footer
|
|
6422
|
+
#_ref
|
|
6423
|
+
[attr.id]="id() ?? propOverrides()?.id"
|
|
6424
|
+
[class]="cls('db-drawer-footer', className())"
|
|
6425
|
+
>
|
|
6426
|
+
<ng-content></ng-content>
|
|
6427
|
+
</footer> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
6428
|
+
}
|
|
6429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBDrawerFooter, decorators: [{
|
|
6430
|
+
type: Component,
|
|
6431
|
+
args: [{ selector: "db-drawer-footer", standalone: true, imports: [CommonModule], template: `<footer
|
|
6432
|
+
#_ref
|
|
6433
|
+
[attr.id]="id() ?? propOverrides()?.id"
|
|
6434
|
+
[class]="cls('db-drawer-footer', className())"
|
|
6435
|
+
>
|
|
6436
|
+
<ng-content></ng-content>
|
|
6437
|
+
</footer> `, styles: [":host{display:contents}\n"] }]
|
|
6438
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
6439
|
+
|
|
6440
|
+
const defaultProps$p = { closeButtonText: DEFAULT_CLOSE_BUTTON };
|
|
6441
|
+
class DBDrawerHeader {
|
|
6442
|
+
setAriaLabelledBy() {
|
|
6443
|
+
if (this._ref()?.nativeElement) {
|
|
6444
|
+
const dialog = (this._ref()?.nativeElement).closest("dialog");
|
|
6445
|
+
if (dialog) {
|
|
6446
|
+
dialog.setAttribute("aria-labelledby", this._headingId());
|
|
6447
|
+
}
|
|
6448
|
+
}
|
|
6449
|
+
}
|
|
6450
|
+
removeAriaLabelledBy() {
|
|
6451
|
+
if (this._ref()?.nativeElement) {
|
|
6452
|
+
const dialog = (this._ref()?.nativeElement).closest("dialog");
|
|
6453
|
+
if (dialog &&
|
|
6454
|
+
dialog.getAttribute("aria-labelledby") === this._headingId()) {
|
|
6455
|
+
dialog.removeAttribute("aria-labelledby");
|
|
6456
|
+
}
|
|
6457
|
+
}
|
|
6458
|
+
}
|
|
6459
|
+
setupObserver(element) {
|
|
6460
|
+
if (!element)
|
|
6461
|
+
return;
|
|
6462
|
+
const parent = element.closest("db-drawer-header");
|
|
6463
|
+
if (!parent || this.observer())
|
|
6464
|
+
return;
|
|
6465
|
+
this.observer.set(new MutationObserver((mutations) => {
|
|
6466
|
+
if (mutations.some((mutation) => {
|
|
6467
|
+
const attr = mutation.target.attributes.getNamedItem(mutation.attributeName ?? "");
|
|
6468
|
+
return attr?.value !== mutation.oldValue;
|
|
6469
|
+
})) {
|
|
6470
|
+
this.enableAttributePassing(element, "db-drawer-header");
|
|
6471
|
+
}
|
|
6472
|
+
}));
|
|
6473
|
+
this.observer().observe(parent, {
|
|
6474
|
+
attributes: true,
|
|
6475
|
+
attributeOldValue: true,
|
|
6476
|
+
});
|
|
6477
|
+
}
|
|
6478
|
+
constructor() {
|
|
6479
|
+
this.cls = cls;
|
|
6480
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
6481
|
+
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
6482
|
+
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
6483
|
+
this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
|
|
6484
|
+
this.closeButtonId = input(...(ngDevMode ? [undefined, { debugName: "closeButtonId" }] : /* istanbul ignore next */ []));
|
|
6485
|
+
this.closeButtonText = input(defaultProps$p["closeButtonText"], ...(ngDevMode ? [{ debugName: "closeButtonText" }] : /* istanbul ignore next */ []));
|
|
6486
|
+
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
6487
|
+
this._headingId = signal("db-drawer-header-heading-" + uuid(), ...(ngDevMode ? [{ debugName: "_headingId" }] : /* istanbul ignore next */ []));
|
|
6488
|
+
this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
|
|
6489
|
+
}
|
|
6490
|
+
/**
|
|
6491
|
+
* Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
|
|
6492
|
+
* @param element the ref for the component
|
|
6493
|
+
* @param customElementSelector the custom element like `my-component`
|
|
6494
|
+
*/
|
|
6495
|
+
enableAttributePassing(element, customElementSelector) {
|
|
6496
|
+
const parent = element?.closest(customElementSelector);
|
|
6497
|
+
if (element && parent) {
|
|
6498
|
+
const attributes = parent.attributes;
|
|
6499
|
+
for (let i = 0; i < attributes.length; i++) {
|
|
6500
|
+
const attr = attributes.item(i);
|
|
6501
|
+
if (attr && attr.name !== 'data-density' &&
|
|
6502
|
+
(attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
|
|
6503
|
+
if (attr.value) {
|
|
6504
|
+
element.setAttribute(attr.name, attr.value);
|
|
6505
|
+
}
|
|
6506
|
+
else {
|
|
6507
|
+
element.removeAttribute(attr.name);
|
|
6508
|
+
}
|
|
6509
|
+
parent.removeAttribute(attr.name);
|
|
6510
|
+
}
|
|
6511
|
+
else if (attr && ["style"].includes(attr.name)) {
|
|
6512
|
+
element.setAttribute(attr.name, attr.value);
|
|
6513
|
+
parent.removeAttribute(attr.name);
|
|
6514
|
+
}
|
|
6515
|
+
else if (attr && attr.name === "class") {
|
|
6516
|
+
const isWebComponent = attr.value.includes("hydrated");
|
|
6517
|
+
const value = attr.value.replace("hydrated", "").trim();
|
|
6518
|
+
const currentClass = element.getAttribute("class");
|
|
6519
|
+
element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
|
|
6520
|
+
if (isWebComponent) {
|
|
6521
|
+
// Stencil is using this class for lazy loading component
|
|
6522
|
+
parent.setAttribute("class", "hydrated");
|
|
6523
|
+
}
|
|
6524
|
+
else {
|
|
6525
|
+
parent.removeAttribute(attr.name);
|
|
6526
|
+
}
|
|
6527
|
+
}
|
|
6528
|
+
}
|
|
6529
|
+
}
|
|
6530
|
+
}
|
|
6531
|
+
ngAfterViewInit() {
|
|
6532
|
+
const element = this._ref()?.nativeElement;
|
|
6533
|
+
this.enableAttributePassing(element, "db-drawer-header");
|
|
6534
|
+
if (typeof window !== "undefined") {
|
|
6535
|
+
this.setAriaLabelledBy();
|
|
6536
|
+
this.setupObserver(element);
|
|
6537
|
+
}
|
|
6538
|
+
}
|
|
6539
|
+
ngOnDestroy() {
|
|
6540
|
+
this.removeAriaLabelledBy();
|
|
6541
|
+
this.observer()?.disconnect();
|
|
6542
|
+
}
|
|
6543
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBDrawerHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBDrawerHeader, isStandalone: true, selector: "db-drawer-header", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
6545
|
+
#_ref
|
|
6546
|
+
[attr.id]="id() ?? propOverrides()?.id"
|
|
6547
|
+
[class]="cls('db-drawer-header', className())"
|
|
6548
|
+
>
|
|
6549
|
+
<header class="db-drawer-header-container" [attr.id]="_headingId()">
|
|
6550
|
+
<ng-content select="[start-slot]"> </ng-content>
|
|
6551
|
+
@if(text()){
|
|
6552
|
+
<h2>{{text()}}</h2>
|
|
6553
|
+
}@else{
|
|
6554
|
+
<ng-content></ng-content>
|
|
6555
|
+
}
|
|
6556
|
+
</header>
|
|
6557
|
+
<ng-content select="[end-slot]"> </ng-content>
|
|
6558
|
+
<db-button
|
|
6559
|
+
data-action="close"
|
|
6560
|
+
icon="cross"
|
|
6561
|
+
variant="ghost"
|
|
6562
|
+
type="button"
|
|
6563
|
+
[id]="closeButtonId()"
|
|
6564
|
+
[noText]="true"
|
|
6565
|
+
>{{closeButtonText()}}
|
|
6566
|
+
<db-tooltip>{{closeButtonText()}}</db-tooltip></db-button
|
|
6567
|
+
>
|
|
6568
|
+
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "placement", "text"] }] }); }
|
|
6569
|
+
}
|
|
6570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBDrawerHeader, decorators: [{
|
|
6571
|
+
type: Component,
|
|
6572
|
+
args: [{ selector: "db-drawer-header", standalone: true, imports: [CommonModule, DBButton, DBTooltip], template: `<div
|
|
6573
|
+
#_ref
|
|
6574
|
+
[attr.id]="id() ?? propOverrides()?.id"
|
|
6575
|
+
[class]="cls('db-drawer-header', className())"
|
|
6576
|
+
>
|
|
6577
|
+
<header class="db-drawer-header-container" [attr.id]="_headingId()">
|
|
6578
|
+
<ng-content select="[start-slot]"> </ng-content>
|
|
6579
|
+
@if(text()){
|
|
6580
|
+
<h2>{{text()}}</h2>
|
|
6581
|
+
}@else{
|
|
6582
|
+
<ng-content></ng-content>
|
|
6583
|
+
}
|
|
6584
|
+
</header>
|
|
6585
|
+
<ng-content select="[end-slot]"> </ng-content>
|
|
6586
|
+
<db-button
|
|
6587
|
+
data-action="close"
|
|
6588
|
+
icon="cross"
|
|
6589
|
+
variant="ghost"
|
|
6590
|
+
type="button"
|
|
6591
|
+
[id]="closeButtonId()"
|
|
6592
|
+
[noText]="true"
|
|
6593
|
+
>{{closeButtonText()}}
|
|
6594
|
+
<db-tooltip>{{closeButtonText()}}</db-tooltip></db-button
|
|
6595
|
+
>
|
|
6596
|
+
</div> `, styles: [":host{display:contents}\n"] }]
|
|
6597
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
6598
|
+
|
|
6599
|
+
const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
|
|
6600
|
+
const DrawerDirectionList = ['to-left', 'to-right', 'up', 'down'];
|
|
6601
|
+
const DrawerVariantList = ['modal', 'inside'];
|
|
6602
|
+
const DrawerPositionList = ['fixed', 'absolute'];
|
|
6603
|
+
const DrawerContainerSizeList = ['small', 'medium', 'large', 'full'];
|
|
6604
|
+
|
|
6605
|
+
const isEventTargetNavigationItem = (event) => {
|
|
6606
|
+
const { target } = event;
|
|
6607
|
+
return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));
|
|
6608
|
+
};
|
|
6609
|
+
class NavigationItemSafeTriangle {
|
|
6610
|
+
constructor(element, subNavigation) {
|
|
6611
|
+
this.parentSubNavigation = null;
|
|
6612
|
+
this.initialized = false;
|
|
6613
|
+
this.mouseX = 0;
|
|
6614
|
+
this.mouseY = 0;
|
|
6615
|
+
this.element = element;
|
|
6616
|
+
this.subNavigation = subNavigation;
|
|
6617
|
+
if (!this.element || !this.subNavigation) {
|
|
6618
|
+
return;
|
|
6619
|
+
}
|
|
6620
|
+
this.parentSubNavigation = this.element?.closest('.db-sub-navigation');
|
|
6621
|
+
/*
|
|
6622
|
+
* only initiate if:
|
|
6623
|
+
* 1. item is not at root navigation level
|
|
6624
|
+
* 2. item is not in the mobile navigation / within db-drawer
|
|
6625
|
+
*/
|
|
6626
|
+
if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
|
|
6627
|
+
this.init();
|
|
6628
|
+
}
|
|
6629
|
+
}
|
|
6630
|
+
init() {
|
|
6631
|
+
const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
|
|
6632
|
+
// the triangle has the width of the sub-navigation, current nav-item can be wider.
|
|
6633
|
+
// so the width of the triangle must be adapted to a possibly wider nav-item.
|
|
6634
|
+
this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);
|
|
6635
|
+
this.initialized = true;
|
|
6636
|
+
}
|
|
6637
|
+
enableFollow() {
|
|
6638
|
+
if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {
|
|
6639
|
+
return;
|
|
6640
|
+
}
|
|
6641
|
+
const dataOutsidePair = handleDataOutside(this.subNavigation);
|
|
6642
|
+
const itemRect = this.element.getBoundingClientRect();
|
|
6643
|
+
const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
|
|
6644
|
+
this.triangleData = {
|
|
6645
|
+
itemRect,
|
|
6646
|
+
parentElementWidth,
|
|
6647
|
+
subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
|
|
6648
|
+
padding: (parentElementWidth - itemRect.width) / 2,
|
|
6649
|
+
outsideVX: dataOutsidePair.vx,
|
|
6650
|
+
outsideVY: dataOutsidePair.vy
|
|
6651
|
+
};
|
|
6652
|
+
}
|
|
6653
|
+
disableFollow() {
|
|
6654
|
+
this.triangleData = undefined;
|
|
6655
|
+
}
|
|
6656
|
+
getTriangleTipX() {
|
|
6657
|
+
if (!this.triangleData)
|
|
6658
|
+
return 0;
|
|
6659
|
+
if (this.triangleData.outsideVX === 'right') {
|
|
6660
|
+
// vertical flipped triangle needs an inverted x pos
|
|
6661
|
+
return this.triangleData.itemRect.width - this.mouseX;
|
|
6662
|
+
}
|
|
6663
|
+
// triangle stops shrinking from 75% x pos
|
|
6664
|
+
return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);
|
|
6665
|
+
}
|
|
6666
|
+
getTriangleTipY() {
|
|
6667
|
+
if (!this.triangleData)
|
|
6668
|
+
return 0;
|
|
6669
|
+
// padding must be added to the y pos of the tip so that the y pos matches the cursor
|
|
6670
|
+
const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
|
|
6671
|
+
if (this.triangleData.outsideVY === 'bottom') {
|
|
6672
|
+
// add offset to tip y pos to match corrected sub-navigation y pos
|
|
6673
|
+
return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);
|
|
6674
|
+
}
|
|
6675
|
+
return mouseYLimited;
|
|
6676
|
+
}
|
|
6677
|
+
hasMouseEnteredSubNavigation() {
|
|
6678
|
+
if (!this.triangleData) {
|
|
6679
|
+
return false;
|
|
6680
|
+
}
|
|
6681
|
+
const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';
|
|
6682
|
+
if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {
|
|
6683
|
+
return true;
|
|
6684
|
+
}
|
|
6685
|
+
if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {
|
|
6686
|
+
return true;
|
|
6687
|
+
}
|
|
6688
|
+
return false;
|
|
6689
|
+
}
|
|
6690
|
+
getTriangleCoordinates(variant) {
|
|
6691
|
+
if (!this.triangleData) {
|
|
6692
|
+
return;
|
|
6693
|
+
}
|
|
6694
|
+
if (variant === 'fill-gap') {
|
|
6695
|
+
const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
|
|
6696
|
+
const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
|
|
6697
|
+
return {
|
|
6698
|
+
lb: `${xStart} ${itemHeight}`,
|
|
6699
|
+
lt: `${xStart} 0`,
|
|
6700
|
+
rt: '100% 0',
|
|
6701
|
+
rb: `100% ${itemHeight}`
|
|
6702
|
+
};
|
|
6703
|
+
}
|
|
6704
|
+
const tipX = this.getTriangleTipX();
|
|
6705
|
+
const tipY = this.getTriangleTipY();
|
|
6706
|
+
const lb = `${tipX}px ${tipY}px`;
|
|
6707
|
+
const lt = `${tipX}px ${tipY}px`;
|
|
6708
|
+
return {
|
|
6709
|
+
lb,
|
|
6710
|
+
lt,
|
|
6711
|
+
rt: '100% 0',
|
|
6712
|
+
rb: '100% 100%'
|
|
6713
|
+
};
|
|
6714
|
+
}
|
|
6715
|
+
followByMouseEvent(event) {
|
|
6716
|
+
if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {
|
|
6717
|
+
return;
|
|
6718
|
+
}
|
|
6719
|
+
this.mouseX = event.clientX - this.triangleData.itemRect.left;
|
|
6720
|
+
this.mouseY = event.clientY - this.triangleData.itemRect.top;
|
|
6721
|
+
const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
|
|
6722
|
+
const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
|
|
6723
|
+
if (!coordinates) {
|
|
6724
|
+
return;
|
|
6725
|
+
}
|
|
6726
|
+
this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);
|
|
6727
|
+
if (isOverSubNavigation) {
|
|
6728
|
+
this.triangleData = undefined;
|
|
6729
|
+
}
|
|
6730
|
+
}
|
|
6731
|
+
}
|
|
6732
|
+
var navigation = {
|
|
6733
|
+
isEventTargetNavigationItem,
|
|
6734
|
+
NavigationItemSafeTriangle
|
|
6735
|
+
};
|
|
6736
|
+
|
|
6737
|
+
/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
|
|
6738
|
+
class SecondaryActionDirective {
|
|
6739
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SecondaryActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6740
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: SecondaryActionDirective, isStandalone: true, selector: "[dbSecondaryAction]", ngImport: i0 }); }
|
|
6741
|
+
}
|
|
6742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SecondaryActionDirective, decorators: [{
|
|
6743
|
+
type: Directive,
|
|
6744
|
+
args: [{
|
|
6745
|
+
selector: '[dbSecondaryAction]',
|
|
6746
|
+
standalone: true
|
|
6747
|
+
}]
|
|
6748
|
+
}] });
|
|
6749
|
+
|
|
6750
|
+
/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
|
|
6751
|
+
class MetaNavigationDirective {
|
|
6752
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MetaNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6753
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: MetaNavigationDirective, isStandalone: true, selector: "[dbMetaNavigation]", ngImport: i0 }); }
|
|
6754
|
+
}
|
|
6755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MetaNavigationDirective, decorators: [{
|
|
6756
|
+
type: Directive,
|
|
6757
|
+
args: [{
|
|
6758
|
+
selector: '[dbMetaNavigation]',
|
|
6759
|
+
standalone: true
|
|
6760
|
+
}]
|
|
6761
|
+
}] });
|
|
6762
|
+
|
|
6763
|
+
/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
|
|
6764
|
+
class NavigationDirective {
|
|
6765
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6766
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: NavigationDirective, isStandalone: true, selector: "[dbNavigation]", ngImport: i0 }); }
|
|
6767
|
+
}
|
|
6768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavigationDirective, decorators: [{
|
|
6769
|
+
type: Directive,
|
|
6770
|
+
args: [{
|
|
6771
|
+
selector: '[dbNavigation]',
|
|
6772
|
+
standalone: true
|
|
6773
|
+
}]
|
|
6774
|
+
}] });
|
|
6775
|
+
|
|
6776
|
+
const defaultProps$o = {};
|
|
6777
|
+
class DBHeader {
|
|
6778
|
+
handleToggle(event) {
|
|
6779
|
+
if (event && event.stopPropagation) {
|
|
6780
|
+
event.stopPropagation();
|
|
6781
|
+
}
|
|
6782
|
+
const open = !getBoolean(this.drawerOpen(), "drawerOpen");
|
|
6783
|
+
if (this.toggle) {
|
|
6784
|
+
this.toggle.emit(open);
|
|
6785
|
+
}
|
|
6786
|
+
}
|
|
6787
|
+
handleNavigationItemClick(event) {
|
|
6788
|
+
if (isEventTargetNavigationItem(event)) {
|
|
6789
|
+
this.handleToggle();
|
|
6790
|
+
}
|
|
6791
|
+
}
|
|
6792
|
+
setupObserver(element) {
|
|
6793
|
+
if (!element)
|
|
6794
|
+
return;
|
|
6795
|
+
const parent = element.closest("db-header");
|
|
6796
|
+
if (!parent || this.observer())
|
|
6797
|
+
return;
|
|
6798
|
+
this.observer.set(new MutationObserver((mutations) => {
|
|
6799
|
+
if (mutations.some((mutation) => {
|
|
6800
|
+
const attr = mutation.target.attributes.getNamedItem(mutation.attributeName ?? "");
|
|
6801
|
+
return attr?.value !== mutation.oldValue;
|
|
6802
|
+
})) {
|
|
6803
|
+
this.enableAttributePassing(element, "db-header");
|
|
6804
|
+
}
|
|
6805
|
+
}));
|
|
6806
|
+
this.observer().observe(parent, {
|
|
6807
|
+
attributes: true,
|
|
6808
|
+
attributeOldValue: true,
|
|
6809
|
+
});
|
|
6810
|
+
}
|
|
6811
|
+
constructor() {
|
|
6812
|
+
this.cls = cls;
|
|
6813
|
+
this.DEFAULT_BURGER_MENU = DEFAULT_BURGER_MENU;
|
|
6814
|
+
this.getBoolean = getBoolean;
|
|
6815
|
+
this.forceMobile = input(...(ngDevMode ? [undefined, { debugName: "forceMobile" }] : /* istanbul ignore next */ []));
|
|
6816
|
+
this.drawerOpen = input(...(ngDevMode ? [undefined, { debugName: "drawerOpen" }] : /* istanbul ignore next */ []));
|
|
6817
|
+
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
6818
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
6819
|
+
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
6820
|
+
this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
|
|
6821
|
+
this.burgerMenuLabel = input(...(ngDevMode ? [undefined, { debugName: "burgerMenuLabel" }] : /* istanbul ignore next */ []));
|
|
6822
|
+
this.closeButtonId = input(...(ngDevMode ? [undefined, { debugName: "closeButtonId" }] : /* istanbul ignore next */ []));
|
|
6523
6823
|
this.closeButtonText = input(...(ngDevMode ? [undefined, { debugName: "closeButtonText" }] : /* istanbul ignore next */ []));
|
|
6824
|
+
this.drawerHeaderText = input(...(ngDevMode ? [undefined, { debugName: "drawerHeaderText" }] : /* istanbul ignore next */ []));
|
|
6524
6825
|
this.toggle = output();
|
|
6525
6826
|
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
6526
6827
|
this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
@@ -6600,8 +6901,8 @@ class DBHeader {
|
|
|
6600
6901
|
ngOnDestroy() {
|
|
6601
6902
|
this.observer()?.disconnect();
|
|
6602
6903
|
}
|
|
6603
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6604
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
6904
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderText: { classPropertyName: "drawerHeaderText", publicName: "drawerHeaderText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<header
|
|
6605
6906
|
#_ref
|
|
6606
6907
|
[class]="cls('db-header', className())"
|
|
6607
6908
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
@@ -6637,11 +6938,8 @@ class DBHeader {
|
|
|
6637
6938
|
</div>
|
|
6638
6939
|
</div>
|
|
6639
6940
|
<db-drawer
|
|
6640
|
-
spacing="small"
|
|
6641
6941
|
className="db-header-drawer"
|
|
6642
6942
|
[rounded]="true"
|
|
6643
|
-
[closeButtonId]="closeButtonId()"
|
|
6644
|
-
[closeButtonText]="closeButtonText()"
|
|
6645
6943
|
[open]="getBoolean(drawerOpen())"
|
|
6646
6944
|
(close)="handleToggle()"
|
|
6647
6945
|
><div class="db-header-drawer-navigation">
|
|
@@ -6655,14 +6953,24 @@ class DBHeader {
|
|
|
6655
6953
|
<ng-content *ngTemplateOutlet="dbMetaNavigation"> </ng-content>
|
|
6656
6954
|
</div>
|
|
6657
6955
|
</div>
|
|
6658
|
-
<
|
|
6659
|
-
|
|
6956
|
+
<ng-container header
|
|
6957
|
+
><db-drawer-header
|
|
6958
|
+
[closeButtonId]="closeButtonId()"
|
|
6959
|
+
[closeButtonText]="closeButtonText()"
|
|
6960
|
+
[text]="drawerHeaderText()"
|
|
6961
|
+
></db-drawer-header
|
|
6962
|
+
></ng-container>
|
|
6963
|
+
<ng-container footer
|
|
6964
|
+
><db-drawer-footer
|
|
6965
|
+
><div class="db-header-secondary-action">
|
|
6966
|
+
<ng-content *ngTemplateOutlet="dbSecondaryAction">
|
|
6967
|
+
</ng-content></div></db-drawer-footer></ng-container
|
|
6660
6968
|
></db-drawer>
|
|
6661
|
-
</header> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "position", "backdrop", "variant", "id", "propOverrides", "direction", "className", "
|
|
6969
|
+
</header> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "position", "backdrop", "variant", "id", "propOverrides", "direction", "className", "containerSize", "showSpacing", "rounded"], outputs: ["close"] }, { kind: "component", type: DBDrawerHeader, selector: "db-drawer-header", inputs: ["id", "propOverrides", "className", "text", "closeButtonId", "closeButtonText"] }, { kind: "component", type: DBDrawerFooter, selector: "db-drawer-footer", inputs: ["id", "propOverrides", "className"] }] }); }
|
|
6662
6970
|
}
|
|
6663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
6971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBHeader, decorators: [{
|
|
6664
6972
|
type: Component,
|
|
6665
|
-
args: [{ selector: "db-header", standalone: true, imports: [CommonModule, DBButton, DBDrawer], template: `<header
|
|
6973
|
+
args: [{ selector: "db-header", standalone: true, imports: [CommonModule, DBButton, DBDrawer, DBDrawerHeader, DBDrawerFooter], template: `<header
|
|
6666
6974
|
#_ref
|
|
6667
6975
|
[class]="cls('db-header', className())"
|
|
6668
6976
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
@@ -6698,11 +7006,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6698
7006
|
</div>
|
|
6699
7007
|
</div>
|
|
6700
7008
|
<db-drawer
|
|
6701
|
-
spacing="small"
|
|
6702
7009
|
className="db-header-drawer"
|
|
6703
7010
|
[rounded]="true"
|
|
6704
|
-
[closeButtonId]="closeButtonId()"
|
|
6705
|
-
[closeButtonText]="closeButtonText()"
|
|
6706
7011
|
[open]="getBoolean(drawerOpen())"
|
|
6707
7012
|
(close)="handleToggle()"
|
|
6708
7013
|
><div class="db-header-drawer-navigation">
|
|
@@ -6716,8 +7021,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6716
7021
|
<ng-content *ngTemplateOutlet="dbMetaNavigation"> </ng-content>
|
|
6717
7022
|
</div>
|
|
6718
7023
|
</div>
|
|
6719
|
-
<
|
|
6720
|
-
|
|
7024
|
+
<ng-container header
|
|
7025
|
+
><db-drawer-header
|
|
7026
|
+
[closeButtonId]="closeButtonId()"
|
|
7027
|
+
[closeButtonText]="closeButtonText()"
|
|
7028
|
+
[text]="drawerHeaderText()"
|
|
7029
|
+
></db-drawer-header
|
|
7030
|
+
></ng-container>
|
|
7031
|
+
<ng-container footer
|
|
7032
|
+
><db-drawer-footer
|
|
7033
|
+
><div class="db-header-secondary-action">
|
|
7034
|
+
<ng-content *ngTemplateOutlet="dbSecondaryAction">
|
|
7035
|
+
</ng-content></div></db-drawer-footer></ng-container
|
|
6721
7036
|
></db-drawer>
|
|
6722
7037
|
</header> `, styles: [":host{display:contents}\n"] }]
|
|
6723
7038
|
}], ctorParameters: () => [], propDecorators: { dbNavigation: [{
|
|
@@ -6729,9 +7044,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6729
7044
|
}], dbSecondaryAction: [{
|
|
6730
7045
|
type: ContentChild,
|
|
6731
7046
|
args: [SecondaryActionDirective, { read: TemplateRef }]
|
|
6732
|
-
}], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
7047
|
+
}], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], drawerHeaderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderText", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
6733
7048
|
|
|
6734
|
-
const defaultProps$
|
|
7049
|
+
const defaultProps$n = {};
|
|
6735
7050
|
class DBIcon {
|
|
6736
7051
|
setupObserver(element) {
|
|
6737
7052
|
if (!element)
|
|
@@ -6815,8 +7130,8 @@ class DBIcon {
|
|
|
6815
7130
|
ngOnDestroy() {
|
|
6816
7131
|
this.observer()?.disconnect();
|
|
6817
7132
|
}
|
|
6818
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
7133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBIcon, isStandalone: true, selector: "db-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
|
|
6820
7135
|
aria-hidden="true"
|
|
6821
7136
|
#_ref
|
|
6822
7137
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
@@ -6827,7 +7142,7 @@ class DBIcon {
|
|
|
6827
7142
|
>@if(text()){{{text()}}} <ng-content></ng-content
|
|
6828
7143
|
></span> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
6829
7144
|
}
|
|
6830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBIcon, decorators: [{
|
|
6831
7146
|
type: Component,
|
|
6832
7147
|
args: [{ selector: "db-icon", standalone: true, imports: [CommonModule], template: `<span
|
|
6833
7148
|
aria-hidden="true"
|
|
@@ -6849,7 +7164,7 @@ const InputTypeList = ['color', 'date', 'datetime-local', 'email', 'file',
|
|
|
6849
7164
|
// TODO: move this to own component
|
|
6850
7165
|
'search', 'tel', 'text', 'time', 'url', 'week'];
|
|
6851
7166
|
|
|
6852
|
-
const defaultProps$
|
|
7167
|
+
const defaultProps$m = {};
|
|
6853
7168
|
class DBLink {
|
|
6854
7169
|
setupObserver(element) {
|
|
6855
7170
|
if (!element)
|
|
@@ -6944,8 +7259,8 @@ class DBLink {
|
|
|
6944
7259
|
ngOnDestroy() {
|
|
6945
7260
|
this.observer()?.disconnect();
|
|
6946
7261
|
}
|
|
6947
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6948
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
7262
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBLink, isStandalone: true, selector: "db-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, referrerpolicy: { classPropertyName: "referrerpolicy", publicName: "referrerpolicy", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", isSignal: true, isRequired: false, transformFunction: null }, hreflang: { classPropertyName: "hreflang", publicName: "hreflang", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<a
|
|
6949
7264
|
#_ref
|
|
6950
7265
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
6951
7266
|
[class]="cls('db-link', className())"
|
|
@@ -6965,7 +7280,7 @@ class DBLink {
|
|
|
6965
7280
|
>@if(text()){{{text()}}} <ng-content></ng-content
|
|
6966
7281
|
></a> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
6967
7282
|
}
|
|
6968
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBLink, decorators: [{
|
|
6969
7284
|
type: Component,
|
|
6970
7285
|
args: [{ selector: "db-link", standalone: true, imports: [CommonModule], template: `<a
|
|
6971
7286
|
#_ref
|
|
@@ -6992,7 +7307,7 @@ const LinkVariantList = ['adaptive', 'brand', 'inline'];
|
|
|
6992
7307
|
const LinkSizeList = ['medium', 'small'];
|
|
6993
7308
|
const LinkContentList = ['external', 'internal'];
|
|
6994
7309
|
|
|
6995
|
-
const defaultProps$
|
|
7310
|
+
const defaultProps$l = {};
|
|
6996
7311
|
class DBNavigation {
|
|
6997
7312
|
setupObserver(element) {
|
|
6998
7313
|
if (!element)
|
|
@@ -7072,8 +7387,8 @@ class DBNavigation {
|
|
|
7072
7387
|
ngOnDestroy() {
|
|
7073
7388
|
this.observer()?.disconnect();
|
|
7074
7389
|
}
|
|
7075
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7076
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
7390
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBNavigation, isStandalone: true, selector: "db-navigation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<nav
|
|
7077
7392
|
#_ref
|
|
7078
7393
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
7079
7394
|
[class]="cls('db-navigation', className())"
|
|
@@ -7081,7 +7396,7 @@ class DBNavigation {
|
|
|
7081
7396
|
<menu><ng-content></ng-content></menu>
|
|
7082
7397
|
</nav> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
7083
7398
|
}
|
|
7084
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBNavigation, decorators: [{
|
|
7085
7400
|
type: Component,
|
|
7086
7401
|
args: [{ selector: "db-navigation", standalone: true, imports: [CommonModule], template: `<nav
|
|
7087
7402
|
#_ref
|
|
@@ -7094,10 +7409,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7094
7409
|
|
|
7095
7410
|
/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
|
|
7096
7411
|
class NavigationContentDirective {
|
|
7097
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7098
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
7412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavigationContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7413
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: NavigationContentDirective, isStandalone: true, selector: "[dbNavigationContent]", ngImport: i0 }); }
|
|
7099
7414
|
}
|
|
7100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavigationContentDirective, decorators: [{
|
|
7101
7416
|
type: Directive,
|
|
7102
7417
|
args: [{
|
|
7103
7418
|
selector: '[dbNavigationContent]',
|
|
@@ -7105,7 +7420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7105
7420
|
}]
|
|
7106
7421
|
}] });
|
|
7107
7422
|
|
|
7108
|
-
const defaultProps$
|
|
7423
|
+
const defaultProps$k = {};
|
|
7109
7424
|
class DBNavigationItem {
|
|
7110
7425
|
handleNavigationItemClick(event) {
|
|
7111
7426
|
if (event?.target?.nodeName === "A") {
|
|
@@ -7267,8 +7582,8 @@ class DBNavigationItem {
|
|
|
7267
7582
|
ngOnDestroy() {
|
|
7268
7583
|
this.observer()?.disconnect();
|
|
7269
7584
|
}
|
|
7270
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7271
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
7585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideSubNavigation: { classPropertyName: "hideSubNavigation", publicName: "hideSubNavigation", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
|
|
7272
7587
|
#_ref
|
|
7273
7588
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
7274
7589
|
(mouseover)="navigationItemSafeTriangle()?.enableFollow()"
|
|
@@ -7278,7 +7593,7 @@ class DBNavigationItem {
|
|
|
7278
7593
|
[attr.data-width]="width()"
|
|
7279
7594
|
[attr.data-icon]="icon()"
|
|
7280
7595
|
[attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
|
|
7281
|
-
[attr.data-active]="active()"
|
|
7596
|
+
[attr.data-active]="getBoolean(active(), 'active')"
|
|
7282
7597
|
[attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
|
|
7283
7598
|
[attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
|
|
7284
7599
|
>
|
|
@@ -7321,7 +7636,7 @@ class DBNavigationItem {
|
|
|
7321
7636
|
} }
|
|
7322
7637
|
</li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }] }); }
|
|
7323
7638
|
}
|
|
7324
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7639
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBNavigationItem, decorators: [{
|
|
7325
7640
|
type: Component,
|
|
7326
7641
|
args: [{ selector: "db-navigation-item", standalone: true, imports: [CommonModule, DBButton], template: `<li
|
|
7327
7642
|
#_ref
|
|
@@ -7333,7 +7648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7333
7648
|
[attr.data-width]="width()"
|
|
7334
7649
|
[attr.data-icon]="icon()"
|
|
7335
7650
|
[attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
|
|
7336
|
-
[attr.data-active]="active()"
|
|
7651
|
+
[attr.data-active]="getBoolean(active(), 'active')"
|
|
7337
7652
|
[attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
|
|
7338
7653
|
[attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
|
|
7339
7654
|
>
|
|
@@ -7380,7 +7695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7380
7695
|
args: [NavigationContentDirective, { read: TemplateRef }]
|
|
7381
7696
|
}], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], subNavigationExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "subNavigationExpanded", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideSubNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSubNavigation", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], backButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonId", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
7382
7697
|
|
|
7383
|
-
const defaultProps$
|
|
7698
|
+
const defaultProps$j = {};
|
|
7384
7699
|
class DBNotification {
|
|
7385
7700
|
handleClose(event) {
|
|
7386
7701
|
if (!event)
|
|
@@ -7490,8 +7805,8 @@ class DBNotification {
|
|
|
7490
7805
|
ngOnDestroy() {
|
|
7491
7806
|
this.observer()?.disconnect();
|
|
7492
7807
|
}
|
|
7493
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7494
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
7808
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7809
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, timestampDatetime: { classPropertyName: "timestampDatetime", publicName: "timestampDatetime", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
7495
7810
|
#_ref
|
|
7496
7811
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
7497
7812
|
[class]="cls('db-notification', className())"
|
|
@@ -7535,7 +7850,7 @@ class DBNotification {
|
|
|
7535
7850
|
}
|
|
7536
7851
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }] }); }
|
|
7537
7852
|
}
|
|
7538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBNotification, decorators: [{
|
|
7539
7854
|
type: Component,
|
|
7540
7855
|
args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `<div
|
|
7541
7856
|
#_ref
|
|
@@ -7586,7 +7901,7 @@ const NotificationVariantList = ['docked', 'standalone', 'overlay'];
|
|
|
7586
7901
|
const NotificationLinkVariantList = ['block', 'inline'];
|
|
7587
7902
|
const NotificationAriaLiveList = ['assertive', 'polite', 'off'];
|
|
7588
7903
|
|
|
7589
|
-
const defaultProps$
|
|
7904
|
+
const defaultProps$i = {};
|
|
7590
7905
|
class DBPage {
|
|
7591
7906
|
setupObserver(element) {
|
|
7592
7907
|
if (!element)
|
|
@@ -7696,8 +8011,8 @@ class DBPage {
|
|
|
7696
8011
|
}
|
|
7697
8012
|
this.observer()?.disconnect();
|
|
7698
8013
|
}
|
|
7699
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7700
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
8014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBPage, isStandalone: true, selector: "db-page", inputs: { fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null }, documentOverflow: { classPropertyName: "documentOverflow", publicName: "documentOverflow", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mainClass: { classPropertyName: "mainClass", publicName: "mainClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
7701
8016
|
#_ref
|
|
7702
8017
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
7703
8018
|
[class]="cls('db-page', className())"
|
|
@@ -7710,7 +8025,7 @@ class DBPage {
|
|
|
7710
8025
|
<ng-content select="[footer]"> </ng-content>
|
|
7711
8026
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
7712
8027
|
}
|
|
7713
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8028
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBPage, decorators: [{
|
|
7714
8029
|
type: Component,
|
|
7715
8030
|
args: [{ selector: "db-page", standalone: true, imports: [CommonModule], template: `<div
|
|
7716
8031
|
#_ref
|
|
@@ -7729,7 +8044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7729
8044
|
const PageVariantList = ['auto', 'fixed'];
|
|
7730
8045
|
const PageDocumentOverflowList = ['hidden', 'auto'];
|
|
7731
8046
|
|
|
7732
|
-
const defaultProps$
|
|
8047
|
+
const defaultProps$h = {};
|
|
7733
8048
|
class DBPopover {
|
|
7734
8049
|
handleEscape(event) {
|
|
7735
8050
|
if (!event || event.key === "Escape") {
|
|
@@ -7966,8 +8281,8 @@ class DBPopover {
|
|
|
7966
8281
|
}
|
|
7967
8282
|
this.observer()?.disconnect();
|
|
7968
8283
|
}
|
|
7969
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7970
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
8284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBPopover, isStandalone: true, selector: "db-popover", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
7971
8286
|
#_ref
|
|
7972
8287
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
7973
8288
|
[class]="cls('db-popover', className())"
|
|
@@ -7987,7 +8302,7 @@ class DBPopover {
|
|
|
7987
8302
|
</article>
|
|
7988
8303
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
7989
8304
|
}
|
|
7990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBPopover, decorators: [{
|
|
7991
8306
|
type: Component,
|
|
7992
8307
|
args: [{ selector: "db-popover", standalone: true, imports: [CommonModule], template: `<div
|
|
7993
8308
|
#_ref
|
|
@@ -8010,7 +8325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8010
8325
|
</div> `, styles: [":host{display:contents}\n"] }]
|
|
8011
8326
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
8012
8327
|
|
|
8013
|
-
const defaultProps$
|
|
8328
|
+
const defaultProps$g = {};
|
|
8014
8329
|
class DBRadio {
|
|
8015
8330
|
handleInput(event, reset) {
|
|
8016
8331
|
if (this.input) {
|
|
@@ -8242,8 +8557,8 @@ class DBRadio {
|
|
|
8242
8557
|
this.abortController()?.abort();
|
|
8243
8558
|
this.observer()?.disconnect();
|
|
8244
8559
|
}
|
|
8245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8246
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
8560
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBRadio, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8561
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", input: "input", change: "change", blur: "blur", focus: "focus", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, providers: [{
|
|
8247
8562
|
provide: NG_VALUE_ACCESSOR,
|
|
8248
8563
|
useExisting: DBRadio,
|
|
8249
8564
|
multi: true
|
|
@@ -8271,7 +8586,7 @@ class DBRadio {
|
|
|
8271
8586
|
@if(label()){{{label()}}} <ng-content></ng-content
|
|
8272
8587
|
></label> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
8273
8588
|
}
|
|
8274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBRadio, decorators: [{
|
|
8275
8590
|
type: Component,
|
|
8276
8591
|
args: [{ providers: [{
|
|
8277
8592
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -8305,7 +8620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8305
8620
|
args: ['hidden']
|
|
8306
8621
|
}] } });
|
|
8307
8622
|
|
|
8308
|
-
const defaultProps$
|
|
8623
|
+
const defaultProps$f = {};
|
|
8309
8624
|
class DBSection {
|
|
8310
8625
|
setupObserver(element) {
|
|
8311
8626
|
if (!element)
|
|
@@ -8387,8 +8702,8 @@ class DBSection {
|
|
|
8387
8702
|
ngOnDestroy() {
|
|
8388
8703
|
this.observer()?.disconnect();
|
|
8389
8704
|
}
|
|
8390
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
8705
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8706
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBSection, isStandalone: true, selector: "db-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
|
|
8392
8707
|
#_ref
|
|
8393
8708
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
8394
8709
|
[class]="cls('db-section', className())"
|
|
@@ -8398,7 +8713,7 @@ class DBSection {
|
|
|
8398
8713
|
<ng-content></ng-content>
|
|
8399
8714
|
</section> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
8400
8715
|
}
|
|
8401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBSection, decorators: [{
|
|
8402
8717
|
type: Component,
|
|
8403
8718
|
args: [{ selector: "db-section", standalone: true, imports: [CommonModule], template: `<section
|
|
8404
8719
|
#_ref
|
|
@@ -8411,7 +8726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8411
8726
|
</section> `, styles: [":host{display:contents}\n"] }]
|
|
8412
8727
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
8413
8728
|
|
|
8414
|
-
const defaultProps$
|
|
8729
|
+
const defaultProps$e = {};
|
|
8415
8730
|
class DBSelect {
|
|
8416
8731
|
hasValidState() {
|
|
8417
8732
|
if (this.validation() === 'no-validation')
|
|
@@ -8811,8 +9126,8 @@ class DBSelect {
|
|
|
8811
9126
|
this.abortController()?.abort();
|
|
8812
9127
|
this.observer()?.disconnect();
|
|
8813
9128
|
}
|
|
8814
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8815
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
9129
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, providers: [{
|
|
8816
9131
|
provide: NG_VALUE_ACCESSOR,
|
|
8817
9132
|
useExisting: DBSelect,
|
|
8818
9133
|
multi: true
|
|
@@ -8914,7 +9229,7 @@ class DBSelect {
|
|
|
8914
9229
|
>
|
|
8915
9230
|
</div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
|
|
8916
9231
|
}
|
|
8917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBSelect, decorators: [{
|
|
8918
9233
|
type: Component,
|
|
8919
9234
|
args: [{ providers: [{
|
|
8920
9235
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -9022,7 +9337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9022
9337
|
args: ['hidden']
|
|
9023
9338
|
}] } });
|
|
9024
9339
|
|
|
9025
|
-
const defaultProps$
|
|
9340
|
+
const defaultProps$d = {};
|
|
9026
9341
|
class DBStack {
|
|
9027
9342
|
setupObserver(element) {
|
|
9028
9343
|
if (!element)
|
|
@@ -9109,8 +9424,8 @@ class DBStack {
|
|
|
9109
9424
|
ngOnDestroy() {
|
|
9110
9425
|
this.observer()?.disconnect();
|
|
9111
9426
|
}
|
|
9112
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9113
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
9427
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9428
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBStack, isStandalone: true, selector: "db-stack", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
9114
9429
|
#_ref
|
|
9115
9430
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
9116
9431
|
[class]="cls('db-stack', className())"
|
|
@@ -9124,7 +9439,7 @@ class DBStack {
|
|
|
9124
9439
|
<ng-content></ng-content>
|
|
9125
9440
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
9126
9441
|
}
|
|
9127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBStack, decorators: [{
|
|
9128
9443
|
type: Component,
|
|
9129
9444
|
args: [{ selector: "db-stack", standalone: true, imports: [CommonModule], template: `<div
|
|
9130
9445
|
#_ref
|
|
@@ -9144,9 +9459,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9144
9459
|
const StackVariantList = ['simple', 'divider'];
|
|
9145
9460
|
const StackDirectionList = ['row', 'column'];
|
|
9146
9461
|
const StackAlignmentList = ['stretch', 'start', 'end', 'center'];
|
|
9147
|
-
const StackJustifyContentList = ['space-between', 'start', '
|
|
9462
|
+
const StackJustifyContentList = ['space-between', 'start', 'center', 'end'];
|
|
9148
9463
|
|
|
9149
|
-
const defaultProps$
|
|
9464
|
+
const defaultProps$c = {};
|
|
9150
9465
|
class DBSwitch {
|
|
9151
9466
|
hasValidState() {
|
|
9152
9467
|
if (this.validation() === 'no-validation')
|
|
@@ -9488,8 +9803,8 @@ class DBSwitch {
|
|
|
9488
9803
|
this.abortController()?.abort();
|
|
9489
9804
|
this.observer()?.disconnect();
|
|
9490
9805
|
}
|
|
9491
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9492
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
9806
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, providers: [{
|
|
9493
9808
|
provide: NG_VALUE_ACCESSOR,
|
|
9494
9809
|
useExisting: DBSwitch,
|
|
9495
9810
|
multi: true
|
|
@@ -9552,7 +9867,7 @@ class DBSwitch {
|
|
|
9552
9867
|
>
|
|
9553
9868
|
</div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
|
|
9554
9869
|
}
|
|
9555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9870
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBSwitch, decorators: [{
|
|
9556
9871
|
type: Component,
|
|
9557
9872
|
args: [{ providers: [{
|
|
9558
9873
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -9621,28 +9936,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9621
9936
|
args: ['hidden']
|
|
9622
9937
|
}] } });
|
|
9623
9938
|
|
|
9624
|
-
const defaultProps$
|
|
9939
|
+
const defaultProps$b = {};
|
|
9625
9940
|
class DBTabItem {
|
|
9626
|
-
|
|
9627
|
-
|
|
9628
|
-
|
|
9629
|
-
|
|
9630
|
-
|
|
9631
|
-
|
|
9632
|
-
|
|
9633
|
-
|
|
9634
|
-
|
|
9635
|
-
|
|
9636
|
-
|
|
9637
|
-
|
|
9638
|
-
|
|
9941
|
+
_cleanupTooltipAria() {
|
|
9942
|
+
if (!this._ref()?.nativeElement)
|
|
9943
|
+
return;
|
|
9944
|
+
if (!this._ref()?.nativeElement.hasAttribute("data-has-tooltip"))
|
|
9945
|
+
return;
|
|
9946
|
+
this._ref()?.nativeElement.removeAttribute("data-has-tooltip");
|
|
9947
|
+
const tooltipEl = this._ref()?.nativeElement.querySelector(".db-tooltip");
|
|
9948
|
+
if (!tooltipEl || !tooltipEl.id)
|
|
9949
|
+
return;
|
|
9950
|
+
const describedBy = this._ref()?.nativeElement.getAttribute("aria-describedby") || "";
|
|
9951
|
+
const remaining = describedBy
|
|
9952
|
+
.split(" ")
|
|
9953
|
+
.filter((id) => id !== "" && id !== tooltipEl.id)
|
|
9954
|
+
.join(" ");
|
|
9955
|
+
if (remaining) {
|
|
9956
|
+
this._ref()?.nativeElement.setAttribute("aria-describedby", remaining);
|
|
9957
|
+
}
|
|
9958
|
+
else {
|
|
9959
|
+
this._ref()?.nativeElement.removeAttribute("aria-describedby");
|
|
9639
9960
|
}
|
|
9640
9961
|
}
|
|
9641
|
-
|
|
9642
|
-
if (this.
|
|
9643
|
-
this.
|
|
9962
|
+
checkTruncation() {
|
|
9963
|
+
if (this._labelRef()?.nativeElement) {
|
|
9964
|
+
const scrollWidth = Math.ceil(this._labelRef()?.nativeElement.scrollWidth);
|
|
9965
|
+
const clientWidth = Math.ceil(this._labelRef()?.nativeElement.clientWidth);
|
|
9966
|
+
const truncated = scrollWidth > clientWidth + 1;
|
|
9967
|
+
if (this.isTruncated() !== truncated) {
|
|
9968
|
+
this.isTruncated.set(truncated);
|
|
9969
|
+
if (!truncated) {
|
|
9970
|
+
this._cleanupTooltipAria();
|
|
9971
|
+
// Remove the empty title we set to suppress native
|
|
9972
|
+
// tooltip; consumer-provided titles are re-applied by
|
|
9973
|
+
// the framework spread on the next render.
|
|
9974
|
+
if (this._ref()?.nativeElement &&
|
|
9975
|
+
this._ref()?.nativeElement.getAttribute("title") === "") {
|
|
9976
|
+
this._ref()?.nativeElement.removeAttribute("title");
|
|
9977
|
+
}
|
|
9978
|
+
}
|
|
9979
|
+
else if (this._ref()?.nativeElement) {
|
|
9980
|
+
// Suppress native browser tooltip while our custom
|
|
9981
|
+
// truncation tooltip is active.
|
|
9982
|
+
this._ref()?.nativeElement.setAttribute("title", "");
|
|
9983
|
+
}
|
|
9984
|
+
}
|
|
9985
|
+
this.tooltipText.set(truncated
|
|
9986
|
+
? this.label() ||
|
|
9987
|
+
this._labelRef()?.nativeElement.innerText ||
|
|
9988
|
+
this._labelRef()?.nativeElement.textContent ||
|
|
9989
|
+
""
|
|
9990
|
+
: "");
|
|
9644
9991
|
}
|
|
9645
|
-
handleFrameworkEventAngular(this, event, "checked");
|
|
9646
9992
|
}
|
|
9647
9993
|
setupObserver(element) {
|
|
9648
9994
|
if (!element)
|
|
@@ -9663,33 +10009,30 @@ class DBTabItem {
|
|
|
9663
10009
|
attributeOldValue: true,
|
|
9664
10010
|
});
|
|
9665
10011
|
}
|
|
9666
|
-
constructor(
|
|
9667
|
-
this.renderer = renderer;
|
|
10012
|
+
constructor() {
|
|
9668
10013
|
this.cls = cls;
|
|
9669
|
-
this.getBooleanAsString = getBooleanAsString;
|
|
9670
10014
|
this.getBoolean = getBoolean;
|
|
9671
|
-
this.
|
|
9672
|
-
this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
9673
|
-
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
9674
|
-
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
9675
|
-
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
10015
|
+
this.getBooleanAsString = getBooleanAsString;
|
|
9676
10016
|
this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : /* istanbul ignore next */ []));
|
|
9677
10017
|
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
9678
10018
|
this.iconTrailing = input(...(ngDevMode ? [undefined, { debugName: "iconTrailing" }] : /* istanbul ignore next */ []));
|
|
10019
|
+
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
10020
|
+
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
10021
|
+
this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
10022
|
+
this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
|
|
10023
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9679
10024
|
this.showIconLeading = input(...(ngDevMode ? [undefined, { debugName: "showIconLeading" }] : /* istanbul ignore next */ []));
|
|
9680
10025
|
this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : /* istanbul ignore next */ []));
|
|
9681
10026
|
this.showIconTrailing = input(...(ngDevMode ? [undefined, { debugName: "showIconTrailing" }] : /* istanbul ignore next */ []));
|
|
9682
|
-
this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : /* istanbul ignore next */ []));
|
|
9683
|
-
this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
9684
|
-
this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
9685
|
-
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
9686
|
-
this.change = output();
|
|
9687
10027
|
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
9688
|
-
this.
|
|
9689
|
-
this._name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : /* istanbul ignore next */ []));
|
|
10028
|
+
this._labelRef = viewChild("_labelRef", ...(ngDevMode ? [{ debugName: "_labelRef" }] : /* istanbul ignore next */ []));
|
|
9690
10029
|
this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
9691
|
-
this.
|
|
9692
|
-
this.
|
|
10030
|
+
this.isTruncated = signal(false, ...(ngDevMode ? [{ debugName: "isTruncated" }] : /* istanbul ignore next */ []));
|
|
10031
|
+
this.tooltipText = signal("", ...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
|
|
10032
|
+
this._resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "_resizeObserver" }] : /* istanbul ignore next */ []));
|
|
10033
|
+
this._mutationObserver = signal(null, ...(ngDevMode ? [{ debugName: "_mutationObserver" }] : /* istanbul ignore next */ []));
|
|
10034
|
+
this._setupRafId = signal(null, ...(ngDevMode ? [{ debugName: "_setupRafId" }] : /* istanbul ignore next */ []));
|
|
10035
|
+
this._unmounted = signal(false, ...(ngDevMode ? [{ debugName: "_unmounted" }] : /* istanbul ignore next */ []));
|
|
9693
10036
|
this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
|
|
9694
10037
|
/** Signal Forms optional fields (Duck-Typing compatibility) */
|
|
9695
10038
|
this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -9699,25 +10042,65 @@ class DBTabItem {
|
|
|
9699
10042
|
if (typeof window !== "undefined") {
|
|
9700
10043
|
effect(() => {
|
|
9701
10044
|
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
9702
|
-
this.
|
|
10045
|
+
this._labelRef();
|
|
9703
10046
|
this.initialized();
|
|
9704
|
-
this.boundSetSelectedOnChange();
|
|
9705
10047
|
// ---
|
|
9706
|
-
if (
|
|
10048
|
+
if (typeof window !== "undefined" &&
|
|
10049
|
+
this._labelRef()?.nativeElement &&
|
|
9707
10050
|
this.initialized() &&
|
|
9708
|
-
this.
|
|
9709
|
-
|
|
9710
|
-
|
|
9711
|
-
|
|
9712
|
-
|
|
9713
|
-
|
|
9714
|
-
|
|
9715
|
-
|
|
10051
|
+
!this._resizeObserver()) {
|
|
10052
|
+
const setupObserverAndCheck = () => {
|
|
10053
|
+
this._setupRafId.set(requestAnimationFrame(() => {
|
|
10054
|
+
this._setupRafId.set(null);
|
|
10055
|
+
if (this._unmounted())
|
|
10056
|
+
return;
|
|
10057
|
+
this.checkTruncation();
|
|
10058
|
+
if (this._labelRef()?.nativeElement &&
|
|
10059
|
+
!this._resizeObserver()) {
|
|
10060
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
10061
|
+
requestAnimationFrame(() => {
|
|
10062
|
+
if (!this._unmounted()) {
|
|
10063
|
+
this.checkTruncation();
|
|
10064
|
+
}
|
|
10065
|
+
});
|
|
10066
|
+
});
|
|
10067
|
+
resizeObserver.observe(this._labelRef()?.nativeElement);
|
|
10068
|
+
this._resizeObserver.set(resizeObserver);
|
|
10069
|
+
}
|
|
10070
|
+
// The ResizeObserver only reacts to box-size changes. When
|
|
10071
|
+
// slotted/children text changes in place (e.g. i18n or an
|
|
10072
|
+
// async badge count) the box can keep its size while
|
|
10073
|
+
// scrollWidth changes, so also observe content mutations.
|
|
10074
|
+
if (this._labelRef()?.nativeElement &&
|
|
10075
|
+
!this._mutationObserver()) {
|
|
10076
|
+
const mutationObserver = new MutationObserver(() => {
|
|
10077
|
+
requestAnimationFrame(() => {
|
|
10078
|
+
if (!this._unmounted()) {
|
|
10079
|
+
this.checkTruncation();
|
|
10080
|
+
}
|
|
10081
|
+
});
|
|
10082
|
+
});
|
|
10083
|
+
mutationObserver.observe(this._labelRef()?.nativeElement, {
|
|
10084
|
+
childList: true,
|
|
10085
|
+
subtree: true,
|
|
10086
|
+
characterData: true,
|
|
10087
|
+
});
|
|
10088
|
+
this._mutationObserver.set(mutationObserver);
|
|
10089
|
+
}
|
|
10090
|
+
}));
|
|
10091
|
+
};
|
|
10092
|
+
const hasIcon = !!(this.iconLeading() ??
|
|
10093
|
+
this.icon() ??
|
|
10094
|
+
this.iconTrailing());
|
|
10095
|
+
if (hasIcon && document.fonts?.ready) {
|
|
10096
|
+
document.fonts.ready.then(() => {
|
|
10097
|
+
if (!this._unmounted()) {
|
|
10098
|
+
setupObserverAndCheck();
|
|
10099
|
+
}
|
|
10100
|
+
});
|
|
9716
10101
|
}
|
|
9717
|
-
|
|
9718
|
-
|
|
9719
|
-
this._selected.set(true);
|
|
9720
|
-
this._ref()?.nativeElement.click();
|
|
10102
|
+
else {
|
|
10103
|
+
setupObserverAndCheck();
|
|
9721
10104
|
}
|
|
9722
10105
|
}
|
|
9723
10106
|
}, Number(VERSION.major) < 19
|
|
@@ -9725,10 +10108,23 @@ class DBTabItem {
|
|
|
9725
10108
|
: undefined);
|
|
9726
10109
|
effect(() => {
|
|
9727
10110
|
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
9728
|
-
this.
|
|
10111
|
+
this.label();
|
|
10112
|
+
this.initialized();
|
|
10113
|
+
this._labelRef();
|
|
9729
10114
|
// ---
|
|
9730
|
-
if (this.
|
|
9731
|
-
this.
|
|
10115
|
+
if (this._labelRef()?.nativeElement && this.initialized()) {
|
|
10116
|
+
this.checkTruncation();
|
|
10117
|
+
}
|
|
10118
|
+
}, Number(VERSION.major) < 19
|
|
10119
|
+
? { allowSignalWrites: true }
|
|
10120
|
+
: undefined);
|
|
10121
|
+
effect(() => {
|
|
10122
|
+
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
10123
|
+
this._ref();
|
|
10124
|
+
this.isTruncated();
|
|
10125
|
+
// ---
|
|
10126
|
+
if (this._ref()?.nativeElement && !this.isTruncated()) {
|
|
10127
|
+
this._cleanupTooltipAria();
|
|
9732
10128
|
}
|
|
9733
10129
|
}, Number(VERSION.major) < 19
|
|
9734
10130
|
? { allowSignalWrites: true }
|
|
@@ -9783,109 +10179,87 @@ class DBTabItem {
|
|
|
9783
10179
|
* :host([hidden]) { display: none !important }.
|
|
9784
10180
|
*/
|
|
9785
10181
|
get isHidden() { return this.hidden(); }
|
|
9786
|
-
/** @legacy CVA - will be removed in a future major version */
|
|
9787
|
-
writeValue(value) {
|
|
9788
|
-
this.checked.set(!!value);
|
|
9789
|
-
if (this._ref()?.nativeElement) {
|
|
9790
|
-
this.renderer.setProperty(this._ref()?.nativeElement, 'checked', !!value);
|
|
9791
|
-
}
|
|
9792
|
-
}
|
|
9793
|
-
/** @legacy CVA - will be removed in a future major version */
|
|
9794
|
-
propagateChange(_) { }
|
|
9795
|
-
/** @legacy CVA - will be removed in a future major version */
|
|
9796
|
-
registerOnChange(onChange) {
|
|
9797
|
-
this.propagateChange = onChange;
|
|
9798
|
-
}
|
|
9799
|
-
/** @legacy CVA - will be removed in a future major version */
|
|
9800
|
-
registerOnTouched(onTouched) {
|
|
9801
|
-
this.propagateTouched = onTouched;
|
|
9802
|
-
}
|
|
9803
|
-
/** @legacy CVA - will be removed in a future major version */
|
|
9804
|
-
propagateTouched() { }
|
|
9805
|
-
/** @legacy CVA - will be removed in a future major version */
|
|
9806
|
-
setDisabledState(disabled) {
|
|
9807
|
-
this.disabled.set(disabled);
|
|
9808
|
-
}
|
|
9809
10182
|
ngAfterViewInit() {
|
|
9810
10183
|
const element = this._ref()?.nativeElement;
|
|
9811
10184
|
this.enableAttributePassing(element, "db-tab-item");
|
|
9812
10185
|
if (typeof window !== "undefined") {
|
|
9813
|
-
this.boundSetSelectedOnChange.set(this.setSelectedOnChange.bind(this));
|
|
9814
10186
|
this.initialized.set(true);
|
|
9815
10187
|
this.setupObserver(element);
|
|
9816
10188
|
}
|
|
9817
10189
|
}
|
|
9818
10190
|
ngOnDestroy() {
|
|
9819
|
-
|
|
9820
|
-
|
|
9821
|
-
|
|
9822
|
-
|
|
9823
|
-
|
|
9824
|
-
|
|
9825
|
-
|
|
9826
|
-
|
|
10191
|
+
this._unmounted.set(true);
|
|
10192
|
+
const rafId = this._setupRafId();
|
|
10193
|
+
if (rafId !== null) {
|
|
10194
|
+
cancelAnimationFrame(rafId);
|
|
10195
|
+
this._setupRafId.set(null);
|
|
10196
|
+
}
|
|
10197
|
+
this._resizeObserver()?.disconnect();
|
|
10198
|
+
this._mutationObserver()?.disconnect();
|
|
9827
10199
|
this.observer()?.disconnect();
|
|
9828
10200
|
}
|
|
9829
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9830
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
9831
|
-
|
|
9832
|
-
|
|
9833
|
-
|
|
9834
|
-
|
|
9835
|
-
|
|
9836
|
-
|
|
10201
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTabItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }, { propertyName: "_labelRef", first: true, predicate: ["_labelRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<button
|
|
10203
|
+
type="button"
|
|
10204
|
+
role="tab"
|
|
10205
|
+
#_ref
|
|
10206
|
+
[class]="cls('db-tab-item', className())"
|
|
10207
|
+
[disabled]="getBoolean(disabled(), 'disabled') ? true : undefined"
|
|
10208
|
+
[attr.aria-selected]="getBooleanAsString(active(), 'active')"
|
|
10209
|
+
[attr.focusgroupstart]="getBoolean(active(), 'active') ? '' : undefined"
|
|
10210
|
+
[attr.data-value]="value()"
|
|
10211
|
+
>
|
|
10212
|
+
<span
|
|
10213
|
+
class="db-tab-item-label"
|
|
9837
10214
|
[attr.data-icon]="iconLeading() ?? icon()"
|
|
9838
|
-
[attr.data-icon-trailing]="iconTrailing()"
|
|
9839
10215
|
[attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
|
|
10216
|
+
[attr.data-icon-trailing]="iconTrailing()"
|
|
9840
10217
|
[attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
|
|
9841
|
-
|
|
9842
|
-
|
|
9843
|
-
|
|
9844
|
-
|
|
9845
|
-
[
|
|
9846
|
-
|
|
9847
|
-
|
|
9848
|
-
|
|
9849
|
-
|
|
9850
|
-
|
|
9851
|
-
(input)="handleChange($event)" />
|
|
9852
|
-
@if(label()){{{label()}}} <ng-content></ng-content
|
|
9853
|
-
></label>
|
|
9854
|
-
</li> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
10218
|
+
><span class="db-tab-item-label-text" #_labelRef
|
|
10219
|
+
>@if(label()){{{label()}}} <ng-content></ng-content
|
|
10220
|
+
></span>
|
|
10221
|
+
<span class="db-tab-item-label-end-slot"
|
|
10222
|
+
><ng-content select="[end-slot]"> </ng-content></span
|
|
10223
|
+
></span>
|
|
10224
|
+
@if(isTruncated() && tooltipText()){
|
|
10225
|
+
<db-tooltip placement="top">{{tooltipText()}}</db-tooltip>
|
|
10226
|
+
}
|
|
10227
|
+
</button> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "placement", "text"] }] }); }
|
|
9855
10228
|
}
|
|
9856
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTabItem, decorators: [{
|
|
9857
10230
|
type: Component,
|
|
9858
|
-
args: [{
|
|
9859
|
-
|
|
9860
|
-
|
|
9861
|
-
|
|
9862
|
-
|
|
9863
|
-
|
|
9864
|
-
|
|
10231
|
+
args: [{ selector: "db-tab-item", standalone: true, imports: [CommonModule, DBTooltip], template: `<button
|
|
10232
|
+
type="button"
|
|
10233
|
+
role="tab"
|
|
10234
|
+
#_ref
|
|
10235
|
+
[class]="cls('db-tab-item', className())"
|
|
10236
|
+
[disabled]="getBoolean(disabled(), 'disabled') ? true : undefined"
|
|
10237
|
+
[attr.aria-selected]="getBooleanAsString(active(), 'active')"
|
|
10238
|
+
[attr.focusgroupstart]="getBoolean(active(), 'active') ? '' : undefined"
|
|
10239
|
+
[attr.data-value]="value()"
|
|
10240
|
+
>
|
|
10241
|
+
<span
|
|
10242
|
+
class="db-tab-item-label"
|
|
9865
10243
|
[attr.data-icon]="iconLeading() ?? icon()"
|
|
9866
|
-
[attr.data-icon-trailing]="iconTrailing()"
|
|
9867
10244
|
[attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
|
|
10245
|
+
[attr.data-icon-trailing]="iconTrailing()"
|
|
9868
10246
|
[attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
|
|
9869
|
-
|
|
9870
|
-
|
|
9871
|
-
|
|
9872
|
-
|
|
9873
|
-
[
|
|
9874
|
-
|
|
9875
|
-
|
|
9876
|
-
|
|
9877
|
-
|
|
9878
|
-
|
|
9879
|
-
(
|
|
9880
|
-
@if(label()){{{label()}}} <ng-content></ng-content
|
|
9881
|
-
></label>
|
|
9882
|
-
</li> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
|
|
9883
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], isHidden: [{
|
|
10247
|
+
><span class="db-tab-item-label-text" #_labelRef
|
|
10248
|
+
>@if(label()){{{label()}}} <ng-content></ng-content
|
|
10249
|
+
></span>
|
|
10250
|
+
<span class="db-tab-item-label-end-slot"
|
|
10251
|
+
><ng-content select="[end-slot]"> </ng-content></span
|
|
10252
|
+
></span>
|
|
10253
|
+
@if(isTruncated() && tooltipText()){
|
|
10254
|
+
<db-tooltip placement="top">{{tooltipText()}}</db-tooltip>
|
|
10255
|
+
}
|
|
10256
|
+
</button> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
|
|
10257
|
+
}], ctorParameters: () => [], propDecorators: { iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], _labelRef: [{ type: i0.ViewChild, args: ["_labelRef", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], isHidden: [{
|
|
9884
10258
|
type: HostBinding,
|
|
9885
10259
|
args: ['hidden']
|
|
9886
10260
|
}] } });
|
|
9887
10261
|
|
|
9888
|
-
const defaultProps$
|
|
10262
|
+
const defaultProps$a = {};
|
|
9889
10263
|
class DBTabList {
|
|
9890
10264
|
setupObserver(element) {
|
|
9891
10265
|
if (!element)
|
|
@@ -9911,7 +10285,9 @@ class DBTabList {
|
|
|
9911
10285
|
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
9912
10286
|
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
9913
10287
|
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
10288
|
+
this.orientation = input(...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
9914
10289
|
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
10290
|
+
this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
|
|
9915
10291
|
this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
|
|
9916
10292
|
}
|
|
9917
10293
|
/**
|
|
@@ -9959,37 +10335,39 @@ class DBTabList {
|
|
|
9959
10335
|
const element = this._ref()?.nativeElement;
|
|
9960
10336
|
this.enableAttributePassing(element, "db-tab-list");
|
|
9961
10337
|
if (typeof window !== "undefined") {
|
|
10338
|
+
this._id.set(this.id() || this.propOverrides()?.id || "tab-list-" + uuid());
|
|
9962
10339
|
this.setupObserver(element);
|
|
9963
10340
|
}
|
|
9964
10341
|
}
|
|
9965
10342
|
ngOnDestroy() {
|
|
9966
10343
|
this.observer()?.disconnect();
|
|
9967
10344
|
}
|
|
9968
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9969
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
10345
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
10347
|
+
role="tablist"
|
|
9970
10348
|
#_ref
|
|
9971
|
-
[attr.id]="id() ?? propOverrides()?.id"
|
|
10349
|
+
[attr.id]="id() ?? propOverrides()?.id ?? _id()"
|
|
9972
10350
|
[class]="cls('db-tab-list', className())"
|
|
10351
|
+
[attr.aria-orientation]="orientation() ?? 'horizontal'"
|
|
10352
|
+
[attr.focusgroup]="orientation() === 'vertical' ? 'tablist block wrap' : 'tablist'"
|
|
9973
10353
|
>
|
|
9974
|
-
<
|
|
9975
|
-
<ng-content></ng-content>
|
|
9976
|
-
</ul>
|
|
10354
|
+
<ng-content></ng-content>
|
|
9977
10355
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
9978
10356
|
}
|
|
9979
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10357
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTabList, decorators: [{
|
|
9980
10358
|
type: Component,
|
|
9981
10359
|
args: [{ selector: "db-tab-list", standalone: true, imports: [CommonModule], template: `<div
|
|
10360
|
+
role="tablist"
|
|
9982
10361
|
#_ref
|
|
9983
|
-
[attr.id]="id() ?? propOverrides()?.id"
|
|
10362
|
+
[attr.id]="id() ?? propOverrides()?.id ?? _id()"
|
|
9984
10363
|
[class]="cls('db-tab-list', className())"
|
|
10364
|
+
[attr.aria-orientation]="orientation() ?? 'horizontal'"
|
|
10365
|
+
[attr.focusgroup]="orientation() === 'vertical' ? 'tablist block wrap' : 'tablist'"
|
|
9985
10366
|
>
|
|
9986
|
-
<
|
|
9987
|
-
<ng-content></ng-content>
|
|
9988
|
-
</ul>
|
|
10367
|
+
<ng-content></ng-content>
|
|
9989
10368
|
</div> `, styles: [":host{display:contents}\n"] }]
|
|
9990
|
-
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
10369
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
9991
10370
|
|
|
9992
|
-
const defaultProps$a = {};
|
|
9993
10371
|
class DBTabPanel {
|
|
9994
10372
|
setupObserver(element) {
|
|
9995
10373
|
if (!element)
|
|
@@ -10013,8 +10391,7 @@ class DBTabPanel {
|
|
|
10013
10391
|
constructor() {
|
|
10014
10392
|
this.cls = cls;
|
|
10015
10393
|
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
10016
|
-
this.
|
|
10017
|
-
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
10394
|
+
this.hidden = input(...(ngDevMode ? [undefined, { debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
10018
10395
|
this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
|
|
10019
10396
|
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
10020
10397
|
this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
|
|
@@ -10070,27 +10447,29 @@ class DBTabPanel {
|
|
|
10070
10447
|
ngOnDestroy() {
|
|
10071
10448
|
this.observer()?.disconnect();
|
|
10072
10449
|
}
|
|
10073
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
10450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10451
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
10075
10452
|
role="tabpanel"
|
|
10076
10453
|
#_ref
|
|
10077
10454
|
[class]="cls('db-tab-panel', className())"
|
|
10078
|
-
[attr.
|
|
10455
|
+
[attr.hidden]="hidden()"
|
|
10456
|
+
[attr.tabIndex]="0"
|
|
10079
10457
|
>
|
|
10080
10458
|
@if(content()){{{content()}}} <ng-content></ng-content>
|
|
10081
|
-
</
|
|
10459
|
+
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
10082
10460
|
}
|
|
10083
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTabPanel, decorators: [{
|
|
10084
10462
|
type: Component,
|
|
10085
|
-
args: [{ selector: "db-tab-panel", standalone: true, imports: [CommonModule], template: `<
|
|
10463
|
+
args: [{ selector: "db-tab-panel", standalone: true, imports: [CommonModule], template: `<div
|
|
10086
10464
|
role="tabpanel"
|
|
10087
10465
|
#_ref
|
|
10088
10466
|
[class]="cls('db-tab-panel', className())"
|
|
10089
|
-
[attr.
|
|
10467
|
+
[attr.hidden]="hidden()"
|
|
10468
|
+
[attr.tabIndex]="0"
|
|
10090
10469
|
>
|
|
10091
10470
|
@if(content()){{{content()}}} <ng-content></ng-content>
|
|
10092
|
-
</
|
|
10093
|
-
}], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }],
|
|
10471
|
+
</div> `, styles: [":host{display:contents}\n"] }]
|
|
10472
|
+
}], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
10094
10473
|
|
|
10095
10474
|
const defaultProps$9 = {};
|
|
10096
10475
|
class DBTableDataCell {
|
|
@@ -10154,8 +10533,8 @@ class DBTableDataCell {
|
|
|
10154
10533
|
const element = this._ref()?.nativeElement;
|
|
10155
10534
|
this.enableAttributePassing(element, "db-table-data-cell");
|
|
10156
10535
|
}
|
|
10157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
10536
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableDataCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBTableDataCell, isStandalone: true, selector: "db-table-data-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, rowspan: { classPropertyName: "rowspan", publicName: "rowspan", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<td
|
|
10159
10538
|
#_ref
|
|
10160
10539
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
10161
10540
|
[class]="cls('db-table-data-cell', className())"
|
|
@@ -10168,7 +10547,7 @@ class DBTableDataCell {
|
|
|
10168
10547
|
<ng-content></ng-content>
|
|
10169
10548
|
</td> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
10170
10549
|
}
|
|
10171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10550
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableDataCell, decorators: [{
|
|
10172
10551
|
type: Component,
|
|
10173
10552
|
args: [{ selector: "db-table-data-cell", standalone: true, imports: [CommonModule], template: `<td
|
|
10174
10553
|
#_ref
|
|
@@ -10250,8 +10629,8 @@ class DBTableHeaderCell {
|
|
|
10250
10629
|
const element = this._ref()?.nativeElement;
|
|
10251
10630
|
this.enableAttributePassing(element, "db-table-header-cell");
|
|
10252
10631
|
}
|
|
10253
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10254
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
10632
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10633
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBTableHeaderCell, isStandalone: true, selector: "db-table-header-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, rowspan: { classPropertyName: "rowspan", publicName: "rowspan", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, abbr: { classPropertyName: "abbr", publicName: "abbr", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<th
|
|
10255
10634
|
#_ref
|
|
10256
10635
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
10257
10636
|
[class]="cls('db-table-header-cell', className())"
|
|
@@ -10267,7 +10646,7 @@ class DBTableHeaderCell {
|
|
|
10267
10646
|
<ng-content></ng-content>
|
|
10268
10647
|
</th> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
10269
10648
|
}
|
|
10270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10649
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableHeaderCell, decorators: [{
|
|
10271
10650
|
type: Component,
|
|
10272
10651
|
args: [{ selector: "db-table-header-cell", standalone: true, imports: [CommonModule], template: `<th
|
|
10273
10652
|
#_ref
|
|
@@ -10351,8 +10730,8 @@ class DBTableRow {
|
|
|
10351
10730
|
const element = this._ref()?.nativeElement;
|
|
10352
10731
|
this.enableAttributePassing(element, "db-table-row");
|
|
10353
10732
|
}
|
|
10354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
10733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTableRow, isStandalone: true, selector: "db-table-row", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, subHeaderEmphasis: { classPropertyName: "subHeaderEmphasis", publicName: "subHeaderEmphasis", isSignal: true, isRequired: false, transformFunction: null }, cells: { classPropertyName: "cells", publicName: "cells", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tr
|
|
10356
10735
|
#_ref
|
|
10357
10736
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
10358
10737
|
[class]="cls('db-table-row', className())"
|
|
@@ -10434,7 +10813,7 @@ class DBTableRow {
|
|
|
10434
10813
|
}
|
|
10435
10814
|
</tr> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableDataCell, selector: "db-table-data-cell", inputs: ["id", "propOverrides", "className", "horizontalAlignment", "verticalAlignment", "colSpan", "colspan", "rowSpan", "rowspan", "headers"] }, { kind: "component", type: DBLink, selector: "db-link", inputs: ["id", "propOverrides", "className", "href", "target", "rel", "role", "referrerpolicy", "referrerPolicy", "hreflang", "disabled", "size", "showIcon", "variant", "content", "wrap", "text"] }, { kind: "component", type: DBTableHeaderCell, selector: "db-table-header-cell", inputs: ["id", "propOverrides", "className", "horizontalAlignment", "verticalAlignment", "noText", "scope", "colSpan", "colspan", "rowSpan", "rowspan", "headers", "abbr"] }] }); }
|
|
10436
10815
|
}
|
|
10437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableRow, decorators: [{
|
|
10438
10817
|
type: Component,
|
|
10439
10818
|
args: [{ selector: "db-table-row", standalone: true, imports: [CommonModule, DBTableDataCell, DBLink, DBTableHeaderCell], template: `<tr
|
|
10440
10819
|
#_ref
|
|
@@ -10578,8 +10957,8 @@ class DBTableBody {
|
|
|
10578
10957
|
const element = this._ref()?.nativeElement;
|
|
10579
10958
|
this.enableAttributePassing(element, "db-table-body");
|
|
10580
10959
|
}
|
|
10581
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10582
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
10960
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10961
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTableBody, isStandalone: true, selector: "db-table-body", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tbody
|
|
10583
10962
|
#_ref
|
|
10584
10963
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
10585
10964
|
[class]="cls('db-table-body', className())"
|
|
@@ -10597,7 +10976,7 @@ class DBTableBody {
|
|
|
10597
10976
|
}
|
|
10598
10977
|
</tbody> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "propOverrides", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
|
|
10599
10978
|
}
|
|
10600
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableBody, decorators: [{
|
|
10601
10980
|
type: Component,
|
|
10602
10981
|
args: [{ selector: "db-table-body", standalone: true, imports: [CommonModule, DBTableRow], template: `<tbody
|
|
10603
10982
|
#_ref
|
|
@@ -10677,8 +11056,8 @@ class DBTableFooter {
|
|
|
10677
11056
|
const element = this._ref()?.nativeElement;
|
|
10678
11057
|
this.enableAttributePassing(element, "db-table-footer");
|
|
10679
11058
|
}
|
|
10680
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11059
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTableFooter, isStandalone: true, selector: "db-table-footer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tfoot
|
|
10682
11061
|
#_ref
|
|
10683
11062
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
10684
11063
|
[class]="cls('db-table-footer', className())"
|
|
@@ -10696,7 +11075,7 @@ class DBTableFooter {
|
|
|
10696
11075
|
}
|
|
10697
11076
|
</tfoot> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "propOverrides", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
|
|
10698
11077
|
}
|
|
10699
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11078
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableFooter, decorators: [{
|
|
10700
11079
|
type: Component,
|
|
10701
11080
|
args: [{ selector: "db-table-footer", standalone: true, imports: [CommonModule, DBTableRow], template: `<tfoot
|
|
10702
11081
|
#_ref
|
|
@@ -10808,8 +11187,8 @@ class DBTableHead {
|
|
|
10808
11187
|
ngOnDestroy() {
|
|
10809
11188
|
this.observer()?.disconnect();
|
|
10810
11189
|
}
|
|
10811
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10812
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTableHead, isStandalone: true, selector: "db-table-head", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<thead
|
|
10813
11192
|
#_ref
|
|
10814
11193
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
10815
11194
|
[class]="cls('db-table-head', className())"
|
|
@@ -10828,7 +11207,7 @@ class DBTableHead {
|
|
|
10828
11207
|
}
|
|
10829
11208
|
</thead> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "propOverrides", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
|
|
10830
11209
|
}
|
|
10831
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableHead, decorators: [{
|
|
10832
11211
|
type: Component,
|
|
10833
11212
|
args: [{ selector: "db-table-head", standalone: true, imports: [CommonModule, DBTableRow], template: `<thead
|
|
10834
11213
|
#_ref
|
|
@@ -11025,8 +11404,8 @@ class DBTable {
|
|
|
11025
11404
|
ngOnDestroy() {
|
|
11026
11405
|
this.observer()?.disconnect();
|
|
11027
11406
|
}
|
|
11028
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11407
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTable, isStandalone: true, selector: "db-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mobileVariant: { classPropertyName: "mobileVariant", publicName: "mobileVariant", isSignal: true, isRequired: false, transformFunction: null }, columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showCaption: { classPropertyName: "showCaption", publicName: "showCaption", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, captionPlain: { classPropertyName: "captionPlain", publicName: "captionPlain", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
11030
11409
|
[class]="cls('db-table', className())"
|
|
11031
11410
|
[ngStyle]="_style()"
|
|
11032
11411
|
[attr.data-width]="width()"
|
|
@@ -11056,7 +11435,7 @@ class DBTable {
|
|
|
11056
11435
|
</table>
|
|
11057
11436
|
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DBTableHead, selector: "db-table-head", inputs: ["id", "propOverrides", "className", "rows"] }, { kind: "component", type: DBTableBody, selector: "db-table-body", inputs: ["id", "propOverrides", "className", "rows"] }, { kind: "component", type: DBTableFooter, selector: "db-table-footer", inputs: ["id", "propOverrides", "className", "rows"] }] }); }
|
|
11058
11437
|
}
|
|
11059
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTable, decorators: [{
|
|
11060
11439
|
type: Component,
|
|
11061
11440
|
args: [{ selector: "db-table", standalone: true, imports: [CommonModule, DBTableHead, DBTableBody, DBTableFooter], template: `<div
|
|
11062
11441
|
[class]="cls('db-table', className())"
|
|
@@ -11169,8 +11548,8 @@ class DBTableCaption {
|
|
|
11169
11548
|
ngOnDestroy() {
|
|
11170
11549
|
this.observer()?.disconnect();
|
|
11171
11550
|
}
|
|
11172
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11173
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
11551
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: DBTableCaption, isStandalone: true, selector: "db-table-caption", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<caption
|
|
11174
11553
|
#_ref
|
|
11175
11554
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
11176
11555
|
[class]="cls('db-table-caption', className())"
|
|
@@ -11178,7 +11557,7 @@ class DBTableCaption {
|
|
|
11178
11557
|
<ng-content></ng-content>
|
|
11179
11558
|
</caption> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
11180
11559
|
}
|
|
11181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTableCaption, decorators: [{
|
|
11182
11561
|
type: Component,
|
|
11183
11562
|
args: [{ selector: "db-table-caption", standalone: true, imports: [CommonModule], template: `<caption
|
|
11184
11563
|
#_ref
|
|
@@ -11200,124 +11579,498 @@ const DBTableMobileVariantList = ['table', 'list'];
|
|
|
11200
11579
|
const DBTableStickyHeaderList = ['none', 'both', 'horizontal', 'vertical'];
|
|
11201
11580
|
const DBTableColumnsSizeList = ['auto', '1fr', 'min-content', 'max-content'];
|
|
11202
11581
|
|
|
11203
|
-
const defaultProps$1 = {
|
|
11582
|
+
const defaultProps$1 = {
|
|
11583
|
+
tabItemWidth: "auto",
|
|
11584
|
+
tabItemAlignment: "start",
|
|
11585
|
+
scrollStartLabel: "Scroll start",
|
|
11586
|
+
scrollEndLabel: "Scroll end",
|
|
11587
|
+
};
|
|
11204
11588
|
class DBTabs {
|
|
11205
|
-
|
|
11589
|
+
resetIds() {
|
|
11590
|
+
this._id.set(this.id() ?? this.propOverrides()?.id ?? `tabs-${uuid()}`);
|
|
11591
|
+
}
|
|
11592
|
+
getTabId(index) {
|
|
11593
|
+
const baseId = this.id() ?? this.propOverrides()?.id ?? this._id();
|
|
11594
|
+
return baseId ? `${baseId}-tab-${index}` : undefined;
|
|
11595
|
+
}
|
|
11596
|
+
getPanelId(index) {
|
|
11597
|
+
const baseId = this.id() ?? this.propOverrides()?.id ?? this._id();
|
|
11598
|
+
return baseId ? `${baseId}-tab-panel-${index}` : undefined;
|
|
11599
|
+
}
|
|
11600
|
+
getBaseId() {
|
|
11601
|
+
return this.id() ?? this.propOverrides()?.id;
|
|
11602
|
+
}
|
|
11603
|
+
activateTab(index) {
|
|
11604
|
+
// Prevent activating a disabled tab using cached references
|
|
11605
|
+
const buttons = this._tabButtons();
|
|
11606
|
+
if (buttons.length > 0) {
|
|
11607
|
+
const tab = buttons[index];
|
|
11608
|
+
if (tab?.disabled || tab?.getAttribute("aria-disabled") === "true") {
|
|
11609
|
+
return;
|
|
11610
|
+
}
|
|
11611
|
+
}
|
|
11612
|
+
const value = buttons[index]?.dataset?.["value"];
|
|
11613
|
+
// Controlled mode: never update state or the DOM optimistically.
|
|
11614
|
+
// Only emit the change and let the parent drive selection via
|
|
11615
|
+
// props.activeIndex, which flows through onUpdate -> syncSelection.
|
|
11616
|
+
if (this.activeIndex() !== undefined) {
|
|
11617
|
+
if (index === Number(this.activeIndex())) {
|
|
11618
|
+
return;
|
|
11619
|
+
}
|
|
11620
|
+
if (this.indexChange) {
|
|
11621
|
+
this.indexChange.emit(index);
|
|
11622
|
+
}
|
|
11623
|
+
if (this.valueChange) {
|
|
11624
|
+
this.valueChange.emit(value);
|
|
11625
|
+
}
|
|
11626
|
+
return;
|
|
11627
|
+
}
|
|
11628
|
+
// Uncontrolled mode: own the state and sync the DOM directly.
|
|
11629
|
+
if (this._activeIndex() !== index) {
|
|
11630
|
+
this._activeIndex.set(index);
|
|
11631
|
+
if (this.indexChange) {
|
|
11632
|
+
this.indexChange.emit(index);
|
|
11633
|
+
}
|
|
11634
|
+
if (this.valueChange) {
|
|
11635
|
+
this.valueChange.emit(value);
|
|
11636
|
+
}
|
|
11637
|
+
this.syncSelection(index);
|
|
11638
|
+
}
|
|
11639
|
+
}
|
|
11640
|
+
syncSelection(activeIndex) {
|
|
11641
|
+
const buttons = this._tabButtons();
|
|
11642
|
+
const panels = this._tabPanels();
|
|
11643
|
+
const requestedIndex = activeIndex !== undefined ? activeIndex : this._activeIndex();
|
|
11644
|
+
const isEnabled = (button) => !!button &&
|
|
11645
|
+
!button.disabled &&
|
|
11646
|
+
button.getAttribute("aria-disabled") !== "true";
|
|
11647
|
+
let currentIndex = requestedIndex;
|
|
11648
|
+
if (currentIndex !== -1 && buttons.length > 0) {
|
|
11649
|
+
if (currentIndex < 0 ||
|
|
11650
|
+
currentIndex >= buttons.length ||
|
|
11651
|
+
!isEnabled(buttons[currentIndex])) {
|
|
11652
|
+
const fallback = buttons.findIndex((button) => isEnabled(button));
|
|
11653
|
+
currentIndex = fallback;
|
|
11654
|
+
}
|
|
11655
|
+
}
|
|
11656
|
+
// Persist a resolved fallback so the render path
|
|
11657
|
+
// (getRenderIndex -> _activeIndex) stays consistent with the DOM.
|
|
11658
|
+
// Without this, an invalid/disabled requested index would keep
|
|
11659
|
+
// _activeIndex stale and a later render could show a disabled panel
|
|
11660
|
+
// or hide every panel while another tab is actually selected.
|
|
11661
|
+
// In controlled mode, do NOT persist the fallback: the parent owns
|
|
11662
|
+
// the index and a later change (e.g. tab becoming enabled) must
|
|
11663
|
+
// still be driven by props.activeIndex without stale state blocking it.
|
|
11664
|
+
if (currentIndex !== requestedIndex && this.activeIndex() === undefined) {
|
|
11665
|
+
this._activeIndex.set(currentIndex);
|
|
11666
|
+
}
|
|
11667
|
+
const rovingIndex = currentIndex === -1
|
|
11668
|
+
? buttons.findIndex((button) => isEnabled(button))
|
|
11669
|
+
: currentIndex;
|
|
11670
|
+
buttons.forEach((button, index) => {
|
|
11671
|
+
const isSelected = currentIndex === index;
|
|
11672
|
+
const tabIndex = rovingIndex === index ? 0 : -1;
|
|
11673
|
+
button.setAttribute("aria-selected", String(isSelected));
|
|
11674
|
+
if (!this._focusgroupSupported()) {
|
|
11675
|
+
button.setAttribute("tabindex", String(tabIndex));
|
|
11676
|
+
}
|
|
11677
|
+
});
|
|
11678
|
+
panels.forEach((panel, index) => {
|
|
11679
|
+
const isSelected = currentIndex === index;
|
|
11680
|
+
panel.hidden = !isSelected;
|
|
11681
|
+
});
|
|
11682
|
+
}
|
|
11683
|
+
handleClick(event) {
|
|
11684
|
+
const target = event.target;
|
|
11685
|
+
const button = target.closest('[role="tab"]');
|
|
11686
|
+
if (!button || !this._ref()?.nativeElement)
|
|
11687
|
+
return;
|
|
11688
|
+
// Guard against nested tabs: only handle clicks for tabs belonging to this instance
|
|
11689
|
+
const parentTabs = button.closest(".db-tabs");
|
|
11690
|
+
if (parentTabs !== this._ref()?.nativeElement)
|
|
11691
|
+
return;
|
|
11692
|
+
const buttons = this._tabButtons();
|
|
11693
|
+
const index = buttons.indexOf(button);
|
|
11694
|
+
if (index !== -1) {
|
|
11695
|
+
event.preventDefault();
|
|
11696
|
+
this.activateTab(index);
|
|
11697
|
+
}
|
|
11698
|
+
}
|
|
11699
|
+
handleKeyDown(event) {
|
|
11700
|
+
if (!this._ref()?.nativeElement)
|
|
11701
|
+
return;
|
|
11702
|
+
const key = event.key;
|
|
11703
|
+
if (!NAVIGATION_KEYS.includes(key)) {
|
|
11704
|
+
return;
|
|
11705
|
+
}
|
|
11706
|
+
const buttons = this._tabButtons();
|
|
11707
|
+
if (buttons.length === 0)
|
|
11708
|
+
return;
|
|
11709
|
+
// Only handle keys that originate from a tab owned by this instance.
|
|
11710
|
+
// Prevents events from panel content or nested tabs bubbling up and
|
|
11711
|
+
// being consumed by the wrong tablist.
|
|
11712
|
+
const target = event.target;
|
|
11713
|
+
const focusedButton = target?.closest('[role="tab"]');
|
|
11714
|
+
if (!focusedButton ||
|
|
11715
|
+
focusedButton.closest(".db-tabs") !== this._ref()?.nativeElement) {
|
|
11716
|
+
return;
|
|
11717
|
+
}
|
|
11718
|
+
const currentIndex = buttons.indexOf(focusedButton);
|
|
11719
|
+
if (currentIndex === -1)
|
|
11720
|
+
return;
|
|
11721
|
+
// handle activation (enter / space) -> change panel
|
|
11722
|
+
if (key === "Enter" || key === " ") {
|
|
11723
|
+
event.preventDefault();
|
|
11724
|
+
this.activateTab(currentIndex);
|
|
11725
|
+
return;
|
|
11726
|
+
}
|
|
11727
|
+
// When focusgroup is supported, the browser handles arrow-key
|
|
11728
|
+
// navigation natively – skip our JS-based roving tabindex logic.
|
|
11729
|
+
if (this._focusgroupSupported()) {
|
|
11730
|
+
return;
|
|
11731
|
+
}
|
|
11732
|
+
// Navigation keys depend on orientation: horizontal uses Left/Right,
|
|
11733
|
+
// vertical uses Up/Down (per WAI-ARIA tabs pattern). Home/End apply to both.
|
|
11734
|
+
const isVertical = this.orientation() === "vertical";
|
|
11735
|
+
const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
|
|
11736
|
+
const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
|
|
11737
|
+
// handle navigation (arrows) -> moves focus
|
|
11738
|
+
let nextIndex;
|
|
11739
|
+
const length = buttons.length;
|
|
11740
|
+
if (key === nextKey) {
|
|
11741
|
+
nextIndex = (currentIndex + 1) % length;
|
|
11742
|
+
}
|
|
11743
|
+
else if (key === prevKey) {
|
|
11744
|
+
nextIndex = (currentIndex - 1 + length) % length;
|
|
11745
|
+
}
|
|
11746
|
+
else if (key === "Home") {
|
|
11747
|
+
nextIndex = 0;
|
|
11748
|
+
}
|
|
11749
|
+
else if (key === "End") {
|
|
11750
|
+
nextIndex = length - 1;
|
|
11751
|
+
}
|
|
11752
|
+
if (nextIndex !== undefined) {
|
|
11753
|
+
event.preventDefault();
|
|
11754
|
+
// Skip disabled tabs; nextKey/Home search forward, prevKey/End search backward.
|
|
11755
|
+
const isForward = key === nextKey || key === "Home";
|
|
11756
|
+
for (let i = 0; i < length; i++) {
|
|
11757
|
+
const candidate = buttons[nextIndex];
|
|
11758
|
+
if (!candidate?.disabled &&
|
|
11759
|
+
candidate?.getAttribute("aria-disabled") !== "true") {
|
|
11760
|
+
break;
|
|
11761
|
+
}
|
|
11762
|
+
if (isForward) {
|
|
11763
|
+
nextIndex = (nextIndex + 1) % length;
|
|
11764
|
+
}
|
|
11765
|
+
else {
|
|
11766
|
+
nextIndex = (nextIndex - 1 + length) % length;
|
|
11767
|
+
}
|
|
11768
|
+
}
|
|
11769
|
+
// do not activateTab here for manual activation, just move the focus
|
|
11770
|
+
const nextButton = buttons[nextIndex];
|
|
11771
|
+
if (nextButton &&
|
|
11772
|
+
!nextButton.disabled &&
|
|
11773
|
+
nextButton.getAttribute("aria-disabled") !== "true") {
|
|
11774
|
+
this.moveRovingTabindex(nextIndex);
|
|
11775
|
+
nextButton.focus();
|
|
11776
|
+
}
|
|
11777
|
+
}
|
|
11778
|
+
}
|
|
11779
|
+
moveRovingTabindex(focusIndex) {
|
|
11780
|
+
if (this._focusgroupSupported())
|
|
11781
|
+
return;
|
|
11782
|
+
const buttons = this._tabButtons();
|
|
11783
|
+
buttons.forEach((button, index) => {
|
|
11784
|
+
button.setAttribute("tabindex", focusIndex === index ? "0" : "-1");
|
|
11785
|
+
});
|
|
11786
|
+
}
|
|
11787
|
+
getTabs() {
|
|
11206
11788
|
try {
|
|
11207
11789
|
if (typeof this.tabs() === "string") {
|
|
11208
|
-
|
|
11790
|
+
const parsed = JSON.parse(this.tabs());
|
|
11791
|
+
// Normalize hyphenated aria-label to camelCase ariaLabel
|
|
11792
|
+
// so the render path can forward it consistently.
|
|
11793
|
+
return parsed.map((tab) => {
|
|
11794
|
+
const entry = tab;
|
|
11795
|
+
if (!entry["ariaLabel"] && entry["aria-label"]) {
|
|
11796
|
+
return {
|
|
11797
|
+
...entry,
|
|
11798
|
+
ariaLabel: entry["aria-label"],
|
|
11799
|
+
};
|
|
11800
|
+
}
|
|
11801
|
+
return tab;
|
|
11802
|
+
});
|
|
11803
|
+
}
|
|
11804
|
+
else if (this.tabs()) {
|
|
11805
|
+
// Normalize hyphenated aria-label to camelCase ariaLabel
|
|
11806
|
+
// for object arrays as well (users may pass aria-label keys).
|
|
11807
|
+
// Return a shallow copy to avoid mutating frozen input data.
|
|
11808
|
+
return this.tabs().map((tab) => {
|
|
11809
|
+
const entry = tab;
|
|
11810
|
+
if (!entry["ariaLabel"] && entry["aria-label"]) {
|
|
11811
|
+
return {
|
|
11812
|
+
...entry,
|
|
11813
|
+
ariaLabel: entry["aria-label"],
|
|
11814
|
+
};
|
|
11815
|
+
}
|
|
11816
|
+
return tab;
|
|
11817
|
+
});
|
|
11209
11818
|
}
|
|
11210
|
-
return this.tabs();
|
|
11211
11819
|
}
|
|
11212
11820
|
catch (error) {
|
|
11213
11821
|
console.error(error);
|
|
11214
11822
|
}
|
|
11215
11823
|
return [];
|
|
11216
11824
|
}
|
|
11825
|
+
getRenderIndex() {
|
|
11826
|
+
return this.initialized() ? this._activeIndex() : this.getInitialIndex();
|
|
11827
|
+
}
|
|
11828
|
+
getRenderFocusIndex() {
|
|
11829
|
+
const activeIdx = this.getRenderIndex();
|
|
11830
|
+
if (activeIdx !== -1) {
|
|
11831
|
+
return activeIdx;
|
|
11832
|
+
}
|
|
11833
|
+
// In manual mode, find the first enabled tab from the data-driven list.
|
|
11834
|
+
const tabs = this.getTabs();
|
|
11835
|
+
const firstEnabled = tabs.findIndex((tab) => !getBoolean(tab.disabled, "disabled"));
|
|
11836
|
+
return firstEnabled !== -1 ? firstEnabled : 0;
|
|
11837
|
+
}
|
|
11838
|
+
getInitialIndex() {
|
|
11839
|
+
const tabs = this.getTabs();
|
|
11840
|
+
const isEnabled = (tab) => !getBoolean(tab.disabled, "disabled");
|
|
11841
|
+
if (this.activeIndex() !== undefined) {
|
|
11842
|
+
const parsedIndex = Number(this.activeIndex());
|
|
11843
|
+
const idx = isNaN(parsedIndex) ? 0 : parsedIndex;
|
|
11844
|
+
// Clamp out-of-range or disabled controlled index to the first
|
|
11845
|
+
// enabled tab so the initial render is never empty.
|
|
11846
|
+
if (tabs.length > 0 &&
|
|
11847
|
+
(idx < 0 || idx >= tabs.length || (tabs[idx] && !isEnabled(tabs[idx])))) {
|
|
11848
|
+
const firstEnabled = tabs.findIndex(isEnabled);
|
|
11849
|
+
return firstEnabled > -1 ? firstEnabled : 0;
|
|
11850
|
+
}
|
|
11851
|
+
return idx;
|
|
11852
|
+
}
|
|
11853
|
+
if (this.initialSelectedIndex() !== undefined) {
|
|
11854
|
+
const parsedIndex = Number(this.initialSelectedIndex());
|
|
11855
|
+
if (isNaN(parsedIndex))
|
|
11856
|
+
return 0;
|
|
11857
|
+
// Clamp out-of-range index to the first enabled tab.
|
|
11858
|
+
if (tabs.length > 0 && parsedIndex >= tabs.length) {
|
|
11859
|
+
const firstEnabled = tabs.findIndex(isEnabled);
|
|
11860
|
+
return firstEnabled > -1 ? firstEnabled : 0;
|
|
11861
|
+
}
|
|
11862
|
+
// Skip disabled tabs at the requested index.
|
|
11863
|
+
if (tabs.length > 0 &&
|
|
11864
|
+
tabs[parsedIndex] &&
|
|
11865
|
+
!isEnabled(tabs[parsedIndex])) {
|
|
11866
|
+
const firstEnabled = tabs.findIndex(isEnabled);
|
|
11867
|
+
return firstEnabled > -1 ? firstEnabled : 0;
|
|
11868
|
+
}
|
|
11869
|
+
return parsedIndex;
|
|
11870
|
+
}
|
|
11871
|
+
if (this.initialSelectedMode() === "manually") {
|
|
11872
|
+
return -1;
|
|
11873
|
+
}
|
|
11874
|
+
// Find the first tab marked active that is not disabled.
|
|
11875
|
+
const activeTabIndex = tabs.findIndex((tab) => getBoolean(tab.active, "active") && isEnabled(tab));
|
|
11876
|
+
if (activeTabIndex > -1) {
|
|
11877
|
+
return activeTabIndex;
|
|
11878
|
+
}
|
|
11879
|
+
// Fallback: first enabled tab (or 0 if all are disabled).
|
|
11880
|
+
const firstEnabled = tabs.findIndex(isEnabled);
|
|
11881
|
+
return firstEnabled > -1 ? firstEnabled : 0;
|
|
11882
|
+
}
|
|
11883
|
+
getActiveChildIndex() {
|
|
11884
|
+
return this._tabButtons().findIndex((button) => button.getAttribute("aria-selected") === "true" &&
|
|
11885
|
+
!button.disabled &&
|
|
11886
|
+
button.getAttribute("aria-disabled") !== "true");
|
|
11887
|
+
}
|
|
11888
|
+
shouldUseActiveChild(hashApplied) {
|
|
11889
|
+
return (!hashApplied &&
|
|
11890
|
+
!this.tabs() &&
|
|
11891
|
+
this.activeIndex() === undefined &&
|
|
11892
|
+
this.initialSelectedIndex() === undefined &&
|
|
11893
|
+
(this.initialSelectedMode() === undefined ||
|
|
11894
|
+
this.initialSelectedMode() === "auto"));
|
|
11895
|
+
}
|
|
11896
|
+
_getScrollContainer() {
|
|
11897
|
+
return (this._ref()?.nativeElement?.querySelector('[role="tablist"]') ?? null);
|
|
11898
|
+
}
|
|
11899
|
+
_isRtl() {
|
|
11900
|
+
const container = this._getScrollContainer();
|
|
11901
|
+
return (!!container &&
|
|
11902
|
+
typeof getComputedStyle !== "undefined" &&
|
|
11903
|
+
getComputedStyle(container).direction === "rtl");
|
|
11904
|
+
}
|
|
11217
11905
|
evaluateScrollButtons(tList) {
|
|
11218
11906
|
const needsScroll = tList.scrollWidth > tList.clientWidth;
|
|
11219
|
-
|
|
11220
|
-
|
|
11907
|
+
if (!needsScroll) {
|
|
11908
|
+
this.showScrollStart.set(false);
|
|
11909
|
+
this.showScrollEnd.set(false);
|
|
11910
|
+
return;
|
|
11911
|
+
}
|
|
11912
|
+
const scrollPos = Math.abs(tList.scrollLeft);
|
|
11913
|
+
const maxScroll = tList.scrollWidth - tList.clientWidth;
|
|
11914
|
+
const tolerance = 2;
|
|
11915
|
+
this.showScrollStart.set(scrollPos > tolerance);
|
|
11916
|
+
this.showScrollEnd.set(scrollPos < maxScroll - tolerance);
|
|
11221
11917
|
}
|
|
11222
|
-
scroll(
|
|
11223
|
-
|
|
11224
|
-
if (
|
|
11918
|
+
scroll(toStart) {
|
|
11919
|
+
const container = this._getScrollContainer();
|
|
11920
|
+
if (!container) {
|
|
11921
|
+
return;
|
|
11922
|
+
}
|
|
11923
|
+
let step = Number(this.arrowScrollDistance()) || 120;
|
|
11924
|
+
const isLeft = !!toStart;
|
|
11925
|
+
const isRtl = this._isRtl();
|
|
11926
|
+
if (isLeft !== isRtl) {
|
|
11225
11927
|
step *= -1;
|
|
11226
11928
|
}
|
|
11227
|
-
|
|
11228
|
-
top: 0,
|
|
11929
|
+
container.scrollBy({
|
|
11229
11930
|
left: step,
|
|
11230
11931
|
behavior: "smooth",
|
|
11231
11932
|
});
|
|
11232
11933
|
}
|
|
11233
11934
|
initTabList() {
|
|
11234
11935
|
if (this._ref()?.nativeElement) {
|
|
11235
|
-
const
|
|
11236
|
-
if (
|
|
11237
|
-
|
|
11238
|
-
|
|
11239
|
-
|
|
11240
|
-
|
|
11241
|
-
|
|
11242
|
-
|
|
11243
|
-
|
|
11936
|
+
const container = this._getScrollContainer();
|
|
11937
|
+
if (container) {
|
|
11938
|
+
// Set ARIA here (after paint, when tablist exists); onUpdate hooks only fire reliably for later prop changes.
|
|
11939
|
+
container.setAttribute("aria-orientation", this.orientation() ?? "horizontal");
|
|
11940
|
+
// Set the focusgroup attribute to match orientation.
|
|
11941
|
+
// The tablist value defaults to inline wrap (horizontal);
|
|
11942
|
+
// for vertical tabs we override with block.
|
|
11943
|
+
const focusgroupValue = this.orientation() === "vertical" ? "tablist block wrap" : "tablist";
|
|
11944
|
+
container.setAttribute("focusgroup", focusgroupValue);
|
|
11945
|
+
const label = this.label();
|
|
11946
|
+
if (label) {
|
|
11947
|
+
container.setAttribute("aria-label", label);
|
|
11948
|
+
this._appliedLabel.set(label);
|
|
11949
|
+
}
|
|
11950
|
+
if (this.behavior() === "arrows") {
|
|
11951
|
+
this.evaluateScrollButtons(container);
|
|
11952
|
+
// Set up the scroll listener only once to avoid an Angular effect loop (initTabList reads + writes _scrollListener).
|
|
11953
|
+
if (!this._scrollListener()) {
|
|
11954
|
+
const onScroll = () => this.evaluateScrollButtons(container);
|
|
11955
|
+
this._scrollListener.set({
|
|
11956
|
+
fn: onScroll,
|
|
11957
|
+
});
|
|
11958
|
+
container.addEventListener("scroll", onScroll);
|
|
11959
|
+
}
|
|
11960
|
+
if (!this._resizeObserver()) {
|
|
11961
|
+
const observer = new ResizeObserver(() => {
|
|
11244
11962
|
this.evaluateScrollButtons(container);
|
|
11245
11963
|
});
|
|
11246
|
-
|
|
11247
|
-
|
|
11248
|
-
// detection than global window resize events.
|
|
11249
|
-
if (!this._resizeObserverCallbackId()) {
|
|
11250
|
-
this._resizeObserverCallbackId.set(new ResizeObserverListener().observe(container, () => {
|
|
11251
|
-
this.evaluateScrollButtons(container);
|
|
11252
|
-
}));
|
|
11253
|
-
}
|
|
11964
|
+
observer.observe(container);
|
|
11965
|
+
this._resizeObserver.set(observer);
|
|
11254
11966
|
}
|
|
11255
11967
|
}
|
|
11256
11968
|
}
|
|
11257
11969
|
}
|
|
11258
11970
|
}
|
|
11259
|
-
|
|
11260
|
-
|
|
11261
|
-
|
|
11262
|
-
|
|
11263
|
-
|
|
11264
|
-
|
|
11265
|
-
|
|
11266
|
-
|
|
11267
|
-
|
|
11268
|
-
|
|
11269
|
-
|
|
11270
|
-
|
|
11271
|
-
|
|
11272
|
-
|
|
11273
|
-
|
|
11274
|
-
|
|
11275
|
-
|
|
11276
|
-
|
|
11277
|
-
|
|
11278
|
-
|
|
11279
|
-
|
|
11280
|
-
|
|
11281
|
-
|
|
11282
|
-
|
|
11283
|
-
|
|
11284
|
-
|
|
11285
|
-
|
|
11286
|
-
|
|
11971
|
+
_teardownScrollHandlers() {
|
|
11972
|
+
const _listener = this._scrollListener();
|
|
11973
|
+
const _container = this._getScrollContainer();
|
|
11974
|
+
if (_listener && _container) {
|
|
11975
|
+
_container.removeEventListener("scroll", _listener.fn);
|
|
11976
|
+
}
|
|
11977
|
+
this._scrollListener.set(null);
|
|
11978
|
+
this._resizeObserver()?.disconnect();
|
|
11979
|
+
this._resizeObserver.set(null);
|
|
11980
|
+
this.showScrollStart.set(false);
|
|
11981
|
+
this.showScrollEnd.set(false);
|
|
11982
|
+
}
|
|
11983
|
+
_isOwnedPanel(panel) {
|
|
11984
|
+
const owner = panel.parentElement?.closest('.db-tabs, [role="tabpanel"]');
|
|
11985
|
+
return owner === this._ref()?.nativeElement;
|
|
11986
|
+
}
|
|
11987
|
+
_resolveHashIndex() {
|
|
11988
|
+
let startIndex = this.getInitialIndex();
|
|
11989
|
+
let hashApplied = false;
|
|
11990
|
+
const baseId = this.getBaseId();
|
|
11991
|
+
if (typeof window !== "undefined" && window.location.hash && baseId) {
|
|
11992
|
+
const hashId = window.location.hash.substring(1);
|
|
11993
|
+
const prefix = `${baseId}-tab-`;
|
|
11994
|
+
if (hashId.startsWith(prefix)) {
|
|
11995
|
+
const indexStr = hashId.replace(prefix, "");
|
|
11996
|
+
const index = parseInt(indexStr, 10);
|
|
11997
|
+
if (!isNaN(index)) {
|
|
11998
|
+
startIndex = index;
|
|
11999
|
+
hashApplied = true;
|
|
11287
12000
|
}
|
|
11288
12001
|
}
|
|
11289
|
-
for (const panel of tabPanels) {
|
|
11290
|
-
if (panel.id)
|
|
11291
|
-
continue;
|
|
11292
|
-
const index = tabPanels.indexOf(panel);
|
|
11293
|
-
panel.id = `${this._name()}-tab-panel-${index}`;
|
|
11294
|
-
panel.setAttribute("aria-labelledby", `${this._name()}-tab-${index}`);
|
|
11295
|
-
}
|
|
11296
12002
|
}
|
|
12003
|
+
return {
|
|
12004
|
+
startIndex,
|
|
12005
|
+
hashApplied,
|
|
12006
|
+
};
|
|
11297
12007
|
}
|
|
11298
|
-
|
|
11299
|
-
|
|
11300
|
-
|
|
11301
|
-
|
|
11302
|
-
const
|
|
11303
|
-
|
|
11304
|
-
|
|
11305
|
-
|
|
11306
|
-
|
|
11307
|
-
|
|
11308
|
-
|
|
11309
|
-
|
|
11310
|
-
|
|
11311
|
-
|
|
11312
|
-
|
|
11313
|
-
|
|
11314
|
-
|
|
11315
|
-
|
|
11316
|
-
|
|
11317
|
-
|
|
12008
|
+
_setupObserver() {
|
|
12009
|
+
if (!this._ref()?.nativeElement)
|
|
12010
|
+
return;
|
|
12011
|
+
const observer = new MutationObserver((mutations) => {
|
|
12012
|
+
const isTabNode = (node) => {
|
|
12013
|
+
const element = node;
|
|
12014
|
+
return (!!element.matches &&
|
|
12015
|
+
(element.matches('[role="tab"], [role="tabpanel"]') ||
|
|
12016
|
+
!!element.querySelector?.('[role="tab"], [role="tabpanel"]')));
|
|
12017
|
+
};
|
|
12018
|
+
const hasTabChange = mutations.some((mutation) => Array.from(mutation.addedNodes).some(isTabNode) ||
|
|
12019
|
+
Array.from(mutation.removedNodes).some(isTabNode));
|
|
12020
|
+
const hasContentChange = mutations.some((mutation) => mutation.type === "characterData");
|
|
12021
|
+
// Detect disabled/aria-disabled attribute changes on tab buttons
|
|
12022
|
+
// so that selection falls back when the active tab becomes disabled.
|
|
12023
|
+
const hasDisabledChange = mutations.some((mutation) => mutation.type === "attributes" &&
|
|
12024
|
+
(mutation.attributeName === "disabled" ||
|
|
12025
|
+
mutation.attributeName === "aria-disabled") &&
|
|
12026
|
+
mutation.target?.getAttribute?.("role") === "tab");
|
|
12027
|
+
if (!hasTabChange && !hasContentChange && !hasDisabledChange)
|
|
12028
|
+
return;
|
|
12029
|
+
const rafId = this._pendingRafId();
|
|
12030
|
+
if (rafId !== null)
|
|
12031
|
+
cancelAnimationFrame(rafId);
|
|
12032
|
+
this._pendingRafId.set(requestAnimationFrame(() => {
|
|
12033
|
+
this._pendingRafId.set(null);
|
|
12034
|
+
this.initTabList();
|
|
12035
|
+
if (hasTabChange) {
|
|
12036
|
+
this.initTabs();
|
|
12037
|
+
}
|
|
12038
|
+
if (hasDisabledChange) {
|
|
12039
|
+
this.syncSelection(this._activeIndex());
|
|
11318
12040
|
}
|
|
12041
|
+
}));
|
|
12042
|
+
});
|
|
12043
|
+
observer.observe(this._ref()?.nativeElement, {
|
|
12044
|
+
childList: true,
|
|
12045
|
+
subtree: true,
|
|
12046
|
+
characterData: true,
|
|
12047
|
+
attributes: true,
|
|
12048
|
+
attributeFilter: ["disabled", "aria-disabled"],
|
|
12049
|
+
});
|
|
12050
|
+
this._observer.set(observer);
|
|
12051
|
+
}
|
|
12052
|
+
initTabs() {
|
|
12053
|
+
const baseId = this.id() ?? this.propOverrides()?.id ?? this._id();
|
|
12054
|
+
if (!baseId || !this._ref()?.nativeElement)
|
|
12055
|
+
return;
|
|
12056
|
+
const tabListEl = this._getScrollContainer();
|
|
12057
|
+
const panels = Array.from(this._ref()?.nativeElement?.querySelectorAll('[role="tabpanel"]') ?? []).filter((panel) => this._isOwnedPanel(panel));
|
|
12058
|
+
if (!tabListEl)
|
|
12059
|
+
return;
|
|
12060
|
+
const buttons = Array.from(tabListEl.querySelectorAll('[role="tab"]'));
|
|
12061
|
+
this._tabButtons.set(buttons);
|
|
12062
|
+
this._tabPanels.set(panels);
|
|
12063
|
+
buttons.forEach((button, index) => {
|
|
12064
|
+
const panel = panels[index];
|
|
12065
|
+
const buttonId = `${baseId}-tab-${index}`;
|
|
12066
|
+
button.id = buttonId;
|
|
12067
|
+
if (panel) {
|
|
12068
|
+
const panelId = `${baseId}-tab-panel-${index}`;
|
|
12069
|
+
panel.id = panelId;
|
|
12070
|
+
button.setAttribute("aria-controls", panelId);
|
|
12071
|
+
panel.setAttribute("aria-labelledby", buttonId);
|
|
11319
12072
|
}
|
|
11320
|
-
}
|
|
12073
|
+
});
|
|
11321
12074
|
}
|
|
11322
12075
|
setupObserver(element) {
|
|
11323
12076
|
if (!element)
|
|
@@ -11339,65 +12092,162 @@ class DBTabs {
|
|
|
11339
12092
|
});
|
|
11340
12093
|
}
|
|
11341
12094
|
trackByTab0(index, tab) {
|
|
11342
|
-
return this.
|
|
12095
|
+
return this.label() + "tab-item" + index;
|
|
11343
12096
|
}
|
|
11344
12097
|
trackByTab1(index, tab) {
|
|
11345
|
-
return this.
|
|
12098
|
+
return this.label() + "tab-panel" + index;
|
|
11346
12099
|
}
|
|
11347
12100
|
constructor() {
|
|
11348
12101
|
this.cls = cls;
|
|
11349
|
-
this.DEFAULT_SCROLL_LEFT = DEFAULT_SCROLL_LEFT;
|
|
11350
|
-
this.DEFAULT_SCROLL_RIGHT = DEFAULT_SCROLL_RIGHT;
|
|
11351
|
-
this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
11352
12102
|
this.tabs = input(...(ngDevMode ? [undefined, { debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
11353
|
-
this.
|
|
12103
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
12104
|
+
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
|
|
11354
12105
|
this.orientation = input(...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
12106
|
+
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
11355
12107
|
this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : /* istanbul ignore next */ []));
|
|
11356
|
-
this.
|
|
12108
|
+
this.activeIndex = input(...(ngDevMode ? [undefined, { debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
11357
12109
|
this.initialSelectedIndex = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedIndex" }] : /* istanbul ignore next */ []));
|
|
11358
|
-
this.
|
|
11359
|
-
this.
|
|
12110
|
+
this.initialSelectedMode = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedMode" }] : /* istanbul ignore next */ []));
|
|
12111
|
+
this.arrowScrollDistance = input(...(ngDevMode ? [undefined, { debugName: "arrowScrollDistance" }] : /* istanbul ignore next */ []));
|
|
11360
12112
|
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
11361
|
-
this.
|
|
11362
|
-
this.
|
|
11363
|
-
this.
|
|
11364
|
-
this.
|
|
12113
|
+
this.tabItemAlignment = input(defaultProps$1["tabItemAlignment"], ...(ngDevMode ? [{ debugName: "tabItemAlignment" }] : /* istanbul ignore next */ []));
|
|
12114
|
+
this.tabItemWidth = input(defaultProps$1["tabItemWidth"], ...(ngDevMode ? [{ debugName: "tabItemWidth" }] : /* istanbul ignore next */ []));
|
|
12115
|
+
this.scrollStartLabel = input(defaultProps$1["scrollStartLabel"], ...(ngDevMode ? [{ debugName: "scrollStartLabel" }] : /* istanbul ignore next */ []));
|
|
12116
|
+
this.scrollEndLabel = input(defaultProps$1["scrollEndLabel"], ...(ngDevMode ? [{ debugName: "scrollEndLabel" }] : /* istanbul ignore next */ []));
|
|
11365
12117
|
this.indexChange = output();
|
|
11366
|
-
this.
|
|
12118
|
+
this.valueChange = output();
|
|
11367
12119
|
this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
|
|
11368
|
-
this.
|
|
12120
|
+
this._activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
|
|
11369
12121
|
this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
11370
|
-
this.
|
|
11371
|
-
this.
|
|
11372
|
-
this.
|
|
11373
|
-
this.
|
|
12122
|
+
this.showScrollStart = signal(false, ...(ngDevMode ? [{ debugName: "showScrollStart" }] : /* istanbul ignore next */ []));
|
|
12123
|
+
this.showScrollEnd = signal(false, ...(ngDevMode ? [{ debugName: "showScrollEnd" }] : /* istanbul ignore next */ []));
|
|
12124
|
+
this._resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "_resizeObserver" }] : /* istanbul ignore next */ []));
|
|
12125
|
+
this._observer = signal(null, ...(ngDevMode ? [{ debugName: "_observer" }] : /* istanbul ignore next */ []));
|
|
12126
|
+
this._pendingRafId = signal(null, ...(ngDevMode ? [{ debugName: "_pendingRafId" }] : /* istanbul ignore next */ []));
|
|
12127
|
+
this._scrollListener = signal(null, ...(ngDevMode ? [{ debugName: "_scrollListener" }] : /* istanbul ignore next */ []));
|
|
12128
|
+
this._focusgroupSupported = signal(false, ...(ngDevMode ? [{ debugName: "_focusgroupSupported" }] : /* istanbul ignore next */ []));
|
|
12129
|
+
this._tabButtons = signal([], ...(ngDevMode ? [{ debugName: "_tabButtons" }] : /* istanbul ignore next */ []));
|
|
12130
|
+
this._tabPanels = signal([], ...(ngDevMode ? [{ debugName: "_tabPanels" }] : /* istanbul ignore next */ []));
|
|
12131
|
+
this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
|
|
12132
|
+
this._appliedLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_appliedLabel" }] : /* istanbul ignore next */ []));
|
|
11374
12133
|
this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
|
|
11375
12134
|
if (typeof window !== "undefined") {
|
|
11376
12135
|
effect(() => {
|
|
11377
12136
|
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
11378
|
-
this.
|
|
12137
|
+
this.tabs();
|
|
11379
12138
|
this.initialized();
|
|
11380
12139
|
// ---
|
|
11381
|
-
if (this.
|
|
12140
|
+
if (this.initialized() && this.tabs()) {
|
|
11382
12141
|
this.initTabList();
|
|
11383
|
-
this.initTabs(
|
|
11384
|
-
|
|
11385
|
-
|
|
11386
|
-
|
|
11387
|
-
|
|
11388
|
-
|
|
11389
|
-
|
|
11390
|
-
|
|
11391
|
-
|
|
11392
|
-
|
|
11393
|
-
|
|
11394
|
-
|
|
11395
|
-
|
|
11396
|
-
|
|
11397
|
-
|
|
11398
|
-
|
|
12142
|
+
this.initTabs();
|
|
12143
|
+
this.syncSelection(this._activeIndex());
|
|
12144
|
+
}
|
|
12145
|
+
}, Number(VERSION.major) < 19
|
|
12146
|
+
? { allowSignalWrites: true }
|
|
12147
|
+
: undefined);
|
|
12148
|
+
effect(() => {
|
|
12149
|
+
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
12150
|
+
this.id();
|
|
12151
|
+
// ---
|
|
12152
|
+
if (this.id() ?? this.propOverrides()?.id) {
|
|
12153
|
+
this.resetIds();
|
|
12154
|
+
}
|
|
12155
|
+
}, Number(VERSION.major) < 19
|
|
12156
|
+
? { allowSignalWrites: true }
|
|
12157
|
+
: undefined);
|
|
12158
|
+
effect(() => {
|
|
12159
|
+
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
12160
|
+
this._id();
|
|
12161
|
+
// ---
|
|
12162
|
+
if (this._id()) {
|
|
12163
|
+
this.initTabs();
|
|
12164
|
+
}
|
|
12165
|
+
}, Number(VERSION.major) < 19
|
|
12166
|
+
? { allowSignalWrites: true }
|
|
12167
|
+
: undefined);
|
|
12168
|
+
effect(() => {
|
|
12169
|
+
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
12170
|
+
this._ref();
|
|
12171
|
+
this.orientation();
|
|
12172
|
+
// ---
|
|
12173
|
+
if (this._ref()?.nativeElement) {
|
|
12174
|
+
const container = this._getScrollContainer();
|
|
12175
|
+
container?.setAttribute("aria-orientation", this.orientation() ?? "horizontal");
|
|
12176
|
+
// Keep the focusgroup attribute in sync so browsers that support
|
|
12177
|
+
// it use the correct axis for arrow-key navigation.
|
|
12178
|
+
if (container) {
|
|
12179
|
+
const focusgroupValue = this.orientation() === "vertical"
|
|
12180
|
+
? "tablist block wrap"
|
|
12181
|
+
: "tablist";
|
|
12182
|
+
container.setAttribute("focusgroup", focusgroupValue);
|
|
11399
12183
|
}
|
|
11400
|
-
|
|
12184
|
+
}
|
|
12185
|
+
}, Number(VERSION.major) < 19
|
|
12186
|
+
? { allowSignalWrites: true }
|
|
12187
|
+
: undefined);
|
|
12188
|
+
effect(() => {
|
|
12189
|
+
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
12190
|
+
this._ref();
|
|
12191
|
+
this.label();
|
|
12192
|
+
// ---
|
|
12193
|
+
if (this._ref()?.nativeElement) {
|
|
12194
|
+
const label = this.label();
|
|
12195
|
+
const container = this._getScrollContainer();
|
|
12196
|
+
if (label) {
|
|
12197
|
+
container?.setAttribute("aria-label", label);
|
|
12198
|
+
this._appliedLabel.set(label);
|
|
12199
|
+
}
|
|
12200
|
+
else if (this._appliedLabel()) {
|
|
12201
|
+
// Only remove aria-label if we previously set it;
|
|
12202
|
+
// preserve any consumer-provided label on DBTabList.
|
|
12203
|
+
const current = container?.getAttribute("aria-label");
|
|
12204
|
+
if (current === this._appliedLabel()) {
|
|
12205
|
+
container?.removeAttribute("aria-label");
|
|
12206
|
+
}
|
|
12207
|
+
this._appliedLabel.set(undefined);
|
|
12208
|
+
}
|
|
12209
|
+
}
|
|
12210
|
+
}, Number(VERSION.major) < 19
|
|
12211
|
+
? { allowSignalWrites: true }
|
|
12212
|
+
: undefined);
|
|
12213
|
+
effect(() => {
|
|
12214
|
+
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
12215
|
+
this._ref();
|
|
12216
|
+
this.behavior();
|
|
12217
|
+
// ---
|
|
12218
|
+
if (this._ref()?.nativeElement) {
|
|
12219
|
+
if (this.behavior() === "arrows") {
|
|
12220
|
+
this.initTabList();
|
|
12221
|
+
}
|
|
12222
|
+
else {
|
|
12223
|
+
this._teardownScrollHandlers();
|
|
12224
|
+
}
|
|
12225
|
+
}
|
|
12226
|
+
}, Number(VERSION.major) < 19
|
|
12227
|
+
? { allowSignalWrites: true }
|
|
12228
|
+
: undefined);
|
|
12229
|
+
effect(() => {
|
|
12230
|
+
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
12231
|
+
this.activeIndex();
|
|
12232
|
+
// ---
|
|
12233
|
+
if (this.activeIndex() !== undefined) {
|
|
12234
|
+
const newIndex = Number(this.activeIndex());
|
|
12235
|
+
if (!isNaN(newIndex)) {
|
|
12236
|
+
this._activeIndex.set(newIndex);
|
|
12237
|
+
}
|
|
12238
|
+
}
|
|
12239
|
+
}, Number(VERSION.major) < 19
|
|
12240
|
+
? { allowSignalWrites: true }
|
|
12241
|
+
: undefined);
|
|
12242
|
+
effect(() => {
|
|
12243
|
+
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
12244
|
+
this._tabButtons();
|
|
12245
|
+
this._tabPanels();
|
|
12246
|
+
this._activeIndex();
|
|
12247
|
+
this.initialized();
|
|
12248
|
+
// ---
|
|
12249
|
+
if (this.initialized() && this._tabButtons().length > 0) {
|
|
12250
|
+
this.syncSelection(this._activeIndex());
|
|
11401
12251
|
}
|
|
11402
12252
|
}, Number(VERSION.major) < 19
|
|
11403
12253
|
? { allowSignalWrites: true }
|
|
@@ -11449,125 +12299,156 @@ class DBTabs {
|
|
|
11449
12299
|
const element = this._ref()?.nativeElement;
|
|
11450
12300
|
this.enableAttributePassing(element, "db-tabs");
|
|
11451
12301
|
if (typeof window !== "undefined") {
|
|
11452
|
-
this.
|
|
12302
|
+
this._focusgroupSupported.set(hasFocusgroupSupport());
|
|
12303
|
+
this.resetIds();
|
|
12304
|
+
const { startIndex, hashApplied } = this._resolveHashIndex();
|
|
12305
|
+
this._activeIndex.set(startIndex);
|
|
11453
12306
|
this.initialized.set(true);
|
|
12307
|
+
if (typeof window !== "undefined" && this._ref()?.nativeElement) {
|
|
12308
|
+
// Run initialization synchronously — DOM is ready at onMount,
|
|
12309
|
+
// children are already rendered in all target frameworks.
|
|
12310
|
+
// This eliminates the previous RAF deferral and the duplicate
|
|
12311
|
+
// pre-paint sync block, preventing any flash of unstyled panels.
|
|
12312
|
+
this.initTabList();
|
|
12313
|
+
this.initTabs();
|
|
12314
|
+
let resolvedIndex = startIndex;
|
|
12315
|
+
if (this.shouldUseActiveChild(hashApplied)) {
|
|
12316
|
+
const activeChildIndex = this.getActiveChildIndex();
|
|
12317
|
+
if (activeChildIndex > -1) {
|
|
12318
|
+
resolvedIndex = activeChildIndex;
|
|
12319
|
+
this._activeIndex.set(activeChildIndex);
|
|
12320
|
+
}
|
|
12321
|
+
}
|
|
12322
|
+
this.syncSelection(resolvedIndex);
|
|
12323
|
+
}
|
|
12324
|
+
this._setupObserver();
|
|
11454
12325
|
this.setupObserver(element);
|
|
11455
12326
|
}
|
|
11456
12327
|
}
|
|
11457
12328
|
ngOnDestroy() {
|
|
11458
|
-
|
|
11459
|
-
|
|
11460
|
-
|
|
11461
|
-
|
|
12329
|
+
const rafId = this._pendingRafId();
|
|
12330
|
+
if (rafId !== null) {
|
|
12331
|
+
cancelAnimationFrame(rafId);
|
|
12332
|
+
this._pendingRafId.set(null);
|
|
12333
|
+
}
|
|
12334
|
+
this._teardownScrollHandlers();
|
|
12335
|
+
this._observer()?.disconnect();
|
|
12336
|
+
this._observer.set(null);
|
|
11462
12337
|
this.observer()?.disconnect();
|
|
11463
12338
|
}
|
|
11464
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11465
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
12339
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12340
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabItemAlignment: { classPropertyName: "tabItemAlignment", publicName: "tabItemAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabItemWidth: { classPropertyName: "tabItemWidth", publicName: "tabItemWidth", isSignal: true, isRequired: false, transformFunction: null }, scrollStartLabel: { classPropertyName: "scrollStartLabel", publicName: "scrollStartLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollEndLabel: { classPropertyName: "scrollEndLabel", publicName: "scrollEndLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
|
|
11466
12341
|
#_ref
|
|
11467
|
-
[attr.id]="id() ?? propOverrides()?.id"
|
|
12342
|
+
[attr.id]="id() ?? propOverrides()?.id ?? _id()"
|
|
11468
12343
|
[class]="cls('db-tabs', className())"
|
|
11469
12344
|
[attr.data-orientation]="orientation()"
|
|
11470
12345
|
[attr.data-scroll-behavior]="behavior()"
|
|
11471
|
-
[attr.data-alignment]="
|
|
11472
|
-
[attr.data-width]="
|
|
11473
|
-
|
|
11474
|
-
(
|
|
12346
|
+
[attr.data-tab-item-alignment]="tabItemAlignment()"
|
|
12347
|
+
[attr.data-tab-item-width]="tabItemWidth()"
|
|
12348
|
+
[attr.data-initial-selected-mode]="initialSelectedMode()"
|
|
12349
|
+
(click)="handleClick($event)"
|
|
12350
|
+
(keydown)="handleKeyDown($event)"
|
|
11475
12351
|
>
|
|
11476
|
-
@if(
|
|
12352
|
+
@if(showScrollStart()){
|
|
11477
12353
|
<db-button
|
|
11478
12354
|
variant="ghost"
|
|
11479
12355
|
icon="chevron_left"
|
|
11480
12356
|
type="button"
|
|
11481
|
-
className="
|
|
12357
|
+
className="tabs-scroll-start"
|
|
11482
12358
|
[noText]="true"
|
|
11483
12359
|
(click)="scroll(true)"
|
|
11484
|
-
>{{
|
|
12360
|
+
>{{scrollStartLabel()}}</db-button
|
|
11485
12361
|
>
|
|
11486
|
-
} @if(
|
|
11487
|
-
<db-tab-list>
|
|
11488
|
-
@for (tab of
|
|
11489
|
-
$index) {
|
|
12362
|
+
} @if(getTabs().length){
|
|
12363
|
+
<db-tab-list [orientation]="orientation()" [attr.aria-label]="label()">
|
|
12364
|
+
@for (tab of getTabs();track trackByTab0(index, tab);let index = $index) {
|
|
11490
12365
|
<db-tab-item
|
|
11491
|
-
[
|
|
12366
|
+
[attr.aria-label]="tab.ariaLabel"
|
|
11492
12367
|
[label]="tab.label"
|
|
11493
|
-
[iconTrailing]="tab.iconTrailing"
|
|
11494
12368
|
[icon]="tab.icon"
|
|
11495
|
-
[
|
|
12369
|
+
[showIcon]="tab.showIcon"
|
|
12370
|
+
[iconTrailing]="tab.iconTrailing"
|
|
12371
|
+
[showIconTrailing]="tab.showIconTrailing"
|
|
12372
|
+
[disabled]="tab.disabled"
|
|
12373
|
+
[active]="getRenderIndex() === -1 ? false : getRenderIndex() === index"
|
|
12374
|
+
[value]="tab.value"
|
|
11496
12375
|
></db-tab-item>
|
|
11497
12376
|
}
|
|
11498
12377
|
</db-tab-list>
|
|
11499
12378
|
|
|
11500
|
-
@for (tab of
|
|
11501
|
-
{
|
|
12379
|
+
@for (tab of getTabs();track trackByTab1(index, tab);let index = $index) {
|
|
11502
12380
|
<db-tab-panel [content]="tab.content">{{tab.children}}</db-tab-panel>
|
|
11503
|
-
} }
|
|
12381
|
+
} }@else{
|
|
12382
|
+
<ng-content></ng-content>
|
|
12383
|
+
} @if(showScrollEnd()){
|
|
11504
12384
|
<db-button
|
|
11505
12385
|
variant="ghost"
|
|
11506
12386
|
icon="chevron_right"
|
|
11507
|
-
|
|
11508
|
-
className="overflow-scroll-right-button"
|
|
12387
|
+
className="tabs-scroll-end"
|
|
11509
12388
|
[noText]="true"
|
|
11510
|
-
(click)="scroll()"
|
|
11511
|
-
>{{
|
|
12389
|
+
(click)="scroll(false)"
|
|
12390
|
+
>{{scrollEndLabel()}}</db-button
|
|
11512
12391
|
>
|
|
11513
12392
|
}
|
|
11514
|
-
|
|
11515
|
-
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "propOverrides", "className"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "name", "className", "id", "propOverrides", "iconLeading", "icon", "iconTrailing", "showIconLeading", "showIcon", "showIconTrailing", "noText", "disabled", "checked", "label", "hidden", "errors"], outputs: ["disabledChange", "checkedChange", "change", "touch"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "id", "propOverrides", "content"] }] }); }
|
|
12393
|
+
</div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "propOverrides", "className", "orientation"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["iconLeading", "icon", "iconTrailing", "label", "className", "disabled", "active", "value", "showIconLeading", "showIcon", "showIconTrailing", "hidden", "errors"], outputs: ["disabledChange", "touch"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "hidden", "content"] }] }); }
|
|
11516
12394
|
}
|
|
11517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTabs, decorators: [{
|
|
11518
12396
|
type: Component,
|
|
11519
12397
|
args: [{ selector: "db-tabs", standalone: true, imports: [CommonModule, DBButton, DBTabList, DBTabItem, DBTabPanel], template: `<div
|
|
11520
12398
|
#_ref
|
|
11521
|
-
[attr.id]="id() ?? propOverrides()?.id"
|
|
12399
|
+
[attr.id]="id() ?? propOverrides()?.id ?? _id()"
|
|
11522
12400
|
[class]="cls('db-tabs', className())"
|
|
11523
12401
|
[attr.data-orientation]="orientation()"
|
|
11524
12402
|
[attr.data-scroll-behavior]="behavior()"
|
|
11525
|
-
[attr.data-alignment]="
|
|
11526
|
-
[attr.data-width]="
|
|
11527
|
-
|
|
11528
|
-
(
|
|
12403
|
+
[attr.data-tab-item-alignment]="tabItemAlignment()"
|
|
12404
|
+
[attr.data-tab-item-width]="tabItemWidth()"
|
|
12405
|
+
[attr.data-initial-selected-mode]="initialSelectedMode()"
|
|
12406
|
+
(click)="handleClick($event)"
|
|
12407
|
+
(keydown)="handleKeyDown($event)"
|
|
11529
12408
|
>
|
|
11530
|
-
@if(
|
|
12409
|
+
@if(showScrollStart()){
|
|
11531
12410
|
<db-button
|
|
11532
12411
|
variant="ghost"
|
|
11533
12412
|
icon="chevron_left"
|
|
11534
12413
|
type="button"
|
|
11535
|
-
className="
|
|
12414
|
+
className="tabs-scroll-start"
|
|
11536
12415
|
[noText]="true"
|
|
11537
12416
|
(click)="scroll(true)"
|
|
11538
|
-
>{{
|
|
12417
|
+
>{{scrollStartLabel()}}</db-button
|
|
11539
12418
|
>
|
|
11540
|
-
} @if(
|
|
11541
|
-
<db-tab-list>
|
|
11542
|
-
@for (tab of
|
|
11543
|
-
$index) {
|
|
12419
|
+
} @if(getTabs().length){
|
|
12420
|
+
<db-tab-list [orientation]="orientation()" [attr.aria-label]="label()">
|
|
12421
|
+
@for (tab of getTabs();track trackByTab0(index, tab);let index = $index) {
|
|
11544
12422
|
<db-tab-item
|
|
11545
|
-
[
|
|
12423
|
+
[attr.aria-label]="tab.ariaLabel"
|
|
11546
12424
|
[label]="tab.label"
|
|
11547
|
-
[iconTrailing]="tab.iconTrailing"
|
|
11548
12425
|
[icon]="tab.icon"
|
|
11549
|
-
[
|
|
12426
|
+
[showIcon]="tab.showIcon"
|
|
12427
|
+
[iconTrailing]="tab.iconTrailing"
|
|
12428
|
+
[showIconTrailing]="tab.showIconTrailing"
|
|
12429
|
+
[disabled]="tab.disabled"
|
|
12430
|
+
[active]="getRenderIndex() === -1 ? false : getRenderIndex() === index"
|
|
12431
|
+
[value]="tab.value"
|
|
11550
12432
|
></db-tab-item>
|
|
11551
12433
|
}
|
|
11552
12434
|
</db-tab-list>
|
|
11553
12435
|
|
|
11554
|
-
@for (tab of
|
|
11555
|
-
{
|
|
12436
|
+
@for (tab of getTabs();track trackByTab1(index, tab);let index = $index) {
|
|
11556
12437
|
<db-tab-panel [content]="tab.content">{{tab.children}}</db-tab-panel>
|
|
11557
|
-
} }
|
|
12438
|
+
} }@else{
|
|
12439
|
+
<ng-content></ng-content>
|
|
12440
|
+
} @if(showScrollEnd()){
|
|
11558
12441
|
<db-button
|
|
11559
12442
|
variant="ghost"
|
|
11560
12443
|
icon="chevron_right"
|
|
11561
|
-
|
|
11562
|
-
className="overflow-scroll-right-button"
|
|
12444
|
+
className="tabs-scroll-end"
|
|
11563
12445
|
[noText]="true"
|
|
11564
|
-
(click)="scroll()"
|
|
11565
|
-
>{{
|
|
12446
|
+
(click)="scroll(false)"
|
|
12447
|
+
>{{scrollEndLabel()}}</db-button
|
|
11566
12448
|
>
|
|
11567
12449
|
}
|
|
11568
|
-
<ng-content></ng-content>
|
|
11569
12450
|
</div> `, styles: [":host{display:contents}\n"] }]
|
|
11570
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
12451
|
+
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabItemAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabItemAlignment", required: false }] }], tabItemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabItemWidth", required: false }] }], scrollStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStartLabel", required: false }] }], scrollEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEndLabel", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
|
|
11571
12452
|
|
|
11572
12453
|
const TabsBehaviorList = ['scrollbar', 'arrows'];
|
|
11573
12454
|
const TabsInitialSelectedModeList = ['auto', 'manually'];
|
|
@@ -11941,8 +12822,8 @@ class DBTextarea {
|
|
|
11941
12822
|
this.abortController()?.abort();
|
|
11942
12823
|
this.observer()?.disconnect();
|
|
11943
12824
|
}
|
|
11944
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11945
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
12825
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTextarea, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12826
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DBTextarea, isStandalone: true, selector: "db-textarea", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showResizer: { classPropertyName: "showResizer", publicName: "showResizer", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus", touch: "touch" }, host: { properties: { "hidden": "this.isHidden" } }, providers: [{
|
|
11946
12827
|
provide: NG_VALUE_ACCESSOR,
|
|
11947
12828
|
useExisting: DBTextarea,
|
|
11948
12829
|
multi: true
|
|
@@ -12009,7 +12890,7 @@ class DBTextarea {
|
|
|
12009
12890
|
>
|
|
12010
12891
|
</div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
|
|
12011
12892
|
}
|
|
12012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DBTextarea, decorators: [{
|
|
12013
12894
|
type: Component,
|
|
12014
12895
|
args: [{ providers: [{
|
|
12015
12896
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -12115,5 +12996,5 @@ const AlignmentList = ['start', 'center', 'end'];
|
|
|
12115
12996
|
* Generated bundle index. Do not edit.
|
|
12116
12997
|
*/
|
|
12117
12998
|
|
|
12118
|
-
export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomButton, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTable, DBTableBody, DBTableCaption, DBTableColumnsSizeList, DBTableDataCell, DBTableDividerList, DBTableFooter, DBTableHead, DBTableHeaderCell, DBTableHeaderCellScopeList, DBTableMobileVariantList, DBTableRow, DBTableRowSizeList, DBTableRowSubHeaderEmphasisList, DBTableStickyHeaderList, DBTableVariantList, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SCROLL_LEFT, DEFAULT_SCROLL_RIGHT, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
|
|
12999
|
+
export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomButton, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBDrawerFooter, DBDrawerHeader, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTable, DBTableBody, DBTableCaption, DBTableColumnsSizeList, DBTableDataCell, DBTableDividerList, DBTableFooter, DBTableHead, DBTableHeaderCell, DBTableHeaderCellScopeList, DBTableMobileVariantList, DBTableRow, DBTableRowSizeList, DBTableRowSubHeaderEmphasisList, DBTableStickyHeaderList, DBTableVariantList, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SCROLL_LEFT, DEFAULT_SCROLL_RIGHT, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerContainerSizeList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NAVIGATION_KEYS, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasFocusgroupSupport, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
|
|
12119
13000
|
//# sourceMappingURL=db-ux-ngx-core-components.mjs.map
|