Popup: Revert updating of old nested Angular component with tabFocusLoopEnabled, add story (#33016)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

apps/react-storybook/stories/popup/Popup.stories.tsx

@@ -95,3 +95,54 @@ export const EscapeFromEditors: Story = {
     name: 'Popup - Escape handling',
     render: EscapeFromEditorsExample,
 };
+
+const TabFocusLoopExample: Story['render'] = ({
+    tabFocusLoopEnabled,
+}) => {
+    const [visible, setVisible] = useState(false);
+
+    const show = useCallback(() => setVisible(true), []);
+    const hide = useCallback(() => setVisible(false), []);
+
+    return (
+        <div style={{ padding: 24 }}>
+            <p style={{ marginBottom: 16, color: '#555' }}>
+                Toggle <strong>tabFocusLoopEnabled</strong> in the Controls panel.
+                When enabled, pressing Tab cycles focus only within the popup.
+                When disabled, Tab can move focus outside the popup.
+            </p>
+            <Button text="Open Popup" type="default" onClick={show} />
+
+            <Popup
+                visible={visible}
+                onHiding={hide}
+                title="Tab Focus Loop Demo"
+                width={420}
+                height="auto"
+                shading={false}
+                showCloseButton
+                tabFocusLoopEnabled={tabFocusLoopEnabled}
+            >
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: '8px 0' }}>
+                    <TextBox label="First Field" />
+                    <TextBox label="Second Field" />
+                    <TextBox label="Third Field" />
+                </div>
+            </Popup>
+        </div>
+    );
+};
+
+export const TabFocusLoop: Story = {
+    name: 'Popup - tabFocusLoopEnabled',
+    args: {
+        tabFocusLoopEnabled: true,
+    },
+    argTypes: {
+        tabFocusLoopEnabled: {
+            control: 'boolean',
+            description: 'Specifies whether focus loops within the popup when pressing Tab',
+        },
+    },
+    render: TabFocusLoopExample,
+};

packages/devextreme-angular/src/ui/nested/base/popup-options.ts

@@ -302,13 +302,6 @@ export abstract class DxoPopupOptions extends NestedOption {
         this._setOption('showTitle', value);
     }
 
-    get tabFocusLoopEnabled(): boolean {
-        return this._getOption('tabFocusLoopEnabled');
-    }
-    set tabFocusLoopEnabled(value: boolean) {
-        this._setOption('tabFocusLoopEnabled', value);
-    }
-
     get tabIndex(): number {
         return this._getOption('tabIndex');
     }

packages/devextreme-angular/src/ui/nested/drop-down-options.ts

@@ -81,7 +81,6 @@ import {
         'shadingColor',
         'showCloseButton',
         'showTitle',
-        'tabFocusLoopEnabled',
         'tabIndex',
         'title',
         'titleTemplate',

packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts

@@ -81,7 +81,6 @@ import {
         'shadingColor',
         'showCloseButton',
         'showTitle',
-        'tabFocusLoopEnabled',
         'tabIndex',
         'title',
         'titleTemplate',

packages/devextreme-angular/src/ui/nested/popup.ts

@@ -81,7 +81,6 @@ import {
         'shadingColor',
         'showCloseButton',
         'showTitle',
-        'tabFocusLoopEnabled',
         'tabIndex',
         'title',
         'titleTemplate',

packages/devextreme-angular/src/ui/popover/index.ts

@@ -400,10 +400,7 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan
     }
 
 
-    /**
-     * [descr:dxPopupOptions.tabFocusLoopEnabled]
 
-     */
     @Input()
     get tabFocusLoopEnabled(): boolean {
         return this._getOption('tabFocusLoopEnabled');

packages/devextreme-angular/src/ui/popup/component.ts

@@ -474,10 +474,7 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange
     }
 
 
-    /**
-     * [descr:dxPopupOptions.tabFocusLoopEnabled]
 
-     */
     @Input()
     get tabFocusLoopEnabled(): boolean {
         return this._getOption('tabFocusLoopEnabled');

packages/devextreme-angular/src/ui/tooltip/index.ts

@@ -343,10 +343,7 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy {
     }
 
 
-    /**
-     * [descr:dxPopupOptions.tabFocusLoopEnabled]
 
-     */
     @Input()
     get tabFocusLoopEnabled(): boolean {
         return this._getOption('tabFocusLoopEnabled');

packages/devextreme-metadata/make-angular-metadata.ts

@@ -59,6 +59,7 @@ Ng.makeMetadata({
     removeMembers(/\/drop_down_editor\/ui.drop_down_editor:FieldAddons/),
     removeMembers(/\/load_panel:dxLoadPanelOptions.indicatorOptions/),
     removeMembers(/\/grids:LoadPanel.indicatorOptions/),
+    removeMembers(/\/popup:dxPopupOptions.tabFocusLoopEnabled/),
     removeMembers(/\/scheduler:Toolbar/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.form/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.popup/),