chore(inline-edit): removed text flick on mode change (#DS-4360)

packages/components-dev/inline-edit/module.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { E2eInlineEditStates } from '../../components/inline-edit/e2e';
 import { InlineEditExamplesModule } from '../../docs-examples/components/inline-edit';
 import { DevThemeToggle } from '../theme-toggle';
 
@@ -29,7 +30,8 @@ export class DevDocsExamples {}
     selector: 'dev-app',
     imports: [
         DevDocsExamples,
-        DevThemeToggle
+        DevThemeToggle,
+        E2eInlineEditStates
     ],
     providers: [],
     templateUrl: './template.html',

packages/components-dev/inline-edit/template.html

@@ -1,4 +1,6 @@
 <dev-theme-toggle />
 <hr />
 
+<e2e-inline-edit-states />
+
 <dev-examples />

packages/components/inline-edit/e2e.playwright-spec.ts

@@ -0,0 +1,39 @@
+import { expect, Locator, Page, test } from '@playwright/test';
+import { e2eEnableDarkTheme } from '../../e2e/utils';
+
+test.describe('KbqInlineEdit', () => {
+    test.describe('E2eInlineEditStates', () => {
+        const getComponent = (page: Page) => page.getByTestId('e2eInlineEditStates');
+        const getTable = (locator: Locator) => locator.getByTestId('e2eInlineEditList');
+        const clickOpenTrigger = (locator: Locator) => locator.getByTestId('e2eInlineEditOpenTrigger').click();
+        const clickFocusTrigger = (locator: Locator) => locator.getByTestId('e2eInlineEditFocusTrigger').click();
+
+        test('edit states', async ({ page }) => {
+            await page.goto('/E2eInlineEditStates');
+
+            const component = getComponent(page);
+
+            const screenshotTarget = getTable(component);
+
+            await clickOpenTrigger(component);
+
+            await expect(screenshotTarget).toHaveScreenshot('01-light.png');
+            await e2eEnableDarkTheme(page);
+            await expect(screenshotTarget).toHaveScreenshot('01-dark.png');
+        });
+
+        test('view states', async ({ page }) => {
+            await page.goto('/E2eInlineEditStates');
+
+            const component = getComponent(page);
+
+            const screenshotTarget = getTable(component);
+
+            await clickFocusTrigger(component);
+
+            await expect(screenshotTarget).toHaveScreenshot('02-light.png');
+            await e2eEnableDarkTheme(page);
+            await expect(screenshotTarget).toHaveScreenshot('02-dark.png');
+        });
+    });
+});

packages/components/inline-edit/e2e.ts

@@ -0,0 +1,105 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, viewChildren } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KbqButtonModule } from '@koobiq/components/button';
+import { kbqInjectNativeElement } from '@koobiq/components/core';
+import { KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqInputModule } from '@koobiq/components/input';
+import { KbqInlineEdit } from './inline-edit';
+import { KbqInlineEditModule } from './module';
+
+@Component({
+    selector: 'e2e-inline-edit-states',
+    imports: [
+        KbqInlineEditModule,
+        FormsModule,
+        KbqFormFieldModule,
+        KbqInputModule,
+        NgTemplateOutlet,
+        KbqButtonModule
+    ],
+    template: `
+        <button kbq-button data-testid="e2eInlineEditOpenTrigger" (click)="openInlineEdits()">open inline edits</button>
+        <button kbq-button data-testid="e2eInlineEditFocusTrigger" (click)="focusInlineEdits()">
+            focus inline edits
+        </button>
+
+        <div
+            class="layout-column layout-gap-xxl layout-margin-bottom-6xl flex layout-padding-3xs"
+            data-testid="e2eInlineEditList"
+        >
+            <kbq-inline-edit>
+                <div class="example-inline-text" kbqInlineEditViewMode>
+                    <ng-container *ngTemplateOutlet="view; context: { $implicit: { value: '' } }" />
+                </div>
+                <kbq-form-field kbqInlineEditEditMode>
+                    <input kbqInput [placeholder]="'placeholder'" />
+                </kbq-form-field>
+            </kbq-inline-edit>
+
+            <kbq-inline-edit>
+                <div class="example-inline-text" kbqInlineEditViewMode>
+                    <ng-container *ngTemplateOutlet="view; context: { $implicit: { value: 'value' } }" />
+                </div>
+                <kbq-form-field kbqInlineEditEditMode>
+                    <input kbqInput [placeholder]="'placeholder'" [value]="'value'" />
+                </kbq-form-field>
+            </kbq-inline-edit>
+
+            <kbq-inline-edit>
+                <kbq-label>Label</kbq-label>
+
+                <div class="example-inline-text" kbqInlineEditViewMode>
+                    <ng-container *ngTemplateOutlet="view; context: { $implicit: { value: 'value' } }" />
+                </div>
+                <kbq-form-field kbqInlineEditEditMode>
+                    <input kbqInput [placeholder]="'placeholder'" [value]="'value'" />
+                </kbq-form-field>
+            </kbq-inline-edit>
+
+            <kbq-inline-edit showActions>
+                <div class="example-inline-text" kbqInlineEditViewMode>
+                    <ng-container *ngTemplateOutlet="view; context: { $implicit: { value: 'value' } }" />
+                </div>
+                <kbq-form-field kbqInlineEditEditMode>
+                    <input kbqInput [placeholder]="'placeholder'" [value]="'value'" />
+                </kbq-form-field>
+            </kbq-inline-edit>
+        </div>
+
+        <ng-template #view let-control>
+            @if (!control.value) {
+                <span kbqInlineEditPlaceholder>placeholder</span>
+            } @else {
+                {{ control.value }}
+            }
+        </ng-template>
+    `,
+    styles: `
+        :host {
+            max-width: 500px;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'layout-margin-top-l layout-row',
+        'data-testid': 'e2eInlineEditStates'
+    }
+})
+export class E2eInlineEditStates {
+    protected readonly inlineEditList = viewChildren(KbqInlineEdit);
+    private readonly nativeElement = kbqInjectNativeElement();
+
+    openInlineEdits() {
+        this.inlineEditList().forEach((inlineEdit) => inlineEdit.toggleMode());
+    }
+
+    focusInlineEdits() {
+        this.nativeElement
+            .querySelectorAll<HTMLElement>('.kbq-inline-edit__focus_container')
+            .forEach((focusContainer) => {
+                focusContainer.classList.add('cdk-focused');
+                focusContainer.classList.add('cdk-keyboard-focused');
+            });
+    }
+}

packages/components/inline-edit/inline-edit.ts

@@ -234,8 +234,8 @@ export class KbqInlineEdit {
             .subscribe((currentMode) => this.modeChange.emit(currentMode));
     }
 
-    /** @docs-private */
-    protected toggleMode(): void {
+    /** Manually switch mode */
+    toggleMode(): void {
         this.mode.update((mode) => (mode === 'view' ? 'edit' : 'view'));
     }
 

packages/e2e/routes.ts

@@ -20,6 +20,7 @@ import { E2eEmptyStateStateAndStyle } from '../components/empty-state/e2e';
 import { E2eFileUploadStateAndStyle } from '../components/file-upload/e2e';
 import { E2eFilterBarStates } from '../components/filter-bar/e2e';
 import { E2eIconStateAndStyle } from '../components/icon/e2e';
+import { E2eInlineEditStates } from '../components/inline-edit/e2e';
 import { E2eInputStateAndStyle } from '../components/input/e2e';
 import { E2eLinkStates } from '../components/link/e2e';
 import { E2eListStates } from '../components/list/e2e';
@@ -130,7 +131,8 @@ const components = [
     E2eTreeSelectStates,
     E2eMultiTreeSelectStates,
     E2eMultilineTreeSelectStates,
-    E2eSelectWithSearchAndFooter
+    E2eSelectWithSearchAndFooter,
+    E2eInlineEditStates
 ];
 
 export const e2eRoutes: Routes = components.map((component) => {

tools/public_api_guard/components/inline-edit.api.md

@@ -68,7 +68,7 @@ export class KbqInlineEdit {
     readonly showActions: InputSignalWithTransform<boolean, unknown>;
     readonly showTooltipOnError: InputSignalWithTransform<boolean, unknown>;
     protected readonly tabIndex: Signal<0 | -1>;
-    protected toggleMode(): void;
+    toggleMode(): void;
     readonly tooltipPlacement: InputSignal<PopUpPlacements | undefined>;
     protected readonly tooltipTrigger: Signal<KbqTooltipTrigger | undefined>;
     readonly validationTooltip: InputSignal<string | TemplateRef<any> | undefined>;