@govtechsg/sgds-web-component 3.3.0 → 3.3.1
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.d.ts +19 -0
- package/base/card-element.js +43 -2
- package/base/card-element.js.map +1 -1
- package/base/card.js +1 -1
- package/{src/base → base}/dropdown-element.d.ts +3 -1
- package/base/dropdown-element.js +2 -1
- package/base/dropdown-element.js.map +1 -1
- package/base/select-element.js +3 -1
- package/base/select-element.js.map +1 -1
- package/components/Breadcrumb/index.umd.js +3 -2
- package/components/Breadcrumb/index.umd.js.map +1 -1
- package/{src/components → components}/Breadcrumb/sgds-breadcrumb.d.ts +1 -1
- package/components/Breadcrumb/sgds-breadcrumb.js +1 -1
- package/components/Breadcrumb/sgds-breadcrumb.js.map +1 -1
- package/components/Card/card.js +1 -1
- package/components/Card/index.umd.js +83 -82
- package/components/Card/index.umd.js.map +1 -1
- package/{src/components → components}/Card/sgds-card.d.ts +4 -15
- package/components/Card/sgds-card.js +16 -56
- package/components/Card/sgds-card.js.map +1 -1
- package/components/Card/types.d.ts +3 -0
- package/components/ComboBox/combo-box.js +1 -1
- package/components/ComboBox/index.umd.js +18 -3
- package/components/ComboBox/index.umd.js.map +1 -1
- package/components/Datepicker/index.umd.js +17 -12
- package/components/Datepicker/index.umd.js.map +1 -1
- package/{src/components → components}/Datepicker/sgds-datepicker.d.ts +3 -2
- package/components/Datepicker/sgds-datepicker.js +15 -11
- package/components/Datepicker/sgds-datepicker.js.map +1 -1
- package/components/Dropdown/dropdown.js +1 -1
- package/components/Dropdown/index.umd.js +3 -2
- package/components/Dropdown/index.umd.js.map +1 -1
- package/components/IconCard/icon-card.js +6 -0
- package/components/IconCard/icon-card.js.map +1 -0
- package/components/IconCard/index.d.ts +6 -0
- package/components/IconCard/index.js +4 -0
- package/components/IconCard/index.js.map +1 -0
- package/components/IconCard/index.umd.js +4750 -0
- package/components/IconCard/index.umd.js.map +1 -0
- package/components/IconCard/sgds-icon-card.d.ts +24 -0
- package/components/IconCard/sgds-icon-card.js +83 -0
- package/components/IconCard/sgds-icon-card.js.map +1 -0
- package/components/ImageCard/image-card.js +6 -0
- package/components/ImageCard/image-card.js.map +1 -0
- package/components/ImageCard/index.d.ts +6 -0
- package/components/ImageCard/index.js +4 -0
- package/components/ImageCard/index.js.map +1 -0
- package/components/ImageCard/index.umd.js +4764 -0
- package/components/ImageCard/index.umd.js.map +1 -0
- package/components/ImageCard/sgds-image-card.d.ts +30 -0
- package/components/ImageCard/sgds-image-card.js +97 -0
- package/components/ImageCard/sgds-image-card.js.map +1 -0
- package/components/Mainnav/index.umd.js +5 -4
- package/components/Mainnav/index.umd.js.map +1 -1
- package/components/Mainnav/mainnav.js +1 -1
- package/components/Mainnav/sgds-mainnav-dropdown.js +1 -1
- package/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/components/Modal/index.umd.js +1 -1
- package/components/Modal/modal.js +1 -1
- package/components/OverflowMenu/index.js +5 -0
- package/components/OverflowMenu/index.js.map +1 -0
- package/components/OverflowMenu/index.umd.js +11130 -0
- package/components/OverflowMenu/index.umd.js.map +1 -0
- package/{src/internals → components}/OverflowMenu/sgds-overflow-menu.d.ts +3 -3
- package/{internals → components}/OverflowMenu/sgds-overflow-menu.js +3 -3
- package/components/OverflowMenu/sgds-overflow-menu.js.map +1 -0
- package/components/Select/index.umd.js +18 -3
- package/components/Select/index.umd.js.map +1 -1
- package/components/Select/select.js +1 -1
- package/components/ThumbnailCard/index.d.ts +6 -0
- package/components/ThumbnailCard/index.js +4 -0
- package/components/ThumbnailCard/index.js.map +1 -0
- package/components/ThumbnailCard/index.umd.js +4754 -0
- package/components/ThumbnailCard/index.umd.js.map +1 -0
- package/components/ThumbnailCard/sgds-thumbnail-card.d.ts +24 -0
- package/components/ThumbnailCard/sgds-thumbnail-card.js +87 -0
- package/components/ThumbnailCard/sgds-thumbnail-card.js.map +1 -0
- package/components/ThumbnailCard/thumbnail-card.js +6 -0
- package/components/ThumbnailCard/thumbnail-card.js.map +1 -0
- package/{src/components → components}/index.d.ts +4 -0
- package/components/index.js +4 -0
- package/components/index.js.map +1 -1
- package/components/index.umd.js +475 -208
- package/components/index.umd.js.map +1 -1
- package/{src/index.d.ts → index.d.ts} +4 -0
- package/index.js +4 -0
- package/index.js.map +1 -1
- package/index.umd.js +493 -222
- package/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/react/base/card-element.cjs.js +42 -1
- package/react/base/card-element.cjs.js.map +1 -1
- package/react/base/card-element.js +43 -2
- package/react/base/card-element.js.map +1 -1
- package/react/base/card.cjs.js +1 -1
- package/react/base/card.js +1 -1
- package/react/base/dropdown-element.cjs.js +2 -1
- package/react/base/dropdown-element.cjs.js.map +1 -1
- package/react/base/dropdown-element.js +2 -1
- package/react/base/dropdown-element.js.map +1 -1
- package/react/base/select-element.cjs.js +3 -1
- package/react/base/select-element.cjs.js.map +1 -1
- package/react/base/select-element.js +3 -1
- package/react/base/select-element.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb.js +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb.js.map +1 -1
- package/react/components/Card/card.cjs.js +1 -1
- package/react/components/Card/card.js +1 -1
- package/react/components/Card/sgds-card.cjs.js +15 -55
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js +16 -56
- package/react/components/Card/sgds-card.js.map +1 -1
- package/react/components/ComboBox/combo-box.cjs.js +1 -1
- package/react/components/ComboBox/combo-box.js +1 -1
- package/react/components/Datepicker/sgds-datepicker.cjs.js +15 -11
- package/react/components/Datepicker/sgds-datepicker.cjs.js.map +1 -1
- package/react/components/Datepicker/sgds-datepicker.js +15 -11
- package/react/components/Datepicker/sgds-datepicker.js.map +1 -1
- package/react/components/Dropdown/dropdown.cjs.js +1 -1
- package/react/components/Dropdown/dropdown.js +1 -1
- package/react/components/IconCard/icon-card.cjs.js +11 -0
- package/react/components/IconCard/icon-card.cjs.js.map +1 -0
- package/react/components/IconCard/icon-card.js +7 -0
- package/react/components/IconCard/icon-card.js.map +1 -0
- package/react/components/IconCard/sgds-icon-card.cjs.js +89 -0
- package/react/components/IconCard/sgds-icon-card.cjs.js.map +1 -0
- package/react/components/IconCard/sgds-icon-card.js +84 -0
- package/react/components/IconCard/sgds-icon-card.js.map +1 -0
- package/react/components/ImageCard/image-card.cjs.js +11 -0
- package/react/components/ImageCard/image-card.cjs.js.map +1 -0
- package/react/components/ImageCard/image-card.js +7 -0
- package/react/components/ImageCard/image-card.js.map +1 -0
- package/react/components/ImageCard/sgds-image-card.cjs.js +103 -0
- package/react/components/ImageCard/sgds-image-card.cjs.js.map +1 -0
- package/react/components/ImageCard/sgds-image-card.js +98 -0
- package/react/components/ImageCard/sgds-image-card.js.map +1 -0
- package/react/components/Mainnav/mainnav.cjs.js +1 -1
- package/react/components/Mainnav/mainnav.js +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.js +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/react/components/Modal/modal.cjs.js +1 -1
- package/react/components/Modal/modal.js +1 -1
- package/react/{internals → components}/OverflowMenu/sgds-overflow-menu.cjs.js +3 -3
- package/react/components/OverflowMenu/sgds-overflow-menu.cjs.js.map +1 -0
- package/react/{internals → components}/OverflowMenu/sgds-overflow-menu.js +3 -3
- package/react/components/OverflowMenu/sgds-overflow-menu.js.map +1 -0
- package/react/components/Select/select.cjs.js +1 -1
- package/react/components/Select/select.js +1 -1
- package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js +93 -0
- package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js.map +1 -0
- package/react/components/ThumbnailCard/sgds-thumbnail-card.js +88 -0
- package/react/components/ThumbnailCard/sgds-thumbnail-card.js.map +1 -0
- package/react/components/ThumbnailCard/thumbnail-card.cjs.js +11 -0
- package/react/components/ThumbnailCard/thumbnail-card.cjs.js.map +1 -0
- package/react/components/ThumbnailCard/thumbnail-card.js +7 -0
- package/react/components/ThumbnailCard/thumbnail-card.js.map +1 -0
- package/react/icon-card/index.cjs.js +40 -0
- package/react/icon-card/index.cjs.js.map +1 -0
- package/react/icon-card/index.js +16 -0
- package/react/icon-card/index.js.map +1 -0
- package/react/image-card/index.cjs.js +40 -0
- package/react/image-card/index.cjs.js.map +1 -0
- package/react/image-card/index.js +16 -0
- package/react/image-card/index.js.map +1 -0
- package/react/index.cjs.js +78 -70
- package/react/index.cjs.js.map +1 -1
- package/{src/react → react}/index.d.ts +4 -0
- package/react/index.js +4 -0
- package/react/index.js.map +1 -1
- package/react/overflow-menu/index.cjs.js +40 -0
- package/react/overflow-menu/index.cjs.js.map +1 -0
- package/react/overflow-menu/index.js +16 -0
- package/react/overflow-menu/index.js.map +1 -0
- package/react/thumbnail-card/index.cjs.js +40 -0
- package/react/thumbnail-card/index.cjs.js.map +1 -0
- package/react/thumbnail-card/index.d.ts +2 -0
- package/react/thumbnail-card/index.js +16 -0
- package/react/thumbnail-card/index.js.map +1 -0
- package/react/toast/index.d.ts +2 -0
- package/react/toast-container/index.d.ts +2 -0
- package/react/tooltip/index.d.ts +2 -0
- package/react/utils/popper.cjs.js +20 -0
- package/react/utils/popper.cjs.js.map +1 -0
- package/react/utils/popper.js +16 -0
- package/react/utils/popper.js.map +1 -0
- package/utils/popper.d.ts +5 -0
- package/utils/popper.js +15 -0
- package/utils/popper.js.map +1 -0
- package/internals/OverflowMenu/sgds-overflow-menu.js.map +0 -1
- package/react/internals/OverflowMenu/sgds-overflow-menu.cjs.js.map +0 -1
- package/react/internals/OverflowMenu/sgds-overflow-menu.js.map +0 -1
- package/scripts/figma/sync-figma-to-tokens/__tests__/write-tokens-to-css-var.test.d.ts +0 -0
- package/scripts/figma/sync-figma-to-tokens/color.d.ts +0 -8
- package/scripts/figma/sync-figma-to-tokens/figma_api.d.ts +0 -8
- package/scripts/figma/sync-figma-to-tokens/sync-figma-to-tokens.d.ts +0 -1
- package/scripts/figma/sync-figma-to-tokens/token_export.d.ts +0 -5
- package/scripts/figma/sync-figma-to-tokens/token_types.d.ts +0 -52
- package/scripts/figma/sync-figma-to-tokens/utils.d.ts +0 -3
- package/scripts/figma/sync-figma-to-tokens/write-tokens-to-css-var.d.ts +0 -8
- package/src/base/card-element.d.ts +0 -8
- /package/{src/base → base}/button-element.d.ts +0 -0
- /package/{src/base → base}/dropdown-list-element.d.ts +0 -0
- /package/{src/base → base}/form-control-element.d.ts +0 -0
- /package/{src/base → base}/link-element.d.ts +0 -0
- /package/{src/base → base}/select-element.d.ts +0 -0
- /package/{src/base → base}/sgds-element.d.ts +0 -0
- /package/{src/components → components}/Accordion/index.d.ts +0 -0
- /package/{src/components → components}/Accordion/sgds-accordion-item.d.ts +0 -0
- /package/{src/components → components}/Accordion/sgds-accordion.d.ts +0 -0
- /package/{src/components → components}/Alert/index.d.ts +0 -0
- /package/{src/components → components}/Alert/sgds-alert-link.d.ts +0 -0
- /package/{src/components → components}/Alert/sgds-alert.d.ts +0 -0
- /package/{src/components → components}/Badge/index.d.ts +0 -0
- /package/{src/components → components}/Badge/sgds-badge.d.ts +0 -0
- /package/{src/components → components}/Breadcrumb/index.d.ts +0 -0
- /package/{src/components → components}/Breadcrumb/sgds-breadcrumb-item.d.ts +0 -0
- /package/{src/components → components}/Button/index.d.ts +0 -0
- /package/{src/components → components}/Button/sgds-button.d.ts +0 -0
- /package/{src/components → components}/Card/index.d.ts +0 -0
- /package/{src/components → components}/Checkbox/index.d.ts +0 -0
- /package/{src/components → components}/Checkbox/sgds-checkbox-group.d.ts +0 -0
- /package/{src/components → components}/Checkbox/sgds-checkbox.d.ts +0 -0
- /package/{src/components → components}/ComboBox/combo-box-item.d.ts +0 -0
- /package/{src/components → components}/ComboBox/index.d.ts +0 -0
- /package/{src/components → components}/ComboBox/sgds-combo-box.d.ts +0 -0
- /package/{src/components → components}/Datepicker/datepicker-calendar.d.ts +0 -0
- /package/{src/components → components}/Datepicker/datepicker-header.d.ts +0 -0
- /package/{src/components → components}/Datepicker/datepicker-input.d.ts +0 -0
- /package/{src/components → components}/Datepicker/index.d.ts +0 -0
- /package/{src/components → components}/Datepicker/types.d.ts +0 -0
- /package/{src/components → components}/DescriptionList/index.d.ts +0 -0
- /package/{src/components → components}/DescriptionList/sgds-description-list-group.d.ts +0 -0
- /package/{src/components → components}/DescriptionList/sgds-description-list.d.ts +0 -0
- /package/{src/components → components}/Divider/index.d.ts +0 -0
- /package/{src/components → components}/Divider/sgds-divider.d.ts +0 -0
- /package/{src/components → components}/Drawer/index.d.ts +0 -0
- /package/{src/components → components}/Drawer/sgds-drawer.d.ts +0 -0
- /package/{src/components → components}/Dropdown/index.d.ts +0 -0
- /package/{src/components → components}/Dropdown/sgds-dropdown-item.d.ts +0 -0
- /package/{src/components → components}/Dropdown/sgds-dropdown.d.ts +0 -0
- /package/{src/components → components}/FileUpload/index.d.ts +0 -0
- /package/{src/components → components}/FileUpload/sgds-file-upload.d.ts +0 -0
- /package/{src/components → components}/Footer/index.d.ts +0 -0
- /package/{src/components → components}/Footer/sgds-footer-item.d.ts +0 -0
- /package/{src/components → components}/Footer/sgds-footer.d.ts +0 -0
- /package/{src/components → components}/Icon/icon-registry.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/archive.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-bar-down.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-bar-left.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-bar-right.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-bar-up.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-circle-down.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-circle-left.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-circle-right.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-circle-up.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-clockwise.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-down.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-left.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-repeat.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-right.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-square-down.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-square-left.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-square-right.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-square-up.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/arrow-up.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/bank-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/bell-slash.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/bell.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/bi-funnel.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/bookmark-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/bookmark.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/box-arrow-up-right.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/box-seam.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/building.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/bus.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/calculator.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/calendar-check.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/calendar-x.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/calendar.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/camera.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/car.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/chat-dots.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/chat-left-text.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/chat.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/check-circle-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/check-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/check.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/chevron-down.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/chevron-left.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/chevron-right.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/chevron-selector-vertical.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/chevron-up.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/clock.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/cloud-check.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/cloud-download.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/cloud-upload.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/cloud.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/compass.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/cross.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/cursor-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/cursor.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/dash-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/dash-square.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/dash.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/download.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/edit.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/exclamation-circle-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/exclamation-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/exclamation-triangle-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/exclamation-triangle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/exclamation.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/eye-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/eye-slash-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/eye-slash.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/eye.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/facebook.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/file-earmark-text.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/file-pdf.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/file-plus.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/file-text.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/file.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/files.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/folder-check.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/folder-minus.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/folder-plus.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/folder.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/gear.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/geo-alt.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/geo-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/geo.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/globe-alt.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/globe.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/google.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/grid-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/hand-thumbs-down.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/hand-thumbs-up.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/hard-drive.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/heart.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/house-door.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/house.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/image.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/in-box.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/info-circle-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/info-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/instagram.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/laptop.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/layers.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/layout-text-window-reverse.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/layout-text-window.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/layout.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/lightbulb.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/link.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/linkedin.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/list.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/lock-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/lock.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/login.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/logout.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/luggage.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/mail.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/map.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/menu.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/microphone.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/monitor.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/paperclip.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/passport.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/pencil.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/pending-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/person-dash.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/person-plus.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/person-x.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/person.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/phone.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/pin-map-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/pin.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/placeholder.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/plane.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/plus-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/plus-square.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/plus.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/printer.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/question-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/rocket.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/save.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/search.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/send.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/sg-crest.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/share.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/slash-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/sliders.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/speedometer.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/star-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/star.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/stoplights.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/switch-horizontal.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/switch-vertical.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/tablet.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/telephone.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/three-dots-vertical.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/three-dots.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/ticket.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/toggle-off.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/toggle-on.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/train.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/translate.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/trash.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/truck.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/twitter-x.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/unlock.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/upload.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/user-circle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/user-square.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/users.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/video-recorder.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/volume-max.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/volume-x.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-dash.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-desktop.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-dock.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-fullscreen.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-plus.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-sidebar.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-split.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-stack.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window-x.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/window.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/xcircle-fill.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/xcircle.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/youtube.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/zoom-in.d.ts +0 -0
- /package/{src/components → components}/Icon/icons/zoom-out.d.ts +0 -0
- /package/{src/components → components}/Icon/index.d.ts +0 -0
- /package/{src/components → components}/Icon/sgds-icon.d.ts +0 -0
- /package/{src/components → components}/IconButton/index.d.ts +0 -0
- /package/{src/components → components}/IconButton/sgds-icon-button.d.ts +0 -0
- /package/{src/components → components}/IconList/index.d.ts +0 -0
- /package/{src/components → components}/IconList/sgds-icon-list.d.ts +0 -0
- /package/{src/components → components}/Input/index.d.ts +0 -0
- /package/{src/components → components}/Input/sgds-input.d.ts +0 -0
- /package/{src/components → components}/Link/index.d.ts +0 -0
- /package/{src/components → components}/Link/sgds-link.d.ts +0 -0
- /package/{src/components → components}/Mainnav/index.d.ts +0 -0
- /package/{src/components → components}/Mainnav/mainnav-context.d.ts +0 -0
- /package/{src/components → components}/Mainnav/sgds-mainnav-dropdown.d.ts +0 -0
- /package/{src/components → components}/Mainnav/sgds-mainnav-item.d.ts +0 -0
- /package/{src/components → components}/Mainnav/sgds-mainnav.d.ts +0 -0
- /package/{src/components → components}/Masthead/index.d.ts +0 -0
- /package/{src/components → components}/Masthead/sgds-masthead.d.ts +0 -0
- /package/{src/components → components}/Modal/index.d.ts +0 -0
- /package/{src/components → components}/Modal/sgds-modal.d.ts +0 -0
- /package/{src/internals → components}/OverflowMenu/index.d.ts +0 -0
- /package/{internals → components}/OverflowMenu/overflow-menu.js +0 -0
- /package/{internals → components}/OverflowMenu/overflow-menu.js.map +0 -0
- /package/{src/components → components}/Pagination/index.d.ts +0 -0
- /package/{src/components → components}/Pagination/sgds-pagination.d.ts +0 -0
- /package/{src/components → components}/ProgressBar/index.d.ts +0 -0
- /package/{src/components → components}/ProgressBar/sgds-progress-bar.d.ts +0 -0
- /package/{src/components → components}/QuantityToggle/index.d.ts +0 -0
- /package/{src/components → components}/QuantityToggle/sgds-quantity-toggle.d.ts +0 -0
- /package/{src/components → components}/Radio/index.d.ts +0 -0
- /package/{src/components → components}/Radio/sgds-radio-group.d.ts +0 -0
- /package/{src/components → components}/Radio/sgds-radio.d.ts +0 -0
- /package/{src/components → components}/Select/index.d.ts +0 -0
- /package/{src/components → components}/Select/select-item.d.ts +0 -0
- /package/{src/components → components}/Select/sgds-select.d.ts +0 -0
- /package/{src/components → components}/Sidenav/index.d.ts +0 -0
- /package/{src/components → components}/Sidenav/sgds-sidenav-item.d.ts +0 -0
- /package/{src/components → components}/Sidenav/sgds-sidenav-link.d.ts +0 -0
- /package/{src/components → components}/Sidenav/sgds-sidenav.d.ts +0 -0
- /package/{src/components → components}/Skeleton/index.d.ts +0 -0
- /package/{src/components → components}/Skeleton/sgds-skeleton.d.ts +0 -0
- /package/{src/components → components}/Spinner/index.d.ts +0 -0
- /package/{src/components → components}/Spinner/sgds-spinner.d.ts +0 -0
- /package/{src/components → components}/Stepper/index.d.ts +0 -0
- /package/{src/components → components}/Stepper/sgds-stepper.d.ts +0 -0
- /package/{src/components → components}/Subnav/index.d.ts +0 -0
- /package/{src/components → components}/Subnav/sgds-subnav-item.d.ts +0 -0
- /package/{src/components → components}/Subnav/sgds-subnav.d.ts +0 -0
- /package/{src/components → components}/Switch/index.d.ts +0 -0
- /package/{src/components → components}/Switch/sgds-switch.d.ts +0 -0
- /package/{src/components → components}/Tab/index.d.ts +0 -0
- /package/{src/components → components}/Tab/sgds-tab-group.d.ts +0 -0
- /package/{src/components → components}/Tab/sgds-tab-panel.d.ts +0 -0
- /package/{src/components → components}/Tab/sgds-tab.d.ts +0 -0
- /package/{src/components → components}/Table/index.d.ts +0 -0
- /package/{src/components → components}/Table/sgds-table-cell.d.ts +0 -0
- /package/{src/components → components}/Table/sgds-table-head.d.ts +0 -0
- /package/{src/components → components}/Table/sgds-table-row.d.ts +0 -0
- /package/{src/components → components}/Table/sgds-table.d.ts +0 -0
- /package/{src/components → components}/TableOfContents/index.d.ts +0 -0
- /package/{src/components → components}/TableOfContents/sgds-table-of-contents.d.ts +0 -0
- /package/{src/components → components}/Textarea/index.d.ts +0 -0
- /package/{src/components → components}/Textarea/sgds-textarea.d.ts +0 -0
- /package/{src/components → components}/Toast/index.d.ts +0 -0
- /package/{src/components → components}/Toast/sgds-toast-container.d.ts +0 -0
- /package/{src/components → components}/Toast/sgds-toast.d.ts +0 -0
- /package/{src/components → components}/Tooltip/index.d.ts +0 -0
- /package/{src/components → components}/Tooltip/sgds-tooltip.d.ts +0 -0
- /package/{src/internals → internals}/CloseButton/index.d.ts +0 -0
- /package/{src/internals → internals}/CloseButton/sgds-close-button.d.ts +0 -0
- /package/{src/react → react}/accordion/index.d.ts +0 -0
- /package/{src/react → react}/accordion-item/index.d.ts +0 -0
- /package/{src/react → react}/alert/index.d.ts +0 -0
- /package/{src/react → react}/alert-link/index.d.ts +0 -0
- /package/{src/react → react}/badge/index.d.ts +0 -0
- /package/{src/react → react}/breadcrumb/index.d.ts +0 -0
- /package/{src/react → react}/breadcrumb-item/index.d.ts +0 -0
- /package/{src/react → react}/button/index.d.ts +0 -0
- /package/{src/react → react}/card/index.d.ts +0 -0
- /package/{src/react → react}/checkbox/index.d.ts +0 -0
- /package/{src/react → react}/checkbox-group/index.d.ts +0 -0
- /package/{src/react → react}/combo-box/index.d.ts +0 -0
- /package/react/{internals → components}/OverflowMenu/overflow-menu.cjs.js +0 -0
- /package/react/{internals → components}/OverflowMenu/overflow-menu.cjs.js.map +0 -0
- /package/react/{internals → components}/OverflowMenu/overflow-menu.js +0 -0
- /package/react/{internals → components}/OverflowMenu/overflow-menu.js.map +0 -0
- /package/{src/react → react}/datepicker/index.d.ts +0 -0
- /package/{src/react → react}/description-list/index.d.ts +0 -0
- /package/{src/react → react}/description-list-group/index.d.ts +0 -0
- /package/{src/react → react}/divider/index.d.ts +0 -0
- /package/{src/react → react}/drawer/index.d.ts +0 -0
- /package/{src/react → react}/dropdown/index.d.ts +0 -0
- /package/{src/react → react}/dropdown-item/index.d.ts +0 -0
- /package/{src/react → react}/file-upload/index.d.ts +0 -0
- /package/{src/react → react}/footer/index.d.ts +0 -0
- /package/{src/react → react}/footer-item/index.d.ts +0 -0
- /package/{src/react/input → react/icon}/index.d.ts +0 -0
- /package/{src/react → react}/icon-button/index.d.ts +0 -0
- /package/{src/react/icon-list → react/icon-card}/index.d.ts +0 -0
- /package/{src/react/icon → react/icon-list}/index.d.ts +0 -0
- /package/{src/react/link → react/image-card}/index.d.ts +0 -0
- /package/{src/react/mainnav-dropdown → react/input}/index.d.ts +0 -0
- /package/{src/react/mainnav-item → react/link}/index.d.ts +0 -0
- /package/{src/react/modal → react/mainnav}/index.d.ts +0 -0
- /package/{src/react/mainnav → react/mainnav-dropdown}/index.d.ts +0 -0
- /package/{src/react/masthead → react/mainnav-item}/index.d.ts +0 -0
- /package/{src/react/pagination → react/masthead}/index.d.ts +0 -0
- /package/{src/react/progress-bar → react/modal}/index.d.ts +0 -0
- /package/{src/react/quantity-toggle → react/overflow-menu}/index.d.ts +0 -0
- /package/{src/react/radio-group → react/pagination}/index.d.ts +0 -0
- /package/{src/react/radio → react/progress-bar}/index.d.ts +0 -0
- /package/{src/react/select → react/quantity-toggle}/index.d.ts +0 -0
- /package/{src/react/sidenav-link → react/radio}/index.d.ts +0 -0
- /package/{src/react/sidenav-item → react/radio-group}/index.d.ts +0 -0
- /package/{src/react/sidenav → react/select}/index.d.ts +0 -0
- /package/{src/react/stepper → react/sidenav}/index.d.ts +0 -0
- /package/{src/react/skeleton → react/sidenav-item}/index.d.ts +0 -0
- /package/{src/react/spinner → react/sidenav-link}/index.d.ts +0 -0
- /package/{src/react/subnav-item → react/skeleton}/index.d.ts +0 -0
- /package/{src/react/subnav → react/spinner}/index.d.ts +0 -0
- /package/{src/react/switch → react/stepper}/index.d.ts +0 -0
- /package/{src/react/tab-panel → react/subnav}/index.d.ts +0 -0
- /package/{src/react/tab-group → react/subnav-item}/index.d.ts +0 -0
- /package/{src/react/tab → react/switch}/index.d.ts +0 -0
- /package/{src/react/table-of-contents → react/tab}/index.d.ts +0 -0
- /package/{src/react/table-cell → react/tab-group}/index.d.ts +0 -0
- /package/{src/react/table-head → react/tab-panel}/index.d.ts +0 -0
- /package/{src/react/toast → react/table}/index.d.ts +0 -0
- /package/{src/react/table-row → react/table-cell}/index.d.ts +0 -0
- /package/{src/react/table → react/table-head}/index.d.ts +0 -0
- /package/{src/react/textarea → react/table-of-contents}/index.d.ts +0 -0
- /package/{src/react/toast-container → react/table-row}/index.d.ts +0 -0
- /package/{src/react/tooltip → react/textarea}/index.d.ts +0 -0
- /package/{src/utils → utils}/animate.d.ts +0 -0
- /package/{src/utils → utils}/animation-registry.d.ts +0 -0
- /package/{src/utils → utils}/breakpoints.d.ts +0 -0
- /package/{src/utils → utils}/ce-registry.d.ts +0 -0
- /package/{src/utils → utils}/defaultvalue.d.ts +0 -0
- /package/{src/utils → utils}/event.d.ts +0 -0
- /package/{src/utils → utils}/formSubmitController.d.ts +0 -0
- /package/{src/utils → utils}/generateCustomElementName.d.ts +0 -0
- /package/{src/utils → utils}/generateId.d.ts +0 -0
- /package/{src/utils → utils}/inputValidationController.d.ts +0 -0
- /package/{src/utils → utils}/mergeDeep.d.ts +0 -0
- /package/{src/utils → utils}/modal.d.ts +0 -0
- /package/{src/utils → utils}/object.d.ts +0 -0
- /package/{src/utils → utils}/offset.d.ts +0 -0
- /package/{src/utils → utils}/scroll.d.ts +0 -0
- /package/{src/utils → utils}/slot.d.ts +0 -0
- /package/{src/utils → utils}/tabbable.d.ts +0 -0
- /package/{src/utils → utils}/test.d.ts +0 -0
- /package/{src/utils → utils}/time.d.ts +0 -0
- /package/{src/utils → utils}/validatorMixin.d.ts +0 -0
- /package/{src/utils → utils}/watch.d.ts +0 -0
package/index.umd.js
CHANGED
|
@@ -4382,7 +4382,7 @@
|
|
|
4382
4382
|
});
|
|
4383
4383
|
}
|
|
4384
4384
|
|
|
4385
|
-
var css_248z$
|
|
4385
|
+
var css_248z$1k = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
|
|
4386
4386
|
|
|
4387
4387
|
/**
|
|
4388
4388
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -4439,11 +4439,11 @@
|
|
|
4439
4439
|
});
|
|
4440
4440
|
}
|
|
4441
4441
|
}
|
|
4442
|
-
SgdsElement.styles = [css_248z$
|
|
4442
|
+
SgdsElement.styles = [css_248z$1k];
|
|
4443
4443
|
/** @internal */
|
|
4444
4444
|
SgdsElement.dependencies = {};
|
|
4445
4445
|
|
|
4446
|
-
var css_248z$
|
|
4446
|
+
var css_248z$1j = css`:host([variant=border]) .accordion{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md)}`;
|
|
4447
4447
|
|
|
4448
4448
|
const VALID_KEYS$1 = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
|
|
4449
4449
|
/**
|
|
@@ -4515,7 +4515,7 @@
|
|
|
4515
4515
|
`;
|
|
4516
4516
|
}
|
|
4517
4517
|
}
|
|
4518
|
-
SgdsAccordion.styles = [...SgdsElement.styles, css_248z$
|
|
4518
|
+
SgdsAccordion.styles = [...SgdsElement.styles, css_248z$1j];
|
|
4519
4519
|
__decorate([
|
|
4520
4520
|
property({ type: Boolean, reflect: true })
|
|
4521
4521
|
], SgdsAccordion.prototype, "allowMultiple", void 0);
|
|
@@ -4790,7 +4790,7 @@
|
|
|
4790
4790
|
};
|
|
4791
4791
|
}
|
|
4792
4792
|
|
|
4793
|
-
var css_248z$
|
|
4793
|
+
var css_248z$1i = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-heading);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
|
|
4794
4794
|
|
|
4795
4795
|
/**
|
|
4796
4796
|
*
|
|
@@ -4925,7 +4925,7 @@
|
|
|
4925
4925
|
`;
|
|
4926
4926
|
}
|
|
4927
4927
|
}
|
|
4928
|
-
SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$
|
|
4928
|
+
SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$1i];
|
|
4929
4929
|
__decorate([
|
|
4930
4930
|
query(".accordion-item")
|
|
4931
4931
|
], SgdsAccordionItem.prototype, "accordion", void 0);
|
|
@@ -5112,7 +5112,7 @@
|
|
|
5112
5112
|
*/
|
|
5113
5113
|
const ifDefined = (value) => value ?? nothing;
|
|
5114
5114
|
|
|
5115
|
-
var css_248z$
|
|
5115
|
+
var css_248z$1h = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
|
|
5116
5116
|
|
|
5117
5117
|
/**
|
|
5118
5118
|
* @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
|
|
@@ -5156,7 +5156,7 @@
|
|
|
5156
5156
|
`;
|
|
5157
5157
|
}
|
|
5158
5158
|
}
|
|
5159
|
-
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$
|
|
5159
|
+
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$1h];
|
|
5160
5160
|
__decorate([
|
|
5161
5161
|
property({ type: String })
|
|
5162
5162
|
], SgdsCloseButton.prototype, "ariaLabel", void 0);
|
|
@@ -7615,7 +7615,7 @@
|
|
|
7615
7615
|
"zoom-out": ZoomOut
|
|
7616
7616
|
};
|
|
7617
7617
|
|
|
7618
|
-
var css_248z$
|
|
7618
|
+
var css_248z$1g = css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
|
|
7619
7619
|
|
|
7620
7620
|
/**
|
|
7621
7621
|
* @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons from `SgdsIcon` library set
|
|
@@ -7641,7 +7641,7 @@
|
|
|
7641
7641
|
return icon ? icon : nothing;
|
|
7642
7642
|
}
|
|
7643
7643
|
}
|
|
7644
|
-
SgdsIcon.styles = [...SgdsElement.styles, css_248z$
|
|
7644
|
+
SgdsIcon.styles = [...SgdsElement.styles, css_248z$1g];
|
|
7645
7645
|
__decorate([
|
|
7646
7646
|
property({ type: String, reflect: true })
|
|
7647
7647
|
], SgdsIcon.prototype, "name", void 0);
|
|
@@ -7649,7 +7649,7 @@
|
|
|
7649
7649
|
property({ type: String, reflect: true })
|
|
7650
7650
|
], SgdsIcon.prototype, "size", void 0);
|
|
7651
7651
|
|
|
7652
|
-
var css_248z$
|
|
7652
|
+
var css_248z$1f = css`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
|
|
7653
7653
|
|
|
7654
7654
|
/**
|
|
7655
7655
|
* @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.
|
|
@@ -7711,7 +7711,7 @@
|
|
|
7711
7711
|
: nothing;
|
|
7712
7712
|
}
|
|
7713
7713
|
}
|
|
7714
|
-
SgdsAlert.styles = [...SgdsElement.styles, css_248z$
|
|
7714
|
+
SgdsAlert.styles = [...SgdsElement.styles, css_248z$1f];
|
|
7715
7715
|
/**@internal */
|
|
7716
7716
|
SgdsAlert.dependencies = {
|
|
7717
7717
|
"sgds-close-button": SgdsCloseButton,
|
|
@@ -7736,9 +7736,9 @@
|
|
|
7736
7736
|
watch("show")
|
|
7737
7737
|
], SgdsAlert.prototype, "_handleShowChange", null);
|
|
7738
7738
|
|
|
7739
|
-
var css_248z$
|
|
7739
|
+
var css_248z$1e = css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
|
|
7740
7740
|
|
|
7741
|
-
var css_248z$
|
|
7741
|
+
var css_248z$1d = css`::slotted(a[target=_blank]:after),a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}`;
|
|
7742
7742
|
|
|
7743
7743
|
/**
|
|
7744
7744
|
* @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`
|
|
@@ -7752,7 +7752,7 @@
|
|
|
7752
7752
|
`;
|
|
7753
7753
|
}
|
|
7754
7754
|
}
|
|
7755
|
-
SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$
|
|
7755
|
+
SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$1d, css_248z$1e];
|
|
7756
7756
|
__decorate([
|
|
7757
7757
|
property({ type: String, reflect: true })
|
|
7758
7758
|
], SgdsAlertLink.prototype, "href", void 0);
|
|
@@ -7763,7 +7763,7 @@
|
|
|
7763
7763
|
register("sgds-alert", SgdsAlert);
|
|
7764
7764
|
register("sgds-alert-link", SgdsAlertLink);
|
|
7765
7765
|
|
|
7766
|
-
var css_248z$
|
|
7766
|
+
var css_248z$1c = css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24,24px);justify-content:center;max-width:192px;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}.badge.truncated .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}slot::slotted(*){font-size:14px;font-weight:400}`;
|
|
7767
7767
|
|
|
7768
7768
|
var top = 'top';
|
|
7769
7769
|
var bottom = 'bottom';
|
|
@@ -11869,7 +11869,7 @@
|
|
|
11869
11869
|
*/
|
|
11870
11870
|
const ref = directive(RefDirective);
|
|
11871
11871
|
|
|
11872
|
-
var css_248z$
|
|
11872
|
+
var css_248z$1b = css`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
|
|
11873
11873
|
|
|
11874
11874
|
/**
|
|
11875
11875
|
* @summary Tooltips display more information when users hover over, focus on, or interact with an element.
|
|
@@ -11962,7 +11962,7 @@
|
|
|
11962
11962
|
`;
|
|
11963
11963
|
}
|
|
11964
11964
|
}
|
|
11965
|
-
SgdsTooltip.styles = [...SgdsElement.styles, css_248z$
|
|
11965
|
+
SgdsTooltip.styles = [...SgdsElement.styles, css_248z$1b];
|
|
11966
11966
|
__decorate([
|
|
11967
11967
|
property({ type: String })
|
|
11968
11968
|
], SgdsTooltip.prototype, "content", void 0);
|
|
@@ -12150,7 +12150,7 @@
|
|
|
12150
12150
|
: nothing;
|
|
12151
12151
|
}
|
|
12152
12152
|
}
|
|
12153
|
-
SgdsBadge.styles = [...SgdsElement.styles, css_248z$
|
|
12153
|
+
SgdsBadge.styles = [...SgdsElement.styles, css_248z$1c];
|
|
12154
12154
|
/**@internal */
|
|
12155
12155
|
SgdsBadge.dependencies = {
|
|
12156
12156
|
"sgds-close-button": SgdsCloseButton,
|
|
@@ -12186,7 +12186,7 @@
|
|
|
12186
12186
|
|
|
12187
12187
|
register("sgds-badge", SgdsBadge);
|
|
12188
12188
|
|
|
12189
|
-
var css_248z$
|
|
12189
|
+
var css_248z$1a = css`:host([size=sm]) .overflow-btn{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.overflow-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border-radius:var(--sgds-border-radius-sm);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.overflow-btn:hover{background-color:var(--sgds-bg-translucent-subtle)}.overflow-btn:focus,.overflow-btn:focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
|
|
12190
12190
|
|
|
12191
12191
|
/**
|
|
12192
12192
|
* --------------------------------------------------------------------------
|
|
@@ -12708,6 +12708,7 @@
|
|
|
12708
12708
|
//working
|
|
12709
12709
|
this.dropdownConfig = {
|
|
12710
12710
|
placement: "bottom-start",
|
|
12711
|
+
strategy: "fixed",
|
|
12711
12712
|
modifiers: !this.noFlip
|
|
12712
12713
|
? this.modifierOpt
|
|
12713
12714
|
: [
|
|
@@ -12805,7 +12806,7 @@
|
|
|
12805
12806
|
state()
|
|
12806
12807
|
], DropdownElement.prototype, "dropdownConfig", void 0);
|
|
12807
12808
|
__decorate([
|
|
12808
|
-
property()
|
|
12809
|
+
property({ type: Array })
|
|
12809
12810
|
], DropdownElement.prototype, "modifierOpt", void 0);
|
|
12810
12811
|
__decorate([
|
|
12811
12812
|
property({ type: Boolean, reflect: true })
|
|
@@ -12959,9 +12960,9 @@
|
|
|
12959
12960
|
state()
|
|
12960
12961
|
], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
|
|
12961
12962
|
|
|
12962
|
-
var css_248z$
|
|
12963
|
+
var css_248z$19 = css`.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1000}.dropdown-menu.show{display:block}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
|
|
12963
12964
|
|
|
12964
|
-
var css_248z$
|
|
12965
|
+
var css_248z$18 = css`.dropdown{display:flex;height:inherit;position:relative}`;
|
|
12965
12966
|
|
|
12966
12967
|
/**
|
|
12967
12968
|
* @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.
|
|
@@ -13040,7 +13041,7 @@
|
|
|
13040
13041
|
`;
|
|
13041
13042
|
}
|
|
13042
13043
|
}
|
|
13043
|
-
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$
|
|
13044
|
+
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$18, css_248z$19];
|
|
13044
13045
|
__decorate([
|
|
13045
13046
|
property({ type: Boolean, reflect: true, state: false })
|
|
13046
13047
|
], SgdsDropdown.prototype, "noFlip", void 0);
|
|
@@ -13057,7 +13058,7 @@
|
|
|
13057
13058
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
13058
13059
|
], SgdsDropdown.prototype, "_handleDisabled", null);
|
|
13059
13060
|
|
|
13060
|
-
var css_248z$
|
|
13061
|
+
var css_248z$17 = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
|
|
13061
13062
|
|
|
13062
13063
|
/**
|
|
13063
13064
|
* @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
|
|
@@ -13098,7 +13099,7 @@
|
|
|
13098
13099
|
`;
|
|
13099
13100
|
}
|
|
13100
13101
|
}
|
|
13101
|
-
SgdsDropdownItem.styles = [css_248z$
|
|
13102
|
+
SgdsDropdownItem.styles = [css_248z$18, css_248z$17];
|
|
13102
13103
|
SgdsDropdownItem.dependencies = {
|
|
13103
13104
|
"sgds-icon": SgdsIcon
|
|
13104
13105
|
};
|
|
@@ -13133,7 +13134,7 @@
|
|
|
13133
13134
|
`;
|
|
13134
13135
|
}
|
|
13135
13136
|
}
|
|
13136
|
-
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z$
|
|
13137
|
+
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z$1a];
|
|
13137
13138
|
/** @internal */
|
|
13138
13139
|
SgdsOverflowMenu.dependencies = {
|
|
13139
13140
|
"sgds-dropdown": SgdsDropdown,
|
|
@@ -13144,7 +13145,7 @@
|
|
|
13144
13145
|
property({ type: String, reflect: true })
|
|
13145
13146
|
], SgdsOverflowMenu.prototype, "size", void 0);
|
|
13146
13147
|
|
|
13147
|
-
var css_248z$
|
|
13148
|
+
var css_248z$16 = css`.breadcrumb{display:flex;gap:var(--sgds-gap-xs)}`;
|
|
13148
13149
|
|
|
13149
13150
|
/**
|
|
13150
13151
|
* @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.
|
|
@@ -13215,7 +13216,7 @@
|
|
|
13215
13216
|
`;
|
|
13216
13217
|
}
|
|
13217
13218
|
}
|
|
13218
|
-
SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$
|
|
13219
|
+
SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$16];
|
|
13219
13220
|
SgdsBreadcrumb.dependencies = {
|
|
13220
13221
|
"sgds-overflow-menu": SgdsOverflowMenu
|
|
13221
13222
|
};
|
|
@@ -13226,7 +13227,7 @@
|
|
|
13226
13227
|
query("slot")
|
|
13227
13228
|
], SgdsBreadcrumb.prototype, "defaultSlot", void 0);
|
|
13228
13229
|
|
|
13229
|
-
var css_248z$
|
|
13230
|
+
var css_248z$15 = css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);justify-content:center;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])),.nav-link::slotted(a:focus:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
|
|
13230
13231
|
|
|
13231
13232
|
/**
|
|
13232
13233
|
* @summary Link allows users to click and navigate their way from page to page
|
|
@@ -13258,7 +13259,7 @@
|
|
|
13258
13259
|
return html$1 `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
|
|
13259
13260
|
}
|
|
13260
13261
|
}
|
|
13261
|
-
SgdsLink.styles = [...SgdsElement.styles, css_248z$
|
|
13262
|
+
SgdsLink.styles = [...SgdsElement.styles, css_248z$15];
|
|
13262
13263
|
__decorate([
|
|
13263
13264
|
property({ type: String, reflect: true })
|
|
13264
13265
|
], SgdsLink.prototype, "size", void 0);
|
|
@@ -13266,7 +13267,7 @@
|
|
|
13266
13267
|
property({ type: String, reflect: true })
|
|
13267
13268
|
], SgdsLink.prototype, "variant", void 0);
|
|
13268
13269
|
|
|
13269
|
-
var css_248z$
|
|
13270
|
+
var css_248z$14 = css`:host{align-items:center;display:flex;gap:var(--sgds-gap-xs)}:host([active]) .nav-link::slotted(*){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default);pointer-events:none}:host([active]) .nav-link::slotted(:focus),:host([active]) .nav-link::slotted(:focus-visible),:host([active]) .nav-link::slotted(:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}.separator svg{display:block}:host(:last-of-type) .separator{display:none}`;
|
|
13270
13271
|
|
|
13271
13272
|
/**
|
|
13272
13273
|
* @summary Breadcrumb Item are navigational links used in Breadcrumb component
|
|
@@ -13295,7 +13296,7 @@
|
|
|
13295
13296
|
`;
|
|
13296
13297
|
}
|
|
13297
13298
|
}
|
|
13298
|
-
SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z$
|
|
13299
|
+
SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z$14];
|
|
13299
13300
|
__decorate([
|
|
13300
13301
|
property({ type: Boolean, reflect: true })
|
|
13301
13302
|
], SgdsBreadcrumbItem.prototype, "active", void 0);
|
|
@@ -13303,7 +13304,7 @@
|
|
|
13303
13304
|
register("sgds-breadcrumb", SgdsBreadcrumb);
|
|
13304
13305
|
register("sgds-breadcrumb-item", SgdsBreadcrumbItem);
|
|
13305
13306
|
|
|
13306
|
-
var css_248z$
|
|
13307
|
+
var css_248z$13 = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
|
|
13307
13308
|
|
|
13308
13309
|
class ButtonElement extends SgdsElement {
|
|
13309
13310
|
constructor() {
|
|
@@ -13345,7 +13346,7 @@
|
|
|
13345
13346
|
}
|
|
13346
13347
|
}
|
|
13347
13348
|
}
|
|
13348
|
-
ButtonElement.styles = [...SgdsElement.styles, css_248z$
|
|
13349
|
+
ButtonElement.styles = [...SgdsElement.styles, css_248z$13];
|
|
13349
13350
|
__decorate([
|
|
13350
13351
|
query(".btn")
|
|
13351
13352
|
], ButtonElement.prototype, "button", void 0);
|
|
@@ -13431,7 +13432,7 @@
|
|
|
13431
13432
|
}
|
|
13432
13433
|
}
|
|
13433
13434
|
|
|
13434
|
-
var css_248z
|
|
13435
|
+
var css_248z$12 = css`:host{display:inline-block}:host([fullWidth]),:host([fullWidth]) .btn{width:100%}:host([fullWidth]) .btn.has-left-icon{justify-content:flex-start}:host([fullWidth]) .btn.has-right-icon{justify-content:space-between}:host([fullWidth]) .btn.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
|
|
13435
13436
|
|
|
13436
13437
|
/**
|
|
13437
13438
|
* @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
|
@@ -13532,7 +13533,7 @@
|
|
|
13532
13533
|
`;
|
|
13533
13534
|
}
|
|
13534
13535
|
}
|
|
13535
|
-
SgdsButton.styles = [...ButtonElement.styles, css_248z$
|
|
13536
|
+
SgdsButton.styles = [...ButtonElement.styles, css_248z$1d, css_248z$12];
|
|
13536
13537
|
__decorate([
|
|
13537
13538
|
state()
|
|
13538
13539
|
], SgdsButton.prototype, "_hasLeftIcon", void 0);
|
|
@@ -13563,55 +13564,92 @@
|
|
|
13563
13564
|
|
|
13564
13565
|
register("sgds-button", SgdsButton);
|
|
13565
13566
|
|
|
13566
|
-
var css_248z$
|
|
13567
|
+
var css_248z$11 = css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
|
|
13567
13568
|
|
|
13568
|
-
var css_248z$
|
|
13569
|
+
var css_248z$10 = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
|
|
13569
13570
|
|
|
13570
|
-
var css_248z
|
|
13571
|
+
var css_248z$$ = css`.bg-primary{background-color:var(--sgds-primary)!important}.bg-secondary{background-color:var(--sgds-secondary)!important}.bg-success{background-color:var(--sgds-success)!important}.bg-info{background-color:var(--sgds-info)!important}.bg-warning{background-color:var(--sgds-warning)!important}.bg-danger{background-color:var(--sgds-danger)!important}.bg-light{background-color:var(--sgds-light)!important}.bg-dark{background-color:var(--sgds-dark)!important}`;
|
|
13571
13572
|
|
|
13572
|
-
var css_248z$
|
|
13573
|
+
var css_248z$_ = css`.border-primary{border-color:var(--sgds-primary)!important}.border-secondary{border-color:var(--sgds-secondary)!important}.border-success{border-color:var(--sgds-success)!important}.border-info{border-color:var(--sgds-info)!important}.border-warning{border-color:var(--sgds-warning)!important}.border-danger{border-color:var(--sgds-danger)!important}.border-light{border-color:var(--sgds-light)!important}.border-dark{border-color:var(--sgds-dark)!important}`;
|
|
13573
13574
|
|
|
13574
|
-
var css_248z$
|
|
13575
|
+
var css_248z$Z = css`.h1,.h2,.h3,.h4,.h5,.h6 ::slotted(h6),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),h1,h2,h3,h4,h5,h6{color:var(--sgds-heading-color);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,::slotted(h1),h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,::slotted(h1),h1{font-size:2.5rem}}.h2,::slotted(h2),h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,::slotted(h2),h2{font-size:2rem}}.h3,::slotted(h3),h3{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h3,::slotted(h3),h3{font-size:1.5rem}}.h4,::slotted(h4),h4{font-size:1.125rem}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{font-size:1rem}.h1,::slotted(h1),h1{line-height:1.2}.h2,::slotted(h2),h2{line-height:1.25}.h3,::slotted(h3),h3{line-height:1.33}.h4,::slotted(h4),h4{line-height:1.78}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{line-height:1.2}`;
|
|
13575
13576
|
|
|
13576
|
-
var css_248z$
|
|
13577
|
+
var css_248z$Y = css`p{margin-bottom:1.5rem;margin-top:0}`;
|
|
13577
13578
|
|
|
13578
13579
|
class CardElement extends SgdsElement {
|
|
13579
13580
|
constructor() {
|
|
13580
13581
|
super(...arguments);
|
|
13582
|
+
/** Extends the link passed in slot[name="link"] to the entire card */
|
|
13583
|
+
this.stretchedLink = false;
|
|
13584
|
+
/** Disables the card */
|
|
13585
|
+
this.disabled = false;
|
|
13581
13586
|
/** When true, hides the default border of the card. */
|
|
13582
13587
|
this.hideBorder = false;
|
|
13583
13588
|
/** When true, applies a tinted background color to the card. */
|
|
13584
13589
|
this.tinted = false;
|
|
13590
|
+
/** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
|
|
13591
|
+
this.orientation = "vertical";
|
|
13592
|
+
}
|
|
13593
|
+
handleTitleSlotChange(e) {
|
|
13594
|
+
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13595
|
+
if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
|
|
13596
|
+
const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
|
|
13597
|
+
hyperlink.removeAttribute("href");
|
|
13598
|
+
}
|
|
13599
|
+
return;
|
|
13600
|
+
}
|
|
13601
|
+
handleLinkSlotChange(e) {
|
|
13602
|
+
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13603
|
+
if (childNodes.length > 1) {
|
|
13604
|
+
return console.error("Multiple elements passed into SgdsCard's link slot");
|
|
13605
|
+
}
|
|
13606
|
+
if (!this.stretchedLink)
|
|
13607
|
+
return;
|
|
13608
|
+
if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
|
|
13609
|
+
const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
|
|
13610
|
+
this.card.setAttribute("href", hyperlink.href);
|
|
13611
|
+
const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
|
|
13612
|
+
linkSlot.style.display = "none";
|
|
13613
|
+
}
|
|
13585
13614
|
}
|
|
13586
13615
|
}
|
|
13587
|
-
CardElement.styles = [...SgdsElement.styles, css_248z$
|
|
13616
|
+
CardElement.styles = [...SgdsElement.styles, css_248z$10, css_248z$$, css_248z$_, css_248z$Z, css_248z$Y, css_248z$11];
|
|
13617
|
+
__decorate([
|
|
13618
|
+
query("a.card")
|
|
13619
|
+
], CardElement.prototype, "card", void 0);
|
|
13620
|
+
__decorate([
|
|
13621
|
+
property({ type: Boolean, reflect: true })
|
|
13622
|
+
], CardElement.prototype, "stretchedLink", void 0);
|
|
13623
|
+
__decorate([
|
|
13624
|
+
property({ type: Boolean, reflect: true })
|
|
13625
|
+
], CardElement.prototype, "disabled", void 0);
|
|
13588
13626
|
__decorate([
|
|
13589
13627
|
property({ type: Boolean, reflect: true })
|
|
13590
13628
|
], CardElement.prototype, "hideBorder", void 0);
|
|
13591
13629
|
__decorate([
|
|
13592
13630
|
property({ type: Boolean, reflect: true })
|
|
13593
13631
|
], CardElement.prototype, "tinted", void 0);
|
|
13632
|
+
__decorate([
|
|
13633
|
+
property({ type: String, reflect: true })
|
|
13634
|
+
], CardElement.prototype, "orientation", void 0);
|
|
13594
13635
|
|
|
13595
|
-
var css_248z$
|
|
13636
|
+
var css_248z$X = css`:host([tinted]) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}slot[name=menu]::slotted(*){position:absolute;right:20px;top:20px;z-index:10}`;
|
|
13596
13637
|
|
|
13597
13638
|
/**
|
|
13598
13639
|
* @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
13640
|
+
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
13641
|
+
* @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
|
|
13599
13642
|
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
13600
13643
|
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
13601
13644
|
* @slot subtitle - The subtitle of the card
|
|
13602
13645
|
* @slot title - The title of the card
|
|
13603
13646
|
* @slot description - The paragrapher text of the card
|
|
13647
|
+
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
13604
13648
|
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
13605
13649
|
*/
|
|
13606
13650
|
class SgdsCard extends CardElement {
|
|
13607
13651
|
constructor() {
|
|
13608
13652
|
super(...arguments);
|
|
13609
|
-
/** Extends the link passed in slot[name="link"] to the entire card */
|
|
13610
|
-
this.stretchedLink = false;
|
|
13611
|
-
/** Disables the card */
|
|
13612
|
-
this.disabled = false;
|
|
13613
|
-
/** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
|
|
13614
|
-
this.orientation = "vertical";
|
|
13615
13653
|
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
13616
13654
|
this.imagePosition = "before";
|
|
13617
13655
|
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
@@ -13623,35 +13661,8 @@
|
|
|
13623
13661
|
icon.style.display = "none";
|
|
13624
13662
|
}
|
|
13625
13663
|
if (this._iconNode.length === 0) {
|
|
13626
|
-
const
|
|
13627
|
-
|
|
13628
|
-
}
|
|
13629
|
-
if (this.disabled && this._linkNode.length > 0) {
|
|
13630
|
-
const hyperlink = this._linkNode[0].querySelector("a");
|
|
13631
|
-
hyperlink.setAttribute("disabled", "true");
|
|
13632
|
-
hyperlink.removeAttribute("href");
|
|
13633
|
-
}
|
|
13634
|
-
}
|
|
13635
|
-
handleTitleSlotChange(e) {
|
|
13636
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13637
|
-
if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
|
|
13638
|
-
const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
|
|
13639
|
-
hyperlink.removeAttribute("href");
|
|
13640
|
-
}
|
|
13641
|
-
return;
|
|
13642
|
-
}
|
|
13643
|
-
handleLinkSlotChange(e) {
|
|
13644
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13645
|
-
if (childNodes.length > 1) {
|
|
13646
|
-
return console.error("Multiple elements passed into SgdsCard's link slot");
|
|
13647
|
-
}
|
|
13648
|
-
if (!this.stretchedLink)
|
|
13649
|
-
return;
|
|
13650
|
-
if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
|
|
13651
|
-
const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
|
|
13652
|
-
this.card.setAttribute("href", hyperlink.href);
|
|
13653
|
-
const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
|
|
13654
|
-
linkSlot.style.display = "none";
|
|
13664
|
+
const media = this.shadowRoot.querySelector(".card-media");
|
|
13665
|
+
media.style.display = "none";
|
|
13655
13666
|
}
|
|
13656
13667
|
}
|
|
13657
13668
|
handleImgSlotChange(e) {
|
|
@@ -13670,48 +13681,39 @@
|
|
|
13670
13681
|
})}"
|
|
13671
13682
|
tabindex=${cardTabIndex}
|
|
13672
13683
|
>
|
|
13684
|
+
<div class="card-tinted-bg"></div>
|
|
13685
|
+
<slot name="menu"></slot>
|
|
13673
13686
|
<div class="card-image">
|
|
13674
13687
|
<slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
|
|
13675
13688
|
</div>
|
|
13676
|
-
<div class="card-
|
|
13689
|
+
<div class="card-media">
|
|
13677
13690
|
<slot name="icon"></slot>
|
|
13678
13691
|
</div>
|
|
13679
13692
|
<div class="card-body">
|
|
13680
|
-
<div class="card-header">
|
|
13681
|
-
<
|
|
13682
|
-
|
|
13693
|
+
<div class="card-header-container">
|
|
13694
|
+
<div class="card-header">
|
|
13695
|
+
<slot name="subtitle"></slot>
|
|
13696
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
13697
|
+
</div>
|
|
13698
|
+
<slot></slot>
|
|
13683
13699
|
</div>
|
|
13684
13700
|
<p class="card-text">
|
|
13685
13701
|
<slot name="description"></slot>
|
|
13686
13702
|
</p>
|
|
13703
|
+
<slot name="lower"></slot>
|
|
13687
13704
|
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
13688
13705
|
</div>
|
|
13689
13706
|
</${tag}>
|
|
13690
13707
|
`;
|
|
13691
13708
|
}
|
|
13692
13709
|
}
|
|
13693
|
-
SgdsCard.styles = [...CardElement.styles, css_248z$
|
|
13694
|
-
__decorate([
|
|
13695
|
-
query("a.card")
|
|
13696
|
-
], SgdsCard.prototype, "card", void 0);
|
|
13710
|
+
SgdsCard.styles = [...CardElement.styles, css_248z$X];
|
|
13697
13711
|
__decorate([
|
|
13698
13712
|
queryAssignedNodes({ slot: "image", flatten: true })
|
|
13699
13713
|
], SgdsCard.prototype, "_imageNode", void 0);
|
|
13700
13714
|
__decorate([
|
|
13701
13715
|
queryAssignedNodes({ slot: "icon", flatten: true })
|
|
13702
13716
|
], SgdsCard.prototype, "_iconNode", void 0);
|
|
13703
|
-
__decorate([
|
|
13704
|
-
queryAssignedNodes({ slot: "link", flatten: true })
|
|
13705
|
-
], SgdsCard.prototype, "_linkNode", void 0);
|
|
13706
|
-
__decorate([
|
|
13707
|
-
property({ type: Boolean, reflect: true })
|
|
13708
|
-
], SgdsCard.prototype, "stretchedLink", void 0);
|
|
13709
|
-
__decorate([
|
|
13710
|
-
property({ type: Boolean, reflect: true })
|
|
13711
|
-
], SgdsCard.prototype, "disabled", void 0);
|
|
13712
|
-
__decorate([
|
|
13713
|
-
property({ type: String, reflect: true })
|
|
13714
|
-
], SgdsCard.prototype, "orientation", void 0);
|
|
13715
13717
|
__decorate([
|
|
13716
13718
|
property({ type: String, reflect: true })
|
|
13717
13719
|
], SgdsCard.prototype, "imagePosition", void 0);
|
|
@@ -13795,9 +13797,9 @@
|
|
|
13795
13797
|
*/
|
|
13796
13798
|
const live = directive(LiveDirective);
|
|
13797
13799
|
|
|
13798
|
-
var css_248z$
|
|
13800
|
+
var css_248z$W = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-min)}.invalid-feedback{font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`;
|
|
13799
13801
|
|
|
13800
|
-
var css_248z$
|
|
13802
|
+
var css_248z$V = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-min)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
|
|
13801
13803
|
|
|
13802
13804
|
// @defaultValue decorator
|
|
13803
13805
|
const defaultValue = (propertyName = "value") => (proto, key) => {
|
|
@@ -14051,6 +14053,19 @@
|
|
|
14051
14053
|
return ToBeValidatedElement;
|
|
14052
14054
|
};
|
|
14053
14055
|
|
|
14056
|
+
const referenceTargetWidth = {
|
|
14057
|
+
name: "sameWidthAsTarget",
|
|
14058
|
+
enabled: true,
|
|
14059
|
+
phase: "beforeWrite",
|
|
14060
|
+
requires: ["computeStyles"],
|
|
14061
|
+
fn: ({ state }) => {
|
|
14062
|
+
state.styles.popper.width = `${state.rects.reference.width}px`;
|
|
14063
|
+
},
|
|
14064
|
+
effect: ({ state }) => {
|
|
14065
|
+
state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
|
|
14066
|
+
}
|
|
14067
|
+
};
|
|
14068
|
+
|
|
14054
14069
|
class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
|
|
14055
14070
|
constructor() {
|
|
14056
14071
|
super();
|
|
@@ -14102,7 +14117,8 @@
|
|
|
14102
14117
|
options: {
|
|
14103
14118
|
offset: [0, 8]
|
|
14104
14119
|
}
|
|
14105
|
-
}
|
|
14120
|
+
},
|
|
14121
|
+
referenceTargetWidth
|
|
14106
14122
|
];
|
|
14107
14123
|
}
|
|
14108
14124
|
connectedCallback() {
|
|
@@ -14182,7 +14198,7 @@
|
|
|
14182
14198
|
}
|
|
14183
14199
|
}
|
|
14184
14200
|
}
|
|
14185
|
-
SelectElement.styles = [...DropdownListElement.styles, css_248z$
|
|
14201
|
+
SelectElement.styles = [...DropdownListElement.styles, css_248z$19, css_248z$V, css_248z$W];
|
|
14186
14202
|
__decorate([
|
|
14187
14203
|
property({ reflect: true })
|
|
14188
14204
|
], SelectElement.prototype, "label", void 0);
|
|
@@ -14238,9 +14254,9 @@
|
|
|
14238
14254
|
queryAsync("input.form-control")
|
|
14239
14255
|
], SelectElement.prototype, "_input", void 0);
|
|
14240
14256
|
|
|
14241
|
-
var css_248z$
|
|
14257
|
+
var css_248z$U = css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
|
|
14242
14258
|
|
|
14243
|
-
var css_248z$
|
|
14259
|
+
var css_248z$T = css`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-body)}`;
|
|
14244
14260
|
|
|
14245
14261
|
class FormControlElement extends SgdsElement {
|
|
14246
14262
|
constructor() {
|
|
@@ -14267,7 +14283,7 @@
|
|
|
14267
14283
|
}
|
|
14268
14284
|
}
|
|
14269
14285
|
}
|
|
14270
|
-
FormControlElement.styles = [...SgdsElement.styles, css_248z$
|
|
14286
|
+
FormControlElement.styles = [...SgdsElement.styles, css_248z$W, css_248z$V, css_248z$U, css_248z$T];
|
|
14271
14287
|
__decorate([
|
|
14272
14288
|
property({ reflect: true })
|
|
14273
14289
|
], FormControlElement.prototype, "label", void 0);
|
|
@@ -14284,7 +14300,7 @@
|
|
|
14284
14300
|
property({ type: Boolean, reflect: true })
|
|
14285
14301
|
], FormControlElement.prototype, "invalid", void 0);
|
|
14286
14302
|
|
|
14287
|
-
var css_248z$
|
|
14303
|
+
var css_248z$S = css`:host{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
|
|
14288
14304
|
|
|
14289
14305
|
/**
|
|
14290
14306
|
* @summary Checkbox component is used when you require users to select multiple items from a list.
|
|
@@ -14448,7 +14464,7 @@
|
|
|
14448
14464
|
`;
|
|
14449
14465
|
}
|
|
14450
14466
|
}
|
|
14451
|
-
SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$
|
|
14467
|
+
SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$S];
|
|
14452
14468
|
__decorate([
|
|
14453
14469
|
property({ type: String, reflect: true })
|
|
14454
14470
|
], SgdsCheckbox.prototype, "value", void 0);
|
|
@@ -14480,7 +14496,7 @@
|
|
|
14480
14496
|
watch("_isTouched", { waitUntilFirstUpdate: true })
|
|
14481
14497
|
], SgdsCheckbox.prototype, "_handleIsTouched", null);
|
|
14482
14498
|
|
|
14483
|
-
var css_248z$
|
|
14499
|
+
var css_248z$R = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
|
|
14484
14500
|
|
|
14485
14501
|
class ComboBoxItem extends SgdsElement {
|
|
14486
14502
|
constructor() {
|
|
@@ -14548,7 +14564,7 @@
|
|
|
14548
14564
|
"sgds-icon": SgdsIcon,
|
|
14549
14565
|
"sgds-checkbox": SgdsCheckbox
|
|
14550
14566
|
};
|
|
14551
|
-
ComboBoxItem.styles = [css_248z$
|
|
14567
|
+
ComboBoxItem.styles = [css_248z$R];
|
|
14552
14568
|
__decorate([
|
|
14553
14569
|
property({ type: Boolean, reflect: true })
|
|
14554
14570
|
], ComboBoxItem.prototype, "active", void 0);
|
|
@@ -14559,7 +14575,7 @@
|
|
|
14559
14575
|
property({ type: Boolean, reflect: true })
|
|
14560
14576
|
], ComboBoxItem.prototype, "checkbox", void 0);
|
|
14561
14577
|
|
|
14562
|
-
var css_248z$
|
|
14578
|
+
var css_248z$Q = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.dropdown{display:flex;height:100%}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
|
|
14563
14579
|
|
|
14564
14580
|
/**
|
|
14565
14581
|
* @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions
|
|
@@ -14834,7 +14850,7 @@
|
|
|
14834
14850
|
`;
|
|
14835
14851
|
}
|
|
14836
14852
|
}
|
|
14837
|
-
SgdsComboBox.styles = [...SelectElement.styles, css_248z$
|
|
14853
|
+
SgdsComboBox.styles = [...SelectElement.styles, css_248z$Q];
|
|
14838
14854
|
/** @internal */
|
|
14839
14855
|
SgdsComboBox.dependencies = {
|
|
14840
14856
|
"sgds-combo-box-item": ComboBoxItem,
|
|
@@ -14859,7 +14875,7 @@
|
|
|
14859
14875
|
|
|
14860
14876
|
register("sgds-combo-box", SgdsComboBox);
|
|
14861
14877
|
|
|
14862
|
-
var css_248z$
|
|
14878
|
+
var css_248z$P = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.checkbox-group-validation-input{display:none}`;
|
|
14863
14879
|
|
|
14864
14880
|
/**
|
|
14865
14881
|
* @summary CheckboxGroup is a form component for multiselection of checkboxes.
|
|
@@ -15057,7 +15073,7 @@
|
|
|
15057
15073
|
`;
|
|
15058
15074
|
}
|
|
15059
15075
|
}
|
|
15060
|
-
SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z$
|
|
15076
|
+
SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z$P];
|
|
15061
15077
|
__decorate([
|
|
15062
15078
|
property({ reflect: true })
|
|
15063
15079
|
], SgdsCheckboxGroup.prototype, "label", void 0);
|
|
@@ -20795,7 +20811,7 @@
|
|
|
20795
20811
|
return newDate;
|
|
20796
20812
|
};
|
|
20797
20813
|
|
|
20798
|
-
var css_248z$
|
|
20814
|
+
var css_248z$O = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus,button.year:focus,td[data-day]:focus{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
|
|
20799
20815
|
|
|
20800
20816
|
const TODAY_DATE = new Date();
|
|
20801
20817
|
const keyPressAction = {
|
|
@@ -21191,7 +21207,7 @@
|
|
|
21191
21207
|
return html$1 ` <div class="datepicker-body">${viewContent}</div> `;
|
|
21192
21208
|
}
|
|
21193
21209
|
}
|
|
21194
|
-
DatepickerCalendar.styles = [css_248z$
|
|
21210
|
+
DatepickerCalendar.styles = [css_248z$O];
|
|
21195
21211
|
/** @internal */
|
|
21196
21212
|
DatepickerCalendar.DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
21197
21213
|
/** @internal */
|
|
@@ -21239,7 +21255,7 @@
|
|
|
21239
21255
|
watch("displayDate")
|
|
21240
21256
|
], DatepickerCalendar.prototype, "_updateFocusedDate", null);
|
|
21241
21257
|
|
|
21242
|
-
var css_248z$
|
|
21258
|
+
var css_248z$N = css`:host{display:inline-block}.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}`;
|
|
21243
21259
|
|
|
21244
21260
|
/**
|
|
21245
21261
|
* @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.
|
|
@@ -21286,7 +21302,7 @@
|
|
|
21286
21302
|
`;
|
|
21287
21303
|
}
|
|
21288
21304
|
}
|
|
21289
|
-
SgdsIconButton.styles = [...ButtonElement.styles, css_248z$
|
|
21305
|
+
SgdsIconButton.styles = [...ButtonElement.styles, css_248z$N];
|
|
21290
21306
|
/** @internal */
|
|
21291
21307
|
SgdsIconButton.dependencies = {
|
|
21292
21308
|
"sgds-icon": SgdsIcon
|
|
@@ -21295,7 +21311,7 @@
|
|
|
21295
21311
|
property({ type: String, reflect: true })
|
|
21296
21312
|
], SgdsIconButton.prototype, "name", void 0);
|
|
21297
21313
|
|
|
21298
|
-
var css_248z$
|
|
21314
|
+
var css_248z$M = css`.datepicker-header{display:flex;gap:var(--sgds-form-gap-md)}sgds-button{--btn-font-weight:var(--sgds-font-weight-semibold)}`;
|
|
21299
21315
|
|
|
21300
21316
|
class DatepickerHeader extends SgdsElement {
|
|
21301
21317
|
constructor() {
|
|
@@ -21471,7 +21487,7 @@
|
|
|
21471
21487
|
`;
|
|
21472
21488
|
}
|
|
21473
21489
|
}
|
|
21474
|
-
DatepickerHeader.styles = [css_248z$
|
|
21490
|
+
DatepickerHeader.styles = [css_248z$M];
|
|
21475
21491
|
/** @internal */
|
|
21476
21492
|
DatepickerHeader.dependencies = {
|
|
21477
21493
|
"sgds-icon": SgdsIcon,
|
|
@@ -25112,7 +25128,7 @@
|
|
|
25112
25128
|
globalThis.IMask = IMask;
|
|
25113
25129
|
} catch {}
|
|
25114
25130
|
|
|
25115
|
-
var css_248z$
|
|
25131
|
+
var css_248z$L = css`:host{--sgds-spinner-bg:var(--sgds-primary-surface-default);display:inline-flex}:host([variant=neutral]){--sgds-spinner-bg:var(--sgds-neutral-surface-default)}.spinner-wrapper{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.spinner{animation:spinner .75s linear infinite;border-radius:50%;border-right:.25em solid var(--sgds-bg-translucent);border:.25em solid var(--sgds-bg-translucent);border-right-color:var(--sgds-spinner-bg);color:var(--sgds-spinner-color);display:inline-flex;height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.spinner-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.spinner-lg{height:var(--sgds-dimension-48);width:var(--sgds-dimension-48)}.spinner-label{color:var(--sgds-neutral-color-default);font-size:var(--sgds-font-size-1)}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.5s}}
|
|
25116
25132
|
|
|
25117
25133
|
/*! CSS Used keyframes */@keyframes spinner{to{transform:rotate(1turn)}}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
25118
25134
|
|
|
@@ -25144,7 +25160,7 @@
|
|
|
25144
25160
|
`;
|
|
25145
25161
|
}
|
|
25146
25162
|
}
|
|
25147
|
-
SgdsSpinner.styles = [...SgdsElement.styles, css_248z$
|
|
25163
|
+
SgdsSpinner.styles = [...SgdsElement.styles, css_248z$10, css_248z$L];
|
|
25148
25164
|
__decorate([
|
|
25149
25165
|
property({ type: String, reflect: true })
|
|
25150
25166
|
], SgdsSpinner.prototype, "variant", void 0);
|
|
@@ -25155,7 +25171,7 @@
|
|
|
25155
25171
|
property({ reflect: true, type: String })
|
|
25156
25172
|
], SgdsSpinner.prototype, "label", void 0);
|
|
25157
25173
|
|
|
25158
|
-
var css_248z$
|
|
25174
|
+
var css_248z$K = css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:none}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
|
|
25159
25175
|
|
|
25160
25176
|
/**
|
|
25161
25177
|
* @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
|
|
@@ -25380,7 +25396,7 @@
|
|
|
25380
25396
|
`;
|
|
25381
25397
|
}
|
|
25382
25398
|
}
|
|
25383
|
-
SgdsInput.styles = [...FormControlElement.styles, css_248z$
|
|
25399
|
+
SgdsInput.styles = [...FormControlElement.styles, css_248z$T, css_248z$K];
|
|
25384
25400
|
/** @internal */
|
|
25385
25401
|
SgdsInput.dependencies = {
|
|
25386
25402
|
"sgds-spinner": SgdsSpinner,
|
|
@@ -25456,7 +25472,7 @@
|
|
|
25456
25472
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
25457
25473
|
], SgdsInput.prototype, "_handleDisabledChange", null);
|
|
25458
25474
|
|
|
25459
|
-
var css_248z$
|
|
25475
|
+
var css_248z$J = css`.input-container{display:flex;flex-direction:row;width:-webkit-fill-available;width:-moz-available}.form-control-group{border-right:0}.input-feedback{display:flex;flex-direction:column;width:-webkit-fill-available;width:-moz-available}.calendar-btn{all:unset}`;
|
|
25460
25476
|
|
|
25461
25477
|
class DatepickerInput extends SgdsInput {
|
|
25462
25478
|
constructor() {
|
|
@@ -25583,7 +25599,7 @@
|
|
|
25583
25599
|
`;
|
|
25584
25600
|
}
|
|
25585
25601
|
}
|
|
25586
|
-
DatepickerInput.styles = [...SgdsInput.styles, css_248z$
|
|
25602
|
+
DatepickerInput.styles = [...SgdsInput.styles, css_248z$J];
|
|
25587
25603
|
__decorate([
|
|
25588
25604
|
property({ type: String })
|
|
25589
25605
|
], DatepickerInput.prototype, "minDate", void 0);
|
|
@@ -25597,7 +25613,7 @@
|
|
|
25597
25613
|
queryAsync("input")
|
|
25598
25614
|
], DatepickerInput.prototype, "shadowInput", void 0);
|
|
25599
25615
|
|
|
25600
|
-
var css_248z$
|
|
25616
|
+
var css_248z$I = css`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-1)}.dropdown{display:flex;height:100%}.datepicker.dropdown-menu.show{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.datepicker-container{display:flex}.calendar-btn:not(.with-hint-text){align-self:center}.calendar-btn:not(.with-hint-text).with-label{align-self:end}.calendar-btn.with-hint-text.with-label,.calendar-btn:not(.with-hint-text).with-label{margin-top:calc(var(--sgds-font-size-2)*var(--sgds-line-height-body) - var(--sgds-line-height-min))}.calendar-btn.with-hint-text.with-label{align-self:center}`;
|
|
25601
25617
|
|
|
25602
25618
|
/**
|
|
25603
25619
|
* @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input
|
|
@@ -25610,7 +25626,7 @@
|
|
|
25610
25626
|
*/
|
|
25611
25627
|
class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) {
|
|
25612
25628
|
constructor() {
|
|
25613
|
-
super(
|
|
25629
|
+
super();
|
|
25614
25630
|
/** When true, adds required attribute to input element */
|
|
25615
25631
|
this.required = false;
|
|
25616
25632
|
/** When true, adds disabled attribute to input and button element */
|
|
@@ -25621,10 +25637,10 @@
|
|
|
25621
25637
|
*/
|
|
25622
25638
|
this.value = "";
|
|
25623
25639
|
/**
|
|
25624
|
-
*
|
|
25640
|
+
* Deprecated since v3.3.0 in favour of `value`.
|
|
25625
25641
|
* The initial value of DatePicker on first load for single &
|
|
25626
25642
|
* range mode as array of string. eg.'["22/12/2023"]' for single &
|
|
25627
|
-
* '["22/12/2023","25/12/2023"]' for range respectively
|
|
25643
|
+
* '["22/12/2023","25/12/2023"]' for range respectively @deprecated
|
|
25628
25644
|
* */
|
|
25629
25645
|
this.initialValue = [];
|
|
25630
25646
|
this.dateFormat = "DD/MM/YYYY";
|
|
@@ -25680,6 +25696,18 @@
|
|
|
25680
25696
|
months: "Choose month",
|
|
25681
25697
|
years: "Choose year"
|
|
25682
25698
|
};
|
|
25699
|
+
this.modifierOpt = [
|
|
25700
|
+
{
|
|
25701
|
+
name: "offset",
|
|
25702
|
+
options: {
|
|
25703
|
+
/**
|
|
25704
|
+
* size of calendar `--sgds-dimension-320` offset with
|
|
25705
|
+
* size of icon button `--sgds-dimension-48`
|
|
25706
|
+
*/
|
|
25707
|
+
offset: [-320 + 48, 8]
|
|
25708
|
+
}
|
|
25709
|
+
}
|
|
25710
|
+
];
|
|
25683
25711
|
}
|
|
25684
25712
|
isValueEmpty() {
|
|
25685
25713
|
return this.value === "" || this.value === "DD/MM/YYYY" || this.value === "DD/MM/YYYY - DD/MM/YYYY";
|
|
@@ -25711,14 +25739,6 @@
|
|
|
25711
25739
|
}
|
|
25712
25740
|
async connectedCallback() {
|
|
25713
25741
|
super.connectedCallback();
|
|
25714
|
-
this.modifierOpt = [
|
|
25715
|
-
{
|
|
25716
|
-
name: "offset",
|
|
25717
|
-
options: {
|
|
25718
|
-
offset: [0, 8]
|
|
25719
|
-
}
|
|
25720
|
-
}
|
|
25721
|
-
];
|
|
25722
25742
|
this.addEventListener("sgds-view", this._handleViewChanged);
|
|
25723
25743
|
this.addEventListener("sgds-change-calendar", this._handleDateChanged);
|
|
25724
25744
|
this.addEventListener("sgds-update-focus", this._handleFocusDateChanged);
|
|
@@ -25983,7 +26003,7 @@
|
|
|
25983
26003
|
`;
|
|
25984
26004
|
}
|
|
25985
26005
|
}
|
|
25986
|
-
SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$
|
|
26006
|
+
SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$19, css_248z$I];
|
|
25987
26007
|
/**@internal */
|
|
25988
26008
|
SgdsDatepicker.dependencies = {
|
|
25989
26009
|
"sgds-datepicker-input": DatepickerInput,
|
|
@@ -26070,7 +26090,7 @@
|
|
|
26070
26090
|
|
|
26071
26091
|
register("sgds-datepicker", SgdsDatepicker);
|
|
26072
26092
|
|
|
26073
|
-
var css_248z$
|
|
26093
|
+
var css_248z$H = css`:host([bordered]) .container{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md)}.container{display:flex;flex-direction:column}.title{color:var(--sgds-header-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading)}.description{color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body)}.header{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:column;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}`;
|
|
26074
26094
|
|
|
26075
26095
|
/**
|
|
26076
26096
|
* @summary Description List Group organizes multiple description lists.
|
|
@@ -26156,7 +26176,7 @@
|
|
|
26156
26176
|
`;
|
|
26157
26177
|
}
|
|
26158
26178
|
}
|
|
26159
|
-
SgdsDescriptionListGroup.styles = [...SgdsElement.styles, css_248z$
|
|
26179
|
+
SgdsDescriptionListGroup.styles = [...SgdsElement.styles, css_248z$H];
|
|
26160
26180
|
__decorate([
|
|
26161
26181
|
property({ type: Boolean, reflect: true })
|
|
26162
26182
|
], SgdsDescriptionListGroup.prototype, "bordered", void 0);
|
|
@@ -26167,7 +26187,7 @@
|
|
|
26167
26187
|
queryAssignedElements({ flatten: true })
|
|
26168
26188
|
], SgdsDescriptionListGroup.prototype, "_descriptionLists", void 0);
|
|
26169
26189
|
|
|
26170
|
-
var css_248z$
|
|
26190
|
+
var css_248z$G = css`:host([bordered][islastchild]) .container:last-child{border-bottom:none}:host([stacked]) .container{align-items:flex-start;flex-direction:column;gap:var(--sgds-gap-xs);justify-content:flex-start}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;gap:var(--sgds-gap-xs);justify-content:space-between;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-2)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}`;
|
|
26171
26191
|
|
|
26172
26192
|
let id$2 = 0;
|
|
26173
26193
|
/**
|
|
@@ -26210,7 +26230,7 @@
|
|
|
26210
26230
|
`;
|
|
26211
26231
|
}
|
|
26212
26232
|
}
|
|
26213
|
-
SgdsDescriptionList.styles = [...SgdsElement.styles, css_248z$
|
|
26233
|
+
SgdsDescriptionList.styles = [...SgdsElement.styles, css_248z$G];
|
|
26214
26234
|
__decorate([
|
|
26215
26235
|
property({ type: Boolean, reflect: true })
|
|
26216
26236
|
], SgdsDescriptionList.prototype, "stacked", void 0);
|
|
@@ -26221,7 +26241,7 @@
|
|
|
26221
26241
|
register("sgds-description-list", SgdsDescriptionList);
|
|
26222
26242
|
register("sgds-description-list-group", SgdsDescriptionListGroup);
|
|
26223
26243
|
|
|
26224
|
-
var css_248z$
|
|
26244
|
+
var css_248z$F = css`:host{--container-size:8px}:host([orientation=horizontal]){border-top:var(--border-width) solid var(--sgds-border-color-muted);display:block;margin:calc((var(--container-size) - var(--border-width))/2) 0;width:100%}:host([orientation=vertical]){border-left:var(--border-width) solid var(--sgds-border-color-muted);display:inline-block;height:100%;margin:0 calc((var(--container-size) - var(--border-width))/2)}:host([thickness=thin]){--border-width:var(--sgds-border-width-1)}:host([thickness=thick]){--border-width:var(--sgds-border-width-2)}:host([thickness=thicker]){--border-width:var(--sgds-border-width-4)}`;
|
|
26225
26245
|
|
|
26226
26246
|
/**
|
|
26227
26247
|
* @summary A divider is a thin line that groups content in lists and layouts. They bring clarity to a layout by grouping and dividing content in close proximity.
|
|
@@ -26240,7 +26260,7 @@
|
|
|
26240
26260
|
this.setAttribute("aria-orientation", this.orientation);
|
|
26241
26261
|
}
|
|
26242
26262
|
}
|
|
26243
|
-
SgdsDivider.styles = [css_248z$
|
|
26263
|
+
SgdsDivider.styles = [css_248z$F];
|
|
26244
26264
|
__decorate([
|
|
26245
26265
|
property({ type: String, reflect: true })
|
|
26246
26266
|
], SgdsDivider.prototype, "orientation", void 0);
|
|
@@ -26269,7 +26289,7 @@
|
|
|
26269
26289
|
}
|
|
26270
26290
|
}
|
|
26271
26291
|
|
|
26272
|
-
var css_248z$
|
|
26292
|
+
var css_248z$E = css`:host{display:contents}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);max-height:100%;max-width:100%;overflow:auto;padding:var(--sgds-padding-4-xl) var(--sgds-padding-3-xl);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:var(--sgds-dimension-512);inset-inline-end:auto;inset-inline-start:0;top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;top:0;width:var(--sgds-dimension-512)}.drawer-bottom .drawer-panel{bottom:0;height:var(--sgds-dimension-512);inset-inline-end:auto;inset-inline-start:0;top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;top:0;width:var(--sgds-dimension-512)}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-6,var(--sgds-font-size-4));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,var(--sgds-margin-none))}sgds-close-button{position:absolute;right:32px;top:32px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}@media screen and (max-width:768px){.drawer-panel{padding:var(--sgds-padding-3-xl) var(--sgds-padding-lg)}sgds-close-button{right:20px;top:20px}}`;
|
|
26273
26293
|
|
|
26274
26294
|
/**
|
|
26275
26295
|
* @summary Drawers slide in from a container to expose additional options and information.
|
|
@@ -26488,7 +26508,7 @@
|
|
|
26488
26508
|
`;
|
|
26489
26509
|
}
|
|
26490
26510
|
}
|
|
26491
|
-
SgdsDrawer.styles = [...SgdsElement.styles, css_248z$
|
|
26511
|
+
SgdsDrawer.styles = [...SgdsElement.styles, css_248z$E];
|
|
26492
26512
|
/**@internal */
|
|
26493
26513
|
SgdsDrawer.dependencies = {
|
|
26494
26514
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -26613,7 +26633,7 @@
|
|
|
26613
26633
|
register("sgds-dropdown", SgdsDropdown);
|
|
26614
26634
|
register("sgds-dropdown-item", SgdsDropdownItem);
|
|
26615
26635
|
|
|
26616
|
-
var css_248z$
|
|
26636
|
+
var css_248z$D = css`.file-upload{display:flex;flex-direction:column;gap:var(--sgds-form-gap-2-xl)}.file-upload-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.file-upload-list{display:flex;flex-direction:column;gap:var(--sgds-form-gap-xl);list-style-type:none}.file-upload-list-item{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-lg);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.file-upload-list-item span:not(:first-of-type){cursor:pointer}ul{margin:0;padding:0}input{display:none}label,sgds-button{cursor:pointer}sgds-close-button{margin-left:auto}sgds-icon.valid{color:var(--sgds-form-success-color-default)}sgds-icon.invalid{color:var(--sgds-color-muted)}`;
|
|
26617
26637
|
|
|
26618
26638
|
/**
|
|
26619
26639
|
* @summary Allows users to upload files of various sizes and formats
|
|
@@ -26786,7 +26806,7 @@
|
|
|
26786
26806
|
`;
|
|
26787
26807
|
}
|
|
26788
26808
|
}
|
|
26789
|
-
SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$
|
|
26809
|
+
SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$D];
|
|
26790
26810
|
/**@internal */
|
|
26791
26811
|
SgdsFileUpload.dependencies = {
|
|
26792
26812
|
"sgds-button": SgdsButton,
|
|
@@ -26817,7 +26837,7 @@
|
|
|
26817
26837
|
|
|
26818
26838
|
register("sgds-file-upload", SgdsFileUpload);
|
|
26819
26839
|
|
|
26820
|
-
var css_248z$
|
|
26840
|
+
var css_248z$C = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
|
|
26821
26841
|
|
|
26822
26842
|
/**
|
|
26823
26843
|
* @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
|
|
@@ -26920,7 +26940,7 @@
|
|
|
26920
26940
|
`;
|
|
26921
26941
|
}
|
|
26922
26942
|
}
|
|
26923
|
-
SgdsFooter.styles = [...SgdsElement.styles, css_248z$
|
|
26943
|
+
SgdsFooter.styles = [...SgdsElement.styles, css_248z$C];
|
|
26924
26944
|
__decorate([
|
|
26925
26945
|
property({ type: String })
|
|
26926
26946
|
], SgdsFooter.prototype, "copyrightLiner", void 0);
|
|
@@ -26940,7 +26960,7 @@
|
|
|
26940
26960
|
property({ type: String })
|
|
26941
26961
|
], SgdsFooter.prototype, "termsOfUseHref", void 0);
|
|
26942
26962
|
|
|
26943
|
-
var css_248z$
|
|
26963
|
+
var css_248z$B = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a[target=_blank]){align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
|
|
26944
26964
|
|
|
26945
26965
|
/**
|
|
26946
26966
|
* @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.
|
|
@@ -26961,7 +26981,7 @@
|
|
|
26961
26981
|
`;
|
|
26962
26982
|
}
|
|
26963
26983
|
}
|
|
26964
|
-
SgdsFooterItem.styles = [...SgdsElement.styles, css_248z$
|
|
26984
|
+
SgdsFooterItem.styles = [...SgdsElement.styles, css_248z$B];
|
|
26965
26985
|
|
|
26966
26986
|
register("sgds-footer", SgdsFooter);
|
|
26967
26987
|
register("sgds-footer-item", SgdsFooterItem);
|
|
@@ -26970,7 +26990,7 @@
|
|
|
26970
26990
|
|
|
26971
26991
|
register("sgds-icon-button", SgdsIconButton);
|
|
26972
26992
|
|
|
26973
|
-
var css_248z$
|
|
26993
|
+
var css_248z$A = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:flex-start;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
|
|
26974
26994
|
|
|
26975
26995
|
/**
|
|
26976
26996
|
* @summary A IconList can be used to display content related to the same topic. Each list item begins an icon.
|
|
@@ -26993,7 +27013,7 @@
|
|
|
26993
27013
|
`;
|
|
26994
27014
|
}
|
|
26995
27015
|
}
|
|
26996
|
-
SgdsIconList.styles = [...SgdsElement.styles, css_248z$
|
|
27016
|
+
SgdsIconList.styles = [...SgdsElement.styles, css_248z$A];
|
|
26997
27017
|
__decorate([
|
|
26998
27018
|
property({ type: String, reflect: true })
|
|
26999
27019
|
], SgdsIconList.prototype, "role", void 0);
|
|
@@ -27498,7 +27518,7 @@
|
|
|
27498
27518
|
|
|
27499
27519
|
const MainnavContext = createContext("mainnav-context");
|
|
27500
27520
|
|
|
27501
|
-
var css_248z$
|
|
27521
|
+
var css_248z$z = css`:host{z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);bottom:0;box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:768px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
|
|
27502
27522
|
|
|
27503
27523
|
const SIZES = {
|
|
27504
27524
|
sm: SM_BREAKPOINT,
|
|
@@ -27720,7 +27740,7 @@
|
|
|
27720
27740
|
}
|
|
27721
27741
|
}
|
|
27722
27742
|
}
|
|
27723
|
-
SgdsMainnav.styles = [...SgdsElement.styles, css_248z$
|
|
27743
|
+
SgdsMainnav.styles = [...SgdsElement.styles, css_248z$z];
|
|
27724
27744
|
/** @internal */
|
|
27725
27745
|
SgdsMainnav.dependencies = {
|
|
27726
27746
|
"sgds-icon-button": SgdsIconButton
|
|
@@ -27783,7 +27803,7 @@
|
|
|
27783
27803
|
options: { duration: 200, easing: "ease-in-out" }
|
|
27784
27804
|
});
|
|
27785
27805
|
|
|
27786
|
-
var css_248z$
|
|
27806
|
+
var css_248z$y = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=sm]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=md]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=lg]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=xl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=xxl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}.nav-link{align-items:center;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}@media screen and (max-width:767px){.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus,.nav-link:not(.disabled):focus-visible{outline:0}.nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus,.dropdown-items a:focus-visible{outline:0}.dropdown-items a:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{height:100%}`;
|
|
27787
27807
|
|
|
27788
27808
|
const TAB = "Tab";
|
|
27789
27809
|
const ENTER = "Enter";
|
|
@@ -27827,7 +27847,7 @@
|
|
|
27827
27847
|
return;
|
|
27828
27848
|
}
|
|
27829
27849
|
if (this._breakpointReached) {
|
|
27830
|
-
this.shadowRoot.adoptedStyleSheets = [css_248z$
|
|
27850
|
+
this.shadowRoot.adoptedStyleSheets = [css_248z$19.styleSheet, css_248z$y.styleSheet];
|
|
27831
27851
|
}
|
|
27832
27852
|
}
|
|
27833
27853
|
updated() {
|
|
@@ -27987,7 +28007,7 @@
|
|
|
27987
28007
|
</div>
|
|
27988
28008
|
`;
|
|
27989
28009
|
const desktopView = html$1 `<sgds-dropdown
|
|
27990
|
-
modifierOpt=${[
|
|
28010
|
+
.modifierOpt=${[
|
|
27991
28011
|
{
|
|
27992
28012
|
name: "offset",
|
|
27993
28013
|
options: {
|
|
@@ -28017,7 +28037,7 @@
|
|
|
28017
28037
|
return this._breakpointReached ? mobileView : desktopView;
|
|
28018
28038
|
}
|
|
28019
28039
|
}
|
|
28020
|
-
SgdsMainnavDropdown.styles = [...SgdsElement.styles, css_248z$
|
|
28040
|
+
SgdsMainnavDropdown.styles = [...SgdsElement.styles, css_248z$18, css_248z$19, css_248z$y];
|
|
28021
28041
|
/** @internal */
|
|
28022
28042
|
SgdsMainnavDropdown.dependencies = {
|
|
28023
28043
|
"sgds-dropdown": SgdsDropdown,
|
|
@@ -28053,7 +28073,7 @@
|
|
|
28053
28073
|
queryAssignedElements()
|
|
28054
28074
|
], SgdsMainnavDropdown.prototype, "defaultNodes", void 0);
|
|
28055
28075
|
|
|
28056
|
-
var css_248z$
|
|
28076
|
+
var css_248z$x = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=sm]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=md]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=lg]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xxl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;min-height:100%;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:767px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
|
|
28057
28077
|
|
|
28058
28078
|
/**
|
|
28059
28079
|
* @slot default - slot for SgdsMainnavItem element.
|
|
@@ -28103,7 +28123,7 @@
|
|
|
28103
28123
|
return html$1 `<slot @slotchange=${this._handleSlotChange}></slot>`;
|
|
28104
28124
|
}
|
|
28105
28125
|
}
|
|
28106
|
-
SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$
|
|
28126
|
+
SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$x];
|
|
28107
28127
|
__decorate([
|
|
28108
28128
|
property({ type: Boolean, reflect: true })
|
|
28109
28129
|
], SgdsMainnavItem.prototype, "active", void 0);
|
|
@@ -28118,9 +28138,9 @@
|
|
|
28118
28138
|
register("sgds-mainnav-dropdown", SgdsMainnavDropdown);
|
|
28119
28139
|
register("sgds-mainnav-item", SgdsMainnavItem);
|
|
28120
28140
|
|
|
28121
|
-
var css_248z$
|
|
28141
|
+
var css_248z$w = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:16px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;padding:0!important;width:16px}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.75rem;line-height:1rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:16px;width:16px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
|
|
28122
28142
|
|
|
28123
|
-
var css_248z$
|
|
28143
|
+
var css_248z$v = css`svg{vertical-align:middle}`;
|
|
28124
28144
|
|
|
28125
28145
|
/**
|
|
28126
28146
|
* @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.
|
|
@@ -28329,7 +28349,7 @@
|
|
|
28329
28349
|
`;
|
|
28330
28350
|
}
|
|
28331
28351
|
}
|
|
28332
|
-
SgdsMasthead.styles = [...SgdsElement.styles, css_248z$
|
|
28352
|
+
SgdsMasthead.styles = [...SgdsElement.styles, css_248z$v, css_248z$1d, css_248z$w];
|
|
28333
28353
|
__decorate([
|
|
28334
28354
|
state()
|
|
28335
28355
|
], SgdsMasthead.prototype, "toggleVisibility", void 0);
|
|
@@ -28453,7 +28473,7 @@
|
|
|
28453
28473
|
}
|
|
28454
28474
|
}
|
|
28455
28475
|
|
|
28456
|
-
var css_248z$
|
|
28476
|
+
var css_248z$u = css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:var(--sgds-margin-sm) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-sm) - var(--sgds-margin-sm));position:relative;width:100%}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-sm)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-md);max-height:calc(100% - var(--sgds-margin-md) - var(--sgds-margin-md))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));max-width:var(--sgds-dimension-896)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1176)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1320)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
|
|
28457
28477
|
|
|
28458
28478
|
/**
|
|
28459
28479
|
* @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
|
|
@@ -28686,7 +28706,7 @@
|
|
|
28686
28706
|
`;
|
|
28687
28707
|
}
|
|
28688
28708
|
}
|
|
28689
|
-
SgdsModal.styles = [...SgdsElement.styles, css_248z$
|
|
28709
|
+
SgdsModal.styles = [...SgdsElement.styles, css_248z$Z, css_248z$v, css_248z$u];
|
|
28690
28710
|
/**@internal */
|
|
28691
28711
|
SgdsModal.dependencies = {
|
|
28692
28712
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -28744,7 +28764,9 @@
|
|
|
28744
28764
|
|
|
28745
28765
|
register("sgds-modal", SgdsModal);
|
|
28746
28766
|
|
|
28747
|
-
|
|
28767
|
+
register("sgds-overflow-menu", SgdsOverflowMenu);
|
|
28768
|
+
|
|
28769
|
+
var css_248z$t = css`ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:inline-flex;gap:var(--sgds-gap-2-xs);list-style:none;padding-left:0}.page-link{align-items:center;background-color:var(--sgds-bg-transparent);border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);display:flex;height:var(--sgds-dimension-48);justify-content:center;width:var(--sgds-dimension-48)}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:focus,.page-link:not(.ellipsis):hover{background-color:var(--sgds-primary-bg-translucent);color:var(--sgds-primary-color-default);z-index:2}.page-link:focus{box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.page-item>.page-link:not(.ellipsis){cursor:pointer}.page-item.active .page-link{background-color:var(--sgds-primary-bg-default);border-color:var(--sgds-info);color:var(--sgds-color-fixed-light);z-index:3}.ellipsis-disabled,.page-item.disabled .page-link{opacity:var(--sgds-opacity-50)}.ellipsis-disabled{cursor:not-allowed;pointer-events:none}.pagination-sm .page-link{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);width:var(--sgds-dimension-40)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pagination-description{align-items:center;display:flex}.pagination-sm .pagination-description{font-size:var(--sgds-font-size-1)}`;
|
|
28748
28770
|
|
|
28749
28771
|
/**
|
|
28750
28772
|
* @summary The Pagination component enables the user to select a specific page from a range of pages
|
|
@@ -29028,7 +29050,7 @@
|
|
|
29028
29050
|
`;
|
|
29029
29051
|
}
|
|
29030
29052
|
}
|
|
29031
|
-
SgdsPagination.styles = [...SgdsElement.styles, css_248z$
|
|
29053
|
+
SgdsPagination.styles = [...SgdsElement.styles, css_248z$t];
|
|
29032
29054
|
/**@internal */
|
|
29033
29055
|
SgdsPagination.dependencies = {
|
|
29034
29056
|
"sgds-icon-button": SgdsIconButton,
|
|
@@ -29165,7 +29187,7 @@
|
|
|
29165
29187
|
*/
|
|
29166
29188
|
const styleMap = directive(StyleMapDirective);
|
|
29167
29189
|
|
|
29168
|
-
var css_248z$
|
|
29190
|
+
var css_248z$s = css`progress{vertical-align:baseline}.progress-container{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);overflow:hidden}.progress{background-color:var(--sgds-bg-translucent)}.progress-bar{background-color:var(--sgds-primary-surface-default);display:flex;flex-direction:column;height:var(--sgds-dimension-4);justify-content:center;overflow:hidden;transition:width .6s ease}:host([variant=neutral]) .progress-bar{background-color:var(--sgds-neutral-surface-default)}.label{color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-1);white-space:nowrap}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}`;
|
|
29169
29191
|
|
|
29170
29192
|
/**
|
|
29171
29193
|
* @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
|
|
@@ -29201,7 +29223,7 @@
|
|
|
29201
29223
|
`;
|
|
29202
29224
|
}
|
|
29203
29225
|
}
|
|
29204
|
-
SgdsProgressBar.styles = [...SgdsElement.styles, css_248z$
|
|
29226
|
+
SgdsProgressBar.styles = [...SgdsElement.styles, css_248z$s];
|
|
29205
29227
|
__decorate([
|
|
29206
29228
|
property({ type: String, reflect: true })
|
|
29207
29229
|
], SgdsProgressBar.prototype, "variant", void 0);
|
|
@@ -29223,7 +29245,7 @@
|
|
|
29223
29245
|
|
|
29224
29246
|
register("sgds-progress-bar", SgdsProgressBar);
|
|
29225
29247
|
|
|
29226
|
-
var css_248z$
|
|
29248
|
+
var css_248z$r = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.input-group{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-form-gap-lg);position:relative}.input-group>sgds-input{flex:1 1 auto;min-width:0;position:relative}.input-group sgds-button:focus,.input-group>sgds-input:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;
|
|
29227
29249
|
|
|
29228
29250
|
/**
|
|
29229
29251
|
* @summary The quantity toggle component is used to increase or decrease an incremental venue, best used when the user needs to enter or adjust the quantity of a selected item.
|
|
@@ -29440,7 +29462,7 @@
|
|
|
29440
29462
|
`;
|
|
29441
29463
|
}
|
|
29442
29464
|
}
|
|
29443
|
-
SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$
|
|
29465
|
+
SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$T, css_248z$v, css_248z$r];
|
|
29444
29466
|
/** @internal */
|
|
29445
29467
|
SgdsQuantityToggle.dependencies = {
|
|
29446
29468
|
"sgds-input": SgdsInput,
|
|
@@ -29479,7 +29501,7 @@
|
|
|
29479
29501
|
|
|
29480
29502
|
register("sgds-quantity-toggle", SgdsQuantityToggle);
|
|
29481
29503
|
|
|
29482
|
-
var css_248z$
|
|
29504
|
+
var css_248z$q = css`:host{outline:0}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:50%;height:var(--sgds-form-height-sm);width:var(--sgds-form-height-sm)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:not([disabled]):not(.is-invalid):checked:focus-visible,.form-check-input:not([disabled]):not(.is-invalid):checked:hover,.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-surface-default)}`;
|
|
29483
29505
|
|
|
29484
29506
|
/**
|
|
29485
29507
|
* @summary Radio allows the user to select one option from a set while seeing all available options.
|
|
@@ -29565,7 +29587,7 @@
|
|
|
29565
29587
|
`;
|
|
29566
29588
|
}
|
|
29567
29589
|
}
|
|
29568
|
-
SgdsRadio.styles = [...SgdsElement.styles, css_248z$
|
|
29590
|
+
SgdsRadio.styles = [...SgdsElement.styles, css_248z$U, css_248z$q];
|
|
29569
29591
|
__decorate([
|
|
29570
29592
|
property({ type: Boolean, reflect: true })
|
|
29571
29593
|
], SgdsRadio.prototype, "checked", void 0);
|
|
@@ -29588,7 +29610,7 @@
|
|
|
29588
29610
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
29589
29611
|
], SgdsRadio.prototype, "handleDisabledChange", null);
|
|
29590
29612
|
|
|
29591
|
-
var css_248z$
|
|
29613
|
+
var css_248z$p = css`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
|
|
29592
29614
|
|
|
29593
29615
|
/**
|
|
29594
29616
|
* @summary RadioGroup group multiple radios so they function as a single form control.
|
|
@@ -29819,7 +29841,7 @@
|
|
|
29819
29841
|
`;
|
|
29820
29842
|
}
|
|
29821
29843
|
}
|
|
29822
|
-
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$
|
|
29844
|
+
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$p];
|
|
29823
29845
|
__decorate([
|
|
29824
29846
|
query("slot:not([name])")
|
|
29825
29847
|
], SgdsRadioGroup.prototype, "defaultSlot", void 0);
|
|
@@ -29860,7 +29882,7 @@
|
|
|
29860
29882
|
register("sgds-radio", SgdsRadio);
|
|
29861
29883
|
register("sgds-radio-group", SgdsRadioGroup);
|
|
29862
29884
|
|
|
29863
|
-
var css_248z$
|
|
29885
|
+
var css_248z$o = css`:host{--sidenav-sticky-top:0rem;padding:var(--sgds-padding-md)}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:visible;position:sticky;top:var(--sidenav-sticky-top)}`;
|
|
29864
29886
|
|
|
29865
29887
|
/**
|
|
29866
29888
|
* @summary The side navigation is used to display a list of links to move between pages within a related category.
|
|
@@ -29905,7 +29927,7 @@
|
|
|
29905
29927
|
`;
|
|
29906
29928
|
}
|
|
29907
29929
|
}
|
|
29908
|
-
SgdsSidenav.styles = [...SgdsElement.styles, css_248z$
|
|
29930
|
+
SgdsSidenav.styles = [...SgdsElement.styles, css_248z$o];
|
|
29909
29931
|
__decorate([
|
|
29910
29932
|
property({ type: Boolean, attribute: true })
|
|
29911
29933
|
], SgdsSidenav.prototype, "sticky", void 0);
|
|
@@ -29913,7 +29935,7 @@
|
|
|
29913
29935
|
queryAssignedElements()
|
|
29914
29936
|
], SgdsSidenav.prototype, "defaultNodes", void 0);
|
|
29915
29937
|
|
|
29916
|
-
var css_248z$
|
|
29938
|
+
var css_248z$n = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-border-radius-md);display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled),.sidenav-btn:focus:not(.disabled){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}.no-menu-default:focus,.no-menu-default:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-border-radius-md);color:inherit!important;display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body)!important;line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus),.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0!important}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}`;
|
|
29917
29939
|
|
|
29918
29940
|
/**
|
|
29919
29941
|
* @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.
|
|
@@ -30123,7 +30145,7 @@
|
|
|
30123
30145
|
`;
|
|
30124
30146
|
}
|
|
30125
30147
|
}
|
|
30126
|
-
SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z$
|
|
30148
|
+
SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z$n];
|
|
30127
30149
|
/** @internal */
|
|
30128
30150
|
SgdsSidenavItem.dependencies = {
|
|
30129
30151
|
"sgds-icon": SgdsIcon
|
|
@@ -30164,7 +30186,7 @@
|
|
|
30164
30186
|
options: { duration: 200, easing: "ease-in-out" }
|
|
30165
30187
|
});
|
|
30166
30188
|
|
|
30167
|
-
var css_248z$
|
|
30189
|
+
var css_248z$m = css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-border-radius-md);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}:host([disabled]) ::slotted(a:focus),:host([disabled]) ::slotted(a:focus-visible){box-shadow:none;outline:0}::slotted(a:focus),::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
|
|
30168
30190
|
|
|
30169
30191
|
/**
|
|
30170
30192
|
* @slot default - slot for label of anchor tag.
|
|
@@ -30201,7 +30223,7 @@
|
|
|
30201
30223
|
return html$1 ` <slot @slotchange=${this._handleSlotChange}></slot> `;
|
|
30202
30224
|
}
|
|
30203
30225
|
}
|
|
30204
|
-
SgdsSidenavLink.styles = [...SgdsElement.styles, css_248z$
|
|
30226
|
+
SgdsSidenavLink.styles = [...SgdsElement.styles, css_248z$m];
|
|
30205
30227
|
__decorate([
|
|
30206
30228
|
property({ type: Boolean, reflect: true })
|
|
30207
30229
|
], SgdsSidenavLink.prototype, "active", void 0);
|
|
@@ -30219,7 +30241,7 @@
|
|
|
30219
30241
|
register("sgds-sidenav-item", SgdsSidenavItem);
|
|
30220
30242
|
register("sgds-sidenav-link", SgdsSidenavLink);
|
|
30221
30243
|
|
|
30222
|
-
var css_248z$
|
|
30244
|
+
var css_248z$l = css`.skeleton{--bg:var(--sgds-bg-translucent-subtle);background-color:var(--bg);border-radius:var(--sgds-border-radius-sm);display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.skeleton.skeleton-paragraph{background-color:transparent}.skeleton.skeleton-paragraph.auto-size-rows>div[class*=skeleton-row]{background-color:var(--sgds-bg-translucent);border-radius:var(--sgds-border-radius-sm);height:-webkit-fill-available}.sheen{--sheen-color:var(--sgds-bg-translucent);animation:sheen 8s ease-in-out infinite;background:linear-gradient(270deg,var(--bg) 0,var(--sheen-color) 33.33%,var(--sheen-color) 66.67%,var(--bg) 100%);background-size:400% 100%}@keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.sheen{animation:none}}`;
|
|
30223
30245
|
|
|
30224
30246
|
/**
|
|
30225
30247
|
* @summary A skeleton is a low-fidelity visual placeholder that represents the loading of interface elements
|
|
@@ -30267,7 +30289,7 @@
|
|
|
30267
30289
|
`;
|
|
30268
30290
|
}
|
|
30269
30291
|
}
|
|
30270
|
-
SgdsSkeleton.styles = [css_248z$
|
|
30292
|
+
SgdsSkeleton.styles = [css_248z$l];
|
|
30271
30293
|
__decorate([
|
|
30272
30294
|
query(".skeleton")
|
|
30273
30295
|
], SgdsSkeleton.prototype, "skeleton", void 0);
|
|
@@ -30294,7 +30316,7 @@
|
|
|
30294
30316
|
|
|
30295
30317
|
register("sgds-spinner", SgdsSpinner);
|
|
30296
30318
|
|
|
30297
|
-
var css_248z$
|
|
30319
|
+
var css_248z$k = css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled]):checked:focus,.form-check-input:not([disabled]):checked:hover,.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-1)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-3)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input:checked,:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
|
|
30298
30320
|
|
|
30299
30321
|
/**
|
|
30300
30322
|
* @summary Switch component is used to toggle on and off or yes or no action.
|
|
@@ -30392,7 +30414,7 @@
|
|
|
30392
30414
|
`;
|
|
30393
30415
|
}
|
|
30394
30416
|
}
|
|
30395
|
-
SgdsSwitch.styles = [...SgdsElement.styles, css_248z$
|
|
30417
|
+
SgdsSwitch.styles = [...SgdsElement.styles, css_248z$U, css_248z$k];
|
|
30396
30418
|
__decorate([
|
|
30397
30419
|
property({ reflect: true, type: String })
|
|
30398
30420
|
], SgdsSwitch.prototype, "size", void 0);
|
|
@@ -30417,7 +30439,7 @@
|
|
|
30417
30439
|
|
|
30418
30440
|
register("sgds-switch", SgdsSwitch);
|
|
30419
30441
|
|
|
30420
|
-
var css_248z$
|
|
30442
|
+
var css_248z$j = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
|
|
30421
30443
|
|
|
30422
30444
|
/**
|
|
30423
30445
|
* @summary Steppers are used to inform users which step they are at in a form or a process
|
|
@@ -30535,7 +30557,7 @@
|
|
|
30535
30557
|
`;
|
|
30536
30558
|
}
|
|
30537
30559
|
}
|
|
30538
|
-
SgdsStepper.styles = [...SgdsElement.styles, css_248z$
|
|
30560
|
+
SgdsStepper.styles = [...SgdsElement.styles, css_248z$j];
|
|
30539
30561
|
/** @internal */
|
|
30540
30562
|
SgdsStepper.dependencies = { "sgds-icon": SgdsIcon };
|
|
30541
30563
|
__decorate([
|
|
@@ -30559,7 +30581,7 @@
|
|
|
30559
30581
|
|
|
30560
30582
|
register("sgds-stepper", SgdsStepper);
|
|
30561
30583
|
|
|
30562
|
-
var css_248z$
|
|
30584
|
+
var css_248z$i = css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-1);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical]) .tab{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal]) .tab{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus,.tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
|
|
30563
30585
|
|
|
30564
30586
|
let id$1 = 0;
|
|
30565
30587
|
/**
|
|
@@ -30615,7 +30637,7 @@
|
|
|
30615
30637
|
`;
|
|
30616
30638
|
}
|
|
30617
30639
|
}
|
|
30618
|
-
SgdsTab.styles = [css_248z$
|
|
30640
|
+
SgdsTab.styles = [css_248z$i];
|
|
30619
30641
|
__decorate([
|
|
30620
30642
|
query(".tab")
|
|
30621
30643
|
], SgdsTab.prototype, "tab", void 0);
|
|
@@ -30635,7 +30657,7 @@
|
|
|
30635
30657
|
watch("disabled")
|
|
30636
30658
|
], SgdsTab.prototype, "handleDisabledChange", null);
|
|
30637
30659
|
|
|
30638
|
-
var css_248z$
|
|
30660
|
+
var css_248z$h = css`.tab-group{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}.tab-group__nav{display:flex;flex-direction:row}.tab-group__content{flex:1}:host([orientation=vertical]) .tab-group{flex-direction:row}:host([orientation=vertical]) .tab-group__nav{flex-direction:column}:host([variant=solid]) .tab-group__nav{gap:var(--sgds-gap-xs)}`;
|
|
30639
30661
|
|
|
30640
30662
|
/**
|
|
30641
30663
|
* @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.
|
|
@@ -30852,7 +30874,7 @@
|
|
|
30852
30874
|
`;
|
|
30853
30875
|
}
|
|
30854
30876
|
}
|
|
30855
|
-
SgdsTabGroup.styles = [...SgdsElement.styles, css_248z$
|
|
30877
|
+
SgdsTabGroup.styles = [...SgdsElement.styles, css_248z$h];
|
|
30856
30878
|
__decorate([
|
|
30857
30879
|
query(".tab-group")
|
|
30858
30880
|
], SgdsTabGroup.prototype, "_tabGroup", void 0);
|
|
@@ -30875,7 +30897,7 @@
|
|
|
30875
30897
|
queryAssignedElements({ slot: "nav", flatten: true })
|
|
30876
30898
|
], SgdsTabGroup.prototype, "_navSlot", void 0);
|
|
30877
30899
|
|
|
30878
|
-
var css_248z$
|
|
30900
|
+
var css_248z$g = css`.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;
|
|
30879
30901
|
|
|
30880
30902
|
let id = 0;
|
|
30881
30903
|
/**
|
|
@@ -30912,7 +30934,7 @@
|
|
|
30912
30934
|
`;
|
|
30913
30935
|
}
|
|
30914
30936
|
}
|
|
30915
|
-
SgdsTabPanel.styles = [...SgdsElement.styles, css_248z$
|
|
30937
|
+
SgdsTabPanel.styles = [...SgdsElement.styles, css_248z$g];
|
|
30916
30938
|
__decorate([
|
|
30917
30939
|
property({ reflect: true })
|
|
30918
30940
|
], SgdsTabPanel.prototype, "name", void 0);
|
|
@@ -30927,7 +30949,7 @@
|
|
|
30927
30949
|
register("sgds-tab-group", SgdsTabGroup);
|
|
30928
30950
|
register("sgds-tab-panel", SgdsTabPanel);
|
|
30929
30951
|
|
|
30930
|
-
var css_248z$
|
|
30952
|
+
var css_248z$f = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);display:table;vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
|
|
30931
30953
|
|
|
30932
30954
|
/**
|
|
30933
30955
|
* @summary Table is used for displaying collections of data in organized rows and columns.
|
|
@@ -31031,7 +31053,7 @@
|
|
|
31031
31053
|
`;
|
|
31032
31054
|
}
|
|
31033
31055
|
}
|
|
31034
|
-
SgdsTable.styles = [...SgdsElement.styles, css_248z$
|
|
31056
|
+
SgdsTable.styles = [...SgdsElement.styles, css_248z$f];
|
|
31035
31057
|
__decorate([
|
|
31036
31058
|
property({ type: String, reflect: true })
|
|
31037
31059
|
], SgdsTable.prototype, "responsive", void 0);
|
|
@@ -31048,7 +31070,7 @@
|
|
|
31048
31070
|
property({ type: String })
|
|
31049
31071
|
], SgdsTable.prototype, "headerPosition", void 0);
|
|
31050
31072
|
|
|
31051
|
-
var css_248z$
|
|
31073
|
+
var css_248z$e = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis);display:table-cell;font-weight:700;padding:var(--sgds-padding-lg)}:host(:not([border])){border-color:var(--sgds-border-color-muted)}`;
|
|
31052
31074
|
|
|
31053
31075
|
/**
|
|
31054
31076
|
* @summary Table head represents a table header cell that identifies a group of information within the table.
|
|
@@ -31076,7 +31098,7 @@
|
|
|
31076
31098
|
return html$1 `<slot></slot>`;
|
|
31077
31099
|
}
|
|
31078
31100
|
}
|
|
31079
|
-
SgdsTableHead.styles = [...SgdsElement.styles, css_248z$
|
|
31101
|
+
SgdsTableHead.styles = [...SgdsElement.styles, css_248z$e];
|
|
31080
31102
|
__decorate([
|
|
31081
31103
|
state()
|
|
31082
31104
|
], SgdsTableHead.prototype, "border", void 0);
|
|
@@ -31084,7 +31106,7 @@
|
|
|
31084
31106
|
watch("border")
|
|
31085
31107
|
], SgdsTableHead.prototype, "_handleBorderChange", null);
|
|
31086
31108
|
|
|
31087
|
-
var css_248z$
|
|
31109
|
+
var css_248z$d = css`:host{display:table-row;width:100%}`;
|
|
31088
31110
|
|
|
31089
31111
|
/**
|
|
31090
31112
|
* @summary Table row organizes and groups table cells or header cells into a single horizontal line within the table.
|
|
@@ -31100,9 +31122,9 @@
|
|
|
31100
31122
|
return html$1 `<slot class="table-row"></slot>`;
|
|
31101
31123
|
}
|
|
31102
31124
|
}
|
|
31103
|
-
SgdsTableRow.styles = [...SgdsElement.styles, css_248z$
|
|
31125
|
+
SgdsTableRow.styles = [...SgdsElement.styles, css_248z$d];
|
|
31104
31126
|
|
|
31105
|
-
var css_248z$
|
|
31127
|
+
var css_248z$c = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;padding:var(--sgds-padding-lg)}`;
|
|
31106
31128
|
|
|
31107
31129
|
/**
|
|
31108
31130
|
* @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.
|
|
@@ -31118,14 +31140,14 @@
|
|
|
31118
31140
|
return html$1 ` <slot class="table-cell"></slot> `;
|
|
31119
31141
|
}
|
|
31120
31142
|
}
|
|
31121
|
-
SgdsTableCell.styles = [...SgdsElement.styles, css_248z$
|
|
31143
|
+
SgdsTableCell.styles = [...SgdsElement.styles, css_248z$c];
|
|
31122
31144
|
|
|
31123
31145
|
register("sgds-table", SgdsTable);
|
|
31124
31146
|
register("sgds-table-head", SgdsTableHead);
|
|
31125
31147
|
register("sgds-table-row", SgdsTableRow);
|
|
31126
31148
|
register("sgds-table-cell", SgdsTableCell);
|
|
31127
31149
|
|
|
31128
|
-
var css_248z$
|
|
31150
|
+
var css_248z$b = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}.form-control{appearance:none;background-clip:padding-box;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);color:var(--sgds-form-color-default);min-height:var(--sgds-dimension-136);outline:0;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.form-control[readonly]{border-color:var(--sgds-border-color-muted)}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:not([disabled]):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control:not([disabled]):not(.is-invalid):focus,.form-control:not([disabled]):not(.is-invalid):focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus)}.form-control.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control:disabled{background-color:var(--sgds-form-surface-muted)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
|
|
31129
31151
|
|
|
31130
31152
|
/**
|
|
31131
31153
|
* @summary Text areas allow for the collection of input longer than a single line.
|
|
@@ -31321,7 +31343,7 @@
|
|
|
31321
31343
|
`;
|
|
31322
31344
|
}
|
|
31323
31345
|
}
|
|
31324
|
-
SgdsTextarea.styles = [...FormControlElement.styles, css_248z$
|
|
31346
|
+
SgdsTextarea.styles = [...FormControlElement.styles, css_248z$b];
|
|
31325
31347
|
__decorate([
|
|
31326
31348
|
query("textarea.form-control")
|
|
31327
31349
|
], SgdsTextarea.prototype, "textarea", void 0);
|
|
@@ -31394,7 +31416,7 @@
|
|
|
31394
31416
|
|
|
31395
31417
|
register("sgds-textarea", SgdsTextarea);
|
|
31396
31418
|
|
|
31397
|
-
var css_248z$
|
|
31419
|
+
var css_248z$a = css`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body{gap:var(--sgds-gap-2-xs)}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
|
|
31398
31420
|
|
|
31399
31421
|
/**
|
|
31400
31422
|
* @summary Toast allows you to convey quick messaging notifications to the user.
|
|
@@ -31511,7 +31533,7 @@
|
|
|
31511
31533
|
`;
|
|
31512
31534
|
}
|
|
31513
31535
|
}
|
|
31514
|
-
SgdsToast.styles = [...SgdsElement.styles, css_248z$
|
|
31536
|
+
SgdsToast.styles = [...SgdsElement.styles, css_248z$a];
|
|
31515
31537
|
/**@internal */
|
|
31516
31538
|
SgdsToast.dependencies = {
|
|
31517
31539
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -31555,7 +31577,7 @@
|
|
|
31555
31577
|
options: { duration: 400, easing: "ease" }
|
|
31556
31578
|
});
|
|
31557
31579
|
|
|
31558
|
-
var css_248z$
|
|
31580
|
+
var css_248z$9 = css`.toast-container{max-width:100%;pointer-events:none;position:fixed;width:max-content;z-index:1090}.top-start{left:0;top:0}.top-center{left:50%;top:0;transform:translateX(-50%)}.top-end{right:0;top:0}.middle-start{left:0;top:50%;transform:translateY(-50%)}.middle-center{left:50%;top:50%;transform:translate(-50%,-50%)}.middle-end{right:0;top:50%;transform:translateY(-50%)}.bottom-start{bottom:0;left:0}.bottom-center{bottom:0;left:50%;transform:translateX(-50%)}.bottom-end{bottom:0;right:0}slot{display:flex;flex-direction:column;gap:.5rem}`;
|
|
31559
31581
|
|
|
31560
31582
|
/**
|
|
31561
31583
|
* @summary ToastContainer is the container component to position `sgds-toast` in screen. When there is multiple toasts in the container, the toast components are stacked vertically.
|
|
@@ -31577,7 +31599,7 @@
|
|
|
31577
31599
|
`;
|
|
31578
31600
|
}
|
|
31579
31601
|
}
|
|
31580
|
-
SgdsToastContainer.styles = [css_248z$
|
|
31602
|
+
SgdsToastContainer.styles = [css_248z$9];
|
|
31581
31603
|
__decorate([
|
|
31582
31604
|
property({ type: String, reflect: true })
|
|
31583
31605
|
], SgdsToastContainer.prototype, "position", void 0);
|
|
@@ -31587,7 +31609,7 @@
|
|
|
31587
31609
|
|
|
31588
31610
|
register("sgds-tooltip", SgdsTooltip);
|
|
31589
31611
|
|
|
31590
|
-
var css_248z$
|
|
31612
|
+
var css_248z$8 = css`.container{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}slot:not([name])::slotted(*){--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-bold,var(--sgds-font-weight-semibold));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}.contents{display:flex;flex-direction:column;gap:var(--sgds-gap-md);list-style:none;margin:var(--sgds-margin-none);padding:var(--sgds-padding-none)}slot[name=contents]::slotted(li){--sgds-margin-3-xs:var(--sgds-margin-none);margin-top:var(--sgds-margin-3-xs,var(--sgds-margin-none))}`;
|
|
31591
31613
|
|
|
31592
31614
|
/**
|
|
31593
31615
|
*
|
|
@@ -31606,13 +31628,13 @@
|
|
|
31606
31628
|
</div> `;
|
|
31607
31629
|
}
|
|
31608
31630
|
}
|
|
31609
|
-
SgdsTableOfContents.styles = [...SgdsElement.styles, css_248z$
|
|
31631
|
+
SgdsTableOfContents.styles = [...SgdsElement.styles, css_248z$8];
|
|
31610
31632
|
|
|
31611
31633
|
customElements.define("sgds-table-of-contents", SgdsTableOfContents);
|
|
31612
31634
|
|
|
31613
|
-
var css_248z$
|
|
31635
|
+
var css_248z$7 = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
|
|
31614
31636
|
|
|
31615
|
-
var css_248z$
|
|
31637
|
+
var css_248z$6 = css`.sgds-container{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 64px)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container{max-width:896px}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-container{max-width:1176px}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:1320px}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}`;
|
|
31616
31638
|
|
|
31617
31639
|
const VALID_KEYS = ["Enter", " "];
|
|
31618
31640
|
/**
|
|
@@ -31792,7 +31814,7 @@
|
|
|
31792
31814
|
`;
|
|
31793
31815
|
}
|
|
31794
31816
|
}
|
|
31795
|
-
SgdsSubnav.styles = [...SgdsElement.styles, css_248z$
|
|
31817
|
+
SgdsSubnav.styles = [...SgdsElement.styles, css_248z$7, css_248z$6];
|
|
31796
31818
|
/** @internal */
|
|
31797
31819
|
SgdsSubnav.dependencies = {
|
|
31798
31820
|
"sgds-icon": SgdsIcon
|
|
@@ -31842,7 +31864,7 @@
|
|
|
31842
31864
|
options: { duration: 200, easing: "ease-in-out" }
|
|
31843
31865
|
});
|
|
31844
31866
|
|
|
31845
|
-
var css_248z$
|
|
31867
|
+
var css_248z$5 = css`:host(:not([disabled])[active]:not([active=false])) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-font-size-2:var(--sgds-font-size-1);--sgds-link-color-default:var(--sgds-color-default);box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));gap:var(--sgds-gap-2-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}@media screen and (min-width:1024px){:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);background-color:inherit;border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}::slotted(*){padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
|
|
31846
31868
|
|
|
31847
31869
|
/**
|
|
31848
31870
|
* @slot default - slot for SgdsSubnavItem element.
|
|
@@ -31892,7 +31914,7 @@
|
|
|
31892
31914
|
return html$1 `<slot @slotchange=${this._handleSlotChange}></slot>`;
|
|
31893
31915
|
}
|
|
31894
31916
|
}
|
|
31895
|
-
SgdsSubnavItem.styles = [...SgdsElement.styles, css_248z$
|
|
31917
|
+
SgdsSubnavItem.styles = [...SgdsElement.styles, css_248z$5];
|
|
31896
31918
|
__decorate([
|
|
31897
31919
|
property({ type: Boolean, reflect: true })
|
|
31898
31920
|
], SgdsSubnavItem.prototype, "active", void 0);
|
|
@@ -31906,9 +31928,9 @@
|
|
|
31906
31928
|
customElements.define("sgds-subnav", SgdsSubnav);
|
|
31907
31929
|
customElements.define("sgds-subnav-item", SgdsSubnavItem);
|
|
31908
31930
|
|
|
31909
|
-
var css_248z$
|
|
31931
|
+
var css_248z$4 = css`:host{display:block;position:relative}.select{flex-direction:column;gap:var(--sgds-form-gap-md)}.dropdown{display:flex;height:100%}.select{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;caret-color:transparent;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.select-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
|
|
31910
31932
|
|
|
31911
|
-
var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
|
|
31933
|
+
var css_248z$3 = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
|
|
31912
31934
|
|
|
31913
31935
|
class SelectItem extends SgdsElement {
|
|
31914
31936
|
constructor() {
|
|
@@ -31953,7 +31975,7 @@
|
|
|
31953
31975
|
SelectItem.dependencies = {
|
|
31954
31976
|
"sgds-icon": SgdsIcon
|
|
31955
31977
|
};
|
|
31956
|
-
SelectItem.styles = [css_248z];
|
|
31978
|
+
SelectItem.styles = [css_248z$3];
|
|
31957
31979
|
__decorate([
|
|
31958
31980
|
property({ type: Boolean, reflect: true })
|
|
31959
31981
|
], SelectItem.prototype, "active", void 0);
|
|
@@ -32096,7 +32118,7 @@
|
|
|
32096
32118
|
`;
|
|
32097
32119
|
}
|
|
32098
32120
|
}
|
|
32099
|
-
SgdsSelect.styles = [...SelectElement.styles, css_248z$
|
|
32121
|
+
SgdsSelect.styles = [...SelectElement.styles, css_248z$4];
|
|
32100
32122
|
/** @internal */
|
|
32101
32123
|
SgdsSelect.dependencies = {
|
|
32102
32124
|
"sgds-icon": SgdsIcon,
|
|
@@ -32108,5 +32130,254 @@
|
|
|
32108
32130
|
|
|
32109
32131
|
customElements.define("sgds-select", SgdsSelect);
|
|
32110
32132
|
|
|
32133
|
+
var css_248z$2 = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=image-badge]::slotted(*){left:20px;position:absolute;top:20px}slot[name=image-action]::slotted(*){position:absolute;right:20px;top:20px}`;
|
|
32134
|
+
|
|
32135
|
+
/**
|
|
32136
|
+
* @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
32137
|
+
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
32138
|
+
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
32139
|
+
* @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.
|
|
32140
|
+
* @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.
|
|
32141
|
+
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
32142
|
+
* @slot subtitle - The subtitle of the card
|
|
32143
|
+
* @slot title - The title of the card
|
|
32144
|
+
* @slot description - The paragrapher text of the card
|
|
32145
|
+
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
32146
|
+
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
32147
|
+
*/
|
|
32148
|
+
class SgdsImageCard extends CardElement {
|
|
32149
|
+
constructor() {
|
|
32150
|
+
super(...arguments);
|
|
32151
|
+
/** Removes the card's internal padding when set to true. */
|
|
32152
|
+
this.noPadding = false;
|
|
32153
|
+
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
32154
|
+
this.imagePosition = "before";
|
|
32155
|
+
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
32156
|
+
this.imageAdjustment = "default";
|
|
32157
|
+
}
|
|
32158
|
+
firstUpdated() {
|
|
32159
|
+
if (this._imageNode.length === 0) {
|
|
32160
|
+
const image = this.shadowRoot.querySelector(".card-image");
|
|
32161
|
+
const body = this.shadowRoot.querySelector(".card-body");
|
|
32162
|
+
image.style.display = "none";
|
|
32163
|
+
if (this.noPadding)
|
|
32164
|
+
body.style.padding = "0px";
|
|
32165
|
+
}
|
|
32166
|
+
}
|
|
32167
|
+
handleImgSlotChange(e) {
|
|
32168
|
+
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
32169
|
+
if (childNodes.length > 1) {
|
|
32170
|
+
return console.error("Multiple elements passed into SgdsCard's image slot");
|
|
32171
|
+
}
|
|
32172
|
+
}
|
|
32173
|
+
render() {
|
|
32174
|
+
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
32175
|
+
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
32176
|
+
return html `
|
|
32177
|
+
<${tag}
|
|
32178
|
+
class="card ${classMap({
|
|
32179
|
+
disabled: this.disabled
|
|
32180
|
+
})}"
|
|
32181
|
+
tabindex=${cardTabIndex}
|
|
32182
|
+
>
|
|
32183
|
+
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
32184
|
+
<div class="card-image">
|
|
32185
|
+
<slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
|
|
32186
|
+
<slot name="image-badge"></slot>
|
|
32187
|
+
<slot name="image-action"></slot>
|
|
32188
|
+
</div>
|
|
32189
|
+
<div class="card-body">
|
|
32190
|
+
<slot name="upper"></slot>
|
|
32191
|
+
<div class="card-header-container">
|
|
32192
|
+
<div class="card-header">
|
|
32193
|
+
<slot name="subtitle"></slot>
|
|
32194
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
32195
|
+
</div>
|
|
32196
|
+
<slot></slot>
|
|
32197
|
+
</div>
|
|
32198
|
+
<p class="card-text">
|
|
32199
|
+
<slot name="description"></slot>
|
|
32200
|
+
</p>
|
|
32201
|
+
<slot name="lower"></slot>
|
|
32202
|
+
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
32203
|
+
</div>
|
|
32204
|
+
</${tag}>
|
|
32205
|
+
`;
|
|
32206
|
+
}
|
|
32207
|
+
}
|
|
32208
|
+
SgdsImageCard.styles = [...CardElement.styles, css_248z$2];
|
|
32209
|
+
__decorate([
|
|
32210
|
+
queryAssignedNodes({ slot: "image", flatten: true })
|
|
32211
|
+
], SgdsImageCard.prototype, "_imageNode", void 0);
|
|
32212
|
+
__decorate([
|
|
32213
|
+
property({ type: Boolean, reflect: true })
|
|
32214
|
+
], SgdsImageCard.prototype, "noPadding", void 0);
|
|
32215
|
+
__decorate([
|
|
32216
|
+
property({ type: String, reflect: true })
|
|
32217
|
+
], SgdsImageCard.prototype, "imagePosition", void 0);
|
|
32218
|
+
__decorate([
|
|
32219
|
+
property({ type: String, reflect: true })
|
|
32220
|
+
], SgdsImageCard.prototype, "imageAdjustment", void 0);
|
|
32221
|
+
|
|
32222
|
+
customElements.define("sgds-image-card", SgdsImageCard);
|
|
32223
|
+
|
|
32224
|
+
var css_248z$1 = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:auto;max-width:100%}`;
|
|
32225
|
+
|
|
32226
|
+
/**
|
|
32227
|
+
* @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
32228
|
+
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
32229
|
+
* @slot thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.
|
|
32230
|
+
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
32231
|
+
* @slot subtitle - The subtitle of the card
|
|
32232
|
+
* @slot title - The title of the card
|
|
32233
|
+
* @slot description - The paragrapher text of the card
|
|
32234
|
+
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
32235
|
+
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
32236
|
+
*/
|
|
32237
|
+
class SgdsThumbnailCard extends CardElement {
|
|
32238
|
+
constructor() {
|
|
32239
|
+
super(...arguments);
|
|
32240
|
+
/** Removes the card's internal padding when set to true. */
|
|
32241
|
+
this.noPadding = false;
|
|
32242
|
+
}
|
|
32243
|
+
firstUpdated() {
|
|
32244
|
+
if (this._thumbnailNode.length === 0) {
|
|
32245
|
+
const thumbnail = this.shadowRoot.querySelector(".card-thumbnail");
|
|
32246
|
+
thumbnail.style.display = "none";
|
|
32247
|
+
if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
|
|
32248
|
+
const media = this.shadowRoot.querySelector(".card-media");
|
|
32249
|
+
media.style.display = "none";
|
|
32250
|
+
const body = this.shadowRoot.querySelector(".card-body");
|
|
32251
|
+
if (this.noPadding)
|
|
32252
|
+
body.style.padding = "0px";
|
|
32253
|
+
}
|
|
32254
|
+
}
|
|
32255
|
+
}
|
|
32256
|
+
render() {
|
|
32257
|
+
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
32258
|
+
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
32259
|
+
return html `
|
|
32260
|
+
<${tag}
|
|
32261
|
+
class="card ${classMap({
|
|
32262
|
+
disabled: this.disabled
|
|
32263
|
+
})}"
|
|
32264
|
+
tabindex=${cardTabIndex}
|
|
32265
|
+
>
|
|
32266
|
+
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
32267
|
+
<div class="card-media">
|
|
32268
|
+
<div class="card-thumbnail">
|
|
32269
|
+
<slot name="thumbnail"></slot>
|
|
32270
|
+
</div>
|
|
32271
|
+
${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
|
|
32272
|
+
</div>
|
|
32273
|
+
<div class="card-body">
|
|
32274
|
+
${this.orientation === "horizontal" ? html `<slot name="upper"></slot>` : nothing}
|
|
32275
|
+
<div class="card-header-container">
|
|
32276
|
+
<div class="card-header">
|
|
32277
|
+
<slot name="subtitle"></slot>
|
|
32278
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
32279
|
+
</div>
|
|
32280
|
+
<slot></slot>
|
|
32281
|
+
</div>
|
|
32282
|
+
<p class="card-text">
|
|
32283
|
+
<slot name="description"></slot>
|
|
32284
|
+
</p>
|
|
32285
|
+
<slot name="lower"></slot>
|
|
32286
|
+
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
32287
|
+
</div>
|
|
32288
|
+
</${tag}>
|
|
32289
|
+
`;
|
|
32290
|
+
}
|
|
32291
|
+
}
|
|
32292
|
+
SgdsThumbnailCard.styles = [...CardElement.styles, css_248z$1];
|
|
32293
|
+
__decorate([
|
|
32294
|
+
queryAssignedNodes({ slot: "thumbnail", flatten: true })
|
|
32295
|
+
], SgdsThumbnailCard.prototype, "_thumbnailNode", void 0);
|
|
32296
|
+
__decorate([
|
|
32297
|
+
queryAssignedNodes({ slot: "upper", flatten: true })
|
|
32298
|
+
], SgdsThumbnailCard.prototype, "_upperNode", void 0);
|
|
32299
|
+
__decorate([
|
|
32300
|
+
property({ type: Boolean, reflect: true })
|
|
32301
|
+
], SgdsThumbnailCard.prototype, "noPadding", void 0);
|
|
32302
|
+
|
|
32303
|
+
customElements.define("sgds-thumbnail-card", SgdsThumbnailCard);
|
|
32304
|
+
|
|
32305
|
+
var css_248z = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}`;
|
|
32306
|
+
|
|
32307
|
+
/**
|
|
32308
|
+
* @summary Icon cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
32309
|
+
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
32310
|
+
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
32311
|
+
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
32312
|
+
* @slot subtitle - The subtitle of the card
|
|
32313
|
+
* @slot title - The title of the card
|
|
32314
|
+
* @slot description - The paragrapher text of the card
|
|
32315
|
+
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
32316
|
+
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
32317
|
+
*/
|
|
32318
|
+
class SgdsIconCard extends CardElement {
|
|
32319
|
+
constructor() {
|
|
32320
|
+
super(...arguments);
|
|
32321
|
+
/** Removes the card's internal padding when set to true. */
|
|
32322
|
+
this.noPadding = false;
|
|
32323
|
+
}
|
|
32324
|
+
firstUpdated() {
|
|
32325
|
+
if (this._iconNode.length === 0) {
|
|
32326
|
+
if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
|
|
32327
|
+
const media = this.shadowRoot.querySelector(".card-media");
|
|
32328
|
+
media.style.display = "none";
|
|
32329
|
+
const body = this.shadowRoot.querySelector(".card-body");
|
|
32330
|
+
if (this.noPadding)
|
|
32331
|
+
body.style.padding = "0px";
|
|
32332
|
+
}
|
|
32333
|
+
}
|
|
32334
|
+
}
|
|
32335
|
+
render() {
|
|
32336
|
+
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
32337
|
+
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
32338
|
+
return html `
|
|
32339
|
+
<${tag}
|
|
32340
|
+
class="card ${classMap({
|
|
32341
|
+
disabled: this.disabled
|
|
32342
|
+
})}"
|
|
32343
|
+
tabindex=${cardTabIndex}
|
|
32344
|
+
>
|
|
32345
|
+
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
32346
|
+
<div class="card-media">
|
|
32347
|
+
<slot name="icon"></slot>
|
|
32348
|
+
${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
|
|
32349
|
+
</div>
|
|
32350
|
+
<div class="card-body">
|
|
32351
|
+
${this.orientation === "horizontal" ? html `<slot name="upper"></slot>` : nothing}
|
|
32352
|
+
<div class="card-header-container">
|
|
32353
|
+
<div class="card-header">
|
|
32354
|
+
<slot name="subtitle"></slot>
|
|
32355
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
32356
|
+
</div>
|
|
32357
|
+
<slot></slot>
|
|
32358
|
+
</div>
|
|
32359
|
+
<p class="card-text">
|
|
32360
|
+
<slot name="description"></slot>
|
|
32361
|
+
</p>
|
|
32362
|
+
<slot name="lower"></slot>
|
|
32363
|
+
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
32364
|
+
</div>
|
|
32365
|
+
</${tag}>
|
|
32366
|
+
`;
|
|
32367
|
+
}
|
|
32368
|
+
}
|
|
32369
|
+
SgdsIconCard.styles = [...CardElement.styles, css_248z];
|
|
32370
|
+
__decorate([
|
|
32371
|
+
queryAssignedNodes({ slot: "icon", flatten: true })
|
|
32372
|
+
], SgdsIconCard.prototype, "_iconNode", void 0);
|
|
32373
|
+
__decorate([
|
|
32374
|
+
queryAssignedNodes({ slot: "upper", flatten: true })
|
|
32375
|
+
], SgdsIconCard.prototype, "_upperNode", void 0);
|
|
32376
|
+
__decorate([
|
|
32377
|
+
property({ type: Boolean, reflect: true })
|
|
32378
|
+
], SgdsIconCard.prototype, "noPadding", void 0);
|
|
32379
|
+
|
|
32380
|
+
customElements.define("sgds-icon-card", SgdsIconCard);
|
|
32381
|
+
|
|
32111
32382
|
}));
|
|
32112
32383
|
//# sourceMappingURL=index.umd.js.map
|