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

package/dist/custom-elements.json

@@ -4989,6 +4989,333 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/textarea/textarea.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)",
+          "name": "WarpTextarea",
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "invalid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxRows",
+              "type": {
+                "text": "number"
+              },
+              "attribute": "maximum-rows",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "minRows",
+              "type": {
+                "text": "number"
+              },
+              "attribute": "minimum-rows",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "readOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "deprecated": "Use the native readonly attribute instead. Here for API consistency with `w-textfield`.",
+              "attribute": "read-only",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "optional",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "minHeight"
+            },
+            {
+              "kind": "field",
+              "name": "maxHeight"
+            },
+            {
+              "kind": "field",
+              "name": "#initialValue",
+              "privacy": "private",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#uniqueId",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "resetFormControl",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "type": {
+                "text": "resetFormControl() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handler",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ],
+              "type": {
+                "text": "handler(e: InputEvent) => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#resize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLTextAreaElement"
+                  }
+                }
+              ],
+              "description": "Calculate the new height for the area on input"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "disabled"
+            },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "invalid"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "helpText"
+            },
+            {
+              "name": "maximum-rows",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "maxRows"
+            },
+            {
+              "name": "minimum-rows",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "minRows"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "read-only",
+              "type": {
+                "text": "boolean"
+              },
+              "deprecated": "Use the native readonly attribute instead. Here for API consistency with `w-textfield`.",
+              "fieldName": "readOnly"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "readonly"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "required"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "optional"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@open-wc/form-control"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-textarea",
+          "customElement": true,
+          "modulePath": "packages/textarea/textarea.ts",
+          "definitionPath": "packages/textarea/textarea.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-textarea",
+          "declaration": {
+            "name": "WarpTextarea",
+            "module": "packages/textarea/textarea.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpTextarea",
+          "declaration": {
+            "name": "WarpTextarea",
+            "module": "packages/textarea/textarea.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/index.d.ts

@@ -24,6 +24,7 @@ import type { WarpTabPanel } from "./packages/tab-panel/tab-panel.ts";
 import type { WarpTabs } from "./packages/tabs/tabs.ts";
 import type { WIcon } from "./packages/icon/icon.ts";
 import type { WarpPagination } from "./packages/pagination/pagination.ts";
+import type { WarpTextarea } from "./packages/textarea/textarea.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -1313,6 +1314,93 @@ export type WarpPaginationSolidJsProps = {
   textContent?: string | number;
 };
 
+export type WarpTextareaProps = {
+  /**  */
+  disabled?: WarpTextarea["disabled"];
+  /**  */
+  invalid?: WarpTextarea["invalid"];
+  /**  */
+  label?: WarpTextarea["label"];
+  /**  */
+  "help-text"?: WarpTextarea["helpText"];
+  /**  */
+  helpText?: WarpTextarea["helpText"];
+  /**  */
+  "maximum-rows"?: WarpTextarea["maxRows"];
+  /**  */
+  maxRows?: WarpTextarea["maxRows"];
+  /**  */
+  "minimum-rows"?: WarpTextarea["minRows"];
+  /**  */
+  minRows?: WarpTextarea["minRows"];
+  /**  */
+  name?: WarpTextarea["name"];
+  /**  */
+  placeholder?: WarpTextarea["placeholder"];
+  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  "read-only"?: WarpTextarea["readOnly"];
+  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  readOnly?: WarpTextarea["readOnly"];
+  /**  */
+  readonly?: WarpTextarea["readonly"];
+  /**  */
+  required?: WarpTextarea["required"];
+  /**  */
+  value?: WarpTextarea["value"];
+  /**  */
+  optional?: WarpTextarea["optional"];
+  /**  */
+  minHeight?: WarpTextarea["minHeight"];
+  /**  */
+  maxHeight?: WarpTextarea["maxHeight"];
+};
+
+export type WarpTextareaSolidJsProps = {
+  /**  */
+  "prop:disabled"?: WarpTextarea["disabled"];
+  /**  */
+  "prop:invalid"?: WarpTextarea["invalid"];
+  /**  */
+  "prop:label"?: WarpTextarea["label"];
+  /**  */
+  "attr:help-text"?: WarpTextarea["helpText"];
+  /**  */
+  "prop:helpText"?: WarpTextarea["helpText"];
+  /**  */
+  "attr:maximum-rows"?: WarpTextarea["maxRows"];
+  /**  */
+  "prop:maxRows"?: WarpTextarea["maxRows"];
+  /**  */
+  "attr:minimum-rows"?: WarpTextarea["minRows"];
+  /**  */
+  "prop:minRows"?: WarpTextarea["minRows"];
+  /**  */
+  "prop:name"?: WarpTextarea["name"];
+  /**  */
+  "prop:placeholder"?: WarpTextarea["placeholder"];
+  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  "bool:read-only"?: WarpTextarea["readOnly"];
+  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  "prop:readOnly"?: WarpTextarea["readOnly"];
+  /**  */
+  "prop:readonly"?: WarpTextarea["readonly"];
+  /**  */
+  "prop:required"?: WarpTextarea["required"];
+  /**  */
+  "prop:value"?: WarpTextarea["value"];
+  /**  */
+  "prop:optional"?: WarpTextarea["optional"];
+  /**  */
+  "prop:minHeight"?: WarpTextarea["minHeight"];
+  /**  */
+  "prop:maxHeight"?: WarpTextarea["maxHeight"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type CustomElements = {
   /**
    * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
@@ -1979,6 +2067,42 @@ export type CustomElements = {
   "w-pagination": Partial<
     WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents
   >;
+
+  /**
+   * A single line text input element.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `disabled`: undefined
+   * - `invalid`: undefined
+   * - `label`: undefined
+   * - `help-text`/`helpText`: undefined
+   * - `maximum-rows`/`maxRows`: undefined
+   * - `minimum-rows`/`minRows`: undefined
+   * - `name`: undefined
+   * - `placeholder`: undefined
+   * - `read-only`/`readOnly`: undefined
+   * - `readonly`: undefined
+   * - `required`: undefined
+   * - `value`: undefined
+   * - `optional`: undefined
+   * - `minHeight`: undefined (property only)
+   * - `maxHeight`: undefined (property only)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `handler(e: InputEvent) => void`: undefined
+   */
+  "w-textarea": Partial<
+    WarpTextareaProps & BaseProps<WarpTextarea> & BaseEvents
+  >;
 };
 
 export type CustomElementsSolidJs = {
@@ -2720,6 +2844,45 @@ export type CustomElementsSolidJs = {
       BaseProps<WarpPagination> &
       BaseEvents
   >;
+
+  /**
+   * A single line text input element.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `disabled`: undefined
+   * - `invalid`: undefined
+   * - `label`: undefined
+   * - `help-text`/`helpText`: undefined
+   * - `maximum-rows`/`maxRows`: undefined
+   * - `minimum-rows`/`minRows`: undefined
+   * - `name`: undefined
+   * - `placeholder`: undefined
+   * - `read-only`/`readOnly`: undefined
+   * - `readonly`: undefined
+   * - `required`: undefined
+   * - `value`: undefined
+   * - `optional`: undefined
+   * - `minHeight`: undefined (property only)
+   * - `maxHeight`: undefined (property only)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `handler(e: InputEvent) => void`: undefined
+   */
+  "w-textarea": Partial<
+    WarpTextareaProps &
+      WarpTextareaSolidJsProps &
+      BaseProps<WarpTextarea> &
+      BaseEvents
+  >;
 };
 
 export type CustomCssProperties = {};

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(valgfrit)\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(optional)\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(vapaaehtoinen)\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(valgfritt)\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(valfritt)\"]}");

package/dist/packages/textarea/react.d.ts

@@ -0,0 +1,11 @@
+import { WarpTextarea } from './textarea.js';
+export declare const Textarea: import("@lit/react").ReactWebComponent<WarpTextarea, {
+    onBlur: string;
+    onblur: string;
+    onChange: string;
+    onchange: string;
+    onInput: string;
+    oninput: string;
+    onFocus: string;
+    onfocus: string;
+}>;

package/dist/packages/textarea/react.js

@@ -0,0 +1,21 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Textarea = createComponent({
+    tagName: 'w-textarea',
+    elementClass: Component,
+    react: React,
+    events: {
+        onBlur: 'blur',
+        onblur: 'blur',
+        onChange: 'change',
+        onchange: 'change',
+        onInput: 'input',
+        oninput: 'input',
+        onFocus: 'focus',
+        onfocus: 'focus',
+    },
+});

package/dist/packages/textarea/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/textarea/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.flex{display:flex}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.fixed{position:fixed}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.resize{resize:both}.resize-none{resize:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;

package/dist/packages/textarea/textarea.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, PropertyValues } from 'lit';
+declare const WarpTextarea_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * A single line text input element.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+ */
+declare class WarpTextarea extends WarpTextarea_base {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    disabled: boolean;
+    invalid: boolean;
+    label: string;
+    helpText: string;
+    maxRows: number;
+    minRows: number;
+    name: string;
+    placeholder: string;
+    /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
+    readOnly: boolean;
+    readonly: boolean;
+    required: boolean;
+    value: string;
+    optional: boolean;
+    minHeight: number;
+    maxHeight: number;
+    updated(changedProperties: PropertyValues<this>): void;
+    resetFormControl(): void;
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    get _textareaStyles(): string;
+    /** @internal */
+    get _helptextstyles(): string;
+    /** @internal */
+    get _helpId(): string;
+    /** @internal */
+    get _id(): string;
+    /** @internal */
+    get _error(): string;
+    connectedCallback(): Promise<void>;
+    handler(e: InputEvent): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpTextarea };