npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.37 → 3.0.0-beta.38 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.37 → 3.0.0-beta.38

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 (182) hide show

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

@@ -127,7 +127,7 @@ const NvTable = class {
                 .querySelector('[slot="body"]')
                 .querySelectorAll('nv-tablerow'))
             : [];
-        return (index.h(index.Host, { key: 'd6a4501a88dbbb8154092051e50a981bec0167ef' }, index.h("div", { key: 'd7528316b469425004dafadf7c3e23bcfc21d88d', class: "hidden" }, index.h("slot", { key: '1a8204ea1f65d2dcd8cd98b6a4fd95b916998e0d' }), index.h("slot", { key: '6643f2f3343d513319a24c242ba541d95b81082a', name: "head" }), index.h("slot", { key: '45949baaebd97dd66b6d5b602baa41f5926643c0', name: "body" })), index.h("slot", { key: '4633c9f41ccfba69538460c18178defccac05cbe', name: "before" }), this.parsedColumns.length === 0 &&
+        return (index.h(index.Host, { key: '9372fd6501e5f4b069bf82845357c86cfbea5be1' }, index.h("div", { key: 'bcf46dcec109ca3410c412094c8111b952e68b55', class: "hidden" }, index.h("slot", { key: '0bff60d688bd816a292a0ac4f79b1dfc9c7e7064' }), index.h("slot", { key: '5dc70dac8bcba2ff8406420f6bc42d8ad65ae8fe', name: "head" }), index.h("slot", { key: 'c2d2240cb24d776da41e335598038227a4909949', name: "body" })), index.h("slot", { key: 'a36a96d5c0ef08008db29a6394b186b1034f3081', name: "before" }), this.parsedColumns.length === 0 &&
             this.parsedData.length === 0 &&
             headerRows.length === 0 &&
             bodyRows.length === 0 ? (index.h("p", null, this.noColumnsNoDataMessage)) : (index.h("table", null, this.parsedColumns.length > 0 ? (index.h("thead", null, index.h("tr", null, this.parsedColumns.map(column => (index.h("th", null, column)))))) : headerRows.length > 0 ? (index.h("thead", null, headerRows.map(row => {
@@ -138,7 +138,7 @@ const NvTable = class {
             : Object.values(row).map(value => index.h("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
             const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
             return (index.h("tr", null, cells.map(cell => (index.h("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), index.h("slot", { key: '3947711bb7495a5c259d2324cc97a22ee4c2d673', name: "after" })));
+        })) : null))), index.h("slot", { key: '786406a13707dbf9374c3c0db485d956af9677ae', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"nv-table.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["nv-table {\n table {\n border-collapse: collapse;\n border-color: inherit;\n text-indent: 0;\n }\n}\n\n// https://tailwindcss.com/docs/table-layout\n","/* eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/\n @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n /\n@Component({\n tag: 'nv-table',\n styleUrl: './nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() el: HTMLNvTableElement;\n\n /*************************************************************************/\n //#region STATES\n\n @State()\n parsedColumns: string[] = []; // Parsed array of column headers\n\n @State()\n parsedData: any[] = []; // Parsed array of data rows\n\n @State()\n hasSlotHead: boolean = false;\n\n @State()\n hasSlotBody: boolean = false;\n\n //#endregion STATES\n /************************************************************************/\n //#region PROPERTIES\n\n /\n * Defines the table columns.\n * @example ['Name', 'Age', 'Email']\n * @default []\n /\n @Prop()\n readonly columns: string[] = [];\n\n /\n Defines the table columns.\n * It can be passed directly as an array of strings or as a JSON string.\n * @example '[\"Name\", \"Age\", \"Email\"]'\n /\n @Prop({ reflect: true })\n readonly columnsJson?: string;\n\n /\n Defines the table data.\n * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n * @default []\n /\n @Prop()\n readonly data: any[] = [];\n\n /\n Defines the table data.\n * It can be passed directly as an array of objects or as a JSON string.\n * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n /\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /\n The message to display when there is no data available.\n * @default 'No data available'\n /\n @Prop()\n readonly noDataMessage: string = 'No data available';\n\n /\n The message to display when there are no columns or data available.\n * @default 'No data or columns available to display.'\n /\n @Prop()\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('columns')\n parseColumns(newValue: string[], oldValue: string[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsJson')\n parseJsonColumns(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, this.parsedColumns);\n } catch (e) {\n console.error('Invalid JSON format for columnsJson:', e.message);\n this.parsedColumns = [];\n }\n }\n\n @Watch('data')\n parseData(newValue: any[], oldValue: any[]) {\n this.parseDataArray(newValue, oldValue);\n }\n\n @Watch('dataJson')\n parseJsonData(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseDataArray(newItems, this.parsedData);\n } catch (e) {\n console.error('Invalid JSON format for dataJson:', e.message);\n this.parsedData = [];\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n /\n * Parses the columns array.\n * @param {string[]} newValue - The new value of the columns array.\n * @param {string[]} oldValue - The old value of the columns array.\n /\n private parseColumnsArray(newValue: string[], oldValue: string[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n }\n\n /\n Parses the data array.\n * @param {any[]} newValue - The new value of the data array.\n * @param {any[]} oldValue - The old value of the data array.\n /\n private parseDataArray(newValue: any[], oldValue: any[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n if (this.columnsJson) {\n this.parseJsonColumns(this.columnsJson);\n } else {\n this.parseColumns(this.columns, this.parsedColumns);\n }\n\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else {\n this.parseData(this.data, this.parsedData);\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n render() {\n const headerRows = this.hasSlotHead\n ? Array.from(\n this.el\n .querySelector('[slot=\"head\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n const bodyRows = this.hasSlotBody\n ? Array.from(\n this.el\n .querySelector('[slot=\"body\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n <slot name=\"head\"></slot>\n <slot name=\"body\"></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 &&\n this.parsedData.length === 0 &&\n headerRows.length === 0 &&\n bodyRows.length === 0 ? (\n <p>{this.noColumnsNoDataMessage}</p>\n ) : (\n <table>\n {this.parsedColumns.length > 0 ? (\n <thead>\n <tr>\n {this.parsedColumns.map(column => (\n <th>{column}</th>\n ))}\n </tr>\n </thead>\n ) : headerRows.length > 0 ? (\n <thead>\n {headerRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tablecolumn'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <th\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n scope={cell.scope}\n innerHTML={cell.innerHTML}\n ></th>\n ))}\n </tr>\n );\n })}\n </thead>\n ) : null}\n\n <tbody>\n {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n <tr>\n <td colSpan={this.parsedColumns.length \|\| 12}>\n {this.noDataMessage}\n </td>\n </tr>\n ) : this.parsedData.length > 0 ? (\n this.parsedData.map(row => (\n <tr>\n {this.parsedColumns.length > 0\n ? this.parsedColumns.map(column => (\n <td>{row[column.toLowerCase()] \|\| ''}</td>\n ))\n : Object.values(row).map(value => <td>{value}</td>)}\n </tr>\n ))\n ) : bodyRows.length > 0 ? (\n bodyRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tabledatacell'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <td\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n innerHTML={cell.innerHTML}\n ></td>\n ))}\n </tr>\n );\n })\n ) : null}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n /**************************************************************************/\n}\n"],"version":3}
1	+ {"file":"nv-table.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,6EAA6E,CAAC;AACjG,sBAAe,UAAU;;MCiBZ,OAAO;IALpB;;;;QAYE,kBAAa,GAAa,EAAE,CAAC;QAG7B,eAAU,GAAU,EAAE,CAAC;QAGvB,gBAAW,GAAY,KAAK,CAAC;QAG7B,gBAAW,GAAY,KAAK,CAAC;;;;;;;;;QAYpB,YAAO,GAAa,EAAE,CAAC;;;;;;QAgBvB,SAAI,GAAU,EAAE,CAAC;;;;;QAejB,kBAAa,GAAW,mBAAmB,CAAC;;;;;QAO5C,2BAAsB,GAC7B,0CAA0C,CAAC;KAwM9C;;;;IAjMC,YAAY,CAAC,QAAkB,EAAE,QAAkB;QACjD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;KAC5C;IAGD,gBAAgB,CAAC,QAA4B;QAC3C,IAAI;YACF,MAAM,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YAEtD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SACtD;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACjE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;SACzB;KACF;IAGD,SAAS,CAAC,QAAe,EAAE,QAAe;QACxC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;KACzC;IAGD,aAAa,CAAC,QAA4B;QACxC,IAAI;YACF,MAAM,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YAEtD,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAChD;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YAC9D,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;SACtB;KACF;;;;;;;;;IAWO,iBAAiB,CAAC,QAAkB,EAAE,QAAkB;QAC9D,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;YAAE,OAAO;QAClE,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAC;KAC9D;;;;;;IAOO,cAAc,CAAC,QAAe,EAAE,QAAe;QACrD,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;YAAE,OAAO;QAClE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAC;KAC3D;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAC5D,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE5D,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACzC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SACrD;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACnC;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5C;KACF;;;;IAMD,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW;cAC/B,KAAK,CAAC,IAAI,CACR,IAAI,CAAC,EAAE;iBACJ,aAAa,CAAC,eAAe,CAAC;iBAC9B,gBAAgB,CAAC,aAAa,CAAC,CACnC;cACD,EAAE,CAAC;QACP,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW;cAC7B,KAAK,CAAC,IAAI,CACR,IAAI,CAAC,EAAE;iBACJ,aAAa,CAAC,eAAe,CAAC;iBAC9B,gBAAgB,CAAC,aAAa,CAAC,CACnC;cACD,EAAE,CAAC;QAEP,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,QAAQ,IACjBA,oEAAa,EACbA,mEAAM,IAAI,EAAC,MAAM,GAAQ,EACzBA,mEAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EAENA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,EAE1B,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC;YAChC,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC;YAC5B,UAAU,CAAC,MAAM,KAAK,CAAC;YACvB,QAAQ,CAAC,MAAM,KAAK,CAAC,IACnBA,mBAAI,IAAI,CAAC,sBAAsB,CAAK,KAEpCA,uBACG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAC5BA,uBACEA,oBACG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,KAC5BA,oBAAK,MAAM,CAAM,CAClB,CAAC,CACC,CACC,IACN,UAAU,CAAC,MAAM,GAAG,CAAC,IACvBA,uBACG,UAAU,CAAC,GAAG,CAAC,GAAG;YACjB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,GAAG,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CACvC,CAAC;YACF,QACEA,oBACG,KAAK,CAAC,GAAG,CAAC,IAAI,KACbA,gBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,GACrB,CACP,CAAC,CACC,EACL;SACH,CAAC,CACI,IACN,IAAI,EAERA,uBACG,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IACpDA,oBACEA,gBAAI,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,EAAE,IACzC,IAAI,CAAC,aAAa,CAChB,CACF,IACH,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KACrBA,oBACG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;cAC1B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,KAC3BA,oBAAK,GAAG,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAM,CAC3C,CAAC;cACF,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,IAAIA,oBAAK,KAAK,CAAM,CAAC,CAClD,CACN,CAAC,IACA,QAAQ,CAAC,MAAM,GAAG,CAAC,IACrB,QAAQ,CAAC,GAAG,CAAC,GAAG;YACd,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,GAAG,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CACzC,CAAC;YACF,QACEA,oBACG,KAAK,CAAC,GAAG,CAAC,IAAI,KACbA,gBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,GACrB,CACP,CAAC,CACC,EACL;SACH,CAAC,IACA,IAAI,CACF,CACF,CACT,EAEDA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,EACP;KACH;;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["nv-table {\n table {\n border-collapse: collapse;\n border-color: inherit;\n text-indent: 0;\n }\n}\n\n// https://tailwindcss.com/docs/table-layout\n","/* eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/\n @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n \n @deprecated [EXPERIMENTAL]\n * @experimental - This component is still under development and is not ready for use.\n /\n@Component({\n tag: 'nv-table',\n styleUrl: './nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() el: HTMLNvTableElement;\n\n /*************************************************************************/\n //#region STATES\n\n @State()\n parsedColumns: string[] = []; // Parsed array of column headers\n\n @State()\n parsedData: any[] = []; // Parsed array of data rows\n\n @State()\n hasSlotHead: boolean = false;\n\n @State()\n hasSlotBody: boolean = false;\n\n //#endregion STATES\n /************************************************************************/\n //#region PROPERTIES\n\n /\n * Defines the table columns.\n * @example ['Name', 'Age', 'Email']\n * @default []\n /\n @Prop()\n readonly columns: string[] = [];\n\n /\n Defines the table columns.\n * It can be passed directly as an array of strings or as a JSON string.\n * @example '[\"Name\", \"Age\", \"Email\"]'\n /\n @Prop({ reflect: true })\n readonly columnsJson?: string;\n\n /\n Defines the table data.\n * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n * @default []\n /\n @Prop()\n readonly data: any[] = [];\n\n /\n Defines the table data.\n * It can be passed directly as an array of objects or as a JSON string.\n * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n /\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /\n The message to display when there is no data available.\n * @default 'No data available'\n /\n @Prop()\n readonly noDataMessage: string = 'No data available';\n\n /\n The message to display when there are no columns or data available.\n * @default 'No data or columns available to display.'\n /\n @Prop()\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('columns')\n parseColumns(newValue: string[], oldValue: string[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsJson')\n parseJsonColumns(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, this.parsedColumns);\n } catch (e) {\n console.error('Invalid JSON format for columnsJson:', e.message);\n this.parsedColumns = [];\n }\n }\n\n @Watch('data')\n parseData(newValue: any[], oldValue: any[]) {\n this.parseDataArray(newValue, oldValue);\n }\n\n @Watch('dataJson')\n parseJsonData(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseDataArray(newItems, this.parsedData);\n } catch (e) {\n console.error('Invalid JSON format for dataJson:', e.message);\n this.parsedData = [];\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n /\n * Parses the columns array.\n * @param {string[]} newValue - The new value of the columns array.\n * @param {string[]} oldValue - The old value of the columns array.\n /\n private parseColumnsArray(newValue: string[], oldValue: string[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n }\n\n /\n Parses the data array.\n * @param {any[]} newValue - The new value of the data array.\n * @param {any[]} oldValue - The old value of the data array.\n /\n private parseDataArray(newValue: any[], oldValue: any[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n if (this.columnsJson) {\n this.parseJsonColumns(this.columnsJson);\n } else {\n this.parseColumns(this.columns, this.parsedColumns);\n }\n\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else {\n this.parseData(this.data, this.parsedData);\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n render() {\n const headerRows = this.hasSlotHead\n ? Array.from(\n this.el\n .querySelector('[slot=\"head\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n const bodyRows = this.hasSlotBody\n ? Array.from(\n this.el\n .querySelector('[slot=\"body\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n <slot name=\"head\"></slot>\n <slot name=\"body\"></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 &&\n this.parsedData.length === 0 &&\n headerRows.length === 0 &&\n bodyRows.length === 0 ? (\n <p>{this.noColumnsNoDataMessage}</p>\n ) : (\n <table>\n {this.parsedColumns.length > 0 ? (\n <thead>\n <tr>\n {this.parsedColumns.map(column => (\n <th>{column}</th>\n ))}\n </tr>\n </thead>\n ) : headerRows.length > 0 ? (\n <thead>\n {headerRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tablecolumn'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <th\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n scope={cell.scope}\n innerHTML={cell.innerHTML}\n ></th>\n ))}\n </tr>\n );\n })}\n </thead>\n ) : null}\n\n <tbody>\n {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n <tr>\n <td colSpan={this.parsedColumns.length \|\| 12}>\n {this.noDataMessage}\n </td>\n </tr>\n ) : this.parsedData.length > 0 ? (\n this.parsedData.map(row => (\n <tr>\n {this.parsedColumns.length > 0\n ? this.parsedColumns.map(column => (\n <td>{row[column.toLowerCase()] \|\| ''}</td>\n ))\n : Object.values(row).map(value => <td>{value}</td>)}\n </tr>\n ))\n ) : bodyRows.length > 0 ? (\n bodyRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tabledatacell'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <td\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n innerHTML={cell.innerHTML}\n ></td>\n ))}\n </tr>\n );\n })\n ) : null}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n /**************************************************************************/\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 const NvBreadcrumbsDocs = {
     component: 'nv-breadcrumbs',
+    badge: 'new',
     subcomponents: ['nv-breadcrumb', 'nv-icon'],
     composedComponents: ['nv-breadcrumb'],
     stories: [

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-breadcrumbs.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,aAAa,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3C,kBAAkB,EAAE,CAAC,eAAe,CAAC;IACrC,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,oFAAoF;YACtF,QAAQ,EAAE,CACR,iEAA+C,YAAY;gBACzD;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb,CACS;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,+HAA+H;YACjI,QAAQ,EAAE,CACR;gBACE;oBACE;wBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;oBAChB;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;oBAChB,qBAAe,OAAO;wBACpB,SAAG,IAAI,EAAC,GAAG,oBAAkB,CACf,CACD;gBAEjB,wBAAe,MAAM,oBAAmB,CACpC,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbsDocs: NovaDocs<Components.NvBreadcrumbs> = {\n component: 'nv-breadcrumbs',\n subcomponents: ['nv-breadcrumb', 'nv-icon'],\n composedComponents: ['nv-breadcrumb'],\n stories: [\n {\n name: 'Default',\n template: (\n <nv-breadcrumbs data-storybook-args>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb current>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </nv-breadcrumbs>\n ),\n },\n {\n name: 'Collapsed',\n description:\n 'A breadcrumb example featuring a collapsed menu for handling long navigation paths',\n template: (\n <nv-breadcrumbs data-storybook-args data-class=\"mt-5 mb-20\">\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n <li>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </li>\n <li>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </li>\n <li>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </li>\n </nv-breadcrumb>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb current>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </nv-breadcrumbs>\n ),\n },\n {\n name: 'Current page',\n description:\n 'Hides the breadcrumb and sets the aria-current attribute, use this on the last breadcrumb, and include a header for the page.',\n template: (\n <div>\n <nv-breadcrumbs data-storybook-args>\n <nv-breadcrumb>\n <a href=\"#\">Home</a>\n </nv-breadcrumb>\n <nv-breadcrumb>\n <a href=\"#\">User account</a>\n </nv-breadcrumb>\n <nv-breadcrumb current>\n <a href=\"#\">Authorization</a>\n </nv-breadcrumb>\n </nv-breadcrumbs>\n\n <h2 data-class=\"mt-2\">Authorization</h2>\n </div>\n ),\n },\n ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}
1	+ {"version":3,"file":"nv-breadcrumbs.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EAAE,KAAK;IACZ,aAAa,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3C,kBAAkB,EAAE,CAAC,eAAe,CAAC;IACrC,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,oFAAoF;YACtF,QAAQ,EAAE,CACR,iEAA+C,YAAY;gBACzD;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb,CACS;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,+HAA+H;YACjI,QAAQ,EAAE,CACR;gBACE;oBACE;wBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;oBAChB;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;oBAChB,qBAAe,OAAO;wBACpB,SAAG,IAAI,EAAC,GAAG,oBAAkB,CACf,CACD;gBAEjB,wBAAe,MAAM,oBAAmB,CACpC,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbsDocs: NovaDocs<Components.NvBreadcrumbs> = {\n component: 'nv-breadcrumbs',\n badge: 'new',\n subcomponents: ['nv-breadcrumb', 'nv-icon'],\n composedComponents: ['nv-breadcrumb'],\n stories: [\n {\n name: 'Default',\n template: (\n <nv-breadcrumbs data-storybook-args>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb current>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </nv-breadcrumbs>\n ),\n },\n {\n name: 'Collapsed',\n description:\n 'A breadcrumb example featuring a collapsed menu for handling long navigation paths',\n template: (\n <nv-breadcrumbs data-storybook-args data-class=\"mt-5 mb-20\">\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n <li>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </li>\n <li>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </li>\n <li>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </li>\n </nv-breadcrumb>\n <nv-breadcrumb>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n <nv-breadcrumb current>\n <a href=\"#\">Breadcrumb</a>\n </nv-breadcrumb>\n </nv-breadcrumbs>\n ),\n },\n {\n name: 'Current page',\n description:\n 'Hides the breadcrumb and sets the aria-current attribute, use this on the last breadcrumb, and include a header for the page.',\n template: (\n <div>\n <nv-breadcrumbs data-storybook-args>\n <nv-breadcrumb>\n <a href=\"#\">Home</a>\n </nv-breadcrumb>\n <nv-breadcrumb>\n <a href=\"#\">User account</a>\n </nv-breadcrumb>\n <nv-breadcrumb current>\n <a href=\"#\">Authorization</a>\n </nv-breadcrumb>\n </nv-breadcrumbs>\n\n <h2 data-class=\"mt-2\">Authorization</h2>\n </div>\n ),\n },\n ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}

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

@@ -8,6 +8,9 @@ import { createTable, getCoreRowModel, createColumnHelper, } from "@tanstack/tab
  * @slot before - Use this slot to insert HTML before the data grid.
  * @slot after - Use this slot to insert HTML after the data grid.
  * @slot body - Use this slot to insert HTML into the data grid body.
+ *
+ * @deprecated [EXPERIMENTAL]
+ * @experimental - This component is still under development and is not ready for use.
  */
 export class NvDatagrid {
     constructor() {
@@ -268,7 +271,7 @@ export class NvDatagrid {
             (this.parsedData.length === 0 && !this.hasSlotBody)
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (h(Host, { key: '13cd91359b7830c7f594d0c865ab3f19d3c63a7c' }, h("div", { key: '7f3e9987995d3ede810a4f046f0c2eebacb185b3', class: "hidden" }, h("slot", { key: 'a1714ab7e46de2b653dcde73ea41ab1305a3e769' }), h("slot", { key: 'a63f14732f0ed28bacd5754fcc397632877d4913', name: "head" }), h("slot", { key: '1dff474ff990941685b207efe3c4e96a47b80d3e', name: "body" })), h("slot", { key: '322ee7e1107b41b9bfa2d5a985e308f243e0cf80', name: "before" }), this.parsedColumns.length === 0 &&
+        return (h(Host, { key: '41f852144ab2d361e162c866ff54975ecb49df93' }, h("div", { key: '64e60253351a03777d2b41dfdaabd2e70146d942', class: "hidden" }, h("slot", { key: '316d4131a7c2570676737524a7b718ce753e9996' }), h("slot", { key: '841d657c02cacd67593278d0c69f7d49c3ae165c', name: "head" }), h("slot", { key: '7ddb24bdbb5a0293e37470efce61ad7f5763ed40', name: "body" })), h("slot", { key: 'f18f18e56ab636965976e533fc5010e37517a3af', name: "before" }), this.parsedColumns.length === 0 &&
             this.parsedData.length === 0 &&
             !this.hasSlotHead &&
             !this.hasSlotBody ? (h("p", null, this.noColumnsNoDataMessage)) : (h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
@@ -283,7 +286,7 @@ export class NvDatagrid {
                 return `<td key="${cell.id}" data-row-id="${rowId}">${cellValue}</td>`;
             }).join('');
             return h("tr", { key: rowId, innerHTML: cells });
-        }))))), h("slot", { key: 'b9bbe19ca21adf208570b85bcb8fa10456a5fd1c', name: "after" })));
+        }))))), h("slot", { key: 'a13b0a8d309124f5042659b22d99832e251e1e7b', name: "after" })));
     }
     static get is() { return "nv-datagrid"; }
     static get originalStyleUrls() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-datagrid.js","sourceRoot":"","sources":["../../../src/components/nv-datagrid/nv-datagrid.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EACL,WAAW,EAGX,eAAe,EACf,kBAAkB,GACnB,MAAM,sBAAsB,CAAC;AAG9B;;;;;;;GAOG;AAMH,MAAM,OAAO,UAAU;IALvB;QAQE,8EAA8E;QAC9E,gBAAgB;QAGR,UAAK,GAAsB,IAAI,CAAC;QAGxC,kBAAa,GAAa,EAAE,CAAC,CAAC,eAAe;QAG7C,eAAU,GAAU,EAAE,CAAC,CAAC,eAAe;QAGvC,gBAAW,GAAY,KAAK,CAAC;QAG7B,gBAAW,GAAY,KAAK,CAAC;QAE7B,mBAAmB;QACnB,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;;;;;;WASG;QAEM,YAAO,GAAa,EAAE,CAAC;QAYhC;;;;WAIG;QAEM,SAAI,GAAU,EAAE,CAAC;QAY1B;;;WAGG;QAEM,kBAAa,GAAW,mBAAmB,CAAC;QAErD;;;WAGG;QAEM,2BAAsB,GAC7B,0CAA0C,CAAC;KA+U9C;IA7UC,uBAAuB;IACvB,8EAA8E;IAC9E,kBAAkB;IAGlB,YAAY,CAAC,QAAkB,EAAE,QAAkB;QACjD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAGD,gBAAgB,CAAC,QAA4B;QAC3C,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAEtD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACvD,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACjE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,SAAS,CAAC,QAAe,EAAE,QAAe;QACxC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAGD,aAAa,CAAC,QAA4B;QACxC,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAEtD,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACjD,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YAC9D,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,iBAAiB;IAET,eAAe;QACrB,6CAA6C;QAC7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAElB,oCAAoC;QACpC,MAAM,YAAY,GAA8B;YAC9C,OAAO,EAAE,EAAE;YACX,IAAI,EAAE,EAAE;YACR,eAAe,EAAE,eAAe,EAAE;YAClC,QAAQ,EAAE,IAAI;YACd,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,sCAAsC;YAC1G,mBAAmB,EAAE,oBAAoB;YACzC,KAAK,EAAE;gBACL,OAAO,EAAE,EAAE,EAAE,6BAA6B;gBAC1C,gBAAgB,EAAE,EAAE,EAAE,+BAA+B;gBACrD,aAAa,EAAE,EAAE,EAAE,6BAA6B;gBAChD,aAAa,EAAE,EAAE,EAAE,6BAA6B;gBAChD,YAAY,EAAE,EAAE,EAAE,4BAA4B;gBAC9C,WAAW,EAAE,EAAE,EAAE,uCAAuC;gBACxD,UAAU,EAAE,IAAI,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,EAAE,EAAE,8BAA8B;gBAC5C,QAAQ,EAAE,EAAE,EAAE,4BAA4B;gBAC1C,UAAU,EAAE,EAAE,EAAE,0BAA0B;gBAC1C,YAAY,EAAE,EAAE,EAAE,4BAA4B;gBAC9C,YAAY,EAAE,IAAI,EAAE,4BAA4B;gBAChD,gBAAgB,EAAE;oBAChB,iBAAiB,EAAE,IAAI;oBACvB,WAAW,EAAE,IAAI;oBACjB,eAAe,EAAE,IAAI;oBACrB,gBAAgB,EAAE,KAAK;oBACvB,WAAW,EAAE,IAAI;oBACjB,SAAS,EAAE,IAAI;iBAChB,EAAE,iCAAiC;aACrC;SACF,CAAC;QAEF,2CAA2C;QAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAC5C,MAAM,CAAC,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAA,CAC7C,CAAC;QAEF,iDAAiD;QACjD,MAAM,eAAe,GAAG,GAAU,EAAE;YAClC,MAAM,YAAY,GAAG,kBAAkB,EAAO,CAAC;YAE/C,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC5B,sBAAsB;gBACtB,OAAO,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAC/B,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE;oBACrC,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;iBAC9B,CAAC,CACH,CAAC;YACJ,CAAC;iBAAM,IAAI,YAAY,CAAC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC7D,kCAAkC;gBAClC,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACvC,OAAO,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CACtC,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE;oBACzB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,4BAA4B;oBAChF,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;iBAC9B,CAAC,CACH,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,yBAAyB;gBACzB,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,GAAU,EAAE;YAC/B,IACE,IAAI,CAAC,UAAU;gBACf,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;gBAC9B,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAC1B,CAAC;gBACD,OAAO,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9B,CAAC;iBAAM,CAAC;gBACN,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,CAAC;QAEF,uDAAuD;QACvD,MAAM,UAAU,GACd,YAAY,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QACzE,MAAM,OAAO,GACX,CAAC,IAAI,CAAC,UAAU;YACd,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;YAC9B,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC;QAEnB,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC;YAC5B,yBAAyB;QAC3B,CAAC;aAAM,IAAI,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC;YAClC,YAAY,CAAC,OAAO,GAAG,eAAe,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,mCAAmC;YACnC,YAAY,CAAC,IAAI,GAAG,YAAY,EAAE,CAAC;YACnC,YAAY,CAAC,OAAO,GAAG,eAAe,EAAE,CAAC;QAC3C,CAAC;QAED,uBAAuB;QACvB,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACK,iBAAiB,CAAC,QAAkB,EAAE,QAAkB;QAC9D,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;YAAE,OAAO,CAAC,kBAAkB;QACrF,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/D,CAAC;IAED;;;;OAIG;IACK,cAAc,CAAC,QAAe,EAAE,QAAe;QACrD,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;YAAE,OAAO,CAAC,kBAAkB;QACrF,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,CAAC;IAED,oBAAoB;IACpB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE5D,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACxD,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW;gBACnC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;gBACzD,CAAC,CAAC,EAAE,CAAC;YAEP,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBACxC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;gBAEpE,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBACxB,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE;oBACzC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,EAAE;iBAC9C,CAAC,CAAC,CAAC;YACN,CAAC,CAAC,CAAC;YAEH,2DAA2D;YAC3D,MAAM,iBAAiB,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC;YAE5C,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC;QACzC,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE5D,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACxD,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW;gBACnC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;gBACzD,CAAC,CAAC,EAAE,CAAC;YAEP,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBACxC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC;gBAEtE,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBACtB,OAAO;wBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBACvB,KAAK,EAAE,IAAI,CAAC,SAAS;qBACtB,CAAC;gBACJ,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,wDAAwD;YACxD,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAC1C,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;gBACvB,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;gBAChC,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;YAEF,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1C,CAAC;aAAM,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;;QACJ,MAAM,YAAY,GAChB,CAAC,IAAI,CAAC,KAAK;YACX,IAAI,CAAC,KAAK,KAAK,SAAS;YACxB,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;YACpD,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,eAAe,EAAE,CAAC;QAEpC,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,KAAK;YACX,IAAI,CAAC,KAAK,KAAK,SAAS;YACxB,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;YACjD,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAE,0CAAE,IAAI,CAAC;QAEtC,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,QAAQ;gBACjB,8DAAa;gBACb,6DAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;YAEN,6DAAM,IAAI,EAAC,QAAQ,GAAQ;YAE1B,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC;gBAChC,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC;gBAC5B,CAAC,IAAI,CAAC,WAAW;gBACjB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,aAAI,IAAI,CAAC,sBAAsB,CAAK,CACrC,CAAC,CAAC,CAAC,CACF;gBACG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3D,iBACG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY;oBAC5C,CAAC,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAC/B,UAAI,GAAG,EAAE,WAAW,CAAC,EAAE,IACpB,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACjC,UAAI,GAAG,EAAE,MAAM,CAAC,EAAE,IACf,MAAM,CAAC,aAAa;wBACnB,CAAC,CAAC,IAAI;wBACN,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAC/B,CACN,CAAC,CACC,CACN,CAAC;oBACJ,CAAC,CAAC,IAAI,CACF,CACT;gBACD,iBACG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC5B;oBACE,UAAI,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,EAAE,IACzC,IAAI,CAAC,aAAa,CAChB,CACF,CACN,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBACb,MAAM,KAAK,GAAG,GAAG,CAAC,EAAE,CAAC;oBACrB,MAAM,YAAY,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,eAAe,EAAE,CAAC;oBAE5C,MAAM,KAAK,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CACtB,GAAG,CAAC,IAAI,CAAC,EAAE;wBACX,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;wBAClC,OAAO,YAAY,IAAI,CAAC,EAAE,kBAAkB,KAAK,KAAK,SAAS,OAAO,CAAC;oBACzE,CAAC,EACA,IAAI,CAAC,EAAE,CAAC,CAAC;oBAEZ,OAAO,UAAI,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,GAAO,CAAC;gBACjD,CAAC,CAAC,CACH,CACK,CACF,CACT;YAED,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIF","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Prop, h, State, Host, Watch, Element } from '@stencil/core';\nimport {\n createTable,\n Table,\n TableOptionsResolved,\n getCoreRowModel,\n createColumnHelper,\n} from '@tanstack/table-core';\nimport { Column } from '../../interfaces/Column';\n\n/\n A flexible data grid component powered by `@tanstack/table-core`.\n * @slot default - Use this slot to insert HTML into the data grid content.\n * @slot head - Use this slot to insert HTML into the data grid header.\n * @slot before - Use this slot to insert HTML before the data grid.\n * @slot after - Use this slot to insert HTML after the data grid.\n * @slot body - Use this slot to insert HTML into the data grid body.\n /\n@Component({\n tag: 'nv-datagrid',\n styleUrl: './nv-datagrid.scss',\n shadow: false,\n})\nexport class NvDatagrid {\n @Element() el: HTMLNvDatagridElement;\n\n /*************************************************************************/\n //#region STATES\n\n @State()\n private table: Table<any> \| null = null;\n\n @State()\n parsedColumns: Column[] = []; // Parsed array\n\n @State()\n parsedData: any[] = []; // Parsed array\n\n @State()\n hasSlotHead: boolean = false;\n\n @State()\n hasSlotBody: boolean = false;\n\n //#endregion STATES\n /************************************************************************/\n //#region PROPERTIES\n\n /\n * The columns to display in the data grid.\n * @example\n * [\n * {\"header\":\"Name\",\"accessor\":\"name\"},\n * {\"header\":\"Age\",\"accessor\":\"age\"},\n * {\"header\":\"Email\",\"accessor\":\"email\"}\n * ]\n * @default []\n /\n @Prop()\n readonly columns: Column[] = [];\n\n /\n The columns to display in the data grid.\n * It can be passed directly as an array of objects or as a JSON string\n * (e.g., `[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`).\n * If both `columns` and `columnsJson` are provided, `columns` takes precedence.\n * @example `[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`\n /\n @Prop({ reflect: true })\n readonly columnsJson?: string;\n\n /\n The data to display in the data grid.\n * @example [{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]\n * @default []\n /\n @Prop()\n readonly data: any[] = [];\n\n /\n The data to display in the data grid.\n * It can be passed directly as an array of objects or as a JSON string\n * (e.g., `[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`).\n * If both `data` and `dataJson` are provided, `data` takes precedence.\n * @example `[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`\n /\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /\n The message to display when there is no data available.\n * @default 'No data available'\n /\n @Prop()\n readonly noDataMessage: string = 'No data available';\n\n /\n The message to display when there are no columns or data available.\n * @default 'No data or columns available to display.'\n /\n @Prop()\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('columns')\n parseColumns(newValue: Column[], oldValue: Column[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsJson')\n parseJsonColumns(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, this.parsedColumns);\n } catch (e) {\n console.error('Invalid JSON format for columnsJson:', e.message);\n this.parsedColumns = [];\n }\n }\n\n @Watch('data')\n parseData(newValue: any[], oldValue: any[]) {\n this.parseDataArray(newValue, oldValue);\n }\n\n @Watch('dataJson')\n parseJsonData(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseDataArray(newItems, this.parsedData);\n } catch (e) {\n console.error('Invalid JSON format for dataJson:', e.message);\n this.parsedData = [];\n }\n }\n\n @Watch('parsedColumns')\n @Watch('parsedData')\n handleParsedChange() {\n this.initializeTable();\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private initializeTable(): void {\n // Clear the previous table instance (if any)\n this.table = null;\n\n // Set default options for the table\n const tableOptions: TableOptionsResolved<any> = {\n columns: [],\n data: [],\n getCoreRowModel: getCoreRowModel(),\n debugAll: true,\n onStateChange: state => console.log('Table state changed:', state), // eslint-disable-line nova/no-console\n renderFallbackValue: 'No rows to display',\n state: {\n sorting: [], // Default: no active sorting\n columnVisibility: {}, // Default: all columns visible\n columnFilters: [], // Default: no column filters\n columnPinning: {}, // Default: no column pinning\n columnSizing: {}, // Default: no column sizing\n columnOrder: [], // Default: as defined in the `columns`\n pagination: null, // Default: no pagination\n grouping: [], // Default: no active grouping\n expanded: {}, // Default: no expanded rows\n rowPinning: {}, // Default: no row pinning\n rowSelection: {}, // Default: no row selection\n globalFilter: null, // Default: no global filter\n columnSizingInfo: {\n columnSizingStart: null,\n deltaOffset: null,\n deltaPercentage: null,\n isResizingColumn: false,\n startOffset: null,\n startSize: null,\n }, // Default: no column sizing info\n },\n };\n\n // Validate and generate column definitions\n const validColumns = this.parsedColumns.filter(\n column => column?.accessor && column?.header,\n );\n\n // Helper function to generate column definitions\n const generateColumns = (): any[] => {\n const columnHelper = createColumnHelper<any>();\n\n if (validColumns.length > 0) {\n // Use defined columns\n return validColumns.map(column =>\n columnHelper.accessor(column.accessor, {\n header: column.header,\n cell: info => info.getValue(),\n }),\n );\n } else if (tableOptions.data && tableOptions.data.length > 0) {\n // Generate columns from data keys\n const sampleRow = tableOptions.data[0];\n return Object.keys(sampleRow).map(key =>\n columnHelper.accessor(key, {\n header: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize key for header\n cell: info => info.getValue(),\n }),\n );\n } else {\n // No columns and no data\n return [];\n }\n };\n\n const setTableData = (): any[] => {\n if (\n this.parsedData &&\n Array.isArray(this.parsedData) &&\n this.parsedData.length > 0\n ) {\n return [...this.parsedData];\n } else {\n return [];\n }\n };\n\n // Update tableOptions based on parsed data and columns\n const hasColumns =\n validColumns && Array.isArray(validColumns) && validColumns.length > 0;\n const hasData =\n (this.parsedData &&\n Array.isArray(this.parsedData) &&\n this.parsedData.length > 0) \|\|\n this.hasSlotBody;\n\n if (!hasColumns && !hasData) {\n // No columns and no data\n } else if (hasColumns && !hasData) {\n tableOptions.columns = generateColumns();\n } else {\n // Both columns and data are available\n // No columns and data is available\n tableOptions.data = setTableData();\n tableOptions.columns = generateColumns();\n }\n\n // Initialize the table\n this.table = createTable(tableOptions);\n }\n\n /\n * Parses the columns array.\n * @param {Column[]} newValue - The new value of the columns array.\n * @param {Column[]} oldValue - The old value of the columns array.\n /\n private parseColumnsArray(newValue: Column[], oldValue: Column[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n }\n\n /\n Parses the data array.\n * @param {any[]} newValue - The new value of the data array.\n * @param {any[]} oldValue - The old value of the data array.\n /\n private parseDataArray(newValue: any[], oldValue: any[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n\n if (this.hasSlotHead) {\n const headSlot = this.el.querySelector('[slot=\"head\"]');\n const headSlotRows = this.hasSlotHead\n ? Array.from(headSlot.querySelectorAll('nv-datagridrow'))\n : [];\n\n const mappedRows = headSlotRows.map(row => {\n const cells = Array.from(row.querySelectorAll('nv-datagridcolumn'));\n\n return cells.map(cell => ({\n header: cell.getAttribute('header') \|\| '',\n accessor: cell.getAttribute('accessor') \|\| '',\n }));\n });\n\n // Flatten the nested arrays into a single array of columns\n const flatMappedColumns = mappedRows.flat();\n\n this.parsedColumns = flatMappedColumns;\n }\n\n this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n if (this.hasSlotBody) {\n const bodySlot = this.el.querySelector('[slot=\"body\"]');\n const bodySlotRows = this.hasSlotBody\n ? Array.from(bodySlot.querySelectorAll('nv-datagridrow'))\n : [];\n\n const mappedRows = bodySlotRows.map(row => {\n const cells = Array.from(row.querySelectorAll('nv-datagriddatacell'));\n\n return cells.map(cell => {\n return {\n accessor: cell.accessor,\n value: cell.innerHTML,\n };\n });\n });\n\n // Flatten the nested arrays into a single array of data\n const flatMappedData = mappedRows.map(row =>\n row.reduce((acc, cell) => {\n acc[cell.accessor] = cell.value;\n return acc;\n }, {}),\n );\n\n this.parsedData = flatMappedData;\n }\n\n if (this.columnsJson) {\n this.parseJsonColumns(this.columnsJson);\n } else if (this.columns && this.columns.length > 0) {\n this.parseColumns(this.columns, this.parsedColumns);\n }\n\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else if (this.data && this.data.length > 0) {\n this.parseData(this.data, this.parsedData);\n }\n }\n\n componentDidLoad() {\n this.initializeTable();\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n render() {\n const headerGroups =\n !this.table \|\|\n this.table === undefined \|\|\n (this.parsedColumns.length === 0 && !this.hasSlotHead)\n ? []\n : this.table?.getHeaderGroups();\n\n const rows =\n !this.table \|\|\n this.table === undefined \|\|\n (this.parsedData.length === 0 && !this.hasSlotBody)\n ? []\n : this.table?.getRowModel()?.rows;\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n <slot name=\"head\"></slot>\n <slot name=\"body\"></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 &&\n this.parsedData.length === 0 &&\n !this.hasSlotHead &&\n !this.hasSlotBody ? (\n <p>{this.noColumnsNoDataMessage}</p>\n ) : (\n <table>\n {this.parsedColumns.length > 0 && headerGroups.length > 0 && (\n <thead>\n {this.parsedColumns.length > 0 && headerGroups\n ? headerGroups?.map(headerGroup => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <th key={header.id}>\n {header.isPlaceholder\n ? null\n : header.column.columnDef.header}\n </th>\n ))}\n </tr>\n ))\n : null}\n </thead>\n )}\n <tbody>\n {!rows \|\| rows.length === 0 ? (\n <tr>\n <td colSpan={this.parsedColumns.length \|\| 12}>\n {this.noDataMessage}\n </td>\n </tr>\n ) : (\n rows.map(row => {\n const rowId = row.id;\n const visibleCells = row?.getVisibleCells();\n\n const cells = visibleCells\n ?.map(cell => {\n const cellValue = cell.getValue();\n return `<td key=\"${cell.id}\" data-row-id=\"${rowId}\">${cellValue}</td>`;\n })\n .join('');\n\n return <tr key={rowId} innerHTML={cells}></tr>;\n })\n )}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n /**************************************************************************/\n}\n"]}
1	+ {"version":3,"file":"nv-datagrid.js","sourceRoot":"","sources":["../../../src/components/nv-datagrid/nv-datagrid.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Prop, h, State, Host, Watch, Element } from '@stencil/core';\nimport {\n createTable,\n Table,\n TableOptionsResolved,\n getCoreRowModel,\n createColumnHelper,\n} from '@tanstack/table-core';\nimport { Column } from '../../interfaces/Column';\n\n/\n A flexible data grid component powered by `@tanstack/table-core`.\n * @slot default - Use this slot to insert HTML into the data grid content.\n * @slot head - Use this slot to insert HTML into the data grid header.\n * @slot before - Use this slot to insert HTML before the data grid.\n * @slot after - Use this slot to insert HTML after the data grid.\n * @slot body - Use this slot to insert HTML into the data grid body.\n \n @deprecated [EXPERIMENTAL]\n * @experimental - This component is still under development and is not ready for use.\n /\n@Component({\n tag: 'nv-datagrid',\n styleUrl: './nv-datagrid.scss',\n shadow: false,\n})\nexport class NvDatagrid {\n @Element() el: HTMLNvDatagridElement;\n\n /*************************************************************************/\n //#region STATES\n\n @State()\n private table: Table<any> \| null = null;\n\n @State()\n parsedColumns: Column[] = []; // Parsed array\n\n @State()\n parsedData: any[] = []; // Parsed array\n\n @State()\n hasSlotHead: boolean = false;\n\n @State()\n hasSlotBody: boolean = false;\n\n //#endregion STATES\n /************************************************************************/\n //#region PROPERTIES\n\n /\n * The columns to display in the data grid.\n * @example\n * [\n * {\"header\":\"Name\",\"accessor\":\"name\"},\n * {\"header\":\"Age\",\"accessor\":\"age\"},\n * {\"header\":\"Email\",\"accessor\":\"email\"}\n * ]\n * @default []\n /\n @Prop()\n readonly columns: Column[] = [];\n\n /\n The columns to display in the data grid.\n * It can be passed directly as an array of objects or as a JSON string\n * (e.g., `[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`).\n * If both `columns` and `columnsJson` are provided, `columns` takes precedence.\n * @example `[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`\n /\n @Prop({ reflect: true })\n readonly columnsJson?: string;\n\n /\n The data to display in the data grid.\n * @example [{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]\n * @default []\n /\n @Prop()\n readonly data: any[] = [];\n\n /\n The data to display in the data grid.\n * It can be passed directly as an array of objects or as a JSON string\n * (e.g., `[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`).\n * If both `data` and `dataJson` are provided, `data` takes precedence.\n * @example `[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`\n /\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /\n The message to display when there is no data available.\n * @default 'No data available'\n /\n @Prop()\n readonly noDataMessage: string = 'No data available';\n\n /\n The message to display when there are no columns or data available.\n * @default 'No data or columns available to display.'\n /\n @Prop()\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('columns')\n parseColumns(newValue: Column[], oldValue: Column[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsJson')\n parseJsonColumns(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, this.parsedColumns);\n } catch (e) {\n console.error('Invalid JSON format for columnsJson:', e.message);\n this.parsedColumns = [];\n }\n }\n\n @Watch('data')\n parseData(newValue: any[], oldValue: any[]) {\n this.parseDataArray(newValue, oldValue);\n }\n\n @Watch('dataJson')\n parseJsonData(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseDataArray(newItems, this.parsedData);\n } catch (e) {\n console.error('Invalid JSON format for dataJson:', e.message);\n this.parsedData = [];\n }\n }\n\n @Watch('parsedColumns')\n @Watch('parsedData')\n handleParsedChange() {\n this.initializeTable();\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private initializeTable(): void {\n // Clear the previous table instance (if any)\n this.table = null;\n\n // Set default options for the table\n const tableOptions: TableOptionsResolved<any> = {\n columns: [],\n data: [],\n getCoreRowModel: getCoreRowModel(),\n debugAll: true,\n onStateChange: state => console.log('Table state changed:', state), // eslint-disable-line nova/no-console\n renderFallbackValue: 'No rows to display',\n state: {\n sorting: [], // Default: no active sorting\n columnVisibility: {}, // Default: all columns visible\n columnFilters: [], // Default: no column filters\n columnPinning: {}, // Default: no column pinning\n columnSizing: {}, // Default: no column sizing\n columnOrder: [], // Default: as defined in the `columns`\n pagination: null, // Default: no pagination\n grouping: [], // Default: no active grouping\n expanded: {}, // Default: no expanded rows\n rowPinning: {}, // Default: no row pinning\n rowSelection: {}, // Default: no row selection\n globalFilter: null, // Default: no global filter\n columnSizingInfo: {\n columnSizingStart: null,\n deltaOffset: null,\n deltaPercentage: null,\n isResizingColumn: false,\n startOffset: null,\n startSize: null,\n }, // Default: no column sizing info\n },\n };\n\n // Validate and generate column definitions\n const validColumns = this.parsedColumns.filter(\n column => column?.accessor && column?.header,\n );\n\n // Helper function to generate column definitions\n const generateColumns = (): any[] => {\n const columnHelper = createColumnHelper<any>();\n\n if (validColumns.length > 0) {\n // Use defined columns\n return validColumns.map(column =>\n columnHelper.accessor(column.accessor, {\n header: column.header,\n cell: info => info.getValue(),\n }),\n );\n } else if (tableOptions.data && tableOptions.data.length > 0) {\n // Generate columns from data keys\n const sampleRow = tableOptions.data[0];\n return Object.keys(sampleRow).map(key =>\n columnHelper.accessor(key, {\n header: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize key for header\n cell: info => info.getValue(),\n }),\n );\n } else {\n // No columns and no data\n return [];\n }\n };\n\n const setTableData = (): any[] => {\n if (\n this.parsedData &&\n Array.isArray(this.parsedData) &&\n this.parsedData.length > 0\n ) {\n return [...this.parsedData];\n } else {\n return [];\n }\n };\n\n // Update tableOptions based on parsed data and columns\n const hasColumns =\n validColumns && Array.isArray(validColumns) && validColumns.length > 0;\n const hasData =\n (this.parsedData &&\n Array.isArray(this.parsedData) &&\n this.parsedData.length > 0) \|\|\n this.hasSlotBody;\n\n if (!hasColumns && !hasData) {\n // No columns and no data\n } else if (hasColumns && !hasData) {\n tableOptions.columns = generateColumns();\n } else {\n // Both columns and data are available\n // No columns and data is available\n tableOptions.data = setTableData();\n tableOptions.columns = generateColumns();\n }\n\n // Initialize the table\n this.table = createTable(tableOptions);\n }\n\n /\n * Parses the columns array.\n * @param {Column[]} newValue - The new value of the columns array.\n * @param {Column[]} oldValue - The old value of the columns array.\n /\n private parseColumnsArray(newValue: Column[], oldValue: Column[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n }\n\n /\n Parses the data array.\n * @param {any[]} newValue - The new value of the data array.\n * @param {any[]} oldValue - The old value of the data array.\n /\n private parseDataArray(newValue: any[], oldValue: any[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n\n if (this.hasSlotHead) {\n const headSlot = this.el.querySelector('[slot=\"head\"]');\n const headSlotRows = this.hasSlotHead\n ? Array.from(headSlot.querySelectorAll('nv-datagridrow'))\n : [];\n\n const mappedRows = headSlotRows.map(row => {\n const cells = Array.from(row.querySelectorAll('nv-datagridcolumn'));\n\n return cells.map(cell => ({\n header: cell.getAttribute('header') \|\| '',\n accessor: cell.getAttribute('accessor') \|\| '',\n }));\n });\n\n // Flatten the nested arrays into a single array of columns\n const flatMappedColumns = mappedRows.flat();\n\n this.parsedColumns = flatMappedColumns;\n }\n\n this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n if (this.hasSlotBody) {\n const bodySlot = this.el.querySelector('[slot=\"body\"]');\n const bodySlotRows = this.hasSlotBody\n ? Array.from(bodySlot.querySelectorAll('nv-datagridrow'))\n : [];\n\n const mappedRows = bodySlotRows.map(row => {\n const cells = Array.from(row.querySelectorAll('nv-datagriddatacell'));\n\n return cells.map(cell => {\n return {\n accessor: cell.accessor,\n value: cell.innerHTML,\n };\n });\n });\n\n // Flatten the nested arrays into a single array of data\n const flatMappedData = mappedRows.map(row =>\n row.reduce((acc, cell) => {\n acc[cell.accessor] = cell.value;\n return acc;\n }, {}),\n );\n\n this.parsedData = flatMappedData;\n }\n\n if (this.columnsJson) {\n this.parseJsonColumns(this.columnsJson);\n } else if (this.columns && this.columns.length > 0) {\n this.parseColumns(this.columns, this.parsedColumns);\n }\n\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else if (this.data && this.data.length > 0) {\n this.parseData(this.data, this.parsedData);\n }\n }\n\n componentDidLoad() {\n this.initializeTable();\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n render() {\n const headerGroups =\n !this.table \|\|\n this.table === undefined \|\|\n (this.parsedColumns.length === 0 && !this.hasSlotHead)\n ? []\n : this.table?.getHeaderGroups();\n\n const rows =\n !this.table \|\|\n this.table === undefined \|\|\n (this.parsedData.length === 0 && !this.hasSlotBody)\n ? []\n : this.table?.getRowModel()?.rows;\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n <slot name=\"head\"></slot>\n <slot name=\"body\"></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 &&\n this.parsedData.length === 0 &&\n !this.hasSlotHead &&\n !this.hasSlotBody ? (\n <p>{this.noColumnsNoDataMessage}</p>\n ) : (\n <table>\n {this.parsedColumns.length > 0 && headerGroups.length > 0 && (\n <thead>\n {this.parsedColumns.length > 0 && headerGroups\n ? headerGroups?.map(headerGroup => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <th key={header.id}>\n {header.isPlaceholder\n ? null\n : header.column.columnDef.header}\n </th>\n ))}\n </tr>\n ))\n : null}\n </thead>\n )}\n <tbody>\n {!rows \|\| rows.length === 0 ? (\n <tr>\n <td colSpan={this.parsedColumns.length \|\| 12}>\n {this.noDataMessage}\n </td>\n </tr>\n ) : (\n rows.map(row => {\n const rowId = row.id;\n const visibleCells = row?.getVisibleCells();\n\n const cells = visibleCells\n ?.map(cell => {\n const cellValue = cell.getValue();\n return `<td key=\"${cell.id}\" data-row-id=\"${rowId}\">${cellValue}</td>`;\n })\n .join('');\n\n return <tr key={rowId} innerHTML={cells}></tr>;\n })\n )}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n /**************************************************************************/\n}\n"]}

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

@@ -3,7 +3,7 @@ import { nameof } from "../../utils/class.utils";
 const NvDialogDocs = {
     component: 'nv-dialog',
     badge: 'beta',
-    subcomponents: ['nv-dialogheader', 'nv-dialogfooter', 'nv-button'],
+    subcomponents: ['nv-dialogheader', 'nv-dialogfooter', 'nv-button', 'nv-icon'],
     composedComponents: ['nv-dialogheader', 'nv-dialogfooter'],
     stories: [
         {
@@ -48,23 +48,23 @@ const NvDialogDocs = {
         },
         {
             name: nameof(x => x.leadingIcon),
-            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", leadingIcon: "user" }))),
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "leading-icon": "user" }))),
         },
         {
             name: nameof(x => x.trailingIcon),
-            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", trailingIcon: "user" }))),
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "trailing-icon": "user" }))),
         },
         {
             name: nameof(x => x.danger),
-            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { danger: true }))),
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", danger: true }))),
         },
         {
             name: nameof(x => x.cancelLabel),
-            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { cancelLabel: "Abbrechen" }))),
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "cancel-label": "Abbrechen" }))),
         },
         {
             name: nameof(x => x.submitLabel),
-            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { submitLabel: "Akzeptieren" }))),
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "submit-label": "Akzeptieren" }))),
         },
         {
             name: nameof(x => x.full),

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,KAAK,EAAE,MAAM;IACb,aAAa,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,CAAC;~~IAClE~~,kBAAkB,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;~~IAC1D~~,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB,CACV,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9C,IAAI,EAAE;gBACJ,IAAI,EAAE,KAAK;aACZ;YACD,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB,CACV,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;YACvD,IAAI,EAAE;gBACJ,aAAa,EAAE,IAAI;aACpB;YACD,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB,CACV,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;YACtD,IAAI,EAAE;gBACJ,YAAY,EAAE,IAAI;aACnB;YACD,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB,CACV,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACrD,IAAI,EAAE;gBACJ,WAAW,EAAE,IAAI;aAClB;YACD,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB,CACV,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YACvD,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,uBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,gBAAgB,GACP;gBACnB,6BAAoB,CACV,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;YAC1D,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,uBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,gBAAgB,EACxB,UAAU,EAAC,mBAAmB,GACb;gBACnB,6BAAoB,CACV,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YAC3D,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB;gBACpB,uBAAiB,IAAI,EAAC,QAAQ,~~EAAC~~,~~WAAW,EAAC,~~MAAM,GAAmB,~~CAC1D~~,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;YAC5D,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB;gBACpB,uBAAiB,IAAI,EAAC,QAAQ,~~EAAC~~,~~YAAY,EAAC,~~MAAM,GAAmB,~~CAC3D~~,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YACtD,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB;gBACpB,uBAAiB,MAAM,SAAmB,~~CAChC~~,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YAC3D,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB;gBACpB,~~uBAAiB~~,~~WAAW~~,EAAC,WAAW,~~GAAmB~~,~~CACjD~~,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YAC3D,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,6BAAoB;gBACpB,~~uBAAiB~~,~~WAAW~~,EAAC,aAAa,~~GAAmB~~,~~CACnD~~,CACb;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9C,IAAI,EAAE;gBACJ,IAAI,EAAE,IAAI;aACX;YACD,QAAQ,EAAE,CACR;gBACE,iBAAW,IAAI,EAAC,SAAS,kBAAwB;gBACjD,4FAGI,CACM,CACb;SACF;KACF;CACF,CAAC;AAEF,eAAe,YAAY,CAAC","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 badge: 'beta',\n subcomponents: ['nv-dialogheader', 'nv-dialogfooter', 'nv-button'],\n composedComponents: ['nv-dialogheader', 'nv-dialogfooter'],\n stories: [\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 {\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 {\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 {\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 {\n name: nameof<Components.NvDialog>(x => x.manualFocus),\n args: {\n manualFocus: 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 {\n name: nameof<Components.NvDialogheader>(x => x.heading),\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 {\n name: nameof<Components.NvDialogheader>(x => x.subheading),\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 {\n name: nameof<Components.NvDialogfooter>(x => x.leadingIcon),\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\" ~~leadingIcon~~=\"user\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n {\n name: nameof<Components.NvDialogfooter>(x => x.trailingIcon),\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\" ~~trailingIcon~~=\"user\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n {\n name: nameof<Components.NvDialogfooter>(x => x.danger),\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 danger></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n {\n name: nameof<Components.NvDialogfooter>(x => x.cancelLabel),\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 ~~cancelLabel~~=\"Abbrechen\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\n {\n name: nameof<Components.NvDialogfooter>(x => x.submitLabel),\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 ~~submitLabel~~=\"Akzeptieren\"></nv-dialogfooter>\n </nv-dialog>\n ),\n },\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 ],\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 badge: 'beta',\n subcomponents: ['nv-dialogheader', 'nv-dialogfooter', 'nv-button', 'nv-icon'],\n composedComponents: ['nv-dialogheader', 'nv-dialogfooter'],\n\n stories: [\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 {\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 {\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 {\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 {\n name: nameof<Components.NvDialog>(x => x.manualFocus),\n args: {\n manualFocus: 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 {\n name: nameof<Components.NvDialogheader>(x => x.heading),\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 {\n name: nameof<Components.NvDialogheader>(x => x.subheading),\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 {\n name: nameof<Components.NvDialogfooter>(x => x.leadingIcon),\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 {\n name: nameof<Components.NvDialogfooter>(x => x.trailingIcon),\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 {\n name: nameof<Components.NvDialogfooter>(x => x.danger),\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 {\n name: nameof<Components.NvDialogfooter>(x => x.cancelLabel),\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 {\n name: nameof<Components.NvDialogfooter>(x => x.submitLabel),\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 {\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 ],\n};\n\nexport default NvDialogDocs;\n"]}

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

@@ -84,7 +84,7 @@ export class NvDialog {
      * Call this method to show the dialog, making it visible on the screen.
      */
     async show() {
-        document.body.style.overflow = 'hidden'; // Prevent background scrolling
+        this.preventScroll();
         this.dialogElement.showModal();
         this.open = true;
     }
@@ -92,7 +92,7 @@ export class NvDialog {
      * Call this method to hide the dialog, making it disappear from view.
      */
     async hide() {
-        document.body.style.overflow = ''; // Restore scrolling
+        this.allowScroll();
         this.dialogElement.close();
         this.open = false;
     }
@@ -127,6 +127,18 @@ export class NvDialog {
             this.eventsAttached = true;
         }
     }
+    /**
+     * Prevents the body from scrolling when the dialog is open.
+     */
+    preventScroll() {
+        document.body.style.overflow = 'hidden';
+    }
+    /**
+     * Allows the body to scroll when the dialog is closed.
+     */
+    allowScroll() {
+        document.body.style.overflow = '';
+    }
     /**
      * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
@@ -202,12 +214,13 @@ export class NvDialog {
     }
     disconnectedCallback() {
         removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
+        this.allowScroll();
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '41efdb06fd00cc61dc85f057404cfe53aaebc6cd' }, h("slot", { key: 'dc72af729ac4157a942aa8cc81f778e37fe18248', name: "trigger" }), h("dialog", { key: '2d06731d33b555bae300ac761275fcb2789d9225', 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: 'be95c88ecc13b0772ce3532a23dc8b747b6a3305', class: "content" }, !this.undismissable && (h("nv-button", { key: '58d146e8343ebbc345185a53281bdd4856ff9cd6', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, h("nv-icon", { key: '789e9783b08a5a5171b4f9173049a521d45947b3', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: '3c3e2f3200fd01df1290ec5ae987310bfeb1c3af', class: "content-body", id: "dialog-content" }, h("slot", { key: 'dd73f87ccf18439d744ce930e4c886bd29c9f2e8' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { onNvDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
+        return (h(Host, { key: '8ebbae209535d0f67bbb4bcd66d65847b7d6c88d' }, h("slot", { key: '6ceafd436a535b0e3025af6c765387e805f9318b', name: "trigger" }), h("dialog", { key: '4812712f88e213fe05c1b02aa30a156bd4f35af6', 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: '7a0ab59bb51f94460f8e2aa556e1c5180a9dfc57', class: "content" }, !this.undismissable && (h("nv-button", { key: '720933cd447620330a3e1efb1e062d113615dbdb', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, h("nv-icon", { key: '4185d97dc5d1d0f56a9e51934cf8831ef3e80ffd', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: '6b5d8e40fcb1d6c983b0b1e6d6db1519b4b99c4d', class: "content-body", id: "dialog-content" }, h("slot", { key: '1d8a1cacee29dd6df5b79336ccf5e9a53b46bc14' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { onNvDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
     }
     static get is() { return "nv-dialog"; }
     static get originalStyleUrls() {

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';\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\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({ 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({ 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({ 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 Controls the dialog's autofocus behavior. When false (default), the dialog will\n * automatically focus the first focusable element. When true, automatic focus is\n * disabled and you must manually set focus on an element for accessibility compliance.\n /\n @Prop({ reflect: true })\n readonly manualFocus: boolean = false;\n\n /\n If true, the dialog visibility is managed manually through methods or the open prop.\n /\n @Prop({ reflect: true })\n readonly controlled: boolean = false;\n\n /\n If true, the dialog takes full width styling.\n /\n @Prop({ reflect: true })\n readonly full: boolean = false;\n\n //#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 document.body.style.overflow = 'hidden'; // Prevent background scrolling\n this.dialogElement.showModal();\n this.open = true;\n }\n\n /\n Call this method to hide the dialog, making it disappear from view.\n /\n @Method()\n public async hide() {\n document.body.style.overflow = ''; // Restore scrolling\n this.dialogElement.close();\n this.open = false;\n }\n\n /\n Handles the close button click.\n /\n private handleCloseButton = () => {\n this.hide();\n };\n\n /\n Handles the cancel button click.\n /\n private handleCancelButton = () => {\n this.hide();\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 //#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 /\n @Event()\n close: EventEmitter<void>;\n\n /\n Handles the dialog close event.\n /\n private handleDialogClose = () => {\n this.close.emit();\n };\n\n /\n Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.\n\n * @param {KeyboardEvent} event - The keydown event.\n /\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.undismissable) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n /\n Handles the click event to close the dialog when clickOutside is true.\n * @param {MouseEvent} event - The click event.\n /\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n /\n Handles the touchstart event to close the dialog when clickOutside is true.\n * @param {TouchEvent} event - The touchstart event.\n /\n @Listen('touchstart', { target: 'document' })\n handleDocumentTouch(event: TouchEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n private handleClickOutside = (event: MouseEvent \| TouchEvent) => {\n if (event.target === this.dialogElement) {\n this.hide();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private triggerClickEvents: EventsAndListeners = [\n ['click', this.show],\n ['touchstart', this.show],\n [\n 'keydown',\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.show();\n }\n },\n ],\n ];\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async handleDialogOpenChange(open: boolean) {\n if (open) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n /\n * Lifecycle method that runs before the component loads.\n * Initializes the trigger, header, and footer elements by finding them in the component's children.\n * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)\n /\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n\n this.headerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'header' \|\|\n child.tagName.toLowerCase() === 'nv-dialogheader'\n );\n }) as HTMLElement;\n\n this.footerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'footer' \|\|\n child.tagName.toLowerCase() === 'nv-dialogfooter'\n );\n }) as HTMLElement;\n }\n\n componentWillUpdate() {\n this.attachEventListeners();\n }\n\n componentDidLoad() {\n if (this.open) {\n this.show();\n }\n if (!this.manualFocus) {\n this.setAutofocus();\n }\n this.attachEventListeners();\n }\n\n disconnectedCallback() {\n removeEventListeners(this.triggerClickEvents, this.triggerElement, this);\n }\n\n //#endregion LIFECYCLE\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <dialog\n ref={el => (this.dialogElement = el)}\n onClose={this.handleDialogClose}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog-header\"\n aria-describedby=\"dialog-content\"\n class={clsx({ full: this.full })}\n >\n <div class=\"content\">\n {!this.undismissable && (\n <nv-button\n class=\"close-button\"\n emphasis=\"lower\"\n size=\"sm\"\n onClick={this.handleCloseButton}\n aria-label=\"Close dialog\"\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </nv-button>\n )}\n\n {this.headerElement ? (\n <slot name=\"header\"></slot>\n ) : (\n <nv-dialogheader id=\"dialog-header\"></nv-dialogheader>\n )}\n\n <div class=\"content-body\" id=\"dialog-content\">\n <slot></slot>\n </div>\n\n {this.footerElement ? (\n <slot name=\"footer\"></slot>\n ) : (\n <nv-dialogfooter\n onNvDialogCanceled={this.handleCancelButton}\n undismissable={this.undismissable}\n ></nv-dialogfooter>\n )}\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nv-dialog.js","sourceRoot":"","sources":["../../../src/components/nv-dialog/nv-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Method,\n Event,\n EventEmitter,\n Watch,\n Listen,\n} from '@stencil/core';\nimport { tabbable } from 'tabbable';\nimport {\n addEventListeners,\n removeEventListeners,\n type EventsAndListeners,\n} from '../../utils/events.utils';\nimport clsx from 'clsx';\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\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({ 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({ 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({ 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 Controls the dialog's autofocus behavior. When false (default), the dialog will\n * automatically focus the first focusable element. When true, automatic focus is\n * disabled and you must manually set focus on an element for accessibility compliance.\n /\n @Prop({ reflect: true })\n readonly manualFocus: boolean = false;\n\n /\n If true, the dialog visibility is managed manually through methods or the open prop.\n /\n @Prop({ reflect: true })\n readonly controlled: boolean = false;\n\n /\n If true, the dialog takes full width styling.\n /\n @Prop({ reflect: true })\n readonly full: boolean = false;\n\n //#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.preventScroll();\n this.dialogElement.showModal();\n this.open = true;\n }\n\n /\n Call this method to hide the dialog, making it disappear from view.\n /\n @Method()\n public async hide() {\n this.allowScroll();\n this.dialogElement.close();\n this.open = false;\n }\n\n /\n Handles the close button click.\n /\n private handleCloseButton = () => {\n this.hide();\n };\n\n /\n Handles the cancel button click.\n /\n private handleCancelButton = () => {\n this.hide();\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 /\n private preventScroll() {\n document.body.style.overflow = 'hidden';\n }\n\n /\n Allows the body to scroll when the dialog is closed.\n /\n\n private allowScroll() {\n document.body.style.overflow = '';\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 /\n @Event()\n close: EventEmitter<void>;\n\n /\n Handles the dialog close event.\n /\n private handleDialogClose = () => {\n this.close.emit();\n };\n\n /\n Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.\n\n * @param {KeyboardEvent} event - The keydown event.\n /\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.undismissable) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n /\n Handles the click event to close the dialog when clickOutside is true.\n * @param {MouseEvent} event - The click event.\n /\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n /\n Handles the touchstart event to close the dialog when clickOutside is true.\n * @param {TouchEvent} event - The touchstart event.\n /\n @Listen('touchstart', { target: 'document' })\n handleDocumentTouch(event: TouchEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n private handleClickOutside = (event: MouseEvent \| TouchEvent) => {\n if (event.target === this.dialogElement) {\n this.hide();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private triggerClickEvents: EventsAndListeners = [\n ['click', this.show],\n ['touchstart', this.show],\n [\n 'keydown',\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.show();\n }\n },\n ],\n ];\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async handleDialogOpenChange(open: boolean) {\n if (open) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n /\n * Lifecycle method that runs before the component loads.\n * Initializes the trigger, header, and footer elements by finding them in the component's children.\n * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)\n /\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n\n this.headerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'header' \|\|\n child.tagName.toLowerCase() === 'nv-dialogheader'\n );\n }) as HTMLElement;\n\n this.footerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'footer' \|\|\n child.tagName.toLowerCase() === 'nv-dialogfooter'\n );\n }) as HTMLElement;\n }\n\n componentWillUpdate() {\n this.attachEventListeners();\n }\n\n componentDidLoad() {\n if (this.open) {\n this.show();\n }\n if (!this.manualFocus) {\n this.setAutofocus();\n }\n this.attachEventListeners();\n }\n\n disconnectedCallback() {\n removeEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.allowScroll();\n }\n\n //#endregion LIFECYCLE\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <dialog\n ref={el => (this.dialogElement = el)}\n onClose={this.handleDialogClose}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog-header\"\n aria-describedby=\"dialog-content\"\n class={clsx({ full: this.full })}\n >\n <div class=\"content\">\n {!this.undismissable && (\n <nv-button\n class=\"close-button\"\n emphasis=\"lower\"\n size=\"sm\"\n onClick={this.handleCloseButton}\n aria-label=\"Close dialog\"\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </nv-button>\n )}\n\n {this.headerElement ? (\n <slot name=\"header\"></slot>\n ) : (\n <nv-dialogheader id=\"dialog-header\"></nv-dialogheader>\n )}\n\n <div class=\"content-body\" id=\"dialog-content\">\n <slot></slot>\n </div>\n\n {this.footerElement ? (\n <slot name=\"footer\"></slot>\n ) : (\n <nv-dialogfooter\n onNvDialogCanceled={this.handleCancelButton}\n undismissable={this.undismissable}\n ></nv-dialogfooter>\n )}\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"]}

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

@@ -50,19 +50,22 @@ nv-fielddropdown nv-popover {
   display: block;
 }
 nv-fielddropdown nv-popover [data-scope=popover] {
-  padding: var(--list-custom-padding);
-  background-color: var(--components-list-custom-background);
-  border: 1px solid var(--components-list-custom-border);
   width: 100%;
-}
-nv-fielddropdown nv-popover [data-scope=popover] hr {
-  color: var(--components-list-custom-separator);
+  display: flex;
+  flex-direction: column;
+  padding: var(--list-dropdown-padding);
+  border-radius: var(--list-dropdown-radius);
+  background-color: var(--components-list-dropdown-background);
+  border: 1px solid var(--components-list-dropdown-border);
 }
 nv-fielddropdown nv-popover [slot=content] {
-  gap: var(--list-custom-gap-y);
+  gap: var(--list-dropdown-gap-y);
   display: flex;
   flex-direction: column;
 }
+nv-fielddropdown nv-popover hr {
+  color: var(--components-list-dropdown-separator);
+}
 nv-fielddropdown .input-wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -83,11 +86,9 @@ nv-fielddropdown .input-container {
   border-width: 1px;
   border-style: solid;
   border-color: var(--nv-field-border-default);
-  opacity: var(--components-form-opacity-default);
+  opacity: var(--components-form-opacity-default, 1);
   background: var(--nv-field-background);
   transition: all 150ms ease-out;
-  display: flex;
-  align-items: center;
   position: relative;
   width: 100%;
   min-height: 40px;
@@ -95,7 +96,7 @@ nv-fielddropdown .input-container {
 nv-fielddropdown .input-container:hover {
   border-color: var(--nv-field-border-hover);
 }
-nv-fielddropdown .input-container:focus-within {
+nv-fielddropdown .input-container:focus-within, nv-fielddropdown .input-container:focus-within:hover, nv-fielddropdown .input-container:focus, nv-fielddropdown .input-container:focus:hover {
   border-color: var(--nv-field-border-focus);
   box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
 }
@@ -149,17 +150,13 @@ nv-fielddropdown .input-container .toggle-dropdown-icon {
   right: 0;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 2;
+  z-index: 1;
 }
 nv-fielddropdown .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
   position: absolute;
   right: 50px;
 }
-nv-fielddropdown .input-container.focus-within, nv-fielddropdown .input-container:hover {
-  border-color: var(--nv-field-border-focus);
-  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
-}
 nv-fielddropdown .non-filterable-text {
   display: block;
   border-radius: var(--form-field-radius);
@@ -195,16 +192,4 @@ nv-fielddropdown .error-description {
   font-style: normal;
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
-}
-nv-fielddropdown hr {
-  border: none;
-  height: 1px;
-  background-color: var(--components-list-custom-separator);
-  margin: 0;
-}
-.input-container.focus-within,
-.input-container:hover {
-  border-color: var(--nv-field-border-focus);
-  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
 }