@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.130

package/dist/types/helpers.d.ts

@@ -1,20 +1,8 @@
-import type { MiddlewareState, OffsetOptions as LibraryOffsetOptions } from '@floating-ui/dom';
+import type { MiddlewareState, OffsetOptions as LibraryOffsetOptions, ReferenceElement } from '@floating-ui/dom';
 import type { Except } from 'type-fest';
-export type Attributes = Record<string, string>;
-/**
- * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `qds-input` should inherit
- * the `tabindex` attribute that developers set directly on `qds-input`. This
- * helper function should be called in componentWillLoad and assigned to a variable
- * that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- *
- * @param element Element to inherit attributes from.
- * @param attributes Which attributes to inherit.
- */
-export declare const inheritAttributes: (element: Element, attributes?: string[]) => Attributes;
+import type { LinkIcon } from './components/shared';
+export type Attributes = Record<string, string | undefined>;
+declare const inheritAttributes: (element: Element, attributes?: string[]) => Attributes;
 /**
  * Returns an array of aria attributes that should be copied from
  * the shadow host element to a target within the light DOM.
@@ -44,8 +32,47 @@ export declare const pickInputEventAttributes: (event: InputEvent) => QdsInputEv
 export declare const propertyToPx: (element: Element, property: string) => number | undefined;
 export declare const ignorePromise: <T>(promise: Promise<T>) => void;
 export declare const isTouchDevice: () => boolean;
-export declare const roundByDPR: (value: number) => number;
-export type OffsetValue = Except<Exclude<LibraryOffsetOptions, Function | number>, 'mainAxis'>;
-export type OffsetFunction = (state: MiddlewareState) => OffsetValue;
+/**
+ * Checks if an element's ellipsis is active.
+ *
+ * @param element The element to check.
+ * @returns `true` if ellipsis is active, `false` otherwise.
+ */
+export declare const isEllipsisActive: (element: Element) => boolean;
+export declare const determineLinkIcon: (target?: string, rel?: string) => LinkIcon | undefined;
+export declare const resolveTarget: (target?: ReferenceElement | string | (() => ReferenceElement | string), caller?: string) => ReferenceElement | undefined;
+/**
+ * Waits for a component to be ready for
+ * both custom element and non-custom element builds.
+ * If non-custom element build, el.componentOnReady
+ * will be used.
+ * For custom element builds, we wait a frame
+ * so that the inner contents of the component
+ * have a chance to render.
+ *
+ * Use this utility rather than calling
+ * el.componentOnReady yourself.
+ *
+ * Reference: https://stenciljs.com/docs/api#componentonready
+ */
+export declare const componentOnReady: <T extends {
+    componentOnReady?: () => Promise<T>;
+}>(element: T, callback: (element_: T) => void) => void;
+export declare const resolvePanelElement: (tab: {
+    panel: Element | string | (() => Element | string);
+}) => HTMLElement | undefined;
+type OffsetValue = Except<Exclude<LibraryOffsetOptions, Function | number>, 'mainAxis'>;
+type OffsetFunction = (state: MiddlewareState) => OffsetValue;
 export type OffsetOptions = OffsetFunction | OffsetValue;
+export declare const HORIZONTAL_MOVE_KEYS: ReadonlySet<string>;
+export declare const VERTICAL_MOVE_KEYS: ReadonlySet<string>;
+export declare const closestElement: (selector: string, base: Element) => Element | undefined;
+export declare const isRTL: (element: Element) => boolean;
+export declare const getSubmenuOpenKey: (element: Element) => string;
+export declare const getSubmenuCloseKey: (element: Element) => string;
+export declare const isCurrentPage: (url: string) => boolean;
+export declare const isCounter: (value: unknown) => value is number;
+export declare const isIndicator: (value: unknown) => value is "" | true;
+export declare const computeBadgeValue: (text: string | undefined, badge: number | string | true | undefined, description?: string) => string | null;
+export {};
 //# sourceMappingURL=helpers.d.ts.map

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
 export { type IconLibrary, type IconLibraryResolver, registerIconLibrary, unregisterIconLibrary, } from './components/icon/library';
-export { getPlatform, getTheme, setPlatform, setTheme } from './utils';
+export * from './interface-overrides';
+export { defineCustomElements, getPlatform, getTheme, setPlatform, setTheme, } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/interface-overrides.d.ts

@@ -0,0 +1,215 @@
+export {};
+declare global {
+    interface HTMLInputElement {
+        onsearch?: (this: HTMLInputElement, event: Event) => unknown;
+    }
+}
+interface ValidationMethods {
+    /**
+     * Returns true if element has no validity problems; false otherwise.
+     * Fires an invalid event at the element in the latter case.
+     *
+     * @webnative
+     */
+    readonly checkValidity: ElementInternals['checkValidity'];
+    /**
+     * Returns true if the element has no validity problems; otherwise, returns
+     * false, fires an invalid event at the element, and (if the event isn't
+     * canceled) reports the problem to the user.
+     *
+     * @webnative
+     */
+    readonly reportValidity: ElementInternals['reportValidity'];
+    /**
+     * Sets a custom error message that is displayed when a form is submitted.
+     *
+     * @param error The custom error message to set.
+     *
+     * @webnative
+     */
+    readonly setCustomValidity: HTMLInputElement['setCustomValidity'];
+}
+declare module './components' {
+    namespace Components {
+        interface QdsCheckbox extends ValidationMethods {
+        }
+        interface QdsDialog {
+            /**
+             * Displays the dialog over the top of any other dialogs that might be
+             * present. Everything outside of the dialog is [inert][] with interactions
+             * outside of the dialog being blocked.
+             *
+             * [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert
+             */
+            show: () => void;
+            /**
+             * Closes the dialog.
+             */
+            close: () => void;
+        }
+        interface QdsInput extends ValidationMethods {
+            /**
+             * Selects the entire content of the `<qds-input>` element if the
+             * element's content is selectable.
+             */
+            readonly select: HTMLInputElement['select'];
+            /**
+             * Sets the contents of the specified range of characters in the input element to a given string.
+             *
+             * @param replacement The string to insert.
+             * @param start The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection).
+             * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection).
+             * @param selectionMode A string defining how the selection should be set
+             * after the text has been replaced. Possible values:
+             * - `"select"` selects the newly inserted text.
+             * - `"start"` moves the selection to just before the inserted text.
+             * - `"end"` moves the selection to just after the inserted text.
+             * - `"preserve"` attempts to preserve the selection.
+             *
+             * @webnative
+             */
+            readonly setRangeText: HTMLInputElement['setRangeText'];
+            /**
+             * Selects the specified range of characters within the input.
+             *
+             * @param start The offset into the input for the start of the selection.
+             * @param end The offset into the input for the end of the selection.
+             * @param direction The direction in which the selection is performed.
+             *
+             * @webnative
+             */
+            readonly setSelectionRange: HTMLInputElement['setSelectionRange'];
+            /**
+             * Decrements the `value` by (`step` * n), where n defaults to 1 if not
+             * specified.
+             *
+             * @param n Amount to decrement the value by.
+             *
+             * @webnative
+             */
+            readonly stepDown: HTMLInputElement['stepDown'];
+            /**
+             * Increments the `value` by (`step` * n), where n defaults to 1 if not
+             * specified.
+             *
+             * @param n Amount to increment the value by.
+             *
+             * @webnative
+             */
+            readonly stepUp: HTMLInputElement['stepUp'];
+            /**
+             * Displays the browser picker for a `<qds-input>` element.
+             *
+             * This is the same picker that would normally be displayed when the
+             * element is selected, but can be triggered from a button press or other
+             * user interaction.
+             *
+             * Commonly browsers implement it for inputs of these types: `"date"`,
+             * `"month"`, `"week"`, `"time"`, `"datetime-local"`, or `"color"`. It
+             * can also be pre-populated with items from a [`<datalist>`][] element
+             * or [`autocomplete`][] attribute.
+             *
+             * More generally, this method should display the picker for any
+             * `<qds-input>` element on the platform that has a picker.
+             *
+             * [`<datalist>`]: https://developer.mozilla.org/docs/Web/HTML/Element/datalist
+             * [`autocomplete`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete
+             *
+             * @webnative
+             */
+            readonly showPicker: HTMLInputElement['showPicker'];
+        }
+        interface QdsSelect extends ValidationMethods {
+            /**
+             * Adds an element to the options collection.
+             *
+             * @param element The element to add.
+             * @param before An element of the options collection or a zero-based
+             * index representing the item the element should be added before. If
+             * this parameter is not specified or the index does not exist, the new
+             * element is appended to the end of the collection.
+             */
+            readonly addItem: HTMLSelectElement['add'];
+            /**
+             * Removes an element from the options collection.
+             *
+             * @param index Zero-based index of the [`HTMLOptionElement`][] to remove
+             * from the collection. If the index is not found the method has no
+             * effect.
+             *
+             * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement
+             */
+            readonly removeItem: HTMLSelectElement['remove'];
+            /**
+             * Retrieves an element from the options collection by its index.
+             *
+             * @param index Zero-based index of the [`HTMLOptionElement`][] to
+             * retrieve.
+             *
+             * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement
+             *
+             * @webnative
+             */
+            readonly item: HTMLSelectElement['item'];
+            /**
+             * Retrieves an element from the options collection by its name.
+             *
+             * @param name The `name` or `id` property of the [`HTMLOptionElement`][] to
+             * retrieve.
+             *
+             * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement
+             *
+             * @webnative
+             */
+            readonly namedItem: HTMLSelectElement['namedItem'];
+        }
+        interface QdsSwitch extends ValidationMethods {
+        }
+        interface QdsTextarea extends ValidationMethods {
+            /**
+             * Selects the entire content of the `<qds-textarea>` element if the
+             * element's content is selectable.
+             *
+             * @webnative
+             */
+            readonly select: HTMLTextAreaElement['select'];
+            /**
+             * Sets the contents of the specified range of characters in the textarea
+             * element to a given string.
+             *
+             * @param replacement The string to insert.
+             * @param start The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection).
+             * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection).
+             * @param selectionMode A string defining how the selection should be set
+             * after the text has been replaced. Possible values:
+             * - `"select"` selects the newly inserted text.
+             * - `"start"` moves the selection to just before the inserted text.
+             * - `"end"` moves the selection to just after the inserted text.
+             * - `"preserve"` attempts to preserve the selection.
+             *
+             * @webnative
+             */
+            readonly setRangeText: HTMLTextAreaElement['setRangeText'];
+            /**
+             * Selects the specified range of characters within the textarea.
+             *
+             * @param start The offset into the textarea for the start of the selection.
+             * @param end The offset into the textarea for the end of the selection.
+             * @param direction The direction in which the selection is performed.
+             *
+             * @webnative
+             */
+            readonly setSelectionRange: HTMLTextAreaElement['setSelectionRange'];
+        }
+        interface QdsTab {
+            /**
+             * Exposes the tab `HTMLElement` that is rendered inside the component.
+             * This can be useful to manage focus.
+             *
+             * @readonly
+             */
+            readonly tab: HTMLElement;
+        }
+    }
+}
+//# sourceMappingURL=interface-overrides.d.ts.map

package/dist/types/qds-test.d.ts

@@ -1,18 +1,29 @@
-import type { Page } from '@playwright/test';
-import type { EventSpy } from 'stencil-playwright/dist/page/event-spy';
+import type { Locator, Page } from '@playwright/test';
+import type { EventSpy } from '@stencil/playwright/dist/page/event-spy';
 declare module '@playwright/test' {
-  interface Locator {
-    spyOnEvent: (eventName: string) => Promise<EventSpy>;
-  }
+    interface Locator {
+        /**
+         * Creates a new EventSpy and listens on the window for an event.
+         * The test will timeout if the event never fires.
+         *
+         * Usage:
+         * ```ts
+         * const ionChange = await page.spyOnEvent('ionChange');
+         * ...
+         * await ionChange.next();
+         * ```
+         */
+        spyOnEvent: (eventName: string) => Promise<EventSpy>;
+    }
 }
 interface QuartzPageOptions {
-  addBrandFont?: boolean;
-  content?: string;
-  platform?: 'desktop' | 'mobile';
-  theme?: 'dark' | 'light';
+    addBrandFont?: boolean;
+    content?: string;
+    platform?: 'desktop' | 'mobile';
+    theme?: 'dark' | 'light';
 }
 export declare const setupQuartzPage: (page: Page, options?: QuartzPageOptions) => Promise<void>;
-export declare const press: (page: Page, selector: string) => Promise<void>;
+export declare const press: (locator: Locator) => Promise<void>;
 export { expect } from '@playwright/test';
-export { test } from 'stencil-playwright';
+export { test } from '@stencil/playwright';
 //# sourceMappingURL=qds-test.d.ts.map