npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.44 → 3.0.0-beta.46 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.44 → 3.0.0-beta.46

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 (351) 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: '81e601144158d09429560e6d936454485807d92d' }, index.h("slot", { key: 'f58b212ba8c754db2f84bc48468db5a6ee817f59' })));
+        return (index.h(index.Host, { key: '0b27560267e6f5186ca4237658ad35f3a436b70d' }, index.h("slot", { key: 'b2805eb6abe9d02b57f030c91344ecf4927136d8' })));
     }
 };
 NvRow.style = NvRowStyle0;

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: 'cb020ed488cd43090467bbe122b83b0c714d8606', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'd06069ed1efd5e81b4a32dac07c37ce884841c06' })));
+        return (index.h(index.Host, { key: '9869c0eaa423e363482bd4685dbd082dfba017f5', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'd4b597ec95f71c47edf99d58d22c95a5540e904c' })));
     }
 };
 NvStack.style = NvStackStyle0;

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

@@ -315,14 +315,14 @@ const NvTable = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (index.h(index.Host, { key: 'a08b8c3fbb73b6201ad09ade112f30bf386e9d57' }, index.h("div", { key: '061f5b1e31292efce4d6c97f2377811b0f8c1551', class: "hidden" }, index.h("slot", { key: 'd40cc5c47598873b865bd3175e0f6db00b034a0b' })), index.h("slot", { key: 'e51a7bb121f10cdcf893a594cc27e46b89855403', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
+        return (index.h(index.Host, { key: '89d230b38e5f853a9d8246b3634d25f3add88bb0' }, index.h("div", { key: '130f44d0833635aec8eb1ff5db6f92f5342e39b4', class: "hidden" }, index.h("slot", { key: 'e68523ead80fd187bfb0fc6710aaea42e1d9c4e7' })), index.h("slot", { key: '087164f8a817d99091d54ed841b4faa5f01b215e', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), index.h("slot", { key: '3cf2f0a8de9f52bf60dcd7a641e40e046874c164', name: "after" })));
+        })))))))), index.h("slot", { key: '046b1b705c5885eb2685a0e8780e6eec2f1ca50e', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -6,7 +6,7 @@ const index = require('./index-9bda5507.js');
 const clsx = require('./clsx-fc789adc.js');
 const v4 = require('./v4-7014b8b0.js');
-const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
 const NvToggleStyle0 = nvToggleCss;
 const NvToggle = class {
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '59aa4f6fba2a51afd7e2ed35396e1e906cf338e9', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '5ed63f6be69e49e93e21761e583122f3a5c73ea0', class: "input-container" }, index.h("input", { key: 'dc48775994ef9873478191bdb7ecfb11090b0298', 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: '4731c95eefb7a762f868b5105c613b635be330bf', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '80b0737dc38cbee593cb15f84362cbf2d5a4fbdd', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '8c886a43d3f7e30330f6f2c23f27fd8848bb845d', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '32036ee81dd3d286950d85f7b9ce4a3e06661ed3', class: "description" }, index.h("slot", { key: '090417815292fa0b07bb21551b47630261f7f7dd', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '6e18c6145fccdf7926bcc64a2414e6b41d364487', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'fda6ce7b087d1acef0f2afb24edbdc2566ca6cbf', class: "input-container" }, index.h("input", { key: '53569ce97f75b7a2ac0c94a702096d3f9215432a', 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: '26f0a6f570b8ef4150d53a7733c832f1c5f4343d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5ff30cca4abfd0c2f4283eab6c7ae678653748d3', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'c6cc3536fa741fb89ebb24dfe455957b66edd77b', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '0b1804f9e5407f15037fb6e5c80d7b8dafee5599', class: "description" }, index.h("slot", { key: '8f1b272158ffebb03992ed8c3b115e52504ff8ce', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

	@@ -1 +1 @@
1	- {"file":"nv-toggle.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,w+GAAw+G,CAAC;AAC7/G,uBAAe,WAAW;;MCyBb,QAAQ;IANrB;;;;;;;;;;;QAmBW,YAAO,GAAWA,KAAM,EAAE,CAAC;;;;;QAgC3B,cAAS,GAAY,KAAK,CAAC;;QAWpC,YAAO,GAAY,KAAK,CAAC;;QAIhB,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,aAAQ,GAAY,KAAK,CAAC;KA2FpC;;;;;;;;IArEC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAEDF,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAENA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDA,oEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAEE,SAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhDF,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-toggle/nv-toggle.scss?tag=nv-toggle","src/components/nv-toggle/nv-toggle.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: 450;\n line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--components-form-shape-foreground-default);\n\n &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n color: var(--components-form-shape-foreground-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-toggle-width);\n height: var(--form-toggle-height);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-toggle-radius);\n border-width: var(--form-toggle-border-width);\n border-style: solid;\n border-color: var(--components-form-field-border-default);\n background: var(--components-form-field-background-default);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-switch-dot);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 25%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n border-color: var(--components-form-field-border-hover);\n }\n\n &:focus {\n border-color: var(--components-form-field-border-default);\n }\n\n @include focus-ring();\n\n &:checked {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-background-checked);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-default);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 75%;\n transform: translate(-50%, -50%);\n }\n\n &:focus {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-border-focus);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-form-field-background-disabled);\n border-color: var(--components-form-field-border-default);\n\n &:checked {\n &::after {\n background-color: var(--components-form-shape-foreground-disabled);\n }\n }\n }\n}\n\nnv-toggle {\n @include root-styles();\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n label {\n @include label-styles();\n }\n\n .input-container {\n @include input-container-styles();\n\n input[type=\"checkbox\"] {\n @include input-styles();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n /\n@Component({\n tag: 'nv-toggle',\n styleUrl: 'nv-toggle.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvToggle {\n @Element() el!: HTMLNvToggleElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the toggle input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the toggle input, representing the value sent on\n * form submission when the toggle is checked.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /* The label displayed next to the toggle./\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the toggle, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true })\n readonly labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * toggle.\n /\n @Prop({ reflect: true })\n readonly description?: string;\n\n /* Indicates whether the toggle is checked or not. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the toggle, preventing user interaction. /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the toggle to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /\n Listens for the change event on the toggle input element and updates the checked state.\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly}\n />\n </div>\n\n <div class=\"text-container\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-toggle.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,uoHAAuoH,CAAC;AAC5pH,uBAAe,WAAW;;MCyBb,QAAQ;IANrB;;;;;;;;;;;QAmBW,YAAO,GAAWA,KAAM,EAAE,CAAC;;;;;QAgC3B,cAAS,GAAY,KAAK,CAAC;;QAWpC,YAAO,GAAY,KAAK,CAAC;;QAIhB,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,aAAQ,GAAY,KAAK,CAAC;KA2FpC;;;;;;;;IArEC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAEDF,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAENA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDA,oEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAEE,SAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhDF,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-toggle/nv-toggle.scss?tag=nv-toggle","src/components/nv-toggle/nv-toggle.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: 450;\n line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--components-form-shape-foreground-default);\n\n &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n color: var(--components-form-shape-foreground-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-toggle-width);\n height: var(--form-toggle-height);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-toggle-radius);\n border-width: var(--form-toggle-border-width);\n border-style: solid;\n border-color: var(--components-form-field-border-default);\n background: var(--components-form-field-background-default);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-switch-dot);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 25%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n border-color: var(--components-form-field-border-hover);\n }\n\n &:focus {\n border-color: var(--components-form-field-border-default);\n }\n\n @include focus-ring();\n\n &:checked {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-background-checked);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-default);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 75%;\n transform: translate(-50%, -50%);\n }\n\n &:focus {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-border-focus);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-form-field-background-disabled);\n border-color: var(--components-form-field-border-default);\n\n &:checked {\n &::after {\n background-color: var(--components-form-shape-foreground-disabled);\n }\n }\n }\n}\n\nnv-toggle {\n @include root-styles();\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n label {\n @include label-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .input-container {\n @include input-container-styles();\n\n input[type=\"checkbox\"] {\n @include input-styles();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n /\n@Component({\n tag: 'nv-toggle',\n styleUrl: 'nv-toggle.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvToggle {\n @Element() el!: HTMLNvToggleElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the toggle input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the toggle input, representing the value sent on\n * form submission when the toggle is checked.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /* The label displayed next to the toggle./\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the toggle, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true })\n readonly labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * toggle.\n /\n @Prop({ reflect: true })\n readonly description?: string;\n\n /* Indicates whether the toggle is checked or not. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the toggle, preventing user interaction. /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the toggle to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /\n Listens for the change event on the toggle input element and updates the checked state.\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly}\n />\n </div>\n\n <div class=\"text-container\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

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

@@ -36,7 +36,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e11a19bbdd775cb54b054bd502c589d80feacb35' }, index.h("slot", { key: '9fb404ae962570d3b1f5cdd42ed8673f86eeedae' }), index.h("nv-popover", { key: 'd5114554c2e97909b25dfa7ec0d64a7d10d624ec', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '4d675b15e413054b7bd9fd71df6f3c236c175c47', slot: "content" }, this.message), index.h("slot", { key: '2967e58a96ed6d8d4d0fecc195209c8b2f9d1353', name: "content" }))));
+        return (index.h(index.Host, { key: '42d55bd749a31fc808d6685b75b5002b10575b63' }, index.h("slot", { key: '7ccb801774290a4e47c9bf6e61994936f0cb793e' }), index.h("nv-popover", { key: '6c67ddae0787dbc9e24d239e3b34218dfa997747', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '900d3a61fc7adb7aee3f9982d932c6e2f9889ab3', slot: "content" }, this.message), index.h("slot", { key: '3f5e490d760e723271acef897cf4e0247ca7cd44', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -23,6 +23,17 @@ nv-badge.with-gap {
   width: fit-content;
   gap: var(--badge-gap-x);
 }
+nv-badge.visually-hidden {
+  position: absolute;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+}
 nv-badge:not(.with-gap) {
   padding: var(--badge-padding-y) var(--badge-padding-x);
   display: inline-flex !important;

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

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useFade, useCollapse, timeline } from "../../animations";
 /**
  * @slot leading-icon - Icon before the label.
- * @slot default - Default slot for the badge label.
+ * @slot default - for custom content, for pure text use label instead.
  */
 export class NvBadge {
     constructor() {
@@ -37,7 +37,6 @@ export class NvBadge {
          * Controls the visibility of the badge. Will animate with fade and collapse.
          */
         this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
-        this._isHidden = this.hidden;
         /**
          * When true, the alert does not automatically close upon dismissing.
          * Useful for externally controlled component behavior.
@@ -106,6 +105,7 @@ export class NvBadge {
             this.leadIcon = this.icon;
         }
         if (this.hidden) {
+            this._isHidden = true;
             const { setCollapsed } = useCollapse(this.ref);
             const { setFadeOut } = useFade(this.ref);
             setCollapsed();
@@ -116,10 +116,11 @@ export class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0fe871313f0a98b8dfb4b84e1fc4898ae73baa69', class: clsx(`badge-${this.color} with-gap`, {
+        return (h(Host, { key: '8d97eed4a84f2f913e4f8cd64d08c806d9724f33', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
+                'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, h("slot", { key: '728a5ed5ad4795619bf0bc1c89478c68bc47497a', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '4b48fc280769ffe520c6a8f15eb2b283cb42243b', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: 'c1f3ab6775ffcf3079bf2c861fb34831aa5ffda7' }, this.label), h("span", { key: '352cca4c6a6ffb300c25f7ed05d9fdca3fda161c' }, h("slot", { key: 'a0a36898691b9a3cf42eb1d87ab3fb3084ae8489' })), this.dismissible && (h("button", { key: 'e5702056e9a2080d15df91d2bc3a32898bdc0ce5', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '23a856aaa98c4489cd1dabe2eb4a88a5d9065e92', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '34c2c387727e6b68d37fe2b2ac68c82799356e3d', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: '0c23dd58e48fce39d7935549c6289f87f1fb66af', name: this.leadIcon, size: "sm" })), h("slot", { key: '7485f570aa3cf519b030bedfa8ccf6a6d37d2c1b' }, this.label && h("span", { key: 'eb7afa0eb52582c6d782d2383dfe2eeb41a9649b' }, this.label)), this.dismissible && (h("button", { key: 'bc07eed3e1328a8009cb2c8add026a7f8a5335da', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: 'ab0b2c6224f4b8b147e8158856acbf1ab987b392', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,KAAK,EACL,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElE;;;GAGG;AAMH,MAAM,OAAO,OAAO;IALpB;QAQE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;WAGG;QAEM,cAAS,GAAY,KAAK,CAAC;QAgBpC,uBAAuB;QACvB,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEM,UAAK,GAAY,GAAG,CAAC;QAE9B;;WAEG;QAEM,UAAK,GAAmB,IAAI,CAAC;QAEtC;;WAEG;QAEH,aAAQ,GAAmB,IAAI,CAAC;QAEhC;;WAEG;QAEH,gBAAW,GAAY,KAAK,CAAC;QAE7B;;WAEG;QAEH,WAAM,GAAY,KAAK,CAAC,CAAC,+DAA+D;~~QAEhF,cAAS,GAAY,IAAI,CAAC,MAAM,CAAC;QAEzC~~;;;WAGG;QAEM,qBAAgB,GAAY,KAAK,CAAC;~~QA4F3C~~,sBAAsB;QACtB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;WAGG;QACc,gBAAW,GAAG,CAAC,aAA0B,EAAE,EAAE;YAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACxC,CAAC,CAAC;~~KAqCH~~;~~IAtHC~~,mBAAmB;IACnB,8EAA8E;IAC9E,kBAAkB;IAElB;;;OAGG;IAEH,qBAAqB,CAAC,SAAkB;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;IAC/B,CAAC;IAED;;;OAGG;IAEH,gBAAgB,CAAC,IAAY;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;YAAE,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QAErD,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QACjE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAEtE,IAAI,MAAM,KAAK,IAAI;YAAE,MAAM,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/D,IAAI,MAAM,KAAK,KAAK;YAAE,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;QAE7D,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAExC,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK;YAAE,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;IACxD,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB;;OAEG;IACH,iBAAiB;QACf,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;QACpC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAEzC,YAAY,EAAE,CAAC;YACf,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAkBD,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,~~WAAW~~,EAAE;~~gBAC1C~~,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,iBAAiB,EAAE,IAAI,CAAC,SAAS;aAClC,CAAC;YAEF,6DAAM,IAAI,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,IAAI,~~CAChB~~,~~gEACE,~~IAAI,~~EAAC,cAAc,EACnB,IAAI,~~EAAE,IAAI,CAAC,QAAQ,~~EACnB~~,IAAI,EAAC,IAAI,~~GACA~~,~~CACZ,CACI~~;~~YACN~~,IAAI,CAAC,KAAK,IAAI,+DAAO,IAAI,CAAC,KAAK,CAAQ~~;YACxC;gBACE~~,~~8DAAa,CACR~~;~~YACN~~,IAAI,CAAC,WAAW,IAAI,CACnB,+DAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ;gBAC5D,gEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/*\n @slot leading-icon - Icon before the label.\n * @slot default - ~~Default~~ ~~slot~~ for ~~the~~ ~~badge~~ label.\n /\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n /\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /\n The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n The location of the icon in the badge.\n * @deprecated only leadIcon now.\n /\n @Prop({ reflect: true })\n readonly iconLocation: 'left' \| 'right';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The color of the badge. Use a string between 1 to 10\n /\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /\n Main content of the badge.\n /\n @Prop({ reflect: true })\n readonly label?: string \| null = null;\n\n /\n The lead icon of the badge.\n /\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string \| null = null;\n\n /\n Whether the badge is dismissible.\n /\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /\n Controls the visibility of the badge. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean ~~= this.hidden~~;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the badge is dismissed.\n /\n @Event()\n closeClicked: EventEmitter<MouseEvent>;\n\n /\n Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n /\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n /\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /\n Handles the icon prop change.\n * @param {string} icon - The new icon value.\n /\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /\n Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n /\n * Component will load.\n /\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the close button click.\n * @param {MouseEvent} originalEvent - The original event.\n /\n private readonly handleClose = (originalEvent?: MouseEvent) => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit(originalEvent);\n };\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color} ~~with-gap~~`, {\n 'has-close': this.dismissible,\n 'visually-hidden': this._isHidden,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && ~~(\n~~ <nv-icon~~\n slot=\"leading-icon\"\n~~ name={this.leadIcon}\n size=\"sm\"\n ></nv-icon~~>\n )~~}\n </slot>\n {this.label && <span>{this.label}</span>}~~\n <span>\n <~~slot~~></slot~~>\n ~~</span>\~~n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/*\n @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n /\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n /\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /\n The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n The location of the icon in the badge.\n * @deprecated only leadIcon now.\n /\n @Prop({ reflect: true })\n readonly iconLocation: 'left' \| 'right';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The color of the badge. Use a string between 1 to 10\n /\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /\n Main content of the badge.\n /\n @Prop({ reflect: true })\n readonly label?: string \| null = null;\n\n /\n The lead icon of the badge.\n /\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string \| null = null;\n\n /\n Whether the badge is dismissible.\n /\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /\n Controls the visibility of the badge. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the badge is dismissed.\n /\n @Event()\n closeClicked: EventEmitter<MouseEvent>;\n\n /\n Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n /\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n /\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /\n Handles the icon prop change.\n * @param {string} icon - The new icon value.\n /\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /\n Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n /\n * Component will load.\n /\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the close button click.\n * @param {MouseEvent} originalEvent - The original event.\n /\n private readonly handleClose = (originalEvent?: MouseEvent) => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit(originalEvent);\n };\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible \|\| this.label,\n 'visually-hidden': this._isHidden,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <slot>{this.label && <span>{this.label}</span>}</slot>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}

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

@@ -60,7 +60,7 @@ export class NvBaseComponent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '1294fcaf46e19af023796e1f21cbb2b2506d8163', style: { display: 'block' } }, h("slot", { key: '447dad96223063ef7914d21a98a370a47441d97f' })));
+        return (h(Host, { key: 'ba3d284241a61fa30bd434f563b7e4962ea3f238', style: { display: 'block' } }, h("slot", { key: '44a0f1bc5267cf7e7bd0c1d258e8d9b8020a59f3' })));
     }
     static get is() { return "nv-base"; }
     static get elementRef() { return "el"; }

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

@@ -7,6 +7,17 @@ nv-breadcrumb {
   font-weight: 500;
   line-height: var(--line-height-sm);
 }
+nv-breadcrumb.visually-hidden {
+  position: absolute;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+}
 nv-breadcrumb ul {
   display: flex;
   flex-direction: column;

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

@@ -31,7 +31,7 @@ export class NvBreadcrumb {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '54b25de1375f6a01c5bb5b302474d00c5b26bb33', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '636034df91035bbd6d8e06a53d61a3997a3c5ff2', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: 'ab5b203d0f40b130d31c5a1830278e3cc2117c00', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: 'acb0cd65282b1091823664a9769509cafbba15db', slot: "content" }, h("slot", { key: 'c343113351979000b071404e8edb1632147415e6' })))), h("span", { key: '9ccdb10f973c408b655c4bf94f312fb5d4ac18c7', "data-scope": "separator" }, "/")));
+        return (h(Host, { key: '8ffa46d8714261924aaab55940c7dc6b36f2a9f9', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: 'a2beda9f4b9a5eb71962a1cc060f5467fd2b0134', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: 'd4a837d21c07697d6ef01506169474bd5cf5a304', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: 'bf089278cfe03ed3ae4beeac57ad67dc029b91cf', slot: "content" }, h("slot", { key: '23f21367fc803a5f176947720e55dba4201f64c4' })))), h("span", { key: 'e1a9414f3be1fd6ef3450f3e7b99d7ff091ec2f0', "data-scope": "separator" }, "/")));
     }
     static get is() { return "nv-breadcrumb"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 export class NvBreadcrumbs {
     //#region RENDER
     render() {
-        return (h(Host, { key: '6dd93d8f605b851f8a1d5de50b04b32b694e73e8', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: 'c116a1e51d947a81686770a5283c8efe44de63ef' }, h("slot", { key: '3afae5018687f3906f207aef913c7b329bcfce2f' }))));
+        return (h(Host, { key: '5ab0f09cb86a92464ffcd06d8129543539bdcddf', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: 'a7624a2400d9a91ec477694bbd3600960e198981' }, h("slot", { key: '7c4102ceebe110377bf212e0695bdec6b455ea74' }))));
     }
     static get is() { return "nv-breadcrumbs"; }
     static get originalStyleUrls() {

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

@@ -61,14 +61,16 @@ export class NvButton {
          * @param {Event} event - The click event.
          */
         this.handleButtonClick = (event) => {
+            var _a;
             if (this.loading || this.disabled) {
                 event.preventDefault();
                 return;
             }
-            if (this.form && this.type !== ButtonType.Button) {
+            if (this.type !== ButtonType.Button &&
+                (this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
                 this.processFormAction();
             }
-            else if (this.form) {
+            else if (this.form && this.type === ButtonType.Button) {
                 console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
             }
         };
@@ -138,7 +140,7 @@ export class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2919f1f230ca7c49e4f722832b36cf139f5cebf1', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: 'e2105d891322b9dbe2c5d6138d59533a13115d96', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: 'ba5757e4ff651db4e5a5e074f0fd72590f94fcf6', name: "leading-icon" }), h("slot", { key: 'b0e0c3869846618b0d8558d247e72271838f0a27' }), h("slot", { key: '1cea166b81b36016e095d65691d9d364436f8d91', name: "trailing-icon" })));
+        return (h(Host, { key: '751fa0a552eaf13a193a15f9c9d6fe0c257b93e8', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: 'ae8b39b13bfd6cd8a33f7a30afea19e426d0064d', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: 'e1a213305895c9b35d517bedce3a61f49e39642a', name: "leading-icon" }), h("slot", { key: '2e9e5ed4381790f3c1c06f1a4bf5f60bda79bd1c' }), h("slot", { key: 'e960ec4f4eca0a2a941ca7f3b96a4e31603fa633', name: "trailing-icon" })));
     }
     static get is() { return "nv-button"; }
     static get formAssociated() { return true; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAkB,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE/E;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;IANrB;QAUE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAAoB,IAAI,CAAC;QAEtC;;;;WAIG;QAEM,aAAQ,GAAwB,MAAM,CAAC;QAEhD;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;;;WAIG;QAEH,YAAO,GAAY,KAAK,CAAC;QAEzB;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;WAEG;QAEM,UAAK,GAAY,KAAK,CAAC;QAEhC;;;;WAIG;QAEM,SAAI,GAAoB,QAAQ,CAAC;QAS1C,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;;WAKG;QACK,sBAAiB,GAAG,CAAC,KAAY,EAAQ,EAAE;YACjD,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,~~IAAI~~,IAAI,CAAC,IAAI,~~IAAI~~,IAAI,CAAC,IAAI,~~KAAK~~,~~UAAU~~,CAAC,~~MAAM~~,~~EAAE~~,CAAC;~~gBACjD~~,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;~~gBACrB~~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","sourcesContent":["import {\n Component,\n Listen,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/*\n @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n /\n@Component({\n tag: 'nv-button',\n shadow: false,\n formAssociated: true,\n styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvButtonElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Determines how large or small the button appears, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n /\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /\n Adjusts the button's emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones\n /\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /\n Use this prop to highlight the button when it represents the current page\n * or active selection. This helps users understand their navigation context.\n /\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /\n Applies styling that visually indicates the button represents a dangerous\n * action.\n /\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /\n Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities.\n /\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /\n Disables the button, preventing user interaction.\n /\n @Prop({ reflect: true, mutable: true })\n disabled: boolean = false;\n\n /\n Allows the button to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /\n Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn't interact with form submission by default.\n /\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /\n Sets the form associated with the button in case the (submit) button is not a child of a form.\n * Matches the native HTML button 'form' attribute behavior.\n /\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles button click events, managing form actions and disabled states.\n * Prevents default behavior when button is disabled or loading, and\n * processes form submissions/resets when appropriate.\n * @param {Event} event - The click event.\n /\n private handleButtonClick = (event: Event): void => {\n if (this.loading \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.~~form~~ && this.~~type~~ ~~!==~~ ~~ButtonType~~.~~Button~~) {\n this.processFormAction();\n } else if (this.form) {\n console.warn(\n 'Button has a form id but is not of type submit or reset so no form action will be processed.',\n `Button:`,\n this.el,\n );\n }\n };\n\n /\n Processes form-related actions by finding the associated form element\n * and triggering the appropriate action (submit/reset) based on button type.\n * Falls back to ElementInternals form if no explicit form ID is provided.\n /\n private processFormAction = (): void => {\n const formElement = this.form\n ? (document.getElementById(this.form) as HTMLFormElement)\n : this.internals?.form;\n\n if (!formElement) {\n console.warn(\n 'No form element found.',\n `Form ID: ${this.form \|\| 'Not provided'}`,\n `Internals form:`,\n this.internals?.form,\n );\n return;\n }\n\n switch (this.type) {\n case ButtonType.Submit:\n formElement.requestSubmit();\n break;\n case ButtonType.Reset:\n formElement.reset();\n break;\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n {this.loading && (\n <nv-loader\n size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n ></nv-loader>\n )}\n\n <slot name=\"leading-icon\"></slot>\n <slot></slot>\n <slot name=\"trailing-icon\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Listen,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/*\n @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n /\n@Component({\n tag: 'nv-button',\n shadow: false,\n formAssociated: true,\n styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvButtonElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Determines how large or small the button appears, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n /\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /\n Adjusts the button's emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones\n /\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /\n Use this prop to highlight the button when it represents the current page\n * or active selection. This helps users understand their navigation context.\n /\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /\n Applies styling that visually indicates the button represents a dangerous\n * action.\n /\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /\n Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities.\n /\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /\n Disables the button, preventing user interaction.\n /\n @Prop({ reflect: true, mutable: true })\n disabled: boolean = false;\n\n /\n Allows the button to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /\n Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn't interact with form submission by default.\n /\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /\n Sets the form associated with the button in case the (submit) button is not a child of a form.\n * Matches the native HTML button 'form' attribute behavior.\n /\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles button click events, managing form actions and disabled states.\n * Prevents default behavior when button is disabled or loading, and\n * processes form submissions/resets when appropriate.\n * @param {Event} event - The click event.\n /\n private handleButtonClick = (event: Event): void => {\n if (this.loading \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (\n this.type !== ButtonType.Button &&\n (this.form \|\| this.internals?.form)\n ) {\n this.processFormAction();\n } else if (this.form && this.type === ButtonType.Button) {\n console.warn(\n 'Button has a form id but is not of type submit or reset so no form action will be processed.',\n `Button:`,\n this.el,\n );\n }\n };\n\n /\n Processes form-related actions by finding the associated form element\n * and triggering the appropriate action (submit/reset) based on button type.\n * Falls back to ElementInternals form if no explicit form ID is provided.\n /\n private processFormAction = (): void => {\n const formElement = this.form\n ? (document.getElementById(this.form) as HTMLFormElement)\n : this.internals?.form;\n\n if (!formElement) {\n console.warn(\n 'No form element found.',\n `Form ID: ${this.form \|\| 'Not provided'}`,\n `Internals form:`,\n this.internals?.form,\n );\n return;\n }\n\n switch (this.type) {\n case ButtonType.Submit:\n formElement.requestSubmit();\n break;\n case ButtonType.Reset:\n formElement.reset();\n break;\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n {this.loading && (\n <nv-loader\n size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n ></nv-loader>\n )}\n\n <slot name=\"leading-icon\"></slot>\n <slot></slot>\n <slot name=\"trailing-icon\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}

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

@@ -986,7 +986,7 @@ export class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '9b09650b368bcc9e0ce3c9508630c2fdeb573674' }, h("div", { key: '57d3ef9b5f450570176132293fb2a102bba51312', class: "datepicker-root" }, h("div", { key: 'aa49f6897b3da87214945d77eb046dc7f8c68b82', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '0939858f254cfc36db1d40e8fdb4e524699a8e91', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (h("div", { key: '39df0c4b31203d6fd500a8b97c1c33c87b2e326a', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'a1433b59ecda88aad2d5589cebd310dff4ad30fb' })));
+        return (h(Host, { key: '49bdf5cc44f9e8f13b0fd61936d3b015e6105d18' }, h("div", { key: 'e1a0fcc20c7c12930df31c36751824a64fae053f', class: "datepicker-root" }, h("div", { key: '48cd6f6d92c41c748fdd05a6d932cbb634e3dfd6', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'f5d5ca631e448067cbfb04f0bcc74695b5c6fb5e', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (h("div", { key: 'cb1ebc42e3616b9c35d147c227a53924fd2c73c8', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'e9bec2dd219502e8855c6195ebe69bff8fff0da5' })));
     }
     static get is() { return "nv-calendar"; }
     static get originalStyleUrls() {

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

@@ -22,7 +22,7 @@ export class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2f4052741fbe2e2c67c4ce6e1fd83446e724e216', class: clsx(this.getColSize()) }, h("slot", { key: 'a5803fe2cfcd9ced01e025907759f4859db60470' })));
+        return (h(Host, { key: '8c6efe159aa3b9d853d07897e17045adabf5716c', class: clsx(this.getColSize()) }, h("slot", { key: '5438e2dd941088fde68b17495a4d231cc56fba3c' })));
     }
     static get is() { return "nv-col"; }
     static get originalStyleUrls() {

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

@@ -65,9 +65,20 @@ const NvDatagridDocs = {
             name: nameof(x => x.dataJson),
             args: {
                 dataJson: `[
-          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
-          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+          { "name": "Alice", "age": "25", "email": "alice@mail.com", "roles": [{ "id": "1", "name": "Admin" }] },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com", "roles": [{ "id": "2", "name": "User" }] }
+        ]`,
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.autoGenerateColumns),
+            args: {
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com", "roles": [{ "id": "1", "name": "Admin" }] },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com", "roles": [{ "id": "2", "name": "User" }] }
         ]`,
+                autoGenerateColumns: true,
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
@@ -192,6 +203,36 @@ const NvDatagridDocs = {
             },
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"), h("div", { slot: "after" }, "After"))),
         },
+        {
+            name: 'WithDataAndTemplateAndMultipleElements',
+            args: {
+                dataJson: `[
+        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com","roles":["Admin","User"]},
+        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com","roles":["User"]}
+        ]`,
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "roles", header: "Role(s)" }, h("div", { slot: "cell" }, h("span", null, "__roles__"))))),
+        },
+        {
+            name: 'WithDataAndTemplateAndMultipleComplexElements',
+            args: {
+                dataJson: `[
+        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com","roles":[{"id":"1","name":"Admin"},{"id":"2","name":"User"}]},
+        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com","roles":[{"id":"2","name":"User"}]}
+        ]`,
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "roles", header: "Role(s)" }, h("div", { slot: "cell" }, h("span", null, "__roles.name__"))))),
+        },
+        {
+            name: 'WithDataAndTemplateAndMultipleComplexElementsRepeatTemplate',
+            args: {
+                dataJson: `[
+        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com","roles":[{"id":"1","name":"Admin"},{"id":"2","name":"User"}]},
+        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com","roles":[{"id":"2","name":"User"}]}
+        ]`,
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "roles", header: "Role(s)", "repeat-template": true }, h("div", { slot: "cell" }, h("nv-badge", { label: "__roles.name__" }))))),
+        },
     ],
 };
 export default NvDatagridDocs;