npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.8.0 → 3.9.0 - Mend

@nova-design-system/nova-webcomponents 3.8.0 → 3.9.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 (100) hide show

package/dist/collection/components/nv-dialog/nv-dialog.js CHANGED Viewed

@@ -27,7 +27,8 @@ export class NvDialog {
          */
         this.clickOutside = false;
         /**
-         * If true, the dialog visibility is managed manually through methods or the open prop.
+         * If true, the dialog visibility is managed manually through methods or the
+         * open prop.
          */
         this.controlled = false;
         /**
@@ -35,22 +36,11 @@ export class NvDialog {
          */
         this.full = false;
         /**
-         * Controls whether the dialog should automatically focus the first focusable element when opened.
-         * When disabled, prevents unwanted tooltip triggers on dialog open.
+         * Controls whether the dialog should automatically focus the first focusable
+         * element when opened. When disabled, prevents unwanted tooltip triggers on
+         * dialog open.
          */
         this.autofocus = false;
-        /**
-         * Handles the close button click.
-         */
-        this.handleCloseButton = () => {
-            this.close();
-        };
-        /**
-         * Handles the cancel button click.
-         */
-        this.handleCancelButton = () => {
-            this.close();
-        };
         /**
          * Checks for and sets up form ID if a form is present
          */
@@ -79,7 +69,6 @@ export class NvDialog {
         };
         this.triggerClickEvents = [
             ['click', this.show],
-            ['touchstart', this.show],
             [
                 'keydown',
                 (e) => {
@@ -100,9 +89,10 @@ export class NvDialog {
     async show() {
         this.open = true;
         this.preventScroll();
-        // It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it is non-modal.
+        /** It is recommended to use the .show() or .showModal() method to render
+         * dialogs, rather than the open attribute. If a <dialog> is opened using
+         * the open attribute, it is non-modal. */
         this.dialogElement.showModal();
-        this.openChanged.emit(this.open);
     }
     /**
      * Call this method to hide the dialog, making it disappear from view.
@@ -111,7 +101,6 @@ export class NvDialog {
         this.open = false;
         this.allowScroll();
         this.dialogElement.close();
-        this.openChanged.emit(this.open);
     }
     /**
      * Sets the autofocus on the first focusable element in the dialog.
@@ -175,10 +164,15 @@ export class NvDialog {
      * @param {KeyboardEvent} event - The keydown event.
      */
     handleKeyDown(event) {
-        if (event.key === 'Escape' && this.undismissable) {
+        if (event.key !== 'Escape')
+            return;
+        if (this.undismissable) {
             event.preventDefault();
             event.stopPropagation();
         }
+        else {
+            this.close();
+        }
     }
     /**
      * Handles the click event to close the dialog when clickOutside is true.
@@ -189,24 +183,17 @@ export class NvDialog {
             return;
         this.handleClickOutside(event);
     }
-    /**
-     * Handles the touchstart event to close the dialog when clickOutside is true.
-     * @param {TouchEvent} event - The touchstart event.
-     */
-    handleDocumentTouch(event) {
-        if (!this.clickOutside || this.undismissable)
-            return;
-        this.handleClickOutside(event);
-    }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
-    async handleDialogOpenChange(open) {
-        if (open) {
+    async handleDialogOpenChange(isOpen) {
+        if (isOpen) {
             this.show();
+            this.openChanged.emit(isOpen);
         }
         else {
             this.close();
+            this.openChanged.emit(isOpen);
         }
     }
     //#endregion WATCHERS
@@ -259,7 +246,7 @@ export class NvDialog {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (h(Host, { key: '8e4a46dd7749656670d5b8eb167aae2108644375' }, h("slot", { key: '954980e2b451c9f5c0e4f09df76c62c1f04ab01e', name: "trigger" }), h("dialog", { key: '8541ad521ae348d26764756e45c668f7aab5c278', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: 'cd07e78da6f5cb3abd14640b941629bff034ec63', class: "content" }, !this.undismissable && (h("nv-button", { key: '5b610a9d30acd450a273e9dc10a4a29bdf85d58c', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, h("nv-icon", { key: '4e5841c525221c6c23c699deaeefa7492f57e091', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: 'f09fd0f7013b1c2c912ed7958a8a9cab0016858b', class: "content-body", id: "dialog-content" }, h("slot", { key: 'c3c196c3e8f40acbb29f3fa89d1620e7beaad10c' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
+        return (h(Host, { key: '7ee864d4f6df5a503bff43353a7b32f29fdb285e' }, h("slot", { key: 'dc13563074a0339bbd488baf00a74428d6ef4812', name: "trigger" }), h("dialog", { key: 'c5781d389cf728469ece1cef977a8370101cf85a', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: 'bd5b0f19c639a5f9e5767b1a95b9b07870f18df2', class: "content" }, !this.undismissable && (h("nv-button", { key: '5163f2027391b0207f4128290f6755f302d90070', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, h("nv-icon", { key: '646d222572ec015bcaf0a957937420f3ca4fb917', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: 'bde55c33725d002ac934b63c079c34024248be52', class: "content-body", id: "dialog-content" }, h("slot", { key: '1ff4c4e01282d08d1a99d274483c55e398d14ffd' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable }))))));
     }
     static get is() { return "nv-dialog"; }
     static get originalStyleUrls() {
@@ -424,7 +411,7 @@ export class NvDialog {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, the dialog visibility is managed manually through methods or the open prop."
+                    "text": "If true, the dialog visibility is managed manually through methods or the\nopen prop."
                 },
                 "getter": false,
                 "setter": false,
@@ -464,7 +451,7 @@ export class NvDialog {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls whether the dialog should automatically focus the first focusable element when opened.\nWhen disabled, prevents unwanted tooltip triggers on dialog open."
+                    "text": "Controls whether the dialog should automatically focus the first focusable\nelement when opened. When disabled, prevents unwanted tooltip triggers on\ndialog open."
                 },
                 "getter": false,
                 "setter": false,
@@ -553,12 +540,6 @@ export class NvDialog {
                 "target": "document",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "touchstart",
-                "method": "handleDocumentTouch",
-                "target": "document",
-                "capture": false,
-                "passive": true
             }];
     }
 }

package/dist/collection/components/nv-dialog/nv-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-dialog.js","sourceRoot":"","sources":["../../../src/components/nv-dialog/nv-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Method,\n Event,\n EventEmitter,\n Watch,\n Listen,\n} from '@stencil/core';\nimport { tabbable } from 'tabbable';\nimport {\n addEventListeners,\n removeEventListeners,\n type EventsAndListeners,\n} from '../../utils/events.utils';\nimport clsx from 'clsx';\nimport { ButtonType } from '../../utils/constants';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Body of the dialog.\n * @slot trigger - Content to be placed as the trigger, will override the trigger prop.\n * @slot header - Content to be placed as the header, will override the header prop.\n * @slot footer - Content to be placed as the footer, will override the footer prop.\n /\n@Component({\n tag: 'nv-dialog',\n styleUrl: 'nv-dialog.scss',\n shadow: false,\n})\nexport class NvDialog {\n @Element() el: HTMLNvDialogElement;\n private dialogElement!: HTMLDialogElement;\n private eventsAttached = false;\n private form: string;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /\n @internal\n * Accepts a reference to the DOM element acting as the header. This should\n * be used when the slot for the header is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n headerElement: Element;\n\n /\n @internal\n * Accepts a reference to the DOM element acting as the footer. This should\n * be used when the slot for the footer is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n footerElement: Element;\n\n /\n Use this prop to toggle the visibility of the dialog. Set to true to show\n * the dialog and false to hide it.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n If true, the dialog cannot be closed by the user.\n /\n @Prop({ reflect: true })\n readonly undismissable: boolean = false;\n\n /\n If true, the dialog will be closed when the backdrop is clicked.\n /\n @Prop({ reflect: true })\n readonly clickOutside: boolean = false;\n\n /\n If true, the dialog visibility is managed manually through methods or the open prop.\n /\n @Prop({ reflect: true })\n readonly controlled: boolean = false;\n\n /\n If true, the dialog takes full width styling.\n /\n @Prop({ reflect: true })\n readonly full: boolean = false;\n\n /\n Controls whether the dialog should automatically focus the first focusable element when opened.\n * When disabled, prevents unwanted tooltip triggers on dialog open.\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 METHODS\n\n /\n * Call this method to show the dialog, making it visible on the screen.\n /\n @Method()\n public async show() {\n this.open = true;\n this.preventScroll();\n // It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it is non-modal.\n this.dialogElement.showModal();\n this.openChanged.emit(this.open);\n }\n\n /\n Call this method to hide the dialog, making it disappear from view.\n /\n @Method()\n public async close() {\n this.open = false;\n this.allowScroll();\n this.dialogElement.close();\n this.openChanged.emit(this.open);\n }\n\n /\n Handles the close button click.\n /\n private handleCloseButton = () => {\n this.close();\n };\n\n /\n Handles the cancel button click.\n /\n private handleCancelButton = () => {\n this.close();\n };\n\n /\n Sets the autofocus on the first focusable element in the dialog.\n /\n private setAutofocus() {\n const focusableElements = tabbable(this.dialogElement, {\n displayCheck: 'none',\n });\n\n if (focusableElements.length > 0) {\n // Convert to array and find element with smallest top and left position\n let topLeftElement = focusableElements[0];\n let topLeftRect = topLeftElement.getBoundingClientRect();\n\n focusableElements.forEach(element => {\n const rect = element.getBoundingClientRect();\n if (rect.top < topLeftRect.top \|\| rect.left < topLeftRect.left) {\n topLeftElement = element;\n topLeftRect = rect;\n }\n });\n\n // Set autofocus attribute on the found element\n topLeftElement.setAttribute('autofocus', 'true');\n }\n }\n\n /\n Attaches event listeners to the dialog.\n /\n private attachEventListeners() {\n if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n addEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.eventsAttached = true;\n }\n }\n\n /\n Prevents the body from scrolling when the dialog is open.\n * Compensates for scrollbar width to prevent layout shift.\n /\n private preventScroll() {\n // Calculate scrollbar width\n const scrollBarWidth =\n window.innerWidth - document.documentElement.clientWidth;\n\n // Apply overflow hidden and padding compensation\n document.documentElement.style.overflow = 'hidden';\n document.documentElement.style.paddingRight = `${scrollBarWidth}px`;\n }\n\n /\n Allows the body to scroll when the dialog is closed.\n * Removes the applied overflow and padding styles.\n /\n private allowScroll() {\n // Remove the applied styles\n document.documentElement.style.removeProperty('overflow');\n document.documentElement.style.removeProperty('padding-right');\n }\n\n private ensureFormId(formElement: HTMLFormElement): string {\n if (!formElement.id) {\n formElement.id = `dialog-form-${uuidv4()}`;\n }\n return formElement.id;\n }\n\n /\n Checks for and sets up form ID if a form is present\n /\n private checkForForm = () => {\n if (!this.form) {\n const formElement = this.el.querySelector('form') as HTMLFormElement;\n if (formElement) {\n this.form = this.ensureFormId(formElement);\n }\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the dialog is closing in order to allow for cleanup, data-capture, etc.\n * @bind open\n /\n @Event()\n openChanged: EventEmitter<boolean>;\n\n /\n Handles the native dialog close event.\n /\n private handleDialogClose = () => {\n if (this.open) {\n this.close();\n }\n };\n\n /\n Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.\n * @param {KeyboardEvent} event - The keydown event.\n /\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.undismissable) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n /\n Handles the click event to close the dialog when clickOutside is true.\n * @param {MouseEvent} event - The click event.\n /\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n /\n Handles the touchstart event to close the dialog when clickOutside is true.\n * @param {TouchEvent} event - The touchstart event.\n /\n @Listen('touchstart', { target: 'document' })\n handleDocumentTouch(event: TouchEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n private handleClickOutside = (event: MouseEvent \| TouchEvent) => {\n if (event.target === this.dialogElement) {\n this.close();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private triggerClickEvents: EventsAndListeners = [\n ['click', this.show],\n ['touchstart', this.show],\n [\n 'keydown',\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.show();\n }\n },\n ],\n ];\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async handleDialogOpenChange(open: boolean) {\n if (open) {\n this.show();\n } else {\n this.close();\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n /\n * Lifecycle method that runs before the component loads.\n * Initializes the trigger, header, and footer elements by finding them in the component's children.\n * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)\n /\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n\n this.headerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'header' \|\|\n child.tagName.toLowerCase() === 'nv-dialogheader'\n );\n }) as HTMLElement;\n\n this.footerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'footer' \|\|\n child.tagName.toLowerCase() === 'nv-dialogfooter'\n );\n }) as HTMLElement;\n\n // Initial form check\n this.checkForForm();\n }\n\n componentWillUpdate() {\n this.attachEventListeners();\n }\n\n componentDidLoad() {\n if (this.open) {\n this.show();\n }\n // Only set autofocus if the prop is true and no element already has autofocus\n if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {\n this.setAutofocus();\n }\n this.attachEventListeners();\n\n // Additional form check in case form was added after initial load\n this.checkForForm();\n }\n\n disconnectedCallback() {\n if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n removeEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.eventsAttached = false;\n }\n this.allowScroll();\n }\n\n //#endregion LIFECYCLE\n /***************************************************************************/\n //#region RENDER\n\n render() {\n const hasForm = this.form \|\| this.el.querySelector('form');\n\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <dialog\n ref={el => (this.dialogElement = el)}\n onClose={this.handleDialogClose}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog-header\"\n aria-describedby=\"dialog-content\"\n class={clsx({ full: this.full })}\n >\n <div class=\"content\">\n {!this.undismissable && (\n <nv-button\n class=\"close-button\"\n emphasis=\"lower\"\n size=\"sm\"\n onClick={this.handleCloseButton}\n aria-label=\"Close dialog\"\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </nv-button>\n )}\n\n {this.headerElement ? (\n <slot name=\"header\"></slot>\n ) : (\n <nv-dialogheader id=\"dialog-header\"></nv-dialogheader>\n )}\n\n <div class=\"content-body\" id=\"dialog-content\">\n <slot></slot>\n </div>\n\n {this.footerElement ? (\n <slot name=\"footer\"></slot>\n ) : (\n <nv-dialogfooter\n form={this.form}\n primaryButtonType={\n hasForm ? ButtonType.Submit : ButtonType.Button\n }\n onDialogCanceled={this.handleCancelButton}\n undismissable={this.undismissable}\n ></nv-dialogfooter>\n )}\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nv-dialog.js","sourceRoot":"","sources":["../../../src/components/nv-dialog/nv-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Method,\n Event,\n EventEmitter,\n Watch,\n Listen,\n} from '@stencil/core';\nimport { tabbable } from 'tabbable';\nimport {\n addEventListeners,\n removeEventListeners,\n type EventsAndListeners,\n} from '../../utils/events.utils';\nimport clsx from 'clsx';\nimport { ButtonType } from '../../utils/constants';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Body of the dialog.\n * @slot trigger - Content to be placed as the trigger, will override the trigger prop.\n * @slot header - Content to be placed as the header, will override the header prop.\n * @slot footer - Content to be placed as the footer, will override the footer prop.\n /\n@Component({\n tag: 'nv-dialog',\n styleUrl: 'nv-dialog.scss',\n shadow: false,\n})\nexport class NvDialog {\n @Element() el: HTMLNvDialogElement;\n private dialogElement!: HTMLDialogElement;\n private eventsAttached = false;\n private form: string;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /\n @internal\n * Accepts a reference to the DOM element acting as the header. This should\n * be used when the slot for the header is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n headerElement: Element;\n\n /\n @internal\n * Accepts a reference to the DOM element acting as the footer. This should\n * be used when the slot for the footer is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n footerElement: Element;\n\n /\n Use this prop to toggle the visibility of the dialog. Set to true to show\n * the dialog and false to hide it.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n If true, the dialog cannot be closed by the user.\n /\n @Prop({ reflect: true })\n readonly undismissable: boolean = false;\n\n /\n If true, the dialog will be closed when the backdrop is clicked.\n /\n @Prop({ reflect: true })\n readonly clickOutside: boolean = false;\n\n /\n If true, the dialog visibility is managed manually through methods or the\n * open prop.\n /\n @Prop({ reflect: true })\n readonly controlled: boolean = false;\n\n /\n If true, the dialog takes full width styling.\n /\n @Prop({ reflect: true })\n readonly full: boolean = false;\n\n /\n Controls whether the dialog should automatically focus the first focusable\n * element when opened. When disabled, prevents unwanted tooltip triggers on\n * dialog open.\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 METHODS\n\n /\n * Call this method to show the dialog, making it visible on the screen.\n /\n @Method()\n public async show() {\n this.open = true;\n this.preventScroll();\n /* It is recommended to use the .show() or .showModal() method to render\n * dialogs, rather than the open attribute. If a <dialog> is opened using\n * the open attribute, it is non-modal. /\n this.dialogElement.showModal();\n }\n\n /\n Call this method to hide the dialog, making it disappear from view.\n /\n @Method()\n public async close() {\n this.open = false;\n this.allowScroll();\n this.dialogElement.close();\n }\n\n /\n Sets the autofocus on the first focusable element in the dialog.\n /\n private setAutofocus() {\n const focusableElements = tabbable(this.dialogElement, {\n displayCheck: 'none',\n });\n\n if (focusableElements.length > 0) {\n // Convert to array and find element with smallest top and left position\n let topLeftElement = focusableElements[0];\n let topLeftRect = topLeftElement.getBoundingClientRect();\n\n focusableElements.forEach(element => {\n const rect = element.getBoundingClientRect();\n if (rect.top < topLeftRect.top \|\| rect.left < topLeftRect.left) {\n topLeftElement = element;\n topLeftRect = rect;\n }\n });\n\n // Set autofocus attribute on the found element\n topLeftElement.setAttribute('autofocus', 'true');\n }\n }\n\n /\n Attaches event listeners to the dialog.\n /\n private attachEventListeners() {\n if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n addEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.eventsAttached = true;\n }\n }\n\n /\n Prevents the body from scrolling when the dialog is open.\n * Compensates for scrollbar width to prevent layout shift.\n /\n private preventScroll() {\n // Calculate scrollbar width\n const scrollBarWidth =\n window.innerWidth - document.documentElement.clientWidth;\n\n // Apply overflow hidden and padding compensation\n document.documentElement.style.overflow = 'hidden';\n document.documentElement.style.paddingRight = `${scrollBarWidth}px`;\n }\n\n /\n Allows the body to scroll when the dialog is closed.\n * Removes the applied overflow and padding styles.\n /\n private allowScroll() {\n // Remove the applied styles\n document.documentElement.style.removeProperty('overflow');\n document.documentElement.style.removeProperty('padding-right');\n }\n\n private ensureFormId(formElement: HTMLFormElement): string {\n if (!formElement.id) {\n formElement.id = `dialog-form-${uuidv4()}`;\n }\n return formElement.id;\n }\n\n /\n Checks for and sets up form ID if a form is present\n /\n private checkForForm = () => {\n if (!this.form) {\n const formElement = this.el.querySelector('form') as HTMLFormElement;\n if (formElement) {\n this.form = this.ensureFormId(formElement);\n }\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the dialog is closing in order to allow for cleanup, data-capture, etc.\n * @bind open\n /\n @Event()\n openChanged: EventEmitter<boolean>;\n\n /\n Handles the native dialog close event.\n /\n private handleDialogClose = () => {\n if (this.open) {\n this.close();\n }\n };\n\n /\n Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.\n * @param {KeyboardEvent} event - The keydown event.\n /\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Escape') return;\n\n if (this.undismissable) {\n event.preventDefault();\n event.stopPropagation();\n } else {\n this.close();\n }\n }\n\n /\n Handles the click event to close the dialog when clickOutside is true.\n * @param {MouseEvent} event - The click event.\n /\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (event.target === this.dialogElement) {\n this.close();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private triggerClickEvents: EventsAndListeners = [\n ['click', this.show],\n [\n 'keydown',\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.show();\n }\n },\n ],\n ];\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async handleDialogOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.show();\n this.openChanged.emit(isOpen);\n } else {\n this.close();\n this.openChanged.emit(isOpen);\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n /\n * Lifecycle method that runs before the component loads.\n * Initializes the trigger, header, and footer elements by finding them in the component's children.\n * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)\n /\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n\n this.headerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'header' \|\|\n child.tagName.toLowerCase() === 'nv-dialogheader'\n );\n }) as HTMLElement;\n\n this.footerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'footer' \|\|\n child.tagName.toLowerCase() === 'nv-dialogfooter'\n );\n }) as HTMLElement;\n\n // Initial form check\n this.checkForForm();\n }\n\n componentWillUpdate() {\n this.attachEventListeners();\n }\n\n componentDidLoad() {\n if (this.open) {\n this.show();\n }\n // Only set autofocus if the prop is true and no element already has autofocus\n if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {\n this.setAutofocus();\n }\n this.attachEventListeners();\n\n // Additional form check in case form was added after initial load\n this.checkForForm();\n }\n\n disconnectedCallback() {\n if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n removeEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.eventsAttached = false;\n }\n this.allowScroll();\n }\n\n //#endregion LIFECYCLE\n /***************************************************************************/\n //#region RENDER\n\n render() {\n const hasForm = this.form \|\| this.el.querySelector('form');\n\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <dialog\n ref={el => (this.dialogElement = el)}\n onClose={this.handleDialogClose}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog-header\"\n aria-describedby=\"dialog-content\"\n class={clsx({ full: this.full })}\n >\n <div class=\"content\">\n {!this.undismissable && (\n <nv-button\n class=\"close-button\"\n emphasis=\"lower\"\n size=\"sm\"\n onClick={this.handleDialogClose}\n aria-label=\"Close dialog\"\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </nv-button>\n )}\n\n {this.headerElement ? (\n <slot name=\"header\"></slot>\n ) : (\n <nv-dialogheader id=\"dialog-header\"></nv-dialogheader>\n )}\n\n <div class=\"content-body\" id=\"dialog-content\">\n <slot></slot>\n </div>\n\n {this.footerElement ? (\n <slot name=\"footer\"></slot>\n ) : (\n <nv-dialogfooter\n form={this.form}\n primaryButtonType={\n hasForm ? ButtonType.Submit : ButtonType.Button\n }\n onDialogCanceled={this.handleDialogClose}\n undismissable={this.undismissable}\n ></nv-dialogfooter>\n )}\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/nv-dialogheader/nv-dialogheader.css CHANGED Viewed

@@ -11,6 +11,7 @@ nv-dialogheader .heading {
   font-size: var(--font-size-lg);
   font-style: normal;
   font-weight: 500;
+  padding-right: var(--spacing-7);
   line-height: var(--leading-px-6); /* 133.333% */
   letter-spacing: var(--letter-spacing-heading-xs);
 }

package/dist/collection/components/nv-fieldselect/nv-fieldselect.css CHANGED Viewed

@@ -232,6 +232,8 @@ nv-fieldselect .select-wrapper .select-container select option {
   font-style: normal;
   font-weight: 500;
   line-height: var(--form-field-line-height, 24px);
+  background-color: var(--color-level-05-background);
+  color: var(--components-form-field-content-text);
 }
 nv-fieldselect .select-wrapper .select-container select.hidden {
   display: none;

package/dist/collection/components/nv-fieldselect/nv-fieldselect.docs.js CHANGED Viewed

@@ -151,30 +151,30 @@ const NvFieldselectDocs = {
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Error Description"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
         {
-            name: 'Options JSON',
+            name: 'Options Array',
             args: {
-                label: 'Select with JSON Options',
-                options: JSON.stringify([
+                label: 'Select with Options Array',
+                options: [
                     { label: 'Paris', value: 'paris' },
                     { label: 'London', value: 'london' },
                     { label: 'New York', value: 'ny' },
                     { label: 'Tokyo', value: 'tokyo', disabled: true },
                     { label: 'Berlin', value: 'berlin' },
-                ]),
+                ],
             },
             template: h("nv-fieldselect", { "data-storybook-args": true }),
         },
         {
-            name: 'Options JSON Preselected',
+            name: 'Options Array with Preselection',
             args: {
-                label: 'Select with Preselected JSON Option',
-                options: JSON.stringify([
+                label: 'Select with Preselected Option',
+                options: [
                     { label: 'Paris', value: 'paris' },
                     { label: 'London', value: 'london', selected: true },
                     { label: 'New York', value: 'ny' },
                     { label: 'Tokyo', value: 'tokyo', disabled: true },
                     { label: 'Berlin', value: 'berlin' },
-                ]),
+                ],
             },
             template: h("nv-fieldselect", { "data-storybook-args": true }),
         },

package/dist/collection/components/nv-fieldselect/nv-fieldselect.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldselect/nv-fieldselect.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 NvFieldselectDocs: NovaDocs<Components.NvFieldselect> = {\n component: 'nv-fieldselect',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n {\n name: 'Default',\n description: 'A default nv-fieldselect with no specific props set.',\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.label),\n args: {\n label: 'Select Label',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.description),\n args: {\n label: 'Select with Description',\n description: 'This is a description.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'Placeholder',\n description:\n 'Display temporary text inside the select field to give users a hint about what to choose.',\n args: {\n label: 'Select with Placeholder',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"\" disabled>\n Choose an option...\n </option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.value),\n args: {\n label: 'Select Value',\n value: '2',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.disabled),\n args: {\n label: 'Disabled Select',\n disabled: true,\n value: '3',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.readonly),\n args: {\n label: 'Readonly Select',\n readonly: true,\n value: '1',\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n <nv-fieldselect data-storybook-args multiple={true}>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.displayValue),\n args: {\n label: 'Readonly Select with Display Label',\n readonly: true,\n displayValue: true,\n value: '1',\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </nv-fieldselect>\n <nv-fieldselect data-storybook-args multiple={true}>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.required),\n args: {\n label: 'Required Field',\n required: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.error),\n args: {\n label: 'Error State',\n error: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.success),\n args: {\n label: 'Success State',\n success: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.multiple),\n args: {\n label: 'Multiple Select',\n multiple: true,\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n <nv-fieldselect value=\"1, 2\" data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotLabel',\n description:\n 'You can use the `label` slot to customize the content of the label.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"label\">Label</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotDescription',\n description:\n 'You can use the `description` slot to customize the content of the description.',\n args: {\n label: 'Select with Description',\n description: 'This is a description.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"description\">Description</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotBefore',\n description:\n 'You can use the `before` slot to customize the content before the select.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"before\">Before</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotAfter',\n description:\n 'You can use the `after` slot to customize the content after the select.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"after\">After</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotErrorDescription',\n description:\n 'You can use the `error-description` slot to customize the content of the error description.',\n args: {\n label: 'Select with Error',\n error: true,\n errorDescription: 'This is an error.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"error-description\">Error Description</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'Options JSON',\n args: {\n label: 'Select with JSON Options',\n options: JSON.stringify([\n { label: 'Paris', value: 'paris' },\n { label: 'London', value: 'london' },\n { label: 'New York', value: 'ny' },\n { label: 'Tokyo', value: 'tokyo', disabled: true },\n { label: 'Berlin', value: 'berlin' },\n ]),\n },\n template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n },\n {\n name: 'Options JSON Preselected',\n args: {\n label: 'Select with Preselected JSON Option',\n options: JSON.stringify([\n { label: 'Paris', value: 'paris' },\n { label: 'London', value: 'london', selected: true },\n { label: 'New York', value: 'ny' },\n { label: 'Tokyo', value: 'tokyo', disabled: true },\n { label: 'Berlin', value: 'berlin' },\n ]),\n },\n template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n },\n ],\n};\n\nexport default NvFieldselectDocs;\n"]}
1	+ {"version":3,"file":"nv-fieldselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldselect/nv-fieldselect.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 NvFieldselectDocs: NovaDocs<Components.NvFieldselect> = {\n component: 'nv-fieldselect',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n {\n name: 'Default',\n description: 'A default nv-fieldselect with no specific props set.',\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.label),\n args: {\n label: 'Select Label',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.description),\n args: {\n label: 'Select with Description',\n description: 'This is a description.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'Placeholder',\n description:\n 'Display temporary text inside the select field to give users a hint about what to choose.',\n args: {\n label: 'Select with Placeholder',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"\" disabled>\n Choose an option...\n </option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.value),\n args: {\n label: 'Select Value',\n value: '2',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.disabled),\n args: {\n label: 'Disabled Select',\n disabled: true,\n value: '3',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.readonly),\n args: {\n label: 'Readonly Select',\n readonly: true,\n value: '1',\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n <nv-fieldselect data-storybook-args multiple={true}>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.displayValue),\n args: {\n label: 'Readonly Select with Display Label',\n readonly: true,\n displayValue: true,\n value: '1',\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </nv-fieldselect>\n <nv-fieldselect data-storybook-args multiple={true}>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.required),\n args: {\n label: 'Required Field',\n required: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.error),\n args: {\n label: 'Error State',\n error: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.success),\n args: {\n label: 'Success State',\n success: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.multiple),\n args: {\n label: 'Multiple Select',\n multiple: true,\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n <nv-fieldselect value=\"1, 2\" data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotLabel',\n description:\n 'You can use the `label` slot to customize the content of the label.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"label\">Label</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotDescription',\n description:\n 'You can use the `description` slot to customize the content of the description.',\n args: {\n label: 'Select with Description',\n description: 'This is a description.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"description\">Description</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotBefore',\n description:\n 'You can use the `before` slot to customize the content before the select.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"before\">Before</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotAfter',\n description:\n 'You can use the `after` slot to customize the content after the select.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"after\">After</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotErrorDescription',\n description:\n 'You can use the `error-description` slot to customize the content of the error description.',\n args: {\n label: 'Select with Error',\n error: true,\n errorDescription: 'This is an error.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"error-description\">Error Description</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'Options Array',\n args: {\n label: 'Select with Options Array',\n options: [\n { label: 'Paris', value: 'paris' },\n { label: 'London', value: 'london' },\n { label: 'New York', value: 'ny' },\n { label: 'Tokyo', value: 'tokyo', disabled: true },\n { label: 'Berlin', value: 'berlin' },\n ],\n },\n template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n },\n {\n name: 'Options Array with Preselection',\n args: {\n label: 'Select with Preselected Option',\n options: [\n { label: 'Paris', value: 'paris' },\n { label: 'London', value: 'london', selected: true },\n { label: 'New York', value: 'ny' },\n { label: 'Tokyo', value: 'tokyo', disabled: true },\n { label: 'Berlin', value: 'berlin' },\n ],\n },\n template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n },\n ],\n};\n\nexport default NvFieldselectDocs;\n"]}

package/dist/collection/components/nv-fieldselect/nv-fieldselect.js CHANGED Viewed

@@ -16,10 +16,6 @@ export class NvFieldselect {
         //#region STATES
         this.computedDisplayValue = '';
         this.internalReadonly = false;
-        /**
-         * Parsed options stored internally
-         */
-        this.parsedOptions = [];
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
@@ -169,24 +165,16 @@ export class NvFieldselect {
         }
     }
     /**
-     * Parse options and update the internal state
-     * @param {string} newValue - The new value of options
+     * Handle options change and update the internal state
+     * @param {typeof this.options} newValue - The new value of options
      */
     handleOptionsChange(newValue) {
-        if (typeof newValue === 'string') {
-            try {
-                const parsedOpts = JSON.parse(newValue);
-                this.parsedOptions = [...parsedOpts];
-                // Update the value if an option is pre-selected
-                const selectedOption = parsedOpts.find(opt => opt.selected);
-                if (selectedOption) {
-                    this.value = selectedOption.value;
-                }
-            }
-            catch (error) {
-                console.error('Error parsing options:', error);
-                this.parsedOptions = [];
-            }
+        if (!newValue)
+            return;
+        // Update the value if an option is pre-selected
+        const selectedOption = newValue.find(opt => opt.selected);
+        if (selectedOption) {
+            this.value = selectedOption.value;
         }
     }
     /**
@@ -347,13 +335,13 @@ export class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (h(Host, { key: 'ff869c177289342a39ae292a530359af940a5669' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '10815f70059de9b1774ccc26b69d441d250e1833', htmlFor: this.inputId }, h("slot", { key: 'afe78cd3671151060fd1e2a37b77c164767908fa', name: "label" }, this.label))), h("div", { key: '064d8f512bc5f11831096d3a092afb00dcfeb1bc', class: "select-wrapper" }, h("slot", { key: 'c12d375bc5a558d25f1eb34343e2ad5fce784558', name: "before-input" }), h("div", { key: 'ffb39cfc0444edc49a4e2b6318990085009d7598', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: 'd5fccac0e92fe0553b8478a6f5dc9be4591e8c23', name: "leading-input" }), this.internalReadonly && (h("input", { key: '94dc05d08de8120c78fa140df5eb3adc09ce97da', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (h(Host, { key: '6db1f2e159308d8b1e78932522c62f73e78db893' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c329b6bb95018b0d9e574516ca8e801ea82828be', htmlFor: this.inputId }, h("slot", { key: '94d57fd7026986a8ef86dacffb70f0e590c8d2d7', name: "label" }, this.label))), h("div", { key: 'fca0df783ac46ebd16aa8b6e8db1450d81d2a0e7', class: "select-wrapper" }, h("slot", { key: 'bd944f336912516b83f32f58bd76a7ff80de2fb6', name: "before-input" }), h("div", { key: '42729a7ba192d85fa76abef9b928c98e514f7ff3', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '90ca0a9446a62a756e19b0b71db10fe8147eba25', name: "leading-input" }), this.internalReadonly && (h("input", { key: '55b2cf61b1ad07479a104c8d2ff4f46f41dd1677', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), h("select", { key: '85ffba58429aaa393cc9178e0866a61f85d92103', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), h("select", { key: '482be9d241679ad9f77f199c00b4a8d0434ac91e', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '694b0306ddaf671faea9dd863bb7f2917b567ffb', class: "select-icons" }, this.error && (h("nv-icon", { key: '4f86b0916dcbfefb24af5e5e2c0ca009ece6193b', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'f99ba37d4a70b7c352b4abb0be0b5eb85b4cc947', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: 'b152a3b110b0f780b29adcf1efb4aadf98cf81be', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '63c6076165bae5d36732179c4a761d5b381076b5', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'dd3e41b62290c580e050eb5a4742aabc7395cbda', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '87bedab511a8b3d07d6616e4937342b6d272c5f3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'd4cf69f5f2446fbbf8ed36910d89c3aa7ac2c826', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '2fc8b58658bd406af834dcad378b3b00aca40b22', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '17a31f45608536be911f3fca1e28e11caac7a065', class: "select-icons" }, this.error && (h("nv-icon", { key: 'f8f6f1545d87cfdf174755da82780356480de737', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'f79e5968a6fc70cf56c07223a8a569648d77c082', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: 'd7f2c576a6c6c5d964f692c1f520d0e71af82f35', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '852c05430b705347f473899ff884725b511d527d', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '3f98fb2ee526fae3c74f2e2dd78d5f10b9e13475', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '268191d3ffc3191d7c946d805c6cd58dc1855dda', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '24b5935d22d7971f6aa5922a1fa8c47b8beb069f', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '5492aecb0537f91f8cf38430b4048bb7bd13edf8', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldselect"; }
     static get formAssociated() { return true; }
@@ -414,23 +402,26 @@ export class NvFieldselect {
                 "reflect": true
             },
             "options": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Array<{\n    /**\n     * The label of the option\n     */\n    label: string;\n    /**\n     * The value of the option\n     */\n    value: string;\n    /**\n     * Whether the option is selected\n     */\n    selected?: boolean;\n    /**\n     * Whether the option is disabled\n     */\n    disabled?: boolean;\n  }>",
+                    "resolved": "{ label: string; value: string; selected?: boolean; disabled?: boolean; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Options to display in the select. Can be passed as a JSON string.\nFormat: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]"
+                    "text": "Options to display in the select.\nFormat: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "options",
-                "reflect": true
+                "setter": false
             },
             "inputId": {
                 "type": "string",
@@ -739,8 +730,7 @@ export class NvFieldselect {
     static get states() {
         return {
             "computedDisplayValue": {},
-            "internalReadonly": {},
-            "parsedOptions": {}
+            "internalReadonly": {}
         };
     }
     static get events() {