npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.6.0 → 3.7.0 - Mend

@nova-design-system/nova-webcomponents 3.6.0 → 3.7.0

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.

Files changed (291) hide show

package/dist/esm/nv-fieldcheckbox.entry.js CHANGED Viewed

@@ -115,13 +115,13 @@ const NvFieldcheckbox = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'cfb710b2af0ea4442d1c2011d8414c6987a98117', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: 'a463fa87357a91d71941a265d3daf735abf3a36f', class: "input-container" }, h("input", { key: '0dd7db02107246b427a1e78d8c36068debff85bd', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (h(Host, { key: '46e0688340e1cda23f1fdbefb349fbaa8bb188f2', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: '5769e3e61f69b7a9821864aab6338b13b46db4cc', class: "input-container" }, h("input", { key: '0acc841c8583ca1d0781135b95a038703b3be516', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), h("span", { key: 'a7ee7c812df54bbf91ac6c92e786d4895faa29d4', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: 'fe06ae9b2416f08c1889c86d47d0207af6ded057', name: "checked-icon" }, h("svg", { key: '96a1c7a8113f160e4c9fc4ec23ad28f1359151b4', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '37c61f5f7cda8c91f1f5d44781b8326c216eca2a', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '276fcac2c23f7f278aa1576fa1f79393263812a6', name: "indeterminate-icon" }, h("svg", { key: 'fcc8e138e98413b0e30e7744f7eeb1e72ca69876', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'd6b6146dc3d3ff52939d644439f8eb92ba9aad64', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'a13aa3a0a671e6442e0c46c267596deb494d4da9', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '2c2aa68889b6cdd278a99872364336c54f71e96a', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'edd654aa92145a0f24fb56b447c8f6d7839fb329', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '1c4fe0f3c27aa59ed6059c91abb7ad060f21baf5', class: "description" }, h("slot", { key: '109955006fefe62ec784bd5d6f3642efc732eb51', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b86fae37461b9afca6168b8d049293efb395828f', hidden: !this.error, class: "error-description" }, h("slot", { key: '6225f886e6aee38026a4aaf93644a76e70b7ee01', name: "error-description" }, this.errorDescription))))));
+            } }), h("span", { key: 'a2bdc7fa16b4cb5e266c1666746f88b462ef6bbc', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: 'aa00b58bb2fb2132b4b355568bbecafbf14d9536', name: "checked-icon" }, h("svg", { key: '3d7e92b03fc0ebc0676a5f5a011e0a5f16bb06d9', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '28170c912acd9442af03c889afc10d348657a84b', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '790eca10b1eea865ecde7be45c00ae3bbf65132b', name: "indeterminate-icon" }, h("svg", { key: 'a00b2e00c2e2038dd1d67c43aef4f30e5d7a27e7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '6e7eb5f117a0244594392a52f932a91056093168', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("slot", { key: '4c11bb2b8078adc0d7d5f3c52c2525bc836ad075' }), h("div", { key: '323cab79ca6e047df5482d75490ba7288eef5e27', class: "text-container" }, h("slot", { key: '5bc6845d98ee06117b97588e71467ce106e1ab60', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ce639cb27b8ea446f2a0d73a36c3c9541bde9ab8', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'cd4b650b2f1b064b65211e90fdddff15b0d6f1f4', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '7de730e025d5eeae626bbe64125479dc9ebb4332', class: "description" }, h("slot", { key: '2c2f6343838ffff29e1e920ae927d89e9a63f02e', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b49fd559c3bf84e814da0093f9af64e62510725d', hidden: !this.error, class: "error-description" }, h("slot", { key: 'b15a968201d8ef5ea5e764beac553cf8ca0b87d3', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-fieldcheckbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-fieldcheckbox.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n --nv-fieldcheckbox-border-default: var(\n --components-form-field-border-default\n );\n --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n --nv-fieldcheckbox-background-default: var(\n --components-form-field-background-default\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-checked\n );\n --nv-fieldcheckbox-background-disabled: var(\n --components-form-field-background-disabled\n );\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n --nv-fieldcheckbox-color-checked: var(\n --components-form-shape-foreground-default\n );\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled-error\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-error\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--form-label-font-weight);\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: var(--form-description-font-weight);\n line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n @include description-styles();\n\n color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--nv-fieldcheckbox-color-checked);\n\n input[type='checkbox'][readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n &:has(input[type='checkbox']:disabled:not([readonly])) {\n color: var(--nv-fieldcheckbox-color-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-checkbox-radius);\n border-width: var(--form-checkbox-border-width);\n border-style: solid;\n border-color: var(--nv-fieldcheckbox-border-default);\n background: var(--nv-fieldcheckbox-background-default);\n\n &:hover {\n border-color: var(--nv-fieldcheckbox-border-hover);\n }\n\n &:focus {\n border-color: var(--nv-fieldcheckbox-border-focus);\n }\n\n @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n &:checked,\n &:indeterminate {\n background: var(--nv-fieldcheckbox-background-checked);\n border-color: var(--nv-fieldcheckbox-background-checked);\n }\n\n &:disabled:not([readonly]) {\n background: var(--nv-fieldcheckbox-background-disabled);\n border-color: var(--nv-fieldcheckbox-border-default);\n }\n\n &[readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n}\n\n@mixin icon-styles() {\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: var(--form-checkbox-icon-size);\n height: var(--form-checkbox-icon-size);\n fill: none;\n stroke: currentcolor;\n stroke-width: var(--form-checkbox-icon-stroke);\n flex-shrink: 0;\n }\n}\n\nnv-fieldcheckbox {\n @include fieldcheckbox-variables();\n @include root-styles();\n\n &.error > .input-container {\n @include fieldcheckbox-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled]:not([disabled='false']) {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n > .input-container {\n @include input-container-styles();\n\n input[type='checkbox'] {\n @include input-styles();\n }\n\n .icon {\n @include icon-styles();\n }\n }\n\n > .text-container {\n @include text-container-styles();\n\n label {\n @include label-styles();\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n /\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n formAssociated: true,\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * /\n @Prop({ reflect: true })\n readonly message?: string;\n\n /\n The text for the validation message.\n * @deprecated Use `errorDescription` and set the error prop instead.\n * /\n @Prop({ reflect: true })\n readonly validation?: string;\n\n /\n When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * /\n @Prop({ reflect: true })\n readonly labelBefore?: boolean = false;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the checkbox input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed next to the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\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 checkbox.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Indicates whether the checkbox is checked or not.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n /\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /\n Disables the checkbox, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LISTENERS\n\n /\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\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 class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <div class=\"text-container\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\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 </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-fieldcheckbox.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n --nv-fieldcheckbox-border-default: var(\n --components-form-field-border-default\n );\n --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n --nv-fieldcheckbox-background-default: var(\n --components-form-field-background-default\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-checked\n );\n --nv-fieldcheckbox-background-disabled: var(\n --components-form-field-background-disabled\n );\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n --nv-fieldcheckbox-color-checked: var(\n --components-form-shape-foreground-default\n );\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled-error\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-error\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--form-label-font-weight);\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: var(--form-description-font-weight);\n line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n @include description-styles();\n\n color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--nv-fieldcheckbox-color-checked);\n\n input[type='checkbox'][readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n &:has(input[type='checkbox']:disabled:not([readonly])) {\n color: var(--nv-fieldcheckbox-color-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-checkbox-radius);\n border-width: var(--form-checkbox-border-width);\n border-style: solid;\n border-color: var(--nv-fieldcheckbox-border-default);\n background: var(--nv-fieldcheckbox-background-default);\n\n &:hover {\n border-color: var(--nv-fieldcheckbox-border-hover);\n }\n\n &:focus {\n border-color: var(--nv-fieldcheckbox-border-focus);\n }\n\n @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n &:checked,\n &:indeterminate {\n background: var(--nv-fieldcheckbox-background-checked);\n border-color: var(--nv-fieldcheckbox-background-checked);\n }\n\n &:disabled:not([readonly]) {\n background: var(--nv-fieldcheckbox-background-disabled);\n border-color: var(--nv-fieldcheckbox-border-default);\n }\n\n &[readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n}\n\n@mixin icon-styles() {\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: var(--form-checkbox-icon-size);\n height: var(--form-checkbox-icon-size);\n fill: none;\n stroke: currentcolor;\n stroke-width: var(--form-checkbox-icon-stroke);\n flex-shrink: 0;\n }\n}\n\nnv-fieldcheckbox {\n @include fieldcheckbox-variables();\n @include root-styles();\n\n &.error > .input-container {\n @include fieldcheckbox-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled]:not([disabled='false']) {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n > .input-container {\n @include input-container-styles();\n\n input[type='checkbox'] {\n @include input-styles();\n }\n\n .icon {\n @include icon-styles();\n }\n }\n\n > .text-container {\n @include text-container-styles();\n\n label {\n @include label-styles();\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n /\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n formAssociated: true,\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * /\n @Prop({ reflect: true })\n readonly message?: string;\n\n /\n The text for the validation message.\n * @deprecated Use `errorDescription` and set the error prop instead.\n * /\n @Prop({ reflect: true })\n readonly validation?: string;\n\n /\n When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * /\n @Prop({ reflect: true })\n readonly labelBefore?: boolean = false;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the checkbox input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed next to the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\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 checkbox.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Indicates whether the checkbox is checked or not.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n /\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /\n Disables the checkbox, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LISTENERS\n\n /\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\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 class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <slot></slot>\n\n <div class=\"text-container\">\n <slot name=\"main\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\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 </slot>\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 </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/esm/nv-fielddate.entry.js CHANGED Viewed

@@ -283,6 +283,27 @@ const NvFielddate = class {
         };
         return formatMap[format] || 'dd/mm/yyyy';
     }
+    /**
+     * Clears the current selection and resets the field to its initial state.
+     * This method can be called programmatically to reset the field.
+     */
+    async clear() {
+        // Reset internal state
+        this.singleValue = '';
+        this.value = '';
+        // Reset the input element value
+        if (this.inputElement) {
+            this.inputElement.value = '';
+            // Remove the input mask and reinitialize if needed
+            if (this.inputElement.inputmask) {
+                this.inputElement.inputmask.remove();
+            }
+        }
+        // Emit events to notify about the change
+        this.valueChanged.emit('');
+        // Close the popover if open
+        this.open = false;
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -348,12 +369,12 @@ const NvFielddate = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c9f29e6997cf07a03f43e3cc2d8263201829c9c4' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '0c12a1773e75621cb7f2c6fbd944405cb444a9e6', htmlFor: this.inputId }, h("slot", { key: '0fdd5a226a5db7ac15be968f42e375f89031235f', name: "label" }, this.label))), h("nv-popover", { key: 'dd0dcf5576026e0b565db34d2a2eafd9e6188127', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'a4c7623e8d72ecc847567be060e8c3db04879062', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'e270dac5a26904db3d0966871bc10d7c68064e87', name: "before-input" }), h("div", { key: '8d277b89e591249910c9eeae754837ce079de47f', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '964769b29c4d9119365bf59255180e84ae32b195', name: "leading-input" }), h("input", { key: '41f0f565b4854e7907a5a8972d5ce265e587b7f0', id: this.inputId, ref: this.setInputRef, placeholder: this.currentPlaceholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-scope": "date" }), this.error && (h("nv-icon", { key: '32d5ffac3789d9b3598811605eccfb1207c4e850', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '4e88c90987c12199512d77c24205bc2f67c3b8d1', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'e169bdd9742569cdcdc087d29ee13f9c097907a9', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (h(Host, { key: '45af13d8290479c8ec171c0702d9d695c5047610' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd30403c879f8ca0449d8d25d22bb401ece876758', htmlFor: this.inputId }, h("slot", { key: 'aec155a914cff6b7ea8170dbd1f0d9ee4f35172e', name: "label" }, this.label))), h("nv-popover", { key: '522969535f2b8340f1a9b425c4ea6291fc65cb7e', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'eb1d5ab314fe654b3642afb22d9e3fbc340de969', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '6c28354e914075c36db9bee659d140669a745cab', name: "before-input" }), h("div", { key: '68d3aa4a8afcec4042a8930678cea7046f3e31d7', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'ed7ada6913a6735af622369236b5f521f2e96aad', name: "leading-input" }), h("input", { key: '49607b25253233665544e8e85db3814734280fe0', id: this.inputId, ref: this.setInputRef, placeholder: this.currentPlaceholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-scope": "date" }), this.error && (h("nv-icon", { key: '35d06926d78f7c653fbf0424b59802fb4489004a', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '17ca631dca201fb412c921619223c1abc8777d2b', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'e08d735115cde3d22a657b986f4a7a5a0347d1af', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '897e5ba6a908c96fdc55bdd522be3f04e9dd14f8', name: "after-input" })), h("div", { key: '6fcb101108ea4536654c2e6204416f899c9f0a04', slot: "content" }, h("nv-calendar", { key: 'd4d7c823ad832ed1c8430b041eacaa1db5633a9f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f76d5dde2222f39883b59a86fe4237818040e03c', class: "description" }, h("slot", { key: 'de07e1ee885a5804b352dba6a37898bba500b731', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b7dbb4406ee38548f8751f9425a800577f3a3cb2', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: 'a0170ef43d415238e57f29f985329e40f8ed0c2a' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '75cf593c7b9f2078f055522d6e43440dbe0cc522', name: "after-input" })), h("div", { key: '0df8cd2360a17f5cc786e6b29c67ded308c18104', slot: "content" }, h("nv-calendar", { key: '045a02370ef9dfe31ae3d0b2f702fafb25c7da8f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ecedbfe16857d9976349f3f3875be13f9ffc4b53', class: "description" }, h("slot", { key: 'e848d9e03e169c9ac57ce2fb7cdb00466f658c61', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '028b4d496ba3ee5eefa0107da8a62c771709a3ed', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: 'd3b79a0ae56ec7eb444c28985b1ffcfd8a4e36a1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/nv-fielddate.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-fielddate.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fielddate/styles/nv-fielddate.scss?tag=nv-fielddate","src/components/nv-fielddate/nv-fielddate.tsx"],"sourcesContent":["@import '../../../styles/form-field';\n\nnv-fielddate {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid=\"false\"]) {\n @include form-field-fluid();\n }\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n nv-popover {\n width: 100%;\n display: block;\n\n [data-scope='popover'] {\n padding: 0;\n background-color: var(--components-list-dropdown-background);\n border: 1px solid var(--components-list-dropdown-border);\n width: auto;\n }\n\n [slot='content'] {\n display: block;\n width: 100%;\n }\n .datepicker-container {\n border: none\n }\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n display: flex;\n align-items: center;\n gap: 8px;\n\n .input-container {\n @include form-field-input-container();\n\n input {\n @include form-field-input();\n font-feature-settings: 'tnum';\n font-family: \"TTNorms Pro Mono\", monospace;\n }\n\n > nv-iconbutton {\n @include form-field-action();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Listen,\n Host,\n Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n Extends HTMLInputElement to include the inputmask property.\n /\ninterface HTMLInputElementWithInputmask extends HTMLInputElement {\n /\n The inputmask instance that provides masking functionality.\n /\n inputmask?: {\n /\n Removes the inputmask instance.\n /\n remove: () => void;\n };\n}\n\n/\n A field date component that combines an input with a calendar popover.\n \n @slot default - Child content of the component.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fielddate',\n styleUrl: 'styles/nv-fielddate.scss',\n shadow: false,\n})\nexport class NvFielddate {\n @Element() el: HTMLNvFielddateElement;\n private inputElement!: HTMLInputElement;\n\n private popoverElement!: HTMLNvPopoverElement;\n private popoverId: string = uuidv4();\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Text displayed as label. A slot label can override this prop.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Description displayed below the input. A slot description can override this prop.\n /\n @Prop({ reflect: true })\n readonly description: string;\n\n /\n Placeholder for the input field.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Name attribute for the input.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Disables the input field.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the input field as read-only.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the input field as required.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Indicates an error state.\n /\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /\n Error description. A slot error-description can override this prop.\n /\n @Prop({ reflect: true })\n readonly errorDescription?: string;\n\n /\n Indicates a success state.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n Autofocus the input when the component is mounted.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /\n The initial value of the input (date in string format).\n * @bind value\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n /\n The current value of the input date in string format.\n /\n @State()\n singleValue: string = '';\n\n /\n The placeholder to display in the input.\n /\n @State()\n currentPlaceholder: string;\n\n /\n Controls the opening of the popover.\n /\n @State()\n open: boolean = false;\n\n /\n First day of the week 0 = Sunday, 1 = Monday, etc.\n * @default 1\n /\n @Prop({ reflect: true })\n readonly firstDayOfWeek: number = 1;\n\n /\n Number of calendars to display\n * @default 1\n /\n @Prop({ reflect: true })\n readonly numberOfCalendars: number = 1;\n\n /\n Minimum date for selection ISO string format, ex: 2025-01-01\n /\n @Prop({ reflect: true })\n readonly min?: string = '';\n\n /\n Maximum date for selection ISO string format, ex: 2025-12-31\n /\n @Prop({ reflect: true })\n readonly max?: string = '';\n\n /* Locale for date formatting\n * @default 'en-BE'\n /\n @Prop({ reflect: true })\n readonly locale: string = 'en-BE';\n\n /* Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n * @default 'YYYY-MM-DD'\n * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n /\n @Prop({ reflect: true })\n readonly dateFormat: string = 'YYYY-MM-DD';\n\n /\n Footer placement\n * @default 'bottom'\n /\n @Prop({ reflect: true })\n readonly shortcutsPlacement: 'bottom' \| 'left' \| 'right' = 'bottom';\n\n /\n Show action buttons\n * @default false\n /\n @Prop({ reflect: true })\n readonly showActions: boolean = false;\n\n /\n Custom actions to display in the footer\n /\n @Prop({ reflect: true })\n readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\n\n /\n Show week numbers\n * @default true\n /\n @Prop({ reflect: true })\n readonly showWeekNumbers: boolean;\n\n /\n Disabled dates ISO string array\n /\n @Prop({ reflect: true })\n readonly disabledDates: Array<string>;\n\n /\n Allows the field to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Converts the nv-calendar date format to the format expected by Inputmask.\n * @param {string} format - The date format.\n * @returns {string} Format adapted for Inputmask.\n /\n private convertToInputmaskFormat(format: string): string {\n // If the format is not specified, use the default format\n if (!format) {\n return 'dd/mm/yyyy';\n }\n\n const formatMap = {\n 'DD/MM/YYYY': 'dd/mm/yyyy',\n 'MM/DD/YYYY': 'mm/dd/yyyy',\n 'YYYY-MM-DD': 'yyyy-mm-dd',\n 'DD.MM.YYYY': 'dd.mm.yyyy',\n 'YYYYMMDD': 'yyyymmdd',\n };\n\n return formatMap[format] \|\| 'dd/mm/yyyy';\n }\n\n /\n Closes the popover when a click is detected outside the component.\n * @param {MouseEvent} event - The click event.\n /\n private handleClickOutside = (event: MouseEvent) => {\n if (this.open && this.el && !this.el.contains(event.target as Node)) {\n this.open = false;\n }\n };\n\n /\n Focuses the input when the input container is clicked.\n * @param {MouseEvent} event - The click event.\n /\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.inputElement.focus();\n // Select the first characters based on the date format\n const format = this.dateFormat;\n if (format.startsWith('DD') \|\| format.startsWith('MM')) {\n this.inputElement.setSelectionRange(0, 2);\n } else if (format.startsWith('YYYY')) {\n this.inputElement.setSelectionRange(0, 4);\n }\n };\n\n /\n Handles the input event on the input element.\n * Updates the singleValue and emits the valueChanged event.\n * @param {Event} event - The input event.\n /\n private handleInput = (event: Event) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n const input = event.target as HTMLInputElement;\n const previousValue = this.value;\n this.singleValue = input.value;\n this.value = input.value;\n // Only emit valueChanged if the value actually changed\n if (previousValue !== input.value) {\n this.valueChanged.emit(input.value);\n }\n };\n\n /\n Initializes the input mask.\n /\n private initializeInputMask = () => {\n this.currentPlaceholder = '';\n\n if ((this.inputElement as HTMLInputElementWithInputmask).inputmask) {\n return;\n }\n\n const inputMask = new Inputmask({\n alias: 'datetime',\n inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n placeholder: ' ',\n prefillYear: false,\n clearIncomplete: false,\n showMaskOnHover: false,\n showMaskOnFocus: false,\n clearMaskOnLostFocus: false,\n insertMode: true,\n rightAlign: false,\n oncomplete: function (e) {\n const input = e.target as HTMLInputElement;\n const event = new CustomEvent('input', { bubbles: true });\n input.dispatchEvent(event);\n },\n });\n inputMask.mask(this.inputElement);\n\n // Set the value after applying the mask\n if (this.inputElement.name === this.name && this.singleValue) {\n requestAnimationFrame(() => {\n this.inputElement.value = this.singleValue;\n const event = new CustomEvent('input', { bubbles: true });\n this.inputElement.dispatchEvent(event);\n });\n }\n };\n\n /\n Handles keydown events on the input before the mask is initialized.\n * Initializes the mask on the first number input.\n * @param {KeyboardEvent} event - The keyboard event.\n /\n private handleKeydownBeforeMask = (event: KeyboardEvent) => {\n const allowedKeys = [\n 'Backspace',\n 'Delete',\n 'Tab',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ];\n\n if (/\\d/.test(event.key)) {\n this.initializeInputMask();\n this.inputElement.removeEventListener(\n 'keydown',\n this.handleKeydownBeforeMask,\n );\n } else if (\n !allowedKeys.includes(event.key) &&\n !event.metaKey &&\n !event.ctrlKey\n ) {\n event.preventDefault();\n }\n };\n\n /\n Handles focus events on the input element.\n * @param {FocusEvent} event - The focus event.\n /\n private handleFocus = (event: FocusEvent) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n (event.target as HTMLElement).blur();\n return;\n }\n\n if (!(this.inputElement as HTMLInputElementWithInputmask).inputmask) {\n this.inputElement.addEventListener(\n 'keydown',\n this.handleKeydownBeforeMask,\n );\n }\n\n this.open = true;\n };\n\n /\n Handles blur events on the input element.\n /\n private handleBlur = () => {\n this.inputElement.removeEventListener(\n 'keydown',\n this.handleKeydownBeforeMask,\n );\n };\n\n /\n Prevents the valueChanged event from the calendar from propagating up.\n * @param {CustomEvent} event - The valueChanged event from nv-calendar.\n /\n private handleCalendarValueChanged = (event: CustomEvent) => {\n event.stopPropagation();\n };\n\n /\n Sets the reference to the popover element.\n * @param {HTMLNvPopoverElement} el - The popover element.\n /\n private setPopoverRef = (el: HTMLNvPopoverElement) => {\n this.popoverElement = el;\n };\n\n /\n Sets the reference to the input element.\n * @param {HTMLInputElement} el - The input element.\n /\n private setInputRef = (el: HTMLInputElement) => {\n this.inputElement = el;\n };\n\n /\n Toggles the opening/closing of the popover.\n /\n private toggleCalendar = () => {\n if (this.readonly \|\| this.disabled) {\n return;\n }\n this.open = !this.open;\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n connectedCallback() {\n document.addEventListener('click', this.handleClickOutside);\n }\n\n componentWillLoad() {\n if (this.value) {\n this.singleValue = this.value;\n }\n this.currentPlaceholder = this.placeholder \|\| this.dateFormat;\n }\n\n componentDidLoad() {\n // Inputmask is now initialized on the first keypress\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside);\n if (\n this.inputElement &&\n (this.inputElement as HTMLInputElementWithInputmask).inputmask\n ) {\n (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the value changes (unified value binding).\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n /\n Handles the single date selection event from nv-calendar.\n * Updates the input value and closes the popover.\n * @param {CustomEvent} event - The event from nv-calendar.\n /\n @Listen('singleDateChange')\n handleSingleDateChange(event: CustomEvent) {\n const value: string = event.detail;\n const previousValue = this.value;\n this.singleValue = value;\n this.value = value;\n // Only emit valueChanged if the value actually changed\n if (previousValue !== value) {\n this.valueChanged.emit(value);\n }\n if (!this.showActions) {\n this.open = false;\n }\n }\n\n @Listen('closePopover')\n handleClosePopover() {\n this.open = false;\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n // Verify if the popover element is defined\n if (!this.popoverElement) {\n console.warn('nv-fielddate -> Popover element is not defined');\n return;\n }\n }\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.singleValue = newValue;\n }\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host>\n {((this.label && this.label.length > 0) \|\|\n this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <nv-popover\n ref={this.setPopoverRef}\n id={this.popoverId}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div slot=\"trigger\" class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"input-container\"\n onClick={this.handleInputContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={this.setInputRef}\n placeholder={this.currentPlaceholder}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n autofocus={this.autofocus}\n value={this.singleValue}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n data-scope=\"date\"\n />\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n\n <nv-iconbutton\n class=\"toggle-calendar-icon\"\n name=\"calendar\" //{this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n aria-pressed={this.open.toString()}\n onClick={this.toggleCalendar}\n tabIndex={this.disabled ? -1 : 0}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <div slot=\"content\">\n <nv-calendar\n dateFormat={this.dateFormat}\n singleValue={this.singleValue}\n firstDayOfWeek={this.firstDayOfWeek}\n numberOfCalendars={this.numberOfCalendars}\n min={this.min}\n max={this.max}\n locale={this.locale}\n shortcutsPlacement={this.shortcutsPlacement}\n showActions={this.showActions}\n shortcuts={this.shortcuts}\n showWeekNumbers={this.showWeekNumbers}\n disabledDates={this.disabledDates}\n onValueChanged={this.handleCalendarValueChanged}\n ></nv-calendar>\n </div>\n </nv-popover>\n\n {((this.description && this.description.length > 0) \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n {this.el.querySelector('[slot=\"error-description\"]') ? (\n <slot name=\"error-description\"></slot>\n ) : (\n this.errorDescription\n )}\n </div>\n )}\n\n <slot></slot>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-fielddate.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fielddate/styles/nv-fielddate.scss?tag=nv-fielddate","src/components/nv-fielddate/nv-fielddate.tsx"],"sourcesContent":["@import '../../../styles/form-field';\n\nnv-fielddate {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid=\"false\"]) {\n @include form-field-fluid();\n }\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n nv-popover {\n width: 100%;\n display: block;\n\n [data-scope='popover'] {\n padding: 0;\n background-color: var(--components-list-dropdown-background);\n border: 1px solid var(--components-list-dropdown-border);\n width: auto;\n }\n\n [slot='content'] {\n display: block;\n width: 100%;\n }\n .datepicker-container {\n border: none\n }\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n display: flex;\n align-items: center;\n gap: 8px;\n\n .input-container {\n @include form-field-input-container();\n\n input {\n @include form-field-input();\n font-feature-settings: 'tnum';\n font-family: \"TTNorms Pro Mono\", monospace;\n }\n\n > nv-iconbutton {\n @include form-field-action();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Listen,\n Host,\n Watch,\n Method,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n Extends HTMLInputElement to include the inputmask property.\n /\ninterface HTMLInputElementWithInputmask extends HTMLInputElement {\n /\n The inputmask instance that provides masking functionality.\n /\n inputmask?: {\n /\n Removes the inputmask instance.\n /\n remove: () => void;\n };\n}\n\n/\n A field date component that combines an input with a calendar popover.\n \n @slot default - Child content of the component.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fielddate',\n styleUrl: 'styles/nv-fielddate.scss',\n shadow: false,\n})\nexport class NvFielddate {\n @Element() el: HTMLNvFielddateElement;\n private inputElement!: HTMLInputElement;\n\n private popoverElement!: HTMLNvPopoverElement;\n private popoverId: string = uuidv4();\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Text displayed as label. A slot label can override this prop.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Description displayed below the input. A slot description can override this prop.\n /\n @Prop({ reflect: true })\n readonly description: string;\n\n /\n Placeholder for the input field.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Name attribute for the input.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Disables the input field.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the input field as read-only.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the input field as required.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Indicates an error state.\n /\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /\n Error description. A slot error-description can override this prop.\n /\n @Prop({ reflect: true })\n readonly errorDescription?: string;\n\n /\n Indicates a success state.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n Autofocus the input when the component is mounted.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /\n The initial value of the input (date in string format).\n * @bind value\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n /\n The current value of the input date in string format.\n /\n @State()\n singleValue: string = '';\n\n /\n The placeholder to display in the input.\n /\n @State()\n currentPlaceholder: string;\n\n /\n Controls the opening of the popover.\n /\n @State()\n open: boolean = false;\n\n /\n First day of the week 0 = Sunday, 1 = Monday, etc.\n * @default 1\n /\n @Prop({ reflect: true })\n readonly firstDayOfWeek: number = 1;\n\n /\n Number of calendars to display\n * @default 1\n /\n @Prop({ reflect: true })\n readonly numberOfCalendars: number = 1;\n\n /\n Minimum date for selection ISO string format, ex: 2025-01-01\n /\n @Prop({ reflect: true })\n readonly min?: string = '';\n\n /\n Maximum date for selection ISO string format, ex: 2025-12-31\n /\n @Prop({ reflect: true })\n readonly max?: string = '';\n\n /* Locale for date formatting\n * @default 'en-BE'\n /\n @Prop({ reflect: true })\n readonly locale: string = 'en-BE';\n\n /* Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n * @default 'YYYY-MM-DD'\n * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n /\n @Prop({ reflect: true })\n readonly dateFormat: string = 'YYYY-MM-DD';\n\n /\n Footer placement\n * @default 'bottom'\n /\n @Prop({ reflect: true })\n readonly shortcutsPlacement: 'bottom' \| 'left' \| 'right' = 'bottom';\n\n /\n Show action buttons\n * @default false\n /\n @Prop({ reflect: true })\n readonly showActions: boolean = false;\n\n /\n Custom actions to display in the footer\n /\n @Prop({ reflect: true })\n readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\n\n /\n Show week numbers\n * @default true\n /\n @Prop({ reflect: true })\n readonly showWeekNumbers: boolean;\n\n /\n Disabled dates ISO string array\n /\n @Prop({ reflect: true })\n readonly disabledDates: Array<string>;\n\n /\n Allows the field to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Converts the nv-calendar date format to the format expected by Inputmask.\n * @param {string} format - The date format.\n * @returns {string} Format adapted for Inputmask.\n /\n private convertToInputmaskFormat(format: string): string {\n // If the format is not specified, use the default format\n if (!format) {\n return 'dd/mm/yyyy';\n }\n\n const formatMap = {\n 'DD/MM/YYYY': 'dd/mm/yyyy',\n 'MM/DD/YYYY': 'mm/dd/yyyy',\n 'YYYY-MM-DD': 'yyyy-mm-dd',\n 'DD.MM.YYYY': 'dd.mm.yyyy',\n 'YYYYMMDD': 'yyyymmdd',\n };\n\n return formatMap[format] \|\| 'dd/mm/yyyy';\n }\n\n /\n Closes the popover when a click is detected outside the component.\n * @param {MouseEvent} event - The click event.\n /\n private handleClickOutside = (event: MouseEvent) => {\n if (this.open && this.el && !this.el.contains(event.target as Node)) {\n this.open = false;\n }\n };\n\n /\n Focuses the input when the input container is clicked.\n * @param {MouseEvent} event - The click event.\n /\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.inputElement.focus();\n // Select the first characters based on the date format\n const format = this.dateFormat;\n if (format.startsWith('DD') \|\| format.startsWith('MM')) {\n this.inputElement.setSelectionRange(0, 2);\n } else if (format.startsWith('YYYY')) {\n this.inputElement.setSelectionRange(0, 4);\n }\n };\n\n /\n Handles the input event on the input element.\n * Updates the singleValue and emits the valueChanged event.\n * @param {Event} event - The input event.\n /\n private handleInput = (event: Event) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n const input = event.target as HTMLInputElement;\n const previousValue = this.value;\n this.singleValue = input.value;\n this.value = input.value;\n // Only emit valueChanged if the value actually changed\n if (previousValue !== input.value) {\n this.valueChanged.emit(input.value);\n }\n };\n\n /\n Initializes the input mask.\n /\n private initializeInputMask = () => {\n this.currentPlaceholder = '';\n\n if ((this.inputElement as HTMLInputElementWithInputmask).inputmask) {\n return;\n }\n\n const inputMask = new Inputmask({\n alias: 'datetime',\n inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n placeholder: ' ',\n prefillYear: false,\n clearIncomplete: false,\n showMaskOnHover: false,\n showMaskOnFocus: false,\n clearMaskOnLostFocus: false,\n insertMode: true,\n rightAlign: false,\n oncomplete: function (e) {\n const input = e.target as HTMLInputElement;\n const event = new CustomEvent('input', { bubbles: true });\n input.dispatchEvent(event);\n },\n });\n inputMask.mask(this.inputElement);\n\n // Set the value after applying the mask\n if (this.inputElement.name === this.name && this.singleValue) {\n requestAnimationFrame(() => {\n this.inputElement.value = this.singleValue;\n const event = new CustomEvent('input', { bubbles: true });\n this.inputElement.dispatchEvent(event);\n });\n }\n };\n\n /\n Handles keydown events on the input before the mask is initialized.\n * Initializes the mask on the first number input.\n * @param {KeyboardEvent} event - The keyboard event.\n /\n private handleKeydownBeforeMask = (event: KeyboardEvent) => {\n const allowedKeys = [\n 'Backspace',\n 'Delete',\n 'Tab',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ];\n\n if (/\\d/.test(event.key)) {\n this.initializeInputMask();\n this.inputElement.removeEventListener(\n 'keydown',\n this.handleKeydownBeforeMask,\n );\n } else if (\n !allowedKeys.includes(event.key) &&\n !event.metaKey &&\n !event.ctrlKey\n ) {\n event.preventDefault();\n }\n };\n\n /\n Handles focus events on the input element.\n * @param {FocusEvent} event - The focus event.\n /\n private handleFocus = (event: FocusEvent) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n (event.target as HTMLElement).blur();\n return;\n }\n\n if (!(this.inputElement as HTMLInputElementWithInputmask).inputmask) {\n this.inputElement.addEventListener(\n 'keydown',\n this.handleKeydownBeforeMask,\n );\n }\n\n this.open = true;\n };\n\n /\n Handles blur events on the input element.\n /\n private handleBlur = () => {\n this.inputElement.removeEventListener(\n 'keydown',\n this.handleKeydownBeforeMask,\n );\n };\n\n /\n Prevents the valueChanged event from the calendar from propagating up.\n * @param {CustomEvent} event - The valueChanged event from nv-calendar.\n /\n private handleCalendarValueChanged = (event: CustomEvent) => {\n event.stopPropagation();\n };\n\n /\n Sets the reference to the popover element.\n * @param {HTMLNvPopoverElement} el - The popover element.\n /\n private setPopoverRef = (el: HTMLNvPopoverElement) => {\n this.popoverElement = el;\n };\n\n /\n Sets the reference to the input element.\n * @param {HTMLInputElement} el - The input element.\n /\n private setInputRef = (el: HTMLInputElement) => {\n this.inputElement = el;\n };\n\n /\n Toggles the opening/closing of the popover.\n /\n private toggleCalendar = () => {\n if (this.readonly \|\| this.disabled) {\n return;\n }\n this.open = !this.open;\n };\n\n /\n Clears the current selection and resets the field to its initial state.\n * This method can be called programmatically to reset the field.\n /\n @Method()\n async clear(): Promise<void> {\n // Reset internal state\n this.singleValue = '';\n this.value = '';\n\n // Reset the input element value\n if (this.inputElement) {\n this.inputElement.value = '';\n // Remove the input mask and reinitialize if needed\n if ((this.inputElement as HTMLInputElementWithInputmask).inputmask) {\n (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n }\n }\n\n // Emit events to notify about the change\n this.valueChanged.emit('');\n\n // Close the popover if open\n this.open = false;\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n connectedCallback() {\n document.addEventListener('click', this.handleClickOutside);\n }\n\n componentWillLoad() {\n if (this.value) {\n this.singleValue = this.value;\n }\n this.currentPlaceholder = this.placeholder \|\| this.dateFormat;\n }\n\n componentDidLoad() {\n // Inputmask is now initialized on the first keypress\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside);\n if (\n this.inputElement &&\n (this.inputElement as HTMLInputElementWithInputmask).inputmask\n ) {\n (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the value changes (unified value binding).\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n /\n Handles the single date selection event from nv-calendar.\n * Updates the input value and closes the popover.\n * @param {CustomEvent} event - The event from nv-calendar.\n /\n @Listen('singleDateChange')\n handleSingleDateChange(event: CustomEvent) {\n const value: string = event.detail;\n const previousValue = this.value;\n this.singleValue = value;\n this.value = value;\n // Only emit valueChanged if the value actually changed\n if (previousValue !== value) {\n this.valueChanged.emit(value);\n }\n if (!this.showActions) {\n this.open = false;\n }\n }\n\n @Listen('closePopover')\n handleClosePopover() {\n this.open = false;\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n // Verify if the popover element is defined\n if (!this.popoverElement) {\n console.warn('nv-fielddate -> Popover element is not defined');\n return;\n }\n }\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.singleValue = newValue;\n }\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host>\n {((this.label && this.label.length > 0) \|\|\n this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <nv-popover\n ref={this.setPopoverRef}\n id={this.popoverId}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div slot=\"trigger\" class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"input-container\"\n onClick={this.handleInputContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={this.setInputRef}\n placeholder={this.currentPlaceholder}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n autofocus={this.autofocus}\n value={this.singleValue}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n data-scope=\"date\"\n />\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n\n <nv-iconbutton\n class=\"toggle-calendar-icon\"\n name=\"calendar\" //{this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n aria-pressed={this.open.toString()}\n onClick={this.toggleCalendar}\n tabIndex={this.disabled ? -1 : 0}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <div slot=\"content\">\n <nv-calendar\n dateFormat={this.dateFormat}\n singleValue={this.singleValue}\n firstDayOfWeek={this.firstDayOfWeek}\n numberOfCalendars={this.numberOfCalendars}\n min={this.min}\n max={this.max}\n locale={this.locale}\n shortcutsPlacement={this.shortcutsPlacement}\n showActions={this.showActions}\n shortcuts={this.shortcuts}\n showWeekNumbers={this.showWeekNumbers}\n disabledDates={this.disabledDates}\n onValueChanged={this.handleCalendarValueChanged}\n ></nv-calendar>\n </div>\n </nv-popover>\n\n {((this.description && this.description.length > 0) \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n {this.el.querySelector('[slot=\"error-description\"]') ? (\n <slot name=\"error-description\"></slot>\n ) : (\n this.errorDescription\n )}\n </div>\n )}\n\n <slot></slot>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"version":3}

package/dist/esm/nv-fielddaterange.entry.js CHANGED Viewed

@@ -255,6 +255,34 @@ const NvFielddaterange = class {
      */
     updateCalendarValue() {
     }
+    /**
+     * Clears the current selection and resets the date range field to its initial state.
+     * This method can be called programmatically to reset the field.
+     */
+    async clear() {
+        // Reset internal state
+        this.startValue = '';
+        this.endValue = '';
+        this.value = '';
+        // Reset both input elements
+        const inputs = this.el.querySelectorAll('.input-wrapper input');
+        inputs.forEach((input) => {
+            input.value = '';
+            // Remove input mask if exists
+            if (input.inputmask) {
+                input.inputmask.remove();
+            }
+        });
+        // Emit events to notify about the change
+        this.valueChanged.emit('');
+        this.dateRangeChange.emit({ start: '', end: '' });
+        // Close the popover if open
+        this.open = false;
+        // Clear the calendar if it exists
+        if (this.calendarElement) {
+            this.calendarElement.clear();
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -443,10 +471,10 @@ const NvFielddaterange = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b2033314494faca72c310df329eab3918fe6935e' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '22e0af3e24bada8d859bcf42de0dfcedff9f5988', htmlFor: this.startInputId }, h("slot", { key: '8eb3e4e1a4c67c0d9cd014aa2c73b6fc2ecb1a8f', name: "label" }, this.label))), h("nv-popover", { key: 'f9c722e792ba69738df080975f78ea3dfeb40f07', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '805c98d4a9e1defc74c0b751691e413dfbcfa736', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'd84ddf0a0732a68392c79baab9cde23be6b1b27e', name: "before-input" }), h("div", { key: '4f3cfab2e9a83dacc0f950bc319192b568f90258', class: "input-container" }, h("slot", { key: '2d8dd5e11369dc9bd1894e299f96b41806295568', name: "leading-input" }), h("div", { key: 'b60b40b275099441071b130bed7d097e8c1dcbcb', class: "range-inputs" }, h("input", { key: 'b7c647676fa5e48d51e7b7f1cf83e4a0275805ec', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), h("div", { key: '3e63ececeeff713f51db0a47e3d3b4f305e6fc66', class: "range-separator" }), h("input", { key: '1c54a2e3f43ad077bfe9e9b17886300d06840bfd', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (h("nv-icon", { key: '971b363f7fafbaeba65a161c1d7792d2bcacacf6', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '0f498b287b4c9ad9f83a0d380c522441b8afdf6e', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: '257549f7c201391c083f28f1b89ffa3a439f268c', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '7be106f2f1500839e899d6f9c6f3705398cadd1a', name: "after-input" })), h("div", { key: 'd2c56635c83628f37f0c1ec127bfeaca5fb78b90', slot: "content" }, h("nv-calendar", { key: '4ec9eea45e030463c2df0115a0cfd6453da66f01', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a624ba699b3b7a7bb4d26725fe451ecd5df1f5a2', class: "description" }, h("slot", { key: 'f2c3666075730a248e57c748b32df33a59f3777e', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e2c1f8816b896d00e2c4ba8b32bc28380630ecad', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: 'cee75865d222324b8d7f3144ba2facaefcaf1d35' })));
+        return (h(Host, { key: 'e2d5ce2c864dbc8ba478a1ce1353aa8e51e13ec1' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: '6e171200b763f8e7a907d305475bb7d4faa27979', htmlFor: this.startInputId }, h("slot", { key: '9f8b94e7491d4cd73e17f41ba290acda1fe73f3b', name: "label" }, this.label))), h("nv-popover", { key: '9bf5539eeceadb960c3438ddc05fe986f800d33b', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '58f7625d27c2266429ddc4f653d61efefed5bc66', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '206064a5c1be74082202849b96e46a8207377098', name: "before-input" }), h("div", { key: 'bd66fb676a5a749e17ede3f75c8a4404586c0c63', class: "input-container" }, h("slot", { key: '7c78a037f5189143ea32ca843e1c27b52d8f2d4b', name: "leading-input" }), h("div", { key: 'fbe89bc4502eca56e05029d65a45684484921433', class: "range-inputs" }, h("input", { key: '397e572e87dd7f01977008b44847469cabd06494', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), h("div", { key: '378d2755919eafc9f4edd8ee451c01e49dc70cfe', class: "range-separator" }), h("input", { key: '2de8dcda3161667a543c04ae529a0f617f6598c6', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (h("nv-icon", { key: '5880e135764a7f9f87d92a4f7a84eba9f56b7d46', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '5d764360d3dbfc306962cb9e4b67d7d3c4bc09ed', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: '1b09d57633f8e115cc3d92a82d35399c53be265b', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '7ec41f782b0343eeb427bee4d7f2ab1b549978b3', name: "after-input" })), h("div", { key: 'ea714333fe596af8a10c6f8a1e6c72935f8e5c91', slot: "content" }, h("nv-calendar", { key: 'ffaa70c5bc76c422396b233d3dc46fdeb2d06b10', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '7f4aa271c896234907d95cfe7660e1c41ab8ddf7', class: "description" }, h("slot", { key: 'fce93594f7af4d054f886ce3caf48cfffb6809aa', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'f5a19b5d4c90c4319dc4eb09d1067f202ab229c9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '1d494e4c192b38c26e8cfe5482516382cacc13c6' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {