@warp-ds/elements 2.2.0 → 2.3.0-next.1

package/dist/index.d.ts

@@ -15,6 +15,9 @@ import type { ModalFooter } from "./packages/modal/modal-footer.ts";
 import type { ModalHeader } from "./packages/modal/modal-header.ts";
 import type { ModalMain } from "./packages/modal/modal-main.ts";
 import type { WarpToastContainer } from "./packages/toast/toast-container.ts";
+import type { WarpPagination } from "./packages/pagination/index.ts";
+import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
+import type { WarpSlider } from "./packages/slider/slider.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -467,6 +470,96 @@ export type ModalMainProps = {
 export type WarpToastContainerProps = {
 
 
+}
+
+
+export type WarpPaginationProps = {
+  /**  */
+  "base-url"?: WarpPagination['baseUrl'];
+  /**  */
+  "baseUrl"?: WarpPagination['baseUrl'];
+  /**  */
+  "pages"?: WarpPagination['pages'];
+  /**  */
+  "current-page"?: WarpPagination['currentPageNumber'];
+  /**  */
+  "currentPageNumber"?: WarpPagination['currentPageNumber'];
+  /**  */
+  "visible-pages"?: WarpPagination['visiblePages'];
+  /**  */
+  "visiblePages"?: WarpPagination['visiblePages'];
+
+  /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
+  "onpage-click"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpSliderThumbProps = {
+  /**  */
+  "aria-label"?: WarpSliderThumb['ariaLabel'];
+  /**  */
+  "ariaLabel"?: WarpSliderThumb['ariaLabel'];
+  /**  */
+  "aria-description"?: WarpSliderThumb['ariaDescription'];
+  /**  */
+  "ariaDescription"?: WarpSliderThumb['ariaDescription'];
+  /**  */
+  "label"?: WarpSliderThumb['label'];
+  /**  */
+  "name"?: WarpSliderThumb['name'];
+  /**  */
+  "value"?: WarpSliderThumb['value'];
+  /**  */
+  "disabled"?: WarpSliderThumb['disabled'];
+  /** Set by `<w-slider>` */
+  "markers"?: WarpSliderThumb['markers'];
+  /** Set by `<w-slider>` */
+  "required"?: WarpSliderThumb['required'];
+  /** Set by `<w-slider>` */
+  "step"?: WarpSliderThumb['step'];
+  /** Set by `<w-slider>` */
+  "min"?: WarpSliderThumb['min'];
+  /** Set by `<w-slider>` */
+  "max"?: WarpSliderThumb['max'];
+  /** Set by `<w-slider>` */
+  "suffix"?: WarpSliderThumb['suffix'];
+  /** JS hook to help you format the numeric value how you want. */
+  "formatter"?: WarpSliderThumb['formatter'];
+  /**  */
+  "range"?: WarpSliderThumb['range'];
+  /**  */
+  "textfield"?: WarpSliderThumb['textfield'];
+
+  /**  */
+  "onslidervalidity"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpSliderProps = {
+  /** The slider fieldset label. Required for proper accessibility.
+
+If you need to display HTML, use the `label` slot instead. */
+  "label"?: WarpSlider['label'];
+  /**  */
+  "disabled"?: WarpSlider['disabled'];
+  /**  */
+  "invalid"?: WarpSlider['invalid'];
+  /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
+  "required"?: WarpSlider['required'];
+  /**  */
+  "min"?: WarpSlider['min'];
+  /**  */
+  "max"?: WarpSlider['max'];
+  /** Pass a value similar to step to create visual markers at that interval */
+  "markers"?: WarpSlider['markers'];
+  /**  */
+  "step"?: WarpSlider['step'];
+  /** Suffix used in text input fields and for the min and max values of the slider. */
+  "suffix"?: WarpSlider['suffix'];
+  /** Function to format the to- and from labels and value in the slider thumb tooltip. */
+  "formatter"?: WarpSlider['formatter'];
+
+
 }
 
   export type CustomElements = {
@@ -885,6 +978,98 @@ export type WarpToastContainerProps = {
  * - `del(id: string | number) => Promise<boolean>`: undefined
   */
     "w-toast-container": Partial<WarpToastContainerProps & BaseProps<WarpToastContainer> & BaseEvents>;
+
+
+  /**
+     * 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)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `base-url`/`baseUrl`: undefined 
+ * - `pages`: undefined 
+ * - `current-page`/`currentPageNumber`: undefined 
+ * - `visible-pages`/`visiblePages`: undefined 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+  */
+    "w-pagination": Partial<WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents>;
+
+
+  /**
+     * Component to place inside a `<w-slider>`.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `aria-label`/`ariaLabel`: undefined 
+ * - `aria-description`/`ariaDescription`: undefined 
+ * - `label`: undefined 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * - `disabled`: undefined 
+ * - `markers`: Set by `<w-slider>` (property only)
+ * - `required`: Set by `<w-slider>` (property only)
+ * - `step`: Set by `<w-slider>` (property only)
+ * - `min`: Set by `<w-slider>` (property only)
+ * - `max`: Set by `<w-slider>` (property only)
+ * - `suffix`: Set by `<w-slider>` (property only)
+ * - `formatter`: JS hook to help you format the numeric value how you want. (property only)
+ * - `range`: undefined (property only)
+ * - `textfield`: undefined (property only)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `slidervalidity`: undefined
+  */
+    "w-slider-thumb": Partial<WarpSliderThumbProps & BaseProps<WarpSliderThumb> & BaseEvents>;
+
+
+  /**
+     * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: The slider fieldset label. Required for proper accessibility.
+ * 
+ * If you need to display HTML, use the `label` slot instead. 
+ * - `disabled`: undefined 
+ * - `invalid`: undefined 
+ * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit. 
+ * - `min`: undefined 
+ * - `max`: undefined 
+ * - `markers`: Pass a value similar to step to create visual markers at that interval 
+ * - `step`: undefined 
+ * - `suffix`: Suffix used in text input fields and for the min and max values of the slider. 
+ * - `formatter`: Function to format the to- and from labels and value in the slider thumb tooltip. (property only)
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: For single sliders place a `<w-slider-thumb>` in the default slot.
+ * - `label`: Label for the slider or range slider as a whole.
+ * - `description`: Optional description between the label and slider.
+ * - `from`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+ * - `to`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+  */
+    "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
   }
 
 export type CustomCssProperties = {

package/dist/packages/pagination/index.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 };