npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.23.0 → 3.24.0 - Mend

@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (792) hide show

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

@@ -25,7 +25,33 @@ const NvAccordionDocs = {
             },
             template: h("nv-accordion", { "data-storybook-args": true }),
         },
-        // Mode
+        // data
+        {
+            name: nameof(x => x.data),
+            description: 'Data-driven accordion using the data property with title and content',
+            args: {
+                mode: 'accordion',
+                data: [
+                    {
+                        id: '1',
+                        title: 'First Item',
+                        content: 'Content for the first item',
+                    },
+                    {
+                        id: '2',
+                        title: 'Second Item',
+                        content: 'Content for the second item',
+                    },
+                    {
+                        id: '3',
+                        title: 'Third Item',
+                        content: 'Content for the third item',
+                    },
+                ],
+            },
+            template: h("nv-accordion", { "data-storybook-args": true }),
+        },
+        // mode
         {
             name: nameof(x => x.mode),
             description: 'Accordion allowing multiple items to be open',
@@ -46,7 +72,7 @@ const NvAccordionDocs = {
             },
             template: h("nv-accordion", { "data-storybook-args": true }),
         },
-        // OpenIndexes
+        // openIndexes
         {
             name: nameof(x => x.openIndexes),
             description: 'Demonstration of openIndexes with multiple items and first item pre-opened',
@@ -129,9 +155,45 @@ const NvAccordionDocs = {
             },
             template: h("nv-accordion", { "data-storybook-args": true }),
         },
-        // Slot
+        // CustomHeader
         {
-            name: 'Slot',
+            name: 'CustomHeader',
+            description: 'Real-world example with TraXes Connection Points',
+            args: {
+                mode: 'multi',
+                openIndexes: [0, 2],
+            },
+            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-308"), h("span", { "data-class": "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "success", label: "Running" }, h("nv-icon", { slot: "leading-icon", name: "check", size: "sm" })))), h("div", { slot: "content", "data-class": "flex items-center justify-between" }, h("div", null, h("p", null, "Single accordion or accordion group"), h("p", null, "Use the accordion as a single instance, or in a group of accordions stacked vertically."), h("p", null, "The accordion title is wrapped in a heading tag by default. Alter it to fit the information architecture of the page.")))), h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-309"), h("span", { "data-class": "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "success", label: "Running" }, h("nv-icon", { slot: "leading-icon", name: "check", size: "sm" })))), h("div", { slot: "content" }, h("p", null, "Content for EC-309 connection point"))), h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-310"), h("span", { "data-class": "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "error", label: "Stopped" }, h("nv-icon", { slot: "leading-icon", name: "x", size: "sm" })))), h("div", { slot: "content" }, h("p", null, "Content for EC-310 connection point (stopped)"))))),
+        },
+        // ComplexData
+        {
+            name: 'ComplexData',
+            description: 'Accordion with complex data including all possible attributes',
+            args: {
+                mode: 'accordion',
+                data: [
+                    {
+                        id: '1',
+                        title: 'Complete section',
+                        subtitle: 'With all attributes',
+                        content: 'Main content',
+                        disabled: false,
+                    },
+                    {
+                        id: '2',
+                        title: 'Disabled section',
+                        subtitle: 'Not accessible',
+                        content: 'Inaccessible content',
+                        disabled: true,
+                    },
+                ],
+                openIndexes: [0],
+            },
+            template: h("nv-accordion", { "data-storybook-args": true }),
+        },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
             description: 'Accordion with a disabled item',
             template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", { "item-title": "Title item" }, h("div", { slot: "content" }, "This item is accessible")), h("nv-accordion-item", { "item-title": "Title second item" }, h("div", { slot: "content" }, "This second item is accessible")))),
         },
@@ -169,42 +231,6 @@ const NvAccordionDocs = {
             description: 'Accordion with an open item',
             template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", { "item-title": "Active item", open: true }, h("div", { slot: "content" }, "This item is accessible")), h("nv-accordion-item", { "item-title": "Title second item" }, h("div", { slot: "content" }, "This second item is accessible")))),
         },
-        // CustomHeader
-        {
-            name: 'CustomHeader',
-            description: 'Real-world example with TraXes Connection Points',
-            args: {
-                mode: 'multi',
-                openIndexes: [0, 2],
-            },
-            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-308"), h("span", { "data-class": "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "success", label: "Running" }, h("nv-icon", { slot: "leading-icon", name: "check", size: "sm" })))), h("div", { slot: "content", "data-class": "flex items-center justify-between" }, h("div", null, h("p", null, "Single accordion or accordion group"), h("p", null, "Use the accordion as a single instance, or in a group of accordions stacked vertically."), h("p", null, "The accordion title is wrapped in a heading tag by default. Alter it to fit the information architecture of the page.")))), h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-309"), h("span", { "data-class": "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "success", label: "Running" }, h("nv-icon", { slot: "leading-icon", name: "check", size: "sm" })))), h("div", { slot: "content" }, h("p", null, "Content for EC-309 connection point"))), h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-310"), h("span", { "data-class": "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "error", label: "Stopped" }, h("nv-icon", { slot: "leading-icon", name: "x", size: "sm" })))), h("div", { slot: "content" }, h("p", null, "Content for EC-310 connection point (stopped)"))))),
-        },
-        // ComplexData
-        {
-            name: 'ComplexData',
-            description: 'Accordion with complex data including all possible attributes',
-            args: {
-                mode: 'accordion',
-                data: [
-                    {
-                        id: '1',
-                        title: 'Complete section',
-                        subtitle: 'With all attributes',
-                        content: 'Main content',
-                        disabled: false,
-                    },
-                    {
-                        id: '2',
-                        title: 'Disabled section',
-                        subtitle: 'Not accessible',
-                        content: 'Inaccessible content',
-                        disabled: true,
-                    },
-                ],
-                openIndexes: [0],
-            },
-            template: h("nv-accordion", { "data-storybook-args": true }),
-        },
     ],
 };
 export default NvAccordionDocs;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-accordion.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-accordion/nv-accordion.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,eAAe,GAAqC;IACxD,SAAS,EAAE,cAAc;IACzB,aAAa,EAAE,CAAC,mBAAmB,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;IACxE,OAAO,EAAE;QACP,UAAU;QACV;YACE,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,6BAA6B;YAC1C,IAAI,EAAE;gBACJ,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE;oBACJ;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,SAAS;wBAChB,OAAO,EAAE,oBAAoB;qBAC9B;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,SAAS;wBAChB,OAAO,EAAE,oBAAoB;qBAC9B;iBACF;aACF;YACD,QAAQ,EAAE,kDAAiD;SAC5D;QACD,OAAO;QACP;YACE,IAAI,EAAE,MAAM,CAAyB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YACjD,WAAW,EAAE,8CAA8C;YAC3D,IAAI,EAAE;gBACJ,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE;oBACJ;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,SAAS;wBAChB,OAAO,EAAE,oBAAoB;qBAC9B;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,SAAS;wBAChB,OAAO,EAAE,oBAAoB;qBAC9B;iBACF;aACF;YACD,QAAQ,EAAE,kDAAiD;SAC5D;QACD,cAAc;QACd;YACE,IAAI,EAAE,MAAM,CAAyB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACxD,WAAW,EACT,4EAA4E;YAC9E,IAAI,EAAE;gBACJ,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE;oBACJ;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,qBAAqB;wBAC5B,OAAO,EACL,qEAAqE;qBACxE;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE,6BAA6B;qBACvC;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE,4BAA4B;qBACtC;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE,6BAA6B;qBACvC;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE,4BAA4B;qBACtC;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE,4BAA4B;qBACtC;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE,8BAA8B;qBACxC;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE,6BAA6B;qBACvC;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE,4BAA4B;qBACtC;oBACD;wBACE,EAAE,EAAE,IAAI;wBACR,KAAK,EAAE,SAAS;wBAChB,OAAO,EAAE,4BAA4B;qBACtC;iBACF;gBACD,WAAW,EAAE,CAAC,CAAC,CAAC;aACjB;YACD,QAAQ,EAAE,kDAAiD;SAC5D;QACD,eAAe;QACf;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,8CAA8C;YAC3D,IAAI,EAAE;gBACJ,IAAI,EAAE;oBACJ;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,SAAS;wBAChB,OAAO,EAAE,oBAAoB;qBAC9B;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,SAAS;wBAChB,OAAO,EAAE,oDAAoD;wBAC7D,QAAQ,EAAE,IAAI;qBACf;iBACF;aACF;YACD,QAAQ,EAAE,kDAAiD;SAC5D;QACD,OAAO;QACP;YACE,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,gCAAgC;YAC7C,QAAQ,EAAE,CACR;gBACE,uCAA8B,YAAY;oBACxC,WAAK,IAAI,EAAC,SAAS,8BAA8B,CAC/B;gBACpB,uCAA8B,mBAAmB;oBAC/C,WAAK,IAAI,EAAC,SAAS,qCAAqC,CACtC,CACP,CAChB;SACF;QACD,eAAe;QACf;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,gCAAgC;YAC7C,IAAI,EAAE;gBACJ,IAAI,EAAE,OAAO;aACd;YACD,QAAQ,EAAE,CACR;gBACE,uCAA8B,YAAY;oBACxC,WAAK,IAAI,EAAC,SAAS,8BAA8B,CAC/B;gBACpB,uCAA8B,mBAAmB;oBAC/C,WAAK,IAAI,EAAC,SAAS,qCAAqC,CACtC,CACP,CAChB;SACF;QACD,sBAAsB;QACtB;YACE,IAAI,EAAE,qBAAqB;YAC3B,WAAW,EACT,4EAA4E;YAC9E,IAAI,EAAE;gBACJ,IAAI,EAAE,WAAW;gBACjB,WAAW,EAAE,CAAC,CAAC,CAAC;aACjB;YACD,QAAQ,EAAE,CACR;gBACE,uCAA8B,aAAa;oBACzC,WAAK,IAAI,EAAC,SAAS,8BAA8B,CAC/B;gBACpB,uCAA8B,mBAAmB;oBAC/C,WAAK,IAAI,EAAC,SAAS,qCAAqC,CACtC,CACP,CAChB;SACF;QACD,uBAAuB;QACvB;YACE,IAAI,EAAE,sBAAsB;YAC5B,WAAW,EAAE,gCAAgC;YAC7C,IAAI,EAAE;gBACJ,IAAI,EAAE,WAAW;aAClB;YACD,QAAQ,EAAE,CACR;gBACE,uCAA8B,YAAY;oBACxC,WAAK,IAAI,EAAC,SAAS,8BAA8B,CAC/B;gBACpB,uCAA8B,eAAe,EAAC,QAAQ;oBACpD,WAAK,IAAI,EAAC,SAAS,yDAEb,CACY,CACP,CAChB;SACF;QACD,mBAAmB;QACnB;YACE,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,6BAA6B;YAC1C,QAAQ,EAAE,CACR;gBACE,uCAA8B,aAAa,EAAC,IAAI;oBAC9C,WAAK,IAAI,EAAC,SAAS,8BAA8B,CAC/B;gBACpB,uCAA8B,mBAAmB;oBAC/C,WAAK,IAAI,EAAC,SAAS,qCAAqC,CACtC,CACP,CAChB;SACF;QACD,eAAe;QACf;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,kDAAkD;YAC/D,IAAI,EAAE;gBACJ,IAAI,EAAE,OAAO;gBACb,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;aACpB;YACD,QAAQ,EAAE,CACR;gBACE;oBACE,WAAK,IAAI,EAAC,QAAQ;wBAChB,yBAAgB,0CAA0C;4BACxD,yBAAgB,mDAAmD;gCACjE,0BAAiB,0BAA0B,aAAc;gCACzD,0BAAiB,6BAA6B,uBAEvC,CACH;4BACN,gBAAU,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS;gCACvC,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CAC7C,CACP,CACF;oBACN,WAAK,IAAI,EAAC,SAAS,gBAAY,mCAAmC;wBAChE;4BACE,mDAA0C;4BAC1C,uGAGI;4BACJ,qIAGI,CACA,CACF,CACY;gBACpB;oBACE,WAAK,IAAI,EAAC,QAAQ;wBAChB,yBAAgB,0CAA0C;4BACxD,yBAAgB,mDAAmD;gCACjE,0BAAiB,0BAA0B,aAAc;gCACzD,0BAAiB,6BAA6B,uBAEvC,CACH;4BACN,gBAAU,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS;gCACvC,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CAC7C,CACP,CACF;oBACN,WAAK,IAAI,EAAC,SAAS;wBACjB,mDAA0C,CACtC,CACY;gBACpB;oBACE,WAAK,IAAI,EAAC,QAAQ;wBAChB,yBAAgB,0CAA0C;4BACxD,yBAAgB,mDAAmD;gCACjE,0BAAiB,0BAA0B,aAAc;gCACzD,0BAAiB,6BAA6B,uBAEvC,CACH;4BACN,gBAAU,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS;gCACrC,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACzC,CACP,CACF;oBACN,WAAK,IAAI,EAAC,SAAS;wBACjB,6DAAoD,CAChD,CACY,CACP,CAChB;SACF;QACD,cAAc;QACd;YACE,IAAI,EAAE,aAAa;YACnB,WAAW,EACT,+DAA+D;YACjE,IAAI,EAAE;gBACJ,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE;oBACJ;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,kBAAkB;wBACzB,QAAQ,EAAE,qBAAqB;wBAC/B,OAAO,EAAE,cAAc;wBACvB,QAAQ,EAAE,KAAK;qBAChB;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,kBAAkB;wBACzB,QAAQ,EAAE,gBAAgB;wBAC1B,OAAO,EAAE,sBAAsB;wBAC/B,QAAQ,EAAE,IAAI;qBACf;iBACF;gBACD,WAAW,EAAE,CAAC,CAAC,CAAC;aACjB;YACD,QAAQ,EAAE,kDAAiD;SAC5D;KACF;CACF,CAAC;AAEF,eAAe,eAAe,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 NvAccordionDocs: NovaDocs<Components.NvAccordion> = {\n component: 'nv-accordion',\n subcomponents: ['nv-accordion-item', 'nv-icon', 'nv-button', 'nv-badge'],\n stories: [\n // Default\n {\n name: 'Default',\n description: 'Accordion with simple items',\n args: {\n mode: 'accordion',\n data: [\n {\n id: '1',\n title: 'Title 1',\n content: 'Content of title 1',\n },\n {\n id: '2',\n title: 'Title 2',\n content: 'Content of title 2',\n },\n ],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // Mode\n {\n name: nameof<Components.NvAccordion>(x => x.mode),\n description: 'Accordion allowing multiple items to be open',\n args: {\n mode: 'multi',\n data: [\n {\n id: '1',\n title: 'Title 1',\n content: 'Content of title 1',\n },\n {\n id: '2',\n title: 'Title 2',\n content: 'Content of title 2',\n },\n ],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // OpenIndexes\n {\n name: nameof<Components.NvAccordion>(x => x.openIndexes),\n description:\n 'Demonstration of openIndexes with multiple items and first item pre-opened',\n args: {\n mode: 'accordion',\n data: [\n {\n id: '1',\n title: 'Item 1 - Pre-opened',\n content:\n 'This is the first item that is opened by default using openIndexes.',\n },\n {\n id: '2',\n title: 'Item 2',\n content: 'Content of the second item.',\n },\n {\n id: '3',\n title: 'Item 3',\n content: 'Content of the third item.',\n },\n {\n id: '4',\n title: 'Item 4',\n content: 'Content of the fourth item.',\n },\n {\n id: '5',\n title: 'Item 5',\n content: 'Content of the fifth item.',\n },\n {\n id: '6',\n title: 'Item 6',\n content: 'Content of the sixth item.',\n },\n {\n id: '7',\n title: 'Item 7',\n content: 'Content of the seventh item.',\n },\n {\n id: '8',\n title: 'Item 8',\n content: 'Content of the eighth item.',\n },\n {\n id: '9',\n title: 'Item 9',\n content: 'Content of the ninth item.',\n },\n {\n id: '10',\n title: 'Item 10',\n content: 'Content of the tenth item.',\n },\n ],\n openIndexes: [0],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // DisabledItem\n {\n name: 'DisabledItem',\n description: 'Accordion allowing multiple items to be open',\n args: {\n data: [\n {\n id: '1',\n title: 'Title 1',\n content: 'Content of title 1',\n },\n {\n id: '2',\n title: 'Title 2',\n content: 'This item is not accessible because it is disabled',\n disabled: true,\n },\n ],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // Slot\n {\n name: 'Slot',\n description: 'Accordion with a disabled item',\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Title item\">\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Title second item\">\n <div slot=\"content\">This second item is accessible</div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // SlotWithMode\n {\n name: 'SlotWithMode',\n description: 'Accordion with a disabled item',\n args: {\n mode: 'multi',\n },\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Title item\">\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Title second item\">\n <div slot=\"content\">This second item is accessible</div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // SlotWithOpenIndexes\n {\n name: 'SlotWithOpenIndexes',\n description:\n 'Demonstration of openIndexes with multiple items and first item pre-opened',\n args: {\n mode: 'accordion',\n openIndexes: [0],\n },\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Active item\">\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Title second item\">\n <div slot=\"content\">This second item is accessible</div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // SlotWithDisabledItem\n {\n name: 'SlotWithDisabledItem',\n description: 'Accordion with a disabled item',\n args: {\n mode: 'accordion',\n },\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Title item\">\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Disabled item\" disabled>\n <div slot=\"content\">\n This item is not accessible because it is disabled\n </div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // SlotWithOpenItem\n {\n name: 'SlotWithOpenItem',\n description: 'Accordion with an open item',\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Active item\" open>\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Title second item\">\n <div slot=\"content\">This second item is accessible</div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // CustomHeader\n {\n name: 'CustomHeader',\n description: 'Real-world example with TraXes Connection Points',\n args: {\n mode: 'multi',\n openIndexes: [0, 2],\n },\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item>\n <div slot=\"header\">\n <div data-class=\"flex items-center justify-between w-full\">\n <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n <span data-class=\"nv-accordion-item__title\">EC-308</span>\n <span data-class=\"nv-accordion-item__subtitle\">\n Connection point\n </span>\n </div>\n <nv-badge color=\"success\" label=\"Running\">\n <nv-icon slot=\"leading-icon\" name=\"check\" size=\"sm\" />\n </nv-badge>\n </div>\n </div>\n <div slot=\"content\" data-class=\"flex items-center justify-between\">\n <div>\n <p>Single accordion or accordion group</p>\n <p>\n Use the accordion as a single instance, or in a group of\n accordions stacked vertically.\n </p>\n <p>\n The accordion title is wrapped in a heading tag by default.\n Alter it to fit the information architecture of the page.\n </p>\n </div>\n </div>\n </nv-accordion-item>\n <nv-accordion-item>\n <div slot=\"header\">\n <div data-class=\"flex items-center justify-between w-full\">\n <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n <span data-class=\"nv-accordion-item__title\">EC-309</span>\n <span data-class=\"nv-accordion-item__subtitle\">\n Connection point\n </span>\n </div>\n <nv-badge color=\"success\" label=\"Running\">\n <nv-icon slot=\"leading-icon\" name=\"check\" size=\"sm\" />\n </nv-badge>\n </div>\n </div>\n <div slot=\"content\">\n <p>Content for EC-309 connection point</p>\n </div>\n </nv-accordion-item>\n <nv-accordion-item>\n <div slot=\"header\">\n <div data-class=\"flex items-center justify-between w-full\">\n <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n <span data-class=\"nv-accordion-item__title\">EC-310</span>\n <span data-class=\"nv-accordion-item__subtitle\">\n Connection point\n </span>\n </div>\n <nv-badge color=\"error\" label=\"Stopped\">\n <nv-icon slot=\"leading-icon\" name=\"x\" size=\"sm\" />\n </nv-badge>\n </div>\n </div>\n <div slot=\"content\">\n <p>Content for EC-310 connection point (stopped)</p>\n </div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // ComplexData\n {\n name: 'ComplexData',\n description:\n 'Accordion with complex data including all possible attributes',\n args: {\n mode: 'accordion',\n data: [\n {\n id: '1',\n title: 'Complete section',\n subtitle: 'With all attributes',\n content: 'Main content',\n disabled: false,\n },\n {\n id: '2',\n title: 'Disabled section',\n subtitle: 'Not accessible',\n content: 'Inaccessible content',\n disabled: true,\n },\n ],\n openIndexes: [0],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n ],\n};\n\nexport default NvAccordionDocs;\n"]}
1	+ {"version":3,"file":"nv-accordion.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-accordion/nv-accordion.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 NvAccordionDocs: NovaDocs<Components.NvAccordion> = {\n component: 'nv-accordion',\n subcomponents: ['nv-accordion-item', 'nv-icon', 'nv-button', 'nv-badge'],\n stories: [\n // Default\n {\n name: 'Default',\n description: 'Accordion with simple items',\n args: {\n mode: 'accordion',\n data: [\n {\n id: '1',\n title: 'Title 1',\n content: 'Content of title 1',\n },\n {\n id: '2',\n title: 'Title 2',\n content: 'Content of title 2',\n },\n ],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // data\n {\n name: nameof<Components.NvAccordion>(x => x.data),\n description:\n 'Data-driven accordion using the data property with title and content',\n args: {\n mode: 'accordion',\n data: [\n {\n id: '1',\n title: 'First Item',\n content: 'Content for the first item',\n },\n {\n id: '2',\n title: 'Second Item',\n content: 'Content for the second item',\n },\n {\n id: '3',\n title: 'Third Item',\n content: 'Content for the third item',\n },\n ],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // mode\n {\n name: nameof<Components.NvAccordion>(x => x.mode),\n description: 'Accordion allowing multiple items to be open',\n args: {\n mode: 'multi',\n data: [\n {\n id: '1',\n title: 'Title 1',\n content: 'Content of title 1',\n },\n {\n id: '2',\n title: 'Title 2',\n content: 'Content of title 2',\n },\n ],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // openIndexes\n {\n name: nameof<Components.NvAccordion>(x => x.openIndexes),\n description:\n 'Demonstration of openIndexes with multiple items and first item pre-opened',\n args: {\n mode: 'accordion',\n data: [\n {\n id: '1',\n title: 'Item 1 - Pre-opened',\n content:\n 'This is the first item that is opened by default using openIndexes.',\n },\n {\n id: '2',\n title: 'Item 2',\n content: 'Content of the second item.',\n },\n {\n id: '3',\n title: 'Item 3',\n content: 'Content of the third item.',\n },\n {\n id: '4',\n title: 'Item 4',\n content: 'Content of the fourth item.',\n },\n {\n id: '5',\n title: 'Item 5',\n content: 'Content of the fifth item.',\n },\n {\n id: '6',\n title: 'Item 6',\n content: 'Content of the sixth item.',\n },\n {\n id: '7',\n title: 'Item 7',\n content: 'Content of the seventh item.',\n },\n {\n id: '8',\n title: 'Item 8',\n content: 'Content of the eighth item.',\n },\n {\n id: '9',\n title: 'Item 9',\n content: 'Content of the ninth item.',\n },\n {\n id: '10',\n title: 'Item 10',\n content: 'Content of the tenth item.',\n },\n ],\n openIndexes: [0],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // DisabledItem\n {\n name: 'DisabledItem',\n description: 'Accordion allowing multiple items to be open',\n args: {\n data: [\n {\n id: '1',\n title: 'Title 1',\n content: 'Content of title 1',\n },\n {\n id: '2',\n title: 'Title 2',\n content: 'This item is not accessible because it is disabled',\n disabled: true,\n },\n ],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // CustomHeader\n {\n name: 'CustomHeader',\n description: 'Real-world example with TraXes Connection Points',\n args: {\n mode: 'multi',\n openIndexes: [0, 2],\n },\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item>\n <div slot=\"header\">\n <div data-class=\"flex items-center justify-between w-full\">\n <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n <span data-class=\"nv-accordion-item__title\">EC-308</span>\n <span data-class=\"nv-accordion-item__subtitle\">\n Connection point\n </span>\n </div>\n <nv-badge color=\"success\" label=\"Running\">\n <nv-icon slot=\"leading-icon\" name=\"check\" size=\"sm\" />\n </nv-badge>\n </div>\n </div>\n <div slot=\"content\" data-class=\"flex items-center justify-between\">\n <div>\n <p>Single accordion or accordion group</p>\n <p>\n Use the accordion as a single instance, or in a group of\n accordions stacked vertically.\n </p>\n <p>\n The accordion title is wrapped in a heading tag by default.\n Alter it to fit the information architecture of the page.\n </p>\n </div>\n </div>\n </nv-accordion-item>\n <nv-accordion-item>\n <div slot=\"header\">\n <div data-class=\"flex items-center justify-between w-full\">\n <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n <span data-class=\"nv-accordion-item__title\">EC-309</span>\n <span data-class=\"nv-accordion-item__subtitle\">\n Connection point\n </span>\n </div>\n <nv-badge color=\"success\" label=\"Running\">\n <nv-icon slot=\"leading-icon\" name=\"check\" size=\"sm\" />\n </nv-badge>\n </div>\n </div>\n <div slot=\"content\">\n <p>Content for EC-309 connection point</p>\n </div>\n </nv-accordion-item>\n <nv-accordion-item>\n <div slot=\"header\">\n <div data-class=\"flex items-center justify-between w-full\">\n <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n <span data-class=\"nv-accordion-item__title\">EC-310</span>\n <span data-class=\"nv-accordion-item__subtitle\">\n Connection point\n </span>\n </div>\n <nv-badge color=\"error\" label=\"Stopped\">\n <nv-icon slot=\"leading-icon\" name=\"x\" size=\"sm\" />\n </nv-badge>\n </div>\n </div>\n <div slot=\"content\">\n <p>Content for EC-310 connection point (stopped)</p>\n </div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // ComplexData\n {\n name: 'ComplexData',\n description:\n 'Accordion with complex data including all possible attributes',\n args: {\n mode: 'accordion',\n data: [\n {\n id: '1',\n title: 'Complete section',\n subtitle: 'With all attributes',\n content: 'Main content',\n disabled: false,\n },\n {\n id: '2',\n title: 'Disabled section',\n subtitle: 'Not accessible',\n content: 'Inaccessible content',\n disabled: true,\n },\n ],\n openIndexes: [0],\n },\n template: <nv-accordion data-storybook-args></nv-accordion>,\n },\n // SlotDefault\n {\n name: 'SlotDefault',\n description: 'Accordion with a disabled item',\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Title item\">\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Title second item\">\n <div slot=\"content\">This second item is accessible</div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // SlotWithMode\n {\n name: 'SlotWithMode',\n description: 'Accordion with a disabled item',\n args: {\n mode: 'multi',\n },\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Title item\">\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Title second item\">\n <div slot=\"content\">This second item is accessible</div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // SlotWithOpenIndexes\n {\n name: 'SlotWithOpenIndexes',\n description:\n 'Demonstration of openIndexes with multiple items and first item pre-opened',\n args: {\n mode: 'accordion',\n openIndexes: [0],\n },\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Active item\">\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Title second item\">\n <div slot=\"content\">This second item is accessible</div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // SlotWithDisabledItem\n {\n name: 'SlotWithDisabledItem',\n description: 'Accordion with a disabled item',\n args: {\n mode: 'accordion',\n },\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Title item\">\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Disabled item\" disabled>\n <div slot=\"content\">\n This item is not accessible because it is disabled\n </div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n // SlotWithOpenItem\n {\n name: 'SlotWithOpenItem',\n description: 'Accordion with an open item',\n template: (\n <nv-accordion data-storybook-args>\n <nv-accordion-item item-title=\"Active item\" open>\n <div slot=\"content\">This item is accessible</div>\n </nv-accordion-item>\n <nv-accordion-item item-title=\"Title second item\">\n <div slot=\"content\">This second item is accessible</div>\n </nv-accordion-item>\n </nv-accordion>\n ),\n },\n ],\n};\n\nexport default NvAccordionDocs;\n"]}

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

@@ -136,10 +136,9 @@ export class NvAccordion {
         }
     }
     async componentDidLoad() {
-        var _a;
         const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
         // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set
-        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) &&
+        if (!this.data?.length &&
             (!this.openIndexes || this.openIndexes.length === 0)) {
             const childOpenIndexes = items
                 .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))
@@ -158,11 +157,7 @@ export class NvAccordion {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a;
-        return (h(Host, { key: 'b498df032480f7b961883ad963ea1c7729e964cb', role: "list", class: "nv-accordion" }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) ? (this.data.map((item, i) => {
-            var _a;
-            return (h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (h("div", { slot: "header" }, h("div", { class: "nv-accordion-item__header-content" }, h("span", { class: "nv-accordion-item__title" }, item.title), h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, h("div", { slot: "content" }, item.content), item.footer && h("div", { slot: "footer" }, item.footer)));
-        })) : (h("slot", null))));
+        return (h(Host, { key: 'b498df032480f7b961883ad963ea1c7729e964cb', role: "list", class: "nv-accordion" }, this.data?.length ? (this.data.map((item, i) => (h("nv-accordion-item", { key: item.id ?? i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (h("div", { slot: "header" }, h("div", { class: "nv-accordion-item__header-content" }, h("span", { class: "nv-accordion-item__title" }, item.title), h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, h("div", { slot: "content" }, item.content), item.footer && h("div", { slot: "footer" }, item.footer))))) : (h("slot", null))));
     }
     static get is() { return "nv-accordion"; }
     static get originalStyleUrls() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-accordion.js","sourceRoot":"","sources":["../../../../src/components/nv-accordion/nv-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Listen,\n Element,\n forceUpdate,\n Watch,\n} from '@stencil/core';\n\n/*\n @slot default - Slot for custom content (optional, ignored if data is provided)\n /\n@Component({\n tag: 'nv-accordion',\n styleUrl: 'styles/nv-accordion.scss',\n shadow: false,\n})\nexport class NvAccordion {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Data to display as a list of items (title, subtitle, content).\n /\n @Prop({ reflect: false })\n readonly data: {\n /* Unique identifier of the item /\n id: string;\n /* Item title /\n title: string;\n /* Optional subtitle /\n subtitle?: string;\n /* Main content /\n content: string;\n /* Optional footer /\n footer?: string;\n /* Disabled state /\n disabled?: boolean;\n }[] = [];\n\n /\n Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n /\n @Prop({ reflect: true })\n readonly mode: 'accordion' \| 'multi' = 'accordion';\n\n /\n Index of open items (external control possible)\n /\n @Prop({ reflect: false, mutable: true })\n openIndexes?: number[] = [];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region STATE\n\n @State()\n private updatingFromInternal: boolean = false;\n\n /\n * Reference to host element to access children\n /\n @Element() el!: HTMLNvAccordionElement;\n\n //#endregion STATE\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when an item's open state changes\n * @bind openIndexes\n /\n @Event({ bubbles: false })\n openIndexesChanged: EventEmitter<number[]>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens an item by its index (Public API)\n * @param {number} index Index of the item to open\n /\n @Method()\n async open(index: number) {\n this.toggleItem(index, true);\n }\n\n /\n Closes an item by its index (Public API)\n * @param {number} index Index of the item to close\n /\n @Method()\n async close(index: number) {\n this.toggleItem(index, false);\n }\n\n /\n Toggles an item's state (internal)\n * @param {number} index Item index\n * @param {boolean} [forceOpen] Force open (true) or close (false)\n /\n private toggleItem(index: number, forceOpen?: boolean) {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const item = items[index];\n\n if (!item \|\| item.disabled) {\n console.warn('[toggleItem] Item not found or disabled:', index);\n this.openIndexesChanged.emit([...(this.openIndexes \|\| [])]);\n return;\n }\n\n let openIndexes = [...(this.openIndexes \|\| [])];\n const isOpen = openIndexes.includes(index);\n\n if (this.mode === 'accordion') {\n openIndexes =\n forceOpen === false \|\| (forceOpen === undefined && isOpen)\n ? []\n : [index];\n } else {\n if (forceOpen === false) {\n openIndexes = openIndexes.filter(i => i !== index);\n } else if (forceOpen === true && !isOpen) {\n openIndexes.push(index);\n } else if (forceOpen === undefined) {\n openIndexes = isOpen\n ? openIndexes.filter(i => i !== index)\n : [...openIndexes, index];\n }\n }\n\n this.updatingFromInternal = true;\n this.openIndexes = [...openIndexes];\n this.updateChildrenState();\n this.updatingFromInternal = false;\n\n this.openIndexesChanged.emit([...openIndexes]);\n }\n\n /\n Updates the open state of child elements based on openIndexes\n /\n private async updateChildrenState() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n items.forEach((item, i) => {\n const shouldBeOpen = (this.openIndexes \|\| []).includes(i);\n item.open = shouldBeOpen;\n item.mode = this.mode;\n item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n forceUpdate(item);\n });\n }\n\n / eslint-disable nova/native-event-listener /\n /\n Listens to itemToggle events from nv-accordion-item elements\n * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n /\n @Listen('itemToggle')\n onItemToggle(event: CustomEvent<boolean>) {\n event.stopPropagation();\n if (this.updatingFromInternal) {\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const targetItem = event.target as HTMLNvAccordionItemElement;\n const index = items.indexOf(targetItem);\n\n if (index !== -1) {\n this.toggleItem(index, event.detail);\n } else {\n console.warn('[onItemToggle] Target item not found in items list');\n }\n }\n / eslint-enable nova/native-event-listener /\n\n //#endregion METHODS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('openIndexes')\n onOpenIndexesChange(\n newValue: number[] \| undefined,\n oldValue: number[] \| undefined,\n ) {\n if (\n !this.updatingFromInternal &&\n newValue !== undefined &&\n newValue !== oldValue\n ) {\n this.updateChildrenState();\n }\n }\n\n @Watch('mode')\n onModeChange() {\n this.updateChildrenState();\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.openIndexes === undefined) {\n this.openIndexes = [];\n }\n }\n\n async componentDidLoad() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n if (\n !this.data?.length &&\n (!this.openIndexes \|\| this.openIndexes.length === 0)\n ) {\n const childOpenIndexes = items\n .map((item, i) => (item.hasAttribute('open') \|\| item.open ? i : -1))\n .filter(i => i !== -1);\n\n if (childOpenIndexes.length > 0) {\n this.updatingFromInternal = true;\n this.openIndexes = [...childOpenIndexes];\n this.updatingFromInternal = false;\n\n this.openIndexesChanged.emit([...this.openIndexes]);\n }\n }\n\n // Ensure children are in sync with current openIndexes state\n await this.updateChildrenState();\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"list\" class=\"nv-accordion\">\n {this.data?.length ? (\n this.data.map((item, i) => (\n <nv-accordion-item\n key={item.id ?? i}\n itemTitle={item.title}\n disabled={item.disabled}\n open={(this.openIndexes \|\| []).includes(i)}\n mode={this.mode}\n >\n {item.subtitle ? (\n <div slot=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n <span class=\"nv-accordion-item__title\">{item.title}</span>\n <span class=\"nv-accordion-item__subtitle\">\n {item.subtitle}\n </span>\n </div>\n </div>\n ) : null}\n <div slot=\"content\">{item.content}</div>\n {item.footer && <div slot=\"footer\">{item.footer}</div>}\n </nv-accordion-item>\n ))\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-accordion.js","sourceRoot":"","sources":["../../../../src/components/nv-accordion/nv-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Listen,\n Element,\n forceUpdate,\n Watch,\n} from '@stencil/core';\n\n/*\n @slot default - Slot for custom content (optional, ignored if data is provided)\n /\n@Component({\n tag: 'nv-accordion',\n styleUrl: 'styles/nv-accordion.scss',\n shadow: false,\n})\nexport class NvAccordion {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Data to display as a list of items (title, subtitle, content).\n /\n @Prop({ reflect: false })\n readonly data: {\n /* Unique identifier of the item /\n id: string;\n /* Item title /\n title: string;\n /* Optional subtitle /\n subtitle?: string;\n /* Main content /\n content: string;\n /* Optional footer /\n footer?: string;\n /* Disabled state /\n disabled?: boolean;\n }[] = [];\n\n /\n Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n /\n @Prop({ reflect: true })\n readonly mode: 'accordion' \| 'multi' = 'accordion';\n\n /\n Index of open items (external control possible)\n /\n @Prop({ reflect: false, mutable: true })\n openIndexes?: number[] = [];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region STATE\n\n @State()\n private updatingFromInternal: boolean = false;\n\n /\n * Reference to host element to access children\n /\n @Element() el!: HTMLNvAccordionElement;\n\n //#endregion STATE\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when an item's open state changes\n * @bind openIndexes\n /\n @Event({ bubbles: false })\n openIndexesChanged: EventEmitter<number[]>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens an item by its index (Public API)\n * @param {number} index Index of the item to open\n /\n @Method()\n async open(index: number) {\n this.toggleItem(index, true);\n }\n\n /\n Closes an item by its index (Public API)\n * @param {number} index Index of the item to close\n /\n @Method()\n async close(index: number) {\n this.toggleItem(index, false);\n }\n\n /\n Toggles an item's state (internal)\n * @param {number} index Item index\n * @param {boolean} [forceOpen] Force open (true) or close (false)\n /\n private toggleItem(index: number, forceOpen?: boolean) {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const item = items[index];\n\n if (!item \|\| item.disabled) {\n console.warn('[toggleItem] Item not found or disabled:', index);\n this.openIndexesChanged.emit([...(this.openIndexes \|\| [])]);\n return;\n }\n\n let openIndexes = [...(this.openIndexes \|\| [])];\n const isOpen = openIndexes.includes(index);\n\n if (this.mode === 'accordion') {\n openIndexes =\n forceOpen === false \|\| (forceOpen === undefined && isOpen)\n ? []\n : [index];\n } else {\n if (forceOpen === false) {\n openIndexes = openIndexes.filter(i => i !== index);\n } else if (forceOpen === true && !isOpen) {\n openIndexes.push(index);\n } else if (forceOpen === undefined) {\n openIndexes = isOpen\n ? openIndexes.filter(i => i !== index)\n : [...openIndexes, index];\n }\n }\n\n this.updatingFromInternal = true;\n this.openIndexes = [...openIndexes];\n this.updateChildrenState();\n this.updatingFromInternal = false;\n\n this.openIndexesChanged.emit([...openIndexes]);\n }\n\n /\n Updates the open state of child elements based on openIndexes\n /\n private async updateChildrenState() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n items.forEach((item, i) => {\n const shouldBeOpen = (this.openIndexes \|\| []).includes(i);\n item.open = shouldBeOpen;\n item.mode = this.mode;\n item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n forceUpdate(item);\n });\n }\n\n / eslint-disable nova/native-event-listener /\n /\n Listens to itemToggle events from nv-accordion-item elements\n * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n /\n @Listen('itemToggle')\n onItemToggle(event: CustomEvent<boolean>) {\n event.stopPropagation();\n if (this.updatingFromInternal) {\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const targetItem = event.target as HTMLNvAccordionItemElement;\n const index = items.indexOf(targetItem);\n\n if (index !== -1) {\n this.toggleItem(index, event.detail);\n } else {\n console.warn('[onItemToggle] Target item not found in items list');\n }\n }\n / eslint-enable nova/native-event-listener /\n\n //#endregion METHODS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('openIndexes')\n onOpenIndexesChange(\n newValue: number[] \| undefined,\n oldValue: number[] \| undefined,\n ) {\n if (\n !this.updatingFromInternal &&\n newValue !== undefined &&\n newValue !== oldValue\n ) {\n this.updateChildrenState();\n }\n }\n\n @Watch('mode')\n onModeChange() {\n this.updateChildrenState();\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.openIndexes === undefined) {\n this.openIndexes = [];\n }\n }\n\n async componentDidLoad() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n if (\n !this.data?.length &&\n (!this.openIndexes \|\| this.openIndexes.length === 0)\n ) {\n const childOpenIndexes = items\n .map((item, i) => (item.hasAttribute('open') \|\| item.open ? i : -1))\n .filter(i => i !== -1);\n\n if (childOpenIndexes.length > 0) {\n this.updatingFromInternal = true;\n this.openIndexes = [...childOpenIndexes];\n this.updatingFromInternal = false;\n\n this.openIndexesChanged.emit([...this.openIndexes]);\n }\n }\n\n // Ensure children are in sync with current openIndexes state\n await this.updateChildrenState();\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"list\" class=\"nv-accordion\">\n {this.data?.length ? (\n this.data.map((item, i) => (\n <nv-accordion-item\n key={item.id ?? i}\n itemTitle={item.title}\n disabled={item.disabled}\n open={(this.openIndexes \|\| []).includes(i)}\n mode={this.mode}\n >\n {item.subtitle ? (\n <div slot=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n <span class=\"nv-accordion-item__title\">{item.title}</span>\n <span class=\"nv-accordion-item__subtitle\">\n {item.subtitle}\n </span>\n </div>\n </div>\n ) : null}\n <div slot=\"content\">{item.content}</div>\n {item.footer && <div slot=\"footer\">{item.footer}</div>}\n </nv-accordion-item>\n ))\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"]}

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

@@ -4,20 +4,31 @@ const NvAlertDocs = {
     component: 'nv-alert',
     subcomponents: ['nv-button'],
     stories: [
+        // Default
         {
             name: 'Default',
             args: { message: 'This is an alert!' },
             template: h("nv-alert", { "data-storybook-args": true }),
         },
+        // color (deprecated)
+        {
+            name: nameof(x => x.color),
+            description: 'Deprecated: Use feedback instead.',
+            args: { color: 'success', message: 'Using deprecated color property.' },
+            template: h("nv-alert", { "data-storybook-args": true }),
+        },
+        // feedback
         {
             name: nameof(x => x.feedback),
             template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-alert", { "data-storybook-args": true, feedback: "information", heading: "Default: Information" }), h("nv-alert", { "data-storybook-args": true, feedback: "warning", heading: "Warning" }), h("nv-alert", { "data-storybook-args": true, feedback: "error", heading: "Error" }), h("nv-alert", { "data-storybook-args": true, feedback: "success", heading: "Success" }), h("nv-alert", { "data-storybook-args": true, feedback: "neutral", heading: "Neutral" }))),
         },
+        // message
         {
             name: nameof(x => x.message),
             args: { message: 'custom message' },
             template: (h("nv-alert", { "data-storybook-args": true }, h("nv-button", null, "With additional actions"))),
         },
+        // heading
         {
             name: nameof(x => x.heading),
             args: {
@@ -26,21 +37,25 @@ const NvAlertDocs = {
             },
             template: h("nv-alert", { "data-storybook-args": true }),
         },
+        // icon
         {
             name: nameof(x => x.icon),
             args: { icon: 'user', message: 'You can change the default icon.' },
             template: h("nv-alert", { "data-storybook-args": true }),
         },
+        // dismissible
         {
             name: nameof(x => x.dismissible),
             args: { dismissible: true, message: 'You can close this alert.' },
             template: h("nv-alert", { "data-storybook-args": true }),
         },
+        // hasNoAnimations
         {
             name: nameof(x => x.hasNoAnimations),
             args: { hasNoAnimations: true, message: 'No animations.' },
             template: h("nv-alert", { "data-storybook-args": true }),
         },
+        // preventAutoClose
         {
             name: nameof(x => x.preventAutoClose),
             args: {
@@ -50,13 +65,15 @@ const NvAlertDocs = {
             },
             template: h("nv-alert", { "data-storybook-args": true }),
         },
+        // hidden
         {
             name: nameof(x => x.hidden),
             args: { hidden: true, message: 'This is hidden until changed.' },
             template: h("nv-alert", { "data-storybook-args": true }),
         },
+        // SlotDefault
         {
-            name: 'DefaultSlot',
+            name: 'SlotDefault',
             description: 'The default slot can be used to add additional content to the alert.',
             template: (h("nv-alert", { "data-storybook-args": true }, h("img", { src: "https://picsum.photos/200/200", "data-class": "rounded-md" }))),
         },

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,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"]}
1	+ {"version":3,"file":"nv-alert.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-alert/nv-alert.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 NvAlertDocs: NovaDocs<Components.NvAlert> = {\n component: 'nv-alert',\n subcomponents: ['nv-button'],\n stories: [\n // Default\n {\n name: 'Default',\n args: { message: 'This is an alert!' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n // color (deprecated)\n {\n name: nameof<Components.NvAlert>(x => x.color),\n description: 'Deprecated: Use feedback instead.',\n args: { color: 'success', message: 'Using deprecated color property.' },\n template: <nv-alert data-storybook-args></nv-alert>,\n },\n // feedback\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 // message\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 // heading\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 // icon\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 // dismissible\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 // hasNoAnimations\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 // preventAutoClose\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 // hidden\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 // SlotDefault\n {\n name: 'SlotDefault',\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

@@ -151,8 +151,7 @@ export class NvAlert {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a;
-        return (h(Host, { key: '2c89126ecbdca5e8df9c0541a4e312d2dc8a9fb3', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: '3aa514682ac670d81c7c88fa8b9b6f02e2761c45', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '5049bdb9d17b9ef07e15554631cc8fbd557e4b22', class: "content" }, this.heading && h("p", { key: '3faaa7e738f484f2f7dc543866eadaa861c0709b', class: "heading" }, this.heading), this.message && h("p", { key: 'abd16d9cb5bc2f28e63c534e8f9f2169e511df2f', class: "message" }, this.message), h("slot", { key: '0b14b616a7e6665f903f0aa6c32f706b0aa8bd27' })), this.dismissible && (h("button", { key: '5d35998aac73ea82ef06e1d083597a7677c0cd70', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '3088178c1152525a400d116ac07ce372dadd420b', name: "x", size: "sm" })))));
+        return (h(Host, { key: '2c89126ecbdca5e8df9c0541a4e312d2dc8a9fb3', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: '3aa514682ac670d81c7c88fa8b9b6f02e2761c45', name: this.icon ?? this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '5049bdb9d17b9ef07e15554631cc8fbd557e4b22', class: "content" }, this.heading && h("p", { key: '3faaa7e738f484f2f7dc543866eadaa861c0709b', class: "heading" }, this.heading), this.message && h("p", { key: 'abd16d9cb5bc2f28e63c534e8f9f2169e511df2f', class: "message" }, this.message), h("slot", { key: '0b14b616a7e6665f903f0aa6c32f706b0aa8bd27' })), this.dismissible && (h("button", { key: '5d35998aac73ea82ef06e1d083597a7677c0cd70', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '3088178c1152525a400d116ac07ce372dadd420b', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-alert"; }
     static get originalStyleUrls() {

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":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,KAAK,EACL,OAAO,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAEL,cAAc,GACf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE;;GAEG;AAMH,MAAM,OAAO,OAAO;IALpB;QAoCE,uBAAuB;QACvB,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEH,aAAQ,GAAwB,aAAa,CAAC;QAqB9C;;;WAGG;QAEM,gBAAW,GAAY,KAAK,CAAC;QAEtC;;;WAGG;QAEM,qBAAgB,GAAY,KAAK,CAAC;QAE3C;;WAEG;QAEH,WAAM,GAAY,KAAK,CAAC,CAAC,+DAA+D;QAExF;;WAEG;QAEM,oBAAe,GAAY,KAAK,CAAC;QA2C1C,qBAAqB;QACrB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;WAIG;QACK,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAC3B,CAAC,CAAC;QAEF;;;WAGG;QACK,mBAAc,GAAG,GAAa,EAAE;YACtC,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACtB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,WAAW;oBAC7B,OAAO,aAAa,CAAC;gBACvB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,KAAK;oBACvB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,MAAM,CAAC;gBAChB;oBACE,OAAO,aAAa,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;KAyFH;IA/OC,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;gBACnB,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,SAA2B,CAAC;oBAC5C,MAAM;gBACR,KAAK,WAAuC;oBAC1C,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR;oBACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAuB,CAAC;YACjD,CAAC;QACH,CAAC;IACH,CAAC;IAiFD,mBAAmB;IACnB,8EAA8E;IAC9E,kBAAkB;IAElB;;;;OAIG;IAEH,KAAK,CAAC,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEhC,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAwCD;;;OAGG;IACK,KAAK,CAAC,gBAAgB,CAAC,MAAe;QAC5C,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAChE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAErE,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC9B,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;QACzC,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,MAAe;QACvC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC7C,CAAC;IAED,oBAAoB;IACpB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;gBACnB,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,SAA2B,CAAC;oBAC5C,MAAM;gBACR,KAAK,WAAuC;oBAC1C,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR;oBACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAuB,CAAC;YACjD,CAAC;QACH,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjE,gEACE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,cAAc,EAAE,EACxC,KAAK,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAAE,EAC9B,IAAI,EAAC,IAAI,GACA;YAEX,4DAAK,KAAK,EAAC,SAAS;gBACjB,IAAI,CAAC,OAAO,IAAI,0DAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK;gBAErD,IAAI,CAAC,OAAO,IAAI,0DAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK;gBAEtD,8DAAa,CACT;YAEL,IAAI,CAAC,WAAW,IAAI,CACnB,+DAAQ,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa;gBAC7D,gEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n DeprecatedSemanticColors,\n FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\nimport { type IconName } from '../nv-icon/nv-icons';\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() el: HTMLNvAlertElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Defines color of the alert.\n * @deprecated use feedback instead.\n /\n @Prop({ reflect: true })\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({ bubbles: false })\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event({ bubbles: false })\n hiddenChangedComplete: EventEmitter<boolean>;\n\n /\n Emitted when the close button is clicked.\n /\n @Event({ bubbles: false })\n closeClicked: EventEmitter<void>;\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 = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\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 = (): IconName => {\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.el, { duration: 150 });\n const { collapse, expand } = useCollapse(this.el, { duration: 250 });\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.el.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.el.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"]}
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';\nimport { type IconName } from '../nv-icon/nv-icons';\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() el: HTMLNvAlertElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Defines color of the alert.\n * @deprecated use feedback instead.\n /\n @Prop({ reflect: true })\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({ bubbles: false })\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event({ bubbles: false })\n hiddenChangedComplete: EventEmitter<boolean>;\n\n /\n Emitted when the close button is clicked.\n /\n @Event({ bubbles: false })\n closeClicked: EventEmitter<void>;\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 = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\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 = (): IconName => {\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.el, { duration: 150 });\n const { collapse, expand } = useCollapse(this.el, { duration: 250 });\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.el.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.el.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.docs.js CHANGED Viewed

@@ -4,33 +4,89 @@ const NvAvatarDocs = {
     component: 'nv-avatar',
     subcomponents: ['nv-icon'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: h("nv-avatar", { "data-storybook-args": true }),
         },
+        // xsmall
+        {
+            name: nameof(x => x.xsmall),
+            description: 'Deprecated: Use size="xs" instead.',
+            args: { xsmall: true, initials: 'XS' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        // small
+        {
+            name: nameof(x => x.small),
+            description: 'Deprecated: Use size="sm" instead.',
+            args: { small: true, initials: 'SM' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        // medium
+        {
+            name: nameof(x => x.medium),
+            description: 'Deprecated: Use size="md" instead.',
+            args: { medium: true, initials: 'MD' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        // large
+        {
+            name: nameof(x => x.large),
+            description: 'Deprecated: Use size="lg" instead.',
+            args: { large: true, initials: 'LG' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        // xlarge
+        {
+            name: nameof(x => x.xlarge),
+            description: 'Deprecated: Use size="xl" instead.',
+            args: { xlarge: true, initials: 'XL' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        // text
+        {
+            name: nameof(x => x.text),
+            description: 'Deprecated: Use initials instead.',
+            args: { text: 'AB' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        // url
+        {
+            name: nameof(x => x.url),
+            description: 'Deprecated: Use src instead.',
+            args: { url: 'https://picsum.photos/200' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        // size
         {
             name: nameof(x => x.size),
             template: (h("div", { "data-class": "flex gap-4 items-center" }, h("nv-avatar", { "data-storybook-args": true, initials: "xs", size: "xs" }), h("nv-avatar", { "data-storybook-args": true, initials: "sm", size: "sm" }), h("nv-avatar", { "data-storybook-args": true, initials: "md", size: "md" }), h("nv-avatar", { "data-storybook-args": true, initials: "lg", size: "lg" }), h("nv-avatar", { "data-storybook-args": true, initials: "xl", size: "xl" }), h("nv-avatar", { "data-storybook-args": true, size: "xs" }), h("nv-avatar", { "data-storybook-args": true, size: "sm" }), h("nv-avatar", { "data-storybook-args": true, size: "md" }), h("nv-avatar", { "data-storybook-args": true, size: "lg" }), h("nv-avatar", { "data-storybook-args": true, size: "xl" }))),
         },
+        // color
         {
             name: nameof(x => x.color),
             template: (h("div", { "data-class": "flex gap-4" }, h("nv-avatar", { "data-storybook-args": true, initials: "1", color: "1" }), h("nv-avatar", { "data-storybook-args": true, initials: "2", color: "2" }), h("nv-avatar", { "data-storybook-args": true, initials: "3", color: "3" }), h("nv-avatar", { "data-storybook-args": true, initials: "4", color: "4" }), h("nv-avatar", { "data-storybook-args": true, initials: "5", color: "5" }), h("nv-avatar", { "data-storybook-args": true, initials: "6", color: "6" }), h("nv-avatar", { "data-storybook-args": true, initials: "7", color: "7" }), h("nv-avatar", { "data-storybook-args": true, initials: "8", color: "8" }), h("nv-avatar", { "data-storybook-args": true, initials: "9", color: "9" }), h("nv-avatar", { "data-storybook-args": true, initials: "10", color: "10" }))),
         },
+        // initials
         {
             name: nameof(x => x.initials),
             args: { initials: 'AB' },
             template: h("nv-avatar", { "data-storybook-args": true }),
         },
+        // alt
         {
             name: nameof(x => x.alt),
             args: { alt: 'User profile picture', src: 'https://picsum.photos/200' },
             template: h("nv-avatar", { "data-storybook-args": true }),
         },
+        // src
         {
             name: nameof(x => x.src),
             args: { src: 'https://picsum.photos/200' },
             template: h("nv-avatar", { "data-storybook-args": true }),
         },
+        // SlotIcon
         {
             name: 'SlotIcon',
             description: 'Add an icon to the avatar using the slot',