npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.21.0 → 3.22.0 - Mend

@nova-design-system/nova-webcomponents 3.21.0 → 3.22.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 (318) hide show

package/dist/cjs/nv-row.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7349317dfee793dd34ceab919bae6155811f25f4' }, index.h("slot", { key: '0b31cf4d03d1057ec6f02b65b0ace85ee390cbc4' })));
+        return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/nv-split.cjs.entry.js CHANGED Viewed

@@ -324,7 +324,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd0bcb4330d157fa239289fa7176c502bfe01d0b8', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '490799f805f0833e5a33b480e205c8deb65f215b', name: "pane" }), index.h("slot", { key: '69d05ed6f6bbeac1f123ac100c753cf78ced3f08', name: "gutter" })));
+        return (index.h(index.Host, { key: '6b1fd4447295f209a9b0ea95b7d2a07200204504', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '67089b66457c4ad64abb80749d64ca67c881a1c0', name: "pane" }), index.h("slot", { key: '2fe9da5dd2aa2ff5b14bdd9ea99e9f0fa027931d', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-stack.cjs.entry.js CHANGED Viewed

@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
+        return (index.h(index.Host, { key: '65adeb492f9eb9b709c809d65b52f4447d1c938d', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '09773d6affbc9bf3c18e75162d9c096dd31a48e7' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/nv-table.cjs.entry.js CHANGED Viewed

@@ -236,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, index.h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
+        return (index.h(index.Host, { key: '684a51e016d83eeb0ab76f07fe6d26a06bf00457' }, index.h("slot", { key: '420b9cbcb641692ed95d54ec2e0af1c0b09776c3' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/nv-tableheader.cjs.entry.js CHANGED Viewed

@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ff2fc290253d468d2d139afdc708b012258b3f31', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '3c70c590cc33ca2d722dbc3313c9e10583bfa631' }), this.sortable && (index.h("span", { key: '219a872d53157545302495cec6844d55b5026e00', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'd39698493a8504bb7e2af6fa52ac4c548b91bf40', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '03d7e74c19c0c1ef54f4d6f53eab0964af821f57', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '7408d11ba38b59f05bcdcffcb55d11ae36f93a34' }), this.sortable && (index.h("span", { key: 'c76ddbf61861d9cd45eb7b0d8c59095947677135', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '6d59b4b14dfe588142ccba2e1dc452754ea5a2f7', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/cjs/nv-toggle.cjs.entry.js CHANGED Viewed

@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8e5b801ed4263b02b9b00628e94de448986eca98', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'b25ed406fae37d41f1c1fbe4234ded3f94db14b0', class: "input-container" }, index.h("input", { key: '5a98b81705597f2a115517b6031289ee9be54bda', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '89366dfe5c0106d7e28a858745941f0358220ce7', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3f0192378adbd8d5d5f5f5684d1e929462d7832b', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'ee95958740e62af025bc4a456fe1b9f12b9aac71', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'eee5a91ccbe1eed1d2ce41c0ce08cf8b49440501', class: "description" }, index.h("slot", { key: 'a925c57db61229d032412e315ff1f738a479b090', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'c4307e84431894271a4fbe3ccd236f8b26d8d499', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'edb8c0ba8d92aa3864ff778a037bfb148601663a', class: "input-container" }, index.h("input", { key: 'f8be6f1936b390acdfaab0a87acea69d479e7a5a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'c9dae62cda7d33fcd3dc4e1a2fd8173295a32ed3', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '365ed61ccd3ca72372998b4a3fc58d36de944f3a', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '77ee33f84756787e0f34507da294abb9514b703d', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5076c7b3cbf9f820592bb339df3251e280a9be9c', class: "description" }, index.h("slot", { key: '75f461109ac021aa51e6717ab56b1319a2b7f6ca', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-togglebutton.cjs.entry.js CHANGED Viewed

@@ -48,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'a36d2ac3ed287145dae1812e8488313e7509b979', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '463f95e6e68148d94047e8b71c99c449dccffbd6' })));
+        return (index.h(index.Host, { key: 'ef2adf60f4a453ba0c5c7bd83d3fc52d5c37f5d8', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '242d30a2d6f3d0cbaba1ee8cfb4abb2e607b66c4' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/nv-togglebuttongroup.cjs.entry.js CHANGED Viewed

@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '02b7814ffceeaa875edcbce4ebdd6465b24abf62' }, index.h("slot", { key: '89c9387a50ec0c1c660e490b66742be96e6f6b3e' })));
+        return (index.h(index.Host, { key: '8b42c5392c429b249ccc8be4f97fa6eccf4e2383' }, index.h("slot", { key: '78046dc23352a3fab760cc3c1b53edc47e16d48b' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-tooltip.cjs.entry.js CHANGED Viewed

@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2ec10db6ad78e1637696e383069caf3fc8919587' }, index.h("slot", { key: '0df02ac8d76de82ae25ec3d9c73ef18cd6eee4d8' }), index.h("nv-popover", { key: '1ed0766ed0c3d43952be2be0dbafd94f07ec44b3', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'bd44fba212d86969688bdf3e00a711f152500952', slot: "content" }, this.message), index.h("slot", { key: '31f2c47d800e4bd057c7475de931e11542eb5208', name: "content" }))));
+        return (index.h(index.Host, { key: 'f0560549d1168fed22c4e48a2e11be5dda49f005' }, index.h("slot", { key: '698227e9bea7ea94eff00ff72f124656ed11624d' }), index.h("nv-popover", { key: 'df4ddd77e40b4998a32e166710a2ff27a1e0c216', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'b8fc42997671fafc15173bce2fdf7dec667d76e5', slot: "content" }, this.message), index.h("slot", { key: '5b8a27ff474367ba2e5771deb62137e40f5d911d', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -5,34 +5,42 @@
  * Usage:
  * @include scrollbar();
  */
-dialog {
+nv-dialog dialog {
+  width: 100vw;
+  height: 100svh;
+  margin: 0;
+  max-height: unset;
+  max-width: unset;
+  padding: 0;
+  background: color-mix(in srgb, var(--components-overlay-background) 70%, transparent);
+  backdrop-filter: blur(4px);
+}
+nv-dialog dialog.full .content {
+  min-width: 90vw;
+  width: 90vw;
+  max-width: 90vw;
+}
+nv-dialog .backdrop {
+  display: flex;
+  min-height: 100%;
+  padding: var(--spacing-3);
+  /* shadow/2xl */
+  box-shadow: 0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3);
+}
+nv-dialog .backdrop .content {
   border-radius: var(--radius-rounded-2xl);
   background: var(--color-level-00-background);
   min-width: min(90vw, 400px);
   width: fit-content;
   max-width: clamp(90vw, min(90vw, 960px), 960px);
   margin: auto;
-  max-height: 90vh;
-  overflow: hidden;
-  /* shadow/2xl */
-  box-shadow: 0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3);
-}
-dialog.full {
-  width: 90vw;
-}
-dialog::backdrop {
-  opacity: var(--components-overlay-opacity);
-  background: var(--components-overlay-background);
-}
-dialog .content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   height: fit-content;
-  max-height: 90vh;
-  overflow: hidden;
+  position: relative;
 }
-dialog .content nv-button.close-button {
+nv-dialog .backdrop .content nv-button.close-button {
   position: absolute;
   top: var(--dialog-dismissible-position-top);
   right: var(--dialog-dismissible-position-right);
@@ -42,8 +50,7 @@ dialog .content nv-button.close-button {
   align-items: flex-start;
   gap: 10px;
 }
-dialog .content .content-body {
-  overflow: auto;
+nv-dialog .backdrop .content .content-body {
   box-sizing: border-box;
   padding: var(--dialog-body-padding-y) var(--dialog-body-padding-x);
   scrollbar-gutter: stable both-edges;
@@ -56,15 +63,15 @@ dialog .content .content-body {
   color: var(--color-content-medium-text);
   width: 100%;
 }
-dialog .content .content-body::-webkit-scrollbar {
+nv-dialog .backdrop .content .content-body::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-dialog .content .content-body::-webkit-scrollbar-track {
+nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track {
   background-color: var(--color-level-10-background);
   border-radius: 9999px;
 }
-dialog .content .content-body::-webkit-scrollbar-thumb {
+nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb {
   background-color: var(--color-gray-200);
   border-radius: 9999px;
 }

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

@@ -2,7 +2,14 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvDialogDocs = {
     component: 'nv-dialog',
-    subcomponents: ['nv-dialogheader', 'nv-dialogfooter', 'nv-button', 'nv-icon'],
+    subcomponents: [
+        'nv-dialogheader',
+        'nv-dialogfooter',
+        'nv-button',
+        'nv-icon',
+        'nv-fielddate',
+        'nv-fielddaterange',
+    ],
     composedComponents: ['nv-dialogheader', 'nv-dialogfooter'],
     stories: [
         // Default
@@ -90,6 +97,12 @@ const NvDialogDocs = {
             descriptionSource: 'nv-dialogfooter',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("form", { id: "test-form" }), h("nv-dialogfooter", { slot: "footer", form: "test-form" }))),
         },
+        // With popover elements
+        {
+            name: 'WithPopoverElements',
+            description: 'The dialog can contain other form elements with popovers.',
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("div", { class: "flex flex-col gap-4" }, h("nv-fielddate", null), h("nv-fielddaterange", null)))),
+        },
     ],
 };
 export default NvDialogDocs;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-dialog.docs.js","sourceRoot":"","sources":["../../../src/components/nv-dialog/nv-dialog.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,YAAY,GAAkC;IAClD,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,~~CAAC,~~iBAAiB,~~EAAE,~~iBAAiB,~~EAAE,~~WAAW,~~EAAE,~~SAAS,~~CAAC~~;~~IAC7E~~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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 NvDialogDocs: NovaDocs<Components.NvDialog> = {\n component: 'nv-dialog',\n subcomponents: ['nv-dialogheader', 'nv-dialogfooter', 'nv-button', 'nv-icon'],\n composedComponents: ['nv-dialogheader', 'nv-dialogfooter'],\n\n stories: [\n // Default\n {\n name: 'Default',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // Open\n {\n name: nameof<Components.NvDialog>(x => x.open),\n args: {\n open: false,\n },\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // Undismissable\n {\n name: nameof<Components.NvDialog>(x => x.undismissable),\n args: {\n undismissable: true,\n },\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // ClickOutside\n {\n name: nameof<Components.NvDialog>(x => x.clickOutside),\n args: {\n clickOutside: true,\n },\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // Full\n {\n name: nameof<Components.NvDialog>(x => x.full),\n args: {\n full: true,\n },\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>\n The dialog will take the full width of the screen regardless of the\n content.\n </p>\n </nv-dialog>\n ),\n },\n // Heading\n {\n name: nameof<Components.NvDialogheader>(x => x.heading),\n descriptionSource: 'nv-dialogheader',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <nv-dialogheader\n slot=\"header\"\n heading=\"Dialog Heading\"\n ></nv-dialogheader>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // Subheading\n {\n name: nameof<Components.NvDialogheader>(x => x.subheading),\n descriptionSource: 'nv-dialogheader',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <nv-dialogheader\n slot=\"header\"\n heading=\"Dialog Heading\"\n subheading=\"Dialog Subheading\"\n ></nv-dialogheader>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // LeadingIcon\n {\n name: nameof<Components.NvDialogfooter>(x => x.leadingIcon),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter slot=\"footer\" leading-icon=\"user\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // TrailingIcon\n {\n name: nameof<Components.NvDialogfooter>(x => x.trailingIcon),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter slot=\"footer\" trailing-icon=\"user\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // Danger\n {\n name: nameof<Components.NvDialogfooter>(x => x.danger),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter slot=\"footer\" danger></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // CancelLabel\n {\n name: nameof<Components.NvDialogfooter>(x => x.cancelLabel),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter\n slot=\"footer\"\n cancel-label=\"Abbrechen\"\n ></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // PrimaryLabel\n {\n name: nameof<Components.NvDialogfooter>(x => x.primaryLabel),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter\n slot=\"footer\"\n submit-label=\"Akzeptieren\"\n ></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // Form\n {\n name: nameof<Components.NvDialogfooter>(x => x.form),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <form id=\"test-form\"></form>\n <nv-dialogfooter slot=\"footer\" form=\"test-form\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n ],\n};\n\nexport default NvDialogDocs;\n"]}
1	+ {"version":3,"file":"nv-dialog.docs.js","sourceRoot":"","sources":["../../../src/components/nv-dialog/nv-dialog.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 NvDialogDocs: NovaDocs<Components.NvDialog> = {\n component: 'nv-dialog',\n subcomponents: [\n 'nv-dialogheader',\n 'nv-dialogfooter',\n 'nv-button',\n 'nv-icon',\n 'nv-fielddate',\n 'nv-fielddaterange',\n ],\n composedComponents: ['nv-dialogheader', 'nv-dialogfooter'],\n\n stories: [\n // Default\n {\n name: 'Default',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // Open\n {\n name: nameof<Components.NvDialog>(x => x.open),\n args: {\n open: false,\n },\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // Undismissable\n {\n name: nameof<Components.NvDialog>(x => x.undismissable),\n args: {\n undismissable: true,\n },\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // ClickOutside\n {\n name: nameof<Components.NvDialog>(x => x.clickOutside),\n args: {\n clickOutside: true,\n },\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // Full\n {\n name: nameof<Components.NvDialog>(x => x.full),\n args: {\n full: true,\n },\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>\n The dialog will take the full width of the screen regardless of the\n content.\n </p>\n </nv-dialog>\n ),\n },\n // Heading\n {\n name: nameof<Components.NvDialogheader>(x => x.heading),\n descriptionSource: 'nv-dialogheader',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <nv-dialogheader\n slot=\"header\"\n heading=\"Dialog Heading\"\n ></nv-dialogheader>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // Subheading\n {\n name: nameof<Components.NvDialogheader>(x => x.subheading),\n descriptionSource: 'nv-dialogheader',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <nv-dialogheader\n slot=\"header\"\n heading=\"Dialog Heading\"\n subheading=\"Dialog Subheading\"\n ></nv-dialogheader>\n <p>Child Content</p>\n </nv-dialog>\n ),\n },\n // LeadingIcon\n {\n name: nameof<Components.NvDialogfooter>(x => x.leadingIcon),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter slot=\"footer\" leading-icon=\"user\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // TrailingIcon\n {\n name: nameof<Components.NvDialogfooter>(x => x.trailingIcon),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter slot=\"footer\" trailing-icon=\"user\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // Danger\n {\n name: nameof<Components.NvDialogfooter>(x => x.danger),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter slot=\"footer\" danger></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // CancelLabel\n {\n name: nameof<Components.NvDialogfooter>(x => x.cancelLabel),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter\n slot=\"footer\"\n cancel-label=\"Abbrechen\"\n ></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // PrimaryLabel\n {\n name: nameof<Components.NvDialogfooter>(x => x.primaryLabel),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <nv-dialogfooter\n slot=\"footer\"\n submit-label=\"Akzeptieren\"\n ></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // Form\n {\n name: nameof<Components.NvDialogfooter>(x => x.form),\n descriptionSource: 'nv-dialogfooter',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <form id=\"test-form\"></form>\n <nv-dialogfooter slot=\"footer\" form=\"test-form\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n // With popover elements\n {\n name: 'WithPopoverElements',\n description: 'The dialog can contain other form elements with popovers.',\n template: (\n <nv-dialog data-storybook-args>\n <nv-button slot=\"trigger\">Open Dialog</nv-button>\n <p>Child Content</p>\n <div class=\"flex flex-col gap-4\">\n <nv-fielddate></nv-fielddate>\n <nv-fielddaterange></nv-fielddaterange>\n </div>\n </nv-dialog>\n ),\n },\n ],\n};\n\nexport default NvDialogDocs;\n"]}

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

@@ -1,6 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { tabbable } from "tabbable";
 import { addEventListeners, removeEventListeners, } from "../../utils/events.utils";
+import { useGrow, useFade, parallel } from "../../animations";
 import clsx from "clsx";
 import { ButtonType } from "../../utils/constants";
 import { v4 as uuidv4 } from "uuid";
@@ -72,13 +73,30 @@ export class NvDialog {
                 this.close();
             }
         };
-        this.handleClickOutside = (event) => {
-            if (event.target === this.dialogElement) {
+        /**
+         * Handles the click event to close the dialog when clickOutside is true.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleDialogClick = (event) => {
+            if (!this.clickOutside || this.undismissable)
+                return;
+            if (this.checkForOpenPopovers())
+                return;
+            if (event.target === this.backdropElement) {
                 this.close();
                 event.preventDefault();
                 event.stopPropagation();
             }
         };
+        this.checkForOpenPopovers = () => {
+            let hasOpenPopover = false;
+            this.el.querySelectorAll('nv-popover').forEach(popover => {
+                if (popover.hasAttribute('open')) {
+                    hasOpenPopover = true;
+                }
+            });
+            return hasOpenPopover;
+        };
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -92,7 +110,18 @@ export class NvDialog {
         /** 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. */
+        const { setFadeOut } = useFade(this.dialogElement);
+        setFadeOut();
         this.dialogElement.showModal();
+        const { setGrowIn, growIn } = useGrow(this.contentElement, {
+            duration: 100,
+            amount: 0.9,
+        });
+        const { fadeIn } = useFade(this.dialogElement, {
+            duration: 100,
+        });
+        setGrowIn();
+        await parallel(fadeIn, growIn).start();
     }
     /**
      * Call this method to hide the dialog, making it disappear from view.
@@ -100,6 +129,14 @@ export class NvDialog {
     async close() {
         this.open = false;
         this.allowScroll();
+        const { growOut } = useGrow(this.contentElement, {
+            duration: 150,
+            amount: 0.85,
+        });
+        const { fadeOut } = useFade(this.dialogElement, {
+            duration: 150,
+        });
+        await parallel(growOut, fadeOut).start();
         this.dialogElement.close();
     }
     /**
@@ -182,23 +219,17 @@ export class NvDialog {
     handleKeyDown(event) {
         if (event.key !== 'Escape')
             return;
-        if (this.undismissable) {
+        if (!this.open)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const hasOpenPopover = this.checkForOpenPopovers();
+        if (!this.undismissable && !hasOpenPopover) {
             event.preventDefault();
             event.stopPropagation();
-        }
-        else {
             this.close();
         }
     }
-    /**
-     * Handles the click event to close the dialog when clickOutside is true.
-     * @param {MouseEvent} event - The click event.
-     */
-    handleDocumentClick(event) {
-        if (!this.clickOutside || this.undismissable)
-            return;
-        this.handleClickOutside(event);
-    }
     //#endregion LISTENERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -236,6 +267,7 @@ export class NvDialog {
         this.attachEventListeners();
         // Additional form check in case form was added after initial load
         this.checkForForm();
+        // this.setupContentBodyListeners();
     }
     disconnectedCallback() {
         if (this.triggerElement && !this.eventsAttached && !this.controlled) {
@@ -249,7 +281,7 @@ export class NvDialog {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (h(Host, { key: 'b32680019247cf7e39b5861a77dce61e08eadd7b' }, h("slot", { key: '104978b5cccd97997955a6c0db21f9549643f40a', name: "trigger" }), h("dialog", { key: '951a58755ac49f6c2b2f427599d5bc2540c65e2e', 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: '96b727e70efe35991086ead905f925af28808cb8', class: "content" }, !this.undismissable && (h("nv-button", { key: '36f2214d2ed81d7b85c3c523f490e75ca2bffc68', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, h("nv-icon", { key: '7a50fc4e330e7ab67bba0fa429c5cd92630014bc', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: 'cf4269a73467794d0158a4e56f34e2a81edd6643', class: "content-body", id: "dialog-content" }, h("slot", { key: 'f91e72aafdd2f5de65ae78262f274b83bd37560d' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable }))))));
+        return (h(Host, { key: '91b36e5daac0251997c7a6794166794f1e89087f' }, h("slot", { key: 'abeef317af74093c9b09fa6f2d300c23bbde54a6', name: "trigger" }), h("dialog", { key: '1eb417dc921bca7837aa05aad9c252fba7d9d920', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: '8ec55c461a747ebb4556fbf791ee1d66d3bcc51a', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: '373beedad09464f3473935e0464b3f51133e0372', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (h("nv-button", { key: '5e94d056687837b017991f54df6cf350159addcc', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, h("nv-icon", { key: '98db7848b9796589b9e7670c62a26417228a15d6', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: '611eb7914b65d5a27513f91eb458a578dbc63734', class: "content-body", id: "dialog-content" }, h("slot", { key: 'caf21876e6a33e997eccdc577fb43d6e63fcfc90' })), 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() {
@@ -537,12 +569,6 @@ export class NvDialog {
                 "target": "document",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "click",
-                "method": "handleDocumentClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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 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 /*************************************************************************/\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 /\n Handles the native dialog close event.\n /\n private handleDialogClose = () => {\n if (this.open) {\n this.close();\n }\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 //#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 //#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 LISTENERS\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 //#endregion LISTENERS\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 //#endregion RENDER\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 { useGrow, useFade, parallel } from '../../animations';\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 backdropElement!: HTMLDivElement;\n private contentElement!: HTMLDivElement;\n private eventsAttached = false;\n private form: string;\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 /*************************************************************************/\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 const { setFadeOut } = useFade(this.dialogElement);\n setFadeOut();\n this.dialogElement.showModal();\n\n const { setGrowIn, growIn } = useGrow(this.contentElement, {\n duration: 100,\n amount: 0.9,\n });\n const { fadeIn } = useFade(this.dialogElement, {\n duration: 100,\n });\n\n setGrowIn();\n await parallel(fadeIn, growIn).start();\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 const { growOut } = useGrow(this.contentElement, {\n duration: 150,\n amount: 0.85,\n });\n const { fadeOut } = useFade(this.dialogElement, {\n duration: 150,\n });\n await parallel(growOut, fadeOut).start();\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 /\n Handles the native dialog close event.\n /\n private handleDialogClose = () => {\n if (this.open) {\n this.close();\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 //#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 LISTENERS\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 if (!this.open) return;\n\n event.preventDefault();\n event.stopPropagation();\n const hasOpenPopover = this.checkForOpenPopovers();\n\n if (!this.undismissable && !hasOpenPopover) {\n event.preventDefault();\n event.stopPropagation();\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 private handleDialogClick = (event: MouseEvent) => {\n if (!this.clickOutside \|\| this.undismissable) return;\n if (this.checkForOpenPopovers()) return;\n\n if (event.target === this.backdropElement) {\n this.close();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private checkForOpenPopovers = (): boolean => {\n let hasOpenPopover = false;\n\n this.el.querySelectorAll('nv-popover').forEach(popover => {\n if (popover.hasAttribute('open')) {\n hasOpenPopover = true;\n }\n });\n\n return hasOpenPopover;\n };\n\n //#endregion LISTENERS\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 // this.setupContentBodyListeners();\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 onClick={this.handleDialogClick}\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=\"backdrop\" ref={el => (this.backdropElement = el)}>\n <div class=\"content\" ref={el => (this.contentElement = el)}>\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 </div>\n </dialog>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}

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

@@ -78,7 +78,7 @@ export class NvDialogfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0868c3af73f89219eee7c006b4ddca47c6da29b0' }, !this.hasSlot ? (h(Fragment, null, !this.undismissable && (h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (h("slot", null))));
+        return (h(Host, { key: '908abbe8e2e9aa215641dd056c70dc16f36c3ac3' }, !this.hasSlot ? (h(Fragment, null, !this.undismissable && (h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (h("slot", null))));
     }
     static get is() { return "nv-dialogfooter"; }
     static get formAssociated() { return true; }

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

@@ -26,7 +26,7 @@ export class NvDialogheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f91a9aea8aa7116266f52bb356ef2ec493df6354' }, !this.hasSlot ? (h(Fragment, null, h("div", { class: "heading" }, this.heading), h("div", { class: "subheading" }, this.subheading))) : (h("slot", null))));
+        return (h(Host, { key: 'e3390a18cd40f00dd70f71b436d3603fdcb2b337' }, !this.hasSlot ? (h(Fragment, null, h("div", { class: "heading" }, this.heading), h("div", { class: "subheading" }, this.subheading))) : (h("slot", null))));
     }
     static get is() { return "nv-dialogheader"; }
     static get originalStyleUrls() {

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

@@ -118,13 +118,13 @@ export class NvFieldcheckbox {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '62195333f84808381f19ca4017916380d20d493f', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: '65f02aee06eacecf83c5297d87130bbe9f85b19c', class: "input-container" }, h("input", { key: 'c3e8fcb41c835f0eba254f9e77de749b7dc6349e', 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: '4db161f34d188b5370f28a39ec9637d269719b04', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: '7608f50840faf35c4da8dbfcc8240becece6f609', class: "input-container" }, h("input", { key: '733ad01f2cadd1e17d6bfc40022ef9ab1db93f0a', 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: '439a8c467373d734293012514cdb22c419b534ae', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: '335a92ed1431fe96af3c7c6fac2f4245c0d4caaa', name: "checked-icon" }, h("svg", { key: '67d97efca27a97c7db77d9f8c182a21fbd21d13c', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '9cb6730b00813e8d4fe6fa14549de6f2a41ea068', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: 'e47b17269156f72ddaf7af1ecc818ae5b6b8c0d3', name: "indeterminate-icon" }, h("svg", { key: '4748acc27a70e74f9228cdb6e41eae4b1ae82559', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '40748b36b277c1ed6ea8fc8f82f4cd687b2f6e3a', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("slot", { key: '0fa9e559cefb8169c20b171fcbb6c1786fd6b3ae' }), h("div", { key: '44eef633025d1a7606979d4d8374c2a04081f45c', class: "text-container" }, h("slot", { key: 'b43251a02b15431f5399c3bced485b89741e069e', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '7781451a357961ce1606b18c590baa344df4ff95', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'b420ad1dbdc05a5c57d0b45e62176866ec0527ca', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '67715bef879e0778b58648b83135edefdbdba53d', class: "description" }, h("slot", { key: 'b1d4d21e83130e19e94efa915abd6661c027bbce', name: "description" }, this.description)))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '157df3faf2cadb4014ba8475c99cf68d86da9f63', hidden: !this.error, class: "error-description" }, h("slot", { key: '42aa95b2332618120d846fa481a1b30b7edeccca', name: "error-description" }, this.errorDescription))))));
+            } }), h("span", { key: '81da5960abee0aa2c74f10612d05388e427b3a1a', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: 'e257ebad9a1c23bc77961645dabe6e0fc8c51440', name: "checked-icon" }, h("svg", { key: 'd4005dfd634169aa14140c7eba1e0ac63e28342d', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '1817c25edf09f09d4317d9e41b52484883c7a943', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '043148db3518e99f2850ffa4b3622f7ae3c654a7', name: "indeterminate-icon" }, h("svg", { key: 'b8a67cfa8d0f880657b62b89ddae7a238b22bc26', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'd63f610ff5cca552d295de18dffeda84cbd370ac', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("slot", { key: 'e4befe30753cd2f76da4af10e648704068f7ce55' }), h("div", { key: '281b4046dbeb8b8dcb05fc154b65ed822fa45960', class: "text-container" }, h("slot", { key: '8e40b1e52c55fa45b38bec26e6b20da90c8553ed', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ad2e4a47d1d5a218835b410579e7e93febd08d15', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '815d03f2c69465e430178c29a885ad770e2c561f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '22159e2cb8c4897507da91ebee09502922093ead', class: "description" }, h("slot", { key: '61b277015ecb4e0e3b813e45dbb6cd7ebe89506b', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '924d333e443c943b5fe37f31e3191d231b9d87e1', hidden: !this.error, class: "error-description" }, h("slot", { key: '2469d3f6cf2121b489b637138642417d27556740', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldcheckbox"; }
     static get formAssociated() { return true; }