@govtechsg/sgds-web-component 2.1.0 → 2.1.2
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/base/card-element.js +0 -1
- package/base/card-element.js.map +1 -1
- package/base/card.js +0 -1
- package/base/card.js.map +1 -1
- package/base/dropdown-element.js +0 -1
- package/base/dropdown-element.js.map +1 -1
- package/base/dropdown-list-element.js +0 -1
- package/base/dropdown-list-element.js.map +1 -1
- package/base/form-check-element.js +6 -5
- package/base/form-check-element.js.map +1 -1
- package/base/link-element.js +0 -1
- package/base/link-element.js.map +1 -1
- package/base/sgds-element.js +0 -1
- package/base/sgds-element.js.map +1 -1
- package/base/sgds-element2.js +0 -1
- package/base/sgds-element2.js.map +1 -1
- package/components/Accordion/accordion-item.js +0 -1
- package/components/Accordion/accordion-item.js.map +1 -1
- package/components/Accordion/accordion.js +0 -1
- package/components/Accordion/accordion.js.map +1 -1
- package/components/Accordion/sgds-accordion-item.js +0 -1
- package/components/Accordion/sgds-accordion-item.js.map +1 -1
- package/components/Accordion/sgds-accordion.js +0 -1
- package/components/Accordion/sgds-accordion.js.map +1 -1
- package/components/ActionCard/action-card.js +0 -1
- package/components/ActionCard/action-card.js.map +1 -1
- package/components/ActionCard/index.umd.js +9 -7
- package/components/ActionCard/index.umd.js.map +1 -1
- package/components/ActionCard/sgds-action-card.js +0 -1
- package/components/ActionCard/sgds-action-card.js.map +1 -1
- package/components/Alert/alert-link.js +0 -1
- package/components/Alert/alert-link.js.map +1 -1
- package/components/Alert/alert.js +0 -1
- package/components/Alert/alert.js.map +1 -1
- package/components/Alert/sgds-alert-heading.js +0 -1
- package/components/Alert/sgds-alert-heading.js.map +1 -1
- package/components/Alert/sgds-alert-link.js +0 -1
- package/components/Alert/sgds-alert-link.js.map +1 -1
- package/components/Alert/sgds-alert.js +0 -1
- package/components/Alert/sgds-alert.js.map +1 -1
- package/components/Badge/badge.js +0 -1
- package/components/Badge/badge.js.map +1 -1
- package/components/Badge/sgds-badge.js +0 -1
- package/components/Badge/sgds-badge.js.map +1 -1
- package/components/Breadcrumb/breadcrumb-item.js +0 -1
- package/components/Breadcrumb/breadcrumb-item.js.map +1 -1
- package/components/Breadcrumb/breadcrumb.js +0 -1
- package/components/Breadcrumb/breadcrumb.js.map +1 -1
- package/components/Breadcrumb/sgds-breadcrumb-item.js +0 -1
- package/components/Breadcrumb/sgds-breadcrumb-item.js.map +1 -1
- package/components/Breadcrumb/sgds-breadcrumb.js +0 -1
- package/components/Breadcrumb/sgds-breadcrumb.js.map +1 -1
- package/components/Button/button.js +0 -1
- package/components/Button/button.js.map +1 -1
- package/components/Button/sgds-button.js +0 -1
- package/components/Button/sgds-button.js.map +1 -1
- package/components/Card/card.js +0 -1
- package/components/Card/card.js.map +1 -1
- package/components/Card/sgds-card.js +0 -1
- package/components/Card/sgds-card.js.map +1 -1
- package/components/Checkbox/checkbox.js +1 -2
- package/components/Checkbox/checkbox.js.map +1 -1
- package/components/Checkbox/index.umd.js +8 -6
- package/components/Checkbox/index.umd.js.map +1 -1
- package/components/Checkbox/sgds-checkbox.js +0 -1
- package/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/components/ComboBox/combo-box.js +0 -1
- package/components/ComboBox/combo-box.js.map +1 -1
- package/components/ComboBox/index.umd.js +2 -2
- package/components/ComboBox/index.umd.js.map +1 -1
- package/components/ComboBox/sgds-combo-box.js +0 -1
- package/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/components/Datepicker/datepicker-calendar.js +0 -1
- package/components/Datepicker/datepicker-calendar.js.map +1 -1
- package/components/Datepicker/datepicker-calendar2.js +0 -1
- package/components/Datepicker/datepicker-calendar2.js.map +1 -1
- package/components/Datepicker/datepicker-header.js +0 -1
- package/components/Datepicker/datepicker-header.js.map +1 -1
- package/components/Datepicker/datepicker-header2.js +0 -1
- package/components/Datepicker/datepicker-header2.js.map +1 -1
- package/components/Datepicker/datepicker-input.js +0 -1
- package/components/Datepicker/datepicker-input.js.map +1 -1
- package/components/Datepicker/datepicker-input2.js +0 -1
- package/components/Datepicker/datepicker-input2.js.map +1 -1
- package/components/Datepicker/datepicker.js +0 -1
- package/components/Datepicker/datepicker.js.map +1 -1
- package/components/Datepicker/index.umd.js +2 -2
- package/components/Datepicker/index.umd.js.map +1 -1
- package/components/Datepicker/sgds-datepicker.js +0 -1
- package/components/Datepicker/sgds-datepicker.js.map +1 -1
- package/components/Drawer/drawer.js +0 -1
- package/components/Drawer/drawer.js.map +1 -1
- package/components/Drawer/sgds-drawer.js +0 -1
- package/components/Drawer/sgds-drawer.js.map +1 -1
- package/components/Dropdown/dropdown.js +0 -1
- package/components/Dropdown/dropdown.js.map +1 -1
- package/components/Dropdown/sgds-dropdown-item.js +0 -1
- package/components/Dropdown/sgds-dropdown-item.js.map +1 -1
- package/components/Dropdown/sgds-dropdown.js +0 -1
- package/components/Dropdown/sgds-dropdown.js.map +1 -1
- package/components/FileUpload/file-upload.js +0 -1
- package/components/FileUpload/file-upload.js.map +1 -1
- package/components/FileUpload/sgds-file-upload.js +0 -1
- package/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/components/Footer/footer.js +0 -1
- package/components/Footer/footer.js.map +1 -1
- package/components/Footer/sgds-footer.js +0 -1
- package/components/Footer/sgds-footer.js.map +1 -1
- package/components/Input/index.umd.js +2 -2
- package/components/Input/index.umd.js.map +1 -1
- package/components/Input/input.js +0 -1
- package/components/Input/input.js.map +1 -1
- package/components/Input/sgds-input.js +1 -2
- package/components/Input/sgds-input.js.map +1 -1
- package/components/Mainnav/mainnav-dropdown.js +0 -1
- package/components/Mainnav/mainnav-dropdown.js.map +1 -1
- package/components/Mainnav/mainnav-item.js +0 -1
- package/components/Mainnav/mainnav-item.js.map +1 -1
- package/components/Mainnav/mainnav.js +0 -1
- package/components/Mainnav/mainnav.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-dropdown.js +0 -1
- package/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-item.js +0 -1
- package/components/Mainnav/sgds-mainnav-item.js.map +1 -1
- package/components/Mainnav/sgds-mainnav.js +0 -1
- package/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/components/Masthead/masthead.js +0 -1
- package/components/Masthead/masthead.js.map +1 -1
- package/components/Masthead/sgds-masthead.js +0 -1
- package/components/Masthead/sgds-masthead.js.map +1 -1
- package/components/Modal/modal.js +0 -1
- package/components/Modal/modal.js.map +1 -1
- package/components/Modal/sgds-modal.js +0 -1
- package/components/Modal/sgds-modal.js.map +1 -1
- package/components/Pagination/pagination.js +0 -1
- package/components/Pagination/pagination.js.map +1 -1
- package/components/Pagination/sgds-pagination.js +0 -1
- package/components/Pagination/sgds-pagination.js.map +1 -1
- package/components/Progress/progress-bar.js +0 -1
- package/components/Progress/progress-bar.js.map +1 -1
- package/components/Progress/progress.js +0 -1
- package/components/Progress/progress.js.map +1 -1
- package/components/Progress/sgds-progress-bar.js +0 -1
- package/components/Progress/sgds-progress-bar.js.map +1 -1
- package/components/Progress/sgds-progress.js +0 -1
- package/components/Progress/sgds-progress.js.map +1 -1
- package/components/QuantityToggle/index.umd.js +2 -2
- package/components/QuantityToggle/index.umd.js.map +1 -1
- package/components/QuantityToggle/quantity-toggle.js +0 -1
- package/components/QuantityToggle/quantity-toggle.js.map +1 -1
- package/components/QuantityToggle/sgds-quantity-toggle.js +0 -1
- package/components/QuantityToggle/sgds-quantity-toggle.js.map +1 -1
- package/components/Radio/index.umd.js +3 -3
- package/components/Radio/index.umd.js.map +1 -1
- package/components/Radio/radio-group.js +0 -1
- package/components/Radio/radio-group.js.map +1 -1
- package/components/Radio/radio.js +1 -2
- package/components/Radio/radio.js.map +1 -1
- package/components/Radio/sgds-radio-group.js +1 -2
- package/components/Radio/sgds-radio-group.js.map +1 -1
- package/components/Radio/sgds-radio.js +0 -1
- package/components/Radio/sgds-radio.js.map +1 -1
- package/components/Sidenav/sgds-sidenav-item.js +0 -1
- package/components/Sidenav/sgds-sidenav-item.js.map +1 -1
- package/components/Sidenav/sgds-sidenav-link.js +0 -1
- package/components/Sidenav/sgds-sidenav-link.js.map +1 -1
- package/components/Sidenav/sgds-sidenav.js +0 -1
- package/components/Sidenav/sgds-sidenav.js.map +1 -1
- package/components/Sidenav/sidenav-item.js +0 -1
- package/components/Sidenav/sidenav-item.js.map +1 -1
- package/components/Sidenav/sidenav-link.js +0 -1
- package/components/Sidenav/sidenav-link.js.map +1 -1
- package/components/Sidenav/sidenav.js +0 -1
- package/components/Sidenav/sidenav.js.map +1 -1
- package/components/Spinner/sgds-spinner.js +0 -1
- package/components/Spinner/sgds-spinner.js.map +1 -1
- package/components/Spinner/spinner.js +0 -1
- package/components/Spinner/spinner.js.map +1 -1
- package/components/Stepper/sgds-stepper.js +0 -1
- package/components/Stepper/sgds-stepper.js.map +1 -1
- package/components/Stepper/stepper.js +0 -1
- package/components/Stepper/stepper.js.map +1 -1
- package/components/Tab/sgds-tab-group.js +0 -1
- package/components/Tab/sgds-tab-group.js.map +1 -1
- package/components/Tab/sgds-tab-panel.js +0 -1
- package/components/Tab/sgds-tab-panel.js.map +1 -1
- package/components/Tab/sgds-tab.js +0 -1
- package/components/Tab/sgds-tab.js.map +1 -1
- package/components/Tab/tab-group.js +0 -1
- package/components/Tab/tab-group.js.map +1 -1
- package/components/Tab/tab-panel.js +0 -1
- package/components/Tab/tab-panel.js.map +1 -1
- package/components/Tab/tab.js +0 -1
- package/components/Tab/tab.js.map +1 -1
- package/components/Table/sgds-table.js +0 -1
- package/components/Table/sgds-table.js.map +1 -1
- package/components/Table/table.js +0 -1
- package/components/Table/table.js.map +1 -1
- package/components/Textarea/index.umd.js +2 -2
- package/components/Textarea/index.umd.js.map +1 -1
- package/components/Textarea/sgds-textarea.js +1 -2
- package/components/Textarea/sgds-textarea.js.map +1 -1
- package/components/Textarea/textarea.js +0 -1
- package/components/Textarea/textarea.js.map +1 -1
- package/components/Toast/sgds-toast-container.js +0 -1
- package/components/Toast/sgds-toast-container.js.map +1 -1
- package/components/Toast/sgds-toast.js +0 -1
- package/components/Toast/sgds-toast.js.map +1 -1
- package/components/Toast/toast-container.js +0 -1
- package/components/Toast/toast-container.js.map +1 -1
- package/components/Toast/toast.js +0 -1
- package/components/Toast/toast.js.map +1 -1
- package/components/Tooltip/sgds-tooltip.js +0 -1
- package/components/Tooltip/sgds-tooltip.js.map +1 -1
- package/components/Tooltip/tooltip.js +0 -1
- package/components/Tooltip/tooltip.js.map +1 -1
- package/components/index.umd.js +12 -10
- package/components/index.umd.js.map +1 -1
- package/index.umd.js +12 -10
- package/index.umd.js.map +1 -1
- package/internals/CloseButton/close-button.js +0 -1
- package/internals/CloseButton/close-button.js.map +1 -1
- package/internals/CloseButton/sgds-close-button.js +0 -1
- package/internals/CloseButton/sgds-close-button.js.map +1 -1
- package/package.json +1 -1
- package/react/accordion/index.cjs.js +1 -1
- package/react/accordion/index.js +1 -1
- package/react/accordion-item/index.cjs.js +1 -1
- package/react/accordion-item/index.js +1 -1
- package/react/action-card/index.cjs.js +1 -1
- package/react/action-card/index.js +1 -1
- package/react/alert/index.cjs.js +1 -1
- package/react/alert/index.js +1 -1
- package/react/alert-heading/index.cjs.js +1 -1
- package/react/alert-heading/index.js +1 -1
- package/react/alert-link/index.cjs.js +1 -1
- package/react/alert-link/index.js +1 -1
- package/react/badge/index.cjs.js +1 -1
- package/react/badge/index.js +1 -1
- package/react/base/card-element.cjs.js.map +1 -0
- package/react/base/card-element.js +26 -0
- package/react/base/card-element.js.map +1 -0
- package/react/base/card.js +7 -0
- package/react/base/card.js.map +1 -0
- package/react/base/dropdown-element.cjs.js.map +1 -0
- package/react/base/dropdown-element.js +174 -0
- package/react/base/dropdown-element.js.map +1 -0
- package/react/base/dropdown-list-element.cjs.js.map +1 -0
- package/react/base/dropdown-list-element.js +130 -0
- package/react/base/dropdown-list-element.js.map +1 -0
- package/{base → react/base}/form-check-element.cjs.js +6 -4
- package/react/base/form-check-element.cjs.js.map +1 -0
- package/react/base/form-check-element.js +169 -0
- package/react/base/form-check-element.js.map +1 -0
- package/react/base/link-element.cjs.js.map +1 -0
- package/react/base/link-element.js +53 -0
- package/react/base/link-element.js.map +1 -0
- package/react/base/sgds-element.cjs.js.map +1 -0
- package/react/base/sgds-element.js +24 -0
- package/react/base/sgds-element.js.map +1 -0
- package/react/base/sgds-element2.js +7 -0
- package/react/base/sgds-element2.js.map +1 -0
- package/react/breadcrumb/index.cjs.js +1 -1
- package/react/breadcrumb/index.js +1 -1
- package/react/breadcrumb-item/index.cjs.js +1 -1
- package/react/breadcrumb-item/index.js +1 -1
- package/react/button/index.cjs.js +1 -1
- package/react/button/index.js +1 -1
- package/react/card/index.cjs.js +1 -1
- package/react/card/index.js +1 -1
- package/react/checkbox/index.cjs.js +1 -1
- package/react/checkbox/index.js +1 -1
- package/react/combo-box/index.cjs.js +1 -1
- package/react/combo-box/index.js +1 -1
- package/react/components/Accordion/accordion-item.js +7 -0
- package/react/components/Accordion/accordion-item.js.map +1 -0
- package/react/components/Accordion/accordion.js +7 -0
- package/react/components/Accordion/accordion.js.map +1 -0
- package/react/components/Accordion/sgds-accordion-item.cjs.js.map +1 -0
- package/react/components/Accordion/sgds-accordion-item.js +204 -0
- package/react/components/Accordion/sgds-accordion-item.js.map +1 -0
- package/react/components/Accordion/sgds-accordion.cjs.js.map +1 -0
- package/react/components/Accordion/sgds-accordion.js +87 -0
- package/react/components/Accordion/sgds-accordion.js.map +1 -0
- package/react/components/ActionCard/action-card.js +7 -0
- package/react/components/ActionCard/action-card.js.map +1 -0
- package/react/components/ActionCard/sgds-action-card.cjs.js.map +1 -0
- package/react/components/ActionCard/sgds-action-card.js +155 -0
- package/react/components/ActionCard/sgds-action-card.js.map +1 -0
- package/react/components/Alert/alert-link.js +7 -0
- package/react/components/Alert/alert-link.js.map +1 -0
- package/react/components/Alert/alert.js +7 -0
- package/react/components/Alert/alert.js.map +1 -0
- package/react/components/Alert/sgds-alert-heading.cjs.js.map +1 -0
- package/react/components/Alert/sgds-alert-heading.js +33 -0
- package/react/components/Alert/sgds-alert-heading.js.map +1 -0
- package/react/components/Alert/sgds-alert-link.cjs.js.map +1 -0
- package/react/components/Alert/sgds-alert-link.js +32 -0
- package/react/components/Alert/sgds-alert-link.js.map +1 -0
- package/react/components/Alert/sgds-alert.cjs.js.map +1 -0
- package/react/components/Alert/sgds-alert.js +90 -0
- package/react/components/Alert/sgds-alert.js.map +1 -0
- package/react/components/Badge/badge.js +7 -0
- package/react/components/Badge/badge.js.map +1 -0
- package/react/components/Badge/sgds-badge.cjs.js.map +1 -0
- package/react/components/Badge/sgds-badge.js +53 -0
- package/react/components/Badge/sgds-badge.js.map +1 -0
- package/react/components/Breadcrumb/breadcrumb-item.js +7 -0
- package/react/components/Breadcrumb/breadcrumb-item.js.map +1 -0
- package/react/components/Breadcrumb/breadcrumb.js +7 -0
- package/react/components/Breadcrumb/breadcrumb.js.map +1 -0
- package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js.map +1 -0
- package/react/components/Breadcrumb/sgds-breadcrumb-item.js +65 -0
- package/react/components/Breadcrumb/sgds-breadcrumb-item.js.map +1 -0
- package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js.map +1 -0
- package/react/components/Breadcrumb/sgds-breadcrumb.js +82 -0
- package/react/components/Breadcrumb/sgds-breadcrumb.js.map +1 -0
- package/react/components/Button/button.js +7 -0
- package/react/components/Button/button.js.map +1 -0
- package/react/components/Button/sgds-button.cjs.js.map +1 -0
- package/react/components/Button/sgds-button.js +166 -0
- package/react/components/Button/sgds-button.js.map +1 -0
- package/react/components/Card/card.js +7 -0
- package/react/components/Card/card.js.map +1 -0
- package/react/components/Card/sgds-card.cjs.js.map +1 -0
- package/react/components/Card/sgds-card.js +76 -0
- package/react/components/Card/sgds-card.js.map +1 -0
- package/react/components/Checkbox/checkbox.cjs.js +11 -0
- package/react/components/Checkbox/checkbox.js +7 -0
- package/react/components/Checkbox/checkbox.js.map +1 -0
- package/react/components/Checkbox/sgds-checkbox.cjs.js.map +1 -0
- package/react/components/Checkbox/sgds-checkbox.js +26 -0
- package/react/components/Checkbox/sgds-checkbox.js.map +1 -0
- package/react/components/ComboBox/combo-box.js +7 -0
- package/react/components/ComboBox/combo-box.js.map +1 -0
- package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -0
- package/react/components/ComboBox/sgds-combo-box.js +194 -0
- package/react/components/ComboBox/sgds-combo-box.js.map +1 -0
- package/react/components/Datepicker/datepicker-calendar.cjs.js.map +1 -0
- package/react/components/Datepicker/datepicker-calendar.js +458 -0
- package/react/components/Datepicker/datepicker-calendar.js.map +1 -0
- package/react/components/Datepicker/datepicker-calendar2.js +7 -0
- package/react/components/Datepicker/datepicker-calendar2.js.map +1 -0
- package/react/components/Datepicker/datepicker-header.cjs.js.map +1 -0
- package/react/components/Datepicker/datepicker-header.js +227 -0
- package/react/components/Datepicker/datepicker-header.js.map +1 -0
- package/react/components/Datepicker/datepicker-header2.js +7 -0
- package/react/components/Datepicker/datepicker-header2.js.map +1 -0
- package/react/components/Datepicker/datepicker-input.cjs.js.map +1 -0
- package/react/components/Datepicker/datepicker-input.js +150 -0
- package/react/components/Datepicker/datepicker-input.js.map +1 -0
- package/react/components/Datepicker/datepicker-input2.js +7 -0
- package/react/components/Datepicker/datepicker-input2.js.map +1 -0
- package/react/components/Datepicker/datepicker.js +7 -0
- package/react/components/Datepicker/datepicker.js.map +1 -0
- package/react/components/Datepicker/sgds-datepicker.cjs.js.map +1 -0
- package/react/components/Datepicker/sgds-datepicker.js +484 -0
- package/react/components/Datepicker/sgds-datepicker.js.map +1 -0
- package/react/components/Drawer/drawer.js +7 -0
- package/react/components/Drawer/drawer.js.map +1 -0
- package/react/components/Drawer/sgds-drawer.cjs.js.map +1 -0
- package/react/components/Drawer/sgds-drawer.js +413 -0
- package/react/components/Drawer/sgds-drawer.js.map +1 -0
- package/react/components/Dropdown/dropdown.js +7 -0
- package/react/components/Dropdown/dropdown.js.map +1 -0
- package/react/components/Dropdown/sgds-dropdown-item.cjs.js.map +1 -0
- package/react/components/Dropdown/sgds-dropdown-item.js +47 -0
- package/react/components/Dropdown/sgds-dropdown-item.js.map +1 -0
- package/react/components/Dropdown/sgds-dropdown.cjs.js.map +1 -0
- package/react/components/Dropdown/sgds-dropdown.js +117 -0
- package/react/components/Dropdown/sgds-dropdown.js.map +1 -0
- package/react/components/FileUpload/file-upload.js +7 -0
- package/react/components/FileUpload/file-upload.js.map +1 -0
- package/react/components/FileUpload/sgds-file-upload.cjs.js.map +1 -0
- package/react/components/FileUpload/sgds-file-upload.js +208 -0
- package/react/components/FileUpload/sgds-file-upload.js.map +1 -0
- package/react/components/Footer/footer.js +7 -0
- package/react/components/Footer/footer.js.map +1 -0
- package/react/components/Footer/sgds-footer.cjs.js.map +1 -0
- package/react/components/Footer/sgds-footer.js +155 -0
- package/react/components/Footer/sgds-footer.js.map +1 -0
- package/react/components/Input/input.js +7 -0
- package/react/components/Input/input.js.map +1 -0
- package/{components → react/components}/Input/sgds-input.cjs.js +1 -1
- package/react/components/Input/sgds-input.cjs.js.map +1 -0
- package/react/components/Input/sgds-input.js +262 -0
- package/react/components/Input/sgds-input.js.map +1 -0
- package/react/components/Mainnav/mainnav-dropdown.js +7 -0
- package/react/components/Mainnav/mainnav-dropdown.js.map +1 -0
- package/react/components/Mainnav/mainnav-item.js +7 -0
- package/react/components/Mainnav/mainnav-item.js.map +1 -0
- package/react/components/Mainnav/mainnav.js +7 -0
- package/react/components/Mainnav/mainnav.js.map +1 -0
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map +1 -0
- package/react/components/Mainnav/sgds-mainnav-dropdown.js +85 -0
- package/react/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -0
- package/react/components/Mainnav/sgds-mainnav-item.cjs.js.map +1 -0
- package/react/components/Mainnav/sgds-mainnav-item.js +14 -0
- package/react/components/Mainnav/sgds-mainnav-item.js.map +1 -0
- package/react/components/Mainnav/sgds-mainnav.cjs.js.map +1 -0
- package/react/components/Mainnav/sgds-mainnav.js +227 -0
- package/react/components/Mainnav/sgds-mainnav.js.map +1 -0
- package/react/components/Masthead/masthead.js +7 -0
- package/react/components/Masthead/masthead.js.map +1 -0
- package/react/components/Masthead/sgds-masthead.cjs.js.map +1 -0
- package/react/components/Masthead/sgds-masthead.js +182 -0
- package/react/components/Masthead/sgds-masthead.js.map +1 -0
- package/react/components/Modal/modal.js +7 -0
- package/react/components/Modal/modal.js.map +1 -0
- package/react/components/Modal/sgds-modal.cjs.js.map +1 -0
- package/react/components/Modal/sgds-modal.js +340 -0
- package/react/components/Modal/sgds-modal.js.map +1 -0
- package/react/components/Pagination/pagination.js +7 -0
- package/react/components/Pagination/pagination.js.map +1 -0
- package/react/components/Pagination/sgds-pagination.cjs.js.map +1 -0
- package/react/components/Pagination/sgds-pagination.js +364 -0
- package/react/components/Pagination/sgds-pagination.js.map +1 -0
- package/react/components/Progress/progress-bar.js +7 -0
- package/react/components/Progress/progress-bar.js.map +1 -0
- package/react/components/Progress/progress.js +7 -0
- package/react/components/Progress/progress.js.map +1 -0
- package/react/components/Progress/sgds-progress-bar.cjs.js.map +1 -0
- package/react/components/Progress/sgds-progress-bar.js +59 -0
- package/react/components/Progress/sgds-progress-bar.js.map +1 -0
- package/react/components/Progress/sgds-progress.cjs.js.map +1 -0
- package/react/components/Progress/sgds-progress.js +30 -0
- package/react/components/Progress/sgds-progress.js.map +1 -0
- package/react/components/QuantityToggle/quantity-toggle.js +7 -0
- package/react/components/QuantityToggle/quantity-toggle.js.map +1 -0
- package/react/components/QuantityToggle/sgds-quantity-toggle.cjs.js.map +1 -0
- package/react/components/QuantityToggle/sgds-quantity-toggle.js +210 -0
- package/react/components/QuantityToggle/sgds-quantity-toggle.js.map +1 -0
- package/react/components/Radio/radio-group.js +7 -0
- package/react/components/Radio/radio-group.js.map +1 -0
- package/react/components/Radio/radio.cjs.js +11 -0
- package/react/components/Radio/radio.js +7 -0
- package/react/components/Radio/radio.js.map +1 -0
- package/{components → react/components}/Radio/sgds-radio-group.cjs.js +1 -1
- package/react/components/Radio/sgds-radio-group.cjs.js.map +1 -0
- package/react/components/Radio/sgds-radio-group.js +240 -0
- package/react/components/Radio/sgds-radio-group.js.map +1 -0
- package/react/components/Radio/sgds-radio.cjs.js.map +1 -0
- package/react/components/Radio/sgds-radio.js +138 -0
- package/react/components/Radio/sgds-radio.js.map +1 -0
- package/react/components/Sidenav/sgds-sidenav-item.cjs.js.map +1 -0
- package/react/components/Sidenav/sgds-sidenav-item.js +256 -0
- package/react/components/Sidenav/sgds-sidenav-item.js.map +1 -0
- package/react/components/Sidenav/sgds-sidenav-link.cjs.js.map +1 -0
- package/react/components/Sidenav/sgds-sidenav-link.js +18 -0
- package/react/components/Sidenav/sgds-sidenav-link.js.map +1 -0
- package/react/components/Sidenav/sgds-sidenav.cjs.js.map +1 -0
- package/react/components/Sidenav/sgds-sidenav.js +75 -0
- package/react/components/Sidenav/sgds-sidenav.js.map +1 -0
- package/react/components/Sidenav/sidenav-item.js +7 -0
- package/react/components/Sidenav/sidenav-item.js.map +1 -0
- package/react/components/Sidenav/sidenav-link.js +7 -0
- package/react/components/Sidenav/sidenav-link.js.map +1 -0
- package/react/components/Sidenav/sidenav.js +7 -0
- package/react/components/Sidenav/sidenav.js.map +1 -0
- package/react/components/Spinner/sgds-spinner.cjs.js.map +1 -0
- package/react/components/Spinner/sgds-spinner.js +38 -0
- package/react/components/Spinner/sgds-spinner.js.map +1 -0
- package/react/components/Spinner/spinner.js +8 -0
- package/react/components/Spinner/spinner.js.map +1 -0
- package/react/components/Stepper/sgds-stepper.cjs.js.map +1 -0
- package/react/components/Stepper/sgds-stepper.js +132 -0
- package/react/components/Stepper/sgds-stepper.js.map +1 -0
- package/react/components/Stepper/stepper.js +7 -0
- package/react/components/Stepper/stepper.js.map +1 -0
- package/react/components/Tab/sgds-tab-group.cjs.js.map +1 -0
- package/react/components/Tab/sgds-tab-group.js +233 -0
- package/react/components/Tab/sgds-tab-group.js.map +1 -0
- package/react/components/Tab/sgds-tab-panel.cjs.js.map +1 -0
- package/react/components/Tab/sgds-tab-panel.js +63 -0
- package/react/components/Tab/sgds-tab-panel.js.map +1 -0
- package/react/components/Tab/sgds-tab.cjs.js.map +1 -0
- package/react/components/Tab/sgds-tab.js +110 -0
- package/react/components/Tab/sgds-tab.js.map +1 -0
- package/react/components/Tab/tab-group.js +7 -0
- package/react/components/Tab/tab-group.js.map +1 -0
- package/react/components/Tab/tab-panel.js +7 -0
- package/react/components/Tab/tab-panel.js.map +1 -0
- package/react/components/Tab/tab.js +7 -0
- package/react/components/Tab/tab.js.map +1 -0
- package/react/components/Table/sgds-table.cjs.js.map +1 -0
- package/react/components/Table/sgds-table.js +267 -0
- package/react/components/Table/sgds-table.js.map +1 -0
- package/react/components/Table/table.js +7 -0
- package/react/components/Table/table.js.map +1 -0
- package/{components → react/components}/Textarea/sgds-textarea.cjs.js +1 -1
- package/react/components/Textarea/sgds-textarea.cjs.js.map +1 -0
- package/react/components/Textarea/sgds-textarea.js +252 -0
- package/react/components/Textarea/sgds-textarea.js.map +1 -0
- package/react/components/Textarea/textarea.js +7 -0
- package/react/components/Textarea/textarea.js.map +1 -0
- package/react/components/Toast/sgds-toast-container.cjs.js.map +1 -0
- package/react/components/Toast/sgds-toast-container.js +36 -0
- package/react/components/Toast/sgds-toast-container.js.map +1 -0
- package/react/components/Toast/sgds-toast.cjs.js.map +1 -0
- package/react/components/Toast/sgds-toast.js +152 -0
- package/react/components/Toast/sgds-toast.js.map +1 -0
- package/react/components/Toast/toast-container.js +7 -0
- package/react/components/Toast/toast-container.js.map +1 -0
- package/react/components/Toast/toast.js +7 -0
- package/react/components/Toast/toast.js.map +1 -0
- package/react/components/Tooltip/sgds-tooltip.cjs.js.map +1 -0
- package/react/components/Tooltip/sgds-tooltip.js +121 -0
- package/react/components/Tooltip/sgds-tooltip.js.map +1 -0
- package/react/components/Tooltip/tooltip.js +7 -0
- package/react/components/Tooltip/tooltip.js.map +1 -0
- package/react/datepicker/index.cjs.js +1 -1
- package/react/datepicker/index.js +1 -1
- package/react/drawer/index.cjs.js +1 -1
- package/react/drawer/index.js +1 -1
- package/react/dropdown/index.cjs.js +1 -1
- package/react/dropdown/index.js +1 -1
- package/react/dropdown-item/index.cjs.js +1 -1
- package/react/dropdown-item/index.js +1 -1
- package/react/file-upload/index.cjs.js +1 -1
- package/react/file-upload/index.js +1 -1
- package/react/footer/index.cjs.js +1 -1
- package/react/footer/index.js +1 -1
- package/react/input/index.cjs.js +1 -1
- package/react/input/index.js +1 -1
- package/react/internals/CloseButton/close-button.js +7 -0
- package/react/internals/CloseButton/close-button.js.map +1 -0
- package/react/internals/CloseButton/sgds-close-button.cjs.js.map +1 -0
- package/react/internals/CloseButton/sgds-close-button.js +55 -0
- package/react/internals/CloseButton/sgds-close-button.js.map +1 -0
- package/react/mainnav/index.cjs.js +1 -1
- package/react/mainnav/index.js +1 -1
- package/react/mainnav-dropdown/index.cjs.js +1 -1
- package/react/mainnav-dropdown/index.js +1 -1
- package/react/mainnav-item/index.cjs.js +1 -1
- package/react/mainnav-item/index.js +1 -1
- package/react/masthead/index.cjs.js +1 -1
- package/react/masthead/index.js +1 -1
- package/react/modal/index.cjs.js +1 -1
- package/react/modal/index.js +1 -1
- package/react/pagination/index.cjs.js +1 -1
- package/react/pagination/index.js +1 -1
- package/react/progress/index.cjs.js +1 -1
- package/react/progress/index.js +1 -1
- package/react/progress-bar/index.cjs.js +1 -1
- package/react/progress-bar/index.js +1 -1
- package/react/quantity-toggle/index.cjs.js +1 -1
- package/react/quantity-toggle/index.js +1 -1
- package/react/radio/index.cjs.js +1 -1
- package/react/radio/index.js +1 -1
- package/react/radio-group/index.cjs.js +1 -1
- package/react/radio-group/index.js +1 -1
- package/react/sidenav/index.cjs.js +1 -1
- package/react/sidenav/index.js +1 -1
- package/react/sidenav-item/index.cjs.js +1 -1
- package/react/sidenav-item/index.js +1 -1
- package/react/sidenav-link/index.cjs.js +1 -1
- package/react/sidenav-link/index.js +1 -1
- package/react/spinner/index.cjs.js +1 -1
- package/react/spinner/index.js +1 -1
- package/react/stepper/index.cjs.js +1 -1
- package/react/stepper/index.js +1 -1
- package/react/styles/anchor.js +7 -0
- package/react/styles/anchor.js.map +1 -0
- package/react/styles/bg-variants.js +7 -0
- package/react/styles/bg-variants.js.map +1 -0
- package/react/styles/border-variants.js +7 -0
- package/react/styles/border-variants.js.map +1 -0
- package/{styles → react/styles}/feedback.cjs.js +1 -1
- package/react/styles/feedback.js +7 -0
- package/react/styles/feedback.js.map +1 -0
- package/react/styles/form-hint.js +7 -0
- package/react/styles/form-hint.js.map +1 -0
- package/react/styles/form-label.js +7 -0
- package/react/styles/form-label.js.map +1 -0
- package/react/styles/header-class.js +7 -0
- package/react/styles/header-class.js.map +1 -0
- package/react/styles/paragraph.js +7 -0
- package/react/styles/paragraph.js.map +1 -0
- package/react/styles/svg.js +7 -0
- package/react/styles/svg.js.map +1 -0
- package/react/styles/text-variants.js +7 -0
- package/react/styles/text-variants.js.map +1 -0
- package/react/tab/index.cjs.js +1 -1
- package/react/tab/index.js +1 -1
- package/react/tab-group/index.cjs.js +1 -1
- package/react/tab-group/index.js +1 -1
- package/react/tab-panel/index.cjs.js +1 -1
- package/react/tab-panel/index.js +1 -1
- package/react/table/index.cjs.js +1 -1
- package/react/table/index.js +1 -1
- package/react/textarea/index.cjs.js +1 -1
- package/react/textarea/index.js +1 -1
- package/react/toast/index.cjs.js +1 -1
- package/react/toast/index.js +1 -1
- package/react/toast-container/index.cjs.js +1 -1
- package/react/toast-container/index.js +1 -1
- package/react/tooltip/index.cjs.js +1 -1
- package/react/tooltip/index.js +1 -1
- package/react/utils/animate.cjs.js.map +1 -0
- package/react/utils/animate.js +42 -0
- package/react/utils/animate.js.map +1 -0
- package/react/utils/animation-registry.cjs.js.map +1 -0
- package/react/utils/animation-registry.js +43 -0
- package/react/utils/animation-registry.js.map +1 -0
- package/react/utils/breakpoints.cjs.js.map +1 -0
- package/react/utils/breakpoints.js +9 -0
- package/react/utils/breakpoints.js.map +1 -0
- package/react/utils/defaultvalue.cjs.js.map +1 -0
- package/react/utils/defaultvalue.js +25 -0
- package/react/utils/defaultvalue.js.map +1 -0
- package/react/utils/event.cjs.js.map +1 -0
- package/react/utils/event.js +16 -0
- package/react/utils/event.js.map +1 -0
- package/react/utils/form.cjs.js.map +1 -0
- package/react/utils/form.js +133 -0
- package/react/utils/form.js.map +1 -0
- package/react/utils/generateId.cjs.js.map +1 -0
- package/react/utils/generateId.js +7 -0
- package/react/utils/generateId.js.map +1 -0
- package/react/utils/mergeDeep.cjs.js.map +1 -0
- package/react/utils/mergeDeep.js +26 -0
- package/react/utils/mergeDeep.js.map +1 -0
- package/react/utils/modal.cjs.js.map +1 -0
- package/react/utils/modal.js +56 -0
- package/react/utils/modal.js.map +1 -0
- package/react/utils/object.cjs.js.map +1 -0
- package/react/utils/object.js +7 -0
- package/react/utils/object.js.map +1 -0
- package/react/utils/scroll.cjs.js.map +1 -0
- package/react/utils/scroll.js +22 -0
- package/react/utils/scroll.js.map +1 -0
- package/react/utils/slot.cjs.js.map +1 -0
- package/react/utils/slot.js +53 -0
- package/react/utils/slot.js.map +1 -0
- package/react/utils/tabbable.cjs.js.map +1 -0
- package/react/utils/tabbable.js +69 -0
- package/react/utils/tabbable.js.map +1 -0
- package/react/utils/time.cjs.js.map +1 -0
- package/react/utils/time.js +75 -0
- package/react/utils/time.js.map +1 -0
- package/react/utils/watch.cjs.js.map +1 -0
- package/react/utils/watch.js +40 -0
- package/react/utils/watch.js.map +1 -0
- package/styles/anchor.js +0 -1
- package/styles/anchor.js.map +1 -1
- package/styles/bg-variants.js +0 -1
- package/styles/bg-variants.js.map +1 -1
- package/styles/border-variants.js +0 -1
- package/styles/border-variants.js.map +1 -1
- package/styles/feedback.js +1 -2
- package/styles/feedback.js.map +1 -1
- package/styles/form-hint.js +0 -1
- package/styles/form-hint.js.map +1 -1
- package/styles/form-label.js +0 -1
- package/styles/form-label.js.map +1 -1
- package/styles/header-class.js +0 -1
- package/styles/header-class.js.map +1 -1
- package/styles/paragraph.js +0 -1
- package/styles/paragraph.js.map +1 -1
- package/styles/svg.js +0 -1
- package/styles/svg.js.map +1 -1
- package/styles/text-variants.js +0 -1
- package/styles/text-variants.js.map +1 -1
- package/utils/animate.js +0 -1
- package/utils/animate.js.map +1 -1
- package/utils/animation-registry.js +0 -1
- package/utils/animation-registry.js.map +1 -1
- package/utils/breakpoints.js +0 -1
- package/utils/breakpoints.js.map +1 -1
- package/utils/defaultvalue.js +0 -1
- package/utils/defaultvalue.js.map +1 -1
- package/utils/event.js +0 -1
- package/utils/event.js.map +1 -1
- package/utils/form.js +0 -1
- package/utils/form.js.map +1 -1
- package/utils/generateId.js +0 -1
- package/utils/generateId.js.map +1 -1
- package/utils/mergeDeep.js +0 -1
- package/utils/mergeDeep.js.map +1 -1
- package/utils/modal.js +0 -1
- package/utils/modal.js.map +1 -1
- package/utils/object.js +0 -1
- package/utils/object.js.map +1 -1
- package/utils/scroll.js +0 -1
- package/utils/scroll.js.map +1 -1
- package/utils/slot.js +0 -1
- package/utils/slot.js.map +1 -1
- package/utils/tabbable.js +0 -1
- package/utils/tabbable.js.map +1 -1
- package/utils/time.js +0 -1
- package/utils/time.js.map +1 -1
- package/utils/watch.js +0 -1
- package/utils/watch.js.map +1 -1
- package/base/card-element.cjs.js.map +0 -1
- package/base/dropdown-element.cjs.js.map +0 -1
- package/base/dropdown-list-element.cjs.js.map +0 -1
- package/base/form-check-element.cjs.js.map +0 -1
- package/base/link-element.cjs.js.map +0 -1
- package/base/sgds-element.cjs.js.map +0 -1
- package/components/Accordion/sgds-accordion-item.cjs.js.map +0 -1
- package/components/Accordion/sgds-accordion.cjs.js.map +0 -1
- package/components/ActionCard/sgds-action-card.cjs.js.map +0 -1
- package/components/Alert/sgds-alert-heading.cjs.js.map +0 -1
- package/components/Alert/sgds-alert-link.cjs.js.map +0 -1
- package/components/Alert/sgds-alert.cjs.js.map +0 -1
- package/components/Badge/sgds-badge.cjs.js.map +0 -1
- package/components/Breadcrumb/sgds-breadcrumb-item.cjs.js.map +0 -1
- package/components/Breadcrumb/sgds-breadcrumb.cjs.js.map +0 -1
- package/components/Button/sgds-button.cjs.js.map +0 -1
- package/components/Card/sgds-card.cjs.js.map +0 -1
- package/components/Checkbox/checkbox.cjs.js +0 -11
- package/components/Checkbox/sgds-checkbox.cjs.js.map +0 -1
- package/components/ComboBox/sgds-combo-box.cjs.js.map +0 -1
- package/components/Datepicker/datepicker-calendar.cjs.js.map +0 -1
- package/components/Datepicker/datepicker-header.cjs.js.map +0 -1
- package/components/Datepicker/datepicker-input.cjs.js.map +0 -1
- package/components/Datepicker/sgds-datepicker.cjs.js.map +0 -1
- package/components/Drawer/sgds-drawer.cjs.js.map +0 -1
- package/components/Dropdown/sgds-dropdown-item.cjs.js.map +0 -1
- package/components/Dropdown/sgds-dropdown.cjs.js.map +0 -1
- package/components/FileUpload/sgds-file-upload.cjs.js.map +0 -1
- package/components/Footer/sgds-footer.cjs.js.map +0 -1
- package/components/Input/sgds-input.cjs.js.map +0 -1
- package/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map +0 -1
- package/components/Mainnav/sgds-mainnav-item.cjs.js.map +0 -1
- package/components/Mainnav/sgds-mainnav.cjs.js.map +0 -1
- package/components/Masthead/sgds-masthead.cjs.js.map +0 -1
- package/components/Modal/sgds-modal.cjs.js.map +0 -1
- package/components/Pagination/sgds-pagination.cjs.js.map +0 -1
- package/components/Progress/sgds-progress-bar.cjs.js.map +0 -1
- package/components/Progress/sgds-progress.cjs.js.map +0 -1
- package/components/QuantityToggle/sgds-quantity-toggle.cjs.js.map +0 -1
- package/components/Radio/radio.cjs.js +0 -11
- package/components/Radio/sgds-radio-group.cjs.js.map +0 -1
- package/components/Radio/sgds-radio.cjs.js.map +0 -1
- package/components/Sidenav/sgds-sidenav-item.cjs.js.map +0 -1
- package/components/Sidenav/sgds-sidenav-link.cjs.js.map +0 -1
- package/components/Sidenav/sgds-sidenav.cjs.js.map +0 -1
- package/components/Spinner/sgds-spinner.cjs.js.map +0 -1
- package/components/Stepper/sgds-stepper.cjs.js.map +0 -1
- package/components/Tab/sgds-tab-group.cjs.js.map +0 -1
- package/components/Tab/sgds-tab-panel.cjs.js.map +0 -1
- package/components/Tab/sgds-tab.cjs.js.map +0 -1
- package/components/Table/sgds-table.cjs.js.map +0 -1
- package/components/Textarea/sgds-textarea.cjs.js.map +0 -1
- package/components/Toast/sgds-toast-container.cjs.js.map +0 -1
- package/components/Toast/sgds-toast.cjs.js.map +0 -1
- package/components/Tooltip/sgds-tooltip.cjs.js.map +0 -1
- package/internals/CloseButton/sgds-close-button.cjs.js.map +0 -1
- package/utils/animate.cjs.js.map +0 -1
- package/utils/animation-registry.cjs.js.map +0 -1
- package/utils/breakpoints.cjs.js.map +0 -1
- package/utils/defaultvalue.cjs.js.map +0 -1
- package/utils/event.cjs.js.map +0 -1
- package/utils/form.cjs.js.map +0 -1
- package/utils/generateId.cjs.js.map +0 -1
- package/utils/mergeDeep.cjs.js.map +0 -1
- package/utils/modal.cjs.js.map +0 -1
- package/utils/object.cjs.js.map +0 -1
- package/utils/scroll.cjs.js.map +0 -1
- package/utils/slot.cjs.js.map +0 -1
- package/utils/tabbable.cjs.js.map +0 -1
- package/utils/time.cjs.js.map +0 -1
- package/utils/watch.cjs.js.map +0 -1
- /package/{base → react/base}/card-element.cjs.js +0 -0
- /package/{base → react/base}/card.cjs.js +0 -0
- /package/{base → react/base}/card.cjs.js.map +0 -0
- /package/{base → react/base}/dropdown-element.cjs.js +0 -0
- /package/{base → react/base}/dropdown-list-element.cjs.js +0 -0
- /package/{base → react/base}/link-element.cjs.js +0 -0
- /package/{base → react/base}/sgds-element.cjs.js +0 -0
- /package/{base → react/base}/sgds-element.cjs2.js +0 -0
- /package/{base → react/base}/sgds-element.cjs2.js.map +0 -0
- /package/{components → react/components}/Accordion/accordion-item.cjs.js +0 -0
- /package/{components → react/components}/Accordion/accordion-item.cjs.js.map +0 -0
- /package/{components → react/components}/Accordion/accordion.cjs.js +0 -0
- /package/{components → react/components}/Accordion/accordion.cjs.js.map +0 -0
- /package/{components → react/components}/Accordion/sgds-accordion-item.cjs.js +0 -0
- /package/{components → react/components}/Accordion/sgds-accordion.cjs.js +0 -0
- /package/{components → react/components}/ActionCard/action-card.cjs.js +0 -0
- /package/{components → react/components}/ActionCard/action-card.cjs.js.map +0 -0
- /package/{components → react/components}/ActionCard/sgds-action-card.cjs.js +0 -0
- /package/{components → react/components}/Alert/alert-link.cjs.js +0 -0
- /package/{components → react/components}/Alert/alert-link.cjs.js.map +0 -0
- /package/{components → react/components}/Alert/alert.cjs.js +0 -0
- /package/{components → react/components}/Alert/alert.cjs.js.map +0 -0
- /package/{components → react/components}/Alert/sgds-alert-heading.cjs.js +0 -0
- /package/{components → react/components}/Alert/sgds-alert-link.cjs.js +0 -0
- /package/{components → react/components}/Alert/sgds-alert.cjs.js +0 -0
- /package/{components → react/components}/Badge/badge.cjs.js +0 -0
- /package/{components → react/components}/Badge/badge.cjs.js.map +0 -0
- /package/{components → react/components}/Badge/sgds-badge.cjs.js +0 -0
- /package/{components → react/components}/Breadcrumb/breadcrumb-item.cjs.js +0 -0
- /package/{components → react/components}/Breadcrumb/breadcrumb-item.cjs.js.map +0 -0
- /package/{components → react/components}/Breadcrumb/breadcrumb.cjs.js +0 -0
- /package/{components → react/components}/Breadcrumb/breadcrumb.cjs.js.map +0 -0
- /package/{components → react/components}/Breadcrumb/sgds-breadcrumb-item.cjs.js +0 -0
- /package/{components → react/components}/Breadcrumb/sgds-breadcrumb.cjs.js +0 -0
- /package/{components → react/components}/Button/button.cjs.js +0 -0
- /package/{components → react/components}/Button/button.cjs.js.map +0 -0
- /package/{components → react/components}/Button/sgds-button.cjs.js +0 -0
- /package/{components → react/components}/Card/card.cjs.js +0 -0
- /package/{components → react/components}/Card/card.cjs.js.map +0 -0
- /package/{components → react/components}/Card/sgds-card.cjs.js +0 -0
- /package/{components → react/components}/Checkbox/checkbox.cjs.js.map +0 -0
- /package/{components → react/components}/Checkbox/sgds-checkbox.cjs.js +0 -0
- /package/{components → react/components}/ComboBox/combo-box.cjs.js +0 -0
- /package/{components → react/components}/ComboBox/combo-box.cjs.js.map +0 -0
- /package/{components → react/components}/ComboBox/sgds-combo-box.cjs.js +0 -0
- /package/{components → react/components}/Datepicker/datepicker-calendar.cjs.js +0 -0
- /package/{components → react/components}/Datepicker/datepicker-calendar.cjs2.js +0 -0
- /package/{components → react/components}/Datepicker/datepicker-calendar.cjs2.js.map +0 -0
- /package/{components → react/components}/Datepicker/datepicker-header.cjs.js +0 -0
- /package/{components → react/components}/Datepicker/datepicker-header.cjs2.js +0 -0
- /package/{components → react/components}/Datepicker/datepicker-header.cjs2.js.map +0 -0
- /package/{components → react/components}/Datepicker/datepicker-input.cjs.js +0 -0
- /package/{components → react/components}/Datepicker/datepicker-input.cjs2.js +0 -0
- /package/{components → react/components}/Datepicker/datepicker-input.cjs2.js.map +0 -0
- /package/{components → react/components}/Datepicker/datepicker.cjs.js +0 -0
- /package/{components → react/components}/Datepicker/datepicker.cjs.js.map +0 -0
- /package/{components → react/components}/Datepicker/sgds-datepicker.cjs.js +0 -0
- /package/{components → react/components}/Drawer/drawer.cjs.js +0 -0
- /package/{components → react/components}/Drawer/drawer.cjs.js.map +0 -0
- /package/{components → react/components}/Drawer/sgds-drawer.cjs.js +0 -0
- /package/{components → react/components}/Dropdown/dropdown.cjs.js +0 -0
- /package/{components → react/components}/Dropdown/dropdown.cjs.js.map +0 -0
- /package/{components → react/components}/Dropdown/sgds-dropdown-item.cjs.js +0 -0
- /package/{components → react/components}/Dropdown/sgds-dropdown.cjs.js +0 -0
- /package/{components → react/components}/FileUpload/file-upload.cjs.js +0 -0
- /package/{components → react/components}/FileUpload/file-upload.cjs.js.map +0 -0
- /package/{components → react/components}/FileUpload/sgds-file-upload.cjs.js +0 -0
- /package/{components → react/components}/Footer/footer.cjs.js +0 -0
- /package/{components → react/components}/Footer/footer.cjs.js.map +0 -0
- /package/{components → react/components}/Footer/sgds-footer.cjs.js +0 -0
- /package/{components → react/components}/Input/input.cjs.js +0 -0
- /package/{components → react/components}/Input/input.cjs.js.map +0 -0
- /package/{components → react/components}/Mainnav/mainnav-dropdown.cjs.js +0 -0
- /package/{components → react/components}/Mainnav/mainnav-dropdown.cjs.js.map +0 -0
- /package/{components → react/components}/Mainnav/mainnav-item.cjs.js +0 -0
- /package/{components → react/components}/Mainnav/mainnav-item.cjs.js.map +0 -0
- /package/{components → react/components}/Mainnav/mainnav.cjs.js +0 -0
- /package/{components → react/components}/Mainnav/mainnav.cjs.js.map +0 -0
- /package/{components → react/components}/Mainnav/sgds-mainnav-dropdown.cjs.js +0 -0
- /package/{components → react/components}/Mainnav/sgds-mainnav-item.cjs.js +0 -0
- /package/{components → react/components}/Mainnav/sgds-mainnav.cjs.js +0 -0
- /package/{components → react/components}/Masthead/masthead.cjs.js +0 -0
- /package/{components → react/components}/Masthead/masthead.cjs.js.map +0 -0
- /package/{components → react/components}/Masthead/sgds-masthead.cjs.js +0 -0
- /package/{components → react/components}/Modal/modal.cjs.js +0 -0
- /package/{components → react/components}/Modal/modal.cjs.js.map +0 -0
- /package/{components → react/components}/Modal/sgds-modal.cjs.js +0 -0
- /package/{components → react/components}/Pagination/pagination.cjs.js +0 -0
- /package/{components → react/components}/Pagination/pagination.cjs.js.map +0 -0
- /package/{components → react/components}/Pagination/sgds-pagination.cjs.js +0 -0
- /package/{components → react/components}/Progress/progress-bar.cjs.js +0 -0
- /package/{components → react/components}/Progress/progress-bar.cjs.js.map +0 -0
- /package/{components → react/components}/Progress/progress.cjs.js +0 -0
- /package/{components → react/components}/Progress/progress.cjs.js.map +0 -0
- /package/{components → react/components}/Progress/sgds-progress-bar.cjs.js +0 -0
- /package/{components → react/components}/Progress/sgds-progress.cjs.js +0 -0
- /package/{components → react/components}/QuantityToggle/quantity-toggle.cjs.js +0 -0
- /package/{components → react/components}/QuantityToggle/quantity-toggle.cjs.js.map +0 -0
- /package/{components → react/components}/QuantityToggle/sgds-quantity-toggle.cjs.js +0 -0
- /package/{components → react/components}/Radio/radio-group.cjs.js +0 -0
- /package/{components → react/components}/Radio/radio-group.cjs.js.map +0 -0
- /package/{components → react/components}/Radio/radio.cjs.js.map +0 -0
- /package/{components → react/components}/Radio/sgds-radio.cjs.js +0 -0
- /package/{components → react/components}/Sidenav/sgds-sidenav-item.cjs.js +0 -0
- /package/{components → react/components}/Sidenav/sgds-sidenav-link.cjs.js +0 -0
- /package/{components → react/components}/Sidenav/sgds-sidenav.cjs.js +0 -0
- /package/{components → react/components}/Sidenav/sidenav-item.cjs.js +0 -0
- /package/{components → react/components}/Sidenav/sidenav-item.cjs.js.map +0 -0
- /package/{components → react/components}/Sidenav/sidenav-link.cjs.js +0 -0
- /package/{components → react/components}/Sidenav/sidenav-link.cjs.js.map +0 -0
- /package/{components → react/components}/Sidenav/sidenav.cjs.js +0 -0
- /package/{components → react/components}/Sidenav/sidenav.cjs.js.map +0 -0
- /package/{components → react/components}/Spinner/sgds-spinner.cjs.js +0 -0
- /package/{components → react/components}/Spinner/spinner.cjs.js +0 -0
- /package/{components → react/components}/Spinner/spinner.cjs.js.map +0 -0
- /package/{components → react/components}/Stepper/sgds-stepper.cjs.js +0 -0
- /package/{components → react/components}/Stepper/stepper.cjs.js +0 -0
- /package/{components → react/components}/Stepper/stepper.cjs.js.map +0 -0
- /package/{components → react/components}/Tab/sgds-tab-group.cjs.js +0 -0
- /package/{components → react/components}/Tab/sgds-tab-panel.cjs.js +0 -0
- /package/{components → react/components}/Tab/sgds-tab.cjs.js +0 -0
- /package/{components → react/components}/Tab/tab-group.cjs.js +0 -0
- /package/{components → react/components}/Tab/tab-group.cjs.js.map +0 -0
- /package/{components → react/components}/Tab/tab-panel.cjs.js +0 -0
- /package/{components → react/components}/Tab/tab-panel.cjs.js.map +0 -0
- /package/{components → react/components}/Tab/tab.cjs.js +0 -0
- /package/{components → react/components}/Tab/tab.cjs.js.map +0 -0
- /package/{components → react/components}/Table/sgds-table.cjs.js +0 -0
- /package/{components → react/components}/Table/table.cjs.js +0 -0
- /package/{components → react/components}/Table/table.cjs.js.map +0 -0
- /package/{components → react/components}/Textarea/textarea.cjs.js +0 -0
- /package/{components → react/components}/Textarea/textarea.cjs.js.map +0 -0
- /package/{components → react/components}/Toast/sgds-toast-container.cjs.js +0 -0
- /package/{components → react/components}/Toast/sgds-toast.cjs.js +0 -0
- /package/{components → react/components}/Toast/toast-container.cjs.js +0 -0
- /package/{components → react/components}/Toast/toast-container.cjs.js.map +0 -0
- /package/{components → react/components}/Toast/toast.cjs.js +0 -0
- /package/{components → react/components}/Toast/toast.cjs.js.map +0 -0
- /package/{components → react/components}/Tooltip/sgds-tooltip.cjs.js +0 -0
- /package/{components → react/components}/Tooltip/tooltip.cjs.js +0 -0
- /package/{components → react/components}/Tooltip/tooltip.cjs.js.map +0 -0
- /package/{internals → react/internals}/CloseButton/close-button.cjs.js +0 -0
- /package/{internals → react/internals}/CloseButton/close-button.cjs.js.map +0 -0
- /package/{internals → react/internals}/CloseButton/sgds-close-button.cjs.js +0 -0
- /package/{styles → react/styles}/anchor.cjs.js +0 -0
- /package/{styles → react/styles}/anchor.cjs.js.map +0 -0
- /package/{styles → react/styles}/bg-variants.cjs.js +0 -0
- /package/{styles → react/styles}/bg-variants.cjs.js.map +0 -0
- /package/{styles → react/styles}/border-variants.cjs.js +0 -0
- /package/{styles → react/styles}/border-variants.cjs.js.map +0 -0
- /package/{styles → react/styles}/feedback.cjs.js.map +0 -0
- /package/{styles → react/styles}/form-hint.cjs.js +0 -0
- /package/{styles → react/styles}/form-hint.cjs.js.map +0 -0
- /package/{styles → react/styles}/form-label.cjs.js +0 -0
- /package/{styles → react/styles}/form-label.cjs.js.map +0 -0
- /package/{styles → react/styles}/header-class.cjs.js +0 -0
- /package/{styles → react/styles}/header-class.cjs.js.map +0 -0
- /package/{styles → react/styles}/paragraph.cjs.js +0 -0
- /package/{styles → react/styles}/paragraph.cjs.js.map +0 -0
- /package/{styles → react/styles}/svg.cjs.js +0 -0
- /package/{styles → react/styles}/svg.cjs.js.map +0 -0
- /package/{styles → react/styles}/text-variants.cjs.js +0 -0
- /package/{styles → react/styles}/text-variants.cjs.js.map +0 -0
- /package/{utils → react/utils}/animate.cjs.js +0 -0
- /package/{utils → react/utils}/animation-registry.cjs.js +0 -0
- /package/{utils → react/utils}/breakpoints.cjs.js +0 -0
- /package/{utils → react/utils}/defaultvalue.cjs.js +0 -0
- /package/{utils → react/utils}/event.cjs.js +0 -0
- /package/{utils → react/utils}/form.cjs.js +0 -0
- /package/{utils → react/utils}/generateId.cjs.js +0 -0
- /package/{utils → react/utils}/mergeDeep.cjs.js +0 -0
- /package/{utils → react/utils}/modal.cjs.js +0 -0
- /package/{utils → react/utils}/object.cjs.js +0 -0
- /package/{utils → react/utils}/scroll.cjs.js +0 -0
- /package/{utils → react/utils}/slot.cjs.js +0 -0
- /package/{utils → react/utils}/tabbable.cjs.js +0 -0
- /package/{utils → react/utils}/time.cjs.js +0 -0
- /package/{utils → react/utils}/watch.cjs.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { css } from 'lit';
|
|
3
2
|
|
|
4
|
-
var css_248z = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:
|
|
3
|
+
var css_248z = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:flex;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:checked[type=radio],.form-check-input[checked][type=radio]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")}.form-check-input:disabled{border-color:var(--sgds-form-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid,.form-check-input:invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked,.form-check-input:invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus,.form-check-input:invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label,.form-check-input:invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right)}:host([last-of-type]) .form-check{margin-bottom:0}`;
|
|
5
4
|
|
|
6
5
|
export { css_248z as default };
|
|
7
6
|
//# sourceMappingURL=radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { __decorate } from 'tslib';
|
|
3
2
|
import { html } from 'lit';
|
|
4
3
|
import { query, state, property, queryAssignedElements } from 'lit/decorators.js';
|
|
@@ -193,7 +192,7 @@ class SgdsRadioGroup extends SgdsElement {
|
|
|
193
192
|
tabindex="-1"
|
|
194
193
|
@invalid=${(e) => this._handleInvalid(e)}
|
|
195
194
|
/>
|
|
196
|
-
${this.hasFeedback ? html `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
|
|
195
|
+
${this.hasFeedback && this.invalid ? html `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
|
|
197
196
|
</fieldset>
|
|
198
197
|
`;
|
|
199
198
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-radio-group.js","sources":["../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsElement {\n static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, radioGroupStyles];\n /**@internal */\n protected readonly formSubmitController = new FormSubmitController(this, {\n defaultValue: (control: SgdsRadioGroup) => control.defaultValue\n });\n /**@internal */\n @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n /**@internal */\n @query(\".radio-group-validation-input\") input: HTMLInputElement;\n /**@internal */\n @state() defaultValue = \"\";\n /**@internal */\n @state() private customErrorMessage = \"\";\n /** This will be true when the control is in an invalid state. */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n /** The selected value of the control. */\n @property({ reflect: true }) value = \"\";\n\n /** The name assigned to the radio controls. */\n @property({ reflect: true }) name = \"option\";\n\n /** Ensures a child radio is checked before allowing the containing form to submit. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit(\"sgds-change\", { detail: { value: this.value } });\n this._updateCheckedRadio();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n }\n\n firstUpdated() {\n const radios = this._radios;\n radios.forEach((item, index) => {\n if (radios.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case radios.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n /** Gets and return the ValidityState object. */\n get validity(): ValidityState {\n const hasMissingData = !((this.value && this.required) || !this.required);\n const hasCustomError = this.customErrorMessage !== \"\";\n return {\n badInput: false,\n customError: hasCustomError,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: hasMissingData ? false : true,\n valueMissing: !hasMissingData\n };\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n public reportValidity(): boolean {\n const validity = this.validity;\n\n this.invalid = !validity.valid;\n\n if (!validity.valid) {\n this._showNativeErrorMessage();\n }\n\n return !this.invalid;\n }\n /**@internal */\n @queryAssignedElements()\n private _radios!: Array<SgdsRadio>;\n\n private _handleRadioClick(event: MouseEvent) {\n const target = event.target as SgdsRadio;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio === target));\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n return;\n }\n\n const radios = this._radios.filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n let index = radios.indexOf(checkedRadio) + incr;\n if (index < 0) {\n index = radios.length - 1;\n }\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this._radios.forEach(radio => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.value = radios[index].value;\n radios[index].checked = true;\n radios[index].tabIndex = 0;\n radios[index].focus();\n\n event.preventDefault();\n }\n\n private _handleLabelClick() {\n const radios = this._radios;\n const checked = radios.find(radio => radio.checked);\n const radioToFocus = checked || radios[0];\n\n // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n if (radioToFocus) {\n radioToFocus.focus();\n }\n }\n\n private _handleSlotChange() {\n const radios = this._radios;\n\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n if (!radios.some(radio => radio.checked)) {\n if (radios[0]) radios[0].tabIndex = 0;\n }\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\n this._radios.forEach(radio => (radio.invalid = true));\n }\n\n private _showNativeErrorMessage() {\n this.input.reportValidity();\n }\n\n private _updateCheckedRadio() {\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n this.invalid = !this.validity.valid;\n this._radios.forEach(radio => (radio.invalid = this.invalid));\n }\n\n render() {\n const defaultSlot = html`\n <div>\n <slot\n @click=${this._handleRadioClick}\n @keydown=${this._handleKeyDown}\n @slotchange=${this._handleSlotChange}\n role=\"presentation\"\n ></slot>\n </div>\n `;\n return html`\n <fieldset name=${this.name}>\n <label\n @click=${this._handleLabelClick}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >\n <slot name=\"label\"></slot>\n </label>\n ${defaultSlot}\n <input\n type=\"text\"\n class=\"radio-group-validation-input ${classMap({\n \"is-invalid\": this.hasFeedback && this.invalid\n })}\"\n ?required=${this.required}\n tabindex=\"-1\"\n @invalid=${(e: Event) => this._handleInvalid(e)}\n />\n ${this.hasFeedback ? html`<div class=\"invalid-feedback\">${this.invalidFeedback}</div>` : \"\"}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["feedbackStyles","formLabelStyles","radioGroupStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-radio-group.js","sources":["../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsElement {\n static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, radioGroupStyles];\n /**@internal */\n protected readonly formSubmitController = new FormSubmitController(this, {\n defaultValue: (control: SgdsRadioGroup) => control.defaultValue\n });\n /**@internal */\n @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n /**@internal */\n @query(\".radio-group-validation-input\") input: HTMLInputElement;\n /**@internal */\n @state() defaultValue = \"\";\n /**@internal */\n @state() private customErrorMessage = \"\";\n /** This will be true when the control is in an invalid state. */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n /** The selected value of the control. */\n @property({ reflect: true }) value = \"\";\n\n /** The name assigned to the radio controls. */\n @property({ reflect: true }) name = \"option\";\n\n /** Ensures a child radio is checked before allowing the containing form to submit. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit(\"sgds-change\", { detail: { value: this.value } });\n this._updateCheckedRadio();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n }\n\n firstUpdated() {\n const radios = this._radios;\n radios.forEach((item, index) => {\n if (radios.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case radios.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n /** Gets and return the ValidityState object. */\n get validity(): ValidityState {\n const hasMissingData = !((this.value && this.required) || !this.required);\n const hasCustomError = this.customErrorMessage !== \"\";\n return {\n badInput: false,\n customError: hasCustomError,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: hasMissingData ? false : true,\n valueMissing: !hasMissingData\n };\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n public reportValidity(): boolean {\n const validity = this.validity;\n\n this.invalid = !validity.valid;\n\n if (!validity.valid) {\n this._showNativeErrorMessage();\n }\n\n return !this.invalid;\n }\n /**@internal */\n @queryAssignedElements()\n private _radios!: Array<SgdsRadio>;\n\n private _handleRadioClick(event: MouseEvent) {\n const target = event.target as SgdsRadio;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio === target));\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n return;\n }\n\n const radios = this._radios.filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n let index = radios.indexOf(checkedRadio) + incr;\n if (index < 0) {\n index = radios.length - 1;\n }\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this._radios.forEach(radio => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.value = radios[index].value;\n radios[index].checked = true;\n radios[index].tabIndex = 0;\n radios[index].focus();\n\n event.preventDefault();\n }\n\n private _handleLabelClick() {\n const radios = this._radios;\n const checked = radios.find(radio => radio.checked);\n const radioToFocus = checked || radios[0];\n\n // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n if (radioToFocus) {\n radioToFocus.focus();\n }\n }\n\n private _handleSlotChange() {\n const radios = this._radios;\n\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n if (!radios.some(radio => radio.checked)) {\n if (radios[0]) radios[0].tabIndex = 0;\n }\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\n this._radios.forEach(radio => (radio.invalid = true));\n }\n\n private _showNativeErrorMessage() {\n this.input.reportValidity();\n }\n\n private _updateCheckedRadio() {\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n this.invalid = !this.validity.valid;\n this._radios.forEach(radio => (radio.invalid = this.invalid));\n }\n\n render() {\n const defaultSlot = html`\n <div>\n <slot\n @click=${this._handleRadioClick}\n @keydown=${this._handleKeyDown}\n @slotchange=${this._handleSlotChange}\n role=\"presentation\"\n ></slot>\n </div>\n `;\n return html`\n <fieldset name=${this.name}>\n <label\n @click=${this._handleLabelClick}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >\n <slot name=\"label\"></slot>\n </label>\n ${defaultSlot}\n <input\n type=\"text\"\n class=\"radio-group-validation-input ${classMap({\n \"is-invalid\": this.hasFeedback && this.invalid\n })}\"\n ?required=${this.required}\n tabindex=\"-1\"\n @invalid=${(e: Event) => this._handleInvalid(e)}\n />\n ${this.hasFeedback && this.invalid ? html`<div class=\"invalid-feedback\">${this.invalidFeedback}</div>` : \"\"}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["feedbackStyles","formLabelStyles","radioGroupStyles"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-radio.js","sources":["../../../src/components/Radio/sgds-radio.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport radioStyles from \"./radio.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Radio allows the user to select one option from a set while seeing all available options.\n *\n * @slot default - The label of the radio input\n *\n * @event sgds-focus - Emitted when the control gains focus.\n * @event sgds-blur - Emitted when the control loses focus.\n */\nexport class SgdsRadio extends SgdsElement {\n static styles = [...SgdsElement.styles, formLabelStyles, radioStyles];\n /**\n * Draws the radio in a checked state\n */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** The radio's value attribute. */\n @property() value: string;\n\n /** Disables the radio. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Aligns the radios horizontally */\n @property({ type: Boolean, reflect: true }) isInline = false;\n\n /** For aria-label */\n @property({ type: String, reflect: true }) ariaLabel = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n private radioId: string = genId(\"radio\");\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setInitialAttributes();\n this.addEventListeners();\n }\n\n @watch(\"checked\")\n handleCheckedChange() {\n this.setAttribute(\"aria-checked\", this.checked ? \"true\" : \"false\");\n this.setAttribute(\"tabindex\", this.checked ? \"0\" : \"-1\");\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n }\n\n private handleBlur() {\n this.emit(\"sgds-blur\");\n }\n\n private handleClick() {\n if (!this.disabled) {\n this.checked = true;\n }\n }\n\n private handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private addEventListeners() {\n this.addEventListener(\"blur\", () => this.handleBlur());\n this.addEventListener(\"click\", () => this.handleClick());\n this.addEventListener(\"focus\", () => this.handleFocus());\n }\n\n private setInitialAttributes() {\n this.setAttribute(\"role\", \"radio\");\n this.setAttribute(\"tabindex\", \"-1\");\n this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"form-check\": true,\n \"form-check-inline\": this.isInline\n })}\n tabindex=\"-1\"\n >\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": this.invalid\n })}\n type=\"radio\"\n id=${ifDefined(this.radioId)}\n value=${ifDefined(this.value)}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @click=${this.handleClick}\n />\n <label for=\"${ifDefined(this.radioId)}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\"\n ><slot></slot\n ></label>\n </div>\n `;\n }\n}\n\nexport default SgdsRadio;\n"],"names":["formLabelStyles","radioStyles"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sgds-radio.js","sources":["../../../src/components/Radio/sgds-radio.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport radioStyles from \"./radio.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Radio allows the user to select one option from a set while seeing all available options.\n *\n * @slot default - The label of the radio input\n *\n * @event sgds-focus - Emitted when the control gains focus.\n * @event sgds-blur - Emitted when the control loses focus.\n */\nexport class SgdsRadio extends SgdsElement {\n static styles = [...SgdsElement.styles, formLabelStyles, radioStyles];\n /**\n * Draws the radio in a checked state\n */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** The radio's value attribute. */\n @property() value: string;\n\n /** Disables the radio. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Aligns the radios horizontally */\n @property({ type: Boolean, reflect: true }) isInline = false;\n\n /** For aria-label */\n @property({ type: String, reflect: true }) ariaLabel = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n private radioId: string = genId(\"radio\");\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setInitialAttributes();\n this.addEventListeners();\n }\n\n @watch(\"checked\")\n handleCheckedChange() {\n this.setAttribute(\"aria-checked\", this.checked ? \"true\" : \"false\");\n this.setAttribute(\"tabindex\", this.checked ? \"0\" : \"-1\");\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n }\n\n private handleBlur() {\n this.emit(\"sgds-blur\");\n }\n\n private handleClick() {\n if (!this.disabled) {\n this.checked = true;\n }\n }\n\n private handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private addEventListeners() {\n this.addEventListener(\"blur\", () => this.handleBlur());\n this.addEventListener(\"click\", () => this.handleClick());\n this.addEventListener(\"focus\", () => this.handleFocus());\n }\n\n private setInitialAttributes() {\n this.setAttribute(\"role\", \"radio\");\n this.setAttribute(\"tabindex\", \"-1\");\n this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"form-check\": true,\n \"form-check-inline\": this.isInline\n })}\n tabindex=\"-1\"\n >\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": this.invalid\n })}\n type=\"radio\"\n id=${ifDefined(this.radioId)}\n value=${ifDefined(this.value)}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @click=${this.handleClick}\n />\n <label for=\"${ifDefined(this.radioId)}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\"\n ><slot></slot\n ></label>\n </div>\n `;\n }\n}\n\nexport default SgdsRadio;\n"],"names":["formLabelStyles","radioStyles"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked.\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @slot default - default slot for SgdsSidenavLink element.\n * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot icon - icon slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem.\n *\n * @cssproperty --sidenav-item-button-border-left-width - sidenav item left border width\n * @cssproperty --sidenav-item-padding-x - sidenav item padding left and right\n * @cssproperty --sidenav-item-padding-y - sidenav item padding top and bottom\n * @cssproperty --sidenav-item-icon-title-gap - the flex gap between sidenav item icon and title\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n static styles = [...SgdsElement.styles, sidenavItemStyle];\n\n @query(\".sidenav-body\") body: HTMLElement;\n /** @internal */\n @query(\".sidenav-btn\") header: HTMLElement;\n /**\n * when true, toggles the sidenav-item to open on first load and set the active stylings.\n */\n @property({ type: Boolean })\n active = false;\n\n /**\n * When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed\n */\n @property({ type: String })\n href = \"\";\n\n /**\n * Disables the SgdsSidenavItem\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n */\n\n private collapseId: string = genId(\"sidenav\", \"collapse\");\n\n /**\n * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n */\n private buttonId: string = genId(\"sidenav\", \"button\");\n\n /** @internal */\n private index = \"-1\";\n\n private _onToggle() {\n this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n }\n\n private _onClickLink() {\n this._onToggle();\n this.active = true;\n }\n\n /** Shows the sidenav item. */\n public async show() {\n if (this.active) {\n return;\n }\n\n this.active = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hide the sidenav item */\n public async hide() {\n if (!this.active) {\n return;\n }\n this.active = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n /**\n * @deprecated since 1.1. Will be removed in 2.0 and replaced by hide.\n * When invoked, closes the SgdsSidenavItem\n */\n public async closeItem() {\n return await this.hide();\n }\n /**\n * @deprecated since 1.1. Will be removed in 2.0 and replaced by show.\n * When invoked, opens the SgdsSidenavItem\n */\n public async openItem() {\n return await this.show();\n }\n\n firstUpdated() {\n if (!this.href) {\n this.body.hidden = !this.active;\n this.body.style.height = this.active ? \"auto\" : \"0\";\n }\n }\n private _handleSummaryClick() {\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n\n this._onToggle();\n this.header.focus();\n }\n private _handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"active\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.href) return;\n if (this.active) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.active = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (sgdsHide.defaultPrevented) {\n this.active = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-hide\");\n }\n }\n\n render() {\n const withMenuTemplate = html` <button\n @click=${this._handleSummaryClick}\n @keydown=${this._handleSummaryKeyDown}\n class=\"sidenav-btn ${classMap({\n disabled: this.disabled,\n active: this.active\n })} \"\n aria-expanded=\"${this.active}\"\n aria-controls=\"${this.collapseId}\"\n aria-current=\"${this.active}\"\n id=\"${this.buttonId}\"\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"caret-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-chevron-down\"\n viewBox=\"0 0 16 16\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n />\n </svg>\n </slot>\n </button>\n <div class=\"sidenav-body\" id=\"${this.collapseId}\">\n <div class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n <slot></slot>\n </div>\n </div>`;\n\n const noMenuTemplate = html`\n <a\n href=${this.href}\n @click=${() => this._onClickLink()}\n class=\"sidenav-btn ${classMap({\n disabled: this.disabled,\n active: this.active\n })} \"\n aria-current=\"${this.active}\"\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"title\"></slot>\n </a>\n `;\n return html`\n <div class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</div>\n `;\n }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":";;;;;;;;;;;;;AAWA;;;;;;;;;;;;;;;;;AAiBG;AAEG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAME;;AAEG;QAEH,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;AAEf;;AAEG;QAEH,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;AAEV;;AAEG;QAEH,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAEjB;;AAEG;AAEK,QAAA,IAAA,CAAA,UAAU,GAAW,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAE1D;;AAEG;AACK,QAAA,IAAA,CAAA,QAAQ,GAAW,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;;QAG9C,IAAK,CAAA,KAAA,GAAG,IAAI,CAAC;KAoLtB;IAlLS,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;KAC7D;IAEO,YAAY,GAAA;QAClB,IAAI,CAAC,SAAS,EAAE,CAAC;AACjB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO;SACR;AAED,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;AACnB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO;SACR;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;AAED;;;AAGG;AACI,IAAA,MAAM,SAAS,GAAA;AACpB,QAAA,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;KAC1B;AACD;;;AAGG;AACI,IAAA,MAAM,QAAQ,GAAA;AACnB,QAAA,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;KAC1B;IAED,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;SACrD;KACF;IACO,mBAAmB,GAAA;AACzB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;AACjB,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;AACO,IAAA,qBAAqB,CAAC,KAAoB,EAAA;AAChD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;AAEvB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;iBAAM;gBACL,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;SACF;AAED,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACxD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;AAED,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF;IAGK,MAAA,gBAAgB,GAAA;QACpB,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO;AACtB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;;AAEf,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D,YAAA,IAAI,QAAQ,CAAC,gBAAgB,EAAE;AAC7B,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,OAAO;aACR;AAED,YAAA,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AAEzB,YAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;AAClE,YAAA,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;YAChG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAEhC,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;aAAM;;AAEL,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D,YAAA,IAAI,QAAQ,CAAC,gBAAgB,EAAE;AAC7B,gBAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;gBACnB,OAAO;aACR;AAED,YAAA,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEhC,YAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;AAClE,YAAA,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;AAChG,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAEhC,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;KACF;IAED,MAAM,GAAA;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAAA;AAChB,eAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;AACtB,iBAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;AAChB,2BAAA,EAAA,QAAQ,CAAC;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACe,uBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACX,uBAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAChB,sBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACrB,YAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACP,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;wBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;AAoBlB,oCAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACA,mDAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;aAGrD,CAAC;QAEV,MAAM,cAAc,GAAG,IAAI,CAAA,CAAA;;AAEhB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACP,eAAA,EAAA,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;AACb,2BAAA,EAAA,QAAQ,CAAC;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACc,sBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACf,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;wBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;;;;;KAKnD,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;AACkC,+CAAA,EAAA,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,EAAK,IAAI,CAAC,IAAI,GAAG,cAAc,GAAG,gBAAgB,CAAA;KACxG,CAAC;KACH;;AAtNM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAA3C,CAA6C;AAElC,UAAA,CAAA;IAAvB,KAAK,CAAC,eAAe,CAAC;AAAmB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnB,UAAA,CAAA;IAAtB,KAAK,CAAC,cAAc,CAAC;AAAqB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK3C,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMf,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACjB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMV,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAkGX,UAAA,CAAA;IADL,KAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAoC/C,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AA8DH,mBAAmB,CAAC,cAAc,EAAE;AAClC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC7B,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,cAAc,EAAE;AAClC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AAChC,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC9B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked.\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @slot default - default slot for SgdsSidenavLink element.\n * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot icon - icon slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem.\n *\n * @cssproperty --sidenav-item-button-border-left-width - sidenav item left border width\n * @cssproperty --sidenav-item-padding-x - sidenav item padding left and right\n * @cssproperty --sidenav-item-padding-y - sidenav item padding top and bottom\n * @cssproperty --sidenav-item-icon-title-gap - the flex gap between sidenav item icon and title\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n static styles = [...SgdsElement.styles, sidenavItemStyle];\n\n @query(\".sidenav-body\") body: HTMLElement;\n /** @internal */\n @query(\".sidenav-btn\") header: HTMLElement;\n /**\n * when true, toggles the sidenav-item to open on first load and set the active stylings.\n */\n @property({ type: Boolean })\n active = false;\n\n /**\n * When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed\n */\n @property({ type: String })\n href = \"\";\n\n /**\n * Disables the SgdsSidenavItem\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n */\n\n private collapseId: string = genId(\"sidenav\", \"collapse\");\n\n /**\n * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n */\n private buttonId: string = genId(\"sidenav\", \"button\");\n\n /** @internal */\n private index = \"-1\";\n\n private _onToggle() {\n this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n }\n\n private _onClickLink() {\n this._onToggle();\n this.active = true;\n }\n\n /** Shows the sidenav item. */\n public async show() {\n if (this.active) {\n return;\n }\n\n this.active = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hide the sidenav item */\n public async hide() {\n if (!this.active) {\n return;\n }\n this.active = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n /**\n * @deprecated since 1.1. Will be removed in 2.0 and replaced by hide.\n * When invoked, closes the SgdsSidenavItem\n */\n public async closeItem() {\n return await this.hide();\n }\n /**\n * @deprecated since 1.1. Will be removed in 2.0 and replaced by show.\n * When invoked, opens the SgdsSidenavItem\n */\n public async openItem() {\n return await this.show();\n }\n\n firstUpdated() {\n if (!this.href) {\n this.body.hidden = !this.active;\n this.body.style.height = this.active ? \"auto\" : \"0\";\n }\n }\n private _handleSummaryClick() {\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n\n this._onToggle();\n this.header.focus();\n }\n private _handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"active\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.href) return;\n if (this.active) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.active = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (sgdsHide.defaultPrevented) {\n this.active = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-hide\");\n }\n }\n\n render() {\n const withMenuTemplate = html` <button\n @click=${this._handleSummaryClick}\n @keydown=${this._handleSummaryKeyDown}\n class=\"sidenav-btn ${classMap({\n disabled: this.disabled,\n active: this.active\n })} \"\n aria-expanded=\"${this.active}\"\n aria-controls=\"${this.collapseId}\"\n aria-current=\"${this.active}\"\n id=\"${this.buttonId}\"\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"caret-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-chevron-down\"\n viewBox=\"0 0 16 16\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n />\n </svg>\n </slot>\n </button>\n <div class=\"sidenav-body\" id=\"${this.collapseId}\">\n <div class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n <slot></slot>\n </div>\n </div>`;\n\n const noMenuTemplate = html`\n <a\n href=${this.href}\n @click=${() => this._onClickLink()}\n class=\"sidenav-btn ${classMap({\n disabled: this.disabled,\n active: this.active\n })} \"\n aria-current=\"${this.active}\"\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"title\"></slot>\n </a>\n `;\n return html`\n <div class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</div>\n `;\n }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-sidenav-link.js","sources":["../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n *\n * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`\n * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right\n * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom\n * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`\n */\nexport class SgdsSidenavLink extends LinkElement {\n static styles = [...LinkElement.styles, sidenavLinkStyle];\n}\n\nexport default SgdsSidenavLink;\n"],"names":["sidenavLinkStyle"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sgds-sidenav-link.js","sources":["../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n *\n * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`\n * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right\n * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom\n * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`\n */\nexport class SgdsSidenavLink extends LinkElement {\n static styles = [...LinkElement.styles, sidenavLinkStyle];\n}\n\nexport default SgdsSidenavLink;\n"],"names":["sidenavLinkStyle"],"mappings":";;;AAGA;;;;;;;AAOG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-sidenav.js","sources":["../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n static styles = [...SgdsElement.styles, sidenavStyle];\n\n /** Allow sidenav items to stay open when another item is opened */\n @property({ type: Boolean, attribute: true })\n alwaysOpen = false;\n\n /** Apply position sticky to the sidenav */\n @property({ type: Boolean, attribute: true })\n sticky = false;\n\n /** @internal */\n @queryAssignedElements()\n private defaultNodes!: SgdsSidenavItem[];\n\n /** @internal */\n get items(): SgdsSidenavItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsSidenavItem[];\n }\n\n async onToggle(event: Event): Promise<void> {\n const target = event.target as SgdsSidenavItem;\n const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {\n // No toggling when `alwaysOpen` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsSidenavItem[];\n\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within sidenav-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.active = false;\n }\n });\n }\n\n render() {\n return html`\n <nav class=${classMap({ sticky: this.sticky })}>\n <div>\n <slot @click=${this.onToggle}></slot>\n </div>\n </nav>\n `;\n }\n}\n\nexport default SgdsSidenav;\n"],"names":["sidenavStyle"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sgds-sidenav.js","sources":["../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n static styles = [...SgdsElement.styles, sidenavStyle];\n\n /** Allow sidenav items to stay open when another item is opened */\n @property({ type: Boolean, attribute: true })\n alwaysOpen = false;\n\n /** Apply position sticky to the sidenav */\n @property({ type: Boolean, attribute: true })\n sticky = false;\n\n /** @internal */\n @queryAssignedElements()\n private defaultNodes!: SgdsSidenavItem[];\n\n /** @internal */\n get items(): SgdsSidenavItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsSidenavItem[];\n }\n\n async onToggle(event: Event): Promise<void> {\n const target = event.target as SgdsSidenavItem;\n const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {\n // No toggling when `alwaysOpen` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsSidenavItem[];\n\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within sidenav-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.active = false;\n }\n });\n }\n\n render() {\n return html`\n <nav class=${classMap({ sticky: this.sticky })}>\n <div>\n <slot @click=${this.onToggle}></slot>\n </div>\n </nav>\n `;\n }\n}\n\nexport default SgdsSidenav;\n"],"names":["sidenavStyle"],"mappings":";;;;;;;AAOA;;;;;;;;;AASG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAInB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KA8ChB;;AAvCC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACtC,CAAC;KACxB;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;AAC/C,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,KAAK,mBAAmB,CAAC;;;QAG7D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,gBAAgB,IAAI,aAAa,EAAE;;YAE9D,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAsB,CAAC;AAEnD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;mBACI,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;;AAE3B,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;KAGjC,CAAC;KACH;;AArDM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,CAAvC,CAAyC;AAItD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC9B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIP,UAAA,CAAA;AADP,IAAA,qBAAqB,EAAE;AACiB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { css } from 'lit';
|
|
3
2
|
|
|
4
3
|
var css_248z = css`:host{--sidenav-item-btn-border-left-width:0.125rem;--sidenav-item-btn-padding-x:1rem;--sidenav-item-btn-padding-y:0.5rem;--sidenav-item-icon-title-gap:1rem}.sidenav-btn{align-items:center;background:0;border:0;border-radius:0;display:flex;font-size:var(--sgds-body-font-size);gap:var(--sidenav-item-icon-title-gap);line-height:1.5rem;padding:var(--sidenav-item-btn-padding-y) var(--sidenav-item-btn-padding-x);text-align:initial;width:100%;slot[name=caret-icon]::slotted(*),svg.bi-chevron-down{margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn.active,.sidenav-btn:hover{border-left:.125rem solid;color:var(--sidenav-theme-color);font-weight:700}.sidenav-btn.disabled{cursor:not-allowed;opacity:var(--sgds-disabled-opacity)}.sidenav-btn:not(.active){slot[name=caret-icon]::slotted(*),svg.bi-chevron-down{transform:rotate(0deg)}}a.sidenav-btn{color:inherit;line-height:var(--sgds-line-height-md);text-decoration:none}div.sidenav-list{display:flex;flex-direction:column;line-height:var(--sgds-line-height-lg);list-style:none;margin:0;padding-left:0}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sidenav-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { css } from 'lit';
|
|
3
2
|
|
|
4
3
|
var css_248z = css`:host{--sidenav-link-font-size:var(--sgds-body-font-size);--sidenav-link-padding-x:1rem;--sidenav-link-padding-y:0.5rem;--sidenav-link-disabled-color:var(--sgds-disabled-color)}a.nav-link{color:inherit;display:block;font-size:var(--sidenav-link-font-size);padding-bottom:var(--sidenav-link-padding-y);padding-left:calc(var(--sidenav-link-padding-y)*4 + var(--sidenav-item-btn-border-left-width));padding-right:0;padding-top:var(--sidenav-link-padding-y);text-decoration:none}a.nav-link.active,a.nav-link:hover{color:var(--sidenav-theme-color)}a.nav-link.disabled{color:var(--sidenav-link-disabled-color);cursor:not-allowed;pointer-events:none}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sidenav-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { css } from 'lit';
|
|
3
2
|
|
|
4
3
|
var css_248z = css`:host{--sidenav-theme-color:var(--sgds-primary);--sidenav-sticky-top:0rem}div{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding-left:0}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:auto;position:sticky;top:var(--sidenav-sticky-top)}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sidenav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-spinner.js","sources":["../../../src/components/Spinner/sgds-spinner.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport spinnerStyle from \"./spinner.css\";\nimport textStyles from \"../../styles/text-variants.css\";\n/**\n * @summary Spinners notify the users that their request is being processed.\n *\n */\nexport class SgdsSpinner extends SgdsElement {\n static styles = [...SgdsElement.styles, textStyles, spinnerStyle];\n /** The type of spinner */\n @property({ type: String, reflect: true }) type: SpinnerType = \"border\";\n /** The color of spinner */\n @property({ type: String, reflect: true }) color: SpinnerColor = \"primary\";\n\n render() {\n return html`\n <div class=\"spinner-${this.type} spinner\" role=\"status\">\n <span class=\"sr-only\">Loading...</span>\n </div>\n `;\n }\n}\n\nexport type SpinnerColor = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\" | \"dark\";\n\nexport type SpinnerType = \"border\" | \"grow\";\n\nexport default SgdsSpinner;\n"],"names":["textStyles","spinnerStyle"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sgds-spinner.js","sources":["../../../src/components/Spinner/sgds-spinner.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport spinnerStyle from \"./spinner.css\";\nimport textStyles from \"../../styles/text-variants.css\";\n/**\n * @summary Spinners notify the users that their request is being processed.\n *\n */\nexport class SgdsSpinner extends SgdsElement {\n static styles = [...SgdsElement.styles, textStyles, spinnerStyle];\n /** The type of spinner */\n @property({ type: String, reflect: true }) type: SpinnerType = \"border\";\n /** The color of spinner */\n @property({ type: String, reflect: true }) color: SpinnerColor = \"primary\";\n\n render() {\n return html`\n <div class=\"spinner-${this.type} spinner\" role=\"status\">\n <span class=\"sr-only\">Loading...</span>\n </div>\n `;\n }\n}\n\nexport type SpinnerColor = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\" | \"dark\";\n\nexport type SpinnerType = \"border\" | \"grow\";\n\nexport default SgdsSpinner;\n"],"names":["textStyles","spinnerStyle"],"mappings":";;;;;;;AAKA;;;AAGG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAG6C,IAAI,CAAA,IAAA,GAAgB,QAAQ,CAAC;;QAE7B,IAAK,CAAA,KAAA,GAAiB,SAAS,CAAC;KAS5E;IAPC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACa,0BAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;KAGhC,CAAC;KACH;;AAZM,WAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,EAAEC,UAAY,CAAnD,CAAqD;AAEvB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA8B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE7B,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { css } from 'lit';
|
|
3
2
|
|
|
4
3
|
var css_248z = css`.spinner{--sgds-spinner-color:var(--sgds-primary-filled);color:var(--sgds-spinner-color)}:host([color=secondary]) .spinner{--sgds-spinner-color:var(--sgds-secondary-filled)}:host([color=warning]) .spinner{--sgds-spinner-color:var(--sgds-warning-filled)}:host([color=danger]) .spinner{--sgds-spinner-color:var(--sgds-danger-filled)}:host([color=success]) .spinner{--sgds-spinner-color:var(--sgds-success-filled)}:host([color=info]) .spinner{--sgds-spinner-color:var(--sgds-info-filled)}:host([color=light]) .spinner{--sgds-spinner-color:var(--sgds-light-filled)}:host([color=dark]) .spinner{--sgds-spinner-color:var(--sgds-dark-filled)}.spinner-border{animation:spinner-border .75s linear infinite;border:.25em solid;border-radius:50%;border-right:.25em solid transparent;color:var(--sgds-spinner-color)}.spinner-border,.spinner-grow{display:inline-block;height:2rem;vertical-align:-.125em;width:2rem}.spinner-grow{animation:spinner-grow .75s linear infinite;background-color:var(--sgds-spinner-color);border-radius:50%;opacity:0}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{animation-duration:1.5s}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"spinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-stepper.js","sources":["../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n component: unknown;\n stepHeader: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n static styles = [...SgdsElement.styles, stepperStyle];\n\n /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n */\n @property({ type: Array })\n steps: IStepMetaData[] = [];\n\n /** The current state of active step. Defaults to 0 */\n @property({ type: Number, reflect: true })\n activeStep = 0;\n\n /**Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue(\"activeStep\")\n defaultActiveStep = 0;\n\n /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n public getComponent(step: number = this.activeStep) {\n return this.steps[step].component;\n }\n /** Moves the active step forward one step */\n public nextStep() {\n this.emit(\"sgds-next-step\");\n if (this.activeStep < this.steps.length - 1) {\n this.activeStep++;\n }\n }\n\n /** Moves the active step back one step */\n public previousStep() {\n this.emit(\"sgds-previous-step\");\n\n if (this.activeStep > 0) {\n this.activeStep--;\n }\n }\n\n /** Changes the active step to the last step */\n public lastStep() {\n this.emit(\"sgds-last-step\");\n if (this.activeStep !== this.steps.length - 1) {\n this.activeStep = this.steps.length - 1;\n }\n }\n\n /** Changes active step to the first step */\n public firstStep() {\n this.emit(\"sgds-first-step\");\n if (this.activeStep > 0) {\n this.activeStep = 0;\n }\n }\n\n /** Resets the Stepper to its initial active step state */\n public reset() {\n this.emit(\"sgds-reset\");\n this.activeStep = this.defaultActiveStep;\n }\n\n /**@internal */\n _onStepperItemClick(index: number) {\n //emit an event before moving to next step\n if (this.activeStep > index) {\n this.activeStep = index;\n }\n }\n\n /**@internal */\n @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n _handleActiveStepChange() {\n this.emit(\"sgds-arrived\");\n }\n\n /**@internal */\n _handleKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"Enter\") {\n this._onStepperItemClick(index);\n }\n }\n\n render() {\n return html`\n <div class=\"sgds stepper\">\n ${this.steps.map(({ stepHeader: step }, index) => {\n return html`\n <div\n class=\"stepper-item ${classMap({\n \"is-active\": this.activeStep === index,\n \"is-completed\": this.activeStep > index,\n \"is-clickable\": this.activeStep > index\n })}\"\n tabindex=\"0\"\n aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n @click=\"${() => this._onStepperItemClick(index)}\"\n @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n >\n <div class=\"stepper-marker\">${index + 1}</div>\n <div class=\"stepper-detail\">${step}</div>\n </div>\n `;\n })}\n </div>\n `;\n }\n}\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sgds-stepper.js","sources":["../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n component: unknown;\n stepHeader: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n static styles = [...SgdsElement.styles, stepperStyle];\n\n /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n */\n @property({ type: Array })\n steps: IStepMetaData[] = [];\n\n /** The current state of active step. Defaults to 0 */\n @property({ type: Number, reflect: true })\n activeStep = 0;\n\n /**Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue(\"activeStep\")\n defaultActiveStep = 0;\n\n /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n public getComponent(step: number = this.activeStep) {\n return this.steps[step].component;\n }\n /** Moves the active step forward one step */\n public nextStep() {\n this.emit(\"sgds-next-step\");\n if (this.activeStep < this.steps.length - 1) {\n this.activeStep++;\n }\n }\n\n /** Moves the active step back one step */\n public previousStep() {\n this.emit(\"sgds-previous-step\");\n\n if (this.activeStep > 0) {\n this.activeStep--;\n }\n }\n\n /** Changes the active step to the last step */\n public lastStep() {\n this.emit(\"sgds-last-step\");\n if (this.activeStep !== this.steps.length - 1) {\n this.activeStep = this.steps.length - 1;\n }\n }\n\n /** Changes active step to the first step */\n public firstStep() {\n this.emit(\"sgds-first-step\");\n if (this.activeStep > 0) {\n this.activeStep = 0;\n }\n }\n\n /** Resets the Stepper to its initial active step state */\n public reset() {\n this.emit(\"sgds-reset\");\n this.activeStep = this.defaultActiveStep;\n }\n\n /**@internal */\n _onStepperItemClick(index: number) {\n //emit an event before moving to next step\n if (this.activeStep > index) {\n this.activeStep = index;\n }\n }\n\n /**@internal */\n @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n _handleActiveStepChange() {\n this.emit(\"sgds-arrived\");\n }\n\n /**@internal */\n _handleKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"Enter\") {\n this._onStepperItemClick(index);\n }\n }\n\n render() {\n return html`\n <div class=\"sgds stepper\">\n ${this.steps.map(({ stepHeader: step }, index) => {\n return html`\n <div\n class=\"stepper-item ${classMap({\n \"is-active\": this.activeStep === index,\n \"is-completed\": this.activeStep > index,\n \"is-clickable\": this.activeStep > index\n })}\"\n tabindex=\"0\"\n aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n @click=\"${() => this._onStepperItemClick(index)}\"\n @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n >\n <div class=\"stepper-marker\">${index + 1}</div>\n <div class=\"stepper-detail\">${step}</div>\n </div>\n `;\n })}\n </div>\n `;\n }\n}\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { css } from 'lit';
|
|
3
2
|
|
|
4
3
|
var css_248z = css`:host{--stepper-theme-color:var(--sgds-primary);--stepper-theme-hover-color:var(--sgds-primary-800);--stepper-default-color:var(--sgds-gray-400)}.sgds.stepper{display:flex;flex-wrap:wrap;font-size:var(--sgds-body-font-size)}.sgds.stepper .stepper-item{flex-basis:0;flex-grow:1;margin-top:0;position:relative}.sgds.stepper .stepper-item:not(:first-child){flex-basis:1em;flex-grow:1;flex-shrink:1}.sgds.stepper .stepper-item:not(:first-child):before{content:" ";position:absolute}.sgds.stepper .stepper-item.is-clickable{cursor:pointer}.sgds.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--stepper-theme-hover-color);border-color:var(--stepper-theme-hover-color)}.sgds.stepper .stepper-item.is-clickable:hover .stepper-detail,.sgds.stepper .stepper-item.is-clickable:hover .stepper-detail>*{color:var(--stepper-theme-hover-color);transition:all .5s ease}.sgds.stepper .stepper-item:before{background:linear-gradient(270deg,var(--stepper-default-color) 50%,var(--stepper-theme-color) 0);background-position:100% 100%;background-size:200% 100%}.sgds.stepper .stepper-item.is-active:before{background-position:0 100%}.sgds.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-white);border-color:var(--stepper-theme-color);color:var(--stepper-theme-color);font-weight:700}.sgds.stepper .stepper-item.is-completed:before{background-position:0 100%}.sgds.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--stepper-theme-color);border-color:var(--stepper-theme-color);color:var(--sgds-white);font-weight:700}.sgds.stepper .stepper-item>.stepper-marker{align-items:center;background:var(--stepper-default-color);border:.25rem solid var(--sgds-white);border-radius:50%;color:var(--sgds-white);display:flex;font-weight:400;height:2rem;justify-content:center;left:calc(50% - 1rem);position:absolute;width:2rem;z-index:1}.sgds.stepper .stepper-item:not(:first-child):before{bottom:0;height:.25rem;left:-50%;top:1rem;width:100%}.sgds.stepper .stepper-item .stepper-detail{font-weight:700;margin-left:.5rem;margin-right:.5rem;margin-top:2rem;text-align:center}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"stepper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-tab-group.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show Emitted when a tab and its panels are shown\n * @event sgds-tab-hide Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n static styles = [...SgdsElement.styles, tabGroupStyle];\n /**@internal */\n @query(\".tab-group\") tabGroup: HTMLElement;\n /**@internal */\n @query(\".tab-group__body\") body: HTMLSlotElement;\n /**@internal */\n @query(\".tab-group__nav\") nav: HTMLElement;\n /**@internal */\n private activeTab?: SgdsTab;\n /**@internal */\n private mutationObserver: MutationObserver;\n /**@internal */\n private resizeObserver: ResizeObserver;\n /**@internal */\n private tabs: SgdsTab[] = [];\n /**@internal */\n private panels: SgdsTabPanel[] = [];\n /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n connectedCallback() {\n const whenAllDefined = Promise.all([\n customElements.whenDefined(\"sgds-tab\"),\n customElements.whenDefined(\"sgds-tab-panel\")\n ]);\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => {\n return;\n });\n\n this.mutationObserver = new MutationObserver(mutations => {\n // Update aria labels when the DOM changes\n if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n setTimeout(() => this.setAriaLabels());\n }\n\n // Sync tabs when disabled states change\n if (mutations.some(m => m.attributeName === \"disabled\")) {\n this.syncTabsAndPanels();\n }\n });\n\n this.updateComplete.then(() => {\n this.syncTabsAndPanels();\n this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n this.resizeObserver.observe(this.nav);\n whenAllDefined.then(() => {\n // Set initial tab state when the tabs first become visible\n const intersectionObserver = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n // this.setTabVariant();\n this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n observer.unobserve(entries[0].target);\n }\n });\n intersectionObserver.observe(this.tabGroup);\n });\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.resizeObserver.unobserve(this.nav);\n }\n\n /** Shows the specified tab panel. */\n public show(panel: string) {\n const tab = this.tabs.find(el => el.panel === panel);\n\n if (tab) {\n this.setActiveTab(tab);\n }\n }\n /** @internal */\n private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n return options.includeDisabled\n ? el.tagName.toLowerCase() === \"sgds-tab\"\n : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n });\n }\n /** @internal */\n private getAllPanels() {\n return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n SgdsTabPanel\n ];\n }\n /** @internal */\n private getActiveTab() {\n return this.tabs.find(el => el.active);\n }\n /** @internal */\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest(\"sgds-tab\") as SgdsTab;\n const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n if (tab !== null) {\n this.setActiveTab(tab);\n }\n }\n /** @internal */\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest(\"sgds-tab\") as SgdsTab;\n const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n // Activate a tab\n if ([\"Enter\", \" \"].includes(event.key)) {\n if (tab !== null) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n let index = this.tabs.indexOf(activeEl);\n\n if (event.key === \"Home\") {\n index = 0;\n } else if (event.key === \"End\") {\n index = this.tabs.length - 1;\n } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n index--;\n } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n index++;\n }\n\n if (index < 0) {\n index = this.tabs.length - 1;\n }\n\n if (index > this.tabs.length - 1) {\n index = 0;\n }\n\n this.tabs[index].focus({ preventScroll: true });\n\n this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n event.preventDefault();\n }\n }\n }\n /** @internal */\n private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n options = {\n emitEvents: true,\n ...options\n };\n\n if (tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync active tab and panel\n this.tabs.map(el => (el.active = el === this.activeTab));\n this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n // Emit events\n if (options.emitEvents) {\n if (previousTab) {\n this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n }\n\n this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n }\n }\n }\n /** @internal */\n private setAriaLabels() {\n // Link each tab with its corresponding panel\n this.tabs.forEach(tab => {\n const panel = this.panels.find(el => el.name === tab.panel);\n if (panel) {\n tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n }\n });\n }\n\n // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n /** @internal */\n private syncTabsAndPanels() {\n this.tabs = this.getAllTabs({ includeDisabled: false });\n this.panels = this.getAllPanels();\n }\n\n render() {\n return html`\n <div\n class=\"tab-group\"\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n variant=${ifDefined(this.variant)}\n >\n <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n <slot\n name=\"nav\"\n class=${classMap({\n sgds: true,\n \"nav-tabs\": true,\n nav: true\n })}\n variant=${ifDefined(this.variant)}\n @slotchange=${this.syncTabsAndPanels}\n ></slot>\n </div>\n <div part=\"body\">\n <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-tab-group.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show Emitted when a tab and its panels are shown\n * @event sgds-tab-hide Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n static styles = [...SgdsElement.styles, tabGroupStyle];\n /**@internal */\n @query(\".tab-group\") tabGroup: HTMLElement;\n /**@internal */\n @query(\".tab-group__body\") body: HTMLSlotElement;\n /**@internal */\n @query(\".tab-group__nav\") nav: HTMLElement;\n /**@internal */\n private activeTab?: SgdsTab;\n /**@internal */\n private mutationObserver: MutationObserver;\n /**@internal */\n private resizeObserver: ResizeObserver;\n /**@internal */\n private tabs: SgdsTab[] = [];\n /**@internal */\n private panels: SgdsTabPanel[] = [];\n /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n connectedCallback() {\n const whenAllDefined = Promise.all([\n customElements.whenDefined(\"sgds-tab\"),\n customElements.whenDefined(\"sgds-tab-panel\")\n ]);\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => {\n return;\n });\n\n this.mutationObserver = new MutationObserver(mutations => {\n // Update aria labels when the DOM changes\n if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n setTimeout(() => this.setAriaLabels());\n }\n\n // Sync tabs when disabled states change\n if (mutations.some(m => m.attributeName === \"disabled\")) {\n this.syncTabsAndPanels();\n }\n });\n\n this.updateComplete.then(() => {\n this.syncTabsAndPanels();\n this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n this.resizeObserver.observe(this.nav);\n whenAllDefined.then(() => {\n // Set initial tab state when the tabs first become visible\n const intersectionObserver = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n // this.setTabVariant();\n this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n observer.unobserve(entries[0].target);\n }\n });\n intersectionObserver.observe(this.tabGroup);\n });\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.resizeObserver.unobserve(this.nav);\n }\n\n /** Shows the specified tab panel. */\n public show(panel: string) {\n const tab = this.tabs.find(el => el.panel === panel);\n\n if (tab) {\n this.setActiveTab(tab);\n }\n }\n /** @internal */\n private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n return options.includeDisabled\n ? el.tagName.toLowerCase() === \"sgds-tab\"\n : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n });\n }\n /** @internal */\n private getAllPanels() {\n return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n SgdsTabPanel\n ];\n }\n /** @internal */\n private getActiveTab() {\n return this.tabs.find(el => el.active);\n }\n /** @internal */\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest(\"sgds-tab\") as SgdsTab;\n const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n if (tab !== null) {\n this.setActiveTab(tab);\n }\n }\n /** @internal */\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest(\"sgds-tab\") as SgdsTab;\n const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n // Activate a tab\n if ([\"Enter\", \" \"].includes(event.key)) {\n if (tab !== null) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n let index = this.tabs.indexOf(activeEl);\n\n if (event.key === \"Home\") {\n index = 0;\n } else if (event.key === \"End\") {\n index = this.tabs.length - 1;\n } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n index--;\n } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n index++;\n }\n\n if (index < 0) {\n index = this.tabs.length - 1;\n }\n\n if (index > this.tabs.length - 1) {\n index = 0;\n }\n\n this.tabs[index].focus({ preventScroll: true });\n\n this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n event.preventDefault();\n }\n }\n }\n /** @internal */\n private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n options = {\n emitEvents: true,\n ...options\n };\n\n if (tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync active tab and panel\n this.tabs.map(el => (el.active = el === this.activeTab));\n this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n // Emit events\n if (options.emitEvents) {\n if (previousTab) {\n this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n }\n\n this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n }\n }\n }\n /** @internal */\n private setAriaLabels() {\n // Link each tab with its corresponding panel\n this.tabs.forEach(tab => {\n const panel = this.panels.find(el => el.name === tab.panel);\n if (panel) {\n tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n }\n });\n }\n\n // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n /** @internal */\n private syncTabsAndPanels() {\n this.tabs = this.getAllTabs({ includeDisabled: false });\n this.panels = this.getAllPanels();\n }\n\n render() {\n return html`\n <div\n class=\"tab-group\"\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n variant=${ifDefined(this.variant)}\n >\n <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n <slot\n name=\"nav\"\n class=${classMap({\n sgds: true,\n \"nav-tabs\": true,\n nav: true\n })}\n variant=${ifDefined(this.variant)}\n @slotchange=${this.syncTabsAndPanels}\n ></slot>\n </div>\n <div part=\"body\">\n <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-tab-panel.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n static styles = tabPanelStyles;\n /**@internal */\n private readonly attrId = ++id;\n /**@internal */\n private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n /** The tab panel's name. */\n @property({ reflect: true }) name = \"\";\n\n /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n @property({ type: Boolean, reflect: true }) active = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.id = this.id.length > 0 ? this.id : this.componentId;\n this.setAttribute(\"role\", \"tabpanel\");\n }\n\n @watch(\"active\")\n handleActiveChange() {\n this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n }\n\n render() {\n return html`\n <slot\n part=\"base\"\n class=${classMap({\n \"tab-panel\": true,\n \"tab-panel--active\": this.active\n })}\n ></slot>\n `;\n }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sgds-tab-panel.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n static styles = tabPanelStyles;\n /**@internal */\n private readonly attrId = ++id;\n /**@internal */\n private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n /** The tab panel's name. */\n @property({ reflect: true }) name = \"\";\n\n /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n @property({ type: Boolean, reflect: true }) active = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.id = this.id.length > 0 ? this.id : this.componentId;\n this.setAttribute(\"role\", \"tabpanel\");\n }\n\n @watch(\"active\")\n handleActiveChange() {\n this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n }\n\n render() {\n return html`\n <slot\n part=\"base\"\n class=${classMap({\n \"tab-panel\": true,\n \"tab-panel--active\": this.active\n })}\n ></slot>\n `;\n }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;AAMA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;AAQG;AACG,MAAO,YAAa,SAAQ,UAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAGmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAhCM,YAAM,CAAA,MAAA,GAAGA,QAAH,CAAkB;AAMF,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;"}
|