@x15ventures/x15-ui-library 3.16.1 → 3.18.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/autoGenerated/libraryThemes.js +12 -12
- package/dist/cjs/autoGenerated/libraryThemes.js.map +1 -1
- package/dist/cjs/autoGenerated/libraryThemes.json +12 -12
- package/dist/cjs/components/design/accordion/Accordion.js +7 -23
- package/dist/cjs/components/design/accordion/Accordion.js.map +1 -1
- package/dist/cjs/components/design/banners/pageBanner/PageBanner.js +2 -4
- package/dist/cjs/components/design/banners/pageBanner/PageBanner.js.map +1 -1
- package/dist/cjs/components/design/card/cardContent/CardContentLine.js +2 -2
- package/dist/cjs/components/design/card/cardContent/CardContentLine.js.map +1 -1
- package/dist/cjs/components/design/card/cardHeader/CardHeaderItem.js +2 -2
- package/dist/cjs/components/design/card/cardHeader/CardHeaderItem.js.map +1 -1
- package/dist/cjs/components/design/dialog/Dialog.js +3 -1
- package/dist/cjs/components/design/dialog/Dialog.js.map +1 -1
- package/dist/cjs/components/design/dialog/dialog.css +5 -0
- package/dist/cjs/components/design/headerBar/HeaderBar.js +3 -3
- package/dist/cjs/components/design/headerBar/HeaderBar.js.map +1 -1
- package/dist/cjs/components/design/icons/notificationIcon/NotificationIcon.js +4 -5
- package/dist/cjs/components/design/icons/notificationIcon/NotificationIcon.js.map +1 -1
- package/dist/cjs/components/design/paginators/Paginator.js +4 -12
- package/dist/cjs/components/design/paginators/Paginator.js.map +1 -1
- package/dist/cjs/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.js +89 -0
- package/dist/cjs/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.js.map +1 -0
- package/dist/cjs/components/design/progressIndicators/circularProgressIndicator/circularProgressIndicator.css +301 -0
- package/dist/cjs/components/design/revealMore/RevealMoreBelow.js +1 -3
- package/dist/cjs/components/design/revealMore/RevealMoreBelow.js.map +1 -1
- package/dist/cjs/components/design/revealMore/RevealMoreInline.js +3 -5
- package/dist/cjs/components/design/revealMore/RevealMoreInline.js.map +1 -1
- package/dist/cjs/components/design/revealMore/types/revealMoreTypes.js.map +1 -1
- package/dist/cjs/components/design/sidePanel/SidePanel.js +3 -5
- package/dist/cjs/components/design/sidePanel/SidePanel.js.map +1 -1
- package/dist/cjs/components/design/statusIndicators/statusIconLabel/StatusIconLabel.js +6 -11
- package/dist/cjs/components/design/statusIndicators/statusIconLabel/StatusIconLabel.js.map +1 -1
- package/dist/cjs/components/design/tabs/Tabs.js +2 -2
- package/dist/cjs/components/design/tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/design/themeLoader/ThemeLoader.js +2 -2
- package/dist/cjs/components/design/themeLoader/ThemeLoader.js.map +1 -1
- package/dist/cjs/components/design/tooltip/Tooltip.js +43 -13
- package/dist/cjs/components/design/tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/components/design/tooltip/index.js +6 -0
- package/dist/cjs/components/design/tooltip/index.js.map +1 -1
- package/dist/cjs/components/design/tooltip/tooltip.css +18 -7
- package/dist/cjs/components/form/buttons/SimpleButton.js +3 -3
- package/dist/cjs/components/form/buttons/SimpleButton.js.map +1 -1
- package/dist/cjs/components/form/buttons/button.interface.js.map +1 -1
- package/dist/cjs/components/form/formFields/formFieldWrapper/formFieldProps.js.map +1 -1
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js +5 -5
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js.map +1 -1
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.js +176 -0
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.js.map +1 -0
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/_checkboxSwitchVariables.css +0 -0
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitch.css +306 -0
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.js +6 -0
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.js.map +1 -0
- package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.js.map +1 -1
- package/dist/cjs/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js +3 -5
- package/dist/cjs/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js.map +1 -1
- package/dist/cjs/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.js +12 -22
- package/dist/cjs/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.js.map +1 -1
- package/dist/cjs/components/form/formFields/subComponents/inputs/file/fileInputProps.js.map +1 -1
- package/dist/cjs/components/index.js +14 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/components/navigation/menu/Menu.interfaces.js.map +1 -1
- package/dist/cjs/components/navigation/menu/menuItemContent/MenuItemIcon.js +19 -31
- package/dist/cjs/components/navigation/menu/menuItemContent/MenuItemIcon.js.map +1 -1
- package/dist/cjs/helpers/iconHelpers.js +83 -0
- package/dist/cjs/helpers/iconHelpers.js.map +1 -0
- package/dist/cjs/helpers/index.js +43 -0
- package/dist/cjs/helpers/index.js.map +1 -1
- package/dist/cjs/helpers/objectHelpers.js +9 -2
- package/dist/cjs/helpers/objectHelpers.js.map +1 -1
- package/dist/cjs/hooks/InteractiveHostFocus.js +62 -0
- package/dist/cjs/hooks/InteractiveHostFocus.js.map +1 -0
- package/dist/cjs/hooks/index.js +7 -0
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/index.js +79 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/interfaces/headerText.interface.js.map +1 -1
- package/dist/cjs/package.json +16 -28
- package/dist/cjs/styles/index.css +61 -0
- package/dist/cjs/styles/storybook/storybook.css +7 -0
- package/dist/cjs/styles/variables/cssVars/_darkModeVariables.css +21 -0
- package/dist/cjs/styles/variables/cssVars/_formVariables.css +40 -0
- package/dist/cjs/widgets/index.js +14 -0
- package/dist/cjs/widgets/index.js.map +1 -0
- package/dist/cjs/widgets/processLauncher/ProcessLauncher.js +272 -0
- package/dist/cjs/widgets/processLauncher/ProcessLauncher.js.map +1 -0
- package/dist/cjs/widgets/processLauncher/index.js +13 -0
- package/dist/cjs/widgets/processLauncher/index.js.map +1 -0
- package/dist/cjs/widgets/processLauncher/processLauncher.interfaces.js +6 -0
- package/dist/cjs/widgets/processLauncher/processLauncher.interfaces.js.map +1 -0
- package/dist/components/design/accordion/Accordion.d.ts +3 -2
- package/dist/components/design/accordion/Accordion.d.ts.map +1 -1
- package/dist/components/design/banners/pageBanner/PageBanner.d.ts +2 -1
- package/dist/components/design/banners/pageBanner/PageBanner.d.ts.map +1 -1
- package/dist/components/design/card/cardContent/CardContentLine.d.ts +2 -2
- package/dist/components/design/card/cardContent/CardContentLine.d.ts.map +1 -1
- package/dist/components/design/card/cardHeader/CardHeaderItem.d.ts +2 -2
- package/dist/components/design/card/cardHeader/CardHeaderItem.d.ts.map +1 -1
- package/dist/components/design/dialog/Dialog.d.ts.map +1 -1
- package/dist/components/design/headerBar/HeaderBar.d.ts.map +1 -1
- package/dist/components/design/icons/notificationIcon/NotificationIcon.d.ts +2 -2
- package/dist/components/design/icons/notificationIcon/NotificationIcon.d.ts.map +1 -1
- package/dist/components/design/paginators/Paginator.d.ts +3 -2
- package/dist/components/design/paginators/Paginator.d.ts.map +1 -1
- package/dist/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.d.ts +18 -0
- package/dist/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.d.ts.map +1 -0
- package/dist/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.test.d.ts +5 -0
- package/dist/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.test.d.ts.map +1 -0
- package/dist/components/design/revealMore/RevealMoreBelow.d.ts.map +1 -1
- package/dist/components/design/revealMore/RevealMoreInline.d.ts.map +1 -1
- package/dist/components/design/revealMore/types/revealMoreTypes.d.ts +3 -2
- package/dist/components/design/revealMore/types/revealMoreTypes.d.ts.map +1 -1
- package/dist/components/design/sidePanel/SidePanel.d.ts +3 -2
- package/dist/components/design/sidePanel/SidePanel.d.ts.map +1 -1
- package/dist/components/design/statusIndicators/statusIconLabel/StatusIconLabel.d.ts +2 -2
- package/dist/components/design/statusIndicators/statusIconLabel/StatusIconLabel.d.ts.map +1 -1
- package/dist/components/design/tabs/Tabs.d.ts +3 -3
- package/dist/components/design/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/design/tooltip/Tooltip.d.ts +17 -3
- package/dist/components/design/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/design/tooltip/Tooltip.test.d.ts +1 -1
- package/dist/components/design/tooltip/Tooltip.test.d.ts.map +1 -1
- package/dist/components/design/tooltip/index.d.ts +1 -1
- package/dist/components/design/tooltip/index.d.ts.map +1 -1
- package/dist/components/form/buttons/SimpleButton.test.d.ts +5 -0
- package/dist/components/form/buttons/SimpleButton.test.d.ts.map +1 -0
- package/dist/components/form/buttons/button.interface.d.ts +3 -3
- package/dist/components/form/buttons/button.interface.d.ts.map +1 -1
- package/dist/components/form/formFields/formFieldWrapper/formFieldProps.d.ts +2 -1
- package/dist/components/form/formFields/formFieldWrapper/formFieldProps.d.ts.map +1 -1
- package/dist/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.d.ts +29 -0
- package/dist/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.d.ts.map +1 -0
- package/dist/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.test.d.ts +5 -0
- package/dist/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.test.d.ts.map +1 -0
- package/dist/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.d.ts +52 -0
- package/dist/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.d.ts.map +1 -0
- package/dist/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.d.ts +3 -3
- package/dist/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.d.ts.map +1 -1
- package/dist/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.d.ts.map +1 -1
- package/dist/components/form/formFields/subComponents/inputs/file/fileInputProps.d.ts +4 -3
- package/dist/components/form/formFields/subComponents/inputs/file/fileInputProps.d.ts.map +1 -1
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/navigation/menu/Menu.interfaces.d.ts +4 -3
- package/dist/components/navigation/menu/Menu.interfaces.d.ts.map +1 -1
- package/dist/components/navigation/menu/menuItemContent/MenuItemIcon.d.ts +2 -1
- package/dist/components/navigation/menu/menuItemContent/MenuItemIcon.d.ts.map +1 -1
- package/dist/components/navigation/menu/menuItemContent/MenuItemIcon.test.d.ts +5 -0
- package/dist/components/navigation/menu/menuItemContent/MenuItemIcon.test.d.ts.map +1 -0
- package/dist/esm/autoGenerated/libraryThemes.js +12 -12
- package/dist/esm/autoGenerated/libraryThemes.js.map +1 -1
- package/dist/esm/autoGenerated/libraryThemes.json +12 -12
- package/dist/esm/components/design/accordion/Accordion.js +7 -23
- package/dist/esm/components/design/accordion/Accordion.js.map +1 -1
- package/dist/esm/components/design/banners/pageBanner/PageBanner.js +2 -4
- package/dist/esm/components/design/banners/pageBanner/PageBanner.js.map +1 -1
- package/dist/esm/components/design/card/cardContent/CardContentLine.js +2 -2
- package/dist/esm/components/design/card/cardContent/CardContentLine.js.map +1 -1
- package/dist/esm/components/design/card/cardHeader/CardHeaderItem.js +2 -2
- package/dist/esm/components/design/card/cardHeader/CardHeaderItem.js.map +1 -1
- package/dist/esm/components/design/dialog/Dialog.js +3 -1
- package/dist/esm/components/design/dialog/Dialog.js.map +1 -1
- package/dist/esm/components/design/dialog/dialog.css +5 -0
- package/dist/esm/components/design/headerBar/HeaderBar.js +3 -3
- package/dist/esm/components/design/headerBar/HeaderBar.js.map +1 -1
- package/dist/esm/components/design/icons/notificationIcon/NotificationIcon.js +4 -5
- package/dist/esm/components/design/icons/notificationIcon/NotificationIcon.js.map +1 -1
- package/dist/esm/components/design/paginators/Paginator.js +4 -12
- package/dist/esm/components/design/paginators/Paginator.js.map +1 -1
- package/dist/esm/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.js +82 -0
- package/dist/esm/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.js.map +1 -0
- package/dist/esm/components/design/progressIndicators/circularProgressIndicator/circularProgressIndicator.css +301 -0
- package/dist/esm/components/design/revealMore/RevealMoreBelow.js +1 -3
- package/dist/esm/components/design/revealMore/RevealMoreBelow.js.map +1 -1
- package/dist/esm/components/design/revealMore/RevealMoreInline.js +2 -4
- package/dist/esm/components/design/revealMore/RevealMoreInline.js.map +1 -1
- package/dist/esm/components/design/revealMore/types/revealMoreTypes.js.map +1 -1
- package/dist/esm/components/design/sidePanel/SidePanel.js +3 -5
- package/dist/esm/components/design/sidePanel/SidePanel.js.map +1 -1
- package/dist/esm/components/design/statusIndicators/statusIconLabel/StatusIconLabel.js +6 -11
- package/dist/esm/components/design/statusIndicators/statusIconLabel/StatusIconLabel.js.map +1 -1
- package/dist/esm/components/design/tabs/Tabs.js +2 -2
- package/dist/esm/components/design/tabs/Tabs.js.map +1 -1
- package/dist/esm/components/design/themeLoader/ThemeLoader.js +1 -1
- package/dist/esm/components/design/themeLoader/ThemeLoader.js.map +1 -1
- package/dist/esm/components/design/tooltip/Tooltip.js +41 -12
- package/dist/esm/components/design/tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/design/tooltip/index.js +1 -1
- package/dist/esm/components/design/tooltip/index.js.map +1 -1
- package/dist/esm/components/design/tooltip/tooltip.css +18 -7
- package/dist/esm/components/form/buttons/SimpleButton.js +3 -3
- package/dist/esm/components/form/buttons/SimpleButton.js.map +1 -1
- package/dist/esm/components/form/buttons/button.interface.js.map +1 -1
- package/dist/esm/components/form/formFields/formFieldWrapper/formFieldProps.js.map +1 -1
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js +5 -5
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js.map +1 -1
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.js +167 -0
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.js.map +1 -0
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/_checkboxSwitchVariables.css +0 -0
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitch.css +306 -0
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.js +2 -0
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.js.map +1 -0
- package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.js.map +1 -1
- package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js +3 -5
- package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js.map +1 -1
- package/dist/esm/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.js +12 -22
- package/dist/esm/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.js.map +1 -1
- package/dist/esm/components/form/formFields/subComponents/inputs/file/fileInputProps.js.map +1 -1
- package/dist/esm/components/index.js +2 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/components/navigation/menu/Menu.interfaces.js.map +1 -1
- package/dist/esm/components/navigation/menu/menuItemContent/MenuItemIcon.js +17 -30
- package/dist/esm/components/navigation/menu/menuItemContent/MenuItemIcon.js.map +1 -1
- package/dist/esm/helpers/iconHelpers.js +73 -0
- package/dist/esm/helpers/iconHelpers.js.map +1 -0
- package/dist/esm/helpers/index.js +2 -1
- package/dist/esm/helpers/index.js.map +1 -1
- package/dist/esm/helpers/objectHelpers.js +7 -3
- package/dist/esm/helpers/objectHelpers.js.map +1 -1
- package/dist/esm/hooks/InteractiveHostFocus.js +56 -0
- package/dist/esm/hooks/InteractiveHostFocus.js.map +1 -0
- package/dist/esm/hooks/index.js +1 -0
- package/dist/esm/hooks/index.js.map +1 -1
- package/dist/esm/index.js +5 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/interfaces/headerText.interface.js.map +1 -1
- package/dist/esm/package.json +16 -28
- package/dist/esm/styles/index.css +61 -0
- package/dist/esm/styles/storybook/storybook.css +7 -0
- package/dist/esm/styles/variables/cssVars/_darkModeVariables.css +21 -0
- package/dist/esm/styles/variables/cssVars/_formVariables.css +40 -0
- package/dist/esm/widgets/index.js +4 -0
- package/dist/esm/widgets/index.js.map +1 -0
- package/dist/esm/widgets/processLauncher/ProcessLauncher.js +263 -0
- package/dist/esm/widgets/processLauncher/ProcessLauncher.js.map +1 -0
- package/dist/esm/widgets/processLauncher/index.js +2 -0
- package/dist/esm/widgets/processLauncher/index.js.map +1 -0
- package/dist/esm/widgets/processLauncher/processLauncher.interfaces.js +2 -0
- package/dist/esm/widgets/processLauncher/processLauncher.interfaces.js.map +1 -0
- package/dist/helpers/iconHelpers.d.ts +30 -0
- package/dist/helpers/iconHelpers.d.ts.map +1 -0
- package/dist/helpers/iconHelpers.test.d.ts +5 -0
- package/dist/helpers/iconHelpers.test.d.ts.map +1 -0
- package/dist/helpers/index.d.ts +4 -1
- package/dist/helpers/index.d.ts.map +1 -1
- package/dist/helpers/objectHelpers.d.ts +10 -3
- package/dist/helpers/objectHelpers.d.ts.map +1 -1
- package/dist/hooks/InteractiveHostFocus.d.ts +12 -0
- package/dist/hooks/InteractiveHostFocus.d.ts.map +1 -0
- package/dist/hooks/InteractiveHostFocus.test.d.ts +5 -0
- package/dist/hooks/InteractiveHostFocus.test.d.ts.map +1 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/index.d.ts +9 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/interfaces/headerText.interface.d.ts +3 -3
- package/dist/interfaces/headerText.interface.d.ts.map +1 -1
- package/dist/package.json +16 -28
- package/dist/widgets/index.d.ts +3 -0
- package/dist/widgets/index.d.ts.map +1 -0
- package/dist/widgets/processLauncher/ProcessLauncher.d.ts +21 -0
- package/dist/widgets/processLauncher/ProcessLauncher.d.ts.map +1 -0
- package/dist/widgets/processLauncher/ProcessLauncher.test.d.ts +5 -0
- package/dist/widgets/processLauncher/ProcessLauncher.test.d.ts.map +1 -0
- package/dist/widgets/processLauncher/index.d.ts +4 -0
- package/dist/widgets/processLauncher/index.d.ts.map +1 -0
- package/dist/widgets/processLauncher/processLauncher.interfaces.d.ts +45 -0
- package/dist/widgets/processLauncher/processLauncher.interfaces.d.ts.map +1 -0
- package/package.json +16 -28
- package/readme.md +0 -36
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationIcon.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","NotificationIcon","
|
|
1
|
+
{"version":3,"file":"NotificationIcon.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","NotificationIcon","_react","_iconHelpers","icon","customCssClass","text","hoverText","createElement","title","className","renderIcon","_default"],"sources":["../../../../../../src/components/design/icons/notificationIcon/NotificationIcon.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\n\nimport './notificationIcon.scss';\n\nexport interface NotificationIconProps {\n icon?: IconSource;\n customCssClass?: string;\n text?: number | string;\n}\n\nexport const NotificationIcon: React.FC<NotificationIconProps> = (\n {\n icon,\n customCssClass,\n text = ''\n }\n) => {\n const hoverText = `You have ${ text !== 0 ? text : 'no' } notifications`;\n return (\n <span title={ hoverText } className={ `notificationIcon ${ customCssClass || '' }` }>\n { renderIcon(icon, { customCssClass }) }\n {\n text\n }\n </span>\n );\n};\n\nexport default NotificationIcon;\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA,GAAAF,OAAA,CAAAG,gBAAA;AAEb,IAAAC,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,YAAA,GAAAR,OAAA;AAEAA,OAAA;AAQO,MAAMM,gBAAiD,GAAGA,CAC/D;EACEG,IAAI;EACJC,cAAc;EACdC,IAAI,GAAG;AACT,CAAC,KACE;EACH,MAAMC,SAAS,GAAG,YAAaD,IAAI,KAAK,CAAC,GAAGA,IAAI,GAAG,IAAI,gBAAiB;EACxE,oBACEJ,MAAA,CAAAF,OAAA,CAAAQ,aAAA;IAAMC,KAAK,EAAGF,SAAW;IAACG,SAAS,EAAG,oBAAqBL,cAAc,IAAI,EAAE;EAAK,GAChF,IAAAM,uBAAU,EAACP,IAAI,EAAE;IAAEC;EAAe,CAAC,CAAC,EAEpCC,IAEE,CAAC;AAEX,CAAC;AAACR,OAAA,CAAAG,gBAAA,GAAAA,gBAAA;AAAA,IAAAW,QAAA,GAAAd,OAAA,CAAAE,OAAA,GAEaC,gBAAgB","ignoreList":[]}
|
|
@@ -140,9 +140,7 @@ const Paginator = ({
|
|
|
140
140
|
id: `paginator_${id}_first`,
|
|
141
141
|
disabled: activePage === 1,
|
|
142
142
|
onClickHandler: () => handlePageChange(1),
|
|
143
|
-
leftIcon: isNonNullFirstIcon ?
|
|
144
|
-
icon: buttonConfig?.firstButton?.icon || 'first'
|
|
145
|
-
} : undefined,
|
|
143
|
+
leftIcon: isNonNullFirstIcon ? buttonConfig?.firstButton?.icon || 'first' : undefined,
|
|
146
144
|
hideLabel: buttonConfig?.firstButton?.label ? false : true,
|
|
147
145
|
label: buttonConfig?.firstButton?.label || 'Go to first item',
|
|
148
146
|
buttonStyle: {
|
|
@@ -152,9 +150,7 @@ const Paginator = ({
|
|
|
152
150
|
id: `paginator_${id}_previous`,
|
|
153
151
|
disabled: activePage === 1,
|
|
154
152
|
onClickHandler: () => handlePageChange(activePage - 1),
|
|
155
|
-
leftIcon: isNonNullPrevIcon ?
|
|
156
|
-
icon: buttonConfig?.previousButton?.icon || 'previous2'
|
|
157
|
-
} : undefined,
|
|
153
|
+
leftIcon: isNonNullPrevIcon ? buttonConfig?.previousButton?.icon || 'previous2' : undefined,
|
|
158
154
|
hideLabel: buttonConfig?.previousButton?.label ? false : true,
|
|
159
155
|
label: buttonConfig?.previousButton?.label || `Show previous ${pageSize} items`,
|
|
160
156
|
buttonStyle: {
|
|
@@ -179,9 +175,7 @@ const Paginator = ({
|
|
|
179
175
|
id: `paginator_${id}_next`,
|
|
180
176
|
disabled: activePage === totalPages,
|
|
181
177
|
onClickHandler: () => handlePageChange(activePage + 1),
|
|
182
|
-
rightIcon: isNonNullNextIcon ?
|
|
183
|
-
icon: buttonConfig?.nextButton?.icon || 'next2'
|
|
184
|
-
} : undefined,
|
|
178
|
+
rightIcon: isNonNullNextIcon ? buttonConfig?.nextButton?.icon || 'next2' : undefined,
|
|
185
179
|
hideLabel: buttonConfig?.nextButton?.label ? false : true,
|
|
186
180
|
label: buttonConfig?.nextButton?.label || `Show next ${pageSize} items`,
|
|
187
181
|
buttonStyle: {
|
|
@@ -191,9 +185,7 @@ const Paginator = ({
|
|
|
191
185
|
id: `paginator_${id}_last`,
|
|
192
186
|
disabled: activePage === totalPages,
|
|
193
187
|
onClickHandler: () => handlePageChange(totalPages),
|
|
194
|
-
rightIcon: isNonNullLastIcon ?
|
|
195
|
-
icon: buttonConfig?.lastButton?.icon || 'last'
|
|
196
|
-
} : undefined,
|
|
188
|
+
rightIcon: isNonNullLastIcon ? buttonConfig?.lastButton?.icon || 'last' : undefined,
|
|
197
189
|
hideLabel: buttonConfig?.lastButton?.label ? false : true,
|
|
198
190
|
label: buttonConfig?.lastButton?.label || 'Go to last item',
|
|
199
191
|
buttonStyle: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.js","names":["Object","defineProperty","exports","value","default","Paginator","_react","_interopRequireWildcard","require","_SimpleButton","_InputVariants","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","id","page","totalPages","pageSize","allowPageSizeChange","onPageChange","onPageSizeChange","paginationType","paginatorPosition","buttonConfig","maxButtonsVisible","displayedButtonLimit","setDisplayedButtonLimit","useState","activePage","setActivePage","isPageSizeChangeAllowed","setIsPageSizeChangeAllowed","pageNumberButtonsVisible","setPageNumberButtonsVisible","Array","from","length","_","lowestPageNumberVisible","useRef","highestPageNumberVisible","pageSizeChangePosition","isNonNullPrevIcon","previousButton","icon","isNonNullNextIcon","nextButton","isNonNullFirstIcon","firstButton","isNonNullLastIcon","lastButton","updateVisiblePageNumbers","newPage","current","newVisiblePages","filter","pageNum","resetVisiblePageNumbers","handlePageChange","handlePageSizeChange","event","Number","target","requiresPagination","useEffect","pageSizeChange","createElement","className","SelectDropdown","field","name","options","label","includeEmptyOption","defaultValue","onChange","text","layout","customCssClasses","wrapper","Fragment","SimpleButton","disabled","onClickHandler","leftIcon","undefined","hideLabel","buttonStyle","size","map","pageNumber","key","String","rightIcon","_default"],"sources":["../../../../../src/components/design/paginators/Paginator.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactElement, useEffect, useRef, useState } from 'react';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { SelectDropdown } from '../../form/formFields/subComponents/InputVariants';\nimport { GenericFunction } from '../../../interfaces/generic.interface';\n\nimport './paginator.scss';\n\nexport interface IconLabelProp {\n icon?: string | ReactElement | null;\n label?: string | null;\n}\n\nexport interface PaginatorProps {\n id: string;\n page: number;\n totalPages: number;\n pageSize: number;\n onPageChange: GenericFunction;\n allowPageSizeChange?: boolean;\n onPageSizeChange?: GenericFunction;\n paginationType?: 'buttons' | 'showMore';\n paginatorPosition?: 'left' | 'right' | 'center';\n buttonConfig?: {\n previousButton?: IconLabelProp;\n nextButton?: IconLabelProp;\n firstButton?: IconLabelProp;\n lastButton?: IconLabelProp;\n };\n maxButtonsVisible?: number;\n}\n\nexport const Paginator: React.FC<PaginatorProps> = (\n {\n id,\n page,\n totalPages,\n pageSize = 20,\n allowPageSizeChange,\n onPageChange,\n onPageSizeChange,\n paginationType = 'buttons',\n paginatorPosition = paginationType === 'showMore' ? 'center' : 'right',\n buttonConfig,\n maxButtonsVisible = 5,\n }\n) => {\n\n const [displayedButtonLimit, setDisplayedButtonLimit] = useState<number>(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n const [activePage, setActivePage] = useState(0);\n const [isPageSizeChangeAllowed, setIsPageSizeChangeAllowed] = useState<boolean>(false);\n const [pageNumberButtonsVisible, setPageNumberButtonsVisible] = useState<number[]>(Array.from({ length: displayedButtonLimit }, (_, i) => i + 1));\n \n const lowestPageNumberVisible = useRef(1);\n const highestPageNumberVisible = useRef(displayedButtonLimit);\n\n const pageSizeChangePosition = paginatorPosition === 'center' ? 'right' : paginatorPosition === 'right' ? 'left' : 'right';\n\n const isNonNullPrevIcon = buttonConfig?.previousButton?.icon !== null;\n const isNonNullNextIcon = buttonConfig?.nextButton?.icon !== null;\n const isNonNullFirstIcon = buttonConfig?.firstButton?.icon !== null;\n const isNonNullLastIcon = buttonConfig?.lastButton?.icon !== null;\n\n const updateVisiblePageNumbers = (newPage: number) => {\n if (newPage >= lowestPageNumberVisible.current && newPage <= highestPageNumberVisible.current) {\n return;\n }\n if (newPage < lowestPageNumberVisible.current) {\n lowestPageNumberVisible.current = newPage;\n highestPageNumberVisible.current = newPage + displayedButtonLimit - 1;\n } else if (newPage > highestPageNumberVisible.current) {\n highestPageNumberVisible.current = newPage;\n lowestPageNumberVisible.current = newPage - displayedButtonLimit + 1;\n }\n\n const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => lowestPageNumberVisible.current + i).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n setPageNumberButtonsVisible(newVisiblePages);\n };\n\n // ensure lowest and highest visible page numbers are within a valid range\n const resetVisiblePageNumbers = (page: number) => {\n lowestPageNumberVisible.current = 1;\n highestPageNumberVisible.current = displayedButtonLimit;\n\n const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => i + 1).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n setPageNumberButtonsVisible(newVisiblePages);\n updateVisiblePageNumbers(page);\n };\n\n const handlePageChange = (newPage: number) => {\n if (newPage < 1 || newPage > totalPages) {\n return;\n }\n setActivePage(newPage);\n onPageChange(newPage);\n updateVisiblePageNumbers(newPage);\n };\n\n const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n onPageSizeChange && onPageSizeChange(Number(event.target.value));\n };\n\n const requiresPagination = () => {\n if (paginationType === 'buttons') {\n return totalPages > 1;\n }\n\n if (paginationType === 'showMore') {\n return page < totalPages;\n }\n return false;\n };\n\n useEffect(() => {\n const newPage = page > totalPages ? totalPages : page < 1 ? 1 : page;\n if (newPage !== page) {\n onPageChange(newPage);\n }\n setActivePage(newPage);\n if (newPage < lowestPageNumberVisible.current || newPage > highestPageNumberVisible.current || displayedButtonLimit !== pageNumberButtonsVisible.length) {\n resetVisiblePageNumbers(newPage);\n }\n setIsPageSizeChangeAllowed(allowPageSizeChange === true && paginationType === 'buttons');\n }, [page, totalPages, displayedButtonLimit]);\n\n useEffect(() => {\n setDisplayedButtonLimit(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n }, [totalPages, maxButtonsVisible]);\n\n if (!requiresPagination()) {\n return null;\n }\n\n const pageSizeChange = () => ( \n <div className=\"pageSizeChangeContainer\">\n <SelectDropdown {\n ...{\n field: {\n id: `paginator_${ id }_pageSizeChange`,\n name: `paginator_${ id }_pageSizeChange`,\n options: [\n {\n label: '10',\n value: 10,\n },\n {\n label: '20',\n value: 20,\n },\n {\n label: '50',\n value: 50,\n },\n {\n label: '100',\n value: 100,\n },\n ],\n includeEmptyOption: false,\n defaultValue: pageSize,\n onChange: handlePageSizeChange,\n },\n label: {\n text: 'Items per page',\n },\n layout: 'horizontal',\n customCssClasses: {\n wrapper: 'pageSizeChange',\n }\n }\n }\n />\n </div>\n );\n\n return (\n <div id={ `paginator_${ id }` } className={ `paginator ${ paginationType } position_${ paginatorPosition } ${ isPageSizeChangeAllowed ? 'withPageSizeChange' : '' }` }>\n { paginationType === 'buttons' && (\n <>\n { isPageSizeChangeAllowed && pageSizeChangePosition === 'left' && pageSizeChange() }\n <div className=\"paginatorControls\">\n\n <SimpleButton\n id={ `paginator_${ id }_first` }\n disabled={ activePage === 1 }\n onClickHandler={ () => handlePageChange(1) }\n leftIcon={ isNonNullFirstIcon ? { icon: buttonConfig?.firstButton?.icon || 'first' } : undefined }\n hideLabel={ buttonConfig?.firstButton?.label ? false : true }\n label={ buttonConfig?.firstButton?.label || 'Go to first item' }\n buttonStyle={ { size: 'compact' } }\n />\n <SimpleButton\n id={ `paginator_${ id }_previous` }\n disabled={ activePage === 1 }\n onClickHandler={ () => handlePageChange(activePage - 1) }\n leftIcon={ isNonNullPrevIcon ? { icon: buttonConfig?.previousButton?.icon || 'previous2' } : undefined }\n hideLabel={ buttonConfig?.previousButton?.label ? false : true }\n label={ buttonConfig?.previousButton?.label || `Show previous ${ pageSize } items` }\n buttonStyle={ { size: 'compact' } }\n />\n\n <div className=\"paginatorPageButtonsWrapper\">\n <div className=\"paginatorPageButtonsScroller\">\n <div className=\"paginatorPageButtons\">\n {\n pageNumberButtonsVisible.map((pageNumber) => (\n <SimpleButton\n key={ `paginator_${ id }_page_${ pageNumber }` }\n id={ `paginator_${ id }_page_${ pageNumber }` }\n disabled={ activePage === pageNumber }\n onClickHandler={ () => handlePageChange(pageNumber) }\n label={ String(pageNumber) }\n buttonStyle={ { size: 'compact' } }\n />\n ))\n }\n </div>\n </div>\n </div>\n\n <SimpleButton\n id={ `paginator_${ id }_next` }\n disabled={ activePage === totalPages }\n onClickHandler={ () => handlePageChange(activePage + 1) }\n rightIcon={ isNonNullNextIcon ? { icon: buttonConfig?.nextButton?.icon || 'next2' } : undefined }\n hideLabel={ buttonConfig?.nextButton?.label ? false : true }\n label={ buttonConfig?.nextButton?.label || `Show next ${ pageSize } items` }\n buttonStyle={ { size: 'compact' } }\n />\n <SimpleButton\n id={ `paginator_${ id }_last` }\n disabled={ activePage === totalPages }\n onClickHandler={ () => handlePageChange(totalPages) }\n rightIcon={ isNonNullLastIcon ? { icon: buttonConfig?.lastButton?.icon || 'last' } : undefined }\n hideLabel={ buttonConfig?.lastButton?.label ? false : true }\n label={ buttonConfig?.lastButton?.label || 'Go to last item' }\n buttonStyle={ { size: 'compact' } }\n />\n\n </div>\n { isPageSizeChangeAllowed && pageSizeChangePosition === 'right' && pageSizeChange() }\n </>\n ) }\n { paginationType === 'showMore' && (\n <div className=\"showMore\">\n <SimpleButton\n id={ `paginator_${ id }_previous` }\n onClickHandler={ () => handlePageChange(activePage + 1) }\n rightIcon={ { icon: 'arrowDown' } }\n label=\"Show more items\"\n buttonStyle={ { size: 'compact' } }\n />\n </div>\n ) }\n </div>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Paginator.js","names":["Object","defineProperty","exports","value","default","Paginator","_react","_interopRequireWildcard","require","_SimpleButton","_InputVariants","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","id","page","totalPages","pageSize","allowPageSizeChange","onPageChange","onPageSizeChange","paginationType","paginatorPosition","buttonConfig","maxButtonsVisible","displayedButtonLimit","setDisplayedButtonLimit","useState","activePage","setActivePage","isPageSizeChangeAllowed","setIsPageSizeChangeAllowed","pageNumberButtonsVisible","setPageNumberButtonsVisible","Array","from","length","_","lowestPageNumberVisible","useRef","highestPageNumberVisible","pageSizeChangePosition","isNonNullPrevIcon","previousButton","icon","isNonNullNextIcon","nextButton","isNonNullFirstIcon","firstButton","isNonNullLastIcon","lastButton","updateVisiblePageNumbers","newPage","current","newVisiblePages","filter","pageNum","resetVisiblePageNumbers","handlePageChange","handlePageSizeChange","event","Number","target","requiresPagination","useEffect","pageSizeChange","createElement","className","SelectDropdown","field","name","options","label","includeEmptyOption","defaultValue","onChange","text","layout","customCssClasses","wrapper","Fragment","SimpleButton","disabled","onClickHandler","leftIcon","undefined","hideLabel","buttonStyle","size","map","pageNumber","key","String","rightIcon","_default"],"sources":["../../../../../src/components/design/paginators/Paginator.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { SelectDropdown } from '../../form/formFields/subComponents/InputVariants';\nimport { GenericFunction } from '../../../interfaces/generic.interface';\nimport { IconSource } from '../../../helpers/iconHelpers';\n\nimport './paginator.scss';\n\nexport interface IconLabelProp {\n icon?: IconSource | null;\n label?: string | null;\n}\n\nexport interface PaginatorProps {\n id: string;\n page: number;\n totalPages: number;\n pageSize: number;\n onPageChange: GenericFunction;\n allowPageSizeChange?: boolean;\n onPageSizeChange?: GenericFunction;\n paginationType?: 'buttons' | 'showMore';\n paginatorPosition?: 'left' | 'right' | 'center';\n buttonConfig?: {\n previousButton?: IconLabelProp;\n nextButton?: IconLabelProp;\n firstButton?: IconLabelProp;\n lastButton?: IconLabelProp;\n };\n maxButtonsVisible?: number;\n}\n\nexport const Paginator: React.FC<PaginatorProps> = (\n {\n id,\n page,\n totalPages,\n pageSize = 20,\n allowPageSizeChange,\n onPageChange,\n onPageSizeChange,\n paginationType = 'buttons',\n paginatorPosition = paginationType === 'showMore' ? 'center' : 'right',\n buttonConfig,\n maxButtonsVisible = 5,\n }\n) => {\n\n const [displayedButtonLimit, setDisplayedButtonLimit] = useState<number>(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n const [activePage, setActivePage] = useState(0);\n const [isPageSizeChangeAllowed, setIsPageSizeChangeAllowed] = useState<boolean>(false);\n const [pageNumberButtonsVisible, setPageNumberButtonsVisible] = useState<number[]>(Array.from({ length: displayedButtonLimit }, (_, i) => i + 1));\n \n const lowestPageNumberVisible = useRef(1);\n const highestPageNumberVisible = useRef(displayedButtonLimit);\n\n const pageSizeChangePosition = paginatorPosition === 'center' ? 'right' : paginatorPosition === 'right' ? 'left' : 'right';\n\n const isNonNullPrevIcon = buttonConfig?.previousButton?.icon !== null;\n const isNonNullNextIcon = buttonConfig?.nextButton?.icon !== null;\n const isNonNullFirstIcon = buttonConfig?.firstButton?.icon !== null;\n const isNonNullLastIcon = buttonConfig?.lastButton?.icon !== null;\n\n const updateVisiblePageNumbers = (newPage: number) => {\n if (newPage >= lowestPageNumberVisible.current && newPage <= highestPageNumberVisible.current) {\n return;\n }\n if (newPage < lowestPageNumberVisible.current) {\n lowestPageNumberVisible.current = newPage;\n highestPageNumberVisible.current = newPage + displayedButtonLimit - 1;\n } else if (newPage > highestPageNumberVisible.current) {\n highestPageNumberVisible.current = newPage;\n lowestPageNumberVisible.current = newPage - displayedButtonLimit + 1;\n }\n\n const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => lowestPageNumberVisible.current + i).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n setPageNumberButtonsVisible(newVisiblePages);\n };\n\n // ensure lowest and highest visible page numbers are within a valid range\n const resetVisiblePageNumbers = (page: number) => {\n lowestPageNumberVisible.current = 1;\n highestPageNumberVisible.current = displayedButtonLimit;\n\n const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => i + 1).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n setPageNumberButtonsVisible(newVisiblePages);\n updateVisiblePageNumbers(page);\n };\n\n const handlePageChange = (newPage: number) => {\n if (newPage < 1 || newPage > totalPages) {\n return;\n }\n setActivePage(newPage);\n onPageChange(newPage);\n updateVisiblePageNumbers(newPage);\n };\n\n const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n onPageSizeChange && onPageSizeChange(Number(event.target.value));\n };\n\n const requiresPagination = () => {\n if (paginationType === 'buttons') {\n return totalPages > 1;\n }\n\n if (paginationType === 'showMore') {\n return page < totalPages;\n }\n return false;\n };\n\n useEffect(() => {\n const newPage = page > totalPages ? totalPages : page < 1 ? 1 : page;\n if (newPage !== page) {\n onPageChange(newPage);\n }\n setActivePage(newPage);\n if (newPage < lowestPageNumberVisible.current || newPage > highestPageNumberVisible.current || displayedButtonLimit !== pageNumberButtonsVisible.length) {\n resetVisiblePageNumbers(newPage);\n }\n setIsPageSizeChangeAllowed(allowPageSizeChange === true && paginationType === 'buttons');\n }, [page, totalPages, displayedButtonLimit]);\n\n useEffect(() => {\n setDisplayedButtonLimit(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n }, [totalPages, maxButtonsVisible]);\n\n if (!requiresPagination()) {\n return null;\n }\n\n const pageSizeChange = () => ( \n <div className=\"pageSizeChangeContainer\">\n <SelectDropdown {\n ...{\n field: {\n id: `paginator_${ id }_pageSizeChange`,\n name: `paginator_${ id }_pageSizeChange`,\n options: [\n {\n label: '10',\n value: 10,\n },\n {\n label: '20',\n value: 20,\n },\n {\n label: '50',\n value: 50,\n },\n {\n label: '100',\n value: 100,\n },\n ],\n includeEmptyOption: false,\n defaultValue: pageSize,\n onChange: handlePageSizeChange,\n },\n label: {\n text: 'Items per page',\n },\n layout: 'horizontal',\n customCssClasses: {\n wrapper: 'pageSizeChange',\n }\n }\n }\n />\n </div>\n );\n\n return (\n <div id={ `paginator_${ id }` } className={ `paginator ${ paginationType } position_${ paginatorPosition } ${ isPageSizeChangeAllowed ? 'withPageSizeChange' : '' }` }>\n { paginationType === 'buttons' && (\n <>\n { isPageSizeChangeAllowed && pageSizeChangePosition === 'left' && pageSizeChange() }\n <div className=\"paginatorControls\">\n\n <SimpleButton\n id={ `paginator_${ id }_first` }\n disabled={ activePage === 1 }\n onClickHandler={ () => handlePageChange(1) }\n leftIcon={ isNonNullFirstIcon ? buttonConfig?.firstButton?.icon || 'first' : undefined }\n hideLabel={ buttonConfig?.firstButton?.label ? false : true }\n label={ buttonConfig?.firstButton?.label || 'Go to first item' }\n buttonStyle={ { size: 'compact' } }\n />\n <SimpleButton\n id={ `paginator_${ id }_previous` }\n disabled={ activePage === 1 }\n onClickHandler={ () => handlePageChange(activePage - 1) }\n leftIcon={ isNonNullPrevIcon ? buttonConfig?.previousButton?.icon || 'previous2' : undefined }\n hideLabel={ buttonConfig?.previousButton?.label ? false : true }\n label={ buttonConfig?.previousButton?.label || `Show previous ${ pageSize } items` }\n buttonStyle={ { size: 'compact' } }\n />\n\n <div className=\"paginatorPageButtonsWrapper\">\n <div className=\"paginatorPageButtonsScroller\">\n <div className=\"paginatorPageButtons\">\n {\n pageNumberButtonsVisible.map((pageNumber) => (\n <SimpleButton\n key={ `paginator_${ id }_page_${ pageNumber }` }\n id={ `paginator_${ id }_page_${ pageNumber }` }\n disabled={ activePage === pageNumber }\n onClickHandler={ () => handlePageChange(pageNumber) }\n label={ String(pageNumber) }\n buttonStyle={ { size: 'compact' } }\n />\n ))\n }\n </div>\n </div>\n </div>\n\n <SimpleButton\n id={ `paginator_${ id }_next` }\n disabled={ activePage === totalPages }\n onClickHandler={ () => handlePageChange(activePage + 1) }\n rightIcon={ isNonNullNextIcon ? buttonConfig?.nextButton?.icon || 'next2' : undefined }\n hideLabel={ buttonConfig?.nextButton?.label ? false : true }\n label={ buttonConfig?.nextButton?.label || `Show next ${ pageSize } items` }\n buttonStyle={ { size: 'compact' } }\n />\n <SimpleButton\n id={ `paginator_${ id }_last` }\n disabled={ activePage === totalPages }\n onClickHandler={ () => handlePageChange(totalPages) }\n rightIcon={ isNonNullLastIcon ? buttonConfig?.lastButton?.icon || 'last' : undefined }\n hideLabel={ buttonConfig?.lastButton?.label ? false : true }\n label={ buttonConfig?.lastButton?.label || 'Go to last item' }\n buttonStyle={ { size: 'compact' } }\n />\n\n </div>\n { isPageSizeChangeAllowed && pageSizeChangePosition === 'right' && pageSizeChange() }\n </>\n ) }\n { paginationType === 'showMore' && (\n <div className=\"showMore\">\n <SimpleButton\n id={ `paginator_${ id }_previous` }\n onClickHandler={ () => handlePageChange(activePage + 1) }\n rightIcon={ { icon: 'arrowDown' } }\n label=\"Show more items\"\n buttonStyle={ { size: 'compact' } }\n />\n </div>\n ) }\n </div>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.CircularProgressIndicator = void 0;
|
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _Tooltip = require("../../tooltip/Tooltip");
|
|
12
|
+
var _iconHelpers = require("../../../../helpers/iconHelpers");
|
|
13
|
+
require("./circularProgressIndicator.css");
|
|
14
|
+
const CircularProgressIndicator = ({
|
|
15
|
+
name,
|
|
16
|
+
progress,
|
|
17
|
+
description = '',
|
|
18
|
+
statusMessage = '',
|
|
19
|
+
icon = null,
|
|
20
|
+
hideLabel = false,
|
|
21
|
+
id,
|
|
22
|
+
mode = 'default',
|
|
23
|
+
onClickHandler,
|
|
24
|
+
size = 'default'
|
|
25
|
+
}) => {
|
|
26
|
+
const clampedProgress = Math.min(100, Math.max(0, progress));
|
|
27
|
+
const progressCopy = `${clampedProgress}% complete`;
|
|
28
|
+
const progressSummary = `${progressCopy}${description ? ` ${description}` : ''}`;
|
|
29
|
+
const hasStatus = mode !== 'default';
|
|
30
|
+
const statusTooltipId = `${id}_status`;
|
|
31
|
+
const isActionable = typeof onClickHandler === 'function';
|
|
32
|
+
const getTitle = () => {
|
|
33
|
+
if (statusMessage) {
|
|
34
|
+
return statusMessage;
|
|
35
|
+
}
|
|
36
|
+
return progressSummary;
|
|
37
|
+
};
|
|
38
|
+
const modeIconsMap = {
|
|
39
|
+
default: '',
|
|
40
|
+
warning: 'warning',
|
|
41
|
+
error: 'notification',
|
|
42
|
+
success: 'checkmark'
|
|
43
|
+
};
|
|
44
|
+
const progressIndicatorContent = /*#__PURE__*/_react.default.createElement("span", {
|
|
45
|
+
className: "progressIndicator"
|
|
46
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
47
|
+
className: "glowRing"
|
|
48
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
49
|
+
className: "progressRing"
|
|
50
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
51
|
+
className: "actionIcon"
|
|
52
|
+
}, (0, _iconHelpers.renderIcon)(icon), /*#__PURE__*/_react.default.createElement("span", {
|
|
53
|
+
className: `labelText ${hideLabel || size === 'xsmall' ? 'sr-only' : ''}`
|
|
54
|
+
}, name)), hasStatus && /*#__PURE__*/_react.default.createElement("span", {
|
|
55
|
+
className: "statusIndicator"
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
57
|
+
passiveTrigger: true,
|
|
58
|
+
triggerId: statusTooltipId,
|
|
59
|
+
customCssClass: "statusIcon",
|
|
60
|
+
icon: modeIconsMap[mode]
|
|
61
|
+
}, getTitle())));
|
|
62
|
+
const sharedProps = {
|
|
63
|
+
className: `circularProgressIndicator ${mode}Mode ${size}`,
|
|
64
|
+
id,
|
|
65
|
+
style: {
|
|
66
|
+
'--progress': `${clampedProgress}%`
|
|
67
|
+
},
|
|
68
|
+
title: hasStatus ? '' : getTitle(),
|
|
69
|
+
'aria-label': progressSummary,
|
|
70
|
+
...(hasStatus ? {
|
|
71
|
+
'aria-describedby': statusTooltipId + '_content'
|
|
72
|
+
} : {})
|
|
73
|
+
};
|
|
74
|
+
if (isActionable) {
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({}, sharedProps, {
|
|
76
|
+
type: "button",
|
|
77
|
+
onClick: onClickHandler
|
|
78
|
+
}), progressIndicatorContent);
|
|
79
|
+
}
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, sharedProps, {
|
|
81
|
+
role: "progressbar",
|
|
82
|
+
"aria-valuemin": 0,
|
|
83
|
+
"aria-valuemax": 100,
|
|
84
|
+
"aria-valuenow": clampedProgress
|
|
85
|
+
}), progressIndicatorContent);
|
|
86
|
+
};
|
|
87
|
+
exports.CircularProgressIndicator = CircularProgressIndicator;
|
|
88
|
+
var _default = exports.default = CircularProgressIndicator;
|
|
89
|
+
//# sourceMappingURL=CircularProgressIndicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircularProgressIndicator.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","CircularProgressIndicator","_extends2","_react","_Tooltip","_iconHelpers","name","progress","description","statusMessage","icon","hideLabel","id","mode","onClickHandler","size","clampedProgress","Math","min","max","progressCopy","progressSummary","hasStatus","statusTooltipId","isActionable","getTitle","modeIconsMap","warning","error","success","progressIndicatorContent","createElement","className","renderIcon","Tooltip","passiveTrigger","triggerId","customCssClass","sharedProps","style","title","type","onClick","role","_default"],"sources":["../../../../../../src/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Tooltip } from '../../tooltip/Tooltip';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\n\nimport './circularProgressIndicator.scss';\n\nexport interface CircularProgressIndicatorProps {\n name: string;\n progress: number; // 0 - 100\n description?: string;\n statusMessage?: string;\n icon?: IconSource;\n hideLabel?: boolean;\n id: string;\n onClickHandler?: () => void;\n mode?: 'default' | 'warning' | 'error' | 'success';\n size?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';\n}\n\nexport const CircularProgressIndicator: React.FC<CircularProgressIndicatorProps> = (\n {\n name,\n progress,\n description = '',\n statusMessage = '',\n icon = null,\n hideLabel = false,\n id,\n mode = 'default',\n onClickHandler,\n size = 'default',\n }\n) => {\n const clampedProgress = Math.min(100, Math.max(0, progress));\n const progressCopy = `${ clampedProgress }% complete`;\n const progressSummary = `${ progressCopy }${ description ? ` ${ description }` : '' }`;\n const hasStatus = mode !== 'default';\n const statusTooltipId = `${ id }_status`;\n const isActionable = typeof onClickHandler === 'function';\n \n const getTitle = () => {\n if (statusMessage) {\n return statusMessage;\n }\n return progressSummary;\n };\n\n const modeIconsMap = {\n default: '',\n warning: 'warning',\n error: 'notification',\n success: 'checkmark',\n };\n\n const progressIndicatorContent = (\n <span className=\"progressIndicator\">\n <span className=\"glowRing\" />\n <span className=\"progressRing\" />\n <span className=\"actionIcon\">\n { renderIcon(icon) }\n <span className={ `labelText ${ hideLabel || size === 'xsmall' ? 'sr-only' : '' }` }>{ name }</span>\n </span>\n\n { hasStatus &&\n <span className=\"statusIndicator\">\n <Tooltip\n passiveTrigger\n triggerId={ statusTooltipId }\n customCssClass=\"statusIcon\"\n icon={ modeIconsMap[mode] }\n >\n { getTitle() }\n </Tooltip>\n </span>\n }\n </span>\n );\n\n const sharedProps = {\n className: `circularProgressIndicator ${ mode }Mode ${ size }`,\n id,\n style: {\n '--progress': `${ clampedProgress }%`,\n } as React.CSSProperties,\n title: hasStatus ? '' : getTitle(),\n 'aria-label': progressSummary,\n ...(hasStatus ? { 'aria-describedby': statusTooltipId + '_content' } : {}),\n };\n\n if (isActionable) {\n return (\n <button\n { ...sharedProps }\n type=\"button\"\n onClick={ onClickHandler }\n >\n { progressIndicatorContent }\n </button>\n );\n }\n\n return (\n <div\n { ...sharedProps }\n role=\"progressbar\"\n aria-valuemin={ 0 }\n aria-valuemax={ 100 }\n aria-valuenow={ clampedProgress }\n >\n { progressIndicatorContent }\n </div>\n );\n};\n\nexport default CircularProgressIndicator;"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
.circularProgressIndicator {
|
|
2
|
+
--progress: 0%; /* Overwrite the progress value to set the progress (0% to 100%) */
|
|
3
|
+
--progressIndicatorSize: 100px;
|
|
4
|
+
--progressIndicatorBgColor: #f0f0f0;
|
|
5
|
+
--glowRingThickness: 5%;
|
|
6
|
+
--progressRingSize: 90%;
|
|
7
|
+
--progressRingThickness: 10%;
|
|
8
|
+
--glowRingColor: #ec008c;
|
|
9
|
+
--glowRingColorHighlight: #fff;
|
|
10
|
+
--glowRingColorShade: #B02568;
|
|
11
|
+
--errorColor: #ff0000;
|
|
12
|
+
--errorColorShade: #cc0000;
|
|
13
|
+
--warnColor: #ffcc00;
|
|
14
|
+
--warnColorShade: #ff9900;
|
|
15
|
+
--successColor: #009900;
|
|
16
|
+
--successColorShade: #006600;
|
|
17
|
+
--progressRingColor: #ec008c;
|
|
18
|
+
--progressRingColorHighlight: #fff;
|
|
19
|
+
--progressRingColorShade: #B02568;
|
|
20
|
+
--progressStartAngle: -45deg;
|
|
21
|
+
border: 0;
|
|
22
|
+
background: transparent;
|
|
23
|
+
}
|
|
24
|
+
.circularProgressIndicator.xsmall {
|
|
25
|
+
--progressIndicatorSize: 40px;
|
|
26
|
+
--glowRingThickness: 5px;
|
|
27
|
+
}
|
|
28
|
+
.circularProgressIndicator.xsmall .statusIndicator {
|
|
29
|
+
width: 16px;
|
|
30
|
+
height: 16px;
|
|
31
|
+
top: 5%;
|
|
32
|
+
right: 5%;
|
|
33
|
+
border: none;
|
|
34
|
+
}
|
|
35
|
+
.circularProgressIndicator.xsmall .statusIndicator .statusIcon .icon {
|
|
36
|
+
font-size: 11px;
|
|
37
|
+
}
|
|
38
|
+
.circularProgressIndicator.xsmall .statusIndicator .statusIcon .icon.icon-warning {
|
|
39
|
+
position: relative;
|
|
40
|
+
top: -1px;
|
|
41
|
+
}
|
|
42
|
+
.circularProgressIndicator.small {
|
|
43
|
+
--progressIndicatorSize: 75px;
|
|
44
|
+
}
|
|
45
|
+
.circularProgressIndicator.small .actionIcon .labelText {
|
|
46
|
+
font-size: 11px;
|
|
47
|
+
}
|
|
48
|
+
.circularProgressIndicator.small .statusIndicator {
|
|
49
|
+
width: 18px;
|
|
50
|
+
height: 18px;
|
|
51
|
+
top: 5%;
|
|
52
|
+
right: 5%;
|
|
53
|
+
border-width: 1px;
|
|
54
|
+
}
|
|
55
|
+
.circularProgressIndicator.small .statusIndicator .statusIcon .icon {
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
}
|
|
58
|
+
.circularProgressIndicator.small .statusIndicator .statusIcon .icon.icon-warning {
|
|
59
|
+
position: relative;
|
|
60
|
+
top: -1px;
|
|
61
|
+
}
|
|
62
|
+
.circularProgressIndicator.large {
|
|
63
|
+
--progressIndicatorSize: 150px;
|
|
64
|
+
}
|
|
65
|
+
.circularProgressIndicator.large .actionIcon .icon {
|
|
66
|
+
height: 30px;
|
|
67
|
+
font-size: 20px;
|
|
68
|
+
}
|
|
69
|
+
.circularProgressIndicator.large .actionIcon .labelText {
|
|
70
|
+
font-size: 16px;
|
|
71
|
+
}
|
|
72
|
+
.circularProgressIndicator.large .actionIcon .iconSvg {
|
|
73
|
+
height: 50px;
|
|
74
|
+
width: 50px;
|
|
75
|
+
}
|
|
76
|
+
.circularProgressIndicator.large .actionIcon .iconSvg path {
|
|
77
|
+
stroke-width: 1px;
|
|
78
|
+
}
|
|
79
|
+
.circularProgressIndicator.large .statusIndicator {
|
|
80
|
+
width: 30px;
|
|
81
|
+
height: 30px;
|
|
82
|
+
}
|
|
83
|
+
.circularProgressIndicator.large .statusIndicator .statusIcon .icon {
|
|
84
|
+
font-size: 16px;
|
|
85
|
+
}
|
|
86
|
+
.circularProgressIndicator.large .statusIndicator .statusIcon .icon.icon-warning {
|
|
87
|
+
position: relative;
|
|
88
|
+
top: -1px;
|
|
89
|
+
}
|
|
90
|
+
.circularProgressIndicator.xlarge {
|
|
91
|
+
--progressIndicatorSize: 200px;
|
|
92
|
+
}
|
|
93
|
+
.circularProgressIndicator.xlarge .actionIcon .icon {
|
|
94
|
+
height: 40px;
|
|
95
|
+
font-size: 30px;
|
|
96
|
+
}
|
|
97
|
+
.circularProgressIndicator.xlarge .actionIcon .labelText {
|
|
98
|
+
font-size: 16px;
|
|
99
|
+
}
|
|
100
|
+
.circularProgressIndicator.xlarge .actionIcon .iconSvg {
|
|
101
|
+
height: 75px;
|
|
102
|
+
width: 75px;
|
|
103
|
+
}
|
|
104
|
+
.circularProgressIndicator.xlarge .actionIcon .iconSvg path {
|
|
105
|
+
stroke-width: 1px;
|
|
106
|
+
}
|
|
107
|
+
.circularProgressIndicator.xlarge .statusIndicator {
|
|
108
|
+
width: 40px;
|
|
109
|
+
height: 40px;
|
|
110
|
+
}
|
|
111
|
+
.circularProgressIndicator.xlarge .statusIndicator .statusIcon .icon {
|
|
112
|
+
font-size: 18px;
|
|
113
|
+
}
|
|
114
|
+
.circularProgressIndicator.xlarge .statusIndicator .statusIcon .icon.icon-warning {
|
|
115
|
+
position: relative;
|
|
116
|
+
top: -1px;
|
|
117
|
+
}
|
|
118
|
+
.circularProgressIndicator.errorMode {
|
|
119
|
+
--glowRingColor: var(--errorColor);
|
|
120
|
+
--glowRingColorHighlight: var(--errorColor);
|
|
121
|
+
--glowRingColorShade: var(--errorColorShade);
|
|
122
|
+
--progressRingColor: var(--errorColor);
|
|
123
|
+
--progressRingColorShade: var(--errorColorShade);
|
|
124
|
+
}
|
|
125
|
+
.circularProgressIndicator.errorMode .statusIndicator {
|
|
126
|
+
color: var(--errorColor);
|
|
127
|
+
border-color: var(--errorColorShade);
|
|
128
|
+
}
|
|
129
|
+
.circularProgressIndicator.errorMode .statusIndicator .icon {
|
|
130
|
+
color: var(--errorColor);
|
|
131
|
+
}
|
|
132
|
+
.circularProgressIndicator.warningMode {
|
|
133
|
+
--glowRingColor: var(--warnColor);
|
|
134
|
+
--glowRingColorHighlight: var(--warnColor);
|
|
135
|
+
--glowRingColorShade: var(--warnColorShade);
|
|
136
|
+
--progressRingColor: var(--warnColor);
|
|
137
|
+
--progressRingColorShade: var(--warnColorShade);
|
|
138
|
+
}
|
|
139
|
+
.circularProgressIndicator.warningMode .statusIndicator {
|
|
140
|
+
color: var(--warnColorShade);
|
|
141
|
+
border-color: var(--warnColorShade);
|
|
142
|
+
}
|
|
143
|
+
.circularProgressIndicator.warningMode .statusIndicator .icon {
|
|
144
|
+
color: var(--warnColorShade);
|
|
145
|
+
}
|
|
146
|
+
.circularProgressIndicator.successMode {
|
|
147
|
+
--glowRingColor: var(--successColor);
|
|
148
|
+
--glowRingColorHighlight: var(--successColor);
|
|
149
|
+
--glowRingColorShade: var(--successColorShade);
|
|
150
|
+
--progressRingColor: var(--successColor);
|
|
151
|
+
--progressRingColorShade: var(--successColorShade);
|
|
152
|
+
}
|
|
153
|
+
.circularProgressIndicator.successMode .statusIndicator {
|
|
154
|
+
color: var(--successColorShade);
|
|
155
|
+
border-color: var(--successColorShade);
|
|
156
|
+
}
|
|
157
|
+
.circularProgressIndicator.successMode .statusIndicator .icon {
|
|
158
|
+
color: var(--successColorShade);
|
|
159
|
+
}
|
|
160
|
+
.circularProgressIndicator .progressIndicator {
|
|
161
|
+
display: block;
|
|
162
|
+
position: relative;
|
|
163
|
+
width: var(--progressIndicatorSize);
|
|
164
|
+
height: var(--progressIndicatorSize);
|
|
165
|
+
}
|
|
166
|
+
.circularProgressIndicator .progressIndicator .glowRing {
|
|
167
|
+
width: 100%;
|
|
168
|
+
height: 100%;
|
|
169
|
+
position: absolute;
|
|
170
|
+
border-radius: 50%;
|
|
171
|
+
top: 0;
|
|
172
|
+
left: 0;
|
|
173
|
+
background-image: conic-gradient(from var(--progressStartAngle), var(--glowRingColorHighlight) 0%, var(--glowRingColor) 20%, var(--glowRingColorShade) 50%, var(--glowRingColor) 80%, var(--glowRingColorHighlight) 95%);
|
|
174
|
+
box-shadow: 0 0 10px 0 var(--glowRingColor);
|
|
175
|
+
}
|
|
176
|
+
.circularProgressIndicator .progressIndicator .glowRing:before {
|
|
177
|
+
content: "";
|
|
178
|
+
position: absolute;
|
|
179
|
+
top: calc(var(--glowRingThickness) / 2);
|
|
180
|
+
left: calc(var(--glowRingThickness) / 2);
|
|
181
|
+
width: calc(100% - var(--glowRingThickness));
|
|
182
|
+
height: calc(100% - var(--glowRingThickness));
|
|
183
|
+
border-radius: 50%;
|
|
184
|
+
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
|
|
185
|
+
background-color: var(--progressIndicatorBgColor);
|
|
186
|
+
}
|
|
187
|
+
.circularProgressIndicator .progressRing {
|
|
188
|
+
width: var(--progressRingSize);
|
|
189
|
+
height: var(--progressRingSize);
|
|
190
|
+
border-radius: 50%;
|
|
191
|
+
background-image: conic-gradient(from var(--progressStartAngle), var(--progressRingColorHighlight) 0%, var(--progressRingColor) 30%, var(--progressRingColorShade) 50%, var(--progressRingColor) 80%, var(--progressRingColorHighlight) 95%);
|
|
192
|
+
position: absolute;
|
|
193
|
+
top: 50%;
|
|
194
|
+
left: 50%;
|
|
195
|
+
transform: translate(-50%, -50%);
|
|
196
|
+
}
|
|
197
|
+
.circularProgressIndicator .progressRing:before, .circularProgressIndicator .progressRing:after {
|
|
198
|
+
content: "";
|
|
199
|
+
position: absolute;
|
|
200
|
+
border-radius: 50%;
|
|
201
|
+
top: 50%;
|
|
202
|
+
left: 50%;
|
|
203
|
+
transform: translate(-50%, -50%);
|
|
204
|
+
}
|
|
205
|
+
.circularProgressIndicator .progressRing {
|
|
206
|
+
/* Mask the progress ring to show only the progress portion */
|
|
207
|
+
}
|
|
208
|
+
.circularProgressIndicator .progressRing:before {
|
|
209
|
+
width: calc(var(--progressRingSize) + var(--progressRingThickness) + 2px);
|
|
210
|
+
height: calc(var(--progressRingSize) + var(--progressRingThickness) + 2px);
|
|
211
|
+
border: 1px solid #fff;
|
|
212
|
+
z-index: 1;
|
|
213
|
+
/* This css is correct. Ignore VSCode warning. */
|
|
214
|
+
background-image: conic-gradient(from var(--progressStartAngle), transparent 0 calc(var(--progress) - 0.2%), var(--progressIndicatorBgColor) calc(var(--progress) + 0.2%));
|
|
215
|
+
}
|
|
216
|
+
.circularProgressIndicator .progressRing:after {
|
|
217
|
+
z-index: 2;
|
|
218
|
+
width: calc(var(--progressRingSize) - var(--progressRingThickness));
|
|
219
|
+
height: calc(var(--progressRingSize) - var(--progressRingThickness));
|
|
220
|
+
background-color: var(--progressIndicatorBgColor);
|
|
221
|
+
box-shadow: inset 1px 1px 10px 1px rgba(0, 0, 0, 0.15), inset -2px -2px 5px 1px rgba(0, 0, 0, 0.15);
|
|
222
|
+
}
|
|
223
|
+
.circularProgressIndicator .actionIcon {
|
|
224
|
+
position: absolute;
|
|
225
|
+
top: 50%;
|
|
226
|
+
left: 50%;
|
|
227
|
+
transform: translate(-50%, -50%);
|
|
228
|
+
width: 50%;
|
|
229
|
+
height: 50%;
|
|
230
|
+
display: flex;
|
|
231
|
+
flex-direction: column;
|
|
232
|
+
align-items: center;
|
|
233
|
+
text-align: center;
|
|
234
|
+
justify-content: center;
|
|
235
|
+
}
|
|
236
|
+
.circularProgressIndicator .actionIcon .icon {
|
|
237
|
+
height: 24px;
|
|
238
|
+
font-size: 24px;
|
|
239
|
+
line-height: 1;
|
|
240
|
+
}
|
|
241
|
+
.circularProgressIndicator .actionIcon .labelText {
|
|
242
|
+
font-size: 13px;
|
|
243
|
+
line-height: 1;
|
|
244
|
+
}
|
|
245
|
+
.circularProgressIndicator .actionIcon .iconSvg {
|
|
246
|
+
fill: none;
|
|
247
|
+
stroke-width: 1.5;
|
|
248
|
+
stroke-linecap: round;
|
|
249
|
+
stroke-linejoin: round;
|
|
250
|
+
height: 24px;
|
|
251
|
+
}
|
|
252
|
+
.circularProgressIndicator .actionIcon .iconSvg .svgIconColor_1 {
|
|
253
|
+
stroke: #000;
|
|
254
|
+
}
|
|
255
|
+
.circularProgressIndicator .actionIcon .iconSvg .svgIconColor_2 {
|
|
256
|
+
stroke: #000;
|
|
257
|
+
}
|
|
258
|
+
.circularProgressIndicator .actionIcon .iconSvg .svgIconFill_1 {
|
|
259
|
+
fill: var(--progressRingColor);
|
|
260
|
+
}
|
|
261
|
+
.circularProgressIndicator .statusIndicator {
|
|
262
|
+
position: absolute;
|
|
263
|
+
top: 9%;
|
|
264
|
+
right: 9%;
|
|
265
|
+
width: 20px;
|
|
266
|
+
height: 20px;
|
|
267
|
+
border-radius: 50%;
|
|
268
|
+
border: 2px solid;
|
|
269
|
+
font-size: 20px;
|
|
270
|
+
font-weight: bold;
|
|
271
|
+
background: #fff;
|
|
272
|
+
display: flex;
|
|
273
|
+
justify-content: center;
|
|
274
|
+
align-items: center;
|
|
275
|
+
text-align: center;
|
|
276
|
+
}
|
|
277
|
+
.circularProgressIndicator .statusIndicator .tooltip {
|
|
278
|
+
margin: 0;
|
|
279
|
+
width: 100%;
|
|
280
|
+
}
|
|
281
|
+
.circularProgressIndicator .statusIndicator .tooltip > span.icon_only { /* Non-button passive tooltip version */
|
|
282
|
+
left: 0;
|
|
283
|
+
top: 0;
|
|
284
|
+
min-width: auto;
|
|
285
|
+
min-height: auto;
|
|
286
|
+
width: 100%;
|
|
287
|
+
height: 100%;
|
|
288
|
+
}
|
|
289
|
+
.circularProgressIndicator .statusIndicator .tooltip > span.icon_only .icon,
|
|
290
|
+
.circularProgressIndicator .statusIndicator .tooltip > span.icon_only .svgIcon {
|
|
291
|
+
width: 100%;
|
|
292
|
+
height: 100%;
|
|
293
|
+
}
|
|
294
|
+
.circularProgressIndicator .statusIndicator .statusIcon .icon {
|
|
295
|
+
font-size: 14px;
|
|
296
|
+
background: none;
|
|
297
|
+
}
|
|
298
|
+
.circularProgressIndicator .statusIndicator .statusIcon .icon.icon-warning {
|
|
299
|
+
position: relative;
|
|
300
|
+
top: -1px;
|
|
301
|
+
}
|
|
@@ -60,9 +60,7 @@ const RevealMoreBelow = props => {
|
|
|
60
60
|
id: "revealMore_button-below",
|
|
61
61
|
cssClass: "button compact",
|
|
62
62
|
label: isExpanded ? props.revealLessLabel || 'Reveal Less' : props.revealMoreLabel || 'Reveal More',
|
|
63
|
-
leftIcon: props.icon
|
|
64
|
-
icon: isExpanded ? props.icon.onRevealLess : props.icon.onRevealMore
|
|
65
|
-
} : undefined,
|
|
63
|
+
leftIcon: isExpanded ? props.icon?.onRevealLess : props.icon?.onRevealMore,
|
|
66
64
|
"aria-hidden": props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true
|
|
67
65
|
})));
|
|
68
66
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RevealMoreBelow.js","names":["Object","defineProperty","exports","value","RevealMoreBelow","_react","_interopRequireWildcard","require","_","_useRevealMoreLogic","_useCustomButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","props","children","lineClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","useRevealMoreLogic","renderCustomButton","useCustomButton","contentRef","useRef","isCustomButton","useEffect","el","current","scrollHeight","clientHeight","elementStyle","overflow","display","WebkitBoxOrient","WebkitLineClamp","createElement","className","ref","style","revealLessButton","revealMoreButton","SimpleButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore"
|
|
1
|
+
{"version":3,"file":"RevealMoreBelow.js","names":["Object","defineProperty","exports","value","RevealMoreBelow","_react","_interopRequireWildcard","require","_","_useRevealMoreLogic","_useCustomButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","props","children","lineClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","useRevealMoreLogic","renderCustomButton","useCustomButton","contentRef","useRef","isCustomButton","useEffect","el","current","scrollHeight","clientHeight","elementStyle","overflow","display","WebkitBoxOrient","WebkitLineClamp","createElement","className","ref","style","revealLessButton","revealMoreButton","SimpleButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore"],"sources":["../../../../../src/components/design/revealMore/RevealMoreBelow.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport { SimpleButton } from '../../..';\nimport { RevealMoreBelowProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreBelow: React.FC<RevealMoreBelowProps> = (props) => {\n const {\n children,\n lineClamp = 2,\n customCssClass\n } = props;\n\n const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n const { renderCustomButton } = useCustomButton(toggleExpand);\n const contentRef = useRef<HTMLDivElement>(null);\n\n const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n useEffect(() => {\n const el = contentRef.current;\n if (el) {\n setIsOverflowing(el.scrollHeight > el.clientHeight);\n }\n }, [children, lineClamp]);\n\n const elementStyle: React.CSSProperties = {\n overflow: 'hidden',\n display: '-webkit-box',\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: lineClamp,\n };\n\n return (\n <div className={ `revealMore revealMore_below ${ customCssClass || '' }` }>\n <div\n ref={ contentRef }\n className={ 'revealMore_content' }\n style={ isExpanded ? { ...elementStyle, WebkitLineClamp: 'none' } : elementStyle }\n >\n { children }\n </div>\n { isOverflowing && (\n isCustomButton ? (\n renderCustomButton(\n isExpanded ? props.revealLessButton : props.revealMoreButton\n )\n ) : (\n <SimpleButton\n onClickHandler={ () => {\n toggleExpand();\n if (isExpanded) {\n (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n } else {\n (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n }\n } }\n id='revealMore_button-below'\n cssClass=\"button compact\"\n label={\n isExpanded \n ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n }\n leftIcon={\n isExpanded\n ? (props as ManagedButtonProps).icon?.onRevealLess\n : (props as ManagedButtonProps).icon?.onRevealMore\n }\n aria-hidden = { props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true }\n />\n )\n ) }\n </div>\n );\n};"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.RevealMoreInline = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var
|
|
9
|
+
var _SimpleButton = require("../../form/buttons/SimpleButton");
|
|
10
10
|
var _useRevealMoreLogic = require("./hooks/useRevealMoreLogic");
|
|
11
11
|
var _useCustomButton = require("./hooks/useCustomButton");
|
|
12
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
@@ -43,7 +43,7 @@ const RevealMoreInline = props => {
|
|
|
43
43
|
className: `revealMore revealMore_inline ${customCssClass || ''}`
|
|
44
44
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
45
45
|
className: "revealMore_content"
|
|
46
|
-
}, displayText, isOverflowing && (isCustomButton ? renderCustomButton(isExpanded ? props.revealLessButton : props.revealMoreButton) : /*#__PURE__*/_react.default.createElement(
|
|
46
|
+
}, displayText, isOverflowing && (isCustomButton ? renderCustomButton(isExpanded ? props.revealLessButton : props.revealMoreButton) : /*#__PURE__*/_react.default.createElement(_SimpleButton.SimpleButton, {
|
|
47
47
|
onClickHandler: () => {
|
|
48
48
|
toggleExpand();
|
|
49
49
|
if (isExpanded) {
|
|
@@ -55,9 +55,7 @@ const RevealMoreInline = props => {
|
|
|
55
55
|
id: "revealMore_button-inline",
|
|
56
56
|
cssClass: "button compact text_only",
|
|
57
57
|
label: isExpanded ? props.revealLessLabel || 'Reveal Less' : props.revealMoreLabel || 'Reveal More',
|
|
58
|
-
leftIcon: props.icon
|
|
59
|
-
icon: isExpanded ? props.icon.onRevealLess : props.icon.onRevealMore
|
|
60
|
-
} : undefined
|
|
58
|
+
leftIcon: isExpanded ? props.icon?.onRevealLess : props.icon?.onRevealMore
|
|
61
59
|
}))));
|
|
62
60
|
};
|
|
63
61
|
exports.RevealMoreInline = RevealMoreInline;
|