@siemens/element-ng 51.0.1 → 51.1.0

package/types/siemens-element-ng-auto-collapsable-list.d.ts

@@ -15,7 +15,8 @@ declare class SiAutoCollapsableListMeasurable {
      *       .pipe(
      *         map(size => size.width),
      *         distinctUntilChanged(),
-     *         shareReplay(1)
+     *         takeUntilDestroyed(),
+     *         shareReplay({ bufferSize: 1, refCount: true })
      *       )
      * ```
      */

package/types/siemens-element-ng-navbar-vertical-next.d.ts

@@ -45,6 +45,16 @@ declare class SiNavbarVerticalNextGroupTriggerDirective {
      * @internal
      */
     readonly flyout: _angular_core.WritableSignal<boolean>;
+    /** `true` when this group is currently rendered as a mobile flat group.
+     * @internal
+     */
+    readonly flatGroupActive: _angular_core.Signal<boolean>;
+    /**
+     * Whether the group is currently revealed to the user, taking the active
+     * rendering mode into account. Used for `aria-expanded`.
+     * @internal
+     */
+    readonly ariaExpanded: _angular_core.Signal<boolean>;
     /** `true` when this group contains the active route. Set by the group component.
      * @internal
      */
@@ -56,6 +66,7 @@ declare class SiNavbarVerticalNextGroupTriggerDirective {
     readonly flyoutMode: _angular_core.Signal<boolean>;
     private flyoutOutsideClickSubscription?;
     private readonly viewContainer;
+    private readonly elementRef;
     private readonly overlay;
     private readonly destroyRef;
     private readonly injector;
@@ -66,6 +77,8 @@ declare class SiNavbarVerticalNextGroupTriggerDirective {
     constructor();
     /** @internal */
     hideFlyout(): void;
+    /** @internal */
+    focus(): void;
     protected triggered(): void;
     private toggleFlyout;
     private attachInline;
@@ -127,6 +140,7 @@ declare class SiNavbarVerticalNextItemComponent implements OnInit {
      * Formats badge value to limit display to "+99" for numbers greater than 99
      */
     protected readonly formattedBadge: _angular_core.Signal<string>;
+    protected readonly toggleIcon: _angular_core.Signal<string>;
     /** Active via override or router link — excludes group state.
      * @internal
      */
@@ -235,6 +249,20 @@ declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
     private injector;
     protected readonly ready: _angular_core.WritableSignal<boolean>;
     protected readonly smallScreen: _angular_core.WritableSignal<boolean>;
+    private readonly mobileScreen;
+    /**
+     * `true` when triggering a group should open the mobile flat group
+     * instead of inline/flyout. Requires `alwaysFlyout` and a viewport width at
+     * or below {@link BOOTSTRAP_BREAKPOINTS.smMinimum}, 576px. Collapsing the
+     * drawer on mobile must not reset the open flat group, so this stays `true`
+     * regardless of `collapsed`.
+     * @internal
+     */
+    readonly flatMode: _angular_core.Signal<boolean>;
+    /** Id of the group currently shown as a mobile flat group.
+     * @internal
+     */
+    readonly openFlatGroupId: _angular_core.WritableSignal<string | undefined>;
     /** Chip menu sub-component; present only while the parent template renders it.
      * @internal
      */
@@ -286,6 +314,10 @@ declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
     collapse(): void;
     /** @internal */
     groupStateChanged(stateId: string | undefined, expanded: boolean): void;
+    /** Closes the open mobile flat group.
+     * @internal
+     */
+    closeFlatGroup(): void;
     protected saveUIState(): void;
     /** @internal */
     itemTriggered(): void;
@@ -356,14 +388,29 @@ declare class SiNavbarVerticalNextFooterItemsComponent {
 
 /** @experimental */
 declare class SiNavbarVerticalNextGroupComponent {
+    protected readonly icons: Record<"elementLeft2", string>;
     protected readonly navbar: _siemens_element_ng_navbar_vertical_next.SiNavbarVerticalNextComponent;
     protected readonly groupTrigger: SiNavbarVerticalNextGroupTriggerDirective;
+    protected readonly triggerItem: SiNavbarVerticalNextItemComponent;
+    protected readonly flatGroupTitleId: string;
+    /**
+     * Back button text for flat groups.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.BACK:Back`)
+     * ```
+     */
+    readonly ariaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     private readonly routerLinkActive;
+    private readonly focusTrap;
+    private wasFlatGroupActive;
     protected readonly visible: _angular_core.Signal<boolean>;
     constructor();
     protected close(): void;
+    private updateFlatGroupFocus;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNavbarVerticalNextGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiNavbarVerticalNextGroupComponent, "si-navbar-vertical-next-group", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiNavbarVerticalNextGroupComponent, "si-navbar-vertical-next-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** @experimental */

package/types/siemens-element-ng-translate.d.ts

@@ -216,6 +216,7 @@ interface SiTranslatableKeys {
     'SI_MARKDOWN_CALLOUT.TIP'?: string;
     'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
     'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
+    'SI_NAVBAR_VERTICAL.BACK'?: string;
     'SI_NAVBAR_VERTICAL.COLLAPSE'?: string;
     'SI_NAVBAR_VERTICAL.EXPAND'?: string;
     'SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER'?: string;

package/schematics/migrations/data/migration-test-data.js

@@ -1,304 +0,0 @@
-const CSS_CUSTOM_PROPERTIES_MIGRATION = [
-    {
-        replace: '--si-feedback-icon-offset',
-        replaceWith: '--si-feedback-icon-size'
-    },
-    {
-        replace: '$si-font-size-title-1-bold',
-        replaceWith: '$si-font-size-h4-bold'
-    },
-    {
-        replace: '$si-font-weight-title-2',
-        replaceWith: '$si-font-weight-h5'
-    }
-];
-const SYMBOL_RENAMING_MIGRATION = [
-    {
-        module: /@(siemens|simpl)\/element-ng(\/icon)?/,
-        symbolRenamings: [
-            {
-                replace: 'SiIconComponent',
-                replaceWith: 'SiIconLegacyComponent'
-            }
-        ]
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/icon-next)?/,
-        symbolRenamings: [
-            {
-                replace: 'SiIconNextComponent',
-                replaceWith: 'SiIconComponent'
-            }
-        ]
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/tabs)?/,
-        symbolRenamings: [
-            {
-                replace: 'SiTabComponent',
-                replaceWith: 'SiTabLegacyComponent'
-            },
-            {
-                replace: 'SiTabsetComponent',
-                replaceWith: 'SiTabsetLegacyComponent'
-            },
-            {
-                replace: 'SiTabsModule',
-                replaceWith: 'SiTabsLegacyModule'
-            }
-        ],
-        toModule: '@siemens/element-ng/tabs-legacy'
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/tabs-next)?/,
-        symbolRenamings: [
-            {
-                replace: 'SiTabNextComponent',
-                replaceWith: 'SiTabComponent'
-            },
-            {
-                replace: 'SiTabsetNextComponent',
-                replaceWith: 'SiTabsetComponent'
-            },
-            {
-                replace: 'SiTabsNextModule',
-                replaceWith: 'SiTabsModule'
-            }
-        ],
-        toModule: '@siemens/element-ng/tabs'
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/popover)?/,
-        symbolRenamings: [
-            { replace: 'SiPopoverDirective', replaceWith: 'SiPopoverLegacyDirective' },
-            { replace: 'SiPopoverModule', replaceWith: 'SiPopoverLegacyModule' }
-        ],
-        toModule: '@siemens/element-ng/popover-legacy'
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/popover-next)?/,
-        symbolRenamings: [
-            { replace: 'SiPopoverNextDirective', replaceWith: 'SiPopoverDirective' },
-            { replace: 'SiPopoverNextModule', replaceWith: 'SiPopoverModule' }
-        ],
-        toModule: '@siemens/element-ng/popover'
-    },
-    {
-        module: /@(siemens|simpl)\/dashboards-ng/,
-        symbolRenamings: [{ replace: 'CONFIG_TOKEN', replaceWith: 'SI_DASHBOARD_CONFIGURATION' }]
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/toast-notification)?/,
-        symbolRenamings: [{ replace: 'ToastStateName', replaceWith: 'StatusType' }],
-        toModule: '@siemens/element-ng/common'
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
-        symbolRenamings: [
-            { replace: 'SiUnauthorizedPageComponent', replaceWith: 'SiInfoPageComponent' }
-        ],
-        toModule: '@siemens/element-ng/info-page'
-    }
-];
-const ATTRIBUTE_SELECTORS_MIGRATION = [
-    { replace: 'siPopover', replaceWith: 'siPopoverLegacy' },
-    { replace: 'siPopoverNext', replaceWith: 'siPopover' }
-];
-const ELEMENT_SELECTORS_MIGRATION = [
-    // current to legacy
-    { replace: 'si-icon', replaceWith: 'si-icon-legacy' },
-    { replace: 'si-tabset', replaceWith: 'si-tabset-legacy' },
-    { replace: 'si-tab', replaceWith: 'si-tab-legacy' },
-    // next to current
-    { replace: 'si-icon-next', replaceWith: 'si-icon' },
-    { replace: 'si-tabset-next', replaceWith: 'si-tabset' },
-    { replace: 'si-tab-next', replaceWith: 'si-tab' },
-    // v49 to v51
-    {
-        replace: 'si-unauthorized-page',
-        replaceWith: 'si-info-page',
-        defaultAttributes: [
-            { name: 'icon', value: 'element-warning-filled' },
-            { name: 'iconColor', value: 'status-warning' }
-        ]
-    }
-];
-const SYMBOL_REMOVALS_MIGRATION = [
-    {
-        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
-        elementSelector: 'si-accordion',
-        names: ['colorVariant']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
-        elementSelector: 'input',
-        attributeSelector: 'siDateInput',
-        names: ['dateInputDebounceTime']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
-        elementSelector: 'input',
-        attributeSelector: 'siDatepicker',
-        names: ['triggeringInput']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
-        elementSelector: 'si-date-range',
-        names: ['debounceTime']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/filtered-search)?/,
-        elementSelector: 'si-filtered-search',
-        names: ['showIcon', 'noMatchingCriteriaText']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/form)?/,
-        elementSelector: 'si-form-item',
-        names: ['inputId', 'readonly']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
-        elementSelector: 'si-navbar-vertical',
-        names: ['autoCollapseDelay']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/split)?/,
-        elementSelector: 'si-split-part',
-        names: ['headerStatusColor', 'headerStatusIconClass']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
-        elementSelector: 'si-tree-view',
-        names: ['disableFilledIcons', 'trackByFunction']
-    },
-    {
-        module: /@(siemens|simpl)\/charts-ng/,
-        elementSelector: 'si-chart-gauge',
-        names: ['numberOfDecimals']
-    }
-];
-const COMPONENT_PROPERTY_NAMES_MIGRATION = [
-    // Output name changes
-    {
-        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
-        elementSelector: 'si-collapsible-panel',
-        propertyMappings: [{ replace: '(toggle)', replaceWith: '(panelToggle)' }]
-    },
-    // Input name changes
-    // v49 to v51
-    {
-        module: /@(siemens|simpl)\/element-ng/,
-        elementSelector: 'si-filtered-search',
-        propertyMappings: [{ replace: 'readonly', replaceWith: 'disabled' }]
-    },
-    {
-        module: /@(siemens|simpl)\/charts-ng/,
-        elementSelector: 'si-chart-gauge',
-        propertyMappings: [
-            { replace: 'numberOfDecimals', replaceWith: ['minNumberOfDecimals', 'maxNumberOfDecimals'] }
-        ]
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
-        elementSelector: 'si-unauthorized-page',
-        propertyMappings: [
-            { replace: 'heading', replaceWith: 'titleText' },
-            { replace: 'subHeading', replaceWith: 'copyText' },
-            { replace: 'description', replaceWith: 'instructions' }
-        ]
-    }
-];
-const COMPONENT_PROPERTY_TO_CHILD_MIGRATION = [
-    {
-        parentElementSelector: 'si-map',
-        childElementSelector: 'si-map-tooltip',
-        propertyName: 'moreText'
-    }
-];
-const CLASS_MEMBER_REPLACEMENTS_MIGRATION = [
-    {
-        module: /@(siemens|simpl)\/element-ng(\/resize-observer)?/,
-        typeNames: ['SiResponsiveContainerDirective'],
-        propertyReplacements: [
-            { property: 'isXs', replacement: '${expression}.xs()' },
-            { property: 'isSm', replacement: '${expression}.sm()' },
-            { property: 'isMd', replacement: '${expression}.md()' },
-            { property: 'isLg', replacement: '${expression}.lg()' },
-            { property: 'isXl', replacement: '${expression}.xl()' },
-            { property: 'isXxl', replacement: '${expression}.xxl()' }
-        ]
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/modal)?/,
-        typeNames: ['ModalOptions'],
-        propertyReplacements: [{ property: 'initialState', replacement: '${expression}.inputValues' }]
-    }
-];
-const ELEMENT_CLASS_CHANGES_MIGRATION = [
-    {
-        requiredClasses: ['btn-ghost'],
-        removeClasses: ['btn-ghost'],
-        addClasses: ['btn-tertiary-ghost']
-    },
-    {
-        requiredClasses: ['btn-primary-ghost'],
-        removeClasses: ['btn-primary-ghost'],
-        addClasses: ['btn-ghost']
-    },
-    {
-        elementSelector: 'si-select',
-        requiredClasses: [],
-        excludedClasses: ['form-control', 'btn'],
-        removeClasses: [],
-        addClasses: ['btn', 'btn-ghost']
-    },
-    // btn-circle with btn-sm should have btn-sm removed
-    {
-        requiredClasses: ['btn', 'btn-circle', 'btn-sm'],
-        removeClasses: ['btn-sm'],
-        addClasses: []
-    },
-    // btn-circle with btn-xs should migrate to btn-sm
-    {
-        requiredClasses: ['btn', 'btn-circle', 'btn-xs'],
-        removeClasses: ['btn-xs'],
-        addClasses: ['btn-sm']
-    },
-    // btn-circle without size modifier should get btn-lg
-    {
-        requiredClasses: ['btn', 'btn-circle'],
-        excludedClasses: ['btn-lg', 'btn-sm', 'btn-xs'],
-        removeClasses: [],
-        addClasses: ['btn-lg']
-    },
-    // Non-circle buttons with btn-xs should migrate to btn-sm
-    {
-        requiredClasses: ['btn', 'btn-xs'],
-        excludedClasses: ['btn-circle'],
-        removeClasses: ['btn-xs'],
-        addClasses: ['btn-sm']
-    }
-];
-const PROVIDER_FUNCTION_REMOVALS_MIGRATION = [
-    {
-        module: /@(siemens)\/element-ng(\/icon)?/,
-        names: ['provideIconConfig']
-    }
-];
-/**
- * Stable migration data for testing.
- * This data is frozen and used for testing to ensure test stability.
- * Do not modify this data unless you intend to update the test expectations.
- */
-export const getElementMigrationTestData = () => ({
-    attributeSelectorChanges: ATTRIBUTE_SELECTORS_MIGRATION,
-    classMemberReplacementChanges: CLASS_MEMBER_REPLACEMENTS_MIGRATION,
-    componentPropertyNameChanges: COMPONENT_PROPERTY_NAMES_MIGRATION,
-    cssCustomPropertyChanges: CSS_CUSTOM_PROPERTIES_MIGRATION,
-    componentPropertyToChildChanges: COMPONENT_PROPERTY_TO_CHILD_MIGRATION,
-    elementClassChanges: ELEMENT_CLASS_CHANGES_MIGRATION,
-    elementSelectorChanges: ELEMENT_SELECTORS_MIGRATION,
-    providerFunctionRemovalChanges: PROVIDER_FUNCTION_REMOVALS_MIGRATION,
-    symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
-    symbolRenamingChanges: SYMBOL_RENAMING_MIGRATION
-});

package/schematics/utils/testing.js

@@ -1,54 +0,0 @@
-import { UnitTestTree } from '@angular-devkit/schematics/testing';
-const testAppCache = new Map();
-/**
- * Creates a sample workspace with two applications: 'app' (default) and 'second-app'
- */
-export const createTestApp = async (runner, appOptions = {}, files) => {
-    const cacheKey = JSON.stringify(appOptions);
-    let cachedTree = testAppCache.get(cacheKey);
-    if (!cachedTree) {
-        cachedTree = createBaseTestApp(runner, appOptions);
-        testAppCache.set(cacheKey, cachedTree);
-    }
-    const tree = new UnitTestTree((await cachedTree).branch());
-    if (files) {
-        addTestFiles(tree, files);
-    }
-    return tree;
-};
-const createBaseTestApp = async (runner, appOptions) => {
-    let tree = await createWorkspace(runner);
-    tree = await runner.runExternalSchematic('@schematics/angular', 'application', { name: 'app', ...appOptions }, tree);
-    tree = await runner.runExternalSchematic('@schematics/angular', 'application', { name: 'second-app', ...appOptions }, tree);
-    return tree;
-};
-const createWorkspace = (runner) => {
-    return runner.runExternalSchematic('@schematics/angular', 'workspace', {
-        name: 'workspace',
-        version: '1.0.0',
-        newProjectRoot: 'projects'
-    });
-};
-export const addTestFiles = (tree, files) => {
-    Object.entries(files).forEach(([path, content]) => {
-        if (tree.exists(path)) {
-            tree.overwrite(path, content);
-        }
-        else {
-            tree.create(path, content);
-        }
-    });
-    return tree;
-};
-export const readLines = (tree, path) => tree
-    .readContent(path)
-    .split('\n')
-    .filter(l => l.length > 0);
-export const removeTestFiles = (tree, files) => {
-    files.forEach(path => {
-        if (tree.exists(path)) {
-            tree.delete(path);
-        }
-    });
-    return tree;
-};