@ngneers/controls-playwright 0.0.1-pre1

package/README.md

@@ -0,0 +1,20 @@
+# @ngneers/controls-playwright
+
+Playwright testing harness for **[@ngneers/controls](https://ngneers.dev)**.
+
+Provides page-object–style `Ngn*Harness` helpers that wrap the components' DOM and ARIA
+surface, so you can write readable end-to-end assertions against `@ngneers/controls`
+without hand-rolling locators for every control.
+
+```ts
+import { NgnSelectHarness } from '@ngneers/controls-playwright';
+
+const select = new NgnSelectHarness(page.locator('ngn-select'));
+await select.open();
+await select.selectOption('Option 2');
+await select.expectValue('Option 2');
+```
+
+## License
+
+MIT © NGneers

package/awesome-publish.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'awesome-publish';
+import root from '../../awesome-publish.config.ts';
+
+// Source package.json is already the publish manifest (main: ./dist/index.js);
+// ship the compiled dist/ folder.
+export default defineConfig({ ...root, publishFiles: ['dist'] });

package/dist/components/accordion.d.ts

@@ -0,0 +1,21 @@
+import { type Locator } from '@playwright/test';
+export declare class NgnAccordionHarness {
+    locator: Locator;
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"accordion-panel", ["root", "header", "header-disabled", "header-text", "content-expander", "content-expander-collapsed", "content"], readonly []>>;
+    readonly panels: Locator;
+    constructor(locator: Locator);
+    getPanelByIndex(index: number): NgnAccordionPanelHarness;
+    expectPanelCount(count: number): Promise<void>;
+}
+export declare class NgnAccordionPanelHarness {
+    locator: Locator;
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"accordion-panel", ["root", "header", "header-disabled", "header-text", "content-expander", "content-expander-collapsed", "content"], readonly []>>;
+    readonly header: Locator;
+    readonly content: Locator;
+    constructor(locator: Locator);
+    expectHeaderText(expected: string): Promise<void>;
+    expectExpanded(expanded?: boolean): Promise<void>;
+    expectDisabled(disabled?: boolean): Promise<void>;
+    toggle(): Promise<void>;
+}
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAU,MAAM,kBAAkB,CAAC;AAKxD,qBAAa,mBAAmB;IAKX,OAAO,EAAE,OAAO;IAJnC,SAAgB,OAAO,yPAA+C;IAEtE,SAAgB,MAAM,EAAE,OAAO,CAAC;gBAEb,OAAO,EAAE,OAAO;IAI5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,wBAAwB;IAIxD,gBAAgB,CAAC,KAAK,EAAE,MAAM;CAGtC;AAED,qBAAa,wBAAwB;IAMhB,OAAO,EAAE,OAAO;IALnC,SAAgB,OAAO,yPAA+C;IAEtE,SAAgB,MAAM,EAAE,OAAO,CAAC;IAChC,SAAgB,OAAO,EAAE,OAAO,CAAC;gBAEd,OAAO,EAAE,OAAO;IAK5B,gBAAgB,CAAC,QAAQ,EAAE,MAAM;IAIjC,cAAc,CAAC,QAAQ,UAAO;IAI9B,cAAc,CAAC,QAAQ,UAAO;IAIxB,MAAM;CAGpB"}

package/dist/components/accordion.js

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { accordionControlTemplate } from '@ngneers/controls-themes/templates/accordion';
+import { accordionPanelControlTemplate } from '@ngneers/controls-themes/templates/accordion-panel';
+export class NgnAccordionHarness {
+    locator;
+    classes = themeClasses(accordionPanelControlTemplate);
+    panels;
+    constructor(locator) {
+        this.locator = locator;
+        this.panels = this.locator.locator(this.classes['root']);
+    }
+    getPanelByIndex(index) {
+        return new NgnAccordionPanelHarness(this.panels.nth(index));
+    }
+    expectPanelCount(count) {
+        return expect(this.panels).toHaveCount(count);
+    }
+}
+export class NgnAccordionPanelHarness {
+    locator;
+    classes = themeClasses(accordionPanelControlTemplate);
+    header;
+    content;
+    constructor(locator) {
+        this.locator = locator;
+        this.header = this.locator.locator(this.classes['header']);
+        this.content = this.locator.locator(this.classes['content']);
+    }
+    expectHeaderText(expected) {
+        return expect(this.header).toHaveText(expected);
+    }
+    expectExpanded(expanded = true) {
+        return expect(this.header).toHaveAttribute('aria-expanded', String(expanded));
+    }
+    expectDisabled(disabled = true) {
+        return expect(this.header).toBeDisabled();
+    }
+    async toggle() {
+        await this.header.click();
+    }
+}

package/dist/components/avatar.d.ts

@@ -0,0 +1,9 @@
+import { type Locator } from '@playwright/test';
+export declare class NgnAvatarHarness {
+    locator: Locator;
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"avatar", ["root", "image", "initials", `kind-${string}`], readonly []>>;
+    constructor(locator: Locator);
+    expectInitials(expected: string): Promise<void>;
+    expectImageSrc(expected: string): Promise<void>;
+}
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAU,MAAM,kBAAkB,CAAC;AAIxD,qBAAa,gBAAgB;IAGR,OAAO,EAAE,OAAO;IAFnC,SAAgB,OAAO,8KAAuC;gBAE3C,OAAO,EAAE,OAAO;IAE5B,cAAc,CAAC,QAAQ,EAAE,MAAM;IAI/B,cAAc,CAAC,QAAQ,EAAE,MAAM;CAGvC"}

package/dist/components/avatar.js

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { avatarControlTemplate } from '@ngneers/controls-themes/templates/avatar';
+export class NgnAvatarHarness {
+    locator;
+    classes = themeClasses(avatarControlTemplate);
+    constructor(locator) {
+        this.locator = locator;
+    }
+    expectInitials(expected) {
+        return expect(this.locator.locator(this.classes.initials)).toHaveText(expected);
+    }
+    expectImageSrc(expected) {
+        return expect(this.locator.locator(this.classes.image)).toHaveAttribute('src', expected);
+    }
+}

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,20 @@
+import type { Locator } from '@playwright/test';
+import { NgnItemViewHarness } from './item-view';
+import { NgnMenuHarness } from './menu';
+export declare class NgnBreadcrumbHarness {
+    locator: Locator;
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"breadcrumb", ["root", "item", "item-clickable", "separator", "overflow"], readonly [{
+        readonly class: "item-view";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly []>;
+    }, {
+        readonly class: "menu";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"menu", ["root", "submenu", "item", "item-opened", "icon-children", "separator"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }]>;
+    }]>>;
+    readonly itemView: NgnItemViewHarness;
+    readonly overflowMenu: NgnMenuHarness;
+    constructor(locator: Locator);
+}
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAExC,qBAAa,oBAAoB;IAMZ,OAAO,EAAE,OAAO;IALnC,SAAgB,OAAO;;;;;;;;;SAA2C;IAElE,SAAgB,QAAQ,EAAE,kBAAkB,CAAC;IAC7C,SAAgB,YAAY,EAAE,cAAc,CAAC;gBAE1B,OAAO,EAAE,OAAO;CAIpC"}

package/dist/components/breadcrumb.js

@@ -0,0 +1,15 @@
+import { themeClasses } from '../utils/theme';
+import { breadcrumbControlTemplate } from '@ngneers/controls-themes/templates/breadcrumb';
+import { NgnItemViewHarness } from './item-view';
+import { NgnMenuHarness } from './menu';
+export class NgnBreadcrumbHarness {
+    locator;
+    classes = themeClasses(breadcrumbControlTemplate);
+    itemView;
+    overflowMenu;
+    constructor(locator) {
+        this.locator = locator;
+        this.itemView = new NgnItemViewHarness(this.locator.locator(this.classes['item-view']['root']));
+        this.overflowMenu = new NgnMenuHarness(this.locator.locator(this.classes['menu']['root']));
+    }
+}

package/dist/components/button-group.d.ts

@@ -0,0 +1,10 @@
+import { type Locator } from '@playwright/test';
+import { NgnButtonHarness } from './button';
+export declare class NgnButtonGroupHarness {
+    locator: Locator;
+    readonly buttons: Locator;
+    constructor(locator: Locator);
+    expectItemCount(count: number): Promise<void>;
+    getButtonAt(index: number): NgnButtonHarness;
+}
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/components/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,qBAAa,qBAAqB;IAGb,OAAO,EAAE,OAAO;IAFnC,SAAgB,OAAO,EAAE,OAAO,CAAC;gBAEd,OAAO,EAAE,OAAO;IAItB,eAAe,CAAC,KAAK,EAAE,MAAM;IAInC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB;CAGpD"}

package/dist/components/button-group.js

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { NgnButtonHarness } from './button';
+export class NgnButtonGroupHarness {
+    locator;
+    buttons;
+    constructor(locator) {
+        this.locator = locator;
+        this.buttons = locator.locator('button[ngnButton]');
+    }
+    async expectItemCount(count) {
+        await expect(this.buttons).toHaveCount(count);
+    }
+    getButtonAt(index) {
+        return new NgnButtonHarness(this.buttons.nth(index));
+    }
+}

package/dist/components/button.d.ts

@@ -0,0 +1,6 @@
+import type { Locator } from '@playwright/test';
+export declare class NgnButtonHarness {
+    locator: Locator;
+    constructor(locator: Locator);
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,qBAAa,gBAAgB;IACR,OAAO,EAAE,OAAO;gBAAhB,OAAO,EAAE,OAAO;CACpC"}

package/dist/components/button.js

@@ -0,0 +1,6 @@
+export class NgnButtonHarness {
+    locator;
+    constructor(locator) {
+        this.locator = locator;
+    }
+}

package/dist/components/calendar.d.ts

@@ -0,0 +1,101 @@
+import { type Locator } from '@playwright/test';
+import { NgnSelectHarness } from './select';
+import type { WeekDay } from '@ngneers/controls/calendar';
+export declare class NgnCalendarHarness {
+    locator: Locator;
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"calendar", ["root", "inline", "invalid", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "time", "input-field"], readonly [{
+        readonly class: "input";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"mask-input", ["root", "section", "section-active", "section-placeholder", "separator", "proxy", "sr-only"], readonly []>;
+    }, {
+        readonly class: "trigger-icon";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"icon", ["root", "default"], readonly []>;
+    }, {
+        readonly class: "popover";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "previous";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "next";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "current-month";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "current-year";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "current-month-field";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }, {
+        readonly class: "current-year-field";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }]>>;
+    readonly backButton: Locator;
+    readonly nextButton: Locator;
+    readonly currentMonth: NgnSelectHarness;
+    readonly currentYear: NgnSelectHarness;
+    readonly days: Locator;
+    readonly day: Locator;
+    readonly daySameMonth: Locator;
+    readonly dayOtherMonth: Locator;
+    readonly daySelected: Locator;
+    readonly weekDay: Locator;
+    constructor(locator: Locator);
+    expectDate(year: string, month: string, day: string): Promise<[void, void, void]>;
+    expectFirstWeekday(weekday: WeekDay): Promise<void>;
+    selectDay(day: number): Promise<void>;
+    /**
+     * Select a month in the calendar while in months view
+     * @param month the month to select (1-12)
+     */
+    selectMonth(month: number): Promise<void>;
+    selectDayFromOtherMonth(day: number): Promise<void>;
+}
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/components/calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAU,MAAM,kBAAkB,CAAC;AAGxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAG1D,qBAAa,kBAAkB;IAcV,OAAO,EAAE,OAAO;IAbnC,SAAgB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAyC;IAEhE,SAAgB,UAAU,EAAE,OAAO,CAAC;IACpC,SAAgB,UAAU,EAAE,OAAO,CAAC;IACpC,SAAgB,YAAY,EAAE,gBAAgB,CAAC;IAC/C,SAAgB,WAAW,EAAE,gBAAgB,CAAC;IAC9C,SAAgB,IAAI,EAAE,OAAO,CAAC;IAC9B,SAAgB,GAAG,EAAE,OAAO,CAAC;IAC7B,SAAgB,YAAY,EAAE,OAAO,CAAC;IACtC,SAAgB,aAAa,EAAE,OAAO,CAAC;IACvC,SAAgB,WAAW,EAAE,OAAO,CAAC;IACrC,SAAgB,OAAO,EAAE,OAAO,CAAC;gBAEd,OAAO,EAAE,OAAO;IAiB5B,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IAQnD,kBAAkB,CAAC,OAAO,EAAE,OAAO;IAInC,SAAS,CAAC,GAAG,EAAE,MAAM;IAI5B;;;OAGG;IACU,WAAW,CAAC,KAAK,EAAE,MAAM;IAKzB,uBAAuB,CAAC,GAAG,EAAE,MAAM;CAGjD"}

package/dist/components/calendar.js

@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test';
+import { calendarControlTemplate } from '@ngneers/controls-themes/templates/calendar';
+import { themeClasses } from '../utils/theme';
+import { NgnSelectHarness } from './select';
+import { en } from '@ngneers/controls/i18n/translations/en';
+export class NgnCalendarHarness {
+    locator;
+    classes = themeClasses(calendarControlTemplate);
+    backButton;
+    nextButton;
+    currentMonth;
+    currentYear;
+    days;
+    day;
+    daySameMonth;
+    dayOtherMonth;
+    daySelected;
+    weekDay;
+    constructor(locator) {
+        this.locator = locator;
+        this.backButton = locator.locator(this.classes.previous['root']);
+        this.nextButton = locator.locator(this.classes.next['root']);
+        this.currentMonth = new NgnSelectHarness(locator.locator(this.classes['current-month']['root']));
+        this.currentYear = new NgnSelectHarness(locator.locator(this.classes['current-year']['root']));
+        this.days = locator.locator(this.classes.days);
+        this.day = locator.locator(this.classes.day);
+        this.daySameMonth = locator.locator(`${this.classes.day}:not(${this.classes['day-other-month']})`);
+        this.dayOtherMonth = locator.locator(`${this.classes.day}${this.classes['day-other-month']}`);
+        this.daySelected = locator.locator(this.classes['day-selected']);
+        this.weekDay = locator.locator(this.classes['week-day']);
+    }
+    expectDate(year, month, day) {
+        return Promise.all([
+            this.currentYear.inputEditable.expectValue(year),
+            this.currentMonth.expectSelectedItemText(month),
+            expect(this.daySelected).toHaveText(day),
+        ]);
+    }
+    expectFirstWeekday(weekday) {
+        return expect(this.weekDay.first()).toHaveText(en.calendar.weekdaysShort[weekday]);
+    }
+    selectDay(day) {
+        return this.daySameMonth.nth(day - 1).click();
+    }
+    /**
+     * Select a month in the calendar while in months view
+     * @param month the month to select (1-12)
+     */
+    async selectMonth(month) {
+        await this.currentMonth.open();
+        await this.currentMonth.clickItemByIndex(month - 1);
+    }
+    async selectDayFromOtherMonth(day) {
+        return this.dayOtherMonth.filter({ hasText: new RegExp(`^\\s*${day}\\s*$`) }).click();
+    }
+}

package/dist/components/chip.d.ts

@@ -0,0 +1,15 @@
+import { type Locator } from '@playwright/test';
+export declare class NgnChipHarness {
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"chip", ["root", "closable", "actionable", "content", "close-button", "close-icon", `color-${string}`], readonly []>>;
+    readonly locator: Locator;
+    readonly content: Locator;
+    readonly closeButton: Locator;
+    constructor(locator: Locator);
+    click(): Promise<void>;
+    close(): Promise<void>;
+    expectState(state: {
+        actionable?: boolean;
+        closable?: boolean;
+    }): Promise<void>;
+}
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/components/chip.ts"],"names":[],"mappings":"AAEA,OAAa,EAAU,KAAK,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE9D,qBAAa,cAAc;IACzB,SAAgB,OAAO,2NAAqC;IAE5D,SAAgB,OAAO,EAAE,OAAO,CAAC;IACjC,SAAgB,OAAO,EAAE,OAAO,CAAC;IACjC,SAAgB,WAAW,EAAE,OAAO,CAAC;gBAEzB,OAAO,EAAE,OAAO;IAMf,KAAK;IAIL,KAAK;IAIL,WAAW,CAAC,KAAK,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE;CAiB7E"}

package/dist/components/chip.js

@@ -0,0 +1,38 @@
+import { chipControlTemplate } from '@ngneers/controls-themes/templates/chip';
+import { themeClasses } from '../utils/theme';
+import test, { expect } from '@playwright/test';
+export class NgnChipHarness {
+    classes = themeClasses(chipControlTemplate);
+    locator;
+    content;
+    closeButton;
+    constructor(locator) {
+        this.locator = locator;
+        this.content = locator.locator(this.classes.content);
+        this.closeButton = locator.locator(this.classes['close-button']);
+    }
+    async click() {
+        await this.content.click();
+    }
+    async close() {
+        await this.closeButton.click();
+    }
+    async expectState(state) {
+        if (state.actionable !== undefined) {
+            if (state.actionable) {
+                await expect(this.locator).toHaveClass(this.classes.actionable);
+            }
+            else {
+                await expect(this.locator).not.toHaveClass(this.classes.actionable);
+            }
+        }
+        if (state.closable !== undefined) {
+            if (state.closable) {
+                await expect(this.locator).toHaveClass(this.classes.closable);
+            }
+            else {
+                await expect(this.locator).not.toHaveClass(this.classes.closable);
+            }
+        }
+    }
+}

package/dist/components/edit-inplace.d.ts

@@ -0,0 +1,18 @@
+import { type Locator } from '@playwright/test';
+import { NgnInplaceHarness } from './inplace';
+export declare class NgnEditInplaceHarness {
+    locator: Locator;
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"edit-inplace", ["root", "disabled", "readonly", "invalid", "default-display", "default-fallback-display", "default-edit", "default-edit-input", "default-edit-close-button", "sr-only"], readonly [{
+        readonly class: "inplace";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"inplace", ["root", "content", "display", "disabled"], readonly []>;
+    }]>>;
+    readonly inplace: NgnInplaceHarness;
+    readonly input: Locator;
+    readonly closeButton: Locator;
+    constructor(locator: Locator);
+    fillInput(value: string): Promise<void>;
+    expectInputValue(value: string): Promise<void>;
+    clickCloseButton(): Promise<void>;
+    pressEnter(): Promise<void>;
+}
+//# sourceMappingURL=edit-inplace.d.ts.map

package/dist/components/edit-inplace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-inplace.d.ts","sourceRoot":"","sources":["../../src/components/edit-inplace.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAU,MAAM,kBAAkB,CAAC;AAGxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,qBAAa,qBAAqB;IAOb,OAAO,EAAE,OAAO;IANnC,SAAgB,OAAO;;;SAA4C;IAEnE,SAAgB,OAAO,EAAE,iBAAiB,CAAC;IAC3C,SAAgB,KAAK,EAAE,OAAO,CAAC;IAC/B,SAAgB,WAAW,EAAE,OAAO,CAAC;gBAElB,OAAO,EAAE,OAAO;IAMtB,SAAS,CAAC,KAAK,EAAE,MAAM;IAIvB,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,gBAAgB;IAIhB,UAAU;CAGxB"}

package/dist/components/edit-inplace.js

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { editInplaceControlTemplate } from '@ngneers/controls-themes/templates/edit-inplace';
+import { NgnInplaceHarness } from './inplace';
+export class NgnEditInplaceHarness {
+    locator;
+    classes = themeClasses(editInplaceControlTemplate);
+    inplace;
+    input;
+    closeButton;
+    constructor(locator) {
+        this.locator = locator;
+        this.inplace = new NgnInplaceHarness(this.locator.locator(this.classes['inplace']['root']));
+        this.input = this.locator.locator(this.classes['default-edit-input']);
+        this.closeButton = this.locator.locator(this.classes['default-edit-close-button']);
+    }
+    async fillInput(value) {
+        await this.input.fill(value);
+    }
+    async expectInputValue(value) {
+        await expect(this.input).toHaveValue(value);
+    }
+    async clickCloseButton() {
+        await this.closeButton.click();
+    }
+    async pressEnter() {
+        await this.input.press('Enter');
+    }
+}