npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.3--canary.1678.5b4a7e71bc0aa2e3f495f00864e3c9507193dd72.0 → 30.9.3--canary.1640.5ed5af060f6d294c39b0d509d73a088e1d9ffceb.0 - Mend

@infineon/infineon-design-system-stencil 30.9.3--canary.1678.5b4a7e71bc0aa2e3f495f00864e3c9507193dd72.0 → 30.9.3--canary.1640.5ed5af060f6d294c39b0d509d73a088e1d9ffceb.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 (304) hide show

package/dist/collection/components/notification/notification.stories.js CHANGED Viewed

@@ -3,7 +3,7 @@ export default {
     title: 'Components/Notification',
     tags: ['autodocs'],
     args: {
-        content: "Sample Notification",
+        label: "Sample Notification",
         variant: 'success',
         icon: 'c-check-16',
         linkText: 'Link',
@@ -11,39 +11,86 @@ export default {
         linkTarget: '_blank',
     },
     argTypes: {
-        content: {
-            description: 'Text inside the notification is passed as slot.',
+        label: {
+            name: 'Label of Notification',
+            description: 'Set the text label of the *<ifx-notification>*.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         variant: {
             description: 'Variant of the notification.',
             options: ['success', 'warning', 'error'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-notification props',
+                defaultValue: {
+                    summary: 'success'
+                },
+                type: {
+                    summary: 'success | warning | error'
+                }
+            }
         },
         icon: {
-            description: 'The icon to be displayed in the notification.',
-            options: Object.values(icons).map(i => i['name']),
+            description: 'The icon to be displayed in the notification. Choose "none" to display no icon.',
+            options: ['none', ...Object.values(icons).map(i => i['name'])],
             control: { type: 'select' },
+            table: {
+                category: 'ifx-notification props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         linkText: {
             description: 'Text for the link.',
+            table: {
+                category: 'ifx-notification props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         linkHref: {
             description: 'URL for the link.',
+            table: {
+                category: 'ifx-notification props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         linkTarget: {
             options: ['_blank', '_self', '_parent'],
             control: { type: 'radio' },
+            description: 'Specifies where to open the linked document.',
+            table: {
+                category: 'ifx-notification props',
+                defaultValue: {
+                    summary: '_blank'
+                },
+                type: {
+                    summary: '_blank | _self | _parent'
+                }
+            }
         },
     },
 };
-const DefaultTemplate = args => `<ifx-notification
-  icon="${args.icon}"
+const DefaultTemplate = args => {
+    const icon = args.icon === 'none' ? '' : args.icon;
+    return `<ifx-notification
+  icon = "${icon}"
   variant="${args.variant}"
   link-text="${args.linkText}"
   link-href="${args.linkHref}"
   link-target="${args.linkTarget}">
-  ${args.content}
+  ${args.label}
 </ifx-notification>`;
+};
 export const Default = DefaultTemplate.bind({});
 Default.argTypes = {};
 //# sourceMappingURL=notification.stories.js.map

package/dist/collection/components/notification/notification.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"notification.stories.js","sourceRoot":"","sources":["../../../src/components/notification/notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,~~OAAO~~,EAAE,qBAAqB;~~QAC9B~~,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,yBAAyB;QACnC,UAAU,EAAE,QAAQ;KACrB;IACD,QAAQ,EAAE;QACR,~~OAAO~~,EAAE;~~YACP~~,WAAW,EAAE,iDAAiD;~~SAC/D~~;QACD,OAAO,EAAE;YACP,WAAW,EAAE,8BAA8B;YAC3C,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,IAAI,EAAE;YACJ,WAAW,EAAE~~,+CAA+C~~;~~YAC5D~~,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;~~YACjD~~,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;~~SAC5B~~;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;~~SAClC~~;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mBAAmB;~~SACjC~~;QACD,UAAU,~~EAAC~~;~~YACT~~,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;~~SAC3B~~;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC~~;UACtB~~,IAAI,CAAC,IAAI;~~aACN~~,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,QAAQ;eACb,IAAI,CAAC,QAAQ;iBACX,IAAI,CAAC,UAAU;IAC5B,IAAI,CAAC,~~OAAO~~;~~oBACI~~,CAAC;~~AAErB~~,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Notification',\n tags: ['autodocs'],\n\n args: {\n ~~content~~: \"Sample Notification\",\n variant: 'success',\n icon: 'c-check-16',\n linkText: 'Link',\n linkHref: 'https://www.example.com',\n linkTarget: '_blank',\n },\n argTypes: {\n ~~content~~: {\n description: '~~Text~~ ~~inside~~ the notification is ~~passed~~ ~~as slot.~~',\n },\n variant: {\n description: 'Variant of the notification.',\n options: ['success', 'warning', 'error'],\n control: { type: 'radio' },\n },\n icon: {\n description: 'The icon to be displayed in the notification.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n },\n linkText: {\n description: 'Text for the link.',\n },\n linkHref: {\n description: 'URL for the link.',\n },\n linkTarget:{\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' },\n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-notification \n icon=\"${~~args.~~icon}\" \n variant=\"${args.variant}\" \n link-text=\"${args.linkText}\" \n link-href=\"${args.linkHref}\"\n link-target=\"${args.linkTarget}\">\n ${args.~~content~~}\n</ifx-notification>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
1	+ {"version":3,"file":"notification.stories.js","sourceRoot":"","sources":["../../../src/components/notification/notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qBAAqB;QAC5B,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,yBAAyB;QACnC,UAAU,EAAE,QAAQ;KACrB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,uBAAuB;YAC7B,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,8BAA8B;YAC3C,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,2BAA2B;iBACrC;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,iFAAiF;YAC9F,OAAO,EAAE,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mBAAmB;YAChC,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,0BAA0B;iBACpC;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAEnD,OAAO;YACG,IAAI;aACH,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,QAAQ;eACb,IAAI,CAAC,QAAQ;iBACX,IAAI,CAAC,UAAU;IAC5B,IAAI,CAAC,KAAK;oBACM,CAAC;AACrB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Notification',\n tags: ['autodocs'],\n\n args: {\n label: \"Sample Notification\",\n variant: 'success',\n icon: 'c-check-16',\n linkText: 'Link',\n linkHref: 'https://www.example.com',\n linkTarget: '_blank',\n },\n argTypes: {\n label: {\n name: 'Label of Notification',\n description: 'Set the text label of the <ifx-notification>.',\n table: {\n category: 'story controls',\n type: {\n summary: 'string'\n }\n }\n },\n variant: {\n description: 'Variant of the notification.',\n options: ['success', 'warning', 'error'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-notification props',\n defaultValue: {\n summary: 'success'\n },\n type: {\n summary: 'success \| warning \| error'\n }\n }\n },\n icon: {\n description: 'The icon to be displayed in the notification. Choose \"none\" to display no icon.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: { type: 'select' },\n table: {\n category: 'ifx-notification props',\n type: {\n summary: 'string'\n }\n }\n },\n linkText: {\n description: 'Text for the link.',\n table: {\n category: 'ifx-notification props',\n type: {\n summary: 'string'\n }\n }\n },\n linkHref: {\n description: 'URL for the link.',\n table: {\n category: 'ifx-notification props',\n type: {\n summary: 'string'\n }\n }\n },\n linkTarget: {\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' },\n description: 'Specifies where to open the linked document.',\n table: {\n category: 'ifx-notification props',\n defaultValue: {\n summary: '_blank'\n },\n type: {\n summary: '_blank \| _self \| _parent'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const icon = args.icon === 'none' ? '' : args.icon;\n\n return `<ifx-notification \n icon = \"${icon}\"\n variant=\"${args.variant}\" \n link-text=\"${args.linkText}\" \n link-href=\"${args.linkHref}\"\n link-target=\"${args.linkTarget}\">\n ${args.label}\n</ifx-notification>`;\n}\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/number-indicator/number-indicator.stories.js CHANGED Viewed

@@ -5,6 +5,25 @@ export default {
         label: 1,
         inverted: false,
     },
+    argTypes: {
+        label: {
+            name: 'Label of Number Indicator',
+            description: 'Set the number displayed inside the *<ifx-number-indicator>*.',
+            table: {
+                category: 'story controls'
+            }
+        },
+        inverted: {
+            description: 'Toggles the color scheme of the number indicator.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-number-indicator props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        }
+    }
 };
 const DefaultTemplate = args => `<ifx-number-indicator inverted="${args.inverted}">${args.label}</ifx-number-indicator>`;
 export const Default = DefaultTemplate.bind({});

package/dist/collection/components/number-indicator/number-indicator.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-indicator.stories.js","sourceRoot":"","sources":["../../../src/components/number-indicator/number-indicator.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,mCAAmC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,yBAAyB,CAAC;AAEzH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n title: 'Components/Number Indicator',\n tags: ['autodocs'],\n\n args: {\n label: 1,\n inverted: false,\n },\n};\n\nconst DefaultTemplate = args => `<ifx-number-indicator inverted=\"${args.inverted}\">${args.label}</ifx-number-indicator>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
1	+ {"version":3,"file":"number-indicator.stories.js","sourceRoot":"","sources":["../../../src/components/number-indicator/number-indicator.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,2BAA2B;YACjC,WAAW,EAAE,+DAA+D;YAC5E,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,4BAA4B;gBACtC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,mCAAmC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,yBAAyB,CAAC;AAEzH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n title: 'Components/Number Indicator',\n tags: ['autodocs'],\n\n args: {\n label: 1,\n inverted: false,\n },\n argTypes: {\n label: {\n name: 'Label of Number Indicator',\n description: 'Set the number displayed inside the <ifx-number-indicator>.',\n table: {\n category: 'story controls'\n }\n },\n inverted: {\n description: 'Toggles the color scheme of the number indicator.',\n control: 'boolean',\n table: {\n category: 'ifx-number-indicator props',\n defaultValue: {\n summary: false\n }\n }\n }\n }\n};\n\nconst DefaultTemplate = args => `<ifx-number-indicator inverted=\"${args.inverted}\">${args.label}</ifx-number-indicator>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/pagination/pagination.js CHANGED Viewed

@@ -137,7 +137,7 @@ export class Pagination {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: 'b9e1b525f3a20354d409c93a1aa0faa9d9d17019', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'fc932c8e4114f39e5df86007d3595f72fac6384a', class: 'items__per-page-wrapper' }, h("div", { key: '93816bd9264a8cd32d782cc78df9052ab93f76a7', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '3432585bf8ce77786657f676fdaca27aba34b413', class: 'items__per-page-field' }, h("ifx-select", { key: 'a6def492e7db12fb2d9245a6655aaecb99282ceb', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: '275104906a9d0e733644e2b5efbab477ecfc95ca', class: 'items__total-wrapper' }, h("div", { key: '75528c52f8be0724c332daf2f292c1ec852f6e53', class: 'page__numbers-wrapper' }, h("div", { key: '4e350e7002b1de2e5fc2c16d10b4a035a3bdedad', class: "pagination" }, h("ifx-icon-button", { key: '42a3fe966d4bae2bc90b24709293237a5b57c413', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '5d5f20215e988d2adc10f842be5b9300f30b1fd1' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: 'ebb0d3ef295477810891b41ca03ae42cdb634cf7', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: 'db55804ece2792b117f6f5375a6f63253679a393', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'bc40446f5905c3f249d243993d7363479d6ce384', class: 'items__per-page-wrapper' }, h("div", { key: '9c15d938fc18b93fc7e8c10339b71649575386ca', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '0b7ba079ffa28c5732df989988afd65396c8adc9', class: 'items__per-page-field' }, h("ifx-select", { key: '1a031fa45753fc389e3ab386ab6170f50d1df0f0', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: 'd5bd11d957dd37b5af1df9d285ae4098c93c3365', class: 'items__total-wrapper' }, h("div", { key: '295766066233b8b0f975abcc093cc43839b46125', class: 'page__numbers-wrapper' }, h("div", { key: '574f2ef606d94c2a6ad16c9b9684f158f3595422', class: "pagination" }, h("ifx-icon-button", { key: 'f98a3b995d2f08124e2f2e3f96e64cccd7b81b33', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '07630c257729a369d07baf12e99c0469fccebe0d' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '8407562df387e20efa76fdf6ee2d1fe65e6eb6f6', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     static get is() { return "ifx-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -218,36 +218,6 @@ export class Pagination {
                     "resolved": "any",
                     "references": {}
                 }
-            }, {
-                "method": "ifxNextPage",
-                "name": "ifxNextPage",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "ifxPrevPage",
-                "name": "ifxPrevPage",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/pagination/pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,UAAU;IALvB;QAUU,gBAAW,GAAW,CAAC,CAAC;QACvB,iBAAY,GAAW,CAAC,CAAC;QACzB,iBAAY,GAAW,EAAE,CAAC;QAC1B,kBAAa,GAAa,EAAE,CAAC;QAC9B,UAAK,GAAW,CAAC,CAAC;QAElB,mBAAc,GAAG,UAAU,CAAA;QAC3B,iBAAY,GAAG,QAAQ,CAAA;QACvB,yBAAoB,GAAG,gBAAgB,CAAA;QACvC,aAAQ,GAAG,YAAY,CAAC;KA2LjC;IAxLC,eAAe,CAAC,CAAC;QACf,IAAG,CAAC,CAAC,MAAM,EAAE,CAAC;YACZ,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,2BAA2B,EAAE,CAAA;QAClC,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACxE,IAAI,SAAS,GAAG,iBAAiB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QACxD,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;IAE1C,CAAC;IAED,sBAAsB;QACpB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACvB,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAC/E,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,CAAC;QAExD,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACxB,CAAC;aAAM,IAAI,IAAI,CAAC,WAAW,GAAG,eAAe,EAAE,CAAC;YAC9C,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;QACtC,CAAC;;YAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;QAE5C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAA;IAC/B,CAAC;IAED,kBAAkB;QAChB,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACxE,IAAI,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzD,IAAI,CAAC,4BAA4B,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;QAE/D,IAAI,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAClE,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtF,CAAC;;YAAM,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAEpD,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAC3C,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,sBAAsB,EAAE,CAAA;IAC/B,CAAC;IAED,mBAAmB,CAAC,UAAU;QAC5B,IAAI,WAAW,GAAG,UAAU,GAAG,CAAC,CAAC;QACjC,IAAI,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QAC3C,IAAI,QAAQ,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC;QACpD,IAAI,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC;QACnE,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC,CAAA;IACxF,CAAC;IAED,4BAA4B,CAAC,SAAS,EAAE,mBAAmB;QACzD,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACnC,IAAI,MAAM,GAAG,mBAAmB,CAAC;gBACjC,IAAI,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBAC9C,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;gBAC9E,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;YAChC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,cAAc,CAAC,mBAAmB;QAChC,IAAI,SAAS,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAE3D,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,mBAAmB,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;QAEzH,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QAC/G,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QAE/G,IAAI,CAAC,4BAA4B,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAA;IACnE,CAAC;IAED,kBAAkB,CAAC,CAAC,EAAE,YAAY;QAChC,IAAI,EAAE,GAAG,CAAC,CAAC;QACX,IAAI,OAAO,CAAC,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YACjC,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;QACf,CAAC;QAED,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YAChD,IAAI,MAAM,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YACvC,IAAI,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;YAC7D,UAAU,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAE3D,IAAI,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC;gBACtB,UAAU,GAAG,CAAC,CAAC;YACjB,CAAC;YAED,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;YAC3C,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;QACvC,CAAC;IACH,CAAC;IAED,UAAU,CAAC,UAAU,EAAE,YAAY;QACjC,MAAM,mBAAmB,GAAG,UAAU,CAAC;QACvC,IAAI,SAAS,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC3D,IAAI,UAAU,GAAG,QAAQ,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;QAE1E,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACzB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACzC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;QAEH,IAAI,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;YAC1C,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;YAC/C,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;QAC1D,CAAC;QAED,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAA;QAEpC,SAAS,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEvD,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;YACrB,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAC9E,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QAE7D,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACnE,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACjF,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC9D,CAAC;QAED,IAAI,UAAU,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;YAC1C,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAC9E,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QAE7D,CAAC;aAAM,CAAC;YACN,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACjF,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,2BAA2B;QACzB,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACxE,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,gBAAa,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,WAAW;YAC5E,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,uBAAuB,uBAAuB;gBACzD,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,mEACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,GAAG,EACR,WAAW,EAAC,OAAO,iBACP,OAAO,8BACM,WAAW,EACpC,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,KAAK,mBACE,OAAO,EACrB,KAAK,EAAC,EAAE,uBACU,aAAa,EAC/B,OAAO,EAAC,oJAAoJ,GACjJ,CACT,CACF;YACN,4DAAK,KAAK,EAAC,sBAAsB;gBAC/B,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,4DAAK,KAAK,EAAC,YAAY;wBACrB,wEAAiB,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe,GAAmB;wBACzG,6DACG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC/B,UAAI,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;4BAAE,SAAG,IAAI,EAAE,SAAS,IAAG,IAAI,CAAK,CAAK,CAAC,CAC/F;wBACL,wEAAiB,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,gBAAgB,GAAmB,CACtG,CACF,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\n @Event() ifxPageChange: EventEmitter;\n @Event() ifxNextPage: EventEmitter;\n @Event() ifxPrevPage: EventEmitter;\n @Prop() currentPage: number = 0;\n @State() internalPage: number = 1;\n @State() itemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n\n private CLASS_DISABLED = \"disabled\"\n private CLASS_ACTIVE = \"active\"\n private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n private DATA_KEY = \"pagination\";\n\n @Listen('ifxSelect')\n setItemsPerPage(e) {\n if(e.detail) {\n this.itemsPerPage = parseInt(e.detail.label)\n } else { \n this.itemsPerPage = 10;\n }\n }\n\n componentDidLoad() {\n this.calculateVisiblePageIndices()\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n let leftArrow = paginationElement.querySelector('.prev')\n this.navigateSinglePage(leftArrow, true)\n\n }\n\n calculateNumberOfPages() {\n if (isNaN(this.currentPage)) {\n this.currentPage = 1;\n }\n const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n const itemsPerPage = this.itemsPerPage;\n const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n if (this.currentPage <= 0) {\n this.internalPage = 1;\n } else if (this.currentPage > totalPageNumber) {\n this.internalPage = totalPageNumber;\n } else this.internalPage = this.currentPage;\n\n this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages()\n }\n\n componentDidUpdate() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n var listItems = paginationElement.querySelectorAll(\"li\");\n this.addEventListenersToPageItems(listItems, paginationElement)\n\n if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n this.changePage(paginationElement, false)\n }\n\n componentWillUpdate() {\n this.calculateNumberOfPages()\n }\n\n handleEventEmission(currActive) {\n let currentPage = currActive + 1;\n let totalPages = this.numberOfPages.length;\n let prevPage = currActive === 0 ? null : currActive;\n let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n let itemsPerPage = this.itemsPerPage\n this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n }\n\n addEventListenersToPageItems(listItems, paginationContainer) {\n listItems.forEach((item) => {\n item.addEventListener(\"click\", (e) => {\n var parent = paginationContainer;\n let listItems = parent.querySelectorAll(\"li\");\n parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n this.changePage(parent, false)\n });\n });\n }\n\n initPagination(paginationContainer) {\n var listItems = paginationContainer.querySelectorAll(\"li\");\n\n paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n this.addEventListenersToPageItems(listItems, paginationContainer)\n }\n\n navigateSinglePage(e, initialValue) {\n let el = e;\n if (typeof e.target === 'object') {\n el = e.target\n }\n\n if (!el.classList.contains(this.CLASS_DISABLED)) {\n var parent = el.closest(\".pagination\");\n var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n if (currActive === -1) {\n currActive = 0;\n }\n\n parent.dataset[this.DATA_KEY] = currActive;\n this.changePage(parent, initialValue)\n }\n }\n\n changePage(pagination, initialValue) {\n const paginationContainer = pagination;\n var listItems = paginationContainer.querySelectorAll(\"li\");\n var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n listItems.forEach((item) => {\n item.classList.remove(this.CLASS_ACTIVE);\n item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n });\n\n if (initialValue && this.internalPage > 1) {\n currActive = Math.floor(this.internalPage - 1);\n paginationContainer.dataset[this.DATA_KEY] = currActive;\n }\n\n this.handleEventEmission(currActive)\n\n listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n if (currActive === 0) {\n paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = true;\n\n } else {\n listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = false;\n }\n\n if (currActive === (listItems.length - 1)) {\n paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = true;\n\n } else {\n paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = false;\n }\n }\n\n calculateVisiblePageIndices() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n this.initPagination(paginationElement)\n }\n\n render() {\n return (\n <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n <div class='items__per-page-wrapper'>\n <div class='items__per-page-label'>Results per Page</div>\n <div class='items__per-page-field'>\n <ifx-select\n value='undefined'\n size='s'\n placeholder='false'\n show-search='false'\n search-placeholder-value='Search...'\n disabled={false}\n error={false}\n error-message='Error'\n label=''\n placeholder-value='Placeholder'\n options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\n @Event() ifxPageChange: EventEmitter;\n @Prop() currentPage: number = 0;\n @State() internalPage: number = 1;\n @State() itemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n\n private CLASS_DISABLED = \"disabled\"\n private CLASS_ACTIVE = \"active\"\n private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n private DATA_KEY = \"pagination\";\n\n @Listen('ifxSelect')\n setItemsPerPage(e) {\n if(e.detail) {\n this.itemsPerPage = parseInt(e.detail.label)\n } else { \n this.itemsPerPage = 10;\n }\n }\n\n componentDidLoad() {\n this.calculateVisiblePageIndices()\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n let leftArrow = paginationElement.querySelector('.prev')\n this.navigateSinglePage(leftArrow, true)\n\n }\n\n calculateNumberOfPages() {\n if (isNaN(this.currentPage)) {\n this.currentPage = 1;\n }\n const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n const itemsPerPage = this.itemsPerPage;\n const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n if (this.currentPage <= 0) {\n this.internalPage = 1;\n } else if (this.currentPage > totalPageNumber) {\n this.internalPage = totalPageNumber;\n } else this.internalPage = this.currentPage;\n\n this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages()\n }\n\n componentDidUpdate() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n var listItems = paginationElement.querySelectorAll(\"li\");\n this.addEventListenersToPageItems(listItems, paginationElement)\n\n if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n this.changePage(paginationElement, false)\n }\n\n componentWillUpdate() {\n this.calculateNumberOfPages()\n }\n\n handleEventEmission(currActive) {\n let currentPage = currActive + 1;\n let totalPages = this.numberOfPages.length;\n let prevPage = currActive === 0 ? null : currActive;\n let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n let itemsPerPage = this.itemsPerPage\n this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n }\n\n addEventListenersToPageItems(listItems, paginationContainer) {\n listItems.forEach((item) => {\n item.addEventListener(\"click\", (e) => {\n var parent = paginationContainer;\n let listItems = parent.querySelectorAll(\"li\");\n parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n this.changePage(parent, false)\n });\n });\n }\n\n initPagination(paginationContainer) {\n var listItems = paginationContainer.querySelectorAll(\"li\");\n\n paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n this.addEventListenersToPageItems(listItems, paginationContainer)\n }\n\n navigateSinglePage(e, initialValue) {\n let el = e;\n if (typeof e.target === 'object') {\n el = e.target\n }\n\n if (!el.classList.contains(this.CLASS_DISABLED)) {\n var parent = el.closest(\".pagination\");\n var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n if (currActive === -1) {\n currActive = 0;\n }\n\n parent.dataset[this.DATA_KEY] = currActive;\n this.changePage(parent, initialValue)\n }\n }\n\n changePage(pagination, initialValue) {\n const paginationContainer = pagination;\n var listItems = paginationContainer.querySelectorAll(\"li\");\n var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n listItems.forEach((item) => {\n item.classList.remove(this.CLASS_ACTIVE);\n item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n });\n\n if (initialValue && this.internalPage > 1) {\n currActive = Math.floor(this.internalPage - 1);\n paginationContainer.dataset[this.DATA_KEY] = currActive;\n }\n\n this.handleEventEmission(currActive)\n\n listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n if (currActive === 0) {\n paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = true;\n\n } else {\n listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = false;\n }\n\n if (currActive === (listItems.length - 1)) {\n paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = true;\n\n } else {\n paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = false;\n }\n }\n\n calculateVisiblePageIndices() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n this.initPagination(paginationElement)\n }\n\n render() {\n return (\n <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n <div class='items__per-page-wrapper'>\n <div class='items__per-page-label'>Results per Page</div>\n <div class='items__per-page-field'>\n <ifx-select\n value='undefined'\n size='s'\n placeholder='false'\n show-search='false'\n search-placeholder-value='Search...'\n disabled={false}\n error={false}\n error-message='Error'\n label=''\n placeholder-value='Placeholder'\n options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"]}

package/dist/collection/components/pagination/pagination.stories.js CHANGED Viewed

@@ -7,33 +7,38 @@ export default {
         currentPage: 1,
     },
     argTypes: {
-        ifxPageChange: {
-            action: 'ifxPageChange',
-            description: 'Custom event emitted page is changed',
+        currentPage: {
+            description: 'Current page number.',
             table: {
+                category: 'Ifx-pagination props',
+                defaultValue: {
+                    'summary': '0'
+                },
                 type: {
-                    summary: 'Framework integration',
-                    detail: 'React: onIfxPageChange={handlePageChange}\nVue:@ifxPageChange="handlePageChange"\nAngular:(ifxPageChange)="handlePageChange()"\nVanillaJs:.addEventListener("ifxPageChange", (event) => {//handle page change});',
+                    summary: 'number',
                 },
             },
         },
-        ifxNextPage: {
-            action: 'ifxNextPage',
-            description: 'Custom event emitted when next page button clicked',
+        total: {
+            description: 'Total number of items.',
             table: {
+                category: 'Ifx-pagination props',
+                defaultValue: {
+                    'summary': '1'
+                },
                 type: {
-                    summary: 'Framework integration',
-                    detail: 'React: onIfxNextPage={handlePageChange}\nVue:@ifxNextPage="handlePageChange"\nAngular:(ifxNextPage)="handlePageChange()"\nVanillaJs:.addEventListener("ifxNextPage", (event) => {//handle page change});',
+                    summary: 'number',
                 },
             },
         },
-        ifxPrevPage: {
-            action: 'ifxPrevPage',
-            description: 'Custom event emitted when previous page button clicked',
+        ifxPageChange: {
+            action: 'ifxPageChange',
+            description: 'Custom event emitted when page is changed.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onIfxPrevPage={handlePageChange}\nVue:@ifxPrevPage="handlePageChange"\nAngular:(ifxPrevPage)="handlePageChange()"\nVanillaJs:.addEventListener("ifxPrevPage", (event) => {//handle page change});',
+                    detail: 'React: onIfxPageChange={handlePageChange}\nVue:@ifxPageChange="handlePageChange"\nAngular:(ifxPageChange)="handlePageChange()"\nVanillaJs:.addEventListener("ifxPageChange", (event) => {//handle page change});',
                 },
             },
         },

package/dist/collection/components/pagination/pagination.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,CAAC;KACf;IACD,QAAQ,EAAE;QACR,~~aAAa~~,EAAE;~~YACb~~,~~MAAM~~,EAAE,~~eAAe~~;~~YACvB~~,~~WAAW~~,EAAE,~~sCAAsC~~;~~YACnD~~,~~KAAK~~,EAAE;~~gBACL~~,IAAI,EAAE;oBACJ,OAAO,EAAE,~~uBAAuB~~;~~oBAChC,MAAM,EACJ,kNAAkN~~;~~iBACrN;~~aACF;SACF;~~QACD~~,~~WAAW~~,EAAE;~~YACX~~,~~MAAM~~,EAAE,~~aAAa~~;~~YACrB~~,~~WAAW~~,EAAE,~~oDAAoD~~;~~YACjE~~,~~KAAK~~,EAAE;~~gBACL~~,IAAI,EAAE;oBACJ,OAAO,EAAE,~~uBAAuB~~;~~oBAChC,MAAM,EACJ,0MAA0M~~;~~iBAC7M;~~aACF;SACF;~~QACD~~,~~WAAW~~,EAAE;~~YACX~~,MAAM,EAAE,~~aAAa~~;~~YACrB~~,WAAW,EAAE,~~wDAAwD~~;~~YACrE~~,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,~~0MAA0M~~;~~iBAC7M~~;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACnE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Pagination',\n // tags: ['autodocs'],\n\n args: {\n total: 50,\n currentPage: 1,\n },\n argTypes: {\n ~~ifxPageChange~~: {\n ~~action: 'ifxPageChange',\n~~ description: '~~Custom~~ ~~event emitted~~ page ~~is changed~~',\n table: {\n ~~type~~: {\n summary: '~~Framework integration~~',\n ~~detail:\n 'React~~: ~~onIfxPageChange=~~{~~handlePageChange}\\nVue:@ifxPageChange=\"handlePageChange~~\~~"\\nAngular~~:~~(ifxPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPageChange\",~~ ~~(event) => {//handle page change});~~',\n },\n },\n },\n ~~ifxNextPage~~: {\n ~~action: 'ifxNextPage',\n~~ description: '~~Custom~~ ~~event~~ ~~emitted~~ ~~when next page button clicked~~',\n table: {\n ~~type~~: {\n summary: '~~Framework integration~~',\n ~~detail:\n 'React~~: ~~onIfxNextPage=~~{~~handlePageChange}\\nVue:@ifxNextPage=\"handlePageChange~~\~~"\\nAngular~~:~~(ifxNextPage)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxNextPage\",~~ ~~(event) => {//handle page change});~~',\n },\n },\n },\n ~~ifxPrevPage~~: {\n action: '~~ifxPrevPage~~',\n description: 'Custom event emitted when ~~previous~~ page ~~button~~ ~~clicked~~',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: ~~onIfxPrevPage~~={handlePageChange}\\nVue:@~~ifxPrevPage~~=\"handlePageChange\"\\nAngular:(~~ifxPrevPage~~)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"~~ifxPrevPage~~\", (event) => {//handle page change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const element = document.createElement('ifx-pagination');\n element.setAttribute('total', args.total);\n element.setAttribute('current-page', args.currentPage);\n element.addEventListener('ifxPageChange', action('ifxPageChange'));\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
1	+ {"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,CAAC;KACf;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,KAAK,EAAE;YACL,WAAW,EAAE,wBAAwB;YACrC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,aAAa,EAAE;YACb,MAAM,EAAE,eAAe;YACvB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kNAAkN;iBACrN;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACnE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Pagination',\n // tags: ['autodocs'],\n\n args: {\n total: 50,\n currentPage: 1,\n },\n argTypes: {\n currentPage: {\n description: 'Current page number.',\n table: {\n category: 'Ifx-pagination props',\n defaultValue: {\n 'summary': '0'\n },\n type: {\n summary: 'number',\n },\n },\n },\n\n total: {\n description: 'Total number of items.',\n table: {\n category: 'Ifx-pagination props',\n defaultValue: {\n 'summary': '1'\n },\n type: {\n summary: 'number',\n },\n },\n },\n\n ifxPageChange: {\n action: 'ifxPageChange',\n description: 'Custom event emitted when page is changed.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxPageChange={handlePageChange}\\nVue:@ifxPageChange=\"handlePageChange\"\\nAngular:(ifxPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPageChange\", (event) => {//handle page change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const element = document.createElement('ifx-pagination');\n element.setAttribute('total', args.total);\n element.setAttribute('current-page', args.currentPage);\n element.addEventListener('ifxPageChange', action('ifxPageChange'));\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/progress-bar/progress-bar.stories.js CHANGED Viewed

@@ -3,17 +3,40 @@ export default {
     tags: ['autodocs'],
     args: {
         size: 'm',
-        percentage: 50,
+        value: 50,
         showLabel: false,
     },
     argTypes: {
-        percentage: {
+        value: {
+            description: 'The percentage of the progress bar.',
             control: { type: 'range', min: 0, max: 100 },
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: 50
+                }
+            }
+        },
+        showLabel: {
+            description: 'Shows the percentage of the progress bar. Does not fit in size ***s***.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         size: {
-            description: 'Size options: s (36px) and m (40px) - default: m',
+            description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
     },
 };
@@ -21,7 +44,7 @@ const Template = args => {
     const wrapper = document.createElement('div');
     wrapper.innerHTML = `
     <ifx-progress-bar
-      value="${args.percentage}"
+      value="${args.value}"
       size="${args.size}"
       show-label="${args.showLabel}"
     ></ifx-progress-bar>
@@ -31,17 +54,17 @@ const Template = args => {
 export const Default = Template.bind({});
 Default.args = {
     size: 'm',
-    percentage: 50,
+    value: 50,
     showLabel: false,
 };
 export const Small = Template.bind({});
 Small.args = {
-    percentage: 75,
+    value: 75,
     size: 's',
 };
 export const WithLabel = Template.bind({});
 WithLabel.args = {
-    percentage: 25,
+    value: 25,
     showLabel: true,
 };
 //# sourceMappingURL=progress-bar.stories.js.map

package/dist/collection/components/progress-bar/progress-bar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,~~UAAU~~,EAAE,EAAE;~~QACd~~,SAAS,EAAE,KAAK;KACjB;IACD,QAAQ,EAAE;QACR,~~UAAU~~,EAAE;~~YACV~~,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;~~SAC7C~~;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,~~kDAAkD~~;~~YAC/D~~,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,~~UAAU~~;~~cAChB~~,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;IAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,GAAG;IACT,~~UAAU~~,EAAE,EAAE;~~IACd~~,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,~~UAAU~~,EAAE,EAAE;~~IACd~~,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,~~UAAU~~,EAAE,EAAE;~~IACd~~,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["export default {\n title: 'Components/Progress Bar',\n tags: ['autodocs'],\n\n args: {\n size: 'm',\n ~~percentage~~: 50,\n showLabel: false,\n },\n argTypes: {\n ~~percentage~~: {\n control: { type: 'range', min: 0, max: 100 },\n },\n size: {\n description: '~~Size~~ ~~options~~: s (36px) and m (40px) ~~- default~~: m',\n options: ['s', 'm'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n },\n};\n\nconst Template = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n <ifx-progress-bar\n value=\"${args.~~percentage~~}\"\n size=\"${args.size}\"\n show-label=\"${args.showLabel}\"\n ></ifx-progress-bar>\n `;\n\n return wrapper.innerHTML;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n size: 'm',\n ~~percentage~~: 50,\n showLabel: false,\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n ~~percentage~~: 75,\n size: 's',\n};\n\nexport const WithLabel = Template.bind({});\nWithLabel.args = {\n ~~percentage~~: 25,\n showLabel: true,\n};\n"]}
1	+ {"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,KAAK;KACjB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;YAC5C,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,EAAE;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,yEAAyE;YACtF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;IAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["export default {\n title: 'Components/Progress Bar',\n tags: ['autodocs'],\n\n args: {\n size: 'm',\n value: 50,\n showLabel: false,\n },\n argTypes: {\n value: {\n description: 'The percentage of the progress bar.',\n control: { type: 'range', min: 0, max: 100 },\n table: {\n category: 'ifx-progress-bar props',\n defaultValue: {\n summary: 50\n }\n }\n },\n showLabel: {\n description: 'Shows the percentage of the progress bar. Does not fit in size *s*.',\n control: 'boolean',\n table: {\n category: 'ifx-progress-bar props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',\n control: 'radio',\n options: ['s', 'm'],\n table: {\n category: 'ifx-progress-bar props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n },\n};\n\nconst Template = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n <ifx-progress-bar\n value=\"${args.value}\"\n size=\"${args.size}\"\n show-label=\"${args.showLabel}\"\n ></ifx-progress-bar>\n `;\n\n return wrapper.innerHTML;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n size: 'm',\n value: 50,\n showLabel: false,\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n value: 75,\n size: 's',\n};\n\nexport const WithLabel = Template.bind({});\nWithLabel.args = {\n value: 25,\n showLabel: true,\n};\n"]}

package/dist/collection/components/radio-button/radio-button.stories.js CHANGED Viewed

@@ -3,35 +3,88 @@ export default {
     title: 'Components/Radio Button',
     // tags: ['autodocs'],
     args: {
+        label: 'Text',
         error: false,
         disabled: false,
         checked: false,
         size: 's',
-        label: 'Text',
         name: 'radio-button',
         value: 'radio',
     },
     argTypes: {
-        ifxChange: {
-            description: 'Custom event emitted when radio button checked and unchecked',
+        error: {
+            description: 'Indicates whether the radio button is in an error state.',
+            control: 'boolean',
             table: {
-                type: {
-                    summary: 'Framework integration',
-                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
-                },
-            },
-            action: 'ifxChange',
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the radio button.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        checked: {
+            description: 'Determines whether the radio button is selected by default.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        label: {
+            name: 'Label of Radio Button',
+            description: 'Set the label displayed next to *<ifx-radio-button>*.',
+            table: {
+                category: 'story controls',
+            }
         },
         size: {
-            description: 'Size options: s (20px) and m (24px) - default: s',
+            description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: 's'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-radio-button props'
+            }
         },
         value: {
-            description: 'The value that gets submitted, when the radio button is checked'
+            description: 'The value that gets submitted, when the radio button is checked.',
+            table: {
+                category: 'ifx-radio-button props'
+            }
+        },
+        ifxChange: {
+            description: 'Custom event emitted when radio button checked and unchecked.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
+                },
+            },
+            action: 'ifxChange',
         }
     },
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,GAAG;QACT,~~KAAK,EAAE,MAAM;QACb,~~IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,OAAO;KACf;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;~~YACT~~,WAAW,EAAE,~~8DAA8D~~;~~YAC3E~~,KAAK,EAAE;gBACL,~~IAAI~~,EAAE;~~oBACJ~~,OAAO,EAAE,~~uBAAuB~~;~~oBAChC~~,~~MAAM~~,~~EACJ~~,~~iLAAiL~~;~~iBACpL~~;aACF;~~YAED~~,~~MAAM~~,EAAE,WAAW;~~SACpB~~;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,~~kDAAkD~~;~~YAC/D~~,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,~~OAAO~~,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;~~SACxF~~;QACD,KAAK,EAAE;YACL,WAAW,EAAE,~~iEAAiE~~;~~SAC~~/E;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,kCAAkC;IAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE3D,qBAAqB;IACrB,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1C,+BAA+B;IAC/B,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEzD,yBAAyB;IACzB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,qBAAqB;IACrB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Radio Button',\n // tags: ['autodocs'],\n\n args: {\n error: false,\n disabled: false,\n checked: false,\n size: 's',\n ~~label: 'Text',\n~~ name: 'radio-button',\n value: 'radio',\n },\n argTypes: {\n ~~ifxChange~~: {\n description: '~~Custom~~ ~~event~~ ~~emitted~~ ~~when~~ radio button ~~checked~~ ~~and~~ ~~unchecked~~',\n table: {\n ~~type~~: {\n summary: '~~Framework~~ ~~integration~~',\n ~~detail:\~~n '~~React~~: ~~onIfxChange=~~{~~handleChange}\\nVue:@ifxChange=\"handleChange~~\~~"\\nAngular~~:~~(ifxChange)=\"handleChange()~~\~~"\\nVanillaJs:.addEventListener(~~\~~"ifxChange~~\", ~~(event)~~ => {~~//handle~~ ~~change});~~',\n },\n },\n\n ~~action~~: '~~ifxChange~~',\n },\n size: {\n description: '~~Size~~ ~~options~~: s (20px) and m (24px) ~~- default~~: s',\n options: ['s', 'm'],\n ~~control~~: { ~~type~~: 'radio' },\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.'\n },\n value: {\n description: 'The value that gets submitted, when the radio button is checked'\n }\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the radio button element\n const element = document.createElement('ifx-radio-button');\n\n // Set the attributes\n element.setAttribute('error', args.error);\n element.setAttribute('disabled', args.disabled);\n element.setAttribute('checked', args.checked);\n element.setAttribute('size', args.size);\n element.setAttribute('name', args.name);\n element.setAttribute('value', args.value);\n\n // Add the label as a text node\n element.appendChild(document.createTextNode(args.label));\n\n // Add the event listener\n element.addEventListener('ifxChange', action('ifxChange'));\n\n // Return the element\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Radio Button',\n // tags: ['autodocs'],\n\n args: {\n label: 'Text',\n error: false,\n disabled: false,\n checked: false,\n size: 's',\n name: 'radio-button',\n value: 'radio',\n },\n argTypes: {\n error: {\n description: 'Indicates whether the radio button is in an error state.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n disabled: {\n description: 'Disables the radio button.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n checked: {\n description: 'Determines whether the radio button is selected by default.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n label: {\n name: 'Label of Radio Button',\n description: 'Set the label displayed next to <ifx-radio-button>.',\n table: {\n category: 'story controls',\n }\n },\n size: {\n description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\n control: 'radio',\n options: ['s', 'm'],\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: 's'\n },\n type: {\n summary: 's \| m'\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-radio-button props'\n }\n },\n value: {\n description: 'The value that gets submitted, when the radio button is checked.',\n table: {\n category: 'ifx-radio-button props'\n }\n },\n ifxChange: {\n description: 'Custom event emitted when radio button checked and unchecked.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n\n action: 'ifxChange',\n }\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the radio button element\n const element = document.createElement('ifx-radio-button');\n\n // Set the attributes\n element.setAttribute('error', args.error);\n element.setAttribute('disabled', args.disabled);\n element.setAttribute('checked', args.checked);\n element.setAttribute('size', args.size);\n element.setAttribute('name', args.name);\n element.setAttribute('value', args.value);\n\n // Add the label as a text node\n element.appendChild(document.createTextNode(args.label));\n\n // Add the event listener\n element.addEventListener('ifxChange', action('ifxChange'));\n\n // Return the element\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}