@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.css

@@ -0,0 +1,141 @@
+nv-fieldtextarea {
+  --nv-field-border-default: var(--components-form-field-border-default);
+  --nv-field-border-hover: var(--components-form-field-border-hover);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--components-form-field-border-default);
+  --nv-field-border-readonly: var(--components-form-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-brand);
+  --nv-field-background: var(--components-form-field-background-default);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--form-gap-y);
+  box-sizing: border-box;
+}
+nv-fieldtextarea[readonly]:not([readonly=false]) {
+  --nv-field-border-default: var(--components-form-field-border-readonly);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-background: var(--components-form-field-background-readonly);
+}
+nv-fieldtextarea[error]:not([error=false]) {
+  --nv-field-border-default: var(--components-form-field-border-error);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+}
+nv-fieldtextarea[success]:not([success=false]) {
+  --nv-field-border-default: var(--components-form-field-border-success);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-success);
+}
+nv-fieldtextarea[required]:not([required=false]) label::after {
+  content: "*";
+  color: var(--components-form-text-required);
+  font-weight: 700;
+}
+nv-fieldtextarea label {
+  display: flex;
+  align-items: center;
+  gap: var(--form-label-gap);
+  align-self: stretch;
+  color: var(--components-form-text-label-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-label-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-label-line-height);
+}
+nv-fieldtextarea .textarea-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-gap-x);
+  align-items: stretch;
+  align-self: stretch;
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container {
+  display: flex;
+  flex-grow: 1;
+  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
+  justify-content: center;
+  align-items: center;
+  gap: var(--form-field-gap);
+  align-self: stretch;
+  border-radius: var(--form-field-radius);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--nv-field-border-default);
+  opacity: var(--components-form-opacity-default);
+  background: var(--nv-field-background);
+  transition: all 150ms ease-out;
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container:hover {
+  border-color: var(--nv-field-border-hover);
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-readonly);
+  border-color: var(--nv-field-border-readonly);
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-disabled);
+  border-color: var(--nv-field-border-disabled);
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container textarea {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--components-form-field-content-text);
+  text-overflow: ellipsis;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus {
+  outline: none;
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder {
+  overflow: hidden;
+  color: var(--components-form-field-content-placeholder);
+  text-overflow: ellipsis;
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--form-field-line-height);
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation {
+  color: var(--nv-field-border-default);
+}
+nv-fieldtextarea .description {
+  align-self: stretch;
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+}
+nv-fieldtextarea .error-description {
+  align-self: stretch;
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+  color: var(--components-form-text-description-error);
+}

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.docs.js

@@ -0,0 +1,175 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+import { faker } from "@faker-js/faker";
+const NvFieldtextareaDocs = {
+    component: 'nv-fieldtextarea',
+    subcomponents: ['nv-badge', 'nv-button'],
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'Textfield Label',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.description),
+            args: {
+                label: 'Textfield Description',
+                description: 'Description will show here',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.placeholder),
+            args: {
+                label: 'Textfield Placeholder',
+                placeholder: 'Type something...',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.name),
+            args: {
+                label: 'Textfield Name',
+                name: 'name',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.value),
+            args: {
+                label: 'Textfield Value',
+                value: 'value',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: {
+                label: 'Textfield Disabled',
+                disabled: true,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.readonly),
+            args: {
+                label: 'Textfield Readonly',
+                readonly: true,
+                value: 'This textarea is readonly',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.required),
+            args: {
+                label: 'Textfield Required',
+                required: true,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.error),
+            args: {
+                label: 'Textfield Error',
+                error: true,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.errorDescription),
+            args: {
+                label: 'Textfield Error Description',
+                description: 'Make sure to be valid.',
+                error: true,
+                errorDescription: 'This textarea has an error.',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.success),
+            args: {
+                label: 'Textfield Success',
+                success: true,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.maxlength),
+            args: {
+                label: 'Textfield Max Length',
+                maxlength: 10,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.minlength),
+            args: {
+                label: 'Textfield Min Length',
+                minlength: 10,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.rows),
+            args: {
+                label: 'Textarea Rows',
+                rows: 4,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.resize),
+            args: {
+                label: 'Textarea Resize',
+                resize: 'horizontal',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.autosize),
+            args: {
+                label: 'Textarea Autosize',
+                autosize: true,
+                rows: 4,
+                value: faker.lorem.paragraph(30),
+                resize: 'none',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        {
+            name: 'labelSlot',
+            description: 'Content to be placed as the label, will override the label prop.',
+            args: {
+                label: 'Original Label',
+            },
+            template: (h("nv-fieldtextarea", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label Slot"))),
+        },
+        {
+            name: 'descriptionSlot',
+            description: 'Content to be placed as the description, will override the description prop.',
+            args: {
+                label: 'Description Slot',
+                description: 'Original description',
+            },
+            template: (h("nv-fieldtextarea", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
+        },
+        {
+            name: 'errorDescriptionSlot',
+            description: 'Content to be placed as the error description, will override the errorDescription prop.',
+            args: {
+                label: 'Error Description Slot',
+                errorDescription: 'Original error description',
+                error: true,
+            },
+            template: (h("nv-fieldtextarea", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Custom Error Description"))),
+        },
+    ],
+};
+export default NvFieldtextareaDocs;
+//# sourceMappingURL=nv-fieldtextarea.docs.js.map

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldtextarea.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtextarea/nv-fieldtextarea.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\nimport { faker } from '@faker-js/faker';\n\nconst NvFieldtextareaDocs: NovaDocs<Components.NvFieldtextarea> = {\n  component: 'nv-fieldtextarea',\n  subcomponents: ['nv-badge', 'nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.label),\n      args: {\n        label: 'Textfield Label',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.description),\n      args: {\n        label: 'Textfield Description',\n        description: 'Description will show here',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.placeholder),\n      args: {\n        label: 'Textfield Placeholder',\n        placeholder: 'Type something...',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.name),\n      args: {\n        label: 'Textfield Name',\n        name: 'name',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.value),\n      args: {\n        label: 'Textfield Value',\n        value: 'value',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.disabled),\n      args: {\n        label: 'Textfield Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.readonly),\n      args: {\n        label: 'Textfield Readonly',\n        readonly: true,\n        value: 'This textarea is readonly',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.required),\n      args: {\n        label: 'Textfield Required',\n        required: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.error),\n      args: {\n        label: 'Textfield Error',\n        error: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.errorDescription),\n      args: {\n        label: 'Textfield Error Description',\n        description: 'Make sure to be valid.',\n        error: true,\n        errorDescription: 'This textarea has an error.',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.success),\n      args: {\n        label: 'Textfield Success',\n        success: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.maxlength),\n      args: {\n        label: 'Textfield Max Length',\n        maxlength: 10,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.minlength),\n      args: {\n        label: 'Textfield Min Length',\n        minlength: 10,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.rows),\n      args: {\n        label: 'Textarea Rows',\n        rows: 4,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.resize),\n      args: {\n        label: 'Textarea Resize',\n        resize: 'horizontal',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.autosize),\n      args: {\n        label: 'Textarea Autosize',\n        autosize: true,\n        rows: 4,\n        value: faker.lorem.paragraph(30),\n        resize: 'none',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: 'labelSlot',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtextarea>\n      ),\n    },\n    {\n      name: 'descriptionSlot',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Slot',\n        description: 'Original description',\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldtextarea>\n      ),\n    },\n    {\n      name: 'errorDescriptionSlot',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Slot',\n        errorDescription: 'Original error description',\n        error: true,\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldtextarea>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtextareaDocs;\n"]}