npm - @warp-ds/elements - Versions diffs - 2.3.1 → 2.3.2 - Mend

@warp-ds/elements 2.3.1 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/custom-elements.json +384 -0
package/dist/index.d.ts +118 -0
package/dist/packages/datepicker/datepicker.js +2732 -439
package/dist/packages/datepicker/datepicker.js.map +7 -0
package/dist/web-types.json +81 -1
package/package.json +1 -1

package/dist/custom-elements.json CHANGED Viewed

@@ -3254,6 +3254,390 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "packages/datepicker/datepicker.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)",
+          "name": "WarpDatepicker",
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "Takes precedence over the `<html>` lang attribute.",
+              "attribute": "lang",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "headerFormat",
+              "type": {
+                "text": "string"
+              },
+              "default": "'MMMM yyyy'",
+              "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "attribute": "header-format"
+            },
+            {
+              "kind": "field",
+              "name": "weekdayFormat",
+              "type": {
+                "text": "string"
+              },
+              "default": "'EEEEEE'",
+              "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "attribute": "weekday-format"
+            },
+            {
+              "kind": "field",
+              "name": "isDayDisabled",
+              "type": {
+                "text": "(day: Date) => boolean"
+              },
+              "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute."
+            },
+            {
+              "kind": "field",
+              "name": "dayFormat",
+              "type": {
+                "text": "string"
+              },
+              "default": "'PPPP'",
+              "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "attribute": "day-format"
+            },
+            {
+              "kind": "field",
+              "name": "isCalendarOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "navigationDate",
+              "type": {
+                "text": "Date"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectedDate",
+              "type": {
+                "text": "Date | null"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "month",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#initialValue",
+              "privacy": "private",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "weeks",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "calendar",
+              "type": {
+                "text": "HTMLDivElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "toggleButton",
+              "type": {
+                "text": "HTMLButtonElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "wrapper",
+              "type": {
+                "text": "HTMLDivElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "previousMonthButton",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "description": "This is the first focusable element, needed for the modal focus trap.\n\nDon't cache this and other `@query` fields from inside the calendar modal.\nThey work the first time, but once the calendar is closed and reopened\nthe query will point to an element that doesn't exist anymore."
+            },
+            {
+              "kind": "field",
+              "name": "todayCell",
+              "type": {
+                "text": "HTMLTableCellElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectedCell",
+              "type": {
+                "text": "HTMLTableCellElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetFormControl",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "type": {
+                "text": "resetFormControl() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#toggleCalendarOpen",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent | KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#nextMonth",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#previousMonth",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#dispatchChangeEvent",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#onInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onInputClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onInputKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onCalendarKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onCalendarSelect",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent | KeyboardEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "label"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "Takes precedence over the `<html>` lang attribute.",
+              "fieldName": "lang"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "header-format",
+              "type": {
+                "text": "string"
+              },
+              "default": "'MMMM yyyy'",
+              "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "fieldName": "headerFormat"
+            },
+            {
+              "name": "weekday-format",
+              "type": {
+                "text": "string"
+              },
+              "default": "'EEEEEE'",
+              "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "fieldName": "weekdayFormat"
+            },
+            {
+              "name": "day-format",
+              "type": {
+                "text": "string"
+              },
+              "default": "'PPPP'",
+              "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "fieldName": "dayFormat"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@open-wc/form-control"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-datepicker",
+          "customElement": true,
+          "modulePath": "packages/datepicker/datepicker.ts",
+          "definitionPath": "packages/datepicker/datepicker.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-datepicker",
+          "declaration": {
+            "name": "WarpDatepicker",
+            "module": "packages/datepicker/datepicker.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpDatepicker",
+          "declaration": {
+            "name": "WarpDatepicker",
+            "module": "packages/datepicker/datepicker.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "packages/datepicker/index.ts",

package/dist/index.d.ts CHANGED Viewed

@@ -16,6 +16,7 @@ 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 { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
 /**
  * This type can be used to create scoped tags for your components.
@@ -504,6 +505,70 @@ export type ModalMainProps = {
 export type WarpToastContainerProps = {
+}
+export type WarpDatepickerProps = {
+  /**  */
+  "label"?: WarpDatepicker['label'];
+  /** Takes precedence over the `<html>` lang attribute. */
+  "lang"?: WarpDatepicker['lang'];
+  /**  */
+  "name"?: WarpDatepicker['name'];
+  /**  */
+  "value"?: WarpDatepicker['value'];
+  /** Decides the format of the date as shown in the calendar header.
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "header-format"?: WarpDatepicker['headerFormat'];
+  /** Decides the format of the date as shown in the calendar header.
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "headerFormat"?: WarpDatepicker['headerFormat'];
+  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "weekday-format"?: WarpDatepicker['weekdayFormat'];
+  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "weekdayFormat"?: WarpDatepicker['weekdayFormat'];
+  /** Decides the format of the day in the calendar as read to screen readers.
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "day-format"?: WarpDatepicker['dayFormat'];
+  /** Decides the format of the day in the calendar as read to screen readers.
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "dayFormat"?: WarpDatepicker['dayFormat'];
+  /** Lets you control if a date in the calendar should be disabled.
+This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
+  "isDayDisabled"?: WarpDatepicker['isDayDisabled'];
+  /**  */
+  "isCalendarOpen"?: WarpDatepicker['isCalendarOpen'];
+  /**  */
+  "navigationDate"?: WarpDatepicker['navigationDate'];
+  /**  */
+  "calendar"?: WarpDatepicker['calendar'];
+  /**  */
+  "input"?: WarpDatepicker['input'];
+  /**  */
+  "toggleButton"?: WarpDatepicker['toggleButton'];
+  /**  */
+  "wrapper"?: WarpDatepicker['wrapper'];
+  /** This is the first focusable element, needed for the modal focus trap.
+Don't cache this and other `@query` fields from inside the calendar modal.
+They work the first time, but once the calendar is closed and reopened
+the query will point to an element that doesn't exist anymore. */
+  "previousMonthButton"?: WarpDatepicker['previousMonthButton'];
+  /**  */
+  "todayCell"?: WarpDatepicker['todayCell'];
+  /**  */
+  "selectedCell"?: WarpDatepicker['selectedCell'];
 }
   export type CustomElements = {
@@ -956,6 +1021,59 @@ export type WarpToastContainerProps = {
  * - `del(id: string | number) => Promise<boolean>`: undefined
   */
     "w-toast-container": Partial<WarpToastContainerProps & BaseProps<WarpToastContainer> & BaseEvents>;
+  /**
+     * An input for dates.
+ *
+ * Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `label`: undefined
+ * - `lang`: Takes precedence over the `<html>` lang attribute.
+ * - `name`: undefined
+ * - `value`: undefined
+ * - `header-format`/`headerFormat`: Decides the format of the date as shown in the calendar header.
+ *
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+ * - `weekday-format`/`weekdayFormat`: Decides the format of the weekday as shown above the grid of dates in the calendar.
+ *
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+ * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
+ *
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+ * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
+ *
+ * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
+ * - `isCalendarOpen`: undefined (property only)
+ * - `navigationDate`: undefined (property only)
+ * - `selectedDate`: undefined (property only) (readonly)
+ * - `month`: undefined (property only) (readonly)
+ * - `weeks`: undefined (property only) (readonly)
+ * - `calendar`: undefined (property only)
+ * - `input`: undefined (property only)
+ * - `toggleButton`: undefined (property only)
+ * - `wrapper`: undefined (property only)
+ * - `previousMonthButton`: This is the first focusable element, needed for the modal focus trap.
+ *
+ * Don't cache this and other `@query` fields from inside the calendar modal.
+ * They work the first time, but once the calendar is closed and reopened
+ * the query will point to an element that doesn't exist anymore. (property only)
+ * - `todayCell`: undefined (property only)
+ * - `selectedCell`: undefined (property only)
+ *
+ * ## Methods
+ *
+ * Methods that can be called to access component functionality.
+ *
+ * - `resetFormControl() => void`: undefined
+  */
+    "w-datepicker": Partial<WarpDatepickerProps & BaseProps<WarpDatepicker> & BaseEvents>;
   }
 export type CustomCssProperties = {