@warp-ds/elements 2.5.0 → 2.5.1-next.2

package/dist/packages/combobox/combobox.stories.js

@@ -26,13 +26,13 @@ const meta = {
 };
 export default meta;
 const sampleOptions = [
-    { value: 'Apple', label: 'Apple' },
-    { value: 'Banana', label: 'Banana' },
-    { value: 'Orange', label: 'Orange' },
-    { value: 'Grape', label: 'Grape' },
-    { value: 'Strawberry', label: 'Strawberry' },
-    { value: 'Pineapple', label: 'Pineapple' },
-    { value: 'Mango', label: 'Mango' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+    { value: 'mango', label: 'Mango' },
 ];
 export const Default = {
     args: {},

package/dist/packages/combobox/combobox.test.js

@@ -19,3 +19,93 @@ test('renders with autocomplete attribute when provided', async () => {
     const el = (await locator.element());
     expect(el.getAttribute('autocomplete')).toBe('on');
 });
+test('displays initial value correctly when value prop is set', async () => {
+    const options = [
+        { value: 'apple', label: 'Apple' },
+        { value: 'banana', label: 'Banana' },
+    ];
+    const component = html `<w-combobox
+    data-testid="combobox"
+    value="apple"
+    .options="${options}"
+  ></w-combobox>`;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    // Get the textfield's input element
+    const textfield = el.shadowRoot?.querySelector('w-textfield');
+    const input = textfield?.shadowRoot?.querySelector('input');
+    // Verify the displayed text shows the label "Apple", not the value "apple"
+    expect(input?.value).toBe('Apple');
+    // Verify the combobox value is "apple"
+    expect(el.value).toBe('apple');
+});
+test('filters options by label, not value', async () => {
+    const options = [
+        { value: 'us', label: 'United States' },
+        { value: 'uk', label: 'United Kingdom' },
+        { value: 'no', label: 'Norway' },
+    ];
+    const component = html `<w-combobox
+    data-testid="combobox"
+    open-on-focus
+    .options="${options}"
+  ></w-combobox>`;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    // Get the textfield's input element
+    const textfield = el.shadowRoot?.querySelector('w-textfield');
+    const input = textfield?.shadowRoot?.querySelector('input');
+    // Type "United" which should match labels "United States" and "United Kingdom"
+    // but NOT match any values (us, uk, no)
+    input?.focus();
+    input.value = 'United';
+    input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // Check that the dropdown shows the matching options
+    const listbox = el.shadowRoot?.querySelector('[role="listbox"]');
+    const visibleOptions = listbox?.querySelectorAll('[role="option"]');
+    // Should show 2 options: "United States" and "United Kingdom"
+    expect(visibleOptions?.length).toBe(2);
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toContain('United States');
+    expect(optionTexts).toContain('United Kingdom');
+    expect(optionTexts).not.toContain('Norway');
+});
+test('displays option label in textfield but stores option value', async () => {
+    const optionsWithDifferentLabelAndValue = [
+        { value: 'us', label: 'United States' },
+        { value: 'uk', label: 'United Kingdom' },
+        { value: 'no', label: 'Norway' },
+    ];
+    const component = html `<w-combobox
+    data-testid="combobox"
+    open-on-focus
+    .options="${optionsWithDifferentLabelAndValue}"
+  ></w-combobox>`;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    // Get the textfield's input element
+    const textfield = el.shadowRoot?.querySelector('w-textfield');
+    const input = textfield?.shadowRoot?.querySelector('input');
+    // Focus to open the dropdown
+    input?.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // Find and click the "Norway" option (which has value "no")
+    const listbox = el.shadowRoot?.querySelector('[role="listbox"]');
+    const options = listbox?.querySelectorAll('[role="option"]');
+    const norwayOption = Array.from(options || []).find((opt) => opt.textContent?.trim() === 'Norway');
+    expect(norwayOption).toBeDefined();
+    // Simulate mousedown on the option
+    norwayOption?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // Verify the displayed text is the label "Norway", not the value "no"
+    expect(input?.value).toBe('Norway');
+    // Verify the combobox value is "no", not "Norway"
+    expect(el.value).toBe('no');
+});

package/dist/packages/pagination/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Første side\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Næste side\"],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sider\"],\"pagination.aria.prev-page\":[\"Forrige side\"]}");

package/dist/packages/pagination/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"First page\"],\"pagination.aria.icon-suffix\":[\"icon\"],\"pagination.aria.next-page\":[\"Next page\"],\"pagination.aria.page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Pages\"],\"pagination.aria.prev-page\":[\"Previous page\"]}");

package/dist/packages/pagination/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Ensimmäinen sivu\"],\"pagination.aria.icon-suffix\":[\"kuvake\"],\"pagination.aria.next-page\":[\"Seuraava sivu\"],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sivut\"],\"pagination.aria.prev-page\":[\"Edellinen sivu\"]}");

package/dist/packages/pagination/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Første side\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Neste side\"],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sider\"],\"pagination.aria.prev-page\":[\"Forrige side\"]}");

package/dist/packages/pagination/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Första sidan\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Nästa sida\"],\"pagination.aria.page\":[\"Sida \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sidor\"],\"pagination.aria.prev-page\":[\"Föregående sida\"]}");

package/dist/packages/pagination/pagination.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/chevron-double-left-16';
+import '@warp-ds/icons/elements/chevron-left-16';
+import '@warp-ds/icons/elements/chevron-right-16';
+/**
+ * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
+ *
+ * @fires {CustomEvent} page-click - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+ */
+declare class WarpPagination extends LitElement {
+    #private;
+    baseUrl: string;
+    pages: number;
+    currentPageNumber: number;
+    visiblePages: number;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    /** @internal */
+    get shouldShowShowFirstPageButton(): boolean;
+    /** @internal */
+    get shouldShowPreviousPageButton(): boolean;
+    /** @internal */
+    get shouldShowNextPageButton(): boolean;
+    /** @internal */
+    get currentPageIndex(): number;
+    /** @internal */
+    get visiblePageNumbers(): number[];
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpPagination };