npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.39 → 3.0.0-beta.41 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.39 → 3.0.0-beta.41

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

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 @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}
1	+ {"file":"nv-table.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,2xBAA2xB,CAAC;AAC/yB,sBAAe,UAAU;;MCwCZ,OAAO;IALpB;;;QAQmB,kBAAa,GAAG,IAAI,GAAG,EAAmB,CAAC;QAC3C,wBAAmB,GAAG,IAAI,GAAG,EAAmB,CAAC;;;QAMlE,kBAAa,GAAmB,EAAE,CAAC;QAGnC,eAAU,GAAU,EAAE,CAAC;QAGf,UAAK,GAAU,IAAI,CAAC;;;;;;;QAUnB,SAAI,GAAU,EAAE,CAAC;;;;QAMjB,kBAAa,GAAmB,EAAE,CAAC;;;;QAkBnC,kBAAa,GAAW,KAAK,CAAC;;;;QAM9B,kBAAa,GAAW,mBAAmB,CAAC;;;;;QAO5C,2BAAsB,GAC7B,0CAA0C,CAAC;KAqa9C;;;;;;;IA5ZS,cAAc;QACpB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAEvE,OAAO,CAAC,OAAO,CAAC,CAAC,GAA6B;YAC5C,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;YACrB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YAEpD,IAAI,QAAQ,EAAE;gBACZ,MAAM,OAAO,GAAGA,yBAAe,CAAC,QAAuB,CAAC,CAAC;gBACzD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;aACtC;YAED,MAAM,UAAU,GAAG,GAAG,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;YAExD,IAAI,UAAU,EAAE;gBACd,MAAM,OAAO,GAAGA,yBAAe,CAAC,UAAyB,CAAC,CAAC;gBAC3D,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;aAC5C;iBAAM;gBACL,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;gBAE1B,IAAI,MAAM,EAAE;oBACV,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBAChD,SAAS,CAAC,WAAW,GAAG,MAAM,CAAC;oBAC/B,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;iBAC9C;aACF;SACF,CAAC,CAAC;KACJ;IAEO,mBAAmB;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACnC;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YAC5C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SACjD;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9D,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SAChE;aAAM,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,GAAG,CAAC,EAAE;YAC5C,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC,CAAC;YAC/D,MAAM,kBAAkB,GAAG,UAAU,CAAC,GAAG,CAAe,GAAG,mBACtD,EAAE,IACL,IAAI,EAAE,GAAG,EACT,MAAM,EAAE,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,IAC7D,CAAC,CAAC;YAEJ,IAAI,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SAChE;aAAM,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACpC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAClD,GAAG,KAAK;gBACN,IAAI,EAAE,GAAG;gBACT,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;aACnD,CAAC,CACH,CAAC;YAEF,IAAI,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SAChE;KACF;IAEO,SAAS,CAAC,CAAM,EAAE,CAAM;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;KAChD;;;;;;;IAQO,cAAc,CAAC,QAAe,EAAE,QAAe;;QAErD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAC;QAC7D,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAC;QAE7D,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,EAAE;YAC9C,OAAO;SACR;QAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAC;KAC3D;;;;;;;IAQO,iBAAiB,CACvB,QAA2C,EAC3C,QAA2C;;QAG3C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAC;QAC7D,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAC;;QAG7D,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,EAAE;YAC9C,OAAO;SACR;;QAGD,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;KACnC;IAEO,eAAe;;QAErB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAElB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG;gBACX,OAAO,EAAE,IAAI,CAAC,aAAa;gBAC3B,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE;aAC1B,CAAC;SACH;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB;KACF;IAEO,YAAY;QAClB,IACE,IAAI,CAAC,UAAU;YACf,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;YAC9B,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAC1B;YACA,OAAO,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;SAC7B;aAAM;YACL,OAAO,EAAE,CAAC;SACX;KACF;;IAGO,mBAAmB,CAAC,GAAQ,EAAE,IAAY;;QAChD,QACE,MAAA,IAAI;aACD,KAAK,CAAC,GAAG,CAAC;aACV,MAAM,CACL,CAAC,GAAG,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,EACpE,GAAG,CACJ,mCAAI,IAAI,CAAC,aAAa,EACzB;KACH;IAEO,cAAc,CAAC,QAA6B,EAAE,GAAQ;QAC5D,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO,IAAI,CAAC;SACb;;QAGD,MAAM,eAAe,GACnB,QAAQ,YAAY,mBAAmB,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxE,MAAM,OAAO,GAAGA,yBAAe,CAAC,eAA8B,CAAC,CAAC;;QAGhE,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE;;YAEtC,IAAI,CAAC,8BAA8B,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;;YAG7C,IAAI,CAAC,6BAA6B,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;;YAG5C,IAAI,CAAC,6BAA6B,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;SAC7C,CAAC,CAAC;;QAGH,OAAO,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAC,EAAE;YACtD,MAAM,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC3D,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAEtC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;gBACnD,OAAO,CAAC,IAAI,CAAC,iCAAiC,EAAE,SAAS,CAAC,CAAC;gBAC3D,OAAO;aACR;YAED,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC9B,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC9B,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;YAEzD,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE;;gBAC7B,MAAM,IAAI,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,GAAG,CAAC,mCAAI,EAAE,CAAC;;gBAGvC,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG;oBACpC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAG,GAAG,CAAC,CAAC;oBACtB,OAAO,GAAG,CAAC;iBACZ,EAAE,EAAyB,CAAC,CAAC;gBAE9B,MAAM,MAAM,GAAgB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;gBAE7D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aAC1B,CAAC,CAAC;SACJ,CAAC,CAAC;;QAGH,UAAU,CAAC;YACT,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK;gBACzC,IAAI,OAAQ,KAAa,CAAC,iBAAiB,KAAK,UAAU,EAAE;oBACzD,KAAa,CAAC,iBAAiB,EAAE,CAAC;iBACpC;aACF,CAAC,CAAC;SACJ,EAAE,CAAC,CAAC,CAAC;QAEN,QACEC,iBACE,GAAG,EAAE,EAAE;gBACL,IAAI,EAAE,EAAE;oBACN,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;oBAClB,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;iBACzB;aACF,GACI,EACP;KACH;IAEO,8BAA8B,CAAC,OAAgB,EAAE,GAAQ;;QAE/D,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;YAC7B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;gBACpC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,GAAG,KAClE,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,CAAC,CACnC,CAAC;aACH;SACF,CAAC,CAAC;KACJ;IAEO,6BAA6B,CAAC,OAAgB,EAAE,GAAQ;;QAE9D,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,IAAI;YACzC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,GAAG,KACtD,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,CAAC,CACnC,CAAC;aACH;SACF,CAAC,CAAC;KACJ;IAEO,6BAA6B,CAAC,OAAgB,EAAE,GAAQ;;QAE9D,MAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAC;;QAGrC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;;QAGzD,IAAI,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAC3C,OAAO,KAAK,IAAI,KAAK,KAAK,WAAW,CAAC,SAAS,EAAE;YAC/C,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YACvD,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;SACtC;;QAGD,UAAU,CAAC,OAAO,CAAC,IAAI;YACrB,IACE,OAAQ,OAAe,CAAC,IAAI,CAAC,KAAK,UAAU;gBAC5C,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;gBACtB,CAACC,uBAAa,CAAC,GAAG,CAAC,IAAI,CAAC;cACxB;gBACA,IAAI;oBACF,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;;oBAG5B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;wBACrD,OAAO,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,GAAW,KAC5D,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,CAAC,CAC5B,CAAC;qBACV;iBACF;gBAAC,OAAO,KAAK,EAAE;oBACd,OAAO,CAAC,IAAI,CAAC,6BAA6B,IAAI,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;iBACnE;aACF;SACF,CAAC,CAAC;KACJ;;;;IAOD,YAAY,CAAC,QAAwB,EAAE,QAAwB;QAC7D,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;KAC5C;IAGD,gBAAgB,CAAC,QAA4B,EAAE,QAAwB;QACrE,IAAI;YACF,MAAM,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YAEtD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;SAC5C;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,4CAA4C,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACvE,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;IAID,kBAAkB;QAChB,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;;;;IAaD,MAAM;QACJ,MAAM,YAAY,GAChB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC;cACtE,EAAE;cACF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QAEzB,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC;cACnE,EAAE;cACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAEtB,QACED,QAACE,UAAI,uDACHF,kEAAK,KAAK,EAAC,QAAQ,IACjBA,oEAAa,CACT,EAENA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,EAE1B,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,IAC9DA,iBAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,sBAAsB,CAAO,KAExDA,mBAAO,KAAK,EAAC,OAAO,IACjB,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,KACvDA,mBAAO,KAAK,EAAC,cAAc,IACzBA,oBACG,YAAY;YACX,YAAY,CAAC,GAAG,CAAC,GAAG;gBAClB,QACEA,gBAAI,GAAG,EAAE,GAAG,CAAC,IAAI,IACd,IAAI,CAAC,cAAc,CAClB,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EACtC,EAAE,CACH,IAAI,GAAG,CAAC,MAAM,CACZ,EACL;aACH,CAAC,CACD,CACC,CACT,EACDA,mBAAO,KAAK,EAAC,YAAY,IACtB,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IACzBA,oBACEA,gBAAI,OAAO,EAAE,YAAY,CAAC,MAAM,IAAI,EAAE,EAAE,KAAK,EAAC,SAAS,IACpD,IAAI,CAAC,aAAa,CAChB,CACF,KAEL,IAAI,CAAC,GAAG,CAAC,GAAG,KACVA,gBAAI,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IACzB,YAAY,CAAC,GAAG,CAAC,GAAG;;YAAI,QACvBA,oBACG,IAAI,CAAC,cAAc,CAClB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAChC,GAAG,CACJ;iBACE,MAAA,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,mCAAI,IAAI,CAAC,aAAa,CAAC,CACpC,EACN;SAAA,CAAC,CACC,CACN,CAAC,CACH,CACK,CACF,CACT,EAEDA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,EACP;KACH;;;;;;;;;;;;;;;","names":["deepCopyElement","h","excludedProps","Host"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["@mixin root-styles() {\n display: block;\n}\n\nnv-table {\n @include root-styles();\n\n .hidden {\n display: none;\n }\n\n table {\n border-collapse: collapse;\n border-color: inherit;\n text-indent: 0;\n width: 100%;\n }\n th {\n text-align: left;\n border-bottom: 1px solid var(--components-datagrid-border-header);\n height: var(--spacing-12);\n padding: var(--spacing-3) var(--spacing-4);\n font-size: var(--font-size-md);\n font-weight: 700;\n color: var(--components-datagrid-content-header);\n }\n td {\n border-bottom: 1px solid var(--components-datagrid-border-body);\n height: var(--spacing-12);\n max-height: var(--spacing-14);\n padding: var(--spacing-2) var(--spacing-4);\n font-size: var(--font-size-md);\n font-weight: 400;\n color: var(--components-datagrid-content-text);\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n tbody > tr:hover {\n background: var(--color-interaction-container-neutral-background-hover);\n }\n}\n\n// https://tailwindcss.com/docs/table-layout","/* eslint-disable @typescript-eslint/no-explicit-any /\nimport {\n Component,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { ColumnConfig } from '../../interfaces/ColumnConfig';\nimport { ActionEvent } from '../../interfaces/actionEvent';\nimport { deepCopyElement, excludedProps } from '../../utils/dom.utils';\n\n/\n Helper interface to define the table structure\n /\ninterface Table {\n /\n Configuration of the columns of the table\n /\n columns: ColumnConfig[];\n\n /\n Data to be displayed in the table\n /\n data: any[];\n}\n\n/\n @slot default - Slot for the composed table columns\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 /\n@Component({\n tag: 'nv-table',\n styleUrl: 'nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() el: HTMLNvTableElement;\n\n private readonly templateCache = new Map<string, Element>();\n private readonly headerTemplateCache = new Map<string, Element>();\n\n /*************************************************************************/\n //#region STATES\n\n @State()\n parsedColumns: ColumnConfig[] = [];\n\n @State()\n parsedData: any[] = [];\n\n @State()\n private table: Table = null;\n\n //#endregion STATES\n /************************************************************************/\n //#region PROPERTIES\n\n /\n * Data to be displayed in the table\n /\n @Prop({ reflect: true })\n readonly data: any[] = [];\n\n /\n Configuration of the columns of the table\n /\n @Prop({ reflect: true })\n readonly columnsConfig: ColumnConfig[] = [];\n\n /\n Data to be displayed in the table\n /\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /\n Configuration of the columns of the table\n /\n @Prop({ reflect: true })\n readonly columnsConfigJson?: string;\n\n /\n Fallback value to be displayed when data is not available\n /\n @Prop({ reflect: true })\n readonly fallbackValue: string = 'N/A';\n\n /\n Message to be displayed when no data is available\n /\n @Prop({ reflect: true })\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({ reflect: true })\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Caches templates for cells and headers upfront to improve performance.\n /\n private cacheTemplates() {\n const columns = Array.from(this.el.querySelectorAll('nv-tablecolumn'));\n\n columns.forEach((col: HTMLNvTablecolumnElement) => {\n const key = col.name;\n const cellSlot = col.querySelector('[slot=\"cell\"]');\n\n if (cellSlot) {\n const element = deepCopyElement(cellSlot as HTMLElement);\n this.templateCache.set(key, element);\n }\n\n const headerSlot = col.querySelector('[slot=\"header\"]');\n\n if (headerSlot) {\n const element = deepCopyElement(headerSlot as HTMLElement);\n this.headerTemplateCache.set(key, element);\n } else {\n const header = col.header;\n\n if (header) {\n const headerDiv = document.createElement('div');\n headerDiv.textContent = header;\n this.headerTemplateCache.set(key, headerDiv);\n }\n }\n });\n }\n\n private parseDataAndColumns() {\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else if (this.data && this.data.length > 0) {\n this.parseDataArray(this.data, this.parsedData);\n }\n\n if (this.columnsConfigJson) {\n this.parseJsonColumns(this.columnsConfigJson, this.parsedColumns);\n } else if (this.columnsConfig && this.columnsConfig.length > 0) {\n this.parseColumnsArray(this.columnsConfig, this.parsedColumns);\n } else if (this.headerTemplateCache.size > 0) {\n const headerKeys = Array.from(this.headerTemplateCache.keys());\n const arrayColumnsConfig = headerKeys.map<ColumnConfig>(key => ({\n ...{}, // Ensure no prototype inheritance\n name: key,\n header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '',\n }));\n\n this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);\n } else if (this.parsedData.length > 0) {\n const firstRow = this.parsedData[0];\n const arrayColumnsConfig = Object.keys(firstRow).map<ColumnConfig>(\n key => ({\n name: key,\n header: key.charAt(0).toUpperCase() + key.slice(1),\n }),\n );\n\n this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);\n }\n }\n\n private deepEqual(a: any, b: any): boolean {\n return JSON.stringify(a) === JSON.stringify(b);\n }\n\n /\n Parses the data array and sets the state accordingly\n * @param {any[]} newValue - New value of the data array\n * @param {any[]} oldValue - Old value of the data array\n * @returns {void}\n /\n private parseDataArray(newValue: any[], oldValue: any[]) {\n // Ensure both are arrays for proper comparison\n const safeNewValue = Array.isArray(newValue) ? newValue : [];\n const safeOldValue = Array.isArray(oldValue) ? oldValue : [];\n\n if (this.deepEqual(safeNewValue, safeOldValue)) {\n return; // Deep comparison\n }\n\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n /\n Parses the columns array and sets the state accordingly\n * @param {ColumnConfig[]} newValue - New value of the columns array\n * @param {ColumnConfig[]} oldValue - Old value of the columns array\n * @returns {void}\n /\n private parseColumnsArray(\n newValue: ColumnConfig[] \| null \| undefined,\n oldValue: ColumnConfig[] \| null \| undefined,\n ) {\n // Ensure both are arrays for proper comparison\n const safeNewValue = Array.isArray(newValue) ? newValue : [];\n const safeOldValue = Array.isArray(oldValue) ? oldValue : [];\n\n // Use a proper deep comparison function (e.g., Lodash's isEqual)\n if (this.deepEqual(safeNewValue, safeOldValue)) {\n return;\n }\n\n // Assign only after confirming changes\n this.parsedColumns = safeNewValue;\n }\n\n private initializeTable() {\n // Clear the previous table instance (if any)\n this.table = null;\n\n if (this.parsedColumns.length > 0) {\n this.table = {\n columns: this.parsedColumns,\n data: this.getTableData(),\n };\n } else {\n this.table = null;\n }\n }\n\n private getTableData(): 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 // Helper function to get nested property value\n private replaceKeyWithValue(obj: any, path: string) {\n return (\n path\n .split('.')\n .reduce(\n (acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined),\n obj,\n ) ?? this.fallbackValue\n );\n }\n\n private renderTemplate(template: Element \| undefined, row: any) {\n if (!template) {\n return null;\n }\n\n // Handle <template> elements correctly\n const templateContent =\n template instanceof HTMLTemplateElement ? template.content : template;\n const element = deepCopyElement(templateContent as HTMLElement);\n\n // Replace placeholders in text content, attributes, and properties\n element.querySelectorAll('').forEach(el => {\n // Replace placeholders in text content\n this.replacePlaceholdersTextContent(el, row);\n\n // Replace placeholders in attributes\n this.replacePlaceholdersAttributes(el, row);\n\n // Replace placeholders in properties\n this.replacePlaceholdersProperties(el, row);\n });\n\n // Handle `data-bind-event`\n element.querySelectorAll('[data-bind-event]').forEach(el => {\n const bindEvent = el.getAttribute('data-bind-event') \|\| '';\n const splitted = bindEvent.split(':');\n\n if (!bindEvent.includes(':') \|\| splitted.length < 2) {\n console.warn('Invalid data-bind-event format:', bindEvent);\n return;\n }\n\n const eventType = splitted[0];\n const keyAction = splitted[1];\n const details = splitted.length > 2 ? splitted[2] : null;\n\n el.addEventListener(eventType, () => {\n const keys = details?.split(',') ?? [];\n\n // Convert keys into a single object instead of an array of objects\n const keyValue = keys.reduce((acc, key) => {\n acc[key] = row?.[key];\n return acc;\n }, {} as Record<string, any>);\n\n const action: ActionEvent = { keyAction, details: keyValue };\n\n this.action.emit(action);\n });\n });\n\n // Ensure Web Components are properly connected\n setTimeout(() => {\n element.querySelectorAll('').forEach(child => {\n if (typeof (child as any).connectedCallback === 'function') {\n (child as any).connectedCallback();\n }\n });\n }, 0);\n\n return (\n <div\n ref={el => {\n if (el) {\n el.innerHTML = ''; // Remove existing content\n el.appendChild(element); // Append new element\n }\n }}\n ></div>\n );\n }\n\n private replacePlaceholdersTextContent(element: Element, row: any) {\n // ✅ Replace placeholders in text content\n element.childNodes.forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n node.textContent = node.textContent.replace(/__([\\w.]+)__/g, (_, key) =>\n this.replaceKeyWithValue(row, key),\n );\n }\n });\n }\n\n private replacePlaceholdersAttributes(element: Element, row: any) {\n // ✅ Replace placeholders in attributes\n Array.from(element.attributes).forEach(attr => {\n if (attr.value.includes('__')) {\n attr.value = attr.value.replace(/__([\\w.]+)__/g, (_, key) =>\n this.replaceKeyWithValue(row, key),\n );\n }\n });\n }\n\n private replacePlaceholdersProperties(element: Element, row: any) {\n // ✅ Dynamically extract relevant properties\n const properties = new Set<string>();\n\n // Collect only own enumerable properties\n Object.keys(element).forEach(key => properties.add(key));\n\n // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)\n let proto = Object.getPrototypeOf(element);\n while (proto && proto !== HTMLElement.prototype) {\n Object.keys(proto).forEach(key => properties.add(key));\n proto = Object.getPrototypeOf(proto);\n }\n\n // ✅ Filter and copy only non-function properties and exclude irrelevant ones\n properties.forEach(prop => {\n if (\n typeof (element as any)[prop] !== 'function' && // Ignore methods\n !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)\n !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props\n ) {\n try {\n const value = element[prop];\n\n // ✅ Replace placeholders only if the value is a string\n if (typeof value === 'string' && value.includes('__')) {\n element[prop] = value.replace(/__([\\w.]+)__/g, (_, key: string) =>\n this.replaceKeyWithValue(row, key),\n ) as any; // ✅ TypeScript safe\n }\n } catch (error) {\n console.warn(`Could not assign property ${prop}:`, error.message);\n }\n }\n });\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('columnsConfig')\n parseColumns(newValue: ColumnConfig[], oldValue: ColumnConfig[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsConfigJson')\n parseJsonColumns(newValue: string \| undefined, oldValue: ColumnConfig[]) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, oldValue);\n } catch (e) {\n console.error('Invalid JSON format for columnsConfigJson:', 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 LIFECYCLE\n\n componentWillLoad() {\n this.cacheTemplates();\n\n this.parseDataAndColumns();\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n @Event()\n action: EventEmitter<ActionEvent>;\n\n //#endregion EVENTS\n /**************************************************************************/\n //#region RENDER\n\n render() {\n const headerGroups =\n !this.table \|\| this.table === undefined \|\| this.parsedColumns.length === 0\n ? []\n : this.table.columns;\n\n const rows =\n !this.table \|\| this.table === undefined \|\| this.parsedData.length === 0\n ? []\n : this.table.data;\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (\n <div class=\"no-data\">{this.noColumnsNoDataMessage}</div>\n ) : (\n <table class=\"table\">\n {this.parsedColumns.length > 0 && headerGroups.length > 0 && (\n <thead class=\"table-header\">\n <tr>\n {headerGroups &&\n headerGroups.map(col => {\n return (\n <th key={col.name}>\n {this.renderTemplate(\n this.headerTemplateCache.get(col.name),\n {},\n ) \|\| col.header}\n </th>\n );\n })}\n </tr>\n </thead>\n )}\n <tbody class=\"table-body\">\n {!rows \|\| rows.length === 0 ? (\n <tr>\n <td colSpan={headerGroups.length \|\| 12} class=\"no-data\">\n {this.noDataMessage}\n </td>\n </tr>\n ) : (\n rows.map(row => (\n <tr key={JSON.stringify(row)}>\n {headerGroups.map(col => (\n <td>\n {this.renderTemplate(\n this.templateCache.get(col.name),\n row,\n ) \|\|\n (row[col.name] ?? this.fallbackValue)}\n </td>\n ))}\n </tr>\n ))\n )}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}

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

@@ -4,37 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5910ba06.js');
-const nvTablecolumnCss = "";
-const NvTablecolumnStyle0 = nvTablecolumnCss;
 const NvTablecolumn = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * A non-negative integer value indicating how many columns the header cell spans
-         * or extends. The default value is 1. User agents dismiss values higher than 1000
-         * as incorrect, defaulting such values to 1.
-         * @default 1
-         */
-        this.colspan = 1;
-        /**
-         * A non-negative integer value indicating how many rows the header cell spans or
-         * extends. The default value is 1; if its value is set to 0, the header cell will
-         * extends to the end of the table grouping section (`<thead>`, `<tbody>`, `<tfoot>`,
-         * even if implicitly defined), that the `<th>` belongs to. Values higher than 65534
-         * are clipped at 65534.
-         * @default 1
-         */
-        this.rowspan = 1;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b915edf73d123698dda7b09dff8338ab6e7996bc' }, index.h("th", { key: 'dc055106d9bcd20c962515477d6d6abd570b36b6', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, index.h("slot", { key: '2b760e4a3a0a796724300cce8437d886b9c26deb' }))));
+        return null;
     }
 };
-NvTablecolumn.style = NvTablecolumnStyle0;
 exports.nv_tablecolumn = NvTablecolumn;

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

	@@ -1 +1 @@
1	- {"file":"nv-tablecolumn.entry.cjs.js","mappings":";;;;;;~~AAAA~~,~~MAAM,gBAAgB,GAAG,EAAE,CAAC;AAC5B,4BAAe,gBAAgB;;MCSlB,~~aAAa~~;IAL1B;;;;;;;;QAyBW~~,~~YAAO,GAAW,CAAC,CAAC;;;;;;;;;QAWpB,YAAO,GAAW,CAAC,CAAC;KAgD9B;;;;IAlBC,~~MAAM;QACJ,~~QACEA,QAACC,UAAI,uDACHD,iEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,~~OAAO,~~EAAE,~~IAAI,CAAC~~,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,IAEjBA,oEAAa,CACV,CACA,EACP~~;~~KACH;;;;;;~~","names":[~~"h","Host"~~],"sources":["src/components/nv-tablecolumn/nv-tablecolumn.~~scss?tag=nv-tablecolumn","src/components/nv-tablecolumn/nv-tablecolumn.~~tsx"],"sourcesContent":["~~// No need for the moment\n","~~import { Component, ~~Host,~~ Prop, h } from '@stencil/core';\n\n/*\n @~~slot default - Use this slot to insert HTML into the table column.\n /\n@~~Component({\n tag: 'nv-tablecolumn',\n ~~styleUrl: 'nv-tablecolumn.scss',\n~~ shadow: false,\n})\nexport class NvTablecolumn {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * A ~~short, abbreviated description~~ of the ~~header~~ ~~cell's~~ ~~content~~ ~~provided as an~~\n * alternative label to use for the header cell when referencing the cell in other\n * contexts. Some user-agents, such as speech readers, may present this description\n * before the content itself.\n /\n @Prop(~~)\n readonly~~ ~~abbr~~: string;\n\n /\n A non-negative integer value indicating how many columns the header cell spans\n * or extends. The default value is 1. User agents dismiss values higher than 1000\n * as incorrect, defaulting such values to 1.\n * @default 1\n /\n @Prop()\n readonly ~~colspan:~~ ~~number = 1~~;\n\n /\n A ~~non-negative integer value indicating how many rows the header cell spans or\n * extends. The default value is 1; if its value is set to 0, the header cell will\n * extends to the end~~ of the ~~table~~ ~~grouping section (`<thead>`, `<tbody>`, `<tfoot>`,\n * even if implicitly defined), that the `<th>` belongs~~ to. ~~Values~~ ~~higher than 65534~~\n * are clipped at 65534.\n * @default 1\n /\n @Prop(~~)\n readonly~~ ~~rowspan~~: ~~number~~ = 1;\n\n /\n A list of space-separated strings corresponding to the id attributes of the `<th>`\n * elements that provide the headers for this header cell.\n * @example 'col1 col2'\n /\n @Prop()\n readonly ~~headers:~~ string;\n\n /\n Defines the cells that the header (defined in the `<th>`) element relates to.\n * Possible enumerated values are:\n \n - `col`: The header relates to all cells of the column it belongs to.\n * - `row`: The header relates to all cells of the row it belongs to.\n * - `colgroup`: The header relates to all cells of the column group it belongs to.\n * - `rowgroup`: The header relates to all cells of the row group it belongs to.\n \n If the `scope` attribute is not specified, or its value is not `row`, `col`,\n * `rowgroup`, or `colgroup`, then browsers automatically select the set of cells to\n * which the header cell applies.\n /\n @Prop()\n readonly scope: 'col' \| 'row' \| 'colgroup' \| 'rowgroup';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <th\n abbr={this.abbr}\n colSpan={this.colspan}\n headers={this.headers}\n rowSpan={this.rowspan}\n scope={this.scope}\n >\n <slot></slot>\n </th>\n </Host>\n );\n }\n\n ~~//#~~endregion RENDER\n ~~/**************************************************************************/\n~~}\n"],"version":3}
1	+ {"file":"nv-tablecolumn.entry.cjs.js","mappings":";;;;;;MAMa,aAAa;;;;;;;IAoBxB,MAAM;QACJ,OAAO,IAAI,CAAC;KACb;;;;;","names":[],"sources":["src/components/nv-tablecolumn/nv-tablecolumn.tsx"],"sourcesContent":["import { Component, Prop } from '@stencil/core';\n\n@Component({\n tag: 'nv-tablecolumn',\n shadow: false,\n})\nexport class NvTablecolumn {\n /**************************************************************************/\n //#region PROPERTIES\n\n /\n * Name of the column and data accessor\n /\n @Prop({ reflect: true })\n readonly name!: string;\n\n /\n Header of the column to be displayed\n /\n @Prop({ reflect: true })\n readonly header?: string;\n\n //#endregion PROPERTIES\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return null;\n }\n\n // #endregion RENDER\n}\n"],"version":3}

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

@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '75e37c699cfc3b0488dfb660ff7e1dc8bc4fcec7', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'a34755c8cfa921ffbc7e60cff93f89b2eb451007', class: "input-container" }, index.h("input", { key: 'dbfc3021614001f1fd2d2fb3dd1352fc33078fb2', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'afac6bb640ba44af0d9fc3841dae90bfb3130c89', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'eac00ea14d7181b17cc06d48f69dcd46d891d9b9', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '52f3e6ee4c7fed8218a2c782b1cdedd4230ce8ac', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '861fc6d2e9abf58e43e45e91dfdd2da7705c5e1a', class: "description" }, index.h("slot", { key: 'cb218ac2d197f84202c668621ee9e56c936ca50f', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '0ea7a73c5b656d0d7f9342a9526dc00a66a94f83', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'eb294c704b9f3568e03af1817a302d2edfe24486', class: "input-container" }, index.h("input", { key: '777b6e7172691aba435751364c5908f381390f23', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '92dbdb51e8c9fc231572009d37e274e070334292', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9d50bac5932e25c3b3c8dd04fe44e2622e22b6ac', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'bf6cb8ff071c11d7809580a5dee61a1dfd89c112', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'db77b501162725dcf3b05b3d7c4b26d0f933ac8b', class: "description" }, index.h("slot", { key: 'a201c736b5237e88ee0d8caa3999874caa7f85f3', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -36,7 +36,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '59735e979b8e88ad61ebbdf77c305377884a445e' }, index.h("slot", { key: '6002089cc748045fa836f03d2b4da9101f4f2851' }), index.h("nv-popover", { key: '34fa8dd4cb98dd9c46ad2a723153cdffb5fa9d88', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '10869c05ea2247817a571128b104f6995eff5b1a', slot: "content" }, this.message), index.h("slot", { key: '3527b66fc2aa974e243470d45a1aaab6b8453401', name: "content" }))));
+        return (index.h(index.Host, { key: 'c5a2dddc41ad3379be20d7809faf4bd683ff459c' }, index.h("slot", { key: '400d32d15407fed83e424f00338efd60528b6fb2' }), index.h("nv-popover", { key: 'd7efd362efa204aae2fea623a5efd33d3b1429b0', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'a6426276d51217387c4d028bb0eb719839197d62', slot: "content" }, this.message), index.h("slot", { key: '01f6af2ae0243f3cd6c2d1a01e6c16cd2fd16cd0', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "components/nv-menuitem/nv-menuitem.js",
     "components/nv-alert/nv-alert.js",
     "components/nv-avatar/nv-avatar.js",
     "components/nv-badge/nv-badge.js",
@@ -10,11 +11,7 @@
     "components/nv-calendar/nv-calendar.js",
     "components/nv-col/nv-col.js",
     "components/nv-datagrid/nv-datagrid.js",
-    "components/nv-datagridbody/nv-datagridbody.js",
     "components/nv-datagridcolumn/nv-datagridcolumn.js",
-    "components/nv-datagriddatacell/nv-datagriddatacell.js",
-    "components/nv-datagridhead/nv-datagridhead.js",
-    "components/nv-datagridrow/nv-datagridrow.js",
     "components/nv-dialog/nv-dialog.js",
     "components/nv-dialogfooter/nv-dialogfooter.js",
     "components/nv-dialogheader/nv-dialogheader.js",
@@ -33,17 +30,12 @@
     "components/nv-icon/nv-icon.js",
     "components/nv-iconbutton/nv-iconbutton.js",
     "components/nv-loader/nv-loader.js",
-    "components/nv-menuitem/nv-menuitem.js",
     "components/nv-menu/nv-menu.js",
     "components/nv-popover/nv-popover.js",
     "components/nv-row/nv-row.js",
     "components/nv-stack/nv-stack.js",
     "components/nv-table/nv-table.js",
-    "components/nv-tablebody/nv-tablebody.js",
     "components/nv-tablecolumn/nv-tablecolumn.js",
-    "components/nv-tabledatacell/nv-tabledatacell.js",
-    "components/nv-tablehead/nv-tablehead.js",
-    "components/nv-tablerow/nv-tablerow.js",
     "components/nv-toggle/nv-toggle.js",
     "components/nv-tooltip/nv-tooltip.js"
   ],

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

@@ -36,6 +36,11 @@ const NvAlertDocs = {
             args: { dismissible: true, message: 'You can close this alert.' },
             template: h("nv-alert", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.hasNoAnimations),
+            args: { hasNoAnimations: true, message: 'No animations.' },
+            template: h("nv-alert", { "data-storybook-args": true }),
+        },
         {
             name: nameof(x => x.preventAutoClose),
             args: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-alert.docs.js","sourceRoot":"","sources":["../../../src/components/nv-alert/nv-alert.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,WAAW,GAAiC;IAChD,SAAS,EAAE,UAAU;IACrB,aAAa,EAAE,CAAC,WAAW,CAAC;IAC5B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE;YACtC,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACjD,QAAQ,EAAE,CACR,yBAAgB,qBAAqB;gBACnC,6CAEE,QAAQ,EAAC,aAAa,EACtB,OAAO,EAAC,sBAAsB,GACpB;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP;gBAEZ,6CAEE,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,OAAO,GACL;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP,CACR,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAChD,IAAI,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE;YACnC,QAAQ,EAAE,CACR;gBACE,+CAA8C,CACrC,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAChD,IAAI,EAAE;gBACJ,OAAO,EAAE,gBAAgB;gBACzB,OAAO,EAAE,4CAA4C;aACtD;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE;YACnE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACpD,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,2BAA2B,EAAE;YACjE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,IAAI,EAAE;gBACJ,gBAAgB,EAAE,IAAI;gBACtB,WAAW,EAAE,IAAI;gBACjB,OAAO,EAAE,6BAA6B;aACvC;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,+BAA+B,EAAE;YAChE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,aAAa;YACnB,WAAW,EACT,sEAAsE;YACxE,QAAQ,EAAE,CACR;gBACE,WAAK,GAAG,EAAC,+BAA+B,gBAAY,YAAY,GAAG,CAC1D,CACZ;SACF;KACF;CACF,CAAC;AAEF,eAAe,WAAW,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 NvAlertDocs: NovaDocs<Components.NvAlert> = {\n component: 'nv-alert',\n subcomponents: ['nv-button'],\n stories: [\n {\n name: 'Default',\n args: { message: 'This is an alert!' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.feedback),\n template: (\n <div data-class=\"flex flex-col gap-4\">\n <nv-alert\n data-storybook-args\n feedback=\"information\"\n heading=\"Default: Information\"\n ></nv-alert>\n\n <nv-alert\n data-storybook-args\n feedback=\"warning\"\n heading=\"Warning\"\n ></nv-alert>\n\n <nv-alert\n data-storybook-args\n feedback=\"error\"\n heading=\"Error\"\n ></nv-alert>\n\n <nv-alert\n data-storybook-args\n feedback=\"success\"\n heading=\"Success\"\n ></nv-alert>\n\n <nv-alert\n data-storybook-args\n feedback=\"neutral\"\n heading=\"Neutral\"\n ></nv-alert>\n </div>\n ),\n },\n {\n name: nameof<Components.NvAlert>(x => x.message),\n args: { message: 'custom message' },\n template: (\n <nv-alert data-storybook-args>\n <nv-button>With additional actions</nv-button>\n </nv-alert>\n ),\n },\n {\n name: nameof<Components.NvAlert>(x => x.heading),\n args: {\n heading: 'Custom Heading',\n message: 'The content is rendered below the heading.',\n },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.icon),\n args: { icon: 'user', message: 'You can change the default icon.' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.dismissible),\n args: { dismissible: true, message: 'You can close this alert.' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.preventAutoClose),\n args: {\n preventAutoClose: true,\n dismissible: true,\n message: 'Prevent auto close enabled.',\n },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.hidden),\n args: { hidden: true, message: 'This is hidden until changed.' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: 'DefaultSlot',\n description:\n 'The default slot can be used to add additional content to the alert.',\n template: (\n <nv-alert data-storybook-args>\n <img src=\"https://picsum.photos/200/200\" data-class=\"rounded-md\" />\n </nv-alert>\n ),\n },\n ],\n};\n\nexport default NvAlertDocs;\n"]}
1	+ {"version":3,"file":"nv-alert.docs.js","sourceRoot":"","sources":["../../../src/components/nv-alert/nv-alert.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,WAAW,GAAiC;IAChD,SAAS,EAAE,UAAU;IACrB,aAAa,EAAE,CAAC,WAAW,CAAC;IAC5B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE;YACtC,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACjD,QAAQ,EAAE,CACR,yBAAgB,qBAAqB;gBACnC,6CAEE,QAAQ,EAAC,aAAa,EACtB,OAAO,EAAC,sBAAsB,GACpB;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP;gBAEZ,6CAEE,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,OAAO,GACL;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP,CACR,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAChD,IAAI,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE;YACnC,QAAQ,EAAE,CACR;gBACE,+CAA8C,CACrC,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAChD,IAAI,EAAE;gBACJ,OAAO,EAAE,gBAAgB;gBACzB,OAAO,EAAE,4CAA4C;aACtD;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE;YACnE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACpD,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,2BAA2B,EAAE;YACjE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;YACxD,IAAI,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE;YAC1D,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,IAAI,EAAE;gBACJ,gBAAgB,EAAE,IAAI;gBACtB,WAAW,EAAE,IAAI;gBACjB,OAAO,EAAE,6BAA6B;aACvC;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,+BAA+B,EAAE;YAChE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,aAAa;YACnB,WAAW,EACT,sEAAsE;YACxE,QAAQ,EAAE,CACR;gBACE,WAAK,GAAG,EAAC,+BAA+B,gBAAY,YAAY,GAAG,CAC1D,CACZ;SACF;KACF;CACF,CAAC;AAEF,eAAe,WAAW,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 NvAlertDocs: NovaDocs<Components.NvAlert> = {\n component: 'nv-alert',\n subcomponents: ['nv-button'],\n stories: [\n {\n name: 'Default',\n args: { message: 'This is an alert!' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.feedback),\n template: (\n <div data-class=\"flex flex-col gap-4\">\n <nv-alert\n data-storybook-args\n feedback=\"information\"\n heading=\"Default: Information\"\n ></nv-alert>\n\n <nv-alert\n data-storybook-args\n feedback=\"warning\"\n heading=\"Warning\"\n ></nv-alert>\n\n <nv-alert\n data-storybook-args\n feedback=\"error\"\n heading=\"Error\"\n ></nv-alert>\n\n <nv-alert\n data-storybook-args\n feedback=\"success\"\n heading=\"Success\"\n ></nv-alert>\n\n <nv-alert\n data-storybook-args\n feedback=\"neutral\"\n heading=\"Neutral\"\n ></nv-alert>\n </div>\n ),\n },\n {\n name: nameof<Components.NvAlert>(x => x.message),\n args: { message: 'custom message' },\n template: (\n <nv-alert data-storybook-args>\n <nv-button>With additional actions</nv-button>\n </nv-alert>\n ),\n },\n {\n name: nameof<Components.NvAlert>(x => x.heading),\n args: {\n heading: 'Custom Heading',\n message: 'The content is rendered below the heading.',\n },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.icon),\n args: { icon: 'user', message: 'You can change the default icon.' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.dismissible),\n args: { dismissible: true, message: 'You can close this alert.' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.hasNoAnimations),\n args: { hasNoAnimations: true, message: 'No animations.' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.preventAutoClose),\n args: {\n preventAutoClose: true,\n dismissible: true,\n message: 'Prevent auto close enabled.',\n },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: nameof<Components.NvAlert>(x => x.hidden),\n args: { hidden: true, message: 'This is hidden until changed.' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n {\n name: 'DefaultSlot',\n description:\n 'The default slot can be used to add additional content to the alert.',\n template: (\n <nv-alert data-storybook-args>\n <img src=\"https://picsum.photos/200/200\" data-class=\"rounded-md\" />\n </nv-alert>\n ),\n },\n ],\n};\n\nexport default NvAlertDocs;\n"]}

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

@@ -28,6 +28,10 @@ export class NvAlert {
          * Controls the visibility of the alert. Will animate with fade and collapse.
          */
         this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        /**
+         * When true, the alert will not animate when it is hidden or shown.
+         */
+        this.hasNoAnimations = false;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -90,13 +94,35 @@ export class NvAlert {
      */
     async handleHiddenChange(hidden) {
         this.hiddenChanged.emit(hidden);
+        await this.updateVisibility(hidden);
+        this.hiddenChangedComplete.emit(hidden);
+    }
+    /**
+     * Updates the visibility state of the alert with optional animations
+     * @param {boolean} hidden - Whether the alert should be hidden
+     */
+    async updateVisibility(hidden) {
+        if (this.hasNoAnimations) {
+            this.toggleHiddenClass(hidden);
+            return;
+        }
         const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
         const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
-        if (hidden === true)
+        if (hidden) {
             await timeline(fadeOut, collapse).start();
-        if (hidden === false)
+            this.toggleHiddenClass(true);
+        }
+        else {
+            this.toggleHiddenClass(false);
             await timeline(expand, fadeIn).start();
-        this.hiddenChangedComplete.emit(hidden);
+        }
+    }
+    /**
+     * Toggles the 'hidden' class on the element
+     * @param {boolean} hidden - Whether to add or remove the hidden class
+     */
+    toggleHiddenClass(hidden) {
+        this.ref.classList.toggle('hidden', hidden);
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -118,10 +144,7 @@ export class NvAlert {
             }
         }
         if (this.hidden) {
-            const { setCollapsed } = useCollapse(this.ref);
-            const { setFadeOut } = useFade(this.ref);
-            setCollapsed();
-            setFadeOut();
+            this.ref.classList.add('hidden');
         }
     }
     //#endregion LIFECYCLE
@@ -129,7 +152,7 @@ export class NvAlert {
     //#region RENDER
     render() {
         var _a;
-        return (h(Host, { key: 'e14c9a07c3127a8ac3b1881e055526b82a93ff83', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: 'c4aaf00e4b18891dd6053f1529f7a6267386c647', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '9df1b181179cd21361bae2ae347a02dbe07cee63', class: "content" }, this.heading && h("p", { key: '53a21fe4139260bd9aca34cefbb194024a3a1afb', class: "heading" }, this.heading), this.message && h("p", { key: 'eb58482e492f4aff15ccb300f3e89c70544c66d9', class: "message" }, this.message), h("slot", { key: '2762850b8d37f8c53447321a80f2d12d81c8b6f6' })), this.dismissible && (h("button", { key: '8827d5cbffe2f3757111f09806672514c10f7942', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '398ee6b8fc57eb994b30d7194ea69cd251ae5076', name: "x", size: "sm" })))));
+        return (h(Host, { key: 'e81f265d69ba269ea5a7433465f68862cf4444d2', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: 'e0e21d84a214a51e0b303055e4aa280e0467dfe0', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '705d079e0abe159e4398f5d53ecec0c6649bcf6d', class: "content" }, this.heading && h("p", { key: 'cff1fa5c3caf736d332b2389168030b7263997c1', class: "heading" }, this.heading), this.message && h("p", { key: '6f492a02c068c1ffab48aeae7dd619c1a73b1c19', class: "message" }, this.message), h("slot", { key: 'e79556d3c7c10b8771e7e6262d4e4086bf895de9' })), this.dismissible && (h("button", { key: '2754a1237501c458b32a84f2f3166109dba9c3e2', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '9563b22ee4689d7e4d35ca4d882827004b334671', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-alert"; }
     static get originalStyleUrls() {
@@ -314,6 +337,26 @@ export class NvAlert {
                 "attribute": "hidden",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "hasNoAnimations": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the alert will not animate when it is hidden or shown."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "has-no-animations",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-alert.js","sourceRoot":"","sources":["../../../src/components/nv-alert/nv-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n DeprecatedSemanticColors,\n FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/*\n @slot default - Use this slot to insert HTML into the alert content.\n /\n@Component({\n tag: 'nv-alert',\n styleUrl: 'nv-alert.scss',\n shadow: false,\n})\nexport class NvAlert {\n @Element() ref: HTMLNvAlertElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Defines color of the alert.\n * @deprecated use feedback instead.\n /\n @Prop()\n readonly color: `${DeprecatedSemanticColors}`;\n\n componentWillRender() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Specifies the alert type which determines the color and default icon.\n /\n @Prop({ reflect: true, mutable: true })\n feedback: `${FeedbackColors}` = 'information';\n\n /\n Main content of the alert. For more complex content, use the default slot\n * instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Short and concise text for the alert title.\n /\n @Prop({ reflect: true })\n readonly heading: string;\n\n /\n Icon associated with the alert, defaults vary based on the feedback type.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n Allows the alert to be dismissed via a close button (x). The alert is not\n * dismissible unless explicitly enabled.\n /\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /\n Controls the visibility of the alert. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\n /\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n /\n Emitted when the close button is clicked.\n /\n @Event()\n closeClicked: EventEmitter<MouseEvent>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Used for 2 way binding with the hidden property.\n * Triggers open and close animations.\n * @param {boolean} hidden - The visibility state of the alert.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the dismissal of the alert, considering the preventAutoClose prop.\n * Passes the original event from the close button to the close event detail.\n * @param {MouseEvent} originalEvent - The original event from the close button.\n /\n private handleDismiss = (originalEvent?: MouseEvent) => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit(originalEvent);\n };\n\n /\n By default an icon is linked to the feedback type\n * @returns {string} - The default icon name.\n /\n private getDefaultIcon = () => {\n switch (this.feedback) {\n case FeedbackColors.Warning:\n return 'alert-circle';\n case FeedbackColors.Information:\n return 'info-circle';\n case FeedbackColors.Success:\n return 'circle-check';\n case FeedbackColors.Error:\n return 'alert-circle';\n case FeedbackColors.Neutral:\n return 'help';\n default:\n return 'info-circle';\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n\n if (this.hidden) {\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n class={`icon-${this.feedback}`}\n size=\"md\"\n ></nv-icon>\n\n <div class=\"content\">\n {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n {this.message && <p class=\"message\">{this.message}</p>}\n\n <slot></slot>\n </div>\n\n {this.dismissible && (\n <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-alert.js","sourceRoot":"","sources":["../../../src/components/nv-alert/nv-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n DeprecatedSemanticColors,\n FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/*\n @slot default - Use this slot to insert HTML into the alert content.\n /\n@Component({\n tag: 'nv-alert',\n styleUrl: 'nv-alert.scss',\n shadow: false,\n})\nexport class NvAlert {\n @Element() ref: HTMLNvAlertElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Defines color of the alert.\n * @deprecated use feedback instead.\n /\n @Prop()\n readonly color: `${DeprecatedSemanticColors}`;\n\n componentWillRender() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Specifies the alert type which determines the color and default icon.\n /\n @Prop({ reflect: true, mutable: true })\n feedback: `${FeedbackColors}` = 'information';\n\n /\n Main content of the alert. For more complex content, use the default slot\n * instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Short and concise text for the alert title.\n /\n @Prop({ reflect: true })\n readonly heading: string;\n\n /\n Icon associated with the alert, defaults vary based on the feedback type.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n Allows the alert to be dismissed via a close button (x). The alert is not\n * dismissible unless explicitly enabled.\n /\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /\n Controls the visibility of the alert. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n /\n When true, the alert will not animate when it is hidden or shown.\n /\n @Prop({ reflect: true })\n readonly hasNoAnimations: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\n /\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n /\n Emitted when the close button is clicked.\n /\n @Event()\n closeClicked: EventEmitter<MouseEvent>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Used for 2 way binding with the hidden property.\n * Triggers open and close animations.\n * @param {boolean} hidden - The visibility state of the alert.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n\n await this.updateVisibility(hidden);\n this.hiddenChangedComplete.emit(hidden);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the dismissal of the alert, considering the preventAutoClose prop.\n * Passes the original event from the close button to the close event detail.\n * @param {MouseEvent} originalEvent - The original event from the close button.\n /\n private handleDismiss = (originalEvent?: MouseEvent) => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit(originalEvent);\n };\n\n /\n By default an icon is linked to the feedback type\n * @returns {string} - The default icon name.\n /\n private getDefaultIcon = () => {\n switch (this.feedback) {\n case FeedbackColors.Warning:\n return 'alert-circle';\n case FeedbackColors.Information:\n return 'info-circle';\n case FeedbackColors.Success:\n return 'circle-check';\n case FeedbackColors.Error:\n return 'alert-circle';\n case FeedbackColors.Neutral:\n return 'help';\n default:\n return 'info-circle';\n }\n };\n\n /\n Updates the visibility state of the alert with optional animations\n * @param {boolean} hidden - Whether the alert should be hidden\n /\n private async updateVisibility(hidden: boolean) {\n if (this.hasNoAnimations) {\n this.toggleHiddenClass(hidden);\n return;\n }\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden) {\n await timeline(fadeOut, collapse).start();\n this.toggleHiddenClass(true);\n } else {\n this.toggleHiddenClass(false);\n await timeline(expand, fadeIn).start();\n }\n }\n\n /\n Toggles the 'hidden' class on the element\n * @param {boolean} hidden - Whether to add or remove the hidden class\n /\n private toggleHiddenClass(hidden: boolean) {\n this.ref.classList.toggle('hidden', hidden);\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n\n if (this.hidden) {\n this.ref.classList.add('hidden');\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n class={`icon-${this.feedback}`}\n size=\"md\"\n ></nv-icon>\n\n <div class=\"content\">\n {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n {this.message && <p class=\"message\">{this.message}</p>}\n\n <slot></slot>\n </div>\n\n {this.dismissible && (\n <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}

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

@@ -54,7 +54,7 @@ export class NvAvatar {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '4543ac26e2c1d6d91de2c4671657e584486daefe', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
+        return (h(Host, { key: '8cd1fe9e804aa11e821c0983c28eefdbe2275235', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
     }
     static get is() { return "nv-avatar"; }
     static get originalStyleUrls() {

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

@@ -115,11 +115,11 @@ export class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f0b9bf1d1a32c72f9d8176300d06875f0258f068', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '18d3a28777aa74117ccc68aa0c889ea716b90d56', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, h("slot", { key: '967f6cceadd13f1a7758696b0ddb9b77d256caac', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '683ccf19e6281ab8fded9e217f61a67d835a7b37', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: 'e01b6071da8bdc73d7708e91c67afe9bc2819095' }, this.label), this.dismissible && (h("button", { key: 'f8040e70acd910c63fa377837fc13316a321366c', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '405cee0cdcdab3a470086ccbd3aa5b46c5e0e2ea', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '87ac2dd4ae3ba521d1a6b15394d79c85c1899102', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '22fbc091fe0c861e9a6ce12e5ba1b8d0e83ca7da', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '040559657d6a337b2cd3ce265d2e99cdd0245324' }, this.label), this.dismissible && (h("button", { key: 'd0f992bdf748be5bf63d7a3e9864f96cad4dfae7', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '60915e33efb355a5e2820507fe2365ba4e602c26', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {

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

@@ -60,7 +60,7 @@ export class NvBaseComponent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '81da4e7fd653192079ab22a607d1f525b504f3e4', style: { display: 'block' } }, h("slot", { key: 'e766e4b073b16d367c473b02c94448cf835a4921' })));
+        return (h(Host, { key: 'ee2869bb42012e8c6b185e412503b14482f58af0', style: { display: 'block' } }, h("slot", { key: '2d89c30073a159339419bbec3f323abdcbf312cf' })));
     }
     static get is() { return "nv-base"; }
     static get elementRef() { return "el"; }

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

@@ -31,7 +31,7 @@ export class NvBreadcrumb {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c985863a0ffdcd051abd712c357110cfa056c382', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '4f7ad5175285ea442cd42581e292d2d430eb8770', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '29aba9e64f0d1785852dc4b830959dcbbd7dfc8b', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: '0fde9dac023e6a77cb1524cbfcdf58d11e5a21f3', slot: "content" }, h("slot", { key: 'c263990647dc304a37971168669ced00bf46c588' })))), h("span", { key: 'f9f96fb13c67e4d3844007342c931ccd690ca7f5', "data-scope": "separator" }, "/")));
+        return (h(Host, { key: '88cc0ffe7aee64066946b3f2579d0ace70a56339', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '1e1bb755b7a9466c5a174e57b562b718d7f2a78a', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '91b3238143defb7b5fd71b14bb31edb8093778d2', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: '4c1851c8988b7eb1f607e422ceac1dc6b04022c5', slot: "content" }, h("slot", { key: '11213bce3ff14309b0be7336f0022411a2e6721d' })))), h("span", { key: '3b97cd9edbb33196c85a29afbaf5b2ac647b0912', "data-scope": "separator" }, "/")));
     }
     static get is() { return "nv-breadcrumb"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 export class NvBreadcrumbs {
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd54bb25f9f34ea0f5ea58da6a60261aed57fefef', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: '660c31fbb8860ce0639b475875dd720f3876549b' }, h("slot", { key: 'c77828910bfb759839d04b5ac28e11cebec7c937' }))));
+        return (h(Host, { key: '832ca6782b23a6aa0ca9fdea78cd7b0173db66b4', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: 'e71aaabc2c3e8912097f822e24947eeec112ea3b' }, h("slot", { key: '0af6f306a8ad6ec26bbcf3bf480acb3cc4a9682a' }))));
     }
     static get is() { return "nv-breadcrumbs"; }
     static get originalStyleUrls() {

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

@@ -45,6 +45,10 @@ const NvButtonDocs = {
             name: nameof(x => x.type),
             template: (h("div", { "data-class": "flex gap-4" }, h("nv-button", { "data-storybook-args": true, type: "submit" }, "submit"), h("nv-button", { "data-storybook-args": true, type: "reset" }, "reset"))),
         },
+        {
+            name: nameof(x => x.form),
+            template: (h("nv-button", { "data-storybook-args": true, form: "test-form", type: "submit" }, "Submit test-form")),
+        },
         {
             name: 'LinkAsButton',
             description: 'You can use our button classes if you need to use link tags',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-button.docs.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.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 NvButtonDocs: NovaDocs<Components.NvButton> = {\n component: 'nv-button',\n subcomponents: ['nv-icon'],\n stories: [\n {\n name: 'Default',\n template: <nv-button data-storybook-args>NV Button</nv-button>,\n },\n {\n name: nameof<Components.NvButton>(x => x.size),\n template: (\n <div data-class=\"flex gap-4 items-center\">\n <nv-button data-storybook-args size=\"xs\">\n size: xs\n </nv-button>\n <nv-button data-storybook-args size=\"sm\">\n size: sm\n </nv-button>\n <nv-button data-storybook-args size=\"md\">\n size: md\n </nv-button>\n <nv-button data-storybook-args size=\"lg\">\n size: lg\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.emphasis),\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args emphasis=\"high\">\n emphasis: high\n </nv-button>\n <nv-button data-storybook-args emphasis=\"medium\">\n emphasis: medium\n </nv-button>\n <nv-button data-storybook-args emphasis=\"low\">\n emphasis: low\n </nv-button>\n <nv-button data-storybook-args emphasis=\"lower\">\n emphasis: lower\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.active),\n args: { size: 'md' },\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args emphasis=\"high\" active>\n high active\n </nv-button>\n <nv-button data-storybook-args emphasis=\"medium\" active>\n medium active\n </nv-button>\n <nv-button data-storybook-args emphasis=\"low\" active>\n low active\n </nv-button>\n <nv-button data-storybook-args emphasis=\"lower\" active>\n lower active\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.danger),\n args: { size: 'md' },\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args emphasis=\"high\" danger>\n high danger\n </nv-button>\n <nv-button data-storybook-args emphasis=\"medium\" danger>\n medium danger\n </nv-button>\n <nv-button data-storybook-args emphasis=\"low\" danger>\n low danger\n </nv-button>\n <nv-button data-storybook-args emphasis=\"lower\" danger>\n lower danger\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.loading),\n args: { loading: true },\n template: <nv-button data-storybook-args>loading</nv-button>,\n },\n {\n name: nameof<Components.NvButton>(x => x.disabled),\n args: { disabled: true },\n template: <nv-button data-storybook-args>disabled</nv-button>,\n },\n {\n name: nameof<Components.NvButton>(x => x.fluid),\n args: { fluid: true },\n template: <nv-button data-storybook-args>fluid</nv-button>,\n },\n {\n name: nameof<Components.NvButton>(x => x.type),\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args type=\"submit\">\n submit\n </nv-button>\n <nv-button data-storybook-args type=\"reset\">\n reset\n </nv-button>\n </div>\n ),\n },\n {\n name: 'LinkAsButton',\n description:\n 'You can use our button classes if you need to use link tags',\n template: (\n <div data-class=\"flex flex-col gap-4\">\n <a href=\"#\" data-class=\"nv-button\">\n Default Link\n </a>\n\n <div data-class=\"flex flex-wrap gap-4 items-center\">\n <a href=\"#\" data-class=\"nv-button size-xs\">\n Link size-xs\n </a>\n <a href=\"#\" data-class=\"nv-button size-sm\">\n Link size-sm\n </a>\n <a href=\"#\" data-class=\"nv-button size-md\">\n Link size-md\n </a>\n <a href=\"#\" data-class=\"nv-button size-lg\">\n Link size-lg\n </a>\n </div>\n\n <div data-class=\"flex flex-wrap gap-4\">\n <a href=\"#\" data-class=\"nv-button emphasis-high\">\n Emphasis High\n </a>\n <a href=\"#\" data-class=\"nv-button emphasis-medium\">\n Emphasis Medium\n </a>\n <a href=\"#\" data-class=\"nv-button emphasis-low\">\n Emphasis Low\n </a>\n <a href=\"#\" data-class=\"nv-button emphasis-lower\">\n Emphasis Lower\n </a>\n </div>\n\n <div data-class=\"flex flex-wrap gap-4\">\n <a href=\"#\" data-class=\"nv-button active\">\n Default active\n </a>\n\n <a href=\"#\" data-class=\"nv-button active emphasis-high\">\n Active Emphasis High\n </a>\n <a href=\"#\" data-class=\"nv-button active emphasis-medium\">\n Active Emphasis Medium\n </a>\n <a href=\"#\" data-class=\"nv-button active emphasis-low\">\n Active Emphasis Low\n </a>\n <a href=\"#\" data-class=\"nv-button active emphasis-lower\">\n Active Emphasis Lower\n </a>\n </div>\n\n <div data-class=\"flex flex-wrap gap-4\">\n <a href=\"#\" data-class=\"nv-button danger\">\n Default Danger\n </a>\n\n <a href=\"#\" data-class=\"nv-button danger emphasis-high\">\n Danger Emphasis High\n </a>\n <a href=\"#\" data-class=\"nv-button danger emphasis-medium\">\n Danger Emphasis Medium\n </a>\n <a href=\"#\" data-class=\"nv-button danger emphasis-low\">\n Danger Emphasis Low\n </a>\n <a href=\"#\" data-class=\"nv-button danger emphasis-lower\">\n Danger Emphasis Lower\n </a>\n </div>\n </div>\n ),\n },\n {\n name: 'DefaultSlot',\n description: 'Add content to the button via the default slot.',\n template: (\n <nv-button data-storybook-args>\n <nv-icon name=\"user\"></nv-icon>\n Default Slot\n </nv-button>\n ),\n },\n {\n name: 'IconSlots',\n description:\n 'Add icons to the button via the leading-icon or trailing-icon slots.',\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args>\n Leading Icon\n <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n </nv-button>\n <nv-button data-storybook-args>\n Trailing Icon\n <nv-icon slot=\"trailing-icon\" name=\"user\"></nv-icon>\n </nv-button>\n <nv-button data-storybook-args>\n Both Sides\n <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n <nv-icon slot=\"leading-icon\" name=\"bell\"></nv-icon>\n <nv-icon slot=\"trailing-icon\" name=\"filter\"></nv-icon>\n </nv-button>\n </div>\n ),\n },\n ],\n};\n\nexport default NvButtonDocs;\n"]}
1	+ {"version":3,"file":"nv-button.docs.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.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 NvButtonDocs: NovaDocs<Components.NvButton> = {\n component: 'nv-button',\n subcomponents: ['nv-icon'],\n stories: [\n {\n name: 'Default',\n template: <nv-button data-storybook-args>NV Button</nv-button>,\n },\n {\n name: nameof<Components.NvButton>(x => x.size),\n template: (\n <div data-class=\"flex gap-4 items-center\">\n <nv-button data-storybook-args size=\"xs\">\n size: xs\n </nv-button>\n <nv-button data-storybook-args size=\"sm\">\n size: sm\n </nv-button>\n <nv-button data-storybook-args size=\"md\">\n size: md\n </nv-button>\n <nv-button data-storybook-args size=\"lg\">\n size: lg\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.emphasis),\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args emphasis=\"high\">\n emphasis: high\n </nv-button>\n <nv-button data-storybook-args emphasis=\"medium\">\n emphasis: medium\n </nv-button>\n <nv-button data-storybook-args emphasis=\"low\">\n emphasis: low\n </nv-button>\n <nv-button data-storybook-args emphasis=\"lower\">\n emphasis: lower\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.active),\n args: { size: 'md' },\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args emphasis=\"high\" active>\n high active\n </nv-button>\n <nv-button data-storybook-args emphasis=\"medium\" active>\n medium active\n </nv-button>\n <nv-button data-storybook-args emphasis=\"low\" active>\n low active\n </nv-button>\n <nv-button data-storybook-args emphasis=\"lower\" active>\n lower active\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.danger),\n args: { size: 'md' },\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args emphasis=\"high\" danger>\n high danger\n </nv-button>\n <nv-button data-storybook-args emphasis=\"medium\" danger>\n medium danger\n </nv-button>\n <nv-button data-storybook-args emphasis=\"low\" danger>\n low danger\n </nv-button>\n <nv-button data-storybook-args emphasis=\"lower\" danger>\n lower danger\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.loading),\n args: { loading: true },\n template: <nv-button data-storybook-args>loading</nv-button>,\n },\n {\n name: nameof<Components.NvButton>(x => x.disabled),\n args: { disabled: true },\n template: <nv-button data-storybook-args>disabled</nv-button>,\n },\n {\n name: nameof<Components.NvButton>(x => x.fluid),\n args: { fluid: true },\n template: <nv-button data-storybook-args>fluid</nv-button>,\n },\n {\n name: nameof<Components.NvButton>(x => x.type),\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args type=\"submit\">\n submit\n </nv-button>\n <nv-button data-storybook-args type=\"reset\">\n reset\n </nv-button>\n </div>\n ),\n },\n {\n name: nameof<Components.NvButton>(x => x.form),\n template: (\n <nv-button data-storybook-args form=\"test-form\" type=\"submit\">\n Submit test-form\n </nv-button>\n ),\n },\n {\n name: 'LinkAsButton',\n description:\n 'You can use our button classes if you need to use link tags',\n template: (\n <div data-class=\"flex flex-col gap-4\">\n <a href=\"#\" data-class=\"nv-button\">\n Default Link\n </a>\n\n <div data-class=\"flex flex-wrap gap-4 items-center\">\n <a href=\"#\" data-class=\"nv-button size-xs\">\n Link size-xs\n </a>\n <a href=\"#\" data-class=\"nv-button size-sm\">\n Link size-sm\n </a>\n <a href=\"#\" data-class=\"nv-button size-md\">\n Link size-md\n </a>\n <a href=\"#\" data-class=\"nv-button size-lg\">\n Link size-lg\n </a>\n </div>\n\n <div data-class=\"flex flex-wrap gap-4\">\n <a href=\"#\" data-class=\"nv-button emphasis-high\">\n Emphasis High\n </a>\n <a href=\"#\" data-class=\"nv-button emphasis-medium\">\n Emphasis Medium\n </a>\n <a href=\"#\" data-class=\"nv-button emphasis-low\">\n Emphasis Low\n </a>\n <a href=\"#\" data-class=\"nv-button emphasis-lower\">\n Emphasis Lower\n </a>\n </div>\n\n <div data-class=\"flex flex-wrap gap-4\">\n <a href=\"#\" data-class=\"nv-button active\">\n Default active\n </a>\n\n <a href=\"#\" data-class=\"nv-button active emphasis-high\">\n Active Emphasis High\n </a>\n <a href=\"#\" data-class=\"nv-button active emphasis-medium\">\n Active Emphasis Medium\n </a>\n <a href=\"#\" data-class=\"nv-button active emphasis-low\">\n Active Emphasis Low\n </a>\n <a href=\"#\" data-class=\"nv-button active emphasis-lower\">\n Active Emphasis Lower\n </a>\n </div>\n\n <div data-class=\"flex flex-wrap gap-4\">\n <a href=\"#\" data-class=\"nv-button danger\">\n Default Danger\n </a>\n\n <a href=\"#\" data-class=\"nv-button danger emphasis-high\">\n Danger Emphasis High\n </a>\n <a href=\"#\" data-class=\"nv-button danger emphasis-medium\">\n Danger Emphasis Medium\n </a>\n <a href=\"#\" data-class=\"nv-button danger emphasis-low\">\n Danger Emphasis Low\n </a>\n <a href=\"#\" data-class=\"nv-button danger emphasis-lower\">\n Danger Emphasis Lower\n </a>\n </div>\n </div>\n ),\n },\n {\n name: 'DefaultSlot',\n description: 'Add content to the button via the default slot.',\n template: (\n <nv-button data-storybook-args>\n <nv-icon name=\"user\"></nv-icon>\n Default Slot\n </nv-button>\n ),\n },\n {\n name: 'IconSlots',\n description:\n 'Add icons to the button via the leading-icon or trailing-icon slots.',\n template: (\n <div data-class=\"flex gap-4\">\n <nv-button data-storybook-args>\n Leading Icon\n <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n </nv-button>\n <nv-button data-storybook-args>\n Trailing Icon\n <nv-icon slot=\"trailing-icon\" name=\"user\"></nv-icon>\n </nv-button>\n <nv-button data-storybook-args>\n Both Sides\n <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n <nv-icon slot=\"leading-icon\" name=\"bell\"></nv-icon>\n <nv-icon slot=\"trailing-icon\" name=\"filter\"></nv-icon>\n </nv-button>\n </div>\n ),\n },\n ],\n};\n\nexport default NvButtonDocs;\n"]}