@db-ux/ngx-core-components 4.5.2 → 4.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @db-ux/ngx-core-components
|
|
2
2
|
|
|
3
|
+
## 4.5.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- refactor: Enhance the accessibility of the navigation components by adding missing WAI-ARIA attributes (`aria-controls`, `aria-label`, `aria-haspopup`) for better screen reader support. - [see commit f040188](https://github.com/db-ux-design-system/core-web/commit/f0401886267359518c37062373bb0f9df311214c)
|
|
8
|
+
|
|
9
|
+
- fix: adjusted `@media` queries (removed `screen` from combined queries) to avoid broken layouts when printing - [see commit 0960eb6](https://github.com/db-ux-design-system/core-web/commit/0960eb6f9223fe23bdaac0de685cf7aa5eb7654e)
|
|
10
|
+
|
|
11
|
+
- fix(switch): removed obsolete gap towards label in `small` variant - [see commit 40bad01](https://github.com/db-ux-design-system/core-web/commit/40bad017f068bf8968829977808a6d8e9d21b4fe)
|
|
12
|
+
|
|
13
|
+
## 4.5.3
|
|
14
|
+
|
|
15
|
+
_version bump_
|
|
16
|
+
|
|
3
17
|
## 4.5.2
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -5735,8 +5735,8 @@ class DBNavigationItem {
|
|
|
5735
5735
|
this.getBooleanAsString = getBooleanAsString;
|
|
5736
5736
|
this.getBoolean = getBoolean;
|
|
5737
5737
|
this.DEFAULT_BACK = DEFAULT_BACK;
|
|
5738
|
-
this.subNavigationExpanded = input(...(ngDevMode ? [undefined, { debugName: "subNavigationExpanded" }] : []));
|
|
5739
5738
|
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
5739
|
+
this.subNavigationExpanded = input(...(ngDevMode ? [undefined, { debugName: "subNavigationExpanded" }] : []));
|
|
5740
5740
|
this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
|
|
5741
5741
|
this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
|
|
5742
5742
|
this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
|
|
@@ -5756,6 +5756,8 @@ class DBNavigationItem {
|
|
|
5756
5756
|
this.isSubNavigationExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isSubNavigationExpanded" }] : []));
|
|
5757
5757
|
this.autoClose = signal(false, ...(ngDevMode ? [{ debugName: "autoClose" }] : []));
|
|
5758
5758
|
this.navigationItemSafeTriangle = signal(undefined, ...(ngDevMode ? [{ debugName: "navigationItemSafeTriangle" }] : []));
|
|
5759
|
+
this.subNavigationId = signal(undefined, ...(ngDevMode ? [{ debugName: "subNavigationId" }] : []));
|
|
5760
|
+
this.subNavigationToggleId = signal(undefined, ...(ngDevMode ? [{ debugName: "subNavigationToggleId" }] : []));
|
|
5759
5761
|
if (typeof window !== "undefined") {
|
|
5760
5762
|
effect(() => {
|
|
5761
5763
|
// --- Mitosis: Workaround to make sure the effect() is triggered ---
|
|
@@ -5832,10 +5834,13 @@ class DBNavigationItem {
|
|
|
5832
5834
|
const element = this._ref()?.nativeElement;
|
|
5833
5835
|
this.enableAttributePassing(element, "db-navigation-item");
|
|
5834
5836
|
this.initialized.set(true);
|
|
5837
|
+
const subNavId = `sub-nav-${this.id() ?? uuid()}`;
|
|
5838
|
+
this.subNavigationId.set(subNavId);
|
|
5839
|
+
this.subNavigationToggleId.set(`${subNavId}-toggle`);
|
|
5835
5840
|
}
|
|
5836
5841
|
}
|
|
5837
5842
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5838
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: {
|
|
5843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", 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 }, 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
|
|
5839
5844
|
#_ref
|
|
5840
5845
|
[attr.id]="id() ?? propOverrides()?.id"
|
|
5841
5846
|
(mouseover)="navigationItemSafeTriangle()?.enableFollow()"
|
|
@@ -5854,8 +5859,10 @@ class DBNavigationItem {
|
|
|
5854
5859
|
} } @if(hasSubNavigation()){
|
|
5855
5860
|
<button
|
|
5856
5861
|
class="db-navigation-item-expand-button"
|
|
5857
|
-
[attr.
|
|
5862
|
+
[attr.id]="subNavigationToggleId()"
|
|
5863
|
+
[attr.aria-haspopup]="hasAreaPopup() ? 'true' : undefined"
|
|
5858
5864
|
[attr.aria-expanded]="isSubNavigationExpanded()"
|
|
5865
|
+
[attr.aria-controls]="subNavigationId()"
|
|
5859
5866
|
[attr.disabled]="getBoolean(disabled(), 'disabled')"
|
|
5860
5867
|
(click)="handleClick($event)"
|
|
5861
5868
|
>
|
|
@@ -5865,6 +5872,8 @@ class DBNavigationItem {
|
|
|
5865
5872
|
</button>
|
|
5866
5873
|
<menu
|
|
5867
5874
|
class="db-sub-navigation"
|
|
5875
|
+
[attr.id]="subNavigationId()"
|
|
5876
|
+
[attr.aria-labelledby]="subNavigationToggleId()"
|
|
5868
5877
|
[attr.data-force-close]="autoClose()"
|
|
5869
5878
|
(click)="handleNavigationItemClick($event)"
|
|
5870
5879
|
>@if(hasAreaPopup()){
|
|
@@ -5904,8 +5913,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
5904
5913
|
} } @if(hasSubNavigation()){
|
|
5905
5914
|
<button
|
|
5906
5915
|
class="db-navigation-item-expand-button"
|
|
5907
|
-
[attr.
|
|
5916
|
+
[attr.id]="subNavigationToggleId()"
|
|
5917
|
+
[attr.aria-haspopup]="hasAreaPopup() ? 'true' : undefined"
|
|
5908
5918
|
[attr.aria-expanded]="isSubNavigationExpanded()"
|
|
5919
|
+
[attr.aria-controls]="subNavigationId()"
|
|
5909
5920
|
[attr.disabled]="getBoolean(disabled(), 'disabled')"
|
|
5910
5921
|
(click)="handleClick($event)"
|
|
5911
5922
|
>
|
|
@@ -5915,6 +5926,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
5915
5926
|
</button>
|
|
5916
5927
|
<menu
|
|
5917
5928
|
class="db-sub-navigation"
|
|
5929
|
+
[attr.id]="subNavigationId()"
|
|
5930
|
+
[attr.aria-labelledby]="subNavigationToggleId()"
|
|
5918
5931
|
[attr.data-force-close]="autoClose()"
|
|
5919
5932
|
(click)="handleNavigationItemClick($event)"
|
|
5920
5933
|
>@if(hasAreaPopup()){
|
|
@@ -5935,7 +5948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
5935
5948
|
}], ctorParameters: () => [], propDecorators: { dbNavigationContent: [{
|
|
5936
5949
|
type: ContentChild,
|
|
5937
5950
|
args: [NavigationContentDirective, { read: TemplateRef }]
|
|
5938
|
-
}],
|
|
5951
|
+
}], 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 }] }], 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 }] }] } });
|
|
5939
5952
|
|
|
5940
5953
|
const defaultProps$c = {};
|
|
5941
5954
|
class DBNotification {
|