@nova-design-system/nova-webcomponents 3.0.0-beta.37 → 3.0.0-beta.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blazor-docs.json +103 -1
- package/dist/cjs/index.cjs.js +21 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/nv-badge_2.cjs.entry.js +1 -1
- package/dist/cjs/nv-badge_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagrid.cjs.entry.js +2 -2
- package/dist/cjs/nv-datagrid.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-dialog.cjs.entry.js +16 -3
- package/dist/cjs/nv-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddropdown.cjs.entry.js +1 -1
- package/dist/cjs/nv-fielddropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js +1 -1
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldnumber.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldnumber.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldpassword.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldpassword.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtext.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldtext.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtime.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldtime.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-table.cjs.entry.js +2 -2
- package/dist/cjs/nv-table.cjs.entry.js.map +1 -1
- package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.docs.js +1 -0
- package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.docs.js.map +1 -1
- package/dist/collection/components/nv-datagrid/nv-datagrid.js +5 -2
- package/dist/collection/components/nv-datagrid/nv-datagrid.js.map +1 -1
- package/dist/collection/components/nv-dialog/nv-dialog.docs.js +6 -6
- package/dist/collection/components/nv-dialog/nv-dialog.docs.js.map +1 -1
- package/dist/collection/components/nv-dialog/nv-dialog.js +16 -3
- package/dist/collection/components/nv-dialog/nv-dialog.js.map +1 -1
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.css +13 -28
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.css +7 -6
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.css +7 -7
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.css +36 -17
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.css +2 -2
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.css +2 -2
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.css +2 -2
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.css +7 -7
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.docs.js +1 -0
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.docs.js.map +1 -1
- package/dist/collection/components/nv-icon/nv-icons.js +21 -0
- package/dist/collection/components/nv-icon/nv-icons.js.map +1 -1
- package/dist/collection/components/nv-menuitem/nv-menuitem.js +1 -1
- package/dist/collection/components/nv-table/nv-table.js +5 -2
- package/dist/collection/components/nv-table/nv-table.js.map +1 -1
- package/dist/collection/templates/navigation.docs.js +1 -0
- package/dist/collection/templates/navigation.docs.js.map +1 -1
- package/dist/components/index.js +21 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/nv-alert.js +1 -1
- package/dist/components/nv-avatar.js +1 -1
- package/dist/components/nv-badge.js +1 -1
- package/dist/components/nv-datagrid.js +2 -2
- package/dist/components/nv-datagrid.js.map +1 -1
- package/dist/components/nv-dialog.js +18 -5
- package/dist/components/nv-dialog.js.map +1 -1
- package/dist/components/nv-dialogfooter.js +1 -1
- package/dist/components/nv-fielddropdown.js +4 -4
- package/dist/components/nv-fielddropdown.js.map +1 -1
- package/dist/components/nv-fielddropdownitem.js +1 -1
- package/dist/components/nv-fielddropdownitemcheck.js +1 -1
- package/dist/components/nv-fieldmultiselect.js +5 -5
- package/dist/components/nv-fieldmultiselect.js.map +1 -1
- package/dist/components/nv-fieldnumber.js +2 -2
- package/dist/components/nv-fieldnumber.js.map +1 -1
- package/dist/components/nv-fieldpassword.js +3 -3
- package/dist/components/nv-fieldpassword.js.map +1 -1
- package/dist/components/nv-fieldselect.js +1 -1
- package/dist/components/nv-fieldtext.js +2 -2
- package/dist/components/nv-fieldtext.js.map +1 -1
- package/dist/components/nv-fieldtime.js +3 -3
- package/dist/components/nv-fieldtime.js.map +1 -1
- package/dist/components/nv-icon.js +1 -1
- package/dist/components/nv-iconbutton.js +1 -1
- package/dist/components/nv-menu.js +2 -2
- package/dist/components/nv-menuitem.js +1 -1
- package/dist/components/nv-table.js +2 -2
- package/dist/components/nv-table.js.map +1 -1
- package/dist/components/{p-e431a0ad.js → p-1c83f303.js} +2 -2
- package/dist/components/{p-e431a0ad.js.map → p-1c83f303.js.map} +1 -1
- package/dist/components/{p-4938572a.js → p-79bf6acb.js} +2 -2
- package/dist/components/{p-4938572a.js.map → p-79bf6acb.js.map} +1 -1
- package/dist/components/{p-de8411ee.js → p-802c9204.js} +2 -2
- package/dist/components/{p-de8411ee.js.map → p-802c9204.js.map} +1 -1
- package/dist/components/{p-2baea6ba.js → p-ab87be7f.js} +2 -2
- package/dist/components/{p-2baea6ba.js.map → p-ab87be7f.js.map} +1 -1
- package/dist/components/{p-3859dc5c.js → p-b877a150.js} +2 -2
- package/dist/components/p-b877a150.js.map +1 -0
- package/dist/components/p-d20958c4.js +82 -0
- package/dist/components/p-d20958c4.js.map +1 -0
- package/dist/components/{p-11fcdad9.js → p-dd34b97d.js} +3 -3
- package/dist/components/p-dd34b97d.js.map +1 -0
- package/dist/docs.json +108 -6
- package/dist/esm/index.js +21 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/nv-badge_2.entry.js +1 -1
- package/dist/esm/nv-badge_2.entry.js.map +1 -1
- package/dist/esm/nv-datagrid.entry.js +2 -2
- package/dist/esm/nv-datagrid.entry.js.map +1 -1
- package/dist/esm/nv-dialog.entry.js +16 -3
- package/dist/esm/nv-dialog.entry.js.map +1 -1
- package/dist/esm/nv-fielddropdown.entry.js +1 -1
- package/dist/esm/nv-fielddropdown.entry.js.map +1 -1
- package/dist/esm/nv-fielddropdownitem.entry.js +1 -1
- package/dist/esm/nv-fielddropdownitem.entry.js.map +1 -1
- package/dist/esm/nv-fieldmultiselect.entry.js +1 -1
- package/dist/esm/nv-fieldmultiselect.entry.js.map +1 -1
- package/dist/esm/nv-fieldnumber.entry.js +1 -1
- package/dist/esm/nv-fieldnumber.entry.js.map +1 -1
- package/dist/esm/nv-fieldpassword.entry.js +1 -1
- package/dist/esm/nv-fieldpassword.entry.js.map +1 -1
- package/dist/esm/nv-fieldtext.entry.js +1 -1
- package/dist/esm/nv-fieldtext.entry.js.map +1 -1
- package/dist/esm/nv-fieldtime.entry.js +1 -1
- package/dist/esm/nv-fieldtime.entry.js.map +1 -1
- package/dist/esm/nv-icon.entry.js +1 -1
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/esm/nv-table.entry.js +2 -2
- package/dist/esm/nv-table.entry.js.map +1 -1
- package/dist/native/index.esm.js +1 -1
- package/dist/native/index.esm.js.map +1 -1
- package/dist/native/native.css +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/p-09850aa9.entry.js +2 -0
- package/dist/native/p-09850aa9.entry.js.map +1 -0
- package/dist/native/p-1208abf2.entry.js +2 -0
- package/dist/native/p-1208abf2.entry.js.map +1 -0
- package/dist/native/p-130f6c47.entry.js +2 -0
- package/dist/native/{p-9fb5db20.entry.js.map → p-130f6c47.entry.js.map} +1 -1
- package/dist/native/p-180c45ff.entry.js +2 -0
- package/dist/native/p-180c45ff.entry.js.map +1 -0
- package/dist/native/p-1bb5a6bd.entry.js +2 -0
- package/dist/native/{p-c51ee6dc.entry.js.map → p-1bb5a6bd.entry.js.map} +1 -1
- package/dist/native/p-273d55e5.entry.js +2 -0
- package/dist/native/p-273d55e5.entry.js.map +1 -0
- package/dist/native/{p-6d68f133.entry.js → p-2f62f097.entry.js} +2 -2
- package/dist/native/p-2f62f097.entry.js.map +1 -0
- package/dist/native/p-54df2174.entry.js +2 -0
- package/dist/native/{p-fd2955dd.entry.js.map → p-54df2174.entry.js.map} +1 -1
- package/dist/native/{p-4d0caf4a.entry.js → p-8f4788b9.entry.js} +2 -2
- package/dist/native/{p-4d0caf4a.entry.js.map → p-8f4788b9.entry.js.map} +1 -1
- package/dist/native/{p-9ac790b3.entry.js → p-a06bafad.entry.js} +2 -2
- package/dist/native/{p-9ac790b3.entry.js.map → p-a06bafad.entry.js.map} +1 -1
- package/dist/native/p-bd6d9237.entry.js +7 -0
- package/dist/native/p-bd6d9237.entry.js.map +1 -0
- package/dist/native/p-c398cdb4.entry.js +2 -0
- package/dist/native/p-c398cdb4.entry.js.map +1 -0
- package/dist/types/components/nv-datagrid/nv-datagrid.d.ts +3 -0
- package/dist/types/components/nv-dialog/nv-dialog.d.ts +8 -0
- package/dist/types/components/nv-icon/nv-icons.d.ts +1 -1
- package/dist/types/components/nv-table/nv-table.d.ts +3 -0
- package/dist/types/components.d.ts +24 -0
- package/dist/types/nova-docs.d.ts +1 -0
- package/dist/vscode-data.json +63 -0
- package/hydrate/index.js +35 -16
- package/hydrate/index.mjs +35 -16
- package/package.json +5 -1
- package/dist/components/p-11fcdad9.js.map +0 -1
- package/dist/components/p-3859dc5c.js.map +0 -1
- package/dist/components/p-a01bdf02.js +0 -82
- package/dist/components/p-a01bdf02.js.map +0 -1
- package/dist/native/p-208accf0.entry.js +0 -2
- package/dist/native/p-208accf0.entry.js.map +0 -1
- package/dist/native/p-3a8a9371.entry.js +0 -2
- package/dist/native/p-3a8a9371.entry.js.map +0 -1
- package/dist/native/p-6d68f133.entry.js.map +0 -1
- package/dist/native/p-724ed8d7.entry.js +0 -7
- package/dist/native/p-724ed8d7.entry.js.map +0 -1
- package/dist/native/p-75b1ea9f.entry.js +0 -2
- package/dist/native/p-75b1ea9f.entry.js.map +0 -1
- package/dist/native/p-9fb5db20.entry.js +0 -2
- package/dist/native/p-bfeda21c.entry.js +0 -2
- package/dist/native/p-bfeda21c.entry.js.map +0 -1
- package/dist/native/p-c51ee6dc.entry.js +0 -2
- package/dist/native/p-d4e56727.entry.js +0 -2
- package/dist/native/p-d4e56727.entry.js.map +0 -1
- package/dist/native/p-fd2955dd.entry.js +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["nvFieldnumberCss","NvFieldnumberStyle0","NvFieldnumber","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","step","handleInput","event","input","target","value","Number","handleInputContainerClick","inputElement","focus","handlePlus","stepUp","handleMinus","stepDown","isMinValueReached","min","undefined","isMaxValueReached","max","watchValueHandler","newValue","valueChanged","emit","componentWillRender","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","type","readOnly","onInput","size","clsx","hidden"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n\n container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n\n input {\n @include form-field-input();\n\n width: 100%;\n appearance: textfield;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n\n .stepper {\n position: absolute;\n right: 0;\n height: 100%;\n display: flex;\n align-items: center;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n\n nv-icon {\n color: var(--components-form-field-icon-default);\n height: 100%;\n\n &:first-child {\n padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext);\n }\n\n &:last-child {\n padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int);\n }\n\n &:hover {\n background: var(--color-interaction-container-neutral-background-hover);\n }\n }\n }\n\n .stepper-spacer {\n //2 icons both with interior and exterior padding, the default padding from the input-container and the thickness of the separator\n width: calc(2 * (var(--form-field-icon-size) + var(--form-field-inner-button-padding-x-ext) + var(--form-field-inner-button-padding-x-int)) + var(--form-field-padding-x) + var(--notification-border-width-low-emphasis));\n }\n\n // container query to remove .stepper and and the spacer when the container is less than 150px\n // .. this needs to be an absolute value because container queries do not accept variables\n // .. using relative width (cqw) compared to a parent container would not work\n // .. because the parent container follows the child's width\n @container field-number-input-container (width < 150px) {\n .stepper-spacer {\n display: none;\n }\n\n .stepper {\n display: none;\n }\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\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\n@Component({\n tag: 'nv-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the number field.\n * @deprecated Use `description` instead.\n */\n @Prop()\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n */\n @Prop()\n readonly validation: string;\n\n //#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 * 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 * Show a helpful message under the input 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 input field’s appearance to indicate successful input or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n */\n @Prop({ reflect: true })\n readonly max: number;\n\n /**\n * The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n */\n @Prop({ reflect: true })\n readonly min: number;\n\n /**\n * Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n */\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /**\n * The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n */\n @Prop({ reflect: true, mutable: true })\n value: number;\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<number>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = Number(input.value);\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\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 <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type=\"number\"\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\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 class=\"stepper-spacer\"></div>\n <div class=\"stepper\">\n <nv-icon\n name=\"minus\"\n size=\"md\"\n onClick={this.handleMinus}\n class={clsx({ disabled: this.isMinValueReached() })}\n />\n <nv-icon\n name=\"plus\"\n size=\"md\"\n onClick={this.handlePlus}\n class={clsx({ disabled: this.isMaxValueReached() })}\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\">\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":[]}
|
|
1
|
+
{"version":3,"names":["nvFieldnumberCss","NvFieldnumberStyle0","NvFieldnumber","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","step","handleInput","event","input","target","value","Number","handleInputContainerClick","inputElement","focus","handlePlus","stepUp","handleMinus","stepDown","isMinValueReached","min","undefined","isMaxValueReached","max","watchValueHandler","newValue","valueChanged","emit","componentWillRender","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","type","readOnly","onInput","size","clsx","hidden"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n\n container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n\n input {\n @include form-field-input();\n\n width: 100%;\n appearance: textfield;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n\n .stepper {\n position: absolute;\n right: 0;\n height: 100%;\n display: flex;\n align-items: center;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n\n nv-icon {\n color: var(--components-form-field-icon-default);\n height: 100%;\n\n &:first-child {\n padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext);\n }\n\n &:last-child {\n padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int);\n }\n\n &:hover {\n background: var(--color-interaction-container-neutral-background-hover);\n }\n }\n }\n\n .stepper-spacer {\n //2 icons both with interior and exterior padding, the default padding from the input-container and the thickness of the separator\n width: calc(2 * (var(--form-field-icon-size) + var(--form-field-inner-button-padding-x-ext) + var(--form-field-inner-button-padding-x-int)) + var(--form-field-padding-x) + var(--notification-border-width-low-emphasis));\n }\n\n // container query to remove .stepper and and the spacer when the container is less than 150px\n // .. this needs to be an absolute value because container queries do not accept variables\n // .. using relative width (cqw) compared to a parent container would not work\n // .. because the parent container follows the child's width\n @container field-number-input-container (width < 150px) {\n .stepper-spacer {\n display: none;\n }\n\n .stepper {\n display: none;\n }\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\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\n@Component({\n tag: 'nv-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the number field.\n * @deprecated Use `description` instead.\n */\n @Prop()\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n */\n @Prop()\n readonly validation: string;\n\n //#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 * 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 * Show a helpful message under the input 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 input field’s appearance to indicate successful input or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n */\n @Prop({ reflect: true })\n readonly max: number;\n\n /**\n * The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n */\n @Prop({ reflect: true })\n readonly min: number;\n\n /**\n * Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n */\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /**\n * The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n */\n @Prop({ reflect: true, mutable: true })\n value: number;\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<number>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = Number(input.value);\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\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 <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type=\"number\"\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\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 class=\"stepper-spacer\"></div>\n <div class=\"stepper\">\n <nv-icon\n name=\"minus\"\n size=\"md\"\n onClick={this.handleMinus}\n class={clsx({ disabled: this.isMinValueReached() })}\n />\n <nv-icon\n name=\"plus\"\n size=\"md\"\n onClick={this.handlePlus}\n class={clsx({ disabled: this.isMaxValueReached() })}\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\">\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":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as i,a as s,g as n}from"./p-5439afb8.js";import{a as o}from"./p-a5c8eee9.js";import{T as r}from"./p-56f71851.js";import{v as l}from"./p-f5ff676c.js";const a='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}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;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 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}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);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);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 .toggle-time-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-left:auto}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-within,nv-fieldtime .input-container: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 .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}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}.time-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;border-radius:4px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);z-index:1000}.time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}.time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth}.time-dropdown .time-columns .time-column::-webkit-scrollbar{width:4px}.time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{border-radius:4px}.time-dropdown .time-columns .time-column:last-child{border-right:none}.time-dropdown .time-columns .time-column .time-option{padding:8px;text-align:center;cursor:pointer;transition:background-color 0.2s;height:40px;display:flex;justify-content:center;align-items:center}.time-dropdown .time-columns .time-column .time-option:hover{border-width:1px;border-style:solid;border-color:var(--color-rainbow-10-background)}.time-dropdown .time-columns .time-column .time-option:hover,.time-dropdown .time-columns .time-column .time-option:focus,.time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}.time-dropdown .time-columns .time-column .time-option.selected{background:var(--color-rainbow-10-background);color:var(--color-rainbow-10-text)}.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 d=a;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}handleOpenChanged(e){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 a=l.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();a=(a+1)%l.length;this.updateHighlightedItem(l,a)}else if(e.key==="ArrowUp"){e.preventDefault();a=(a-1+l.length)%l.length;this.updateHighlightedItem(l,a)}else if(e.key==="Enter"&&a>=0){e.preventDefault();l[a].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 a=l?24:12;let d=false;const h=this.parseHour(this.max,this.format)||(this.format.startsWith("hh")?"12":"24");const c=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(c&&parseInt(i,10)<parseInt(c,10)){this.hours=c}else{this.hours="00";d=true}}else{if(c&&parseInt(i,10)<parseInt(c,10)){this.hours=c}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>=a){if(c&&parseInt(i,10)<parseInt(c,10)){this.hours=c}else{this.hours="00";d=true}}else{if(h&&parseInt(i,10)>parseInt(h,10)){if(c&&parseInt(i,10)<parseInt(c,10)){this.hours=c}else{this.hours="00";d=true}}else{if(c&&parseInt(i,10)<parseInt(c,10)){this.hours=c}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(c&&parseInt(i,10)<parseInt(c,10)){this.hours=c}else{this.hours="00";d=true}}else{if(c&&parseInt(i,10)<parseInt(c,10)){this.hours=c}else{this.hours=i}}}else{const t=e.slice(1,3).padStart(2,"0");const i=parseInt(t,10)||0;if(i>=a){if(c&&parseInt(t,10)<parseInt(c,10)){this.hours=c;d=true}else{this.hours="00";d=true}}else{if(h&&i>parseInt(h,10)){if(c&&parseInt(t,10)<parseInt(c,10)){this.hours=c}else{this.hours="00";d=true}}else{if(c&&i<parseInt(c,10)){this.hours=c}else{this.hours=i.toString()}}}}}else{const t=e.padStart(2,"0");const i=parseInt(t,10)||0;if(i>=a){if(c&&parseInt(t,10)<parseInt(c,10)){this.hours=c}else{this.hours="00";d=true}}else{if(h&&i>parseInt(h,10)){this.hours="00";d=true}else{if(c&&i<parseInt(c,10)){this.hours=c}else{this.hours=i.toString()}}}}if(this.hours.length===2&&!this.inputZeroAdded[t]&&!d){(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(d){(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,a;const d=60;let h=false;const c=(i=this.parseMinute(this.min))!==null&&i!==void 0?i:0;const f=(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(f&&parseInt(i,10)>f){if(c&&parseInt(i,10)<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(c&&parseInt(i,10)<c){this.minutes=c.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>=d){if(c&&parseInt(i,10)<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(f&&s>f){if(c&&parseInt(i,10)<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(c&&s<c){this.minutes=c.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(f&&parseInt(i,10)>f){if(c&&parseInt(i,10)<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(c&&parseInt(i,10)<c){this.minutes=c.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>=d){if(c&&parseInt(t,10)<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(f&&i>f){if(c&&parseInt(t,10)<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(c&&i<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes=i.toString()}}}}}else{const t=e.padStart(2,"0");const i=parseInt(t,10)||0;if(i>=d){if(c&&parseInt(t,10)<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(f&&i>f){if(c&&parseInt(t,10)<c){this.minutes=c.toString().padStart(2,"0")}else{this.minutes="00";h=true}}else{if(c&&i<c){this.minutes=c.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();(a=this.inputElements[r.Minutes])===null||a===void 0?void 0:a.select()}}handleSecondsChange(e,t){var i,s,n,o;const l=60;let a=false;const d=(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(d&&parseInt(i,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(d&&parseInt(i,10)<d){this.seconds=d.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(d&&parseInt(i,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(h&&s>h){if(d&&parseInt(i,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(d&&s<d){this.seconds=d.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(d&&parseInt(t,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(h&&i>h){if(d&&parseInt(t,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(d&&i<d){this.seconds=d.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(d&&parseInt(t,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(h&&i>h){if(d&&parseInt(t,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(d&&i<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds=i.toString()}}}}if(a){(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 a=l.length*r;if(s+n>=o-r||s<=0){i.scrollTop=a}}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 a=`.time-column.time-column-minutes div`;this.updateColumnHighlight(a,i);const d=`.time-column.time-column-seconds div`;this.updateColumnHighlight(d,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:t===this.hours},key:`${t}-${s}`,onClick:t=>this.handleTimeOptionClick(t,e)},t))))}render(){return i(s,{key:"4eefb9bb8c2bfd63cc229cb9d3f5e51dbe2f5351",onclick:e=>this.handleHostClick(e)},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{key:"8b191f1bca869f85b6186a3cfa66d8f9d886dc07",htmlFor:this.inputId},i("slot",{key:"84438c62746d81ccf65d76a40ac62e8d445adcf0",name:"label"},this.label)),i("nv-popover",{key:"1cc212b0ae814a50a288c195d1b7aa7b378f452a",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{key:"1584b3842cbd13989cdd5492baa0588a8aa0015e",class:"input-wrapper",slot:"trigger"},i("slot",{key:"3f747181762dee542935fa5ee614a315e1aa8413",name:"before-input"}),i("div",{key:"93f2329aa6a09bad318d2a461e87d69fcff8df30",class:"input-container"},i("slot",{key:"13d2b3f6e3868065cf982690f35996f2f652403b",name:"leading-input"}),o(this.format,"HH")&&[i("input",{key:"a15dd9dab27ed4918b81680718601d57bac56f2c",ref:e=>this.inputElements[r.Hours]=e,type:"number",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:"0cae25476bdb8a8d70c2d0bb94bffa20e23879a7"},":"),i("input",{key:"bc6b4ff8a8eda66d51726d34d6aedc43e304c670",ref:e=>this.inputElements[r.Minutes]=e,type:"number",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:"b4faefcaa20ffc346757e6a7454fa6474a5aeb97"},":"),i("input",{key:"d94a79e3120bad51df44cb3528ac36bb0a39783d",ref:e=>this.inputElements[r.Seconds]=e,type:"number",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:"791265d0c8ce93514a5d1972784f824723dc66b8",class:"toggle-time-icon",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:"9c19922e738549938040f36b015bb7c85b09453c",name:"alert-circle",class:"validation",size:"sm"}),this.success&&i("nv-icon",{key:"4669516002acd3d1936d3beec1e91950fbdca647",name:"circle-check",class:"validation",size:"sm"})),i("slot",{key:"263ec0dc7d5cbe1f6360522975d74a41a2ad73a8",name:"after-input"})),i("div",{key:"7ced75636f91d7079f11ecabe31f4cc9150c6771",class:"time-dropdown",slot:"content"},i("div",{key:"719a8d6720ca4d17a90d614a955d5449f4334e89",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:"f1845d065526c7b73cd95fb66278dcff001c477b",class:"description"},i("slot",{key:"b4d4c050815f36cdbae73eb0ccd99a12040d5cd9",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{key:"4b5a39a8d8b6370ffe13dd0db969348e283701ae",hidden:!this.error,class:"error-description"},i("slot",{key:"f07ca5b51fe39ff8d7c64b674515aa0c57c04a6e",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{value:["handleValueChange"]}}};h.style=d;export{h as nv_fieldtime};
|
|
2
|
+
//# sourceMappingURL=p-273d55e5.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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","handleOpenChanged","event","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/nv-fieldtime.scss?tag=nv-fieldtime","src/components/nv-fieldtime/nv-fieldtime.tsx"],"sourcesContent":["@import '../../styles/form-field';\n@import './styles/mixins';\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\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 .toggle-time-icon {\n @include icon-position(0);\n margin-left: auto;\n }\n\n nv-icon.validation {\n @include form-field-icon();\n @include icon-position(50px);\n }\n\n &.focus-within,\n &:hover {\n @include apply-hover-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\n.input-container.focus-within,\n.input-container:hover {\n @include apply-hover-focus-styles;\n}\n\n.time-dropdown {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n width: 100%;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n\n .time-columns {\n @include flex-container;\n\n .time-column {\n flex: 1;\n text-align: center;\n @include scrollable(200px);\n\n &:last-child {\n border-right: none;\n }\n\n .time-option {\n padding: 8px;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.2s;\n height: 40px;\n @include flex-container(center);\n\n &:hover {\n @include bordered-element(1px, var(--color-rainbow-10-background));\n }\n\n @include state-hover-focus(\n var(--components-list-dropdown-item-background-hover),\n var(--components-menu-contextual-item-content-hover)\n );\n\n &.selected {\n background: var(--color-rainbow-10-background);\n color: var(--color-rainbow-10-text);\n }\n\n &.highlighted {\n background-color: var(--components-list-dropdown-item-background-hover);\n color: var(--components-menu-contextual-item-content-hover);\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: '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 //#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 this.open = event.detail; // Update `open` based on the popover state\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': option === this.hours,\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 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 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 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 class=\"toggle-time-icon\"\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":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as s,a,g as e}from"./p-5439afb8.js";const l="nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0}";const n=l;const r=class{constructor(s){t(this,s);this.parsedColumns=[];this.parsedData=[];this.hasSlotHead=false;this.hasSlotBody=false;this.columns=[];this.data=[];this.noDataMessage="No data available";this.noColumnsNoDataMessage="No data or columns available to display."}parseColumns(t,s){this.parseColumnsArray(t,s)}parseJsonColumns(t){try{const s=t?JSON.parse(t):[];this.parseColumnsArray(s,this.parsedColumns)}catch(t){console.error("Invalid JSON format for columnsJson:",t.message);this.parsedColumns=[]}}parseData(t,s){this.parseDataArray(t,s)}parseJsonData(t){try{const s=t?JSON.parse(t):[];this.parseDataArray(s,this.parsedData)}catch(t){console.error("Invalid JSON format for dataJson:",t.message);this.parsedData=[]}}parseColumnsArray(t,s){if(JSON.stringify(t)===JSON.stringify(s))return;this.parsedColumns=Array.isArray(t)?t:[]}parseDataArray(t,s){if(JSON.stringify(t)===JSON.stringify(s))return;this.parsedData=Array.isArray(t)?t:[]}componentWillLoad(){this.hasSlotHead=!!this.el.querySelector('[slot="head"]');this.hasSlotBody=!!this.el.querySelector('[slot="body"]');if(this.columnsJson){this.parseJsonColumns(this.columnsJson)}else{this.parseColumns(this.columns,this.parsedColumns)}if(this.dataJson){this.parseJsonData(this.dataJson)}else{this.parseData(this.data,this.parsedData)}}render(){const t=this.hasSlotHead?Array.from(this.el.querySelector('[slot="head"]').querySelectorAll("nv-tablerow")):[];const e=this.hasSlotBody?Array.from(this.el.querySelector('[slot="body"]').querySelectorAll("nv-tablerow")):[];return s(a,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as s,a,g as e}from"./p-5439afb8.js";const l="nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0}";const n=l;const r=class{constructor(s){t(this,s);this.parsedColumns=[];this.parsedData=[];this.hasSlotHead=false;this.hasSlotBody=false;this.columns=[];this.data=[];this.noDataMessage="No data available";this.noColumnsNoDataMessage="No data or columns available to display."}parseColumns(t,s){this.parseColumnsArray(t,s)}parseJsonColumns(t){try{const s=t?JSON.parse(t):[];this.parseColumnsArray(s,this.parsedColumns)}catch(t){console.error("Invalid JSON format for columnsJson:",t.message);this.parsedColumns=[]}}parseData(t,s){this.parseDataArray(t,s)}parseJsonData(t){try{const s=t?JSON.parse(t):[];this.parseDataArray(s,this.parsedData)}catch(t){console.error("Invalid JSON format for dataJson:",t.message);this.parsedData=[]}}parseColumnsArray(t,s){if(JSON.stringify(t)===JSON.stringify(s))return;this.parsedColumns=Array.isArray(t)?t:[]}parseDataArray(t,s){if(JSON.stringify(t)===JSON.stringify(s))return;this.parsedData=Array.isArray(t)?t:[]}componentWillLoad(){this.hasSlotHead=!!this.el.querySelector('[slot="head"]');this.hasSlotBody=!!this.el.querySelector('[slot="body"]');if(this.columnsJson){this.parseJsonColumns(this.columnsJson)}else{this.parseColumns(this.columns,this.parsedColumns)}if(this.dataJson){this.parseJsonData(this.dataJson)}else{this.parseData(this.data,this.parsedData)}}render(){const t=this.hasSlotHead?Array.from(this.el.querySelector('[slot="head"]').querySelectorAll("nv-tablerow")):[];const e=this.hasSlotBody?Array.from(this.el.querySelector('[slot="body"]').querySelectorAll("nv-tablerow")):[];return s(a,{key:"9372fd6501e5f4b069bf82845357c86cfbea5be1"},s("div",{key:"bcf46dcec109ca3410c412094c8111b952e68b55",class:"hidden"},s("slot",{key:"0bff60d688bd816a292a0ac4f79b1dfc9c7e7064"}),s("slot",{key:"5dc70dac8bcba2ff8406420f6bc42d8ad65ae8fe",name:"head"}),s("slot",{key:"c2d2240cb24d776da41e335598038227a4909949",name:"body"})),s("slot",{key:"a36a96d5c0ef08008db29a6394b186b1034f3081",name:"before"}),this.parsedColumns.length===0&&this.parsedData.length===0&&t.length===0&&e.length===0?s("p",null,this.noColumnsNoDataMessage):s("table",null,this.parsedColumns.length>0?s("thead",null,s("tr",null,this.parsedColumns.map((t=>s("th",null,t))))):t.length>0?s("thead",null,t.map((t=>{const a=Array.from(t.querySelectorAll("nv-tablecolumn"));return s("tr",null,a.map((t=>s("th",{colSpan:t.colspan,rowSpan:t.rowspan,headers:t.headers,scope:t.scope,innerHTML:t.innerHTML}))))}))):null,s("tbody",null,this.parsedData.length===0&&e.length===0?s("tr",null,s("td",{colSpan:this.parsedColumns.length||12},this.noDataMessage)):this.parsedData.length>0?this.parsedData.map((t=>s("tr",null,this.parsedColumns.length>0?this.parsedColumns.map((a=>s("td",null,t[a.toLowerCase()]||""))):Object.values(t).map((t=>s("td",null,t)))))):e.length>0?e.map((t=>{const a=Array.from(t.querySelectorAll("nv-tabledatacell"));return s("tr",null,a.map((t=>s("td",{colSpan:t.colspan,rowSpan:t.rowspan,headers:t.headers,innerHTML:t.innerHTML}))))})):null)),s("slot",{key:"786406a13707dbf9374c3c0db485d956af9677ae",name:"after"}))}get el(){return e(this)}static get watchers(){return{columns:["parseColumns"],columnsJson:["parseJsonColumns"],data:["parseData"],dataJson:["parseJsonData"]}}};r.style=n;export{r as nv_table};
|
|
2
|
+
//# sourceMappingURL=p-2f62f097.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["nvTableCss","NvTableStyle0","NvTable","constructor","hostRef","this","parsedColumns","parsedData","hasSlotHead","hasSlotBody","columns","data","noDataMessage","noColumnsNoDataMessage","parseColumns","newValue","oldValue","parseColumnsArray","parseJsonColumns","newItems","JSON","parse","e","console","error","message","parseData","parseDataArray","parseJsonData","stringify","Array","isArray","componentWillLoad","el","querySelector","columnsJson","dataJson","render","headerRows","from","querySelectorAll","bodyRows","h","Host","key","class","name","length","map","column","row","cells","cell","colSpan","colspan","rowSpan","rowspan","headers","scope","innerHTML","toLowerCase","Object","values","value"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["nv-table {\n table {\n border-collapse: collapse;\n border-color: inherit;\n text-indent: 0;\n }\n}\n\n// https://tailwindcss.com/docs/table-layout\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n *\n * @deprecated [EXPERIMENTAL]\n * @experimental - This component is still under development and is not ready for use.\n */\n@Component({\n tag: 'nv-table',\n styleUrl: './nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() el: HTMLNvTableElement;\n\n /****************************************************************************/\n //#region STATES\n\n @State()\n parsedColumns: string[] = []; // Parsed array of column headers\n\n @State()\n parsedData: any[] = []; // Parsed array of data rows\n\n @State()\n hasSlotHead: boolean = false;\n\n @State()\n hasSlotBody: boolean = false;\n\n //#endregion STATES\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Defines the table columns.\n * @example ['Name', 'Age', 'Email']\n * @default []\n */\n @Prop()\n readonly columns: string[] = [];\n\n /**\n * Defines the table columns.\n * It can be passed directly as an array of strings or as a JSON string.\n * @example '[\"Name\", \"Age\", \"Email\"]'\n */\n @Prop({ reflect: true })\n readonly columnsJson?: string;\n\n /**\n * Defines the table data.\n * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n * @default []\n */\n @Prop()\n readonly data: any[] = [];\n\n /**\n * Defines the table data.\n * It can be passed directly as an array of objects or as a JSON string.\n * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n */\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /**\n * The message to display when there is no data available.\n * @default 'No data available'\n */\n @Prop()\n readonly noDataMessage: string = 'No data available';\n\n /**\n * The message to display when there are no columns or data available.\n * @default 'No data or columns available to display.'\n */\n @Prop()\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('columns')\n parseColumns(newValue: string[], oldValue: string[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsJson')\n parseJsonColumns(newValue: string | undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, this.parsedColumns);\n } catch (e) {\n console.error('Invalid JSON format for columnsJson:', e.message);\n this.parsedColumns = [];\n }\n }\n\n @Watch('data')\n parseData(newValue: any[], oldValue: any[]) {\n this.parseDataArray(newValue, oldValue);\n }\n\n @Watch('dataJson')\n parseJsonData(newValue: string | undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseDataArray(newItems, this.parsedData);\n } catch (e) {\n console.error('Invalid JSON format for dataJson:', e.message);\n this.parsedData = [];\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Parses the columns array.\n * @param {string[]} newValue - The new value of the columns array.\n * @param {string[]} oldValue - The old value of the columns array.\n */\n private parseColumnsArray(newValue: string[], oldValue: string[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n }\n\n /**\n * Parses the data array.\n * @param {any[]} newValue - The new value of the data array.\n * @param {any[]} oldValue - The old value of the data array.\n */\n private parseDataArray(newValue: any[], oldValue: any[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n if (this.columnsJson) {\n this.parseJsonColumns(this.columnsJson);\n } else {\n this.parseColumns(this.columns, this.parsedColumns);\n }\n\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else {\n this.parseData(this.data, this.parsedData);\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n const headerRows = this.hasSlotHead\n ? Array.from(\n this.el\n .querySelector('[slot=\"head\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n const bodyRows = this.hasSlotBody\n ? Array.from(\n this.el\n .querySelector('[slot=\"body\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n <slot name=\"head\"></slot>\n <slot name=\"body\"></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 &&\n this.parsedData.length === 0 &&\n headerRows.length === 0 &&\n bodyRows.length === 0 ? (\n <p>{this.noColumnsNoDataMessage}</p>\n ) : (\n <table>\n {this.parsedColumns.length > 0 ? (\n <thead>\n <tr>\n {this.parsedColumns.map(column => (\n <th>{column}</th>\n ))}\n </tr>\n </thead>\n ) : headerRows.length > 0 ? (\n <thead>\n {headerRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tablecolumn'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <th\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n scope={cell.scope}\n innerHTML={cell.innerHTML}\n ></th>\n ))}\n </tr>\n );\n })}\n </thead>\n ) : null}\n\n <tbody>\n {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n <tr>\n <td colSpan={this.parsedColumns.length || 12}>\n {this.noDataMessage}\n </td>\n </tr>\n ) : this.parsedData.length > 0 ? (\n this.parsedData.map(row => (\n <tr>\n {this.parsedColumns.length > 0\n ? this.parsedColumns.map(column => (\n <td>{row[column.toLowerCase()] || ''}</td>\n ))\n : Object.values(row).map(value => <td>{value}</td>)}\n </tr>\n ))\n ) : bodyRows.length > 0 ? (\n bodyRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tabledatacell'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <td\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n innerHTML={cell.innerHTML}\n ></td>\n ))}\n </tr>\n );\n })\n ) : null}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n /****************************************************************************/\n}\n"],"mappings":"oDAAA,MAAMA,EAAa,8EACnB,MAAAC,EAAeD,E,MCiBFE,EAAO,MALpB,WAAAC,CAAAC,G,UAYEC,KAAAC,cAA0B,GAG1BD,KAAAE,WAAoB,GAGpBF,KAAAG,YAAuB,MAGvBH,KAAAI,YAAuB,MAYdJ,KAAAK,QAAoB,GAgBpBL,KAAAM,KAAc,GAedN,KAAAO,cAAwB,oBAOxBP,KAAAQ,uBACP,0C,CAOF,YAAAC,CAAaC,EAAoBC,GAC/BX,KAAKY,kBAAkBF,EAAUC,E,CAInC,gBAAAE,CAAiBH,GACf,IACE,MAAMI,EAAWJ,EAAWK,KAAKC,MAAMN,GAAY,GAEnDV,KAAKY,kBAAkBE,EAAUd,KAAKC,c,CACtC,MAAOgB,GACPC,QAAQC,MAAM,uCAAwCF,EAAEG,SACxDpB,KAAKC,cAAgB,E,EAKzB,SAAAoB,CAAUX,EAAiBC,GACzBX,KAAKsB,eAAeZ,EAAUC,E,CAIhC,aAAAY,CAAcb,GACZ,IACE,MAAMI,EAAWJ,EAAWK,KAAKC,MAAMN,GAAY,GAEnDV,KAAKsB,eAAeR,EAAUd,KAAKE,W,CACnC,MAAOe,GACPC,QAAQC,MAAM,oCAAqCF,EAAEG,SACrDpB,KAAKE,WAAa,E,EAad,iBAAAU,CAAkBF,EAAoBC,GAC5C,GAAII,KAAKS,UAAUd,KAAcK,KAAKS,UAAUb,GAAW,OAC3DX,KAAKC,cAAgBwB,MAAMC,QAAQhB,GAAYA,EAAW,E,CAQpD,cAAAY,CAAeZ,EAAiBC,GACtC,GAAII,KAAKS,UAAUd,KAAcK,KAAKS,UAAUb,GAAW,OAC3DX,KAAKE,WAAauB,MAAMC,QAAQhB,GAAYA,EAAW,E,CAOzD,iBAAAiB,GACE3B,KAAKG,cAAgBH,KAAK4B,GAAGC,cAAc,iBAC3C7B,KAAKI,cAAgBJ,KAAK4B,GAAGC,cAAc,iBAE3C,GAAI7B,KAAK8B,YAAa,CACpB9B,KAAKa,iBAAiBb,KAAK8B,Y,KACtB,CACL9B,KAAKS,aAAaT,KAAKK,QAASL,KAAKC,c,CAGvC,GAAID,KAAK+B,SAAU,CACjB/B,KAAKuB,cAAcvB,KAAK+B,S,KACnB,CACL/B,KAAKqB,UAAUrB,KAAKM,KAAMN,KAAKE,W,EAQnC,MAAA8B,GACE,MAAMC,EAAajC,KAAKG,YACpBsB,MAAMS,KACJlC,KAAK4B,GACFC,cAAc,iBACdM,iBAAiB,gBAEtB,GACJ,MAAMC,EAAWpC,KAAKI,YAClBqB,MAAMS,KACJlC,KAAK4B,GACFC,cAAc,iBACdM,iBAAiB,gBAEtB,GAEJ,OACEE,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,QAAAE,IAAA,6CACAF,EAAA,QAAAE,IAAA,2CAAME,KAAK,SACXJ,EAAA,QAAAE,IAAA,2CAAME,KAAK,UAGbJ,EAAA,QAAAE,IAAA,2CAAME,KAAK,WAEVzC,KAAKC,cAAcyC,SAAW,GAC/B1C,KAAKE,WAAWwC,SAAW,GAC3BT,EAAWS,SAAW,GACtBN,EAASM,SAAW,EAClBL,EAAA,SAAIrC,KAAKQ,wBAET6B,EAAA,aACGrC,KAAKC,cAAcyC,OAAS,EAC3BL,EAAA,aACEA,EAAA,UACGrC,KAAKC,cAAc0C,KAAIC,GACtBP,EAAA,UAAKO,OAITX,EAAWS,OAAS,EACtBL,EAAA,aACGJ,EAAWU,KAAIE,IACd,MAAMC,EAAQrB,MAAMS,KAClBW,EAAIV,iBAAiB,mBAEvB,OACEE,EAAA,UACGS,EAAMH,KAAII,GACTV,EAAA,MACEW,QAASD,EAAKE,QACdC,QAASH,EAAKI,QACdC,QAASL,EAAKK,QACdC,MAAON,EAAKM,MACZC,UAAWP,EAAKO,cAGjB,KAIT,KAEJjB,EAAA,aACGrC,KAAKE,WAAWwC,SAAW,GAAKN,EAASM,SAAW,EACnDL,EAAA,UACEA,EAAA,MAAIW,QAAShD,KAAKC,cAAcyC,QAAU,IACvC1C,KAAKO,gBAGRP,KAAKE,WAAWwC,OAAS,EAC3B1C,KAAKE,WAAWyC,KAAIE,GAClBR,EAAA,UACGrC,KAAKC,cAAcyC,OAAS,EACzB1C,KAAKC,cAAc0C,KAAIC,GACrBP,EAAA,UAAKQ,EAAID,EAAOW,gBAAkB,MAEpCC,OAAOC,OAAOZ,GAAKF,KAAIe,GAASrB,EAAA,UAAKqB,QAG3CtB,EAASM,OAAS,EACpBN,EAASO,KAAIE,IACX,MAAMC,EAAQrB,MAAMS,KAClBW,EAAIV,iBAAiB,qBAEvB,OACEE,EAAA,UACGS,EAAMH,KAAII,GACTV,EAAA,MACEW,QAASD,EAAKE,QACdC,QAASH,EAAKI,QACdC,QAASL,EAAKK,QACdE,UAAWP,EAAKO,cAGjB,IAGP,OAKVjB,EAAA,QAAAE,IAAA,2CAAME,KAAK,U","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as r,h as o,a as t,g as i}from"./p-5439afb8.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}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtext label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtext .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 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);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container input:focus{outline:none}nv-fieldtext .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtext .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtext .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const a=d;const l=class{constructor(o){e(this,o);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.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 o(t,{key:"22f5979300679cebfff9a85a1f18604e36fd0374"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"fa372b6988a1ff568e72ec3b8a2352a21dc49a16",htmlFor:this.inputId},o("slot",{key:"ecddd18263c8ab7f3309173d0ebbf32f3c8d1cde",name:"label"},this.label)),o("div",{key:"0d93f2b0fdfb4ab92cb272ee1f9da62018524a3d",class:"input-wrapper"},o("slot",{key:"a699b48dc7b439699c36596dc9f55382262eef91",name:"before-input"}),o("div",{key:"95d6c530662c5495f505de64dd4538491a6a9b8e",class:"input-container",onClick:this.handleInputContainerClick},o("slot",{key:"e3febd47df3ac5dec70dc3b94e39ed6d7e16215d",name:"leading-input"}),o("input",{key:"746258b2a7f87f1e913781e2651d73e30f316006",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,autocomplete:this.autocomplete,multiple:this.multiple,value:this.value,onInput:this.handleInput}),this.error&&o("nv-icon",{key:"314149ea256ac09298980d2b1405b23d6084030e",name:"alert-circle",class:"validation",size:"sm"}),this.success&&o("nv-icon",{key:"ba160abd983eaa494df96fc19d3815479aebc332",name:"circle-check",class:"validation",size:"sm"})),o("slot",{key:"9f3e7aa524bb5fffbf380307638cd93169bd5912",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"532613985e992508eaa3b56e2aa8facba4db6962",class:"description"},o("slot",{key:"5ee29888f417f7c6fce352299a01dcd81169c387",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"73d6fd4eaf67278462c19812de9355afaf037c18",hidden:!this.error,class:"error-description"},o("slot",{key:"3ba736958ccef0a3bd32d8e1dff213a2e2a160d6",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return i(this)}};l.style=a;export{l as nv_fieldtext};
|
|
2
|
+
//# sourceMappingURL=p-54df2174.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["nvFieldtextCss","NvFieldtextStyle0","NvFieldtext","constructor","hostRef","this","inputId","uuidv4","type","disabled","readonly","required","error","success","multiple","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 &[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 }\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()\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n */\n @Prop()\n readonly validation: string;\n\n /**\n * Type of the input.\n * @deprecated use type instead.\n */\n @Prop()\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 //#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 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=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\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,itJACvB,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,MAsBrBT,KAAAU,YAAeC,IACrB,MAAMC,EAAQD,EAAME,OACpBb,KAAKc,MAAQF,EAAME,MACnBd,KAAKe,aAAaC,KAAKJ,EAAME,MAAM,EAM7Bd,KAAAiB,0BAA4B,KAClCjB,KAAKkB,aAAaC,OAAO,C,CAO3B,mBAAAC,GACE,GAAIpB,KAAKqB,cAAe,CACtBrB,KAAKG,KAAOH,KAAKqB,a,CAGnB,GAAIrB,KAAKsB,QAAS,CAChBtB,KAAKuB,YAAcvB,KAAKsB,O,CAG1B,GAAItB,KAAKwB,WAAY,CACnBxB,KAAKyB,iBAAmBzB,KAAKwB,WAC7BxB,KAAKO,MAAQ,I,EAQjB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD7B,KAAK8B,OAAS9B,KAAK+B,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAASjC,KAAKC,SACnB0B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASlC,KAAK8B,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iBAEXP,EAAA,OAAAE,IAAA,2CAAKM,MAAM,kBAAkBC,QAASpC,KAAKiB,2BACzCU,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAEXP,EAAA,SAAAE,IAAA,2CACEQ,GAAIrC,KAAKC,QACTqC,IAAKC,GAAMvC,KAAKkB,aAAeqB,EAC/BC,YAAaxC,KAAKwC,YAClBN,KAAMlC,KAAKkC,KACX/B,KAAMH,KAAKG,KACXC,SAAUJ,KAAKI,SACfqC,SAAUzC,KAAKK,SACfC,SAAUN,KAAKM,SACfoC,UAAW1C,KAAK0C,UAChBC,UAAW3C,KAAK2C,UAChBC,QAAS5C,KAAK4C,QACdC,aAAc7C,KAAK6C,aACnBpC,SAAUT,KAAKS,SACfK,MAAOd,KAAKc,MACZgC,QAAS9C,KAAKU,cAGfV,KAAKO,OACJoB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,OAEtD/C,KAAKQ,SACJmB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,QAIzDpB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGXlC,KAAKuB,aACLvB,KAAK+B,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAelC,KAAKuB,eAIjCvB,KAAKyB,kBACLzB,KAAK+B,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKmB,QAAShD,KAAKO,MAAO4B,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBlC,KAAKyB,mB","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["nvFieldtextCss","NvFieldtextStyle0","NvFieldtext","constructor","hostRef","this","inputId","uuidv4","type","disabled","readonly","required","error","success","multiple","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 &[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 }\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()\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n */\n @Prop()\n readonly validation: string;\n\n /**\n * Type of the input.\n * @deprecated use type instead.\n */\n @Prop()\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 //#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 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=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\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,g4JACvB,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,MAsBrBT,KAAAU,YAAeC,IACrB,MAAMC,EAAQD,EAAME,OACpBb,KAAKc,MAAQF,EAAME,MACnBd,KAAKe,aAAaC,KAAKJ,EAAME,MAAM,EAM7Bd,KAAAiB,0BAA4B,KAClCjB,KAAKkB,aAAaC,OAAO,C,CAO3B,mBAAAC,GACE,GAAIpB,KAAKqB,cAAe,CACtBrB,KAAKG,KAAOH,KAAKqB,a,CAGnB,GAAIrB,KAAKsB,QAAS,CAChBtB,KAAKuB,YAAcvB,KAAKsB,O,CAG1B,GAAItB,KAAKwB,WAAY,CACnBxB,KAAKyB,iBAAmBzB,KAAKwB,WAC7BxB,KAAKO,MAAQ,I,EAQjB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD7B,KAAK8B,OAAS9B,KAAK+B,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAASjC,KAAKC,SACnB0B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASlC,KAAK8B,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iBAEXP,EAAA,OAAAE,IAAA,2CAAKM,MAAM,kBAAkBC,QAASpC,KAAKiB,2BACzCU,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAEXP,EAAA,SAAAE,IAAA,2CACEQ,GAAIrC,KAAKC,QACTqC,IAAKC,GAAMvC,KAAKkB,aAAeqB,EAC/BC,YAAaxC,KAAKwC,YAClBN,KAAMlC,KAAKkC,KACX/B,KAAMH,KAAKG,KACXC,SAAUJ,KAAKI,SACfqC,SAAUzC,KAAKK,SACfC,SAAUN,KAAKM,SACfoC,UAAW1C,KAAK0C,UAChBC,UAAW3C,KAAK2C,UAChBC,QAAS5C,KAAK4C,QACdC,aAAc7C,KAAK6C,aACnBpC,SAAUT,KAAKS,SACfK,MAAOd,KAAKc,MACZgC,QAAS9C,KAAKU,cAGfV,KAAKO,OACJoB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,OAEtD/C,KAAKQ,SACJmB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,QAIzDpB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGXlC,KAAKuB,aACLvB,KAAK+B,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAelC,KAAKuB,eAIjCvB,KAAKyB,kBACLzB,KAAK+B,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKmB,QAAShD,KAAKO,MAAO4B,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBlC,KAAKyB,mB","ignoreList":[]}
|