@ni/ok-components 1.0.1 → 1.1.0

package/dist/esm/fv/search-input/testing/fv-search-input.pageobject.d.ts

@@ -0,0 +1,22 @@
+import type { FvSearchInput } from '..';
+/**
+ * Page object for the `ok-fv-search-input` component to provide consistent
+ * ways of querying and interacting with the component during tests.
+ */
+export declare class FvSearchInputPageObject {
+    protected readonly searchInputElement: FvSearchInput;
+    constructor(searchInputElement: FvSearchInput);
+    getInputValue(): string;
+    getPlaceholder(): string;
+    getInputAriaLabel(): string | null;
+    getInputAriaLabelledby(): string | null;
+    typeText(text: string): Promise<void>;
+    commitText(text: string): Promise<void>;
+    clickClearButton(): Promise<void>;
+    isClearButtonVisible(): boolean;
+    isInputDisabled(): boolean;
+    isInputReadOnly(): boolean;
+    isInputAutofocus(): boolean;
+    private getInput;
+    private getClearButton;
+}

package/dist/esm/fv/search-input/testing/fv-search-input.pageobject.js

@@ -0,0 +1,65 @@
+import { waitForUpdatesAsync } from '@ni/nimble-components/dist/esm/testing/async-helpers';
+/**
+ * Page object for the `ok-fv-search-input` component to provide consistent
+ * ways of querying and interacting with the component during tests.
+ */
+export class FvSearchInputPageObject {
+    constructor(searchInputElement) {
+        this.searchInputElement = searchInputElement;
+    }
+    getInputValue() {
+        return this.getInput().value;
+    }
+    getPlaceholder() {
+        return this.getInput().placeholder;
+    }
+    getInputAriaLabel() {
+        return this.getInput().getAttribute('aria-label');
+    }
+    getInputAriaLabelledby() {
+        return this.getInput().getAttribute('aria-labelledby');
+    }
+    async typeText(text) {
+        const input = this.getInput();
+        input.value = text;
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await waitForUpdatesAsync();
+    }
+    async commitText(text) {
+        const input = this.getInput();
+        input.value = text;
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        await waitForUpdatesAsync();
+    }
+    async clickClearButton() {
+        const button = this.getClearButton();
+        if (!button) {
+            throw new Error('Clear button not found — is the search input value non-empty?');
+        }
+        button.click();
+        await waitForUpdatesAsync();
+    }
+    isClearButtonVisible() {
+        return !!this.searchInputElement.shadowRoot?.querySelector('.search-input-clear');
+    }
+    isInputDisabled() {
+        return this.getInput().disabled;
+    }
+    isInputReadOnly() {
+        return this.getInput().readOnly;
+    }
+    isInputAutofocus() {
+        return this.getInput().autofocus;
+    }
+    getInput() {
+        const input = this.searchInputElement.shadowRoot?.querySelector('.search-input');
+        if (!input) {
+            throw new Error('Search input element not found');
+        }
+        return input;
+    }
+    getClearButton() {
+        return this.searchInputElement.shadowRoot?.querySelector('.search-input-clear') ?? null;
+    }
+}
+//# sourceMappingURL=fv-search-input.pageobject.js.map

package/dist/esm/fv/search-input/testing/fv-search-input.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fv-search-input.pageobject.js","sourceRoot":"","sources":["../../../../../src/fv/search-input/testing/fv-search-input.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAG3F;;;GAGG;AACH,MAAM,OAAO,uBAAuB;IAChC,YACuB,kBAAiC;QAAjC,uBAAkB,GAAlB,kBAAkB,CAAe;IACrD,CAAC;IAEG,aAAa;QAChB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC;IACjC,CAAC;IAEM,cAAc;QACjB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC;IACvC,CAAC;IAEM,iBAAiB;QACpB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAEM,sBAAsB;QACzB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC3D,CAAC;IAEM,KAAK,CAAC,QAAQ,CAAC,IAAY;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QACnB,KAAK,CAAC,aAAa,CACf,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACxD,CAAC;QACF,MAAM,mBAAmB,EAAE,CAAC;IAChC,CAAC;IAEM,KAAK,CAAC,UAAU,CAAC,IAAY;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QACnB,KAAK,CAAC,aAAa,CACf,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CACzC,CAAC;QACF,MAAM,mBAAmB,EAAE,CAAC;IAChC,CAAC;IAEM,KAAK,CAAC,gBAAgB;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE,CAAC;YACV,MAAM,IAAI,KAAK,CACX,+DAA+D,CAClE,CAAC;QACN,CAAC;QACD,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,mBAAmB,EAAE,CAAC;IAChC,CAAC;IAEM,oBAAoB;QACvB,OAAO,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE,aAAa,CACtD,qBAAqB,CACxB,CAAC;IACN,CAAC;IAEM,eAAe;QAClB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC;IACpC,CAAC;IAEM,eAAe;QAClB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC;IACpC,CAAC;IAEM,gBAAgB;QACnB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrC,CAAC;IAEO,QAAQ;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE,aAAa,CAC3D,eAAe,CAClB,CAAC;QACF,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEO,cAAc;QAClB,OAAO,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE,aAAa,CACpD,qBAAqB,CACxB,IAAI,IAAI,CAAC;IACd,CAAC;CACJ","sourcesContent":["import { waitForUpdatesAsync } from '@ni/nimble-components/dist/esm/testing/async-helpers';\nimport type { FvSearchInput } from '..';\n\n/**\n * Page object for the `ok-fv-search-input` component to provide consistent\n * ways of querying and interacting with the component during tests.\n */\nexport class FvSearchInputPageObject {\n    public constructor(\n        protected readonly searchInputElement: FvSearchInput\n    ) {}\n\n    public getInputValue(): string {\n        return this.getInput().value;\n    }\n\n    public getPlaceholder(): string {\n        return this.getInput().placeholder;\n    }\n\n    public getInputAriaLabel(): string | null {\n        return this.getInput().getAttribute('aria-label');\n    }\n\n    public getInputAriaLabelledby(): string | null {\n        return this.getInput().getAttribute('aria-labelledby');\n    }\n\n    public async typeText(text: string): Promise<void> {\n        const input = this.getInput();\n        input.value = text;\n        input.dispatchEvent(\n            new Event('input', { bubbles: true, composed: true })\n        );\n        await waitForUpdatesAsync();\n    }\n\n    public async commitText(text: string): Promise<void> {\n        const input = this.getInput();\n        input.value = text;\n        input.dispatchEvent(\n            new Event('change', { bubbles: true })\n        );\n        await waitForUpdatesAsync();\n    }\n\n    public async clickClearButton(): Promise<void> {\n        const button = this.getClearButton();\n        if (!button) {\n            throw new Error(\n                'Clear button not found — is the search input value non-empty?'\n            );\n        }\n        button.click();\n        await waitForUpdatesAsync();\n    }\n\n    public isClearButtonVisible(): boolean {\n        return !!this.searchInputElement.shadowRoot?.querySelector(\n            '.search-input-clear'\n        );\n    }\n\n    public isInputDisabled(): boolean {\n        return this.getInput().disabled;\n    }\n\n    public isInputReadOnly(): boolean {\n        return this.getInput().readOnly;\n    }\n\n    public isInputAutofocus(): boolean {\n        return this.getInput().autofocus;\n    }\n\n    private getInput(): HTMLInputElement {\n        const input = this.searchInputElement.shadowRoot?.querySelector<HTMLInputElement>(\n            '.search-input'\n        );\n        if (!input) {\n            throw new Error('Search input element not found');\n        }\n        return input;\n    }\n\n    private getClearButton(): HTMLButtonElement | null {\n        return this.searchInputElement.shadowRoot?.querySelector<HTMLButtonElement>(\n            '.search-input-clear'\n        ) ?? null;\n    }\n}"]}

package/dist/esm/fv/search-input/types.d.ts

@@ -0,0 +1,7 @@
+export declare const FvSearchInputAppearance: {
+    readonly block: "block";
+    readonly outline: "outline";
+    readonly underline: "underline";
+    readonly frameless: "frameless";
+};
+export type FvSearchInputAppearance = (typeof FvSearchInputAppearance)[keyof typeof FvSearchInputAppearance];

package/dist/esm/fv/search-input/types.js

@@ -0,0 +1,7 @@
+export const FvSearchInputAppearance = {
+    block: 'block',
+    outline: 'outline',
+    underline: 'underline',
+    frameless: 'frameless'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/fv/search-input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/search-input/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACnC,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,WAAW;CAChB,CAAC","sourcesContent":["export const FvSearchInputAppearance = {\n    block: 'block',\n    outline: 'outline',\n    underline: 'underline',\n    frameless: 'frameless'\n} as const;\n\nexport type FvSearchInputAppearance = (typeof FvSearchInputAppearance)[keyof typeof FvSearchInputAppearance];"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",