@nova-design-system/nova-webcomponents 3.0.0-beta.45 → 3.0.0-beta.46

package/dist/native/p-ecc28398.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvFieldpasswordCss","NvFieldpasswordStyle0","NvFieldpassword","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","mode","autocomplete","hidePasswordIcon","showPassword","showPasswordState","autofocus","handleInputContainerClick","inputElement","focus","togglePasswordVisibility","handleInput","event","input","target","value","valueChanged","emit","handleShowPasswordChange","newValue","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","type","inputMode","maxlength","minlength","pattern","readOnly","onInput","size","emphasis","toString","description","errorDescription","hidden"],"sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldpassword {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      position: relative;\n\n      input {\n        @include form-field-input();\n      }\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input 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-fieldpassword',\n  styleUrl: 'nv-fieldpassword.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldpassword {\n  @Element() el: HTMLNvFieldpasswordElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input 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 inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input 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 text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input 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 input’s 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   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. 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 input 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 type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input 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 input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the password\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the input field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their input within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * input field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * Set rules for how the input should be formatted. For example, you can\n   * require that a phone number includes only digits or that an email address\n   * has the correct format. If users don’t follow these rules, they’ll get a\n   * prompt to correct their input on form submission.\n   * the rules are applied to the input value via regexes.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * Defines the type of the input.\n   * @default 'text'\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'text' | 'number' = 'text';\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Hide the button to show/hide the password.\n   */\n  @Prop({ reflect: true })\n  readonly hidePasswordIcon: boolean = false;\n\n  /**\n   * Show/hide the password programmatically.\n   */\n  @Prop({ reflect: true })\n  readonly showPassword: boolean = false;\n\n  /**\n   * Defines whether the password is visible or not.\n   */\n  @State()\n  showPasswordState: boolean = this.showPassword;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  @Watch('showPassword')\n  handleShowPasswordChange(newValue: boolean) {\n    this.showPasswordState = newValue;\n  }\n\n  private togglePasswordVisibility = () => {\n    this.showPasswordState = !this.showPasswordState;\n  };\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value; // Update the input value without worrying about the space\n    this.valueChanged.emit(input.value);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              autofocus={this.autofocus}\n              autocomplete={this.autocomplete}\n              placeholder={this.placeholder}\n              name={this.name}\n              type={this.showPasswordState ? 'text' : 'password'}\n              inputMode={this.mode}\n              value={this.value}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            {(this.success || this.error) && (\n              <nv-icon\n                name={this.success ? 'circle-check' : 'alert-circle'}\n                class=\"validation\"\n                size=\"md\"\n              />\n            )}\n\n            {!this.hidePasswordIcon && (\n              <nv-iconbutton\n                name={this.showPasswordState ? 'eye' : 'eye-off'}\n                size=\"md\"\n                emphasis=\"lower\"\n                onClick={this.togglePasswordVisibility}\n                aria-label={\n                  this.showPasswordState ? 'Hide password' : 'Show password'\n                }\n                aria-pressed={this.showPasswordState.toString()}\n              />\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\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,mpKAC3B,MAAAC,EAAeD,E,MC2BFE,EAAe,MAN5B,WAAAC,CAAAC,G,qDAoBWC,KAAAC,QAAkBC,IAkDlBF,KAAAG,SAAoB,MAQpBH,KAAAI,SAAoB,MAOpBJ,KAAAK,SAAoB,MAQpBL,KAAAM,MAAiB,MAejBN,KAAAO,QAAmB,MAiCnBP,KAAAQ,KAA0B,OAS1BR,KAAAS,aAA2C,MAM3CT,KAAAU,iBAA4B,MAM5BV,KAAAW,aAAwB,MAMjCX,KAAAY,kBAA6BZ,KAAKW,aASzBX,KAAAa,UAAqB,MAiBtBb,KAAAc,0BAA4B,KAClCd,KAAKe,aAAaC,OAAO,EAQnBhB,KAAAiB,yBAA2B,KACjCjB,KAAKY,mBAAqBZ,KAAKY,iBAAiB,EAG1CZ,KAAAkB,YAAeC,IACrB,MAAMC,EAAQD,EAAME,OACpBrB,KAAKsB,MAAQF,EAAME,MACnBtB,KAAKuB,aAAaC,KAAKJ,EAAME,MAAM,C,CAXrC,wBAAAG,CAAyBC,GACvB1B,KAAKY,kBAAoBc,C,CAiB3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD9B,KAAK+B,OAAS/B,KAAKgC,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAASlC,KAAKC,SACnB2B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASnC,KAAK+B,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iBAEXP,EAAA,OAAAE,IAAA,2CAAKM,MAAM,kBAAkBC,QAASrC,KAAKc,2BACzCc,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAEXP,EAAA,SAAAE,IAAA,2CACEQ,GAAItC,KAAKC,QACTsC,IAAKC,GAAMxC,KAAKe,aAAeyB,EAC/B3B,UAAWb,KAAKa,UAChBJ,aAAcT,KAAKS,aACnBgC,YAAazC,KAAKyC,YAClBN,KAAMnC,KAAKmC,KACXO,KAAM1C,KAAKY,kBAAoB,OAAS,WACxC+B,UAAW3C,KAAKQ,KAChBc,MAAOtB,KAAKsB,MACZjB,SAAUL,KAAKK,SACfuC,UAAW5C,KAAK4C,UAChBC,UAAW7C,KAAK6C,UAChBC,QAAS9C,KAAK8C,QACd3C,SAAUH,KAAKG,SACf4C,SAAU/C,KAAKI,SACf4C,QAAShD,KAAKkB,eAGdlB,KAAKO,SAAWP,KAAKM,QACrBsB,EAAA,WAAAE,IAAA,2CACEK,KAAMnC,KAAKO,QAAU,eAAiB,eACtC6B,MAAM,aACNa,KAAK,QAIPjD,KAAKU,kBACLkB,EAAA,iBAAAE,IAAA,2CACEK,KAAMnC,KAAKY,kBAAoB,MAAQ,UACvCqC,KAAK,KACLC,SAAS,QACTb,QAASrC,KAAKiB,yBAAwB,aAEpCjB,KAAKY,kBAAoB,gBAAkB,gBAAe,eAE9CZ,KAAKY,kBAAkBuC,cAK3CvB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGXnC,KAAKoD,aACLpD,KAAKgC,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAenC,KAAKoD,eAIjCpD,KAAKqD,kBACLrD,KAAKgC,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKwB,QAAStD,KAAKM,MAAO8B,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBnC,KAAKqD,mB","ignoreList":[]}

package/dist/native/p-f89b7d06.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,a as c}from"./p-ab002252.js";const r=class{constructor(e){a(this,e)}render(){return e(c,{key:"2152d749763187f6b423094fd7f9bffeea9e5581"},e("slot",{key:"101690ca4e853b28543796c5e74a38e142c38978",name:"header"}),e("slot",{key:"78ad0c0a78ad12418d3fcba33ae8ec476af8f6b9",name:"cell"}))}};export{r as nv_datagridcolumn};
-//# sourceMappingURL=p-f89b7d06.entry.js.map

package/dist/native/p-f89b7d06.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["NvDatagridcolumn","render","h","Host","key","name"],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot header - Defines how to render the header of the column.\n * @slot cell - Defines how to render every cell of the column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop({ reflect: true })\n  readonly header?: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop({ reflect: true })\n  readonly accessor!: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"header\"></slot>\n        <slot name=\"cell\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"wDAUaA,EAAgB,M,yBAoB3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,WACXH,EAAA,QAAAE,IAAA,2CAAMC,KAAK,S","ignoreList":[]}