@infineon/infineon-design-system-stencil 30.9.2--canary.1640.c975b901d4687359a30b31a7f68f83e3017eabd6.0 → 30.9.2--canary.1640.e256ac3279c78004e08519f7beeaf135d2602dc6.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 (27) hide show
  1. package/dist/cjs/ifx-sidebar-item.cjs.entry.js +5 -6
  2. package/dist/cjs/ifx-sidebar-item.cjs.entry.js.map +1 -1
  3. package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/collection/components/navigation/sidebar/sidebar-item.js +5 -26
  6. package/dist/collection/components/navigation/sidebar/sidebar-item.js.map +1 -1
  7. package/dist/collection/components/navigation/sidebar/sidebar.stories.js +90 -18
  8. package/dist/collection/components/navigation/sidebar/sidebar.stories.js.map +1 -1
  9. package/dist/collection/components/notification/notification.stories.js +6 -6
  10. package/dist/collection/components/notification/notification.stories.js.map +1 -1
  11. package/dist/components/ifx-sidebar-item.js +5 -7
  12. package/dist/components/ifx-sidebar-item.js.map +1 -1
  13. package/dist/esm/ifx-sidebar-item.entry.js +5 -6
  14. package/dist/esm/ifx-sidebar-item.entry.js.map +1 -1
  15. package/dist/esm/infineon-design-system-stencil.js +1 -1
  16. package/dist/esm/loader.js +1 -1
  17. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  18. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  19. package/dist/infineon-design-system-stencil/p-68752789.entry.js +2 -0
  20. package/dist/infineon-design-system-stencil/p-68752789.entry.js.map +1 -0
  21. package/dist/types/components/navigation/sidebar/sidebar-item.d.ts +0 -1
  22. package/dist/types/components/navigation/sidebar/sidebar.stories.d.ts +69 -0
  23. package/dist/types/components/notification/notification.stories.d.ts +3 -3
  24. package/dist/types/components.d.ts +0 -2
  25. package/package.json +1 -1
  26. package/dist/infineon-design-system-stencil/p-c3e3eda9.entry.js +0 -2
  27. package/dist/infineon-design-system-stencil/p-c3e3eda9.entry.js.map +0 -1
package/dist/collection/components/navigation/sidebar/sidebar.stories.js CHANGED
@@ -13,6 +13,11 @@ export default {
13
13
  imprint: 'https://yourwebsite.com/imprint',
14
14
  privacyPolicy: 'https://yourwebsite.com/privacy-policy',
15
15
  copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,
16
+ numberIndicatorOfSidebarItem: "",
17
+ hrefOfSidebarItem: 'https://google.com',
18
+ targetOfSidebarItem: '_self',
19
+ activeSidebarItem: false,
20
+ isActionItem: false,
16
21
  },
17
22
  argTypes: {
18
23
  applicationName: {
@@ -86,45 +91,112 @@ export default {
86
91
  }
87
92
  }
88
93
  },
94
+ hrefOfSidebarItem: {
95
+ name: 'href',
96
+ description: 'The URL of the sidebar item link.',
97
+ control: 'text',
98
+ table: {
99
+ category: 'ifx-sidebar-item props',
100
+ type: {
101
+ summary: 'string'
102
+ },
103
+ }
104
+ },
105
+ targetOfSidebarItem: {
106
+ name: 'target',
107
+ description: 'The target attribute of the sidebar item link.',
108
+ options: ['_self'],
109
+ control: 'radio',
110
+ table: {
111
+ category: 'ifx-sidebar-item props',
112
+ type: {
113
+ summary: 'string'
114
+ },
115
+ defaultValue: {
116
+ summary: '_self'
117
+ }
118
+ }
119
+ },
120
+ numberIndicatorOfSidebarItem: {
121
+ name: 'numberIndicator',
122
+ description: 'The number indicator to display on the sidebar item.',
123
+ control: 'text',
124
+ table: {
125
+ category: 'ifx-sidebar-item props',
126
+ type: {
127
+ summary: 'string'
128
+ }
129
+ }
130
+ },
131
+ activeSidebarItem: {
132
+ name: 'active',
133
+ description: 'Set to true manually or by clicking on a navigation item.',
134
+ control: 'boolean',
135
+ table: {
136
+ category: 'ifx-sidebar-item props',
137
+ type: {
138
+ summary: 'boolean'
139
+ },
140
+ defaultValue: {
141
+ summary: false
142
+ }
143
+ }
144
+ },
145
+ isActionItem: {
146
+ description: 'If an item is an action item, it can not become active.',
147
+ control: 'boolean',
148
+ table: {
149
+ category: 'ifx-sidebar-item props',
150
+ type: {
151
+ summary: 'boolean'
152
+ },
153
+ defaultValue: {
154
+ summary: false
155
+ },
156
+ }
157
+ },
89
158
  ifxSidebarNavigationItem: {
90
159
  action: 'ifxSidebarNavigationItem',
91
- description: 'Custom event emitted when a navigation item becomes active on selection',
160
+ description: 'Custom event emitted by ifx-sidebar-item when a navigation item becomes active on selection.',
92
161
  table: {
93
162
  category: 'custom events',
94
163
  type: {
95
164
  summary: 'Framework integration',
96
- detail: `React: onIfxSidebarNavigationItem={handleChange}
97
- Vue: @ifxSidebarNavigationItem="handleChange"
98
- Angular: (ifxSidebarNavigationItem)="handleChange()"
99
- VanillaJs: .addEventListener("ifxSidebarNavigationItem", (event) => {/*handle change*/});`
165
+ detail: `
166
+ React: onIfxSidebarNavigationItem={handleChange}
167
+ Vue: @ifxSidebarNavigationItem="handleChange"
168
+ Angular: (ifxSidebarNavigationItem)="handleChange()"
169
+ VanillaJs: .addEventListener("ifxSidebarNavigationItem", (event) => {/*handle change*/});`
100
170
  }
101
171
  }
102
172
  },
103
173
  ifxSidebarActionItem: {
104
174
  action: 'ifxSidebarActionItem',
105
- description: 'Custom event emitted when an action item is selected',
175
+ description: 'Custom event emitted by ifx-sidebar-item when an action item is selected.',
106
176
  table: {
107
177
  category: 'custom events',
108
178
  type: {
109
179
  summary: 'Framework integration',
110
- detail: `React: onIfxSidebarActionItem={handleAction}
111
- Vue: @ifxSidebarActionItem="handleAction"
112
- Angular: (ifxSidebarActionItem)="handleAction()"
113
- VanillaJs: .addEventListener("ifxSidebarActionItem", (event) => {/*handle action*/});`
180
+ detail: `
181
+ React: onIfxSidebarActionItem={handleAction}
182
+ Vue: @ifxSidebarActionItem="handleAction"
183
+ Angular: (ifxSidebarActionItem)="handleAction()"
184
+ VanillaJs: .addEventListener("ifxSidebarActionItem", (event) => {/*handle action*/});`
114
185
  },
115
186
  }
116
187
  },
117
188
  ifxSidebarMenu: {
118
189
  action: 'ifxSidebarMenu',
119
- description: 'Custom event emitted when a menu is expanded or closed',
190
+ description: 'Custom event emitted by ifx-sidebar-item when a menu is expanded or closed.',
120
191
  table: {
121
192
  category: 'custom events',
122
193
  type: {
123
194
  summary: 'Framework integration',
124
- detail: `React: onIfxSidebarMenu={handleMenu}
125
- Vue: @ifxSidebarMenu="handleMenu"
126
- Angular: (ifxSidebarMenu)="handleMenu()"
127
- VanillaJs: .addEventListener("ifxSidebarMenu", (event) => {/*handle menu*/});`
195
+ detail: `
196
+ React: onIfxSidebarMenu={handleMenu}
197
+ Vue: @ifxSidebarMenu="handleMenu"
198
+ Angular: (ifxSidebarMenu)="handleMenu()"
199
+ VanillaJs: .addEventListener("ifxSidebarMenu", (event) => {/*handle menu*/});`
128
200
  },
129
201
  },
130
202
  },
@@ -163,7 +235,7 @@ const DefaultTemplate = args => {
163
235
  <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>
164
236
  </ifx-sidebar-item>
165
237
  <ifx-sidebar-title>Items group</ifx-sidebar-title>
166
- <ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Item 1</ifx-sidebar-item>
238
+ <ifx-sidebar-item href="${args.hrefOfSidebarItem}" target="${args.targetOfSidebarItem}" icon="${args.icon === 'none' ? '' : args.icon}" number-indicator="${args.numberIndicatorOfSidebarItem === "" ? '' : args.numberIndicatorOfSidebarItem}" isActionItem="${args.isActionItem}" active="${args.activeSidebarItem}">Item 1</ifx-sidebar-item>
167
239
  <ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Item 2</ifx-sidebar-item>
168
240
  `;
169
241
  return sidebarElement;
@@ -219,7 +291,7 @@ const NumberIndicatorTemplate = () => `<ifx-sidebar application-name="Applicatio
219
291
  3rd layer Menu Item
220
292
  </ifx-sidebar-item>
221
293
 
222
- <ifx-sidebar-item target="_blank" active="false" icon="image-16" value="thisPage">
294
+ <ifx-sidebar-item target="_blank" active="false" icon="image-16">
223
295
  This Page
224
296
  </ifx-sidebar-item>
225
297
 
@@ -251,7 +323,7 @@ const NumberIndicatorTemplate = () => `<ifx-sidebar application-name="Applicatio
251
323
  <ifx-sidebar-item active="false" is-action-item="false" target="_blank" icon="image-16">
252
324
  Sub Menu Item
253
325
  </ifx-sidebar-item>
254
- <ifx-sidebar-item is-action-item="true" icon="image-16" value="thisPage">
326
+ <ifx-sidebar-item is-action-item="true" icon="image-16">
255
327
  This one too
256
328
  </ifx-sidebar-item>
257
329
  <ifx-sidebar-item is-action-item="false" target="_blank" icon="image-16">
package/dist/collection/components/navigation/sidebar/sidebar.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Navigation/Sidebar',\n // tags: ['autodocs'],\n\n args: {\n icon: 'image-16',\n applicationName: 'Application Name',\n showFooter: true,\n showHeader: true,\n initialCollapse: true,\n termsOfUse: 'https://yourwebsite.com/terms',\n imprint: 'https://yourwebsite.com/imprint',\n privacyPolicy: 'https://yourwebsite.com/privacy-policy',\n copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,\n },\n\n argTypes: {\n applicationName: {\n description: 'The name of the application to display at the top of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n showHeader: {\n description: 'Determines whether the header is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n showFooter: {\n description: 'Determines whether the footer is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n initialCollapse: {\n description: 'Determines if the sidebar should be collapsed by default when it first loads.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n imprint: {\n description: 'The URL link for the \"Imprint\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n termsOfUse: {\n description: 'The URL link for the \"Terms of Use\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n privacyPolicy: {\n description: 'The URL link for the \"Privacy Policy\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n copyrightText: {\n description: 'The copyright text to display at the bottom of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n icon: {\n description: 'The icon to display for the sidebar items. Choose ***none*** to display no icon.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-sidebar-item props',\n defaultValue: {\n summary: 'image-16'\n }\n }\n },\n ifxSidebarNavigationItem: {\n action: 'ifxSidebarNavigationItem',\n description: 'Custom event emitted when a navigation item becomes active on selection',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: \n `React: onIfxSidebarNavigationItem={handleChange}\n Vue: @ifxSidebarNavigationItem=\"handleChange\"\n Angular: (ifxSidebarNavigationItem)=\"handleChange()\"\n VanillaJs: .addEventListener(\"ifxSidebarNavigationItem\", (event) => {/*handle change*/});`\n }\n }\n },\n ifxSidebarActionItem: {\n action: 'ifxSidebarActionItem',\n description: 'Custom event emitted when an action item is selected',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: \n `React: onIfxSidebarActionItem={handleAction}\n Vue: @ifxSidebarActionItem=\"handleAction\"\n Angular: (ifxSidebarActionItem)=\"handleAction()\"\n VanillaJs: .addEventListener(\"ifxSidebarActionItem\", (event) => {/*handle action*/});`\n },\n }\n },\n ifxSidebarMenu: {\n action: 'ifxSidebarMenu',\n description: 'Custom event emitted when a menu is expanded or closed',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: \n `React: onIfxSidebarMenu={handleMenu}\n Vue: @ifxSidebarMenu=\"handleMenu\"\n Angular: (ifxSidebarMenu)=\"handleMenu()\"\n VanillaJs: .addEventListener(\"ifxSidebarMenu\", (event) => {/*handle menu*/});`\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action(`ifxSidebarNavigationItem`));\n sidebarElement.addEventListener('ifxSidebarActionItem', action(`ifxSidebarActionItem`));\n sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));\n\n sidebarElement.setAttribute('show-header', args.showHeader);\n sidebarElement.setAttribute('show-footer', args.showFooter);\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n sidebarElement.setAttribute('terms-of-use', args.termsOfUse);\n sidebarElement.setAttribute('imprint', args.imprint);\n sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);\n sidebarElement.setAttribute('copyright-text', args.copyrightText);\n\n sidebarElement.innerHTML = `\n <ifx-sidebar-title>Menu Items</ifx-sidebar-title>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item>\n Section\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon='image-16'>\n Menu Item\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item active=true>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-title>Items group</ifx-sidebar-title>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Item 1</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Item 2</ifx-sidebar-item>\n `\n return sidebarElement;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\nconst SubmenuTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action('ifxSidebarNavigationItem'));\n sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));\n sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n\n // Create 3 sections\n for (let i = 0; i < 3; i++) {\n const sectionElement = document.createElement('ifx-sidebar-item');\n sectionElement.textContent = `Header Section ${i + 1}`;\n\n // In each section, create 3 menu items\n for (let j = 0; j < 3; j++) {\n const menuItemElement = document.createElement('ifx-sidebar-item');\n menuItemElement.setAttribute('icon', args.icon ? 'image-16' : '');\n menuItemElement.textContent = `Menu Item ${j + 1}`;\n\n // In the first menu item of each section, create 3 submenu items\n if (j === 0) {\n for (let k = 0; k < 3; k++) {\n const subMenuItemElement = document.createElement('ifx-sidebar-item');\n subMenuItemElement.textContent = `Sub Menu Item ${k + 1}`;\n menuItemElement.appendChild(subMenuItemElement);\n }\n }\n\n sectionElement.appendChild(menuItemElement);\n }\n sidebarElement.appendChild(sectionElement);\n }\n const firstSection = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];\n const firstMenuItem = firstSection.querySelectorAll('ifx-sidebar-item')[0];\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('active', 'true'); //first submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('is-action-item', 'false');\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[1].setAttribute('is-action-item', 'true'); //2nd submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[2].setAttribute('is-action-item', 'true'); //3rd sub menu item\n\n return sidebarElement;\n};\n\nexport const WithSubmenu = SubmenuTemplate.bind({});\n\nconst NumberIndicatorTemplate = () =>\n `<ifx-sidebar application-name=\"Application name\">\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"5\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"1\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"23\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item active=\"false\">\n Header Section\n <ifx-sidebar-item icon=\"image-16\" active=\"false\" >\n Second layer\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\" value=\"thisPage\">\n This Page\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n \n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item active=\"false\" is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Sub Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"true\" icon=\"image-16\" value=\"thisPage\">\n This one too\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n</ifx-sidebar>`;\n\nexport const WithNumberIndicator = NumberIndicatorTemplate.bind({});\n"]}
1
+ {"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Navigation/Sidebar',\n // tags: ['autodocs'],\n\n args: {\n icon: 'image-16',\n applicationName: 'Application Name',\n showFooter: true,\n showHeader: true,\n initialCollapse: true,\n termsOfUse: 'https://yourwebsite.com/terms',\n imprint: 'https://yourwebsite.com/imprint',\n privacyPolicy: 'https://yourwebsite.com/privacy-policy',\n copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,\n numberIndicatorOfSidebarItem: \"\",\n hrefOfSidebarItem: 'https://google.com',\n targetOfSidebarItem: '_self',\n activeSidebarItem: false,\n isActionItem: false,\n },\n\n argTypes: {\n applicationName: {\n description: 'The name of the application to display at the top of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n showHeader: {\n description: 'Determines whether the header is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n showFooter: {\n description: 'Determines whether the footer is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n initialCollapse: {\n description: 'Determines if the sidebar should be collapsed by default when it first loads.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n imprint: {\n description: 'The URL link for the \"Imprint\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n termsOfUse: {\n description: 'The URL link for the \"Terms of Use\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n privacyPolicy: {\n description: 'The URL link for the \"Privacy Policy\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n copyrightText: {\n description: 'The copyright text to display at the bottom of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n icon: {\n description: 'The icon to display for the sidebar items. Choose ***none*** to display no icon.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-sidebar-item props',\n defaultValue: {\n summary: 'image-16'\n }\n }\n },\n hrefOfSidebarItem: {\n name: 'href',\n description: 'The URL of the sidebar item link.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n },\n }\n },\n targetOfSidebarItem: {\n name: 'target',\n description: 'The target attribute of the sidebar item link.',\n options: ['_self'],\n control: 'radio',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n },\n defaultValue: {\n summary: '_self'\n }\n }\n },\n numberIndicatorOfSidebarItem: {\n name: 'numberIndicator',\n description: 'The number indicator to display on the sidebar item.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n }\n }\n },\n activeSidebarItem: {\n name: 'active',\n description: 'Set to true manually or by clicking on a navigation item.',\n control: 'boolean',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'boolean'\n },\n defaultValue: {\n summary: false\n }\n }\n },\n isActionItem: {\n description: 'If an item is an action item, it can not become active.',\n control: 'boolean',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'boolean'\n },\n defaultValue: {\n summary: false\n },\n }\n },\n ifxSidebarNavigationItem: {\n action: 'ifxSidebarNavigationItem',\n description: 'Custom event emitted by ifx-sidebar-item when a navigation item becomes active on selection.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarNavigationItem={handleChange}\nVue: @ifxSidebarNavigationItem=\"handleChange\"\nAngular: (ifxSidebarNavigationItem)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxSidebarNavigationItem\", (event) => {/*handle change*/});`\n }\n }\n },\n ifxSidebarActionItem: {\n action: 'ifxSidebarActionItem',\n description: 'Custom event emitted by ifx-sidebar-item when an action item is selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarActionItem={handleAction}\nVue: @ifxSidebarActionItem=\"handleAction\"\nAngular: (ifxSidebarActionItem)=\"handleAction()\"\nVanillaJs: .addEventListener(\"ifxSidebarActionItem\", (event) => {/*handle action*/});`\n },\n }\n },\n ifxSidebarMenu: {\n action: 'ifxSidebarMenu',\n description: 'Custom event emitted by ifx-sidebar-item when a menu is expanded or closed.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarMenu={handleMenu}\nVue: @ifxSidebarMenu=\"handleMenu\"\nAngular: (ifxSidebarMenu)=\"handleMenu()\"\nVanillaJs: .addEventListener(\"ifxSidebarMenu\", (event) => {/*handle menu*/});`\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action(`ifxSidebarNavigationItem`));\n sidebarElement.addEventListener('ifxSidebarActionItem', action(`ifxSidebarActionItem`));\n sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));\n\n sidebarElement.setAttribute('show-header', args.showHeader);\n sidebarElement.setAttribute('show-footer', args.showFooter);\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n sidebarElement.setAttribute('terms-of-use', args.termsOfUse);\n sidebarElement.setAttribute('imprint', args.imprint);\n sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);\n sidebarElement.setAttribute('copyright-text', args.copyrightText);\n\n sidebarElement.innerHTML = `\n <ifx-sidebar-title>Menu Items</ifx-sidebar-title>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item>\n Section\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon='image-16'>\n Menu Item\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item active=true>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-title>Items group</ifx-sidebar-title>\n <ifx-sidebar-item href=\"${args.hrefOfSidebarItem}\" target=\"${args.targetOfSidebarItem}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" number-indicator=\"${args.numberIndicatorOfSidebarItem === \"\" ? '' : args.numberIndicatorOfSidebarItem}\" isActionItem=\"${args.isActionItem}\" active=\"${args.activeSidebarItem}\">Item 1</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Item 2</ifx-sidebar-item>\n `\n return sidebarElement;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\nconst SubmenuTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action('ifxSidebarNavigationItem'));\n sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));\n sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n\n // Create 3 sections\n for (let i = 0; i < 3; i++) {\n const sectionElement = document.createElement('ifx-sidebar-item');\n sectionElement.textContent = `Header Section ${i + 1}`;\n\n // In each section, create 3 menu items\n for (let j = 0; j < 3; j++) {\n const menuItemElement = document.createElement('ifx-sidebar-item');\n menuItemElement.setAttribute('icon', args.icon ? 'image-16' : '');\n menuItemElement.textContent = `Menu Item ${j + 1}`;\n\n // In the first menu item of each section, create 3 submenu items\n if (j === 0) {\n for (let k = 0; k < 3; k++) {\n const subMenuItemElement = document.createElement('ifx-sidebar-item');\n subMenuItemElement.textContent = `Sub Menu Item ${k + 1}`;\n menuItemElement.appendChild(subMenuItemElement);\n }\n }\n\n sectionElement.appendChild(menuItemElement);\n }\n sidebarElement.appendChild(sectionElement);\n }\n const firstSection = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];\n const firstMenuItem = firstSection.querySelectorAll('ifx-sidebar-item')[0];\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('active', 'true'); //first submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('is-action-item', 'false');\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[1].setAttribute('is-action-item', 'true'); //2nd submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[2].setAttribute('is-action-item', 'true'); //3rd sub menu item\n\n return sidebarElement;\n};\n\nexport const WithSubmenu = SubmenuTemplate.bind({});\n\nconst NumberIndicatorTemplate = () =>\n `<ifx-sidebar application-name=\"Application name\">\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"5\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"1\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"23\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item active=\"false\">\n Header Section\n <ifx-sidebar-item icon=\"image-16\" active=\"false\" >\n Second layer\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n This Page\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n \n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item active=\"false\" is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Sub Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"true\" icon=\"image-16\">\n This one too\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n</ifx-sidebar>`;\n\nexport const WithNumberIndicator = NumberIndicatorTemplate.bind({});\n"]}
package/dist/collection/components/notification/notification.stories.js CHANGED
@@ -3,7 +3,7 @@ export default {
3
3
  title: 'Components/Notification',
4
4
  tags: ['autodocs'],
5
5
  args: {
6
- content: "Sample Notification",
6
+ label: "Sample Notification",
7
7
  variant: 'success',
8
8
  icon: 'c-check-16',
9
9
  linkText: 'Link',
@@ -11,13 +11,13 @@ export default {
11
11
  linkTarget: '_blank',
12
12
  },
13
13
  argTypes: {
14
- content: {
15
- name: 'Content',
16
- description: 'Set the text content of the *<ifx-notification>*.',
14
+ label: {
15
+ name: 'Label of Notification',
16
+ description: 'Set the text label of the *<ifx-notification>*.',
17
17
  table: {
18
18
  category: 'story controls',
19
19
  type: {
20
- summary: null
20
+ summary: 'string'
21
21
  }
22
22
  }
23
23
  },
@@ -88,7 +88,7 @@ const DefaultTemplate = args => {
88
88
  link-text="${args.linkText}"
89
89
  link-href="${args.linkHref}"
90
90
  link-target="${args.linkTarget}">
91
- ${args.content}
91
+ ${args.label}
92
92
  </ifx-notification>`;
93
93
  };
94
94
  export const Default = DefaultTemplate.bind({});
package/dist/collection/components/notification/notification.stories.js.map CHANGED
@@ -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,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,IAAI;iBACd;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,OAAO;oBACI,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 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 name: 'Content',\n description: 'Set the text content of the *<ifx-notification>*.',\n table: {\n category: 'story controls',\n type: {\n summary: null\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.content}\n</ifx-notification>`;\n}\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/components/ifx-sidebar-item.js CHANGED
@@ -26,7 +26,6 @@ const SidebarItem = /*@__PURE__*/ proxyCustomElement(class SidebarItem extends H
26
26
  this.active = false;
27
27
  this.isActionItem = false;
28
28
  this.internalActiveState = false;
29
- this.value = "";
30
29
  this.handleItemClick = undefined;
31
30
  }
32
31
  handleActiveChange(newValue, oldValue) {
@@ -255,11 +254,11 @@ const SidebarItem = /*@__PURE__*/ proxyCustomElement(class SidebarItem extends H
255
254
  }
256
255
  render() {
257
256
  var _a, _b;
258
- return (h("div", { key: '03c8e60e4e8ce63615cd5c4f0d54cbcc47d99998' }, h("a", { key: 'c0d56dff397166717925d49593e879f1beb8e2b2', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
259
- h("div", { key: 'ed1f4499796d54626da063fc49655985ffe8d407', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: '44900dc9b7effc98c77730326b161484de3d6436', icon: this.icon })), h("div", { key: '5de25537fb558b01512a7dd002efa57a109a5fa7', class: "sidebar__nav-item-label" }, h("slot", { key: '053de1892d27e6ce01ab8e5f8eb16d7b695b4de3' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
260
- h("div", { key: 'd5c4deb42f7ab7bc915cd428bedf2c81907544a8', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
261
- h("span", { key: 'bc0e3196d081f70d0341fbff92375741708343fb', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: 'e02c07b3fad5dca7392a7161702c6ef7578ae8c1', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
262
- h("span", { key: 'feafb5a73b78bfb04c6951f3d209ed372591909b', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '80828a8d2f66ed0efa4e8eba00a42ffb49cb4dd6' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: 'ca766f86f738918e2556d8069c34c2a08e31e1f9', class: 'expandable__submenu' })));
257
+ return (h("div", { key: 'f694b74b5953639d0e1d1cc375d5e88ae53265f7' }, h("a", { key: 'afcbab9a39bb119dc0a8f4a346793ca63fb9742e', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
258
+ h("div", { key: '050d6035ebdd5c901d5fa1b1040de0e7f9f9d407', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: 'b1f21d286c355632fef8d066d2ac1c1e351d2650', icon: this.icon })), h("div", { key: 'a0ffe6926fb340e965c7e95f7e3f4eff104a372b', class: "sidebar__nav-item-label" }, h("slot", { key: '624ee2b5d9e67fe2a7357cde95a07529f335b80c' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
259
+ h("div", { key: '85bd348a39ab4e6cbdf41957339b98462adfa3cc', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
260
+ h("span", { key: '62bc4ba74b14283331328aee22066b7d67dcf579', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: '2c8c0010782627007f2b2d133337d87bb15f1358', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
261
+ h("span", { key: 'd0b2640bdfc164e53c574e9ade8b27c9f61a04f9', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '212760cd2ce36c17236ce3f1bdbdc7632182c6d3' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: 'cc729ba4945309755b2ab430c9cbd85f722017df', class: 'expandable__submenu' })));
263
262
  }
264
263
  get el() { return this; }
265
264
  static get watchers() { return {
@@ -273,7 +272,6 @@ const SidebarItem = /*@__PURE__*/ proxyCustomElement(class SidebarItem extends H
273
272
  "numberIndicator": [1, "number-indicator"],
274
273
  "active": [4],
275
274
  "isActionItem": [4, "is-action-item"],
276
- "value": [1],
277
275
  "handleItemClick": [16],
278
276
  "showIcon": [32],
279
277
  "showIconWrapper": [32],
package/dist/components/ifx-sidebar-item.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-sidebar-item.js","mappings":"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","names":[],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() showIcon: boolean = true;\n @State() showIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.showIcon = false;\n } else {\n this.showIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ifx-sidebar-item.js","mappings":"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","names":[],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() showIcon: boolean = true;\n @State() showIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.showIcon = false;\n } else {\n this.showIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"version":3}
package/dist/esm/ifx-sidebar-item.entry.js CHANGED
@@ -22,7 +22,6 @@ const SidebarItem = class {
22
22
  this.active = false;
23
23
  this.isActionItem = false;
24
24
  this.internalActiveState = false;
25
- this.value = "";
26
25
  this.handleItemClick = undefined;
27
26
  }
28
27
  handleActiveChange(newValue, oldValue) {
@@ -251,11 +250,11 @@ const SidebarItem = class {
251
250
  }
252
251
  render() {
253
252
  var _a, _b;
254
- return (h("div", { key: '03c8e60e4e8ce63615cd5c4f0d54cbcc47d99998' }, h("a", { key: 'c0d56dff397166717925d49593e879f1beb8e2b2', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
255
- h("div", { key: 'ed1f4499796d54626da063fc49655985ffe8d407', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: '44900dc9b7effc98c77730326b161484de3d6436', icon: this.icon })), h("div", { key: '5de25537fb558b01512a7dd002efa57a109a5fa7', class: "sidebar__nav-item-label" }, h("slot", { key: '053de1892d27e6ce01ab8e5f8eb16d7b695b4de3' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
256
- h("div", { key: 'd5c4deb42f7ab7bc915cd428bedf2c81907544a8', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
257
- h("span", { key: 'bc0e3196d081f70d0341fbff92375741708343fb', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: 'e02c07b3fad5dca7392a7161702c6ef7578ae8c1', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
258
- h("span", { key: 'feafb5a73b78bfb04c6951f3d209ed372591909b', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '80828a8d2f66ed0efa4e8eba00a42ffb49cb4dd6' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: 'ca766f86f738918e2556d8069c34c2a08e31e1f9', class: 'expandable__submenu' })));
253
+ return (h("div", { key: 'f694b74b5953639d0e1d1cc375d5e88ae53265f7' }, h("a", { key: 'afcbab9a39bb119dc0a8f4a346793ca63fb9742e', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
254
+ h("div", { key: '050d6035ebdd5c901d5fa1b1040de0e7f9f9d407', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: 'b1f21d286c355632fef8d066d2ac1c1e351d2650', icon: this.icon })), h("div", { key: 'a0ffe6926fb340e965c7e95f7e3f4eff104a372b', class: "sidebar__nav-item-label" }, h("slot", { key: '624ee2b5d9e67fe2a7357cde95a07529f335b80c' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
255
+ h("div", { key: '85bd348a39ab4e6cbdf41957339b98462adfa3cc', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
256
+ h("span", { key: '62bc4ba74b14283331328aee22066b7d67dcf579', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: '2c8c0010782627007f2b2d133337d87bb15f1358', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
257
+ h("span", { key: 'd0b2640bdfc164e53c574e9ade8b27c9f61a04f9', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '212760cd2ce36c17236ce3f1bdbdc7632182c6d3' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: 'cc729ba4945309755b2ab430c9cbd85f722017df', class: 'expandable__submenu' })));
259
258
  }
260
259
  get el() { return getElement(this); }
261
260
  static get watchers() { return {