@nova-design-system/nova-webcomponents 3.0.0 → 3.1.0

package/dist/native/p-49cac014.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,a as i,g as o}from"./p-ab002252.js";import{v as s}from"./p-f5ff676c.js";const l='nv-fieldselect{--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;max-width:480px}nv-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;display:flex;flex-grow:1;justify-content:center;align-items:center;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-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{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;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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)}';const n=l;const a=class{constructor(r){e(this,r);this.valueChanged=t(this,"valueChanged",7);this.computedDisplayValue="";this.internalReadonly=false;this.parsedOptions=[];this.inputId=s();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.multiple=false;this.value="";this.displayValue=false;this.autofocus=false;this.fluid=false;this.handleSelectChange=e=>{const t=e.target;let r=Array.from(t.selectedOptions).map((e=>e.value));if(!this.multiple){r=r.slice(0,1)}this.value=this.multiple?r.join(", "):r[0]||"";this.valueChanged.emit(this.value);this.setFormValue()};this.handleSelectContainerClick=()=>{if(!this.internalReadonly&&this.selectElement){this.selectElement.focus()}}}updateDisplayValueWatcher(e){this.updateDisplayValue();if(this.selectElement){const t=e.split(",").map((e=>e.trim()));const r=this.selectElement.options;if(r){Array.from(r).forEach((e=>{e.selected=this.multiple?t.includes(e.value):e.value===t[0]}));if(!this.multiple){this.selectElement.value=e}}else{this.selectElement.value=t[0]||""}}this.setFormValue()}handleDisplayValueChange(e){this.internalReadonly=e;if(this.readonly){this.internalReadonly=true}}handleReadonlyChange(e){this.internalReadonly=e;if(this.displayValue){this.internalReadonly=true}}handleOptionsChange(e){if(typeof e==="string"){try{const t=JSON.parse(e);this.parsedOptions=[...t];const r=t.find((e=>e.selected));if(r){this.value=r.value}}catch(e){console.error("Error parsing options:",e);this.parsedOptions=[]}}}updateDisplayValue(){if(this.internalReadonly&&!this.displayValue){if(this.multiple){const e=this.value.split(",").map((e=>e.trim())).map((e=>this.getLabelFromId(e)||"")).filter((e=>e!==""));this.computedDisplayValue=e.join(", ")||""}else{this.computedDisplayValue=this.getLabelFromId(this.value)||""}}else if(this.internalReadonly&&this.displayValue){this.computedDisplayValue=this.value||""}}getLabelFromId(e){this.ensureSelectElement();if(!this.selectElement){return""}const t=this.selectElement.options;if(t){const r=Array.from(t).find((t=>t.value===e));return r?r.textContent.trim()||"":""}else{return""}}setFormValue(){this.internals.setFormValue(this.value)}ensureSelectElement(){if(!this.selectElement){this.selectElement=this.el.querySelector("select")}}componentWillRender(){this.updateDisplayValue();if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}componentWillLoad(){this.internalReadonly=this.readonly;if(this.displayValue){this.internalReadonly=true}if("attachInternals"in this.el){this.internals=this.el.attachInternals()}else{this.internals={setFormValue:e=>{const t=this.el.closest("form");if(t){const r=document.createElement("input");r.type="hidden";r.name=this.name;r.value=e;t.appendChild(r)}}}}if(this.multiple&&typeof this.value!=="string"){this.value=""}if(this.options){this.handleOptionsChange(this.options)}}componentDidLoad(){this.updateDisplayValue();if(this.selectElement){if(!this.multiple){this.selectElement.value=this.value}const e=this.multiple?this.value.split(",").map((e=>e.trim())):[this.value];const t=this.selectElement.options;if(t){Array.from(t).forEach((t=>{t.selected=this.multiple?e.includes(t.value):t.value===e[0]}))}else{this.selectElement.value=e[0]||""}}this.setFormValue()}render(){return r(i,{key:"06d38dd360011d4310d1c63851dc254e8ae47411"},(this.label||this.el.querySelector('[slot="label"]'))&&r("label",{key:"a0e46209c73e704d8d0f630baace2b1ce0eaed9c",htmlFor:this.inputId},r("slot",{key:"6a43c979383647415044931d7a4e4d3a24f65921",name:"label"},this.label)),r("div",{key:"f2cee6021f85e64bd9d73d984e208903e3fda4c7",class:"select-wrapper"},r("slot",{key:"cae1c527e55c18f3e54d9c73390d6f17ccebce77",name:"before-input"}),r("div",{key:"acb5dcbea269eb7dca558942f36b05c552924cbc",class:"select-container",onClick:this.handleSelectContainerClick},r("slot",{key:"e5c2a508a1297796f2693c76338c5b5f8e3e149e",name:"leading-input"}),this.internalReadonly&&r("input",{key:"28c38079050912f7d3b744de66ed48351dd890c3",id:this.inputId+"-readonly",type:"text",value:this.computedDisplayValue,readonly:true,class:"readonly-input","aria-readonly":"true","aria-label":this.label,"aria-describedby":this.error?`${this.inputId}-error`:`${this.inputId}-description`}),r("select",{key:"c409a9e0a26797981640092eb67b949c7d8f0cff",id:this.inputId,ref:e=>this.selectElement=e,name:this.name,autofocus:this.autofocus,disabled:this.disabled,required:this.required,multiple:this.multiple,onChange:this.handleSelectChange,class:this.internalReadonly?"hidden":"","aria-label":this.label,"aria-describedby":this.error?`${this.inputId}-error`:`${this.inputId}-description`},this.parsedOptions.length>0?this.parsedOptions.map((e=>r("option",{value:e.value,selected:e.selected,disabled:e.disabled},e.label))):r("slot",null)),r("div",{key:"a2402ea8d832e5612510dce7a3f50148b4edf39f",class:"select-icons"},this.error&&r("nv-icon",{key:"e291bff25fa6f06d3b27c3aaa805b46f674e1614",name:"alert-circle",class:"validation",size:"md"}),this.success&&r("nv-icon",{key:"ce98cb12347722926677d9c3fc6f02e35a9c84e4",name:"circle-check",class:"validation",size:"md"}),!this.multiple&&r("nv-iconbutton",{key:"e7fe760a5fa84ab0548ebd736a44da04908a4c07",name:"chevron-down",size:"md",emphasis:"lower",tabindex:-1}))),r("slot",{key:"d6253e2d56d4095bbe9ab12ca34ff28e06bd6b6d",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&r("div",{key:"703ad3ad8538ceab3c9eb03ae90c3552e1b6bf23",class:"description",id:`${this.inputId}-description`},r("slot",{key:"010bbb23d2b947ed55c219ac64532f7dfd4f43cc",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"70b696ec8f8badd4e064506eeba268755c9f2c09",class:"error-description",id:`${this.inputId}-error`},r("slot",{key:"2ec5af60d2fca9a8f5baf59406a4661905aeab05",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{value:["updateDisplayValueWatcher"],displayValue:["handleDisplayValueChange"],readonly:["handleReadonlyChange"],options:["handleOptionsChange"]}}};a.style=n;export{a as nv_fieldselect};
+//# sourceMappingURL=p-49cac014.entry.js.map

package/dist/native/p-49cac014.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldselectCss","NvFieldselectStyle0","NvFieldselect","constructor","hostRef","this","computedDisplayValue","internalReadonly","parsedOptions","inputId","uuidv4","disabled","readonly","required","error","success","multiple","value","displayValue","autofocus","fluid","handleSelectChange","event","select","target","selectedValues","Array","from","selectedOptions","map","option","slice","join","valueChanged","emit","setFormValue","handleSelectContainerClick","selectElement","focus","updateDisplayValueWatcher","newValue","updateDisplayValue","split","val","trim","options","forEach","selected","includes","handleDisplayValueChange","handleReadonlyChange","handleOptionsChange","parsedOpts","JSON","parse","selectedOption","find","opt","console","selectedLabels","key","getLabelFromId","filter","label","ensureSelectElement","textContent","internals","el","querySelector","componentWillRender","message","description","validation","errorDescription","componentWillLoad","attachInternals","formElement","closest","input","document","createElement","type","name","appendChild","componentDidLoad","v","render","h","Host","htmlFor","class","onClick","id","ref","onChange","length","size","emphasis","tabindex"],"sources":["src/components/nv-fieldselect/nv-fieldselect.scss?tag=nv-fieldselect","src/components/nv-fieldselect/nv-fieldselect.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\n@mixin form-field-select-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-select-container() {\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n\n  &:has(select:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-select() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  height: var(--form-field-line-height);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  box-sizing: content-box;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\n@mixin form-field-multi-select() {\n  height: 100%;\n  box-sizing: border-box;\n}\n\n@mixin form-field-select-icons() {\n  position: absolute;\n  right: 0;\n  top: 0;\n  pointer-events: none;\n}\n\nnv-fieldselect {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[display-value]:not([display-value='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  &[multiple]:not([multiple='false']) {\n    .select-wrapper > .select-container {\n      > .select-icons {\n        top: var(--form-field-padding-y);\n        right: var(--form-field-padding-x);\n      }\n      > select {\n        @include form-field-multi-select();\n      }\n    }\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .select-wrapper {\n    @include form-field-select-wrapper();\n\n    .select-container {\n      @include form-field-select-container();\n\n      > .select-icons {\n        @include form-field-select-icons();\n        > nv-iconbutton {\n          @include form-field-action();\n        }\n      }\n\n      input {\n        @include form-field-input();\n\n        &:read-only {\n          // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n          opacity: 0.5;\n          background-color: var(\n            --components-form-field-background-readonly,\n            rgb(0 0 0 / 10%)\n          );\n          border-color: var(--nv-field-border-readonly);\n        }\n      }\n\n      select {\n        @include form-field-select();\n\n        & option {\n          font-size: var(--form-field-font-size, 16px);\n          font-style: normal;\n          font-weight: 500;\n          line-height: var(--form-field-line-height, 24px);\n        }\n\n        &.hidden {\n          display: none;\n        }\n      }\n\n      nv-icon.readonly-icon {\n        @include form-field-icon();\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  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 DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\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({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  private computedDisplayValue: string = '';\n\n  @State()\n  private internalReadonly: boolean = false;\n\n  /**\n   * Options to display in the select. Can be passed as a JSON string.\n   * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Parsed options stored internally\n   */\n  @State()\n  private parsedOptions: Array<{\n    /**\n     * The label of the option\n     */\n    label: string;\n    /**\n     * The value of the option\n     */\n    value: string;\n    /**\n     * Whether the option is selected\n     */\n    selected?: boolean;\n    /**\n     * Whether the option is disabled\n     */\n    disabled?: boolean;\n  }> = [];\n\n  //#endregion STATES\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 inputId: 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  /**\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 a <select>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: 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  /**\n   * Parse options and update the internal state\n   * @param {string} newValue - The new value of options\n   */\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n\n        // Update the value if an option is pre-selected\n        const selectedOption = parsedOpts.find(opt => opt.selected);\n        if (selectedOption) {\n          this.value = selectedOption.value;\n        }\n      } catch (error) {\n        console.error('Error parsing options:', error);\n        this.parsedOptions = [];\n      }\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  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  /**\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 & {\n          /**\n           * Attach the element to the form internals.\n           * @returns {ElementInternals} - The element internals object.\n           */\n          attachInternals: () => ElementInternals;\n        }\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    // Parse initial options if present\n    if (this.options) {\n      this.handleOptionsChange(this.options);\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.inputId}>\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.inputId + '-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.inputId}-error`\n                    : `${this.inputId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.inputId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              autofocus={this.autofocus}\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.inputId}-error`\n                  : `${this.inputId}-description`\n              }\n            >\n              {this.parsedOptions.length > 0 ? (\n                this.parsedOptions.map(option => (\n                  <option\n                    value={option.value}\n                    selected={option.selected}\n                    disabled={option.disabled}\n                  >\n                    {option.label}\n                  </option>\n                ))\n              ) : (\n                <slot />\n              )}\n            </select>\n            <div class=\"select-icons\">\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n              {this.success && (\n                <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n              )}\n\n              {!this.multiple && (\n                <nv-iconbutton\n                  name=\"chevron-down\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  tabindex={-1}\n                />\n              )}\n            </div>\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.inputId}-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.inputId}-error`}>\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDERING\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-4d164ed6.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,a as s,g as n}from"./p-ab002252.js";import{a as o}from"./p-a5c8eee9.js";import{T as r}from"./p-f85c08f1.js";import{v as l}from"./p-f5ff676c.js";const d='nv-fieldtime{--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;max-width:480px}nv-fieldtime[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-fieldtime[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-fieldtime[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-fieldtime[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtime 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-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;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, 1);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .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-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-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-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .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-fieldtime .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)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;padding-right:2px;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);text-align:center;cursor:pointer;transition:background-color 0.2s;height:40px;border-radius:var(--list-dropdown-item-radius);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-list-dropdown-item-background-active);color:var(--components-list-dropdown-item-label-active);border-width:1px;border-style:solid;border-color:var(--components-list-dropdown-item-border-active)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}';const a=d;const h=class{constructor(i){e(this,i);this.valueChanged=t(this,"valueChanged",7);this.inputElements={};this.inputZeroAdded={};this.typeFocused=r.Hours;this.hours="00";this.minutes="00";this.seconds="00";this.inputId=l();this.readonly=false;this.disabled=false;this.required=false;this.success=false;this.error=false;this.format="HH:mm:ss";this.open=false;this.step=6e4;this.autofocus=false}handleOpenChanged(e){e.stopPropagation();this.open=e.detail}handleKeyDown(e){var t,i,s,n;if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}if(!this.popoverElement){console.warn("nv-fieldtime -> Popover element is not defined");return}const o=`.time-column.time-column-${this.typeFocused} div`;const l=Array.from(this.el.querySelectorAll(o));if(l.length===0){console.warn("nv-fieldtime -> No dropdown items found to navigate");return}let d=l.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();d=(d+1)%l.length;this.updateHighlightedItem(l,d)}else if(e.key==="ArrowUp"){e.preventDefault();d=(d-1+l.length)%l.length;this.updateHighlightedItem(l,d)}else if(e.key==="Enter"&&d>=0){e.preventDefault();l[d].click();if(this.typeFocused===r.Hours){(t=this.inputElements[r.Minutes])===null||t===void 0?void 0:t.focus();(i=this.inputElements[r.Minutes])===null||i===void 0?void 0:i.select()}else if(this.typeFocused===r.Minutes||this.typeFocused===r.Seconds){(s=this.inputElements[r.Seconds])===null||s===void 0?void 0:s.focus();(n=this.inputElements[r.Seconds])===null||n===void 0?void 0:n.select()}}else if(e.key==="Escape"){e.preventDefault();if(this.inputElements[r.Hours]){this.inputElements[r.Hours].blur()}}}handleValueChange(e){this.valueChanged.emit(e)}handleInputChange(e,t){const i=e.target;const s=i.value.replace(/[^0-9]/g,"");switch(t){case r.Hours:this.handleHoursChange(s,t);break;case r.Minutes:this.handleMinutesChange(s,t);break;case r.Seconds:this.handleSecondsChange(s,t);break}const n=this.reconstructTime();this.value=n}handleHoursChange(e,t){var i,s,n,o;const l=this.format.startsWith("HH");const d=l?24:12;let a=false;const h=this.parseHour(this.max,this.format)||(this.format.startsWith("hh")?"12":"24");const f=this.parseHour(this.min,this.format)||"00";if(e.length===1){this.inputZeroAdded[t]=true;const i=e.padStart(2,"0");if(h&&parseInt(i,10)>parseInt(h,10)){if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";a=true}}else{if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours=i}}}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=false;const i=e.slice(1,3).padStart(2,"0");const s=parseInt(i,10)||0;if(s>=d){if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";a=true}}else{if(h&&parseInt(i,10)>parseInt(h,10)){if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";a=true}}else{if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours=i}}}}else if(e.length>2){if(e.startsWith("00")){this.inputZeroAdded[t]=true;const i=e.slice(1,3).padStart(2,"0");if(h&&parseInt(i,10)>parseInt(h,10)){if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";a=true}}else{if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours=i}}}else{const t=e.slice(1,3).padStart(2,"0");const i=parseInt(t,10)||0;if(i>=d){if(f&&parseInt(t,10)<parseInt(f,10)){this.hours=f;a=true}else{this.hours="00";a=true}}else{if(h&&i>parseInt(h,10)){if(f&&parseInt(t,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";a=true}}else{if(f&&i<parseInt(f,10)){this.hours=f}else{this.hours=i.toString()}}}}}else{const t=e.padStart(2,"0");const i=parseInt(t,10)||0;if(i>=d){if(f&&parseInt(t,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";a=true}}else{if(h&&i>parseInt(h,10)){this.hours="00";a=true}else{if(f&&i<parseInt(f,10)){this.hours=f}else{this.hours=i.toString()}}}}if(this.hours.length===2&&!this.inputZeroAdded[t]&&!a){(i=this.inputElements[r.Minutes])===null||i===void 0?void 0:i.focus();(s=this.inputElements[r.Minutes])===null||s===void 0?void 0:s.select()}else if(a){(n=this.inputElements[r.Hours])===null||n===void 0?void 0:n.focus();(o=this.inputElements[r.Hours])===null||o===void 0?void 0:o.select()}}handleMinutesChange(e,t){var i,s,n,o,l,d;const a=60;let h=false;const f=(i=this.parseMinute(this.min))!==null&&i!==void 0?i:0;const c=(s=this.parseMinute(this.max))!==null&&s!==void 0?s:59;if(e.length===1){this.inputZeroAdded[t]=true;const i=e.padStart(2,"0");if(c&&parseInt(i,10)>c){if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i}}}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=false;const i=e.slice(1,3).padStart(2,"0");const s=parseInt(i,10)||0;if(s>=a){if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(c&&s>c){if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(f&&s<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i}}}}else if(e.length>2){if(e.startsWith("00")){this.inputZeroAdded[t]=true;const i=e.slice(1,3).padStart(2,"0");if(c&&parseInt(i,10)>c){if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i}}}else{const t=e.slice(1,3).padStart(2,"0");const i=parseInt(t,10)||0;if(i>=a){if(f&&parseInt(t,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(c&&i>c){if(f&&parseInt(t,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(f&&i<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i.toString()}}}}}else{const t=e.padStart(2,"0");const i=parseInt(t,10)||0;if(i>=a){if(f&&parseInt(t,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(c&&i>c){if(f&&parseInt(t,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(f&&i<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i.toString()}}}}if(this.minutes.length===2&&!this.inputZeroAdded[t]&&!h){(n=this.inputElements[r.Seconds])===null||n===void 0?void 0:n.focus();(o=this.inputElements[r.Seconds])===null||o===void 0?void 0:o.select()}else if(h){(l=this.inputElements[r.Minutes])===null||l===void 0?void 0:l.focus();(d=this.inputElements[r.Minutes])===null||d===void 0?void 0:d.select()}}handleSecondsChange(e,t){var i,s,n,o;const l=60;let d=false;const a=(i=this.parseSecond(this.min))!==null&&i!==void 0?i:0;const h=(s=this.parseSecond(this.max))!==null&&s!==void 0?s:59;if(e.length===1){this.inputZeroAdded[t]=true;const i=e.padStart(2,"0");if(h&&parseInt(i,10)>h){if(a&&parseInt(i,10)<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds="00";d=true}}else{if(a&&parseInt(i,10)<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds=i}}}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=false;const i=e.slice(1,3).padStart(2,"0");const s=parseInt(i,10)||0;if(s>=l){if(a&&parseInt(i,10)<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds="00";d=true}}else{if(h&&s>h){if(a&&parseInt(i,10)<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds="00";d=true}}else{if(a&&s<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds=i}}}}else if(e.length>2){const t=e.slice(1,3).padStart(2,"0");const i=parseInt(t,10)||0;if(i>=l){if(a&&parseInt(t,10)<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds="00";d=true}}else{if(h&&i>h){if(a&&parseInt(t,10)<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds="00";d=true}}else{if(a&&i<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds=i.toString()}}}}else{const t=e.padStart(2,"0");const i=parseInt(t,10)||0;if(i>=l){if(a&&parseInt(t,10)<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds="00";d=true}}else{if(h&&i>h){if(a&&parseInt(t,10)<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds="00";d=true}}else{if(a&&i<a){this.seconds=a.toString().padStart(2,"0")}else{this.seconds=i.toString()}}}}if(d){(n=this.inputElements[r.Seconds])===null||n===void 0?void 0:n.focus();(o=this.inputElements[r.Seconds])===null||o===void 0?void 0:o.select()}}parseTime(e){if(!e){return}const t=e.replace(/[^0-9]/g,"").padStart(6,"0");const i=t.slice(0,2);const s=t.slice(2,4);const n=t.slice(4,6);const o=this.parseHour(this.min,this.format)||i;const r=this.parseMinute(this.min)||s;const l=this.parseSecond(this.min)||n;this.hours=o.padStart(2,"0");this.minutes=r.toString().padStart(2,"0");this.seconds=l.toString().padStart(2,"0")}reconstructTime(){if(this.format==="HH"||this.format==="hh"){return this.hours}else if(this.format==="HH:mm"||this.format==="hh:mm"){return`${this.hours}:${this.minutes}`}else if(this.format==="HH:mm:ss"||this.format==="hh:mm:ss"){return`${this.hours}:${this.minutes}:${this.seconds}`}else{return`${this.hours}:${this.minutes}:${this.seconds}`}}handleFocus(e){var t,i,s,n;if(this.readonly||this.disabled){return}if(!this.open){this.open=true}if(((t=this.inputElements[e])===null||t===void 0?void 0:t.value.length)===0||((i=this.inputElements[e])===null||i===void 0?void 0:i.value)==="00"){(s=this.inputElements[e])===null||s===void 0?void 0:s.focus();(n=this.inputElements[e])===null||n===void 0?void 0:n.select()}this.typeFocused=e}HandleDropdownIconClick(){var e,t,i,s,n,o;if(this.disabled||this.readonly){return}if(this.open&&this.inputElements[r.Hours]){this.open=false}else if(this.open&&this.inputElements[r.Minutes]){this.open=false}else if(this.open&&this.inputElements[r.Seconds]){this.open=false}else if(!this.open&&this.inputElements[r.Hours]){(e=this.inputElements[r.Hours])===null||e===void 0?void 0:e.focus();(t=this.inputElements[r.Hours])===null||t===void 0?void 0:t.select()}else if(!this.open&&this.inputElements[r.Minutes]){(i=this.inputElements[r.Minutes])===null||i===void 0?void 0:i.focus();(s=this.inputElements[r.Minutes])===null||s===void 0?void 0:s.select()}else if(!this.open&&this.inputElements[r.Seconds]){(n=this.inputElements[r.Seconds])===null||n===void 0?void 0:n.focus();(o=this.inputElements[r.Seconds])===null||o===void 0?void 0:o.select()}else{console.warn("nv-fieldtime -> No input elements found to focus or to blur")}}updateHighlightedItem(e,t){e.forEach(((e,i)=>{if(i===t){e.classList.add("highlighted");e.setAttribute("tabindex","0");e.focus();e.scrollIntoView({block:"nearest"})}else{e.classList.remove("highlighted");e.setAttribute("tabindex","-1")}}))}handleTimeOptionClick(e,t){const i=parseInt(e.target.textContent||"0",10);if(t===r.Hours){this.hours=i.toString().padStart(2,"0")}else if(t===r.Minutes){this.minutes=i.toString().padStart(2,"0")}else if(t===r.Seconds){this.seconds=i.toString().padStart(2,"0")}const s=this.reconstructTime();this.value=s}handleInputBlur(){setTimeout((()=>{if(!this.el.contains(document.activeElement)){if(this.open){this.open=false}}}),150)}handleClickOutside(e){const t=e.target;if(this.el.contains(t)||Object.values(this.inputElements).some((e=>e.contains(t)))){return}if(this.open){this.open=false}}handleScroll(e,t){const i=e.target;const s=i.scrollTop;const n=i.clientHeight;const o=i.scrollHeight;const r=40;const l=this.generateTimeOptions(t);const d=l.length*r;if(s+n>=o-r||s<=0){i.scrollTop=d}}generateTimeOptions(e){const t=this.step/1e3;if(t===0){return["00"]}switch(e){case r.Hours:return this.generateHourOptions(t);case r.Minutes:return this.generateMinuteOptions(t);case r.Seconds:return this.generateSecondOptions(t);default:return[]}}generateHourOptions(e){const t=Math.max(1,Math.floor(e/3600));const i=this.parseHour(this.max,this.format)||(this.format.startsWith("hh")?"12":"24");const s=this.parseHour(this.min,this.format)||"00";const n=parseInt(i,10);const o=parseInt(s,10);const r=[];for(let e=o;e<n;e+=t){r.push(e.toString().padStart(2,"0"))}return r}parseHour(e,t){if(!e)return null;const[i]=e.split(":");const s=parseInt(i,10);if(isNaN(s))return null;if(t.startsWith("hh"))return s>0&&s<=12?i.padStart(2,"0"):null;return s>=0&&s<=24?i.padStart(2,"0"):null}generateMinuteOptions(e){var t,i;const s=Math.max(1,Math.floor(e%3600/60));const n=(t=this.parseMinute(this.min))!==null&&t!==void 0?t:0;const o=(i=this.parseMinute(this.max))!==null&&i!==void 0?i:59;if(n===0&&o===0)return["00"];const r=[];for(let e=n;e<=o;e+=s){r.push(e.toString().padStart(2,"0"))}return r}parseMinute(e){if(!e)return null;const t=e.split(":");if(t.length<2)return null;const i=parseInt(t[1],10);return isNaN(i)||i<0||i>=60?null:i}generateSecondOptions(e){var t,i;const s=Math.max(1,e%60);const n=(t=this.parseSecond(this.min))!==null&&t!==void 0?t:0;const o=(i=this.parseSecond(this.max))!==null&&i!==void 0?i:59;if(n===0&&o===0)return["00"];const r=[];for(let e=n;e<=o;e+=s){r.push(e.toString().padStart(2,"0"))}return r}parseSecond(e){if(!e)return null;const t=e.split(":");if(t.length<3)return null;const i=parseInt(t[2],10);return isNaN(i)||i<0||i>=60?null:i}generateInfiniteTimeOptions(e){const t=this.generateTimeOptions(e);const i=t.length;const s=Math.ceil(300/i);return Array(s).fill(t).flat()}getCurrentTime(){const e=new Date;return e.toLocaleTimeString()}updateColumnHighlight(e,t){const i=Array.from(this.el.querySelectorAll(e));const s=i.findIndex((e=>e.textContent===t));this.updateHighlightedItem(i,s)}handleHostClick(e){var t,i;if(this.disabled||this.readonly){return}const s=e.target;if(s.closest("nv-iconbutton")){return}if(!this.open){if(this.inputElements){(t=this.inputElements[r.Hours])===null||t===void 0?void 0:t.focus();(i=this.inputElements[r.Hours])===null||i===void 0?void 0:i.select()}e.preventDefault()}}componentWillLoad(){document.addEventListener("click",this.handleClickOutside.bind(this));if(this.value){this.parseTime(this.value)}else{const e=this.parseHour(this.min,this.format)||"00";const t=this.parseMinute(this.min)||0;const i=this.parseSecond(this.min)||0;this.hours=e.padStart(2,"0");this.minutes=t.toString().padStart(2,"0");this.seconds=i.toString().padStart(2,"0")}}connectedCallback(){document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside.bind(this))}componentDidLoad(){if(!this.value){const e=this.getCurrentTime();let[t,i,s]=e.split(":");let n,o;if(s.includes(" ")){[n,o]=s.split(" ")}else{n=s}let r=parseInt(t,10);if(o){if(o==="PM"&&r<12){r+=12}else if(o==="AM"&&r===12){r=0}}if(this.format.startsWith("hh")){if(r===0){t="12"}else if(r>12){t=(r-12).toString()}else{t=r.toString()}}else{t=r.toString()}t=t.padStart(2,"0");i=i.padStart(2,"0");n=n.padStart(2,"0");const l=`.time-column.time-column-hours div`;this.updateColumnHighlight(l,t);const d=`.time-column.time-column-minutes div`;this.updateColumnHighlight(d,i);const a=`.time-column.time-column-seconds div`;this.updateColumnHighlight(a,n)}}RenderTimeOptionsColumn(e){return i("div",{class:`time-column time-column-${e}`,onScroll:t=>this.handleScroll(t,e)},this.generateInfiniteTimeOptions(e).map(((t,s)=>i("div",{class:{"time-option":true,selected:e===r.Hours&&t===this.hours||e===r.Minutes&&t===this.minutes||e===r.Seconds&&t===this.seconds},key:`${t}-${s}`,onClick:t=>this.handleTimeOptionClick(t,e)},t))))}render(){return i(s,{key:"35103e6a56955d04ad395b286aaaeaca1493a20e",onclick:e=>this.handleHostClick(e)},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{key:"38ffb7ddf37dc7d3f355975c3ae348f5581d384a",htmlFor:this.inputId},i("slot",{key:"1c41f684aaefd52ae677837ffd55a9895b95524a",name:"label"},this.label)),i("nv-popover",{key:"325272affdd386690964974b73579f7314e8b464",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{key:"707b2fcd563ea92b818bf5599f8f68f7425fbdc6",class:"input-wrapper",slot:"trigger"},i("slot",{key:"813597cca8808f9f298eadc8a0dde73714bfcff3",name:"before-input"}),i("div",{key:"47f26e41427825610e37380c929b24dcddb2dc62",class:"input-container"},i("slot",{key:"fd17ba01bb66bfcb9972a8145f31f94c8ef21fe1",name:"leading-input"}),o(this.format,"HH")&&[i("input",{key:"759608690e370bdb8a61f2d622133558c77c6d0c",ref:e=>this.inputElements[r.Hours]=e,type:"number",autofocus:this.autofocus,class:"time-input",pattern:"[0-9]*",maxlength:"3",value:this.hours,onInput:e=>this.handleInputChange(e,r.Hours),placeholder:this.format.includes("hh")?"hh":"HH",inputMode:"numeric",onFocus:()=>this.handleFocus(r.Hours),name:this.name?`${r.Hours}-${this.name}`:r.Hours,id:this.inputId,readonly:this.readonly,disabled:this.disabled,required:this.required,onKeyDown:e=>this.handleKeyDown(e),onBlur:()=>this.handleInputBlur()})],this.format.includes("mm")&&[i("span",{key:"a377170431ef27f284d368e56d6236c64067e0ca"},":"),i("input",{key:"6cc8faeed02d689a1353966888b0b4dedd8ecb98",ref:e=>this.inputElements[r.Minutes]=e,type:"number",autofocus:this.autofocus,class:"time-input",pattern:"[0-9]*",maxlength:"3",value:this.minutes,onInput:e=>this.handleInputChange(e,r.Minutes),placeholder:"mm",inputMode:"numeric",onFocus:()=>this.handleFocus(r.Minutes),name:this.name?`${r.Minutes}-${this.name}`:r.Minutes,id:`${this.inputId}-minutes`,readonly:this.readonly,disabled:this.disabled,required:this.required,onKeyDown:e=>this.handleKeyDown(e),onBlur:()=>this.handleInputBlur()})],this.format.includes("ss")&&[i("span",{key:"13da159f3ff13969d501968881569658d06c50fb"},":"),i("input",{key:"cbac3e8a980397c8f32e1f1056aec8b7aab3be0b",ref:e=>this.inputElements[r.Seconds]=e,type:"number",autofocus:this.autofocus,class:"time-input",pattern:"[0-9]*",maxlength:"3",value:this.seconds,onInput:e=>this.handleInputChange(e,r.Seconds),placeholder:"ss",inputMode:"numeric",onFocus:()=>this.handleFocus(r.Seconds),name:this.name?`${r.Seconds}-${this.name}`:r.Seconds,id:`${this.inputId}-seconds`,readonly:this.readonly,disabled:this.disabled,required:this.required,onKeyDown:e=>this.handleKeyDown(e),onBlur:()=>this.handleInputBlur()})],i("nv-iconbutton",{key:"a1a59be923f3529d1d2dbad02b322306fdd6dcb6",name:this.open?"chevron-top":"chevron-down",size:"md",emphasis:"lower","aria-label":this.open?"Hide time picker":"Show time picker","aria-pressed":this.open.toString(),onClick:()=>this.HandleDropdownIconClick()}),this.error&&i("nv-icon",{key:"7f51d7b568096e6aee23560d5fe6e52018711aa3",name:"alert-circle",class:"validation",size:"sm"}),this.success&&i("nv-icon",{key:"1c94f8138e808ec3a7690079dc8c8ea210ebb1da",name:"circle-check",class:"validation",size:"sm"})),i("slot",{key:"7aa247775d7f59eb452fa9f4b511b3a92c88b8fe",name:"after-input"})),i("div",{key:"b4dab6c5161e69b217748916026f41d9157bb786",class:"time-dropdown",slot:"content"},i("div",{key:"6d865e6aa3b4d278e4ebff064d417ea42c1d4fe1",class:"time-columns"},o(this.format,"HH")&&this.RenderTimeOptionsColumn(r.Hours),this.format.includes("mm")&&this.RenderTimeOptionsColumn(r.Minutes),this.format.includes("ss")&&this.RenderTimeOptionsColumn(r.Seconds)))),(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{key:"03922dee26128b93d4e8d7f936ada9d3981d1e36",class:"description"},i("slot",{key:"4aa71a2b10e488c845106aace0a972df790eb450",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{key:"657232381bcc3644eae65a1beae302c8136b9e8b",hidden:!this.error,class:"error-description"},i("slot",{key:"0559dbdb62c70b19c73839a2795dc23fa97eddb1",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{value:["handleValueChange"]}}};h.style=a;export{h as nv_fieldtime};
+//# sourceMappingURL=p-4d164ed6.entry.js.map

package/dist/native/p-4d164ed6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldtimeCss","NvFieldtimeStyle0","NvFieldtime","constructor","hostRef","this","inputElements","inputZeroAdded","typeFocused","TimeType","Hours","hours","minutes","seconds","inputId","uuidv4","readonly","disabled","required","success","error","format","open","step","autofocus","handleOpenChanged","event","stopPropagation","detail","handleKeyDown","key","preventDefault","popoverElement","console","warn","stringSelector","items","Array","from","el","querySelectorAll","length","currentIndex","findIndex","item","classList","contains","updateHighlightedItem","click","_a","Minutes","focus","_b","select","Seconds","_c","_d","blur","handleValueChange","newValue","valueChanged","emit","handleInputChange","e","type","inputElement","target","inputValue","value","replace","handleHoursChange","handleMinutesChange","handleSecondsChange","currentValue","reconstructTime","isHHFormat","startsWith","maxHours","reputedToZero","maxHour","parseHour","max","minHour","min","newInputValue","padStart","parseInt","slice","parsedNewInputValue","toString","maxMinutes","minMinute","parseMinute","maxMinute","_e","_f","maxSeconds","minSecond","parseSecond","maxSecond","parseTime","timeString","cleanedTime","hour","minute","second","handleFocus","HandleDropdownIconClick","index","forEach","i","add","setAttribute","scrollIntoView","block","remove","handleTimeOptionClick","option","textContent","handleInputBlur","setTimeout","document","activeElement","handleClickOutside","Object","values","some","input","handleScroll","scrollTop","containerHeight","clientHeight","scrollHeight","itemHeight","options","generateTimeOptions","singleSetHeight","stepInSeconds","generateHourOptions","generateMinuteOptions","generateSecondOptions","hourStep","Math","floor","maxHourValue","minHourValue","push","hourStr","split","isNaN","minuteStep","parts","secondStep","generateInfiniteTimeOptions","totalOptions","repetitions","ceil","fill","flat","getCurrentTime","currentTime","Date","toLocaleTimeString","updateColumnHighlight","selector","x","handleHostClick","targetElement","closest","componentWillLoad","addEventListener","bind","connectedCallback","disconnectedCallback","removeEventListener","componentDidLoad","secondAmPm","amPm","includes","parsedHour","hourSelector","minuteSelector","secondSelector","RenderTimeOptionsColumn","h","class","onScroll","map","selected","onClick","render","Host","onclick","label","querySelector","htmlFor","name","ref","triggerMode","placement","slot","startsWithIgnoreCase","pattern","maxlength","onInput","placeholder","inputMode","onFocus","id","onKeyDown","onBlur","size","emphasis","description","errorDescription","hidden"],"sources":["src/components/nv-fieldtime/styles/nv-fieldtime.scss?tag=nv-fieldtime","src/components/nv-fieldtime/nv-fieldtime.tsx"],"sourcesContent":["@use './mixins' as *;\n@import '../../../styles/form-field';\n\nnv-fieldtime {\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  nv-popover {\n    @include apply-popover-style;\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    width: 100%;\n  }\n\n  .input-container {\n    @include form-field-input-container();\n    @include flex-container(flex-start);\n    position: relative;\n    width: 100%;\n    min-height: 40px;\n    gap: 0;\n    padding-left: var(--form-field-padding-x);\n\n    input.time-input {\n      @include form-field-input();\n      @include apply-input-styles();\n    }\n\n    span {\n      width: 100%;\n      text-align: center;\n      min-width: 24px;\n      flex: 0 0 24px;\n      padding: 0 4px;\n      color: var(--components-form-field-content-text);\n    }\n\n    > nv-iconbutton {\n      @include form-field-action();\n      margin-left: auto;\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n      @include icon-position(50px);\n    }\n\n    &:focus,\n    &:focus-within {\n      @include apply-focus-styles;\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  hr {\n    border: none;\n    border-top: 1px solid var(--dropdown-divider-color, #ccc);\n    margin: 0.5rem 0;\n  }\n\n  .time-dropdown {\n    width: 100%;\n\n    .time-columns {\n      @include flex-container;\n\n      .time-column {\n        flex: 1;\n        text-align: center;\n        padding-right: 2px;\n        @include scrollable(200px);\n\n        &:last-child {\n          border-right: none;\n        }\n\n        .time-option {\n          padding: var(--list-dropdown-item-padding-y)\n            var(--list-dropdown-item-padding-x);\n          text-align: center;\n          cursor: pointer;\n          transition: background-color 0.2s;\n          height: 40px;\n          border-radius: var(--list-dropdown-item-radius);\n          @include flex-container(center);\n\n          &:hover {\n            background-color: var(\n              --components-list-dropdown-item-background-hover\n            );\n            color: var(--components-list-dropdown-item-label-hover);\n          }\n\n          @include state-focus(\n            var(--components-list-dropdown-item-background-hover),\n            var(--components-list-dropdown-item-label-hover)\n          );\n\n          &.selected {\n            background-color: var(\n              --components-list-dropdown-item-background-active\n            );\n            color: var(--components-list-dropdown-item-label-active);\n            @include bordered-element(\n              1px,\n              var(--components-list-dropdown-item-border-active)\n            );\n          }\n\n          &.highlighted {\n            background-color: var(\n              --components-list-dropdown-item-background-hover\n            );\n            color: var(--components-menu-contextual-item-content-hover);\n          }\n        }\n      }\n    }\n  }\n}\n","/* eslint-disable react/jsx-no-bind */\nimport {\n  Component,\n  Host,\n  h,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport { startsWithIgnoreCase } from '../../utils/string.utils';\nimport { TimeType } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\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 leading-input - Content to be placed before the input text, within the input container.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-fieldtime',\n  styleUrl: 'styles/nv-fieldtime.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldtime {\n  @Element() el: HTMLNvFieldtimeElement;\n\n  // Input elements for hours, minutes, and seconds\n  private inputElements: { [key: string]: HTMLInputElement } = {};\n\n  private inputZeroAdded: { [key: string]: boolean } = {};\n\n  private popoverElement!: HTMLNvPopoverElement;\n\n  private typeFocused: TimeType = TimeType.Hours;\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  hours: string = '00';\n  @State()\n  minutes: string = '00';\n  @State()\n  seconds: string = '00';\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The current value of the time input in the specified format.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * Lets you define the text that explains what users should enter in the time\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   * 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   * 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   * The disabled prop lets you turn off the input field so that users can't\n   * interact with 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   * 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   * 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.\n   */\n  @Prop({ reflect: true })\n  readonly name: 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   * 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 time\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Specifies the time format to be used.\n   * Available formats:\n   * - HH: 24-hour format (00-23)\n   * - HH:mm: 24-hour format with minutes (00:00-23:59)\n   * - HH:mm:ss: 24-hour format with minutes and seconds (00:00:00-23:59:59)\n   * - hh: 12-hour format (01-12)\n   * - hh:mm: 12-hour format with minutes (01:00-12:59)\n   * - hh:mm:ss: 12-hour format with minutes and seconds (01:00:00-12:59:59)\n   */\n  @Prop({ reflect: true })\n  readonly format: 'HH' | 'HH:mm' | 'HH:mm:ss' | 'hh' | 'hh:mm' | 'hh:mm:ss' =\n    'HH:mm:ss';\n\n  /**\n   * Add helpful hints or extra information under the time input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * State of the time picker popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * The step interval in milliseconds for time increments/decrements.\n   * This affects how the time changes when using arrow keys or spinners.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 60000; // In secondes\n\n  /**\n   * The maximum time value that can be selected.\n   */\n  @Prop({ reflect: true })\n  readonly max: string;\n\n  /**\n   * The minimum time value that can be selected.\n   */\n  @Prop({ reflect: true })\n  readonly min: string;\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   * Emit an event when the time value changes.\n   * The event detail contains the new time value (HH, HH:mm or HH:mm:ss).\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    // Stop propagation to prevent the event from affecting parent components like dialogs\n    event.stopPropagation();\n\n    // Update `open` based on the popover state\n    this.open = event.detail;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Verify if the popover element is defined\n    if (!this.popoverElement) {\n      console.warn('nv-fieldtime -> Popover element is not defined');\n      return;\n    }\n\n    const stringSelector = `.time-column.time-column-${this.typeFocused} div`;\n    const items = Array.from(\n      this.el.querySelectorAll<HTMLElement>(stringSelector),\n    );\n\n    // Verify if there are items to navigate\n    if (items.length === 0) {\n      console.warn('nv-fieldtime -> No dropdown items found to navigate');\n      return;\n    }\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex = (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex = (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Enter' && currentIndex >= 0) {\n      event.preventDefault();\n      items[currentIndex].click();\n\n      if (this.typeFocused === TimeType.Hours) {\n        this.inputElements[TimeType.Minutes]?.focus();\n        this.inputElements[TimeType.Minutes]?.select();\n      } else if (\n        this.typeFocused === TimeType.Minutes ||\n        this.typeFocused === TimeType.Seconds\n      ) {\n        this.inputElements[TimeType.Seconds]?.focus();\n        this.inputElements[TimeType.Seconds]?.select();\n      }\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n\n      if (this.inputElements[TimeType.Hours]) {\n        this.inputElements[TimeType.Hours].blur();\n      }\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInputChange(e: InputEvent, type: TimeType): void {\n    const inputElement = e.target as HTMLInputElement;\n    const inputValue = inputElement.value.replace(/[^0-9]/g, ''); // Only keep numeric input\n\n    // Update the time value based on the type\n    switch (type) {\n      case TimeType.Hours:\n        this.handleHoursChange(inputValue, type);\n        break;\n      case TimeType.Minutes:\n        this.handleMinutesChange(inputValue, type);\n        break;\n      case TimeType.Seconds:\n        this.handleSecondsChange(inputValue, type);\n        break;\n    }\n\n    // Reconstruct time from inputs\n    const currentValue = this.reconstructTime();\n\n    this.value = currentValue;\n  }\n\n  private handleHoursChange(inputValue: string, type: TimeType): void {\n    const isHHFormat = this.format.startsWith('HH');\n    const maxHours = isHHFormat ? 24 : 12;\n    let reputedToZero = false;\n    const maxHour =\n      this.parseHour(this.max, this.format) ||\n      (this.format.startsWith('hh') ? '12' : '24');\n    const minHour = this.parseHour(this.min, this.format) || '00';\n\n    if (inputValue.length === 1) {\n      this.inputZeroAdded[type] = true;\n\n      const newInputValue = inputValue.padStart(2, '0');\n\n      if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {\n        if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n          this.hours = minHour;\n        } else {\n          this.hours = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n          this.hours = minHour;\n        } else {\n          this.hours = newInputValue;\n        }\n      }\n    } else if (this.inputZeroAdded[type]) {\n      this.inputZeroAdded[type] = false;\n\n      const newInputValue = inputValue.slice(1, 3).padStart(2, '0');\n      const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n      if (parsedNewInputValue >= maxHours) {\n        if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n          this.hours = minHour;\n        } else {\n          this.hours = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {\n          if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n            this.hours = minHour;\n          } else {\n            this.hours = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n            this.hours = minHour;\n          } else {\n            this.hours = newInputValue;\n          }\n        }\n      }\n    } else if (inputValue.length > 2) {\n      if (inputValue.startsWith('00')) {\n        this.inputZeroAdded[type] = true;\n        const newInputValue = inputValue.slice(1, 3).padStart(2, '0');\n\n        if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {\n          if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n            this.hours = minHour;\n          } else {\n            this.hours = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n            this.hours = minHour;\n          } else {\n            this.hours = newInputValue;\n          }\n        }\n      } else {\n        const newInputValue = inputValue.slice(1, 3).padStart(2, '0');\n        const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n        if (parsedNewInputValue >= maxHours) {\n          if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n            this.hours = minHour;\n            reputedToZero = true;\n          } else {\n            this.hours = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (maxHour && parsedNewInputValue > parseInt(maxHour, 10)) {\n            if (\n              minHour &&\n              parseInt(newInputValue, 10) < parseInt(minHour, 10)\n            ) {\n              this.hours = minHour;\n            } else {\n              this.hours = '00';\n              reputedToZero = true;\n            }\n          } else {\n            if (minHour && parsedNewInputValue < parseInt(minHour, 10)) {\n              this.hours = minHour;\n            } else {\n              this.hours = parsedNewInputValue.toString();\n            }\n          }\n        }\n      }\n    } else {\n      const newInputValue = inputValue.padStart(2, '0');\n      const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n      if (parsedNewInputValue >= maxHours) {\n        if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {\n          this.hours = minHour;\n        } else {\n          this.hours = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (maxHour && parsedNewInputValue > parseInt(maxHour, 10)) {\n          this.hours = '00';\n          reputedToZero = true;\n        } else {\n          if (minHour && parsedNewInputValue < parseInt(minHour, 10)) {\n            this.hours = minHour;\n          } else {\n            this.hours = parsedNewInputValue.toString();\n          }\n        }\n      }\n    }\n\n    if (\n      this.hours.length === 2 &&\n      !this.inputZeroAdded[type] &&\n      !reputedToZero\n    ) {\n      this.inputElements[TimeType.Minutes]?.focus();\n      this.inputElements[TimeType.Minutes]?.select();\n    } else if (reputedToZero) {\n      this.inputElements[TimeType.Hours]?.focus();\n      this.inputElements[TimeType.Hours]?.select();\n    }\n  }\n\n  private handleMinutesChange(inputValue: string, type: TimeType): void {\n    const maxMinutes = 60;\n    let reputedToZero = false;\n    const minMinute = this.parseMinute(this.min) ?? 0;\n    const maxMinute = this.parseMinute(this.max) ?? 59;\n\n    if (inputValue.length === 1) {\n      this.inputZeroAdded[type] = true;\n\n      const newInputValue = inputValue.padStart(2, '0');\n\n      if (maxMinute && parseInt(newInputValue, 10) > maxMinute) {\n        if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n          this.minutes = minMinute.toString().padStart(2, '0');\n        } else {\n          this.minutes = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n          this.minutes = minMinute.toString().padStart(2, '0');\n        } else {\n          this.minutes = newInputValue;\n        }\n      }\n    } else if (this.inputZeroAdded[type]) {\n      this.inputZeroAdded[type] = false;\n\n      const newInputValue = inputValue.slice(1, 3).padStart(2, '0');\n      const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n      if (parsedNewInputValue >= maxMinutes) {\n        if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n          this.minutes = minMinute.toString().padStart(2, '0');\n        } else {\n          this.minutes = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (maxMinute && parsedNewInputValue > maxMinute) {\n          if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n            this.minutes = minMinute.toString().padStart(2, '0');\n          } else {\n            this.minutes = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (minMinute && parsedNewInputValue < minMinute) {\n            this.minutes = minMinute.toString().padStart(2, '0');\n          } else {\n            this.minutes = newInputValue;\n          }\n        }\n      }\n    } else if (inputValue.length > 2) {\n      if (inputValue.startsWith('00')) {\n        this.inputZeroAdded[type] = true;\n        const newInputValue = inputValue.slice(1, 3).padStart(2, '0');\n\n        if (maxMinute && parseInt(newInputValue, 10) > maxMinute) {\n          if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n            this.minutes = minMinute.toString().padStart(2, '0');\n          } else {\n            this.minutes = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n            this.minutes = minMinute.toString().padStart(2, '0');\n          } else {\n            this.minutes = newInputValue;\n          }\n        }\n      } else {\n        const newInputValue = inputValue.slice(1, 3).padStart(2, '0');\n        const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n        if (parsedNewInputValue >= maxMinutes) {\n          if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n            this.minutes = minMinute.toString().padStart(2, '0');\n          } else {\n            this.minutes = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (maxMinute && parsedNewInputValue > maxMinute) {\n            if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n              this.minutes = minMinute.toString().padStart(2, '0');\n            } else {\n              this.minutes = '00';\n              reputedToZero = true;\n            }\n          } else {\n            if (minMinute && parsedNewInputValue < minMinute) {\n              this.minutes = minMinute.toString().padStart(2, '0');\n            } else {\n              this.minutes = parsedNewInputValue.toString();\n            }\n          }\n        }\n      }\n    } else {\n      const newInputValue = inputValue.padStart(2, '0');\n      const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n      if (parsedNewInputValue >= maxMinutes) {\n        if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n          this.minutes = minMinute.toString().padStart(2, '0');\n        } else {\n          this.minutes = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (maxMinute && parsedNewInputValue > maxMinute) {\n          if (minMinute && parseInt(newInputValue, 10) < minMinute) {\n            this.minutes = minMinute.toString().padStart(2, '0');\n          } else {\n            this.minutes = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (minMinute && parsedNewInputValue < minMinute) {\n            this.minutes = minMinute.toString().padStart(2, '0');\n          } else {\n            this.minutes = parsedNewInputValue.toString();\n          }\n        }\n      }\n    }\n\n    if (\n      this.minutes.length === 2 &&\n      !this.inputZeroAdded[type] &&\n      !reputedToZero\n    ) {\n      this.inputElements[TimeType.Seconds]?.focus();\n      this.inputElements[TimeType.Seconds]?.select();\n    } else if (reputedToZero) {\n      this.inputElements[TimeType.Minutes]?.focus();\n      this.inputElements[TimeType.Minutes]?.select();\n    }\n  }\n\n  private handleSecondsChange(inputValue: string, type: TimeType): void {\n    const maxSeconds = 60;\n    let reputedToZero = false;\n    const minSecond = this.parseSecond(this.min) ?? 0;\n    const maxSecond = this.parseSecond(this.max) ?? 59;\n\n    if (inputValue.length === 1) {\n      this.inputZeroAdded[type] = true;\n      const newInputValue = inputValue.padStart(2, '0');\n\n      if (maxSecond && parseInt(newInputValue, 10) > maxSecond) {\n        if (minSecond && parseInt(newInputValue, 10) < minSecond) {\n          this.seconds = minSecond.toString().padStart(2, '0');\n        } else {\n          this.seconds = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (minSecond && parseInt(newInputValue, 10) < minSecond) {\n          this.seconds = minSecond.toString().padStart(2, '0');\n        } else {\n          this.seconds = newInputValue;\n        }\n      }\n    } else if (this.inputZeroAdded[type]) {\n      this.inputZeroAdded[type] = false;\n      const newInputValue = inputValue.slice(1, 3).padStart(2, '0');\n      const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n      if (parsedNewInputValue >= maxSeconds) {\n        if (minSecond && parseInt(newInputValue, 10) < minSecond) {\n          this.seconds = minSecond.toString().padStart(2, '0');\n        } else {\n          this.seconds = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (maxSecond && parsedNewInputValue > maxSecond) {\n          if (minSecond && parseInt(newInputValue, 10) < minSecond) {\n            this.seconds = minSecond.toString().padStart(2, '0');\n          } else {\n            this.seconds = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (minSecond && parsedNewInputValue < minSecond) {\n            this.seconds = minSecond.toString().padStart(2, '0');\n          } else {\n            this.seconds = newInputValue;\n          }\n        }\n      }\n    } else if (inputValue.length > 2) {\n      const newInputValue = inputValue.slice(1, 3).padStart(2, '0');\n      const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n      if (parsedNewInputValue >= maxSeconds) {\n        if (minSecond && parseInt(newInputValue, 10) < minSecond) {\n          this.seconds = minSecond.toString().padStart(2, '0');\n        } else {\n          this.seconds = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (maxSecond && parsedNewInputValue > maxSecond) {\n          if (minSecond && parseInt(newInputValue, 10) < minSecond) {\n            this.seconds = minSecond.toString().padStart(2, '0');\n          } else {\n            this.seconds = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (minSecond && parsedNewInputValue < minSecond) {\n            this.seconds = minSecond.toString().padStart(2, '0');\n          } else {\n            this.seconds = parsedNewInputValue.toString();\n          }\n        }\n      }\n    } else {\n      const newInputValue = inputValue.padStart(2, '0');\n      const parsedNewInputValue = parseInt(newInputValue, 10) || 0;\n\n      if (parsedNewInputValue >= maxSeconds) {\n        if (minSecond && parseInt(newInputValue, 10) < minSecond) {\n          this.seconds = minSecond.toString().padStart(2, '0');\n        } else {\n          this.seconds = '00';\n          reputedToZero = true;\n        }\n      } else {\n        if (maxSecond && parsedNewInputValue > maxSecond) {\n          if (minSecond && parseInt(newInputValue, 10) < minSecond) {\n            this.seconds = minSecond.toString().padStart(2, '0');\n          } else {\n            this.seconds = '00';\n            reputedToZero = true;\n          }\n        } else {\n          if (minSecond && parsedNewInputValue < minSecond) {\n            this.seconds = minSecond.toString().padStart(2, '0');\n          } else {\n            this.seconds = parsedNewInputValue.toString();\n          }\n        }\n      }\n    }\n\n    if (reputedToZero) {\n      this.inputElements[TimeType.Seconds]?.focus();\n      this.inputElements[TimeType.Seconds]?.select();\n    }\n  }\n\n  // Parse a continuous time string (e.g., \"123456\") into hours, minutes, and seconds\n  private parseTime(timeString: string): void {\n    if (!timeString) {\n      return;\n    }\n\n    const cleanedTime = timeString.replace(/[^0-9]/g, '').padStart(6, '0');\n    const hour = cleanedTime.slice(0, 2);\n    const minute = cleanedTime.slice(2, 4);\n    const second = cleanedTime.slice(4, 6);\n\n    const minHour = this.parseHour(this.min, this.format) || hour;\n    const minMinute = this.parseMinute(this.min) || minute;\n    const minSecond = this.parseSecond(this.min) || second;\n\n    this.hours = minHour.padStart(2, '0');\n    this.minutes = minMinute.toString().padStart(2, '0');\n    this.seconds = minSecond.toString().padStart(2, '0');\n  }\n\n  private reconstructTime(): string {\n    if (this.format === 'HH' || this.format === 'hh') {\n      return this.hours;\n    } else if (this.format === 'HH:mm' || this.format === 'hh:mm') {\n      return `${this.hours}:${this.minutes}`;\n    } else if (this.format === 'HH:mm:ss' || this.format === 'hh:mm:ss') {\n      return `${this.hours}:${this.minutes}:${this.seconds}`;\n    } else {\n      return `${this.hours}:${this.minutes}:${this.seconds}`;\n    }\n  }\n\n  private handleFocus(type: TimeType): void {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n\n    if (!this.open) {\n      this.open = true; // Force the popover to open\n    }\n\n    // Refocus on the input if it loses focus and is empty\n    if (\n      this.inputElements[type]?.value.length === 0 ||\n      this.inputElements[type]?.value === '00'\n    ) {\n      this.inputElements[type]?.focus();\n      this.inputElements[type]?.select();\n    }\n\n    this.typeFocused = type;\n  }\n\n  private HandleDropdownIconClick(): void {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle if disabled or read-only\n    }\n\n    if (this.open && this.inputElements[TimeType.Hours]) {\n      this.open = false; // Close the popover if it is open\n    } else if (this.open && this.inputElements[TimeType.Minutes]) {\n      this.open = false; // Close the popover if it is open\n    } else if (this.open && this.inputElements[TimeType.Seconds]) {\n      this.open = false; // Close the popover if it is open\n    } else if (!this.open && this.inputElements[TimeType.Hours]) {\n      this.inputElements[TimeType.Hours]?.focus(); // Focus will open the popover\n      this.inputElements[TimeType.Hours]?.select();\n    } else if (!this.open && this.inputElements[TimeType.Minutes]) {\n      this.inputElements[TimeType.Minutes]?.focus(); // Focus will open the popover\n      this.inputElements[TimeType.Minutes]?.select();\n    } else if (!this.open && this.inputElements[TimeType.Seconds]) {\n      this.inputElements[TimeType.Seconds]?.focus(); // Focus will open the popover\n      this.inputElements[TimeType.Seconds]?.select();\n    } else {\n      console.warn(\n        'nv-fieldtime -> No input elements found to focus or to blur',\n      );\n    }\n  }\n\n  private updateHighlightedItem(items: HTMLElement[], index: number) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.setAttribute('tabindex', '0');\n        item.focus(); // Forcer le focus ici\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  private handleTimeOptionClick(event: MouseEvent, type: TimeType): void {\n    const option = parseInt(\n      (event.target as HTMLElement).textContent || '0',\n      10,\n    );\n\n    if (type === TimeType.Hours) {\n      this.hours = option.toString().padStart(2, '0');\n    } else if (type === TimeType.Minutes) {\n      this.minutes = option.toString().padStart(2, '0');\n    } else if (type === TimeType.Seconds) {\n      this.seconds = option.toString().padStart(2, '0');\n    }\n\n    const reconstructTime = this.reconstructTime();\n    this.value = reconstructTime;\n  }\n\n  private handleInputBlur(): void {\n    // Use a delay to check if the focus is still within the popover\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        if (this.open) {\n          this.open = false; // Close the popover if the focus is outside the component\n        }\n      }\n    }, 150);\n  }\n\n  private handleClickOutside(event: MouseEvent) {\n    const target = event.target as Node;\n\n    // Check if the click is inside the component or any of the input elements\n    if (\n      this.el.contains(target) ||\n      Object.values(this.inputElements).some(input => input.contains(target))\n    ) {\n      return;\n    }\n\n    if (this.open) {\n      this.open = false; // Close the popover if the click is outside\n    }\n  }\n\n  private handleScroll(e: Event, type: TimeType): void {\n    const target = e.target as HTMLElement;\n    const scrollTop = target.scrollTop;\n    const containerHeight = target.clientHeight;\n    const scrollHeight = target.scrollHeight;\n\n    // Define the height of each item, this could be dynamic if the height varies\n    const itemHeight = 40; // Consider making this configurable or dynamic\n    const options = this.generateTimeOptions(type); // Generates the list of time options\n    const singleSetHeight = options.length * itemHeight;\n\n    // Check if the scroll is near the bottom or top and reset to the first set\n    if (\n      scrollTop + containerHeight >= scrollHeight - itemHeight ||\n      scrollTop <= 0\n    ) {\n      target.scrollTop = singleSetHeight; // Reset to the first set from the bottom\n    }\n  }\n\n  private generateTimeOptions(type: TimeType) {\n    // Convert the step in seconds\n    const stepInSeconds = this.step / 1000;\n\n    // Handle edge case for zero step\n    if (stepInSeconds === 0) {\n      return ['00']; // Just return the default value\n    }\n\n    // Generate the time options based on the type\n    switch (type) {\n      case TimeType.Hours:\n        return this.generateHourOptions(stepInSeconds);\n\n      case TimeType.Minutes:\n        return this.generateMinuteOptions(stepInSeconds);\n\n      case TimeType.Seconds:\n        return this.generateSecondOptions(stepInSeconds);\n\n      default:\n        return [];\n    }\n  }\n\n  private generateHourOptions(stepInSeconds: number): string[] {\n    const hourStep = Math.max(1, Math.floor(stepInSeconds / 3600)); // Prevent step < 1\n    const maxHour =\n      this.parseHour(this.max, this.format) ||\n      (this.format.startsWith('hh') ? '12' : '24');\n    const minHour = this.parseHour(this.min, this.format) || '00';\n\n    const maxHourValue = parseInt(maxHour, 10);\n    const minHourValue = parseInt(minHour, 10);\n    const values: string[] = [];\n\n    for (let i = minHourValue; i < maxHourValue; i += hourStep) {\n      values.push(i.toString().padStart(2, '0'));\n    }\n\n    return values;\n  }\n\n  private parseHour(value: string | null, format: string): string | null {\n    if (!value) return null;\n    const [hourStr] = value.split(':');\n    const hour = parseInt(hourStr, 10);\n    if (isNaN(hour)) return null;\n    if (format.startsWith('hh'))\n      return hour > 0 && hour <= 12 ? hourStr.padStart(2, '0') : null;\n    return hour >= 0 && hour <= 24 ? hourStr.padStart(2, '0') : null;\n  }\n\n  private generateMinuteOptions(stepInSeconds: number): string[] {\n    const minuteStep = Math.max(1, Math.floor((stepInSeconds % 3600) / 60)); // Ensure step >= 1\n    const minMinute = this.parseMinute(this.min) ?? 0;\n    const maxMinute = this.parseMinute(this.max) ?? 59;\n\n    if (minMinute === 0 && maxMinute === 0) return ['00']; // Handle edge case for zero seconds\n\n    const values: string[] = [];\n\n    for (let i = minMinute; i <= maxMinute; i += minuteStep) {\n      values.push(i.toString().padStart(2, '0'));\n    }\n\n    return values;\n  }\n\n  private parseMinute(value: string | null): number | null {\n    if (!value) return null;\n    const parts = value.split(':');\n    if (parts.length < 2) return null; // Expect at least \"hh:mm\"\n    const minute = parseInt(parts[1], 10);\n    return isNaN(minute) || minute < 0 || minute >= 60 ? null : minute;\n  }\n\n  private generateSecondOptions(stepInSeconds: number): string[] {\n    const secondStep = Math.max(1, stepInSeconds % 60); // Ensure step >= 1\n    const minSecond = this.parseSecond(this.min) ?? 0;\n    const maxSecond = this.parseSecond(this.max) ?? 59;\n\n    if (minSecond === 0 && maxSecond === 0) return ['00']; // Handle edge case for zero seconds\n\n    const values: string[] = [];\n\n    for (let i = minSecond; i <= maxSecond; i += secondStep) {\n      values.push(i.toString().padStart(2, '0'));\n    }\n\n    return values;\n  }\n\n  private parseSecond(value: string | null): number | null {\n    if (!value) return null;\n    const parts = value.split(':');\n    if (parts.length < 3) return null; // Expect \"hh:mm:ss\" or \"HH:mm:ss\"\n    const second = parseInt(parts[2], 10);\n    return isNaN(second) || second < 0 || second >= 60 ? null : second;\n  }\n\n  private generateInfiniteTimeOptions(type: TimeType): string[] {\n    const options = this.generateTimeOptions(type);\n    const totalOptions = options.length;\n\n    // Dynamically calculate repetitions based on a target number of items (e.g., 300 items)\n    const repetitions = Math.ceil(300 / totalOptions);\n    return Array(repetitions).fill(options).flat();\n  }\n\n  private getCurrentTime(): string {\n    const currentTime = new Date();\n    return currentTime.toLocaleTimeString(); // Returns the time in the locale's format\n  }\n\n  private updateColumnHighlight(selector, value): void {\n    const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector));\n\n    const index = items.findIndex(x => x.textContent === value);\n    this.updateHighlightedItem(items, index);\n  }\n\n  private handleHostClick(event: MouseEvent): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const targetElement = event.target as HTMLElement;\n\n    // Check if the click target or its ancestors are inside an nv-iconbutton element\n    if (targetElement.closest('nv-iconbutton')) {\n      return; // Handle icon button click separately\n    }\n\n    if (!this.open) {\n      if (this.inputElements) {\n        this.inputElements[TimeType.Hours]?.focus();\n        this.inputElements[TimeType.Hours]?.select();\n      }\n\n      event.preventDefault();\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // If an initial value is passed, parse it\n    if (this.value) {\n      this.parseTime(this.value);\n    } else {\n      const minHour = this.parseHour(this.min, this.format) || '00';\n      const minMinute = this.parseMinute(this.min) || 0;\n      const minSecond = this.parseSecond(this.min) || 0;\n\n      this.hours = minHour.padStart(2, '0');\n      this.minutes = minMinute.toString().padStart(2, '0');\n      this.seconds = minSecond.toString().padStart(2, '0');\n    }\n  }\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  componentDidLoad() {\n    if (!this.value) {\n      const currentTime = this.getCurrentTime();\n\n      // Split time into components\n      // eslint-disable-next-line prefer-const\n      let [hour, minute, secondAmPm] = currentTime.split(':');\n      let second, amPm;\n\n      // Check if AM/PM is present and split accordingly\n      if (secondAmPm.includes(' ')) {\n        [second, amPm] = secondAmPm.split(' ');\n      } else {\n        second = secondAmPm;\n      }\n\n      // Parse hour as integer for calculations\n      let parsedHour = parseInt(hour, 10);\n\n      // Convert hour to 24-hour format based on AM/PM (if present)\n      if (amPm) {\n        if (amPm === 'PM' && parsedHour < 12) {\n          parsedHour += 12; // Convert PM to 24-hour\n        } else if (amPm === 'AM' && parsedHour === 12) {\n          parsedHour = 0; // Midnight in 24-hour format\n        }\n      }\n\n      // Adjust for 12-hour format if necessary\n      if (this.format.startsWith('hh')) {\n        if (parsedHour === 0) {\n          hour = '12'; // Midnight in 12-hour format\n        } else if (parsedHour > 12) {\n          hour = (parsedHour - 12).toString(); // Convert 24-hour to 12-hour\n        } else {\n          hour = parsedHour.toString();\n        }\n      } else {\n        hour = parsedHour.toString(); // Use 24-hour format directly\n      }\n\n      // Pad hour, minute, and second to ensure two digits\n      hour = hour.padStart(2, '0');\n      minute = minute.padStart(2, '0');\n      second = second.padStart(2, '0');\n\n      // Update highlighted items for hours\n      const hourSelector = `.time-column.time-column-hours div`;\n      this.updateColumnHighlight(hourSelector, hour);\n\n      // Update highlighted items for minutes\n      const minuteSelector = `.time-column.time-column-minutes div`;\n      this.updateColumnHighlight(minuteSelector, minute);\n\n      // Update highlighted items for seconds\n      const secondSelector = `.time-column.time-column-seconds div`;\n      this.updateColumnHighlight(secondSelector, second);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  private RenderTimeOptionsColumn(type: TimeType): HTMLElement {\n    return (\n      <div\n        class={`time-column time-column-${type}`}\n        onScroll={e => this.handleScroll(e, type)}\n      >\n        {/* Hours */}\n        {this.generateInfiniteTimeOptions(type).map((option, index) => (\n          <div\n            class={{\n              'time-option': true,\n              'selected':\n                (type === TimeType.Hours && option === this.hours) ||\n                (type === TimeType.Minutes && option === this.minutes) ||\n                (type === TimeType.Seconds && option === this.seconds),\n            }}\n            key={`${option}-${index}`}\n            onClick={e => this.handleTimeOptionClick(e, type)}\n          >\n            {option}\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host onclick={e => this.handleHostClick(e)}>\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        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div class=\"input-container\">\n              <slot name=\"leading-input\"></slot>\n              {/* Input fields for hours, minutes, and seconds */}\n              {/* Hours */}\n              {startsWithIgnoreCase(this.format, 'HH') && [\n                <input\n                  ref={el => (this.inputElements[TimeType.Hours] = el)}\n                  type=\"number\"\n                  autofocus={this.autofocus}\n                  class=\"time-input\"\n                  pattern=\"[0-9]*\"\n                  maxlength=\"3\"\n                  value={this.hours}\n                  onInput={e => this.handleInputChange(e, TimeType.Hours)}\n                  placeholder={this.format.includes('hh') ? 'hh' : 'HH'}\n                  inputMode=\"numeric\"\n                  onFocus={() => this.handleFocus(TimeType.Hours)}\n                  name={\n                    this.name\n                      ? `${TimeType.Hours}-${this.name}`\n                      : TimeType.Hours\n                  }\n                  id={this.inputId}\n                  readonly={this.readonly}\n                  disabled={this.disabled}\n                  required={this.required}\n                  onKeyDown={e => this.handleKeyDown(e)} // Handle arrow keys\n                  onBlur={() => this.handleInputBlur()}\n                />,\n              ]}\n              {/* Minutes */}\n              {this.format.includes('mm') && [\n                <span>:</span>,\n                <input\n                  ref={el => (this.inputElements[TimeType.Minutes] = el)}\n                  type=\"number\"\n                  autofocus={this.autofocus}\n                  class=\"time-input\"\n                  pattern=\"[0-9]*\"\n                  maxlength=\"3\"\n                  value={this.minutes}\n                  onInput={e => this.handleInputChange(e, TimeType.Minutes)}\n                  placeholder=\"mm\"\n                  inputMode=\"numeric\"\n                  onFocus={() => this.handleFocus(TimeType.Minutes)}\n                  name={\n                    this.name\n                      ? `${TimeType.Minutes}-${this.name}`\n                      : TimeType.Minutes\n                  }\n                  id={`${this.inputId}-minutes`}\n                  readonly={this.readonly}\n                  disabled={this.disabled}\n                  required={this.required}\n                  onKeyDown={e => this.handleKeyDown(e)} // Handle arrow keys\n                  onBlur={() => this.handleInputBlur()}\n                />,\n              ]}\n              {/* Seconds */}\n              {this.format.includes('ss') && [\n                <span>:</span>,\n\n                <input\n                  ref={el => (this.inputElements[TimeType.Seconds] = el)}\n                  type=\"number\"\n                  autofocus={this.autofocus}\n                  class=\"time-input\"\n                  pattern=\"[0-9]*\"\n                  maxlength=\"3\"\n                  value={this.seconds}\n                  onInput={e => this.handleInputChange(e, TimeType.Seconds)}\n                  placeholder=\"ss\"\n                  inputMode=\"numeric\"\n                  onFocus={() => this.handleFocus(TimeType.Seconds)}\n                  name={\n                    this.name\n                      ? `${TimeType.Seconds}-${this.name}`\n                      : TimeType.Seconds\n                  }\n                  id={`${this.inputId}-seconds`}\n                  readonly={this.readonly}\n                  disabled={this.disabled}\n                  required={this.required}\n                  onKeyDown={e => this.handleKeyDown(e)} // Handle arrow keys\n                  onBlur={() => this.handleInputBlur()}\n                />,\n              ]}\n\n              <nv-iconbutton\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide time picker' : 'Show time picker'}\n                aria-pressed={this.open.toString()}\n                onClick={() => this.HandleDropdownIconClick()}\n              />\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          <div class=\"time-dropdown\" slot=\"content\">\n            <div class=\"time-columns\">\n              {startsWithIgnoreCase(this.format, 'HH') &&\n                this.RenderTimeOptionsColumn(TimeType.Hours)}\n              {this.format.includes('mm') &&\n                this.RenderTimeOptionsColumn(TimeType.Minutes)}\n              {this.format.includes('ss') &&\n                this.RenderTimeOptionsColumn(TimeType.Seconds)}\n            </div>\n          </div>\n        </nv-popover>\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":"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","ignoreList":[]}

package/dist/native/p-4e635fa7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,a as o,g as i}from"./p-ab002252.js";import{v as n}from"./p-f5ff676c.js";const d='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;max-width:480px}nv-fieldtext[fluid]:not([fluid=false]){max-width:unset}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;justify-content:center;align-items:center;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, 1);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,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .input-container:focus:hover{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);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}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);margin-right:var(--form-gap-x)}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)}';const a=d;const l=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.multiple=false;this.autofocus=false;this.fluid=false;this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleInputContainerClick=()=>{this.inputElement.focus()}}componentWillRender(){if(this.textInputType){this.type=this.textInputType}if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return t(o,{key:"665db2bee3d93ad7a21f641bc93b0c9d31bf9caf"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"96d2e16c149fdd538f56710ec8bae7a39e89de25",htmlFor:this.inputId},t("slot",{key:"67b7b1d0419586aedf4fee36535b8f6cd1547c6a",name:"label"},this.label)),t("div",{key:"fe6fd071352f58280a472238578861869427c44b",class:"input-wrapper"},t("slot",{key:"064dae2965497936609689003e6ee46b5f860951",name:"before-input"}),t("div",{key:"2488ba16be15c15652e79e0f1b977b8eae5cc01e",class:"input-container",onClick:this.handleInputContainerClick},t("slot",{key:"9100ed738f0ad58787aefdea48fe03c07903366b",name:"leading-input"}),t("input",{key:"82f96798277edfe64cc570c62b3cb42e034d7199",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,type:this.type,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,autofocus:this.autofocus,autocomplete:this.autocomplete,multiple:this.multiple,value:this.value,onInput:this.handleInput}),this.error&&t("nv-icon",{key:"e7502bb7e97f50ec5b768248b1656364c6dec78c",name:"alert-circle",class:"validation",size:"md"}),this.success&&t("nv-icon",{key:"1d20db97498c253b7d537c2bd2b083aa7a3fb59a",name:"circle-check",class:"validation",size:"md"})),t("slot",{key:"f5c711f25dfc635b507b10db4b91bfa9910988d2",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"1eca7c8d8b44f2c58a42f3c82b328148b6922a36",class:"description"},t("slot",{key:"ab645d19fc865f3e45c1adc164c5ea47600e7cc5",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"7e76601eab36ebfd9f17113f602f1070c2ac27cc",hidden:!this.error,class:"error-description"},t("slot",{key:"26b8af79934a57af720a1058f75c82fe51edf221",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return i(this)}};l.style=a;export{l as nv_fieldtext};
+//# sourceMappingURL=p-4e635fa7.entry.js.map

package/dist/native/p-4e635fa7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldtextCss","NvFieldtextStyle0","NvFieldtext","constructor","hostRef","this","inputId","uuidv4","type","disabled","readonly","required","error","success","multiple","autofocus","fluid","handleInput","event","input","target","value","valueChanged","emit","handleInputContainerClick","inputElement","focus","componentWillRender","textInputType","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","maxlength","minlength","pattern","autocomplete","onInput","size","hidden"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\nnv-fieldtext {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\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      input {\n        @include form-field-input();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n        margin-right: var(--form-gap-x);\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  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\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-fieldtext',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n  @Element() el: HTMLNvFieldtextElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\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({ reflect: true })\n  readonly validation: string;\n\n  /**\n   * Type of the input.\n   * @deprecated use type instead.\n   */\n  @Prop({ reflect: true })\n  readonly textInputType: 'text' | 'tel' | 'email';\n\n  //#endregion DEPRECATED\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  @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 type prop lets you specify what kind of information the input field\n   * should accept. Choose 'text' for general words or sentences, 'tel' for\n   * phone numbers, or 'email' for email addresses. This makes sure users get\n   * the right keyboard and validation for what they need to enter.\n   */\n  @Prop({ reflect: true, mutable: true })\n  type: 'text' | 'tel' | 'email' = 'text';\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, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the textfield\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  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 after the form is submitted.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\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}`;\n\n  /**\n   * When used with the email input type, this prop enables the field to accept\n   * multiple email addresses. Users can enter several addresses, separating\n   * each one with a comma, allowing the form to handle multiple recipients.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\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  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: 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  /**\n   * Handles the input event on the input element.\n   * Emits the inputChanged event with the new value.\n   * @param {Event} event - Event object of the input event.\n   */\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(input.value);\n  };\n\n  /**\n   * Handles focus when the input container is clicked.\n   */\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.textInputType) {\n      this.type = this.textInputType;\n    }\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 LIFECYCLE\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              placeholder={this.placeholder}\n              name={this.name}\n              type={this.type}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              autofocus={this.autofocus}\n              autocomplete={this.autocomplete}\n              multiple={this.multiple}\n              value={this.value}\n              onInput={this.handleInput}\n            />\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\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,EAAiB,o7JACvB,MAAAC,EAAeD,E,MC0BFE,EAAW,MANxB,WAAAC,CAAAC,G,qDA6CWC,KAAAC,QAAkBC,IAkD3BF,KAAAG,KAAiC,OAQxBH,KAAAI,SAAoB,MAQpBJ,KAAAK,SAAoB,MAOpBL,KAAAM,SAAoB,MAQ7BN,KAAAO,MAAiB,MAeRP,KAAAQ,QAAmB,MA0CnBR,KAAAS,SAAoB,MASpBT,KAAAU,UAAqB,MAMrBV,KAAAW,MAAiB,MAsBlBX,KAAAY,YAAeC,IACrB,MAAMC,EAAQD,EAAME,OACpBf,KAAKgB,MAAQF,EAAME,MACnBhB,KAAKiB,aAAaC,KAAKJ,EAAME,MAAM,EAM7BhB,KAAAmB,0BAA4B,KAClCnB,KAAKoB,aAAaC,OAAO,C,CAO3B,mBAAAC,GACE,GAAItB,KAAKuB,cAAe,CACtBvB,KAAKG,KAAOH,KAAKuB,a,CAGnB,GAAIvB,KAAKwB,QAAS,CAChBxB,KAAKyB,YAAczB,KAAKwB,O,CAG1B,GAAIxB,KAAK0B,WAAY,CACnB1B,KAAK2B,iBAAmB3B,KAAK0B,WAC7B1B,KAAKO,MAAQ,I,EAQjB,MAAAqB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD/B,KAAKgC,OAAShC,KAAKiC,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAASnC,KAAKC,SACnB4B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASpC,KAAKgC,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iBAEXP,EAAA,OAAAE,IAAA,2CAAKM,MAAM,kBAAkBC,QAAStC,KAAKmB,2BACzCU,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAEXP,EAAA,SAAAE,IAAA,2CACEQ,GAAIvC,KAAKC,QACTuC,IAAKC,GAAMzC,KAAKoB,aAAeqB,EAC/BC,YAAa1C,KAAK0C,YAClBN,KAAMpC,KAAKoC,KACXjC,KAAMH,KAAKG,KACXC,SAAUJ,KAAKI,SACfuC,SAAU3C,KAAKK,SACfC,SAAUN,KAAKM,SACfsC,UAAW5C,KAAK4C,UAChBC,UAAW7C,KAAK6C,UAChBC,QAAS9C,KAAK8C,QACdpC,UAAWV,KAAKU,UAChBqC,aAAc/C,KAAK+C,aACnBtC,SAAUT,KAAKS,SACfO,MAAOhB,KAAKgB,MACZgC,QAAShD,KAAKY,cAGfZ,KAAKO,OACJsB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,OAEtDjD,KAAKQ,SACJqB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,QAIzDpB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGXpC,KAAKyB,aACLzB,KAAKiC,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAepC,KAAKyB,eAIjCzB,KAAK2B,kBACL3B,KAAKiC,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKmB,QAASlD,KAAKO,MAAO8B,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBpC,KAAK2B,mB","ignoreList":[]}

package/dist/native/p-5d21532a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,a as i,g as o}from"./p-ab002252.js";import{I as n}from"./p-53aa81dd.js";import{v as a}from"./p-f5ff676c.js";import"./p-0462f723.js";const d='nv-fielddate{--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;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[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-fielddate[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-fielddate[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-fielddate[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fielddate 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-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;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, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .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-fielddate .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-fielddate .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);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .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-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .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-fielddate .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)}';const s=d;const l=class{constructor(t){e(this,t);this.dateChange=r(this,"dateChange",7);this.popoverId=a();this.inputId=a();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.autofocus=false;this.value="";this.singleValue="";this.open=false;this.firstDayOfWeek=1;this.numberOfCalendars=1;this.min="";this.max="";this.locale="en-BE";this.dateFormat="YYYY-MM-DD";this.shortcutsPlacement="bottom";this.showActions=false;this.fluid=false;this.handleClickOutside=e=>{if(this.open&&this.el&&!this.el.contains(e.target)){this.open=false}};this.handleInputContainerClick=e=>{if(this.readonly||this.disabled){e.preventDefault();e.stopPropagation();return}this.inputElement.focus();const r=this.dateFormat;if(r.startsWith("DD")){this.inputElement.setSelectionRange(0,2)}else if(r.startsWith("MM")){this.inputElement.setSelectionRange(0,2)}else if(r.startsWith("YYYY")){this.inputElement.setSelectionRange(0,4)}};this.handleInput=e=>{if(this.readonly||this.disabled){e.preventDefault();return}const r=e.target;this.singleValue=r.value;this.dateChange.emit({value:r.value})};this.toggleCalendar=()=>{if(this.readonly||this.disabled){return}this.open=!this.open};this.handleFocus=e=>{if(this.readonly||this.disabled){e.preventDefault();e.target.blur();return}}}convertToInputmaskFormat(e){switch(e){case"DD/MM/YYYY":return"dd/mm/yyyy";case"MM/DD/YYYY":return"mm/dd/yyyy";case"YYYY-MM-DD":return"yyyy-mm-dd";case"DD.MM.YYYY":return"dd.mm.yyyy";case"YYYYMMDD":return"yyyymmdd";default:return e}}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}componentWillLoad(){if(this.value){this.singleValue=this.value}}componentDidLoad(){const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{n({alias:"datetime",inputFormat:this.convertToInputmaskFormat(this.dateFormat),placeholder:"_".repeat(this.dateFormat.length)}).mask(e)}))}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside)}handleSingleDateChange(e){const r=e.detail;this.singleValue=r;this.dateChange.emit({value:r});if(!this.showActions){this.open=false}}handleClosePopover(){this.open=false}handleKeyDown(e){if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}if(!this.popoverElement){console.warn("nv-fielddate -> Popover element is not defined");return}}handleValueChange(e){this.singleValue=e}render(){return t(i,{key:"e59d967d20d9f1ab584058795f30a52e50ec2933"},(this.label&&this.label.length>0||this.el.querySelector('[slot="label"]'))&&t("label",{key:"e159c6731265e73b436093b1aceaf354451245c9",htmlFor:this.inputId},t("slot",{key:"9fc823ee41ec9fc7c8f9a42021277b4729ff0544",name:"label"},this.label)),t("nv-popover",{key:"cd0e133d5c62b00d4ade7a08184942e0bacc54fe",ref:e=>this.popoverElement=e,id:this.popoverId,triggerMode:"controlled",placement:"bottom-start",open:this.open},t("div",{key:"66b96d21779fd6a8f335af3d2d2bc4df117516d8",slot:"trigger",class:"input-wrapper"},t("slot",{key:"e2c0e7c249cc4b213afc858281db0a84ab9c4827",name:"before-input"}),t("div",{key:"585283bf8880c4d8be911167d27abe34c2f4e21f",class:"input-container",onClick:this.handleInputContainerClick},t("slot",{key:"9c15ffe741369e54fca3a8aeb844e4fbcc93fd5d",name:"leading-input"}),t("input",{key:"bca0e7c19b1081a2849a2a36843628c6f65a4eb2",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,autofocus:this.autofocus,value:this.singleValue,onInput:this.handleInput,onFocus:this.handleFocus,"data-scope":"date"}),this.error&&t("nv-icon",{key:"d610fdea33086a737ef99ab4e4ed69f09dd40045",name:"alert-circle",class:"validation",size:"md"}),this.success&&t("nv-icon",{key:"cce665f259ef8134cc8737f8077c05915b4f7dcc",name:"circle-check",class:"validation",size:"md"}),t("nv-iconbutton",{key:"d27bcd437f35f5445fb9994fd7283c2339bc7ea8",class:"toggle-calendar-icon",name:"calendar",size:"md",emphasis:"lower","aria-label":this.open?"Hide calendar":"Show calendar","aria-pressed":this.open.toString(),onClick:this.toggleCalendar,tabIndex:this.disabled?-1:0})),t("slot",{key:"7708b24f9f569094b6f4f850413edd46e210b7e8",name:"after-input"})),t("div",{key:"194a99a83c9978691130d17e981c61be742315cf",slot:"content"},t("nv-calendar",{key:"4dc6b2afb3890c5bfb08f070f5b5daac07a76929",dateFormat:this.dateFormat,singleValue:this.singleValue,firstDayOfWeek:this.firstDayOfWeek,numberOfCalendars:this.numberOfCalendars,min:this.min,max:this.max,locale:this.locale,shortcutsPlacement:this.shortcutsPlacement,showActions:this.showActions,shortcuts:this.shortcuts,showWeekNumbers:this.showWeekNumbers,disabledDates:this.disabledDates}))),(this.description&&this.description.length>0||this.el.querySelector('[slot="description"]'))&&t("div",{key:"623af8e048bfb7aef8919fa64a0f1baf04608b69",class:"description"},t("slot",{key:"cd3eecb2488e19ba1faf139ab4546e6db10468d2",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"eafcfc3c9bb584c78d7f8d6437bbfab269fdaca9",hidden:!this.error,class:"error-description"},this.el.querySelector('[slot="error-description"]')?t("slot",{name:"error-description"}):this.errorDescription),t("slot",{key:"4b5c23e00f8edb7c0d0d40a5ae89bbb322190c5d"}))}get el(){return o(this)}static get watchers(){return{value:["handleValueChange"]}}};l.style=s;export{l as nv_fielddate};
+//# sourceMappingURL=p-5d21532a.entry.js.map

package/dist/native/p-5d21532a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddateCss","NvFielddateStyle0","NvFielddate","constructor","hostRef","this","popoverId","uuidv4","inputId","disabled","readonly","required","error","success","autofocus","value","singleValue","open","firstDayOfWeek","numberOfCalendars","min","max","locale","dateFormat","shortcutsPlacement","showActions","fluid","handleClickOutside","event","el","contains","target","handleInputContainerClick","preventDefault","stopPropagation","inputElement","focus","format","startsWith","setSelectionRange","handleInput","input","dateChange","emit","toggleCalendar","handleFocus","blur","convertToInputmaskFormat","connectedCallback","document","addEventListener","componentWillLoad","componentDidLoad","inputs","querySelectorAll","forEach","Inputmask","alias","inputFormat","placeholder","repeat","length","mask","disconnectedCallback","removeEventListener","handleSingleDateChange","detail","handleClosePopover","handleKeyDown","key","popoverElement","console","warn","handleValueChange","newValue","render","h","Host","label","querySelector","htmlFor","name","ref","id","triggerMode","placement","slot","class","onClick","e","readOnly","onInput","onFocus","size","emphasis","toString","tabIndex","shortcuts","showWeekNumbers","disabledDates","description","errorDescription","hidden"],"sources":["src/components/nv-fielddate/styles/nv-fielddate.scss?tag=nv-fielddate","src/components/nv-fielddate/nv-fielddate.tsx"],"sourcesContent":["@import '../../../styles/form-field';\n\nnv-fielddate {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\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  nv-popover {\n    width: 100%;\n    display: block;\n\n    [data-scope='popover'] {\n      padding: 0;\n      background-color: var(--components-list-dropdown-background);\n      border: 1px solid var(--components-list-dropdown-border);\n      width: auto;\n    }\n\n    [slot='content'] {\n      display: block;\n      width: 100%;\n    }\n    .datepicker-container {\n        border: none\n    }\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    .input-container {\n      @include form-field-input-container();\n\n      input {\n        @include form-field-input();\n      }\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  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Child content of the component.\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-fielddate',\n  styleUrl: 'styles/nv-fielddate.scss',\n  shadow: false,\n})\nexport class NvFielddate {\n  @Element() el: HTMLNvFielddateElement;\n  private inputElement!: HTMLInputElement;\n\n  private popoverElement!: HTMLNvPopoverElement;\n  private popoverId: string = uuidv4();\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   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Name attribute for the input.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the input field as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * The initial value of the input (date in string format).\n   */\n  @Prop({ reflect: true })\n  readonly value: string = '';\n\n  /**\n   * The current value of the input date in string format.\n   */\n  @State()\n  singleValue: string = '';\n\n  /**\n   * Controls the opening of the popover.\n   */\n  @State()\n  open: boolean = false;\n\n  /**\n   * First day of the week 0 = Sunday, 1 = Monday, etc.\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly firstDayOfWeek: number = 1;\n\n  /**\n   * Number of calendars to display\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly numberOfCalendars: number = 1;\n\n  /**\n   * Minimum date for selection ISO string format, ex: 2025-01-01\n   */\n  @Prop({ reflect: true })\n  readonly min?: string = '';\n\n  /**\n   * Maximum date for selection ISO string format, ex: 2025-12-31\n   */\n  @Prop({ reflect: true })\n  readonly max?: string = '';\n\n  /** Locale for date formatting\n   * @default 'en-BE'\n   */\n  @Prop({ reflect: true })\n  readonly locale: string = 'en-BE';\n\n  /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n   * @default 'YYYY-MM-DD'\n   * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n   * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n   */\n  @Prop({ reflect: true })\n  readonly dateFormat: string = 'YYYY-MM-DD';\n\n  /**\n   * Footer placement\n   * @default 'bottom'\n   */\n  @Prop({ reflect: true })\n  readonly shortcutsPlacement: 'bottom' | 'left' | 'right' = 'bottom';\n\n  /**\n   * Show action buttons\n   * @default false\n   */\n  @Prop({ reflect: true })\n  readonly showActions: boolean = false;\n\n  /**\n   * Custom actions to display in the footer\n   */\n  @Prop({ reflect: true })\n  readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\n\n  /**\n   * Show week numbers\n   * @default true\n   */\n  @Prop({ reflect: true })\n  readonly showWeekNumbers: boolean;\n\n  /**\n   * Disabled dates ISO string array\n   */\n  @Prop({ reflect: true })\n  readonly disabledDates: Array<string>;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Converts the nv-calendar date format to the format expected by Inputmask.\n   * @param {string} format - The date format.\n   * @returns {string} Format adapted for Inputmask.\n   */\n  private convertToInputmaskFormat(format: string): string {\n    switch (format) {\n      case 'DD/MM/YYYY':\n        return 'dd/mm/yyyy';\n      case 'MM/DD/YYYY':\n        return 'mm/dd/yyyy';\n      case 'YYYY-MM-DD':\n        return 'yyyy-mm-dd';\n      case 'DD.MM.YYYY':\n        return 'dd.mm.yyyy';\n      case 'YYYYMMDD':\n        return 'yyyymmdd';\n      default:\n        return format;\n    }\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Focuses the input when the input container is clicked.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.inputElement.focus();\n    // Select the first characters based on the date format\n    const format = this.dateFormat;\n    if (format.startsWith('DD')) {\n      this.inputElement.setSelectionRange(0, 2);\n    } else if (format.startsWith('MM')) {\n      this.inputElement.setSelectionRange(0, 2);\n    } else if (format.startsWith('YYYY')) {\n      this.inputElement.setSelectionRange(0, 4);\n    }\n  };\n\n  /**\n   * Handles the input event on the input element.\n   * Updates the singleValue and emits the dateChange event.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.singleValue = input.value;\n    this.dateChange.emit({ value: input.value });\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   */\n  private toggleCalendar = () => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  /**\n   * Handles focus events on the input element.\n   * @param {FocusEvent} event - The focus event.\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.singleValue = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      Inputmask({\n        alias: 'datetime',\n        inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n        placeholder: '_'.repeat(this.dateFormat.length),\n      }).mask(input);\n    });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits an event when the date changes.\n   */\n  @Event()\n  dateChange: EventEmitter<{\n    /**\n     * The date value.\n     */\n    value: string;\n  }>;\n\n  /**\n   * Handles the single date selection event from nv-calendar.\n   * Updates the input value and closes the popover.\n   * @param {CustomEvent} event - The event from nv-calendar.\n   */\n  @Listen('singleDateChange')\n  handleSingleDateChange(event: CustomEvent) {\n    const value: string = event.detail;\n    this.singleValue = value;\n    this.dateChange.emit({ value });\n    if (!this.showActions) {\n      this.open = false;\n    }\n  }\n\n  @Listen('closePopover')\n  handleClosePopover() {\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Verify if the popover element is defined\n    if (!this.popoverElement) {\n      console.warn('nv-fielddate -> Popover element is not defined');\n      return;\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.singleValue = newValue;\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        {((this.label && this.label.length > 0) ||\n          this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          id={this.popoverId}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div slot=\"trigger\" class=\"input-wrapper\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              <input\n                id={this.inputId}\n                ref={e => (this.inputElement = e)}\n                placeholder={this.placeholder}\n                name={this.name}\n                disabled={this.disabled}\n                readOnly={this.readonly}\n                required={this.required}\n                autofocus={this.autofocus}\n                value={this.singleValue}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                data-scope=\"date\"\n              />\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n              {this.success && (\n                <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-calendar-icon\"\n                name=\"calendar\" //{this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n                aria-pressed={this.open.toString()}\n                onClick={this.toggleCalendar}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            <nv-calendar\n              dateFormat={this.dateFormat}\n              singleValue={this.singleValue}\n              firstDayOfWeek={this.firstDayOfWeek}\n              numberOfCalendars={this.numberOfCalendars}\n              min={this.min}\n              max={this.max}\n              locale={this.locale}\n              shortcutsPlacement={this.shortcutsPlacement}\n              showActions={this.showActions}\n              shortcuts={this.shortcuts}\n              showWeekNumbers={this.showWeekNumbers}\n              disabledDates={this.disabledDates}\n            ></nv-calendar>\n          </div>\n        </nv-popover>\n\n        {((this.description && this.description.length > 0) ||\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            {this.el.querySelector('[slot=\"error-description\"]') ? (\n              <slot name=\"error-description\"></slot>\n            ) : (\n              this.errorDescription\n            )}\n          </div>\n        )}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}