@nova-design-system/nova-webcomponents 3.14.0 → 3.16.0

package/dist/collection/components/nv-fieldtime/nv-fieldtime.docs.js

@@ -4,85 +4,102 @@ const NvFieldtimeDocs = {
     component: 'nv-fieldtime',
     subcomponents: ['nv-icon'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Value
         {
             name: nameof(x => x.value),
             args: { value: '12:34:56' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Label
         {
             name: nameof(x => x.label),
             args: { label: 'Label' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Readonly
         {
             name: nameof(x => x.readonly),
             args: { readonly: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Disabled
         {
             name: nameof(x => x.disabled),
             args: { disabled: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Required
         {
             name: nameof(x => x.required),
             args: { required: true, label: 'Required' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Name
         {
             name: nameof(x => x.name),
             args: { name: 'name' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Success
         {
             name: nameof(x => x.success),
             args: { success: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Error
         {
             name: nameof(x => x.error),
             args: { error: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // ErrorDescription
         {
             name: nameof(x => x.errorDescription),
             args: { error: true, errorDescription: 'Error Description' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Max
         {
             name: nameof(x => x.max),
             args: { max: '20:59:59' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Min
         {
             name: nameof(x => x.min),
             args: { min: '01:00:00' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Format
         {
             name: nameof(x => x.format),
             args: { format: 'HH:mm:ss' },
             template: (h("div", { "data-class": "flex flex-col gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "format", "data-storybook-args": true }), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh", format: "hh" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH", format: "HH" })), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh:mm", format: "hh:mm" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH:mm", format: "HH:mm" })), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh:mm:ss", format: "hh:mm:ss" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH:mm:ss", format: "HH:mm:ss" })))),
         },
+        // Description
         {
             name: nameof(x => x.description),
             args: { description: 'Description' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Open
         {
             name: nameof(x => x.open),
             args: { open: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Step
         {
             name: nameof(x => x.step),
             args: { step: 7200000 },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // Autofocus
         {
             name: nameof(x => x.autofocus),
             args: {
@@ -91,22 +108,27 @@ const NvFieldtimeDocs = {
             },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // SlotLabel
         {
             name: 'SlotLabel',
             template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label Slot"))),
         },
+        // SlotBeforeInput
         {
             name: 'SlotBeforeInput',
             template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "before-input" }, "Before Input Slot"))),
         },
+        // SlotAfterInput
         {
             name: 'SlotAfterInput',
             template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "after-input" }, "After Input Slot"))),
         },
+        // SlotLeadingInput
         {
             name: 'SlotLeadingInput',
             template: (h("nv-fieldtime", { "data-storybook-args": true }, h("nv-icon", { slot: "leading-input", name: "clock" }))),
         },
+        // SlotErrorDescription
         {
             name: 'SlotErrorDescription',
             args: { error: true },

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldtime.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtime/nv-fieldtime.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldtimeDocs: NovaDocs<Components.NvFieldtime> = {\n  component: 'nv-fieldtime',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.value),\n      args: { value: '12:34:56' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.label),\n      args: { label: 'Label' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.readonly),\n      args: { readonly: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.required),\n      args: { required: true, label: 'Required' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.name),\n      args: { name: 'name' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.success),\n      args: { success: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.error),\n      args: { error: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.errorDescription),\n      args: { error: true, errorDescription: 'Error Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.max),\n      args: { max: '20:59:59' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.min),\n      args: { min: '01:00:00' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.format),\n      args: { format: 'HH:mm:ss' },\n      template: (\n        <div data-class=\"flex flex-col gap-4 items-center w-full\">\n          <nv-fieldtime\n            data-class=\"w-full\"\n            label=\"format\"\n            data-storybook-args\n          />\n\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh\" format=\"hh\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH\" format=\"HH\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh:mm\" format=\"hh:mm\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH:mm\" format=\"HH:mm\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"hh:mm:ss\"\n              format=\"hh:mm:ss\"\n            />\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"HH:mm:ss\"\n              format=\"HH:mm:ss\"\n            />\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.description),\n      args: { description: 'Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.open),\n      args: { open: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.step),\n      args: { step: 7200000 },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: 'SlotLabel',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotBeforeInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"before-input\">Before Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotAfterInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"after-input\">After Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotLeadingInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <nv-icon slot=\"leading-input\" name=\"clock\" />\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotErrorDescription',\n      args: { error: true },\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"error-description\">Error Description Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtimeDocs;\n"]}
+{"version":3,"file":"nv-fieldtime.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtime/nv-fieldtime.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldtimeDocs: NovaDocs<Components.NvFieldtime> = {\n  component: 'nv-fieldtime',\n  subcomponents: ['nv-icon'],\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Value\n    {\n      name: nameof<Components.NvFieldtime>(x => x.value),\n      args: { value: '12:34:56' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Label\n    {\n      name: nameof<Components.NvFieldtime>(x => x.label),\n      args: { label: 'Label' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Readonly\n    {\n      name: nameof<Components.NvFieldtime>(x => x.readonly),\n      args: { readonly: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Disabled\n    {\n      name: nameof<Components.NvFieldtime>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Required\n    {\n      name: nameof<Components.NvFieldtime>(x => x.required),\n      args: { required: true, label: 'Required' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Name\n    {\n      name: nameof<Components.NvFieldtime>(x => x.name),\n      args: { name: 'name' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Success\n    {\n      name: nameof<Components.NvFieldtime>(x => x.success),\n      args: { success: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Error\n    {\n      name: nameof<Components.NvFieldtime>(x => x.error),\n      args: { error: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // ErrorDescription\n    {\n      name: nameof<Components.NvFieldtime>(x => x.errorDescription),\n      args: { error: true, errorDescription: 'Error Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Max\n    {\n      name: nameof<Components.NvFieldtime>(x => x.max),\n      args: { max: '20:59:59' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Min\n    {\n      name: nameof<Components.NvFieldtime>(x => x.min),\n      args: { min: '01:00:00' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Format\n    {\n      name: nameof<Components.NvFieldtime>(x => x.format),\n      args: { format: 'HH:mm:ss' },\n      template: (\n        <div data-class=\"flex flex-col gap-4 items-center w-full\">\n          <nv-fieldtime\n            data-class=\"w-full\"\n            label=\"format\"\n            data-storybook-args\n          />\n\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh\" format=\"hh\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH\" format=\"HH\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh:mm\" format=\"hh:mm\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH:mm\" format=\"HH:mm\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"hh:mm:ss\"\n              format=\"hh:mm:ss\"\n            />\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"HH:mm:ss\"\n              format=\"HH:mm:ss\"\n            />\n          </div>\n        </div>\n      ),\n    },\n    // Description\n    {\n      name: nameof<Components.NvFieldtime>(x => x.description),\n      args: { description: 'Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Open\n    {\n      name: nameof<Components.NvFieldtime>(x => x.open),\n      args: { open: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Step\n    {\n      name: nameof<Components.NvFieldtime>(x => x.step),\n      args: { step: 7200000 },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // Autofocus\n    {\n      name: nameof<Components.NvFieldtime>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    // SlotLabel\n    {\n      name: 'SlotLabel',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    // SlotBeforeInput\n    {\n      name: 'SlotBeforeInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"before-input\">Before Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    // SlotAfterInput\n    {\n      name: 'SlotAfterInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"after-input\">After Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    // SlotLeadingInput\n    {\n      name: 'SlotLeadingInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <nv-icon slot=\"leading-input\" name=\"clock\" />\n        </nv-fieldtime>\n      ),\n    },\n    // SlotErrorDescription\n    {\n      name: 'SlotErrorDescription',\n      args: { error: true },\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"error-description\">Error Description Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtimeDocs;\n"]}

package/dist/collection/components/nv-fieldtime/nv-fieldtime.js

@@ -152,6 +152,18 @@ export class NvFieldtime {
     handleValueChange(newValue) {
         this.valueChanged.emit(newValue);
     }
+    handleOpenChange(newOpen) {
+        // React to external changes, e.g., highlight current time on open
+        if (newOpen) {
+            // Re-highlight columns based on current value
+            const hourSelector = `.time-column.time-column-${TimeType.Hours} div`;
+            this.updateColumnHighlight(hourSelector, this.hours);
+            const minutesSelector = `.time-column.time-column-${TimeType.Minutes} div`;
+            this.updateColumnHighlight(minutesSelector, this.minutes);
+            const secondsSelector = `.time-column.time-column-${TimeType.Seconds} div`;
+            this.updateColumnHighlight(secondsSelector, this.seconds);
+        }
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region METHODS
@@ -970,26 +982,26 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: 'a960e7daf8d9a323a55b0f248dd24f8e94321161', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '23c78f159cb32ef76d0d8b5a1171246c9c69fdb7', htmlFor: this.inputId }, h("slot", { key: '70b2361b44414dba4ca91b487a7b04872cc0d75d', name: "label" }, this.label))), h("nv-popover", { key: '80de55aa7eb0c165ed6871cb0ac6a5aec9046769', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'fcd670c6dd32e6687540ddbdaefc2808898a459f', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'cea8867cee99035e97bc9ad40a7f20cf1091f415', name: "before-input" }), h("div", { key: 'b68a1a7477baaa3fbf39182a36fe4a693e29a688', class: "input-container" }, h("slot", { key: '3bb50bb3ad0207ded63bddfff6b5c5afda7ddfd4', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            h("input", { key: '236b3a8067f50c443a117e6b3e8e4b882a84eb01', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (h(Host, { key: 'ef5f12cdbd62c18033f57ff176775b5ee62ebb85', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '64e20904debf287e69e5717f2d28ac4a700b7f15', htmlFor: this.inputId }, h("slot", { key: 'e0644a80e23854ca06baf8b52b00649a0e6f1ed9', name: "label" }, this.label))), h("nv-popover", { key: '98d71eeb73ce93c16c488e80f79bbe269a44ddc3', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '9a7d256f3c64aed3314338c8306540d92dddaad0', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'ac0e04737b86e4767e4c249ee95e4b69a41ea387', name: "before-input" }), h("div", { key: '1f04ff2f539048eb00500b2fbbeaf86ce1698065', class: "input-container" }, h("slot", { key: '60ee3a49ea9ca9509224c57dc64f3ccab7f89312', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            h("input", { key: 'cb8a979ce6e4d83074e0c9046bbf3a60821e5262', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.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') && [
-            h("span", { key: '2440acab80a0d91ebe758f5a329ac5d805a18f9a' }, ":"),
-            h("input", { key: '72bc71a8bce65be766c899738745d85da7ef3530', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            h("span", { key: '74f9604ffd54e0c0bbd88996e32fdcb08f2c3645' }, ":"),
+            h("input", { key: '52f9b637bba804cac6fadff06e8b077bb2f5748a', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.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') && [
-            h("span", { key: '0afdff59b999c346b455ed7408332d087ae48b12' }, ":"),
-            h("input", { key: '0ecf4b18af18b6184e0ccdd00ddea561ee403195', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            h("span", { key: '878bc9ce7557e9cf9471803a86956a9184d0ccb5' }, ":"),
+            h("input", { key: 'b074d4d3ef80f66e7dbe051b6bc53f151661f409', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], h("nv-iconbutton", { key: '2d3d19d683d85110df8aab9d7c70fb377b189381', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '8b49cb73821fea8926ede8406019fa68baa8500e', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '372b8e95455c269a988257f2504fc24c680d7f4b', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '9e23fd13862e6218cd7213729b3e165ae74fe2eb', name: "after-input" })), h("div", { key: 'c5b99d58c96a055ea8aeade81fb5d75490421716', class: "time-dropdown", slot: "content" }, h("div", { key: '2bcee9fa41574db70850445bba4d4041c9471a46', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], h("nv-iconbutton", { key: '3f5d78116ee60d1874a4629d9cf36a06d52b7df4', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '4b2356cf95131af213a4e98feede16fc8c4963db', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'f9b0e61037049a36ac900d1af9ecc71b211ebd88', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '6177abde559c57f2b0586368ead1a61d7b543838', name: "after-input" })), h("div", { key: 'f6d5205a5011411550179f9337143163cb547fb1', class: "time-dropdown", slot: "content" }, h("div", { key: '9f0b3e1423bef197b269c5b11ce744cabc2bd6c4', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '822534262bb1769294be95c1a240a2753d556e1c', class: "description" }, h("slot", { key: '62489b82bee33610b55dfa4c2f9997b5d68b6bfe', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '9cedb395a09c4243c7c714574ad8d41b6a836fbb', hidden: !this.error, class: "error-description" }, h("slot", { key: '7b8802739ad74756f2843dd8807afe6abda92831', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '1076ded73b32ff9afbd0f02184febcc82f8d839e', class: "description" }, h("slot", { key: '479d09b299d0e380533a6cd689ce7f03aa92ea8e', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '5615246dbd797c300be357be37d3b9d0aee56e31', hidden: !this.error, class: "error-description" }, h("slot", { key: '6568ea3f9e0bdf85dd280c645956f8e0bb592e35', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }
@@ -1376,6 +1388,9 @@ export class NvFieldtime {
         return [{
                 "propName": "value",
                 "methodName": "handleValueChange"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenChange"
             }];
     }
     static get listeners() {