@infineon/infineon-design-system-stencil 30.9.2--canary.1640.8926aa040c1241b80b9d12b6600d721691845221.0 → 30.9.2--canary.1640.70fa3eaef8e23b3cce71878a1e99bd63e614a640.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.
- package/dist/cjs/ifx-accordion_2.cjs.entry.js +6 -6
- package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js +2 -2
- package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-breadcrumb.cjs.entry.js +3 -3
- package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-chip_3.cjs.entry.js +18 -18
- package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js +5 -6
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +2 -2
- package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/accordion/accordion.js +2 -2
- package/dist/collection/components/accordion/accordion.js.map +1 -1
- package/dist/collection/components/accordion/accordion.stories.js +18 -18
- package/dist/collection/components/accordion/accordion.stories.js.map +1 -1
- package/dist/collection/components/accordion/accordionItem.js +7 -7
- package/dist/collection/components/accordion/accordionItem.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb-item-label.js +4 -4
- package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +3 -3
- package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js +29 -14
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map +1 -1
- package/dist/collection/components/button/button.stories.js +1 -4
- package/dist/collection/components/button/button.stories.js.map +1 -1
- package/dist/collection/components/card/card.stories.js +9 -11
- package/dist/collection/components/card/card.stories.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.stories.js +1 -4
- package/dist/collection/components/checkbox/checkbox.stories.js.map +1 -1
- package/dist/collection/components/chip/chip-item/chip-item.js +4 -4
- package/dist/collection/components/chip/chip-item/chip-item.js.map +1 -1
- package/dist/collection/components/chip/chip.js +15 -15
- package/dist/collection/components/chip/chip.js.map +1 -1
- package/dist/collection/components/chip/chip.stories.js +18 -26
- package/dist/collection/components/chip/chip.stories.js.map +1 -1
- package/dist/collection/components/chip/interfaces.js.map +1 -1
- package/dist/collection/components/content-switcher/content-switcher.stories.js +2 -2
- package/dist/collection/components/content-switcher/content-switcher.stories.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.stories.js +22 -1
- package/dist/collection/components/date-picker/date-picker.stories.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.stories.js +100 -39
- package/dist/collection/components/dropdown/dropdown.stories.js.map +1 -1
- package/dist/collection/components/link/link.stories.js +1 -4
- package/dist/collection/components/link/link.stories.js.map +1 -1
- package/dist/collection/components/navigation/navbar/navbar.stories.js +5 -32
- package/dist/collection/components/navigation/navbar/navbar.stories.js.map +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar-item.js +5 -26
- package/dist/collection/components/navigation/sidebar/sidebar-item.js.map +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar.stories.js +90 -18
- package/dist/collection/components/navigation/sidebar/sidebar.stories.js.map +1 -1
- package/dist/collection/components/notification/notification.stories.js +1 -1
- package/dist/collection/components/notification/notification.stories.js.map +1 -1
- package/dist/collection/components/number-indicator/number-indicator.stories.js +1 -1
- package/dist/collection/components/number-indicator/number-indicator.stories.js.map +1 -1
- package/dist/collection/components/radio-button/radio-button.stories.js +1 -1
- package/dist/collection/components/radio-button/radio-button.stories.js.map +1 -1
- package/dist/collection/components/segmented-control/segmented-control.stories.js +0 -3
- package/dist/collection/components/segmented-control/segmented-control.stories.js.map +1 -1
- package/dist/collection/components/status/status.stories.js +1 -1
- package/dist/collection/components/status/status.stories.js.map +1 -1
- package/dist/collection/components/switch/switch.stories.js +2 -5
- package/dist/collection/components/switch/switch.stories.js.map +1 -1
- package/dist/collection/components/table-advanced-version/table.js +3 -3
- package/dist/collection/components/table-advanced-version/table.js.map +1 -1
- package/dist/collection/components/tag/tag.stories.js +2 -2
- package/dist/collection/components/tag/tag.stories.js.map +1 -1
- package/dist/collection/components/text-field/text-field.stories.js +1 -1
- package/dist/collection/components/text-field/text-field.stories.js.map +1 -1
- package/dist/components/ifx-accordion-item.js +1 -1
- package/dist/components/ifx-accordion.js +1 -1
- package/dist/components/ifx-breadcrumb-item-label.js +3 -3
- package/dist/components/ifx-breadcrumb-item-label.js.map +1 -1
- package/dist/components/ifx-breadcrumb.js +3 -3
- package/dist/components/ifx-breadcrumb.js.map +1 -1
- package/dist/components/ifx-chip-item.js +1 -1
- package/dist/components/ifx-chip.js +1 -1
- package/dist/components/ifx-faq.js +2 -2
- package/dist/components/ifx-sidebar-item.js +5 -7
- package/dist/components/ifx-sidebar-item.js.map +1 -1
- package/dist/components/ifx-table.js +5 -5
- package/dist/components/ifx-table.js.map +1 -1
- package/dist/components/{p-62c6aeb2.js → p-053d42ef.js} +6 -6
- package/dist/components/{p-62c6aeb2.js.map → p-053d42ef.js.map} +1 -1
- package/dist/components/{p-094bb435.js → p-3baaa460.js} +3 -3
- package/dist/components/{p-094bb435.js.map → p-3baaa460.js.map} +1 -1
- package/dist/components/{p-184f1004.js → p-793d89e7.js} +15 -15
- package/dist/components/p-793d89e7.js.map +1 -0
- package/dist/components/{p-23cdd5a7.js → p-7b5e297f.js} +5 -5
- package/dist/components/p-7b5e297f.js.map +1 -0
- package/dist/esm/ifx-accordion_2.entry.js +6 -6
- package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
- package/dist/esm/ifx-breadcrumb-item-label.entry.js +2 -2
- package/dist/esm/ifx-breadcrumb-item-label.entry.js.map +1 -1
- package/dist/esm/ifx-breadcrumb.entry.js +3 -3
- package/dist/esm/ifx-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ifx-chip_3.entry.js +18 -18
- package/dist/esm/ifx-chip_3.entry.js.map +1 -1
- package/dist/esm/ifx-sidebar-item.entry.js +5 -6
- package/dist/esm/ifx-sidebar-item.entry.js.map +1 -1
- package/dist/esm/ifx-table.entry.js +2 -2
- package/dist/esm/ifx-table.entry.js.map +1 -1
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/{p-00d6e46e.entry.js → p-26810237.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-26810237.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-26df4dfe.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-28fb795b.entry.js.map → p-26df4dfe.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/p-355cea09.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-355cea09.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-68752789.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-68752789.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-9f6c1499.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-9f6c1499.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-df6cadc1.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-df6cadc1.entry.js.map +1 -0
- package/dist/types/components/accordion/accordion.stories.d.ts +2 -2
- package/dist/types/components/accordion/accordionItem.d.ts +2 -2
- package/dist/types/components/breadcrumb/breadcrumb-item-label.d.ts +1 -1
- package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +19 -2
- package/dist/types/components/button/button.stories.d.ts +0 -3
- package/dist/types/components/card/card.stories.d.ts +10 -10
- package/dist/types/components/checkbox/checkbox.stories.d.ts +0 -3
- package/dist/types/components/chip/chip-item/chip-item.d.ts +1 -1
- package/dist/types/components/chip/chip.d.ts +1 -1
- package/dist/types/components/chip/chip.stories.d.ts +11 -4
- package/dist/types/components/chip/interfaces.d.ts +1 -1
- package/dist/types/components/date-picker/date-picker.stories.d.ts +21 -0
- package/dist/types/components/dropdown/dropdown.stories.d.ts +3 -30
- package/dist/types/components/link/link.stories.d.ts +0 -3
- package/dist/types/components/navigation/navbar/navbar.stories.d.ts +1 -22
- package/dist/types/components/navigation/sidebar/sidebar-item.d.ts +0 -1
- package/dist/types/components/navigation/sidebar/sidebar.stories.d.ts +69 -0
- package/dist/types/components/segmented-control/segmented-control.stories.d.ts +0 -3
- package/dist/types/components/switch/switch.stories.d.ts +0 -3
- package/dist/types/components.d.ts +8 -10
- package/package.json +1 -1
- package/dist/components/p-184f1004.js.map +0 -1
- package/dist/components/p-23cdd5a7.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-00d6e46e.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-28fb795b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-72d804fb.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-72d804fb.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-7bef9272.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-7bef9272.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c3e3eda9.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c3e3eda9.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-dac5d6d5.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-dac5d6d5.entry.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"navbar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/navbar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nexport default {\n title: 'Components/Navigation/Navbar',\n args: {\n profileLabel: \"\",\n applicationName: 'Application name',\n showLabelOfNavbarItem: true,\n targetOfnavbarItem: '_self',\n hrefOfNavbarItem: '',\n searchBarIsOpen: false,\n navbarPositionFixed: false,\n showLogoAndAppname: true,\n logoHref: 'http://google.com',\n logoHrefTarget: '_self',\n searchBarPosition: 'left',\n hideOnMobile: true,\n profileImageUrl: \"\",\n userName: \"\",\n showNavbarProfileLabel: true,\n href: \"http://google.com\",\n target: \"_self\",\n alt: \"profile image\",\n },\n argTypes: {\n profileLabel: {\n name: 'Label',\n control: { type: 'text' },\n description: 'Label for the profile.',\n table: {\n category: 'story controls',\n },\n },\n applicationName: {\n control: { type: 'text' },\n description: 'The name of the application.',\n table: {\n category: 'ifx-navbar props',\n },\n },\n navbarPositionFixed: {\n name: 'fixed',\n control: { type: 'boolean' },\n description: 'Fix the navbar to the top of the page.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar props',\n },\n },\n showLogoAndAppname: {\n control: { type: 'boolean' },\n description: 'Show the logo and application name.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar props',\n },\n },\n logoHref: {\n control: { type: 'text' },\n description: 'The URL of the logo link.',\n table: {\n category: 'ifx-navbar props',\n },\n },\n logoHrefTarget: {\n description: 'The target of the logo link.',\n options: ['_self', '_blank', '_parent'],\n control: { type: 'radio' },\n table: {\n defaultValue: { summary: '_self' },\n category: 'ifx-navbar props',\n type: {\n summary: '_self | _blank | _parent',\n },\n },\n },\n showLabelOfNavbarItem: {\n name: 'showLabel',\n control: { type: 'boolean' },\n description: 'Show the label of the navbar item.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar-item props',\n },\n },\n iconOfNavbarItem: {\n name: 'icon',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n description: 'The icon to display in the navbar item.',\n table: {\n category: 'ifx-navbar-item props',\n type: {\n summary: 'string',\n },\n },\n },\n hrefOfNavbarItem: {\n name: 'href',\n control: { type: 'text' },\n description: 'The URL of the navbar item link.',\n table: {\n category: 'ifx-navbar-item props',\n },\n },\n\n targetOfnavbarItem: {\n name: 'target',\n control: { type: 'radio' },\n options: ['_self'],\n description: 'The target of the navbar item link.',\n table: {\n defaultValue: { summary: '_self' },\n category: 'ifx-navbar-item props',\n type: {\n summary: '_self',\n },\n },\n },\n hideOnMobile: {\n control: { type: 'boolean' },\n description: 'Hide the navbar item on mobile.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar-item props',\n },\n },\n showNavbarProfileLabel: {\n name: 'showLabel',\n control: { type: 'boolean' },\n description: 'Show label for the profile.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar-profile props',\n },\n },\n href: {\n control: { type: 'text' },\n description: 'The URL of the profile link.',\n table: {\n category: 'ifx-navbar-profile props',\n },\n },\n profileImageUrl: {\n name: 'imageUrl',\n control: { type: 'text' },\n description: 'The URL of the image.',\n table: {\n category: 'ifx-navbar-profile props',\n },\n },\n target: {\n control: { type: 'radio' },\n options: ['_self', '_blank', '_parent'],\n description: 'The target of the link.',\n table: {\n defaultValue: { summary: '_self' },\n category: 'ifx-navbar-profile props',\n type: {\n summary: '_self | _blank | _parent',\n },\n },\n },\n alt: {\n control: { type: 'text' },\n description: 'The alternative text of the image.',\n table: {\n category: 'ifx-navbar-profile props',\n },\n },\n userName: {\n control: { type: 'text' },\n description: 'The name of the user.',\n table: {\n category: 'ifx-navbar-profile props',\n },\n },\n searchBarIsOpen: {\n name: 'isOpen',\n control: { type: 'boolean' },\n description: 'Show the search bar.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-search-bar props',\n },\n },\n searchBarPosition: {\n description: 'The position of the search bar.',\n options: ['left', 'right'],\n control: { type: 'radio' },\n table: {\n defaultValue: { summary: 'left' },\n category: 'ifx-search-bar props',\n type: {\n summary: 'left | right',\n },\n },\n },\n ifxNavbarMobileMenuIsOpen: {\n action: 'ifxNavbarMobileMenuIsOpen',\n description: 'Event emitted when the mobile menu is opened.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `React: onifxNavbarMobileMenuIsOpen={handleOpen} \n Vue: @ifxNavbarMobileMenuIsOpen=\"handleOpen\" \n Angular: (ifxNavbarMobileMenuIsOpen)=\"handleOpen()\" \n VanillaJs: .addEventListener(\"ifxNavbarMobileMenuIsOpen\", (event) => {/*handle open*/});`\n },\n },\n },\n ifxNavItem: {\n action: 'ifxNavItem',\n description: 'Event emitted when a navbar item is clicked.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `React: onifxNavItem={handleClick}\n Vue: @ifxNavItem=\"handleClick\" \n Angular: (ifxNavItem)=\"handleClick()\"\n VanillaJs: .addEventListener(\"ifxNavItem\", (event) => {/*handle click*/});`},\n },\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-navbar show-logo-and-appname=\"${args.showLogoAndAppname}\" application-name=\"${args.applicationName}\" fixed=\"${args.navbarPositionFixed}\" logo-href=\"${args.logoHref}\" logo-href-target=\"${args.logoHrefTarget}\">\n <ifx-navbar-item icon=\"${args.iconOfNavbarItem}\" slot=\"left-item\" target=\"${args.targetOfnavbarItem}\" href=\"${args.hrefOfNavbarItem}\" hide-on-mobile=\"${args.hideOnMobile}\">\n Menu Item\n <ifx-navbar-item icon=\"\">\n Layer 1 Nested Item 1\n <ifx-navbar-item>\n Layer 2 Nested Item 2\n <ifx-navbar-item href=\"http://google.com\" target=\"_blank\">Link Layer 3 Nested Item 1</ifx-navbar-item>\n <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>\n <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>\n <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>\n </ifx-navbar-item>\n <ifx-navbar-item >Layer 2 Nested Item 3</ifx-navbar-item>\n <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>\n <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>\n </ifx-navbar-item>\n\n <ifx-navbar-item>\n Layer 1 Nested Item 2\n <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>\n <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>\n <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>\n </ifx-navbar-item>\n\n <ifx-navbar-item>Nested Item 3</ifx-navbar-item>\n\n <ifx-navbar-item>\n Layer 1 Nested Item 4\n <ifx-navbar-item>Nested Item 4</ifx-navbar-item>\n </ifx-navbar-item>\n\n </ifx-navbar-item>\n\n <ifx-navbar-item href=\"${args.hrefOfNavbarItem}\" target=\"_self\" slot=\"left-item\" icon=\"\" show-label=\"${args.showLabelOfNavbarItem}\">\n Menu Item\n </ifx-navbar-item>\n\n <ifx-navbar-item slot=\"left-item\">\n More\n <ifx-navbar-item>Item1</ifx-navbar-item>\n <ifx-navbar-item>Item2</ifx-navbar-item>\n </ifx-navbar-item>\n\n <ifx-search-bar slot=\"search-bar-${args.searchBarPosition}\" is-open=\"${args.searchBarIsOpen}\"></ifx-search-bar>\n\n <ifx-navbar-item slot=\"right-item\" target=\"_blank\" href=\"http://google.com\" hide-on-mobile=\"${args.hideOnMobile}\" show-label=\"true\" icon=\"image-16\">\n </ifx-navbar-item>\n <ifx-navbar-item slot=\"right-item\" hide-on-mobile=\"true\" show-label='false' icon=\"image-16\">\n </ifx-navbar-item>\n\n <ifx-navbar-profile user-name=\"${args.userName}\" slot=\"right-item\" image-url=\"${args.profileImageUrl}\" show-label=\"${args.showNavbarProfileLabel}\" href=\"\" target=\"${args.target}\" alt=\"${args.alt}\">${args.profileLabel}</ifx-navbar-profile>\n</ifx-navbar>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
|
1
|
+
{"version":3,"file":"navbar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/navbar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nexport default {\n title: 'Components/Navigation/Navbar',\n args: {\n profileLabel: \"\",\n applicationName: 'Application name',\n showLabelOfNavbarItem: true,\n targetOfnavbarItem: '_self',\n hrefOfNavbarItem: '',\n searchBarIsOpen: false,\n navbarPositionFixed: false,\n showLogoAndAppname: true,\n logoHref: 'http://google.com',\n logoHrefTarget: '_self',\n searchBarPosition: 'left',\n hideOnMobile: true,\n profileImageUrl: \"\",\n userName: \"\",\n showNavbarProfileLabel: true,\n href: \"http://google.com\",\n target: \"_self\",\n alt: \"profile image\",\n },\n argTypes: {\n profileLabel: {\n name: 'Label of Profile',\n control: { type: 'text' },\n description: 'Set the label of *<ifx-navbar-profile>*.',\n table: {\n category: 'story controls',\n },\n },\n applicationName: {\n control: { type: 'text' },\n description: 'The name of the application.',\n table: {\n category: 'ifx-navbar props',\n },\n },\n navbarPositionFixed: {\n name: 'fixed',\n control: { type: 'boolean' },\n description: 'Fix the navbar to the top of the page.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar props',\n },\n },\n showLogoAndAppname: {\n control: { type: 'boolean' },\n description: 'Show the logo and application name.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar props',\n },\n },\n logoHref: {\n control: { type: 'text' },\n description: 'The URL of the logo link.',\n table: {\n category: 'ifx-navbar props',\n },\n },\n logoHrefTarget: {\n description: 'The target of the logo link.',\n options: ['_self', '_blank', '_parent'],\n control: { type: 'radio' },\n table: {\n defaultValue: { summary: '_self' },\n category: 'ifx-navbar props',\n type: {\n summary: '_self | _blank | _parent',\n },\n },\n },\n showLabelOfNavbarItem: {\n name: 'showLabel',\n control: { type: 'boolean' },\n description: 'Show the label of the navbar item.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar-item props',\n },\n },\n iconOfNavbarItem: {\n name: 'icon',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n description: 'The icon to display in the navbar item.',\n table: {\n category: 'ifx-navbar-item props',\n type: {\n summary: 'string',\n },\n },\n },\n hrefOfNavbarItem: {\n name: 'href',\n control: { type: 'text' },\n description: 'The URL of the navbar item link.',\n table: {\n category: 'ifx-navbar-item props',\n },\n },\n\n targetOfnavbarItem: {\n name: 'target',\n control: { type: 'radio' },\n options: ['_self'],\n description: 'The target of the navbar item link.',\n table: {\n defaultValue: { summary: '_self' },\n category: 'ifx-navbar-item props',\n type: {\n summary: '_self',\n },\n },\n },\n hideOnMobile: {\n control: { type: 'boolean' },\n description: 'Hide the navbar item on mobile.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar-item props',\n },\n },\n showNavbarProfileLabel: {\n name: 'showLabel',\n control: { type: 'boolean' },\n description: 'Show label for the profile.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-navbar-profile props',\n },\n },\n href: {\n control: { type: 'text' },\n description: 'The URL of the profile link.',\n table: {\n category: 'ifx-navbar-profile props',\n },\n },\n profileImageUrl: {\n name: 'imageUrl',\n control: { type: 'text' },\n description: 'The URL of the image.',\n table: {\n category: 'ifx-navbar-profile props',\n },\n },\n target: {\n control: { type: 'radio' },\n options: ['_self', '_blank', '_parent'],\n description: 'The target of the link.',\n table: {\n defaultValue: { summary: '_self' },\n category: 'ifx-navbar-profile props',\n type: {\n summary: '_self | _blank | _parent',\n },\n },\n },\n alt: {\n control: { type: 'text' },\n description: 'The alternative text of the image.',\n table: {\n category: 'ifx-navbar-profile props',\n },\n },\n userName: {\n control: { type: 'text' },\n description: 'The name of the user.',\n table: {\n category: 'ifx-navbar-profile props',\n },\n },\n searchBarIsOpen: {\n name: 'isOpen',\n control: { type: 'boolean' },\n description: 'Show the search bar.',\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-search-bar props',\n },\n },\n searchBarPosition: {\n name: 'search-bar-',\n description: 'The position of the search-bar within the Navbar as specified in the slot name.',\n options: ['left', 'right'],\n control: { type: 'radio' },\n table: {\n defaultValue: { summary: 'left' },\n category: 'ifx-search-bar-slot',\n type: {\n summary: 'left | right',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-navbar show-logo-and-appname=\"${args.showLogoAndAppname}\" application-name=\"${args.applicationName}\" fixed=\"${args.navbarPositionFixed}\" logo-href=\"${args.logoHref}\" logo-href-target=\"${args.logoHrefTarget}\">\n <ifx-navbar-item icon=\"${args.iconOfNavbarItem}\" slot=\"left-item\" target=\"${args.targetOfnavbarItem}\" href=\"${args.hrefOfNavbarItem}\" hide-on-mobile=\"${args.hideOnMobile}\">\n Menu Item\n <ifx-navbar-item icon=\"\">\n Layer 1 Nested Item 1\n <ifx-navbar-item>\n Layer 2 Nested Item 2\n <ifx-navbar-item href=\"http://google.com\" target=\"_blank\">Link Layer 3 Nested Item 1</ifx-navbar-item>\n <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>\n <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>\n <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>\n </ifx-navbar-item>\n <ifx-navbar-item >Layer 2 Nested Item 3</ifx-navbar-item>\n <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>\n <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>\n </ifx-navbar-item>\n\n <ifx-navbar-item>\n Layer 1 Nested Item 2\n <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>\n <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>\n <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>\n </ifx-navbar-item>\n\n <ifx-navbar-item>Nested Item 3</ifx-navbar-item>\n\n <ifx-navbar-item>\n Layer 1 Nested Item 4\n <ifx-navbar-item>Nested Item 4</ifx-navbar-item>\n </ifx-navbar-item>\n\n </ifx-navbar-item>\n\n <ifx-navbar-item href=\"${args.hrefOfNavbarItem}\" target=\"_self\" slot=\"left-item\" icon=\"\" show-label=\"${args.showLabelOfNavbarItem}\">\n Menu Item\n </ifx-navbar-item>\n\n <ifx-navbar-item slot=\"left-item\">\n More\n <ifx-navbar-item>Item1</ifx-navbar-item>\n <ifx-navbar-item>Item2</ifx-navbar-item>\n </ifx-navbar-item>\n\n <ifx-search-bar slot=\"search-bar-${args.searchBarPosition}\" is-open=\"${args.searchBarIsOpen}\"></ifx-search-bar>\n\n <ifx-navbar-item slot=\"right-item\" target=\"_blank\" href=\"http://google.com\" hide-on-mobile=\"${args.hideOnMobile}\" show-label=\"true\" icon=\"image-16\">\n </ifx-navbar-item>\n <ifx-navbar-item slot=\"right-item\" hide-on-mobile=\"true\" show-label='false' icon=\"image-16\">\n </ifx-navbar-item>\n\n <ifx-navbar-profile user-name=\"${args.userName}\" slot=\"right-item\" image-url=\"${args.profileImageUrl}\" show-label=\"${args.showNavbarProfileLabel}\" href=\"\" target=\"${args.target}\" alt=\"${args.alt}\">${args.profileLabel}</ifx-navbar-profile>\n</ifx-navbar>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
|
@@ -14,7 +14,6 @@ export class SidebarItem {
|
|
14
14
|
this.active = false;
|
15
15
|
this.isActionItem = false;
|
16
16
|
this.internalActiveState = false;
|
17
|
-
this.value = "";
|
18
17
|
this.handleItemClick = undefined;
|
19
18
|
}
|
20
19
|
handleActiveChange(newValue, oldValue) {
|
@@ -243,11 +242,11 @@ export class SidebarItem {
|
|
243
242
|
}
|
244
243
|
render() {
|
245
244
|
var _a, _b;
|
246
|
-
return (h("div", { key: '
|
247
|
-
h("div", { key: '
|
248
|
-
h("div", { key: '
|
249
|
-
h("span", { key: '
|
250
|
-
h("span", { key: '
|
245
|
+
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 &&
|
246
|
+
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())) &&
|
247
|
+
h("div", { key: '85bd348a39ab4e6cbdf41957339b98462adfa3cc', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
|
248
|
+
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 &&
|
249
|
+
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' })));
|
251
250
|
}
|
252
251
|
static get is() { return "ifx-sidebar-item"; }
|
253
252
|
static get encapsulation() { return "shadow"; }
|
@@ -382,26 +381,6 @@ export class SidebarItem {
|
|
382
381
|
"reflect": false,
|
383
382
|
"defaultValue": "false"
|
384
383
|
},
|
385
|
-
"value": {
|
386
|
-
"type": "string",
|
387
|
-
"mutable": false,
|
388
|
-
"complexType": {
|
389
|
-
"original": "string",
|
390
|
-
"resolved": "string",
|
391
|
-
"references": {}
|
392
|
-
},
|
393
|
-
"required": false,
|
394
|
-
"optional": false,
|
395
|
-
"docs": {
|
396
|
-
"tags": [],
|
397
|
-
"text": ""
|
398
|
-
},
|
399
|
-
"getter": false,
|
400
|
-
"setter": false,
|
401
|
-
"attribute": "value",
|
402
|
-
"reflect": false,
|
403
|
-
"defaultValue": "\"\""
|
404
|
-
},
|
405
384
|
"handleItemClick": {
|
406
385
|
"type": "unknown",
|
407
386
|
"mutable": false,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"sidebar-item.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
1
|
+
{"version":3,"file":"sidebar-item.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAO/G,MAAM,OAAO,WAAW;;oBAEC,EAAE;wBACI,IAAI;+BACG,KAAK;oBAClB,EAAE;4BACO,EAAE;sBACT,OAAO;4BACC,KAAK;wBACT,IAAI;6BACC,KAAK;;sBAEb,KAAK;4BACC,KAAK;mCAEG,KAAK;;;IAU7C,kBAAkB,CAAC,QAAiB,EAAE,QAAiB;QACrD,wDAAwD;QACxD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;QACpC,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAA;YACtD,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpC,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACzD,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,QAAQ,EAAE,CAAC;gBACnC,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;IAKD,kBAAkB,CAAC,KAA2B;QAC5C,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,8BAA8B;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACnC,CAAC;IAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;QAC7B,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;QACzC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAA;QAClF,OAAO,iBAAiB,CAAA;IAC1B,CAAC;IAED,UAAU,CAAC,EAAE;QACX,OAAO,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,CAAC,oBAAoB,CAAC,CAAA;IAChD,CAAC;IAID,mBAAmB,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE;QAC9B,MAAM,YAAY,GAAG,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAC7D,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAC5D,CAAC;QACD,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,kBAAkB;QAChB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QAC1E,OAAO,WAAW,CAAC;IACrB,CAAC;IAGD,aAAa;QACX,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC3C,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAChD,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;YACvD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;YACjD,2CAA2C;YAC3C,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,6EAA6E;YAC7E,sGAAsG;YACtG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,uGAAuG;gBAC9H,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,yCAAyC;gBAClF,OAAO;YACT,CAAC;iBAAM,CAAC,CAAC,8DAA8D;gBACrE,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;gBACvD,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9C,CAAC;YACD,+GAA+G;YAC/G,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;QACD,8CAA8C;QAC9C,8BAA8B;IAChC,CAAC;IAID,oBAAoB,CAAC,YAAY;QAC/B,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACvD,YAAY,CAAC,OAAO,CAAC,CAAC,EAAe,EAAE,EAAE;YACvC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;YACvC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;YAClB,qBAAqB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;QACvC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,sBAAsB;QACpB,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QAC5C,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE,CAAC;YAC1D,OAAO,IAAI,CAAC;QACd,CAAC;;YAAM,OAAO,KAAK,CAAC;IACtB,CAAC;IAED,uBAAuB;QACrB,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAA;QACrD,IAAI,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED,wBAAwB;QACtB,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAC1D,IAAG,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,UAAU,EAAE,iBAAiB,CAAC,EAAE,CAAC;YAC/H,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;aAAK,CAAC;YACL,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,iBAAiB;QACxB,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACtE,MAAM,QAAQ,GAAG,oBAAoB,KAAK,MAAM,CAAC;QACjD,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED,gBAAgB,CAAC,EAAe;QAC9B,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,CAAC;QAErC,OAAO,aAAa,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE,CAAC;YAC9E,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,EAAE,CAAC;gBAC/D,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,aAAa,GAAG,aAAa,CAAC,aAAa,CAAC;QAC9C,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAID,iCAAiC,CAAC,QAAQ;QACxC,yCAAyC;QACzC,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;YACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACrC,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;gBAClE,MAAM,qBAAqB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC1D,IAAI,CAAC,MAAM,EAAE,CAAC;oBACZ,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC;gBACvE,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC;gBAC1E,CAAC;YACH,CAAC;YAED,0BAA0B;YAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAChD,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC3D,CAAC,CAAA;QAED,iCAAiC;QACjC,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACjD,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC9D,CAAC;IAGD,OAAO;QACL,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC1C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAChC,CAAC;;YAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;IACvC,CAAC;IAED,oBAAoB;QAClB,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAA;QACrD,IAAI,eAAe,EAAE,CAAC;YACpB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAA;YACxD,OAAO,YAAY,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAA;YACxD,OAAO,YAAY,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,gBAAgB;QACpB,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAA;QAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;IACvD,CAAC;IAGD,KAAK,CAAC,UAAU,CAAC,EAAW;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC3C,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAChD,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAC9C,IAAG,EAAE,EAAC,CAAC;YACL,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAA;YAChE,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAA;QAC5D,CAAC;IACL,CAAC;IAGD,KAAK,CAAC,gBAAgB;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAA;QACzB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAChD,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAA;QACzC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,OAAO,EAAE,CAAA;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAChD,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,mGAAmG;QACnG,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7C,wCAAwC;YACxC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,MAAM,CAAC;YAEvC,8CAA8C;YAC9C,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAGD,MAAM;;QACJ,OAAO,CACL;YACE,0DAAG,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,qBAAqB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE;gBACxR,IAAI,CAAC,IAAI;oBACR,4DAAK,KAAK,EAAE,kCAAkC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;wBAC5E,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC;gBACR,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,8DAAQ,CACJ;gBAEN,CAAC,IAAI,CAAC,YAAY,KAAI,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,EAAE,CAAA,CAAC;oBACjD,4DAAK,KAAK,EAAC,6BAA6B;wBACrC,IAAI,CAAC,YAAY;4BAChB,6DAAM,KAAK,EAAC,qBAAqB;gCAC/B,iEAAU,IAAI,EAAC,iBAAiB,GAAG,CAC9B;wBAGR,CAAA,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,EAAE,KAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ;4BACnE,6DAAM,KAAK,EAAC,wBAAwB;gCAClC,+EAAuB,IAAI,CAAC,eAAe,CAAwB,CAC9D,CAEL,CAEN;YACH,IAAI,CAAC,YAAY,IAAI,2DAAI,KAAK,EAAC,qBAAqB,GAAM,CAEvD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
|
@@ -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: `
|
97
|
-
|
98
|
-
|
99
|
-
|
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: `
|
111
|
-
|
112
|
-
|
113
|
-
|
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: `
|
125
|
-
|
126
|
-
|
127
|
-
|
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=
|
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"
|
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"
|
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">
|
@@ -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"]}
|
@@ -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,
|
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"]}
|
@@ -8,7 +8,7 @@ export default {
|
|
8
8
|
argTypes: {
|
9
9
|
label: {
|
10
10
|
name: 'Label of Number Indicator',
|
11
|
-
description: '
|
11
|
+
description: 'Set the number displayed inside the *<ifx-number-indicator>*.',
|
12
12
|
table: {
|
13
13
|
category: 'story controls'
|
14
14
|
}
|
@@ -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;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,2BAA2B;YACjC,WAAW,EAAE
|
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"]}
|
@@ -44,7 +44,7 @@ export default {
|
|
44
44
|
},
|
45
45
|
label: {
|
46
46
|
name: 'Label of Radio Button',
|
47
|
-
description: '
|
47
|
+
description: 'Set the label displayed next to *<ifx-radio-button>*.',
|
48
48
|
table: {
|
49
49
|
category: 'story controls',
|
50
50
|
}
|