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

package/dist/collection/components/nv-fieldselect/nv-fieldselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldselect.js","sourceRoot":"","sources":["../../../src/components/nv-fieldselect/nv-fieldselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldselect',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n  @Element() el: HTMLNvFieldselectElement;\n  private selectElement!: HTMLSelectElement;\n  private internals: ElementInternals;\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  private computedDisplayValue: string = '';\n\n  @State()\n  private internalReadonly: boolean = false;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    this.updateDisplayValue(); // Ensure display value is updated before render\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the select element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly selectId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should choose in the\n   * select field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Add helpful hints or extra information under the select field. This is\n   * where you can clarify what users should choose or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Defines the name attribute of the select field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the selected data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the select field so that users can’t\n   * choose something. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the select field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to change or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the select field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the select field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the select field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the select field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * When enabled, allows the select to handle multiple selections.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * The value of the select field.\n   * - If `multiple` is `false`, it's a single string.\n   * - If `multiple` is `true`, it's a comma-separated string of selected values.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * When enabled, displays the value element instead of the label when readonly.\n   * By default, the label is displayed in readonly mode. Also it automatically\n   * sets the component to readonly.\n   */\n  @Prop({ reflect: true })\n  readonly displayValue: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>; // Emit as a string\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Updates the display value when the value property changes. This watcher is\n   * used to update the display value when the selected value changes. This is\n   * necessary for readonly select fields to display the selected value.\n   * @internal This watcher is not intended to be called outside of the component.\n   * @param {string} newValue - The new value of the select field.\n   */\n  @Watch('value')\n  updateDisplayValueWatcher(newValue: string) {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      const selectedValues = newValue.split(',').map(val => val.trim());\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n\n        if (!this.multiple) {\n          this.selectElement.value = newValue; // Only set when not multiple\n        }\n      } else {\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Update form value\n    this.setFormValue();\n  }\n\n  /**\n   * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n   * @param {boolean} newValue - The new value of displayValue.\n   */\n  @Watch('displayValue')\n  handleDisplayValueChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.readonly) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n   * @param {boolean} newValue - The new value of readonly.\n   */\n  @Watch('readonly')\n  handleReadonlyChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the change event on the select element. This method is used to\n   * update the value property when the selected options change. It is also\n   * used to emit the selectChanged event when the selected value changes.\n   * @param {Event} event - The change event on the select element.\n   * @emits selectChanged\n   */\n  private readonly handleSelectChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    let selectedValues: string[] = Array.from(select.selectedOptions).map(\n      option => option.value,\n    );\n\n    if (!this.multiple) {\n      selectedValues = selectedValues.slice(0, 1);\n    }\n\n    this.value = this.multiple\n      ? selectedValues.join(', ')\n      : selectedValues[0] || '';\n    this.valueChanged.emit(this.value);\n\n    // Update form value\n    this.setFormValue();\n  };\n\n  /**\n   * Handles focus when the select container is clicked.\n   */\n  private readonly handleSelectContainerClick = () => {\n    if (!this.internalReadonly && this.selectElement) {\n      this.selectElement.focus();\n    }\n  };\n\n  /**\n   * Updates the display value of the select field. This method is used to\n   * update the display value when the selected value changes. This is necessary\n   * for readonly select fields to display the selected value. This method is\n   * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n   * watcher.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private updateDisplayValue(): void {\n    if (this.internalReadonly && !this.displayValue) {\n      if (this.multiple) {\n        const selectedLabels = this.value\n          .split(',')\n          .map(key => key.trim())\n          .map(key => this.getLabelFromId(key) || '')\n          .filter(label => label !== '');\n        this.computedDisplayValue = selectedLabels.join(', ') || '';\n      } else {\n        this.computedDisplayValue = this.getLabelFromId(this.value) || '';\n      }\n    } else if (this.internalReadonly && this.displayValue) {\n      this.computedDisplayValue = this.value || '';\n    }\n  }\n\n  /**\n   * Retrieves the label from the <option> elements based on the provided key (value).\n   * This method uses the id or value attribute directly from the <select> options.\n   * @param {string} key - The key (value) for which to find the corresponding label.\n   * @returns {string} The label if found; otherwise, an empty string.\n   */\n  private getLabelFromId(key: string): string {\n    this.ensureSelectElement();\n    if (!this.selectElement) {\n      return '';\n    }\n\n    // Cache the option list\n    const options = this.selectElement.options;\n\n    if (options) {\n      const option = Array.from(options).find(option => option.value === key);\n      return option ? option.textContent.trim() || '' : '';\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Sets the value of the form element for form submission. This method is\n   * called when the selected value changes or when the value property is set.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private setFormValue(): void {\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Ensures the select element is available. This method is used to ensure\n   * the select element is available before attempting to access it.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private ensureSelectElement(): void {\n    if (!this.selectElement) {\n      this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Lifecycle method that is called before the component is rendered. This is\n   * where the internal state is set up before rendering occurs.\n   */\n  componentWillLoad() {\n    // Set internalReadonly based on the readonly prop\n    this.internalReadonly = this.readonly;\n\n    // Ensure internalReadonly is true if displayValue is true during loading\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n\n    if ('attachInternals' in this.el) {\n      this.internals = (\n        this.el as HTMLElement & { attachInternals: () => ElementInternals }\n      ).attachInternals();\n    } else {\n      // Fallback logic for browsers without attachInternals support\n      this.internals = {\n        setFormValue: (value: string) => {\n          const formElement = this.el.closest('form');\n          if (formElement) {\n            const input = document.createElement('input');\n            input.type = 'hidden';\n            input.name = this.name;\n            input.value = value;\n            formElement.appendChild(input);\n          }\n        },\n      } as ElementInternals;\n    }\n\n    // Initialize value as an empty string if multiple is true\n    if (this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n  }\n\n  /**\n   * Lifecycle method that is called after the component has been rendered.\n   * This is where the display value is updated and the initial select element's\n   * state is set.\n   */\n  componentDidLoad() {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      // Only set the value for single selection, skip for multiple\n      if (!this.multiple) {\n        this.selectElement.value = this.value;\n      }\n\n      const selectedValues = this.multiple\n        ? this.value.split(',').map(v => v.trim())\n        : [this.value];\n\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n      } else {\n        // Handle case where there are no options\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Set the initial form value\n    this.setFormValue();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDERING\n\n  /**\n   * The render method creates the HTML structure for the component, including\n   * the label, select element, and any error or description messages. It also\n   * applies the appropriate CSS classes based on the readonly state and\n   * displayValue prop. This method is called when the component is rendered.\n   * @returns {HTMLStencilElement} The HTML element to render.\n   */\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.selectId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"select-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div\n            class=\"select-container\"\n            onClick={this.handleSelectContainerClick}\n          >\n            <slot name=\"leading-input\"></slot>\n\n            {this.internalReadonly && (\n              <input\n                id={this.selectId + '-readonly'}\n                type=\"text\"\n                value={this.computedDisplayValue}\n                readOnly\n                class=\"readonly-input\"\n                aria-readonly=\"true\"\n                aria-label={this.label}\n                aria-describedby={\n                  this.error\n                    ? `${this.selectId}-error`\n                    : `${this.selectId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.selectId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              disabled={this.disabled}\n              required={this.required}\n              multiple={this.multiple}\n              onChange={this.handleSelectChange}\n              class={this.internalReadonly ? 'hidden' : ''}\n              aria-label={this.label}\n              aria-describedby={\n                this.error\n                  ? `${this.selectId}-error`\n                  : `${this.selectId}-description`\n              }\n            >\n              <slot></slot>\n            </select>\n\n            {this.internalReadonly && (\n              <nv-icon name=\"chevron-down\" class=\"readonly-icon\" size=\"sm\" />\n            )}\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n            )}\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\" id={`${this.selectId}-description`}>\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div class=\"error-description\" id={`${this.selectId}-error`}>\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDERING\n}\n"]}

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

@@ -0,0 +1,141 @@
+nv-fieldtext {
+  --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-fieldtext[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-fieldtext[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-fieldtext[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-fieldtext[required]:not([required=false]) label::after {
+  content: "*";
+  color: var(--components-form-text-required);
+  font-weight: 700;
+}
+nv-fieldtext 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-fieldtext .input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-gap-x);
+  align-items: stretch;
+  align-self: stretch;
+}
+nv-fieldtext .input-wrapper .input-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-fieldtext .input-wrapper .input-container:hover {
+  border-color: var(--nv-field-border-hover);
+}
+nv-fieldtext .input-wrapper .input-container:focus-within {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fieldtext .input-wrapper .input-container:has(input:read-only) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-readonly);
+  border-color: var(--nv-field-border-readonly);
+}
+nv-fieldtext .input-wrapper .input-container:has(input:disabled) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-disabled);
+  border-color: var(--nv-field-border-disabled);
+}
+nv-fieldtext .input-wrapper .input-container input {
+  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-fieldtext .input-wrapper .input-container input:focus {
+  outline: none;
+}
+nv-fieldtext .input-wrapper .input-container input::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-fieldtext .input-wrapper .input-container nv-icon.validation {
+  color: var(--nv-field-border-default);
+}
+nv-fieldtext .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-fieldtext .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-fieldtext/nv-fieldtext.docs.js

@@ -0,0 +1,206 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldtextDocs = {
+    component: 'nv-fieldtext',
+    subcomponents: ['nv-badge', 'nv-button'],
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'Textfield Label',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.description),
+            args: {
+                label: 'Textfield Description',
+                description: 'Description will show here',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.placeholder),
+            args: {
+                label: 'Textfield Placeholder',
+                placeholder: 'Type something...',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.name),
+            args: {
+                label: 'Textfield Name',
+                name: 'name',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.value),
+            args: {
+                label: 'Textfield Value',
+                value: 'value',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.type),
+            args: {
+                label: 'Textfield Type',
+                type: 'email',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: {
+                label: 'Textfield Disabled',
+                disabled: true,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.readonly),
+            args: {
+                label: 'Textfield Readonly',
+                readonly: true,
+                value: 'This input is readonly',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.required),
+            args: {
+                label: 'Textfield Required',
+                required: true,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.error),
+            args: {
+                label: 'Textfield Error',
+                error: true,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.errorDescription),
+            args: {
+                label: 'Textfield Error Description',
+                description: 'Make sure to be valid.',
+                error: true,
+                errorDescription: 'This input has an error.',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.success),
+            args: {
+                label: 'Textfield Success',
+                success: true,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.maxlength),
+            args: {
+                label: 'Textfield Max Length',
+                maxlength: 10,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.minlength),
+            args: {
+                label: 'Textfield Min Length',
+                minlength: 10,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.pattern),
+            args: {
+                label: 'Textfield Pattern',
+                pattern: '[0-9]{3}',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.autocomplete),
+            args: {
+                label: 'Textfield Autocomplete',
+                autocomplete: 'on',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.multiple),
+            args: {
+                label: 'Textfield Multiple',
+                type: 'email',
+                multiple: true,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        {
+            name: 'leadingInputSlot',
+            description: 'Content to be placed before the input text, within the input container.',
+            args: {
+                label: 'Leading Input',
+            },
+            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-badge", { slot: "leading-input", label: "test", dismissible: true }))),
+        },
+        {
+            name: 'labelSlot',
+            description: 'Content to be placed as the label, will override the label prop.',
+            args: {
+                label: 'Original Label',
+            },
+            template: (h("nv-fieldtext", { "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-fieldtext", { "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-fieldtext", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Custom Error Description"))),
+        },
+        {
+            name: 'beforeInputSlot',
+            description: 'Content to be placed before the input text, outside the input container.',
+            args: {
+                label: 'Before Input Slot',
+                description: 'Description will show here',
+            },
+            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-button", { slot: "before-input" }, "Before Input Slot"))),
+        },
+        {
+            name: 'afterInputSlot',
+            description: 'Content to be placed after the input text, outside the input container.',
+            args: {
+                label: 'After Input Slot',
+                description: 'Description will show here',
+            },
+            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-button", { slot: "after-input" }, "After Input Slot"))),
+        },
+    ],
+};
+export default NvFieldtextDocs;
+//# sourceMappingURL=nv-fieldtext.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldtext.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.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';\n\nconst NvFieldtextDocs: NovaDocs<Components.NvFieldtext> = {\n  component: 'nv-fieldtext',\n  subcomponents: ['nv-badge', 'nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.label),\n      args: {\n        label: 'Textfield Label',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.description),\n      args: {\n        label: 'Textfield Description',\n        description: 'Description will show here',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.placeholder),\n      args: {\n        label: 'Textfield Placeholder',\n        placeholder: 'Type something...',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.name),\n      args: {\n        label: 'Textfield Name',\n        name: 'name',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.value),\n      args: {\n        label: 'Textfield Value',\n        value: 'value',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.type),\n      args: {\n        label: 'Textfield Type',\n        type: 'email',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.disabled),\n      args: {\n        label: 'Textfield Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.readonly),\n      args: {\n        label: 'Textfield Readonly',\n        readonly: true,\n        value: 'This input is readonly',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.required),\n      args: {\n        label: 'Textfield Required',\n        required: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.error),\n      args: {\n        label: 'Textfield Error',\n        error: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n      args: {\n        label: 'Textfield Error Description',\n        description: 'Make sure to be valid.',\n        error: true,\n        errorDescription: 'This input has an error.',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.success),\n      args: {\n        label: 'Textfield Success',\n        success: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.maxlength),\n      args: {\n        label: 'Textfield Max Length',\n        maxlength: 10,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.minlength),\n      args: {\n        label: 'Textfield Min Length',\n        minlength: 10,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.pattern),\n      args: {\n        label: 'Textfield Pattern',\n        pattern: '[0-9]{3}',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.autocomplete),\n      args: {\n        label: 'Textfield Autocomplete',\n        autocomplete: 'on',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.multiple),\n      args: {\n        label: 'Textfield Multiple',\n        type: 'email',\n        multiple: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: 'leadingInputSlot',\n      description:\n        'Content to be placed before the input text, within the input container.',\n      args: {\n        label: 'Leading Input',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-badge slot=\"leading-input\" label=\"test\" dismissible></nv-badge>\n        </nv-fieldtext>\n      ),\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-fieldtext data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtext>\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-fieldtext data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldtext>\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-fieldtext data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldtext>\n      ),\n    },\n    {\n      name: 'beforeInputSlot',\n      description:\n        'Content to be placed before the input text, outside the input container.',\n      args: {\n        label: 'Before Input Slot',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n        </nv-fieldtext>\n      ),\n    },\n    {\n      name: 'afterInputSlot',\n      description:\n        'Content to be placed after the input text, outside the input container.',\n      args: {\n        label: 'After Input Slot',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-button slot=\"after-input\">After Input Slot</nv-button>\n        </nv-fieldtext>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtextDocs;\n"]}