@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/components/index.umd.js
CHANGED
|
@@ -4383,7 +4383,7 @@
|
|
|
4383
4383
|
});
|
|
4384
4384
|
}
|
|
4385
4385
|
|
|
4386
|
-
var css_248z$
|
|
4386
|
+
var css_248z$1f = 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}}`;
|
|
4387
4387
|
|
|
4388
4388
|
/**
|
|
4389
4389
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -4440,11 +4440,11 @@
|
|
|
4440
4440
|
});
|
|
4441
4441
|
}
|
|
4442
4442
|
}
|
|
4443
|
-
SgdsElement.styles = [css_248z$
|
|
4443
|
+
SgdsElement.styles = [css_248z$1f];
|
|
4444
4444
|
/** @internal */
|
|
4445
4445
|
SgdsElement.dependencies = {};
|
|
4446
4446
|
|
|
4447
|
-
var css_248z$
|
|
4447
|
+
var css_248z$1e = css`:host([variant=border]) .accordion{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md)}`;
|
|
4448
4448
|
|
|
4449
4449
|
const VALID_KEYS$1 = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
|
|
4450
4450
|
/**
|
|
@@ -4516,7 +4516,7 @@
|
|
|
4516
4516
|
`;
|
|
4517
4517
|
}
|
|
4518
4518
|
}
|
|
4519
|
-
SgdsAccordion.styles = [...SgdsElement.styles, css_248z$
|
|
4519
|
+
SgdsAccordion.styles = [...SgdsElement.styles, css_248z$1e];
|
|
4520
4520
|
__decorate([
|
|
4521
4521
|
property({ type: Boolean, reflect: true })
|
|
4522
4522
|
], SgdsAccordion.prototype, "allowMultiple", void 0);
|
|
@@ -4791,7 +4791,7 @@
|
|
|
4791
4791
|
};
|
|
4792
4792
|
}
|
|
4793
4793
|
|
|
4794
|
-
var css_248z$
|
|
4794
|
+
var css_248z$1d = 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}`;
|
|
4795
4795
|
|
|
4796
4796
|
/**
|
|
4797
4797
|
*
|
|
@@ -4926,7 +4926,7 @@
|
|
|
4926
4926
|
`;
|
|
4927
4927
|
}
|
|
4928
4928
|
}
|
|
4929
|
-
SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$
|
|
4929
|
+
SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$1d];
|
|
4930
4930
|
__decorate([
|
|
4931
4931
|
query(".accordion-item")
|
|
4932
4932
|
], SgdsAccordionItem.prototype, "accordion", void 0);
|
|
@@ -5087,7 +5087,7 @@
|
|
|
5087
5087
|
*/
|
|
5088
5088
|
const ifDefined = (value) => value ?? nothing;
|
|
5089
5089
|
|
|
5090
|
-
var css_248z$
|
|
5090
|
+
var css_248z$1c = 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)}`;
|
|
5091
5091
|
|
|
5092
5092
|
/**
|
|
5093
5093
|
*
|
|
@@ -5149,7 +5149,7 @@
|
|
|
5149
5149
|
`;
|
|
5150
5150
|
}
|
|
5151
5151
|
}
|
|
5152
|
-
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$
|
|
5152
|
+
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$1c];
|
|
5153
5153
|
__decorate([
|
|
5154
5154
|
property({ type: String })
|
|
5155
5155
|
], SgdsCloseButton.prototype, "ariaLabel", void 0);
|
|
@@ -7608,7 +7608,7 @@
|
|
|
7608
7608
|
"zoom-out": ZoomOut
|
|
7609
7609
|
};
|
|
7610
7610
|
|
|
7611
|
-
var css_248z$
|
|
7611
|
+
var css_248z$1b = 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)}`;
|
|
7612
7612
|
|
|
7613
7613
|
/**
|
|
7614
7614
|
* @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
|
|
@@ -7634,7 +7634,7 @@
|
|
|
7634
7634
|
return icon ? icon : nothing;
|
|
7635
7635
|
}
|
|
7636
7636
|
}
|
|
7637
|
-
SgdsIcon.styles = [...SgdsElement.styles, css_248z$
|
|
7637
|
+
SgdsIcon.styles = [...SgdsElement.styles, css_248z$1b];
|
|
7638
7638
|
__decorate([
|
|
7639
7639
|
property({ type: String, reflect: true })
|
|
7640
7640
|
], SgdsIcon.prototype, "name", void 0);
|
|
@@ -7642,7 +7642,7 @@
|
|
|
7642
7642
|
property({ type: String, reflect: true })
|
|
7643
7643
|
], SgdsIcon.prototype, "size", void 0);
|
|
7644
7644
|
|
|
7645
|
-
var css_248z$
|
|
7645
|
+
var css_248z$1a = 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)}`;
|
|
7646
7646
|
|
|
7647
7647
|
/**
|
|
7648
7648
|
* @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.
|
|
@@ -7704,7 +7704,7 @@
|
|
|
7704
7704
|
: nothing;
|
|
7705
7705
|
}
|
|
7706
7706
|
}
|
|
7707
|
-
SgdsAlert.styles = [...SgdsElement.styles, css_248z$
|
|
7707
|
+
SgdsAlert.styles = [...SgdsElement.styles, css_248z$1a];
|
|
7708
7708
|
/**@internal */
|
|
7709
7709
|
SgdsAlert.dependencies = {
|
|
7710
7710
|
"sgds-close-button": SgdsCloseButton,
|
|
@@ -7729,9 +7729,9 @@
|
|
|
7729
7729
|
watch("show")
|
|
7730
7730
|
], SgdsAlert.prototype, "_handleShowChange", null);
|
|
7731
7731
|
|
|
7732
|
-
var css_248z$
|
|
7732
|
+
var css_248z$19 = 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}`;
|
|
7733
7733
|
|
|
7734
|
-
var css_248z$
|
|
7734
|
+
var css_248z$18 = 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}`;
|
|
7735
7735
|
|
|
7736
7736
|
/**
|
|
7737
7737
|
* @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`
|
|
@@ -7745,7 +7745,7 @@
|
|
|
7745
7745
|
`;
|
|
7746
7746
|
}
|
|
7747
7747
|
}
|
|
7748
|
-
SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$
|
|
7748
|
+
SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$18, css_248z$19];
|
|
7749
7749
|
__decorate([
|
|
7750
7750
|
property({ type: String, reflect: true })
|
|
7751
7751
|
], SgdsAlertLink.prototype, "href", void 0);
|
|
@@ -7753,7 +7753,7 @@
|
|
|
7753
7753
|
property()
|
|
7754
7754
|
], SgdsAlertLink.prototype, "target", void 0);
|
|
7755
7755
|
|
|
7756
|
-
var css_248z$
|
|
7756
|
+
var css_248z$17 = 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}`;
|
|
7757
7757
|
|
|
7758
7758
|
var top = 'top';
|
|
7759
7759
|
var bottom = 'bottom';
|
|
@@ -11859,7 +11859,7 @@
|
|
|
11859
11859
|
*/
|
|
11860
11860
|
const ref = directive(RefDirective);
|
|
11861
11861
|
|
|
11862
|
-
var css_248z$
|
|
11862
|
+
var css_248z$16 = 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}`;
|
|
11863
11863
|
|
|
11864
11864
|
/**
|
|
11865
11865
|
* @summary Tooltips display more information when users hover over, focus on, or interact with an element.
|
|
@@ -11952,7 +11952,7 @@
|
|
|
11952
11952
|
`;
|
|
11953
11953
|
}
|
|
11954
11954
|
}
|
|
11955
|
-
SgdsTooltip.styles = [...SgdsElement.styles, css_248z$
|
|
11955
|
+
SgdsTooltip.styles = [...SgdsElement.styles, css_248z$16];
|
|
11956
11956
|
__decorate([
|
|
11957
11957
|
property({ type: String })
|
|
11958
11958
|
], SgdsTooltip.prototype, "content", void 0);
|
|
@@ -12140,7 +12140,7 @@
|
|
|
12140
12140
|
: nothing;
|
|
12141
12141
|
}
|
|
12142
12142
|
}
|
|
12143
|
-
SgdsBadge.styles = [...SgdsElement.styles, css_248z$
|
|
12143
|
+
SgdsBadge.styles = [...SgdsElement.styles, css_248z$17];
|
|
12144
12144
|
/**@internal */
|
|
12145
12145
|
SgdsBadge.dependencies = {
|
|
12146
12146
|
"sgds-close-button": SgdsCloseButton,
|
|
@@ -12174,7 +12174,7 @@
|
|
|
12174
12174
|
watch("text")
|
|
12175
12175
|
], SgdsBadge.prototype, "_handleTruncation", null);
|
|
12176
12176
|
|
|
12177
|
-
var css_248z$
|
|
12177
|
+
var css_248z$15 = 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}`;
|
|
12178
12178
|
|
|
12179
12179
|
/**
|
|
12180
12180
|
* --------------------------------------------------------------------------
|
|
@@ -12696,6 +12696,7 @@
|
|
|
12696
12696
|
//working
|
|
12697
12697
|
this.dropdownConfig = {
|
|
12698
12698
|
placement: "bottom-start",
|
|
12699
|
+
strategy: "fixed",
|
|
12699
12700
|
modifiers: !this.noFlip
|
|
12700
12701
|
? this.modifierOpt
|
|
12701
12702
|
: [
|
|
@@ -12793,7 +12794,7 @@
|
|
|
12793
12794
|
state()
|
|
12794
12795
|
], DropdownElement.prototype, "dropdownConfig", void 0);
|
|
12795
12796
|
__decorate([
|
|
12796
|
-
property()
|
|
12797
|
+
property({ type: Array })
|
|
12797
12798
|
], DropdownElement.prototype, "modifierOpt", void 0);
|
|
12798
12799
|
__decorate([
|
|
12799
12800
|
property({ type: Boolean, reflect: true })
|
|
@@ -12947,9 +12948,9 @@
|
|
|
12947
12948
|
state()
|
|
12948
12949
|
], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
|
|
12949
12950
|
|
|
12950
|
-
var css_248z$
|
|
12951
|
+
var css_248z$14 = 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%}`;
|
|
12951
12952
|
|
|
12952
|
-
var css_248z$
|
|
12953
|
+
var css_248z$13 = css`.dropdown{display:flex;height:inherit;position:relative}`;
|
|
12953
12954
|
|
|
12954
12955
|
/**
|
|
12955
12956
|
* @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.
|
|
@@ -13028,7 +13029,7 @@
|
|
|
13028
13029
|
`;
|
|
13029
13030
|
}
|
|
13030
13031
|
}
|
|
13031
|
-
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$
|
|
13032
|
+
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$13, css_248z$14];
|
|
13032
13033
|
__decorate([
|
|
13033
13034
|
property({ type: Boolean, reflect: true, state: false })
|
|
13034
13035
|
], SgdsDropdown.prototype, "noFlip", void 0);
|
|
@@ -13045,7 +13046,7 @@
|
|
|
13045
13046
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
13046
13047
|
], SgdsDropdown.prototype, "_handleDisabled", null);
|
|
13047
13048
|
|
|
13048
|
-
var css_248z
|
|
13049
|
+
var css_248z$12 = 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)}`;
|
|
13049
13050
|
|
|
13050
13051
|
/**
|
|
13051
13052
|
* @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
|
|
@@ -13086,7 +13087,7 @@
|
|
|
13086
13087
|
`;
|
|
13087
13088
|
}
|
|
13088
13089
|
}
|
|
13089
|
-
SgdsDropdownItem.styles = [css_248z$
|
|
13090
|
+
SgdsDropdownItem.styles = [css_248z$13, css_248z$12];
|
|
13090
13091
|
SgdsDropdownItem.dependencies = {
|
|
13091
13092
|
"sgds-icon": SgdsIcon
|
|
13092
13093
|
};
|
|
@@ -13121,7 +13122,7 @@
|
|
|
13121
13122
|
`;
|
|
13122
13123
|
}
|
|
13123
13124
|
}
|
|
13124
|
-
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z$
|
|
13125
|
+
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z$15];
|
|
13125
13126
|
/** @internal */
|
|
13126
13127
|
SgdsOverflowMenu.dependencies = {
|
|
13127
13128
|
"sgds-dropdown": SgdsDropdown,
|
|
@@ -13132,7 +13133,7 @@
|
|
|
13132
13133
|
property({ type: String, reflect: true })
|
|
13133
13134
|
], SgdsOverflowMenu.prototype, "size", void 0);
|
|
13134
13135
|
|
|
13135
|
-
var css_248z$
|
|
13136
|
+
var css_248z$11 = css`.breadcrumb{display:flex;gap:var(--sgds-gap-xs)}`;
|
|
13136
13137
|
|
|
13137
13138
|
/**
|
|
13138
13139
|
* @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.
|
|
@@ -13203,7 +13204,7 @@
|
|
|
13203
13204
|
`;
|
|
13204
13205
|
}
|
|
13205
13206
|
}
|
|
13206
|
-
SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$
|
|
13207
|
+
SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$11];
|
|
13207
13208
|
SgdsBreadcrumb.dependencies = {
|
|
13208
13209
|
"sgds-overflow-menu": SgdsOverflowMenu
|
|
13209
13210
|
};
|
|
@@ -13214,7 +13215,7 @@
|
|
|
13214
13215
|
query("slot")
|
|
13215
13216
|
], SgdsBreadcrumb.prototype, "defaultSlot", void 0);
|
|
13216
13217
|
|
|
13217
|
-
var css_248z$
|
|
13218
|
+
var css_248z$10 = 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)}`;
|
|
13218
13219
|
|
|
13219
13220
|
/**
|
|
13220
13221
|
* @summary Link allows users to click and navigate their way from page to page
|
|
@@ -13246,7 +13247,7 @@
|
|
|
13246
13247
|
return html$1 `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
|
|
13247
13248
|
}
|
|
13248
13249
|
}
|
|
13249
|
-
SgdsLink.styles = [...SgdsElement.styles, css_248z$
|
|
13250
|
+
SgdsLink.styles = [...SgdsElement.styles, css_248z$10];
|
|
13250
13251
|
__decorate([
|
|
13251
13252
|
property({ type: String, reflect: true })
|
|
13252
13253
|
], SgdsLink.prototype, "size", void 0);
|
|
@@ -13254,7 +13255,7 @@
|
|
|
13254
13255
|
property({ type: String, reflect: true })
|
|
13255
13256
|
], SgdsLink.prototype, "variant", void 0);
|
|
13256
13257
|
|
|
13257
|
-
var css_248z
|
|
13258
|
+
var css_248z$$ = 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}`;
|
|
13258
13259
|
|
|
13259
13260
|
/**
|
|
13260
13261
|
* @summary Breadcrumb Item are navigational links used in Breadcrumb component
|
|
@@ -13283,12 +13284,12 @@
|
|
|
13283
13284
|
`;
|
|
13284
13285
|
}
|
|
13285
13286
|
}
|
|
13286
|
-
SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z
|
|
13287
|
+
SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z$$];
|
|
13287
13288
|
__decorate([
|
|
13288
13289
|
property({ type: Boolean, reflect: true })
|
|
13289
13290
|
], SgdsBreadcrumbItem.prototype, "active", void 0);
|
|
13290
13291
|
|
|
13291
|
-
var css_248z$
|
|
13292
|
+
var css_248z$_ = 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)}`;
|
|
13292
13293
|
|
|
13293
13294
|
class ButtonElement extends SgdsElement {
|
|
13294
13295
|
constructor() {
|
|
@@ -13330,7 +13331,7 @@
|
|
|
13330
13331
|
}
|
|
13331
13332
|
}
|
|
13332
13333
|
}
|
|
13333
|
-
ButtonElement.styles = [...SgdsElement.styles, css_248z$
|
|
13334
|
+
ButtonElement.styles = [...SgdsElement.styles, css_248z$_];
|
|
13334
13335
|
__decorate([
|
|
13335
13336
|
query(".btn")
|
|
13336
13337
|
], ButtonElement.prototype, "button", void 0);
|
|
@@ -13416,7 +13417,7 @@
|
|
|
13416
13417
|
}
|
|
13417
13418
|
}
|
|
13418
13419
|
|
|
13419
|
-
var css_248z$
|
|
13420
|
+
var css_248z$Z = 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)}`;
|
|
13420
13421
|
|
|
13421
13422
|
/**
|
|
13422
13423
|
* @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
|
@@ -13517,7 +13518,7 @@
|
|
|
13517
13518
|
`;
|
|
13518
13519
|
}
|
|
13519
13520
|
}
|
|
13520
|
-
SgdsButton.styles = [...ButtonElement.styles, css_248z$
|
|
13521
|
+
SgdsButton.styles = [...ButtonElement.styles, css_248z$18, css_248z$Z];
|
|
13521
13522
|
__decorate([
|
|
13522
13523
|
state()
|
|
13523
13524
|
], SgdsButton.prototype, "_hasLeftIcon", void 0);
|
|
@@ -13546,55 +13547,92 @@
|
|
|
13546
13547
|
property({ type: Boolean, reflect: true })
|
|
13547
13548
|
], SgdsButton.prototype, "fullWidth", void 0);
|
|
13548
13549
|
|
|
13549
|
-
var css_248z$
|
|
13550
|
+
var css_248z$Y = 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)}`;
|
|
13550
13551
|
|
|
13551
|
-
var css_248z$
|
|
13552
|
+
var css_248z$X = 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}`;
|
|
13552
13553
|
|
|
13553
|
-
var css_248z$
|
|
13554
|
+
var css_248z$W = 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}`;
|
|
13554
13555
|
|
|
13555
|
-
var css_248z$
|
|
13556
|
+
var css_248z$V = 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}`;
|
|
13556
13557
|
|
|
13557
|
-
var css_248z$
|
|
13558
|
+
var css_248z$U = 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}`;
|
|
13558
13559
|
|
|
13559
|
-
var css_248z$
|
|
13560
|
+
var css_248z$T = css`p{margin-bottom:1.5rem;margin-top:0}`;
|
|
13560
13561
|
|
|
13561
13562
|
class CardElement extends SgdsElement {
|
|
13562
13563
|
constructor() {
|
|
13563
13564
|
super(...arguments);
|
|
13565
|
+
/** Extends the link passed in slot[name="link"] to the entire card */
|
|
13566
|
+
this.stretchedLink = false;
|
|
13567
|
+
/** Disables the card */
|
|
13568
|
+
this.disabled = false;
|
|
13564
13569
|
/** When true, hides the default border of the card. */
|
|
13565
13570
|
this.hideBorder = false;
|
|
13566
13571
|
/** When true, applies a tinted background color to the card. */
|
|
13567
13572
|
this.tinted = false;
|
|
13573
|
+
/** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
|
|
13574
|
+
this.orientation = "vertical";
|
|
13575
|
+
}
|
|
13576
|
+
handleTitleSlotChange(e) {
|
|
13577
|
+
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13578
|
+
if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
|
|
13579
|
+
const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
|
|
13580
|
+
hyperlink.removeAttribute("href");
|
|
13581
|
+
}
|
|
13582
|
+
return;
|
|
13583
|
+
}
|
|
13584
|
+
handleLinkSlotChange(e) {
|
|
13585
|
+
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13586
|
+
if (childNodes.length > 1) {
|
|
13587
|
+
return console.error("Multiple elements passed into SgdsCard's link slot");
|
|
13588
|
+
}
|
|
13589
|
+
if (!this.stretchedLink)
|
|
13590
|
+
return;
|
|
13591
|
+
if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
|
|
13592
|
+
const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
|
|
13593
|
+
this.card.setAttribute("href", hyperlink.href);
|
|
13594
|
+
const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
|
|
13595
|
+
linkSlot.style.display = "none";
|
|
13596
|
+
}
|
|
13568
13597
|
}
|
|
13569
13598
|
}
|
|
13570
|
-
CardElement.styles = [...SgdsElement.styles, css_248z$
|
|
13599
|
+
CardElement.styles = [...SgdsElement.styles, css_248z$X, css_248z$W, css_248z$V, css_248z$U, css_248z$T, css_248z$Y];
|
|
13600
|
+
__decorate([
|
|
13601
|
+
query("a.card")
|
|
13602
|
+
], CardElement.prototype, "card", void 0);
|
|
13603
|
+
__decorate([
|
|
13604
|
+
property({ type: Boolean, reflect: true })
|
|
13605
|
+
], CardElement.prototype, "stretchedLink", void 0);
|
|
13606
|
+
__decorate([
|
|
13607
|
+
property({ type: Boolean, reflect: true })
|
|
13608
|
+
], CardElement.prototype, "disabled", void 0);
|
|
13571
13609
|
__decorate([
|
|
13572
13610
|
property({ type: Boolean, reflect: true })
|
|
13573
13611
|
], CardElement.prototype, "hideBorder", void 0);
|
|
13574
13612
|
__decorate([
|
|
13575
13613
|
property({ type: Boolean, reflect: true })
|
|
13576
13614
|
], CardElement.prototype, "tinted", void 0);
|
|
13615
|
+
__decorate([
|
|
13616
|
+
property({ type: String, reflect: true })
|
|
13617
|
+
], CardElement.prototype, "orientation", void 0);
|
|
13577
13618
|
|
|
13578
|
-
var css_248z$
|
|
13619
|
+
var css_248z$S = 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}`;
|
|
13579
13620
|
|
|
13580
13621
|
/**
|
|
13581
13622
|
* @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
13623
|
+
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
13624
|
+
* @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.
|
|
13582
13625
|
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
13583
13626
|
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
13584
13627
|
* @slot subtitle - The subtitle of the card
|
|
13585
13628
|
* @slot title - The title of the card
|
|
13586
13629
|
* @slot description - The paragrapher text of the card
|
|
13630
|
+
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
13587
13631
|
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
13588
13632
|
*/
|
|
13589
13633
|
class SgdsCard extends CardElement {
|
|
13590
13634
|
constructor() {
|
|
13591
13635
|
super(...arguments);
|
|
13592
|
-
/** Extends the link passed in slot[name="link"] to the entire card */
|
|
13593
|
-
this.stretchedLink = false;
|
|
13594
|
-
/** Disables the card */
|
|
13595
|
-
this.disabled = false;
|
|
13596
|
-
/** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
|
|
13597
|
-
this.orientation = "vertical";
|
|
13598
13636
|
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
13599
13637
|
this.imagePosition = "before";
|
|
13600
13638
|
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
@@ -13606,35 +13644,8 @@
|
|
|
13606
13644
|
icon.style.display = "none";
|
|
13607
13645
|
}
|
|
13608
13646
|
if (this._iconNode.length === 0) {
|
|
13609
|
-
const
|
|
13610
|
-
|
|
13611
|
-
}
|
|
13612
|
-
if (this.disabled && this._linkNode.length > 0) {
|
|
13613
|
-
const hyperlink = this._linkNode[0].querySelector("a");
|
|
13614
|
-
hyperlink.setAttribute("disabled", "true");
|
|
13615
|
-
hyperlink.removeAttribute("href");
|
|
13616
|
-
}
|
|
13617
|
-
}
|
|
13618
|
-
handleTitleSlotChange(e) {
|
|
13619
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13620
|
-
if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
|
|
13621
|
-
const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
|
|
13622
|
-
hyperlink.removeAttribute("href");
|
|
13623
|
-
}
|
|
13624
|
-
return;
|
|
13625
|
-
}
|
|
13626
|
-
handleLinkSlotChange(e) {
|
|
13627
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13628
|
-
if (childNodes.length > 1) {
|
|
13629
|
-
return console.error("Multiple elements passed into SgdsCard's link slot");
|
|
13630
|
-
}
|
|
13631
|
-
if (!this.stretchedLink)
|
|
13632
|
-
return;
|
|
13633
|
-
if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
|
|
13634
|
-
const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
|
|
13635
|
-
this.card.setAttribute("href", hyperlink.href);
|
|
13636
|
-
const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
|
|
13637
|
-
linkSlot.style.display = "none";
|
|
13647
|
+
const media = this.shadowRoot.querySelector(".card-media");
|
|
13648
|
+
media.style.display = "none";
|
|
13638
13649
|
}
|
|
13639
13650
|
}
|
|
13640
13651
|
handleImgSlotChange(e) {
|
|
@@ -13653,48 +13664,39 @@
|
|
|
13653
13664
|
})}"
|
|
13654
13665
|
tabindex=${cardTabIndex}
|
|
13655
13666
|
>
|
|
13667
|
+
<div class="card-tinted-bg"></div>
|
|
13668
|
+
<slot name="menu"></slot>
|
|
13656
13669
|
<div class="card-image">
|
|
13657
13670
|
<slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
|
|
13658
13671
|
</div>
|
|
13659
|
-
<div class="card-
|
|
13672
|
+
<div class="card-media">
|
|
13660
13673
|
<slot name="icon"></slot>
|
|
13661
13674
|
</div>
|
|
13662
13675
|
<div class="card-body">
|
|
13663
|
-
<div class="card-header">
|
|
13664
|
-
<
|
|
13665
|
-
|
|
13676
|
+
<div class="card-header-container">
|
|
13677
|
+
<div class="card-header">
|
|
13678
|
+
<slot name="subtitle"></slot>
|
|
13679
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
13680
|
+
</div>
|
|
13681
|
+
<slot></slot>
|
|
13666
13682
|
</div>
|
|
13667
13683
|
<p class="card-text">
|
|
13668
13684
|
<slot name="description"></slot>
|
|
13669
13685
|
</p>
|
|
13686
|
+
<slot name="lower"></slot>
|
|
13670
13687
|
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
13671
13688
|
</div>
|
|
13672
13689
|
</${tag}>
|
|
13673
13690
|
`;
|
|
13674
13691
|
}
|
|
13675
13692
|
}
|
|
13676
|
-
SgdsCard.styles = [...CardElement.styles, css_248z$
|
|
13677
|
-
__decorate([
|
|
13678
|
-
query("a.card")
|
|
13679
|
-
], SgdsCard.prototype, "card", void 0);
|
|
13693
|
+
SgdsCard.styles = [...CardElement.styles, css_248z$S];
|
|
13680
13694
|
__decorate([
|
|
13681
13695
|
queryAssignedNodes({ slot: "image", flatten: true })
|
|
13682
13696
|
], SgdsCard.prototype, "_imageNode", void 0);
|
|
13683
13697
|
__decorate([
|
|
13684
13698
|
queryAssignedNodes({ slot: "icon", flatten: true })
|
|
13685
13699
|
], SgdsCard.prototype, "_iconNode", void 0);
|
|
13686
|
-
__decorate([
|
|
13687
|
-
queryAssignedNodes({ slot: "link", flatten: true })
|
|
13688
|
-
], SgdsCard.prototype, "_linkNode", void 0);
|
|
13689
|
-
__decorate([
|
|
13690
|
-
property({ type: Boolean, reflect: true })
|
|
13691
|
-
], SgdsCard.prototype, "stretchedLink", void 0);
|
|
13692
|
-
__decorate([
|
|
13693
|
-
property({ type: Boolean, reflect: true })
|
|
13694
|
-
], SgdsCard.prototype, "disabled", void 0);
|
|
13695
|
-
__decorate([
|
|
13696
|
-
property({ type: String, reflect: true })
|
|
13697
|
-
], SgdsCard.prototype, "orientation", void 0);
|
|
13698
13700
|
__decorate([
|
|
13699
13701
|
property({ type: String, reflect: true })
|
|
13700
13702
|
], SgdsCard.prototype, "imagePosition", void 0);
|
|
@@ -13776,13 +13778,13 @@
|
|
|
13776
13778
|
*/
|
|
13777
13779
|
const live = directive(LiveDirective);
|
|
13778
13780
|
|
|
13779
|
-
var css_248z$
|
|
13781
|
+
var css_248z$R = 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)}`;
|
|
13780
13782
|
|
|
13781
|
-
var css_248z$
|
|
13783
|
+
var css_248z$Q = 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)}`;
|
|
13782
13784
|
|
|
13783
|
-
var css_248z$
|
|
13785
|
+
var css_248z$P = 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}`;
|
|
13784
13786
|
|
|
13785
|
-
var css_248z$
|
|
13787
|
+
var css_248z$O = 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)}`;
|
|
13786
13788
|
|
|
13787
13789
|
class FormControlElement extends SgdsElement {
|
|
13788
13790
|
constructor() {
|
|
@@ -13809,7 +13811,7 @@
|
|
|
13809
13811
|
}
|
|
13810
13812
|
}
|
|
13811
13813
|
}
|
|
13812
|
-
FormControlElement.styles = [...SgdsElement.styles, css_248z$
|
|
13814
|
+
FormControlElement.styles = [...SgdsElement.styles, css_248z$R, css_248z$Q, css_248z$P, css_248z$O];
|
|
13813
13815
|
__decorate([
|
|
13814
13816
|
property({ reflect: true })
|
|
13815
13817
|
], FormControlElement.prototype, "label", void 0);
|
|
@@ -14078,7 +14080,7 @@
|
|
|
14078
14080
|
return ToBeValidatedElement;
|
|
14079
14081
|
};
|
|
14080
14082
|
|
|
14081
|
-
var css_248z$
|
|
14083
|
+
var css_248z$N = 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%}`;
|
|
14082
14084
|
|
|
14083
14085
|
/**
|
|
14084
14086
|
* @summary Checkbox component is used when you require users to select multiple items from a list.
|
|
@@ -14242,7 +14244,7 @@
|
|
|
14242
14244
|
`;
|
|
14243
14245
|
}
|
|
14244
14246
|
}
|
|
14245
|
-
SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$
|
|
14247
|
+
SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$N];
|
|
14246
14248
|
__decorate([
|
|
14247
14249
|
property({ type: String, reflect: true })
|
|
14248
14250
|
], SgdsCheckbox.prototype, "value", void 0);
|
|
@@ -14274,7 +14276,7 @@
|
|
|
14274
14276
|
watch("_isTouched", { waitUntilFirstUpdate: true })
|
|
14275
14277
|
], SgdsCheckbox.prototype, "_handleIsTouched", null);
|
|
14276
14278
|
|
|
14277
|
-
var css_248z$
|
|
14279
|
+
var css_248z$M = 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}`;
|
|
14278
14280
|
|
|
14279
14281
|
/**
|
|
14280
14282
|
* @summary CheckboxGroup is a form component for multiselection of checkboxes.
|
|
@@ -14472,7 +14474,7 @@
|
|
|
14472
14474
|
`;
|
|
14473
14475
|
}
|
|
14474
14476
|
}
|
|
14475
|
-
SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z$
|
|
14477
|
+
SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z$M];
|
|
14476
14478
|
__decorate([
|
|
14477
14479
|
property({ reflect: true })
|
|
14478
14480
|
], SgdsCheckboxGroup.prototype, "label", void 0);
|
|
@@ -14516,6 +14518,19 @@
|
|
|
14516
14518
|
watch("invalid", { waitUntilFirstUpdate: true })
|
|
14517
14519
|
], SgdsCheckboxGroup.prototype, "_updateInvalid", null);
|
|
14518
14520
|
|
|
14521
|
+
const referenceTargetWidth = {
|
|
14522
|
+
name: "sameWidthAsTarget",
|
|
14523
|
+
enabled: true,
|
|
14524
|
+
phase: "beforeWrite",
|
|
14525
|
+
requires: ["computeStyles"],
|
|
14526
|
+
fn: ({ state }) => {
|
|
14527
|
+
state.styles.popper.width = `${state.rects.reference.width}px`;
|
|
14528
|
+
},
|
|
14529
|
+
effect: ({ state }) => {
|
|
14530
|
+
state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
|
|
14531
|
+
}
|
|
14532
|
+
};
|
|
14533
|
+
|
|
14519
14534
|
class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
|
|
14520
14535
|
constructor() {
|
|
14521
14536
|
super();
|
|
@@ -14567,7 +14582,8 @@
|
|
|
14567
14582
|
options: {
|
|
14568
14583
|
offset: [0, 8]
|
|
14569
14584
|
}
|
|
14570
|
-
}
|
|
14585
|
+
},
|
|
14586
|
+
referenceTargetWidth
|
|
14571
14587
|
];
|
|
14572
14588
|
}
|
|
14573
14589
|
connectedCallback() {
|
|
@@ -14647,7 +14663,7 @@
|
|
|
14647
14663
|
}
|
|
14648
14664
|
}
|
|
14649
14665
|
}
|
|
14650
|
-
SelectElement.styles = [...DropdownListElement.styles, css_248z$
|
|
14666
|
+
SelectElement.styles = [...DropdownListElement.styles, css_248z$14, css_248z$Q, css_248z$R];
|
|
14651
14667
|
__decorate([
|
|
14652
14668
|
property({ reflect: true })
|
|
14653
14669
|
], SelectElement.prototype, "label", void 0);
|
|
@@ -14703,7 +14719,7 @@
|
|
|
14703
14719
|
queryAsync("input.form-control")
|
|
14704
14720
|
], SelectElement.prototype, "_input", void 0);
|
|
14705
14721
|
|
|
14706
|
-
var css_248z$
|
|
14722
|
+
var css_248z$L = 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}`;
|
|
14707
14723
|
|
|
14708
14724
|
class ComboBoxItem extends SgdsElement {
|
|
14709
14725
|
constructor() {
|
|
@@ -14771,7 +14787,7 @@
|
|
|
14771
14787
|
"sgds-icon": SgdsIcon,
|
|
14772
14788
|
"sgds-checkbox": SgdsCheckbox
|
|
14773
14789
|
};
|
|
14774
|
-
ComboBoxItem.styles = [css_248z$
|
|
14790
|
+
ComboBoxItem.styles = [css_248z$L];
|
|
14775
14791
|
__decorate([
|
|
14776
14792
|
property({ type: Boolean, reflect: true })
|
|
14777
14793
|
], ComboBoxItem.prototype, "active", void 0);
|
|
@@ -14782,7 +14798,7 @@
|
|
|
14782
14798
|
property({ type: Boolean, reflect: true })
|
|
14783
14799
|
], ComboBoxItem.prototype, "checkbox", void 0);
|
|
14784
14800
|
|
|
14785
|
-
var css_248z$
|
|
14801
|
+
var css_248z$K = 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)}`;
|
|
14786
14802
|
|
|
14787
14803
|
/**
|
|
14788
14804
|
* @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions
|
|
@@ -15057,7 +15073,7 @@
|
|
|
15057
15073
|
`;
|
|
15058
15074
|
}
|
|
15059
15075
|
}
|
|
15060
|
-
SgdsComboBox.styles = [...SelectElement.styles, css_248z$
|
|
15076
|
+
SgdsComboBox.styles = [...SelectElement.styles, css_248z$K];
|
|
15061
15077
|
/** @internal */
|
|
15062
15078
|
SgdsComboBox.dependencies = {
|
|
15063
15079
|
"sgds-combo-box-item": ComboBoxItem,
|
|
@@ -20771,7 +20787,7 @@
|
|
|
20771
20787
|
return newDate;
|
|
20772
20788
|
};
|
|
20773
20789
|
|
|
20774
|
-
var css_248z$
|
|
20790
|
+
var css_248z$J = 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)}`;
|
|
20775
20791
|
|
|
20776
20792
|
const TODAY_DATE = new Date();
|
|
20777
20793
|
const keyPressAction = {
|
|
@@ -21167,7 +21183,7 @@
|
|
|
21167
21183
|
return html$1 ` <div class="datepicker-body">${viewContent}</div> `;
|
|
21168
21184
|
}
|
|
21169
21185
|
}
|
|
21170
|
-
DatepickerCalendar.styles = [css_248z$
|
|
21186
|
+
DatepickerCalendar.styles = [css_248z$J];
|
|
21171
21187
|
/** @internal */
|
|
21172
21188
|
DatepickerCalendar.DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
21173
21189
|
/** @internal */
|
|
@@ -21215,7 +21231,7 @@
|
|
|
21215
21231
|
watch("displayDate")
|
|
21216
21232
|
], DatepickerCalendar.prototype, "_updateFocusedDate", null);
|
|
21217
21233
|
|
|
21218
|
-
var css_248z$
|
|
21234
|
+
var css_248z$I = 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)}`;
|
|
21219
21235
|
|
|
21220
21236
|
/**
|
|
21221
21237
|
* @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.
|
|
@@ -21262,7 +21278,7 @@
|
|
|
21262
21278
|
`;
|
|
21263
21279
|
}
|
|
21264
21280
|
}
|
|
21265
|
-
SgdsIconButton.styles = [...ButtonElement.styles, css_248z$
|
|
21281
|
+
SgdsIconButton.styles = [...ButtonElement.styles, css_248z$I];
|
|
21266
21282
|
/** @internal */
|
|
21267
21283
|
SgdsIconButton.dependencies = {
|
|
21268
21284
|
"sgds-icon": SgdsIcon
|
|
@@ -21271,7 +21287,7 @@
|
|
|
21271
21287
|
property({ type: String, reflect: true })
|
|
21272
21288
|
], SgdsIconButton.prototype, "name", void 0);
|
|
21273
21289
|
|
|
21274
|
-
var css_248z$
|
|
21290
|
+
var css_248z$H = css`.datepicker-header{display:flex;gap:var(--sgds-form-gap-md)}sgds-button{--btn-font-weight:var(--sgds-font-weight-semibold)}`;
|
|
21275
21291
|
|
|
21276
21292
|
class DatepickerHeader extends SgdsElement {
|
|
21277
21293
|
constructor() {
|
|
@@ -21447,7 +21463,7 @@
|
|
|
21447
21463
|
`;
|
|
21448
21464
|
}
|
|
21449
21465
|
}
|
|
21450
|
-
DatepickerHeader.styles = [css_248z$
|
|
21466
|
+
DatepickerHeader.styles = [css_248z$H];
|
|
21451
21467
|
/** @internal */
|
|
21452
21468
|
DatepickerHeader.dependencies = {
|
|
21453
21469
|
"sgds-icon": SgdsIcon,
|
|
@@ -25088,7 +25104,7 @@
|
|
|
25088
25104
|
globalThis.IMask = IMask;
|
|
25089
25105
|
} catch {}
|
|
25090
25106
|
|
|
25091
|
-
var css_248z$
|
|
25107
|
+
var css_248z$G = 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}}
|
|
25092
25108
|
|
|
25093
25109
|
/*! 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}`;
|
|
25094
25110
|
|
|
@@ -25120,7 +25136,7 @@
|
|
|
25120
25136
|
`;
|
|
25121
25137
|
}
|
|
25122
25138
|
}
|
|
25123
|
-
SgdsSpinner.styles = [...SgdsElement.styles, css_248z$
|
|
25139
|
+
SgdsSpinner.styles = [...SgdsElement.styles, css_248z$X, css_248z$G];
|
|
25124
25140
|
__decorate([
|
|
25125
25141
|
property({ type: String, reflect: true })
|
|
25126
25142
|
], SgdsSpinner.prototype, "variant", void 0);
|
|
@@ -25131,7 +25147,7 @@
|
|
|
25131
25147
|
property({ reflect: true, type: String })
|
|
25132
25148
|
], SgdsSpinner.prototype, "label", void 0);
|
|
25133
25149
|
|
|
25134
|
-
var css_248z$
|
|
25150
|
+
var css_248z$F = 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)}`;
|
|
25135
25151
|
|
|
25136
25152
|
/**
|
|
25137
25153
|
* @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
|
|
@@ -25356,7 +25372,7 @@
|
|
|
25356
25372
|
`;
|
|
25357
25373
|
}
|
|
25358
25374
|
}
|
|
25359
|
-
SgdsInput.styles = [...FormControlElement.styles, css_248z$
|
|
25375
|
+
SgdsInput.styles = [...FormControlElement.styles, css_248z$O, css_248z$F];
|
|
25360
25376
|
/** @internal */
|
|
25361
25377
|
SgdsInput.dependencies = {
|
|
25362
25378
|
"sgds-spinner": SgdsSpinner,
|
|
@@ -25432,7 +25448,7 @@
|
|
|
25432
25448
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
25433
25449
|
], SgdsInput.prototype, "_handleDisabledChange", null);
|
|
25434
25450
|
|
|
25435
|
-
var css_248z$
|
|
25451
|
+
var css_248z$E = 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}`;
|
|
25436
25452
|
|
|
25437
25453
|
class DatepickerInput extends SgdsInput {
|
|
25438
25454
|
constructor() {
|
|
@@ -25559,7 +25575,7 @@
|
|
|
25559
25575
|
`;
|
|
25560
25576
|
}
|
|
25561
25577
|
}
|
|
25562
|
-
DatepickerInput.styles = [...SgdsInput.styles, css_248z$
|
|
25578
|
+
DatepickerInput.styles = [...SgdsInput.styles, css_248z$E];
|
|
25563
25579
|
__decorate([
|
|
25564
25580
|
property({ type: String })
|
|
25565
25581
|
], DatepickerInput.prototype, "minDate", void 0);
|
|
@@ -25573,7 +25589,7 @@
|
|
|
25573
25589
|
queryAsync("input")
|
|
25574
25590
|
], DatepickerInput.prototype, "shadowInput", void 0);
|
|
25575
25591
|
|
|
25576
|
-
var css_248z$
|
|
25592
|
+
var css_248z$D = 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}`;
|
|
25577
25593
|
|
|
25578
25594
|
/**
|
|
25579
25595
|
* @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
|
|
@@ -25586,7 +25602,7 @@
|
|
|
25586
25602
|
*/
|
|
25587
25603
|
class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) {
|
|
25588
25604
|
constructor() {
|
|
25589
|
-
super(
|
|
25605
|
+
super();
|
|
25590
25606
|
/** When true, adds required attribute to input element */
|
|
25591
25607
|
this.required = false;
|
|
25592
25608
|
/** When true, adds disabled attribute to input and button element */
|
|
@@ -25597,10 +25613,10 @@
|
|
|
25597
25613
|
*/
|
|
25598
25614
|
this.value = "";
|
|
25599
25615
|
/**
|
|
25600
|
-
*
|
|
25616
|
+
* Deprecated since v3.3.0 in favour of `value`.
|
|
25601
25617
|
* The initial value of DatePicker on first load for single &
|
|
25602
25618
|
* range mode as array of string. eg.'["22/12/2023"]' for single &
|
|
25603
|
-
* '["22/12/2023","25/12/2023"]' for range respectively
|
|
25619
|
+
* '["22/12/2023","25/12/2023"]' for range respectively @deprecated
|
|
25604
25620
|
* */
|
|
25605
25621
|
this.initialValue = [];
|
|
25606
25622
|
this.dateFormat = "DD/MM/YYYY";
|
|
@@ -25656,6 +25672,18 @@
|
|
|
25656
25672
|
months: "Choose month",
|
|
25657
25673
|
years: "Choose year"
|
|
25658
25674
|
};
|
|
25675
|
+
this.modifierOpt = [
|
|
25676
|
+
{
|
|
25677
|
+
name: "offset",
|
|
25678
|
+
options: {
|
|
25679
|
+
/**
|
|
25680
|
+
* size of calendar `--sgds-dimension-320` offset with
|
|
25681
|
+
* size of icon button `--sgds-dimension-48`
|
|
25682
|
+
*/
|
|
25683
|
+
offset: [-320 + 48, 8]
|
|
25684
|
+
}
|
|
25685
|
+
}
|
|
25686
|
+
];
|
|
25659
25687
|
}
|
|
25660
25688
|
isValueEmpty() {
|
|
25661
25689
|
return this.value === "" || this.value === "DD/MM/YYYY" || this.value === "DD/MM/YYYY - DD/MM/YYYY";
|
|
@@ -25687,14 +25715,6 @@
|
|
|
25687
25715
|
}
|
|
25688
25716
|
async connectedCallback() {
|
|
25689
25717
|
super.connectedCallback();
|
|
25690
|
-
this.modifierOpt = [
|
|
25691
|
-
{
|
|
25692
|
-
name: "offset",
|
|
25693
|
-
options: {
|
|
25694
|
-
offset: [0, 8]
|
|
25695
|
-
}
|
|
25696
|
-
}
|
|
25697
|
-
];
|
|
25698
25718
|
this.addEventListener("sgds-view", this._handleViewChanged);
|
|
25699
25719
|
this.addEventListener("sgds-change-calendar", this._handleDateChanged);
|
|
25700
25720
|
this.addEventListener("sgds-update-focus", this._handleFocusDateChanged);
|
|
@@ -25959,7 +25979,7 @@
|
|
|
25959
25979
|
`;
|
|
25960
25980
|
}
|
|
25961
25981
|
}
|
|
25962
|
-
SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$
|
|
25982
|
+
SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$14, css_248z$D];
|
|
25963
25983
|
/**@internal */
|
|
25964
25984
|
SgdsDatepicker.dependencies = {
|
|
25965
25985
|
"sgds-datepicker-input": DatepickerInput,
|
|
@@ -26044,7 +26064,7 @@
|
|
|
26044
26064
|
watch("value", { waitUntilFirstUpdate: true })
|
|
26045
26065
|
], SgdsDatepicker.prototype, "_handleValueChange", null);
|
|
26046
26066
|
|
|
26047
|
-
var css_248z$
|
|
26067
|
+
var css_248z$C = 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}`;
|
|
26048
26068
|
|
|
26049
26069
|
let id$2 = 0;
|
|
26050
26070
|
/**
|
|
@@ -26087,7 +26107,7 @@
|
|
|
26087
26107
|
`;
|
|
26088
26108
|
}
|
|
26089
26109
|
}
|
|
26090
|
-
SgdsDescriptionList.styles = [...SgdsElement.styles, css_248z$
|
|
26110
|
+
SgdsDescriptionList.styles = [...SgdsElement.styles, css_248z$C];
|
|
26091
26111
|
__decorate([
|
|
26092
26112
|
property({ type: Boolean, reflect: true })
|
|
26093
26113
|
], SgdsDescriptionList.prototype, "stacked", void 0);
|
|
@@ -26095,7 +26115,7 @@
|
|
|
26095
26115
|
property({ type: Boolean, reflect: true })
|
|
26096
26116
|
], SgdsDescriptionList.prototype, "bordered", void 0);
|
|
26097
26117
|
|
|
26098
|
-
var css_248z$
|
|
26118
|
+
var css_248z$B = 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)}`;
|
|
26099
26119
|
|
|
26100
26120
|
/**
|
|
26101
26121
|
* @summary Description List Group organizes multiple description lists.
|
|
@@ -26181,7 +26201,7 @@
|
|
|
26181
26201
|
`;
|
|
26182
26202
|
}
|
|
26183
26203
|
}
|
|
26184
|
-
SgdsDescriptionListGroup.styles = [...SgdsElement.styles, css_248z$
|
|
26204
|
+
SgdsDescriptionListGroup.styles = [...SgdsElement.styles, css_248z$B];
|
|
26185
26205
|
__decorate([
|
|
26186
26206
|
property({ type: Boolean, reflect: true })
|
|
26187
26207
|
], SgdsDescriptionListGroup.prototype, "bordered", void 0);
|
|
@@ -26192,7 +26212,7 @@
|
|
|
26192
26212
|
queryAssignedElements({ flatten: true })
|
|
26193
26213
|
], SgdsDescriptionListGroup.prototype, "_descriptionLists", void 0);
|
|
26194
26214
|
|
|
26195
|
-
var css_248z$
|
|
26215
|
+
var css_248z$A = 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)}`;
|
|
26196
26216
|
|
|
26197
26217
|
/**
|
|
26198
26218
|
* @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.
|
|
@@ -26211,7 +26231,7 @@
|
|
|
26211
26231
|
this.setAttribute("aria-orientation", this.orientation);
|
|
26212
26232
|
}
|
|
26213
26233
|
}
|
|
26214
|
-
SgdsDivider.styles = [css_248z$
|
|
26234
|
+
SgdsDivider.styles = [css_248z$A];
|
|
26215
26235
|
__decorate([
|
|
26216
26236
|
property({ type: String, reflect: true })
|
|
26217
26237
|
], SgdsDivider.prototype, "orientation", void 0);
|
|
@@ -26238,7 +26258,7 @@
|
|
|
26238
26258
|
}
|
|
26239
26259
|
}
|
|
26240
26260
|
|
|
26241
|
-
var css_248z$
|
|
26261
|
+
var css_248z$z = 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}}`;
|
|
26242
26262
|
|
|
26243
26263
|
/**
|
|
26244
26264
|
* @summary Drawers slide in from a container to expose additional options and information.
|
|
@@ -26457,7 +26477,7 @@
|
|
|
26457
26477
|
`;
|
|
26458
26478
|
}
|
|
26459
26479
|
}
|
|
26460
|
-
SgdsDrawer.styles = [...SgdsElement.styles, css_248z$
|
|
26480
|
+
SgdsDrawer.styles = [...SgdsElement.styles, css_248z$z];
|
|
26461
26481
|
/**@internal */
|
|
26462
26482
|
SgdsDrawer.dependencies = {
|
|
26463
26483
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -26577,7 +26597,7 @@
|
|
|
26577
26597
|
options: { duration: 250 }
|
|
26578
26598
|
});
|
|
26579
26599
|
|
|
26580
|
-
var css_248z$
|
|
26600
|
+
var css_248z$y = 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)}`;
|
|
26581
26601
|
|
|
26582
26602
|
/**
|
|
26583
26603
|
* @summary Allows users to upload files of various sizes and formats
|
|
@@ -26750,7 +26770,7 @@
|
|
|
26750
26770
|
`;
|
|
26751
26771
|
}
|
|
26752
26772
|
}
|
|
26753
|
-
SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$
|
|
26773
|
+
SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$y];
|
|
26754
26774
|
/**@internal */
|
|
26755
26775
|
SgdsFileUpload.dependencies = {
|
|
26756
26776
|
"sgds-button": SgdsButton,
|
|
@@ -26779,7 +26799,7 @@
|
|
|
26779
26799
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
26780
26800
|
], SgdsFileUpload.prototype, "_handleDisabledChange", null);
|
|
26781
26801
|
|
|
26782
|
-
var css_248z$
|
|
26802
|
+
var css_248z$x = 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}}`;
|
|
26783
26803
|
|
|
26784
26804
|
/**
|
|
26785
26805
|
* @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.
|
|
@@ -26882,7 +26902,7 @@
|
|
|
26882
26902
|
`;
|
|
26883
26903
|
}
|
|
26884
26904
|
}
|
|
26885
|
-
SgdsFooter.styles = [...SgdsElement.styles, css_248z$
|
|
26905
|
+
SgdsFooter.styles = [...SgdsElement.styles, css_248z$x];
|
|
26886
26906
|
__decorate([
|
|
26887
26907
|
property({ type: String })
|
|
26888
26908
|
], SgdsFooter.prototype, "copyrightLiner", void 0);
|
|
@@ -26902,7 +26922,82 @@
|
|
|
26902
26922
|
property({ type: String })
|
|
26903
26923
|
], SgdsFooter.prototype, "termsOfUseHref", void 0);
|
|
26904
26924
|
|
|
26905
|
-
var css_248z$
|
|
26925
|
+
var css_248z$w = 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)}`;
|
|
26926
|
+
|
|
26927
|
+
/**
|
|
26928
|
+
* @summary Icon cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
26929
|
+
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
26930
|
+
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
26931
|
+
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
26932
|
+
* @slot subtitle - The subtitle of the card
|
|
26933
|
+
* @slot title - The title of the card
|
|
26934
|
+
* @slot description - The paragrapher text of the card
|
|
26935
|
+
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
26936
|
+
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
26937
|
+
*/
|
|
26938
|
+
class SgdsIconCard extends CardElement {
|
|
26939
|
+
constructor() {
|
|
26940
|
+
super(...arguments);
|
|
26941
|
+
/** Removes the card's internal padding when set to true. */
|
|
26942
|
+
this.noPadding = false;
|
|
26943
|
+
}
|
|
26944
|
+
firstUpdated() {
|
|
26945
|
+
if (this._iconNode.length === 0) {
|
|
26946
|
+
if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
|
|
26947
|
+
const media = this.shadowRoot.querySelector(".card-media");
|
|
26948
|
+
media.style.display = "none";
|
|
26949
|
+
const body = this.shadowRoot.querySelector(".card-body");
|
|
26950
|
+
if (this.noPadding)
|
|
26951
|
+
body.style.padding = "0px";
|
|
26952
|
+
}
|
|
26953
|
+
}
|
|
26954
|
+
}
|
|
26955
|
+
render() {
|
|
26956
|
+
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
26957
|
+
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
26958
|
+
return html `
|
|
26959
|
+
<${tag}
|
|
26960
|
+
class="card ${classMap({
|
|
26961
|
+
disabled: this.disabled
|
|
26962
|
+
})}"
|
|
26963
|
+
tabindex=${cardTabIndex}
|
|
26964
|
+
>
|
|
26965
|
+
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
26966
|
+
<div class="card-media">
|
|
26967
|
+
<slot name="icon"></slot>
|
|
26968
|
+
${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
|
|
26969
|
+
</div>
|
|
26970
|
+
<div class="card-body">
|
|
26971
|
+
${this.orientation === "horizontal" ? html `<slot name="upper"></slot>` : nothing}
|
|
26972
|
+
<div class="card-header-container">
|
|
26973
|
+
<div class="card-header">
|
|
26974
|
+
<slot name="subtitle"></slot>
|
|
26975
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
26976
|
+
</div>
|
|
26977
|
+
<slot></slot>
|
|
26978
|
+
</div>
|
|
26979
|
+
<p class="card-text">
|
|
26980
|
+
<slot name="description"></slot>
|
|
26981
|
+
</p>
|
|
26982
|
+
<slot name="lower"></slot>
|
|
26983
|
+
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
26984
|
+
</div>
|
|
26985
|
+
</${tag}>
|
|
26986
|
+
`;
|
|
26987
|
+
}
|
|
26988
|
+
}
|
|
26989
|
+
SgdsIconCard.styles = [...CardElement.styles, css_248z$w];
|
|
26990
|
+
__decorate([
|
|
26991
|
+
queryAssignedNodes({ slot: "icon", flatten: true })
|
|
26992
|
+
], SgdsIconCard.prototype, "_iconNode", void 0);
|
|
26993
|
+
__decorate([
|
|
26994
|
+
queryAssignedNodes({ slot: "upper", flatten: true })
|
|
26995
|
+
], SgdsIconCard.prototype, "_upperNode", void 0);
|
|
26996
|
+
__decorate([
|
|
26997
|
+
property({ type: Boolean, reflect: true })
|
|
26998
|
+
], SgdsIconCard.prototype, "noPadding", void 0);
|
|
26999
|
+
|
|
27000
|
+
var css_248z$v = 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)}`;
|
|
26906
27001
|
|
|
26907
27002
|
/**
|
|
26908
27003
|
* @summary A IconList can be used to display content related to the same topic. Each list item begins an icon.
|
|
@@ -26925,7 +27020,7 @@
|
|
|
26925
27020
|
`;
|
|
26926
27021
|
}
|
|
26927
27022
|
}
|
|
26928
|
-
SgdsIconList.styles = [...SgdsElement.styles, css_248z$
|
|
27023
|
+
SgdsIconList.styles = [...SgdsElement.styles, css_248z$v];
|
|
26929
27024
|
__decorate([
|
|
26930
27025
|
property({ type: String, reflect: true })
|
|
26931
27026
|
], SgdsIconList.prototype, "role", void 0);
|
|
@@ -26933,6 +27028,95 @@
|
|
|
26933
27028
|
property({ type: String, reflect: true })
|
|
26934
27029
|
], SgdsIconList.prototype, "size", void 0);
|
|
26935
27030
|
|
|
27031
|
+
var css_248z$u = 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}`;
|
|
27032
|
+
|
|
27033
|
+
/**
|
|
27034
|
+
* @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
27035
|
+
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
27036
|
+
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
27037
|
+
* @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.
|
|
27038
|
+
* @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.
|
|
27039
|
+
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
27040
|
+
* @slot subtitle - The subtitle of the card
|
|
27041
|
+
* @slot title - The title of the card
|
|
27042
|
+
* @slot description - The paragrapher text of the card
|
|
27043
|
+
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
27044
|
+
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
27045
|
+
*/
|
|
27046
|
+
class SgdsImageCard extends CardElement {
|
|
27047
|
+
constructor() {
|
|
27048
|
+
super(...arguments);
|
|
27049
|
+
/** Removes the card's internal padding when set to true. */
|
|
27050
|
+
this.noPadding = false;
|
|
27051
|
+
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
27052
|
+
this.imagePosition = "before";
|
|
27053
|
+
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
27054
|
+
this.imageAdjustment = "default";
|
|
27055
|
+
}
|
|
27056
|
+
firstUpdated() {
|
|
27057
|
+
if (this._imageNode.length === 0) {
|
|
27058
|
+
const image = this.shadowRoot.querySelector(".card-image");
|
|
27059
|
+
const body = this.shadowRoot.querySelector(".card-body");
|
|
27060
|
+
image.style.display = "none";
|
|
27061
|
+
if (this.noPadding)
|
|
27062
|
+
body.style.padding = "0px";
|
|
27063
|
+
}
|
|
27064
|
+
}
|
|
27065
|
+
handleImgSlotChange(e) {
|
|
27066
|
+
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
27067
|
+
if (childNodes.length > 1) {
|
|
27068
|
+
return console.error("Multiple elements passed into SgdsCard's image slot");
|
|
27069
|
+
}
|
|
27070
|
+
}
|
|
27071
|
+
render() {
|
|
27072
|
+
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
27073
|
+
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
27074
|
+
return html `
|
|
27075
|
+
<${tag}
|
|
27076
|
+
class="card ${classMap({
|
|
27077
|
+
disabled: this.disabled
|
|
27078
|
+
})}"
|
|
27079
|
+
tabindex=${cardTabIndex}
|
|
27080
|
+
>
|
|
27081
|
+
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
27082
|
+
<div class="card-image">
|
|
27083
|
+
<slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
|
|
27084
|
+
<slot name="image-badge"></slot>
|
|
27085
|
+
<slot name="image-action"></slot>
|
|
27086
|
+
</div>
|
|
27087
|
+
<div class="card-body">
|
|
27088
|
+
<slot name="upper"></slot>
|
|
27089
|
+
<div class="card-header-container">
|
|
27090
|
+
<div class="card-header">
|
|
27091
|
+
<slot name="subtitle"></slot>
|
|
27092
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
27093
|
+
</div>
|
|
27094
|
+
<slot></slot>
|
|
27095
|
+
</div>
|
|
27096
|
+
<p class="card-text">
|
|
27097
|
+
<slot name="description"></slot>
|
|
27098
|
+
</p>
|
|
27099
|
+
<slot name="lower"></slot>
|
|
27100
|
+
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
27101
|
+
</div>
|
|
27102
|
+
</${tag}>
|
|
27103
|
+
`;
|
|
27104
|
+
}
|
|
27105
|
+
}
|
|
27106
|
+
SgdsImageCard.styles = [...CardElement.styles, css_248z$u];
|
|
27107
|
+
__decorate([
|
|
27108
|
+
queryAssignedNodes({ slot: "image", flatten: true })
|
|
27109
|
+
], SgdsImageCard.prototype, "_imageNode", void 0);
|
|
27110
|
+
__decorate([
|
|
27111
|
+
property({ type: Boolean, reflect: true })
|
|
27112
|
+
], SgdsImageCard.prototype, "noPadding", void 0);
|
|
27113
|
+
__decorate([
|
|
27114
|
+
property({ type: String, reflect: true })
|
|
27115
|
+
], SgdsImageCard.prototype, "imagePosition", void 0);
|
|
27116
|
+
__decorate([
|
|
27117
|
+
property({ type: String, reflect: true })
|
|
27118
|
+
], SgdsImageCard.prototype, "imageAdjustment", void 0);
|
|
27119
|
+
|
|
26936
27120
|
/**
|
|
26937
27121
|
* @license
|
|
26938
27122
|
* Copyright 2021 Google LLC
|
|
@@ -27424,7 +27608,7 @@
|
|
|
27424
27608
|
|
|
27425
27609
|
const MainnavContext = createContext("mainnav-context");
|
|
27426
27610
|
|
|
27427
|
-
var css_248z$
|
|
27611
|
+
var css_248z$t = 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}`;
|
|
27428
27612
|
|
|
27429
27613
|
const SIZES = {
|
|
27430
27614
|
sm: SM_BREAKPOINT,
|
|
@@ -27646,7 +27830,7 @@
|
|
|
27646
27830
|
}
|
|
27647
27831
|
}
|
|
27648
27832
|
}
|
|
27649
|
-
SgdsMainnav.styles = [...SgdsElement.styles, css_248z$
|
|
27833
|
+
SgdsMainnav.styles = [...SgdsElement.styles, css_248z$t];
|
|
27650
27834
|
/** @internal */
|
|
27651
27835
|
SgdsMainnav.dependencies = {
|
|
27652
27836
|
"sgds-icon-button": SgdsIconButton
|
|
@@ -27709,7 +27893,7 @@
|
|
|
27709
27893
|
options: { duration: 200, easing: "ease-in-out" }
|
|
27710
27894
|
});
|
|
27711
27895
|
|
|
27712
|
-
var css_248z$
|
|
27896
|
+
var css_248z$s = 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%}`;
|
|
27713
27897
|
|
|
27714
27898
|
const TAB = "Tab";
|
|
27715
27899
|
const ENTER = "Enter";
|
|
@@ -27753,7 +27937,7 @@
|
|
|
27753
27937
|
return;
|
|
27754
27938
|
}
|
|
27755
27939
|
if (this._breakpointReached) {
|
|
27756
|
-
this.shadowRoot.adoptedStyleSheets = [css_248z$
|
|
27940
|
+
this.shadowRoot.adoptedStyleSheets = [css_248z$14.styleSheet, css_248z$s.styleSheet];
|
|
27757
27941
|
}
|
|
27758
27942
|
}
|
|
27759
27943
|
updated() {
|
|
@@ -27913,7 +28097,7 @@
|
|
|
27913
28097
|
</div>
|
|
27914
28098
|
`;
|
|
27915
28099
|
const desktopView = html$1 `<sgds-dropdown
|
|
27916
|
-
modifierOpt=${[
|
|
28100
|
+
.modifierOpt=${[
|
|
27917
28101
|
{
|
|
27918
28102
|
name: "offset",
|
|
27919
28103
|
options: {
|
|
@@ -27943,7 +28127,7 @@
|
|
|
27943
28127
|
return this._breakpointReached ? mobileView : desktopView;
|
|
27944
28128
|
}
|
|
27945
28129
|
}
|
|
27946
|
-
SgdsMainnavDropdown.styles = [...SgdsElement.styles, css_248z$
|
|
28130
|
+
SgdsMainnavDropdown.styles = [...SgdsElement.styles, css_248z$13, css_248z$14, css_248z$s];
|
|
27947
28131
|
/** @internal */
|
|
27948
28132
|
SgdsMainnavDropdown.dependencies = {
|
|
27949
28133
|
"sgds-dropdown": SgdsDropdown,
|
|
@@ -27979,7 +28163,7 @@
|
|
|
27979
28163
|
queryAssignedElements()
|
|
27980
28164
|
], SgdsMainnavDropdown.prototype, "defaultNodes", void 0);
|
|
27981
28165
|
|
|
27982
|
-
var css_248z$
|
|
28166
|
+
var css_248z$r = 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)}`;
|
|
27983
28167
|
|
|
27984
28168
|
/**
|
|
27985
28169
|
* @slot default - slot for SgdsMainnavItem element.
|
|
@@ -28029,7 +28213,7 @@
|
|
|
28029
28213
|
return html$1 `<slot @slotchange=${this._handleSlotChange}></slot>`;
|
|
28030
28214
|
}
|
|
28031
28215
|
}
|
|
28032
|
-
SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$
|
|
28216
|
+
SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$r];
|
|
28033
28217
|
__decorate([
|
|
28034
28218
|
property({ type: Boolean, reflect: true })
|
|
28035
28219
|
], SgdsMainnavItem.prototype, "active", void 0);
|
|
@@ -28040,9 +28224,9 @@
|
|
|
28040
28224
|
watch("disabled")
|
|
28041
28225
|
], SgdsMainnavItem.prototype, "_handleDisabled", null);
|
|
28042
28226
|
|
|
28043
|
-
var css_248z$
|
|
28227
|
+
var css_248z$q = 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}}`;
|
|
28044
28228
|
|
|
28045
|
-
var css_248z$
|
|
28229
|
+
var css_248z$p = css`svg{vertical-align:middle}`;
|
|
28046
28230
|
|
|
28047
28231
|
/**
|
|
28048
28232
|
* @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.
|
|
@@ -28251,7 +28435,7 @@
|
|
|
28251
28435
|
`;
|
|
28252
28436
|
}
|
|
28253
28437
|
}
|
|
28254
|
-
SgdsMasthead.styles = [...SgdsElement.styles, css_248z$
|
|
28438
|
+
SgdsMasthead.styles = [...SgdsElement.styles, css_248z$p, css_248z$18, css_248z$q];
|
|
28255
28439
|
__decorate([
|
|
28256
28440
|
state()
|
|
28257
28441
|
], SgdsMasthead.prototype, "toggleVisibility", void 0);
|
|
@@ -28373,7 +28557,7 @@
|
|
|
28373
28557
|
}
|
|
28374
28558
|
}
|
|
28375
28559
|
|
|
28376
|
-
var css_248z$
|
|
28560
|
+
var css_248z$o = 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}`;
|
|
28377
28561
|
|
|
28378
28562
|
/**
|
|
28379
28563
|
* @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
|
|
@@ -28606,7 +28790,7 @@
|
|
|
28606
28790
|
`;
|
|
28607
28791
|
}
|
|
28608
28792
|
}
|
|
28609
|
-
SgdsModal.styles = [...SgdsElement.styles, css_248z$
|
|
28793
|
+
SgdsModal.styles = [...SgdsElement.styles, css_248z$U, css_248z$p, css_248z$o];
|
|
28610
28794
|
/**@internal */
|
|
28611
28795
|
SgdsModal.dependencies = {
|
|
28612
28796
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -28662,7 +28846,7 @@
|
|
|
28662
28846
|
options: { duration: 400 }
|
|
28663
28847
|
});
|
|
28664
28848
|
|
|
28665
|
-
var css_248z$
|
|
28849
|
+
var css_248z$n = 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)}`;
|
|
28666
28850
|
|
|
28667
28851
|
/**
|
|
28668
28852
|
* @summary The Pagination component enables the user to select a specific page from a range of pages
|
|
@@ -28946,7 +29130,7 @@
|
|
|
28946
29130
|
`;
|
|
28947
29131
|
}
|
|
28948
29132
|
}
|
|
28949
|
-
SgdsPagination.styles = [...SgdsElement.styles, css_248z$
|
|
29133
|
+
SgdsPagination.styles = [...SgdsElement.styles, css_248z$n];
|
|
28950
29134
|
/**@internal */
|
|
28951
29135
|
SgdsPagination.dependencies = {
|
|
28952
29136
|
"sgds-icon-button": SgdsIconButton,
|
|
@@ -29081,7 +29265,7 @@
|
|
|
29081
29265
|
*/
|
|
29082
29266
|
const styleMap = directive(StyleMapDirective);
|
|
29083
29267
|
|
|
29084
|
-
var css_248z$
|
|
29268
|
+
var css_248z$m = 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}}`;
|
|
29085
29269
|
|
|
29086
29270
|
/**
|
|
29087
29271
|
* @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
|
|
@@ -29117,7 +29301,7 @@
|
|
|
29117
29301
|
`;
|
|
29118
29302
|
}
|
|
29119
29303
|
}
|
|
29120
|
-
SgdsProgressBar.styles = [...SgdsElement.styles, css_248z$
|
|
29304
|
+
SgdsProgressBar.styles = [...SgdsElement.styles, css_248z$m];
|
|
29121
29305
|
__decorate([
|
|
29122
29306
|
property({ type: String, reflect: true })
|
|
29123
29307
|
], SgdsProgressBar.prototype, "variant", void 0);
|
|
@@ -29137,7 +29321,7 @@
|
|
|
29137
29321
|
property({ type: String, reflect: true })
|
|
29138
29322
|
], SgdsProgressBar.prototype, "label", void 0);
|
|
29139
29323
|
|
|
29140
|
-
var css_248z$
|
|
29324
|
+
var css_248z$l = 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}`;
|
|
29141
29325
|
|
|
29142
29326
|
/**
|
|
29143
29327
|
* @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.
|
|
@@ -29354,7 +29538,7 @@
|
|
|
29354
29538
|
`;
|
|
29355
29539
|
}
|
|
29356
29540
|
}
|
|
29357
|
-
SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$
|
|
29541
|
+
SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$O, css_248z$p, css_248z$l];
|
|
29358
29542
|
/** @internal */
|
|
29359
29543
|
SgdsQuantityToggle.dependencies = {
|
|
29360
29544
|
"sgds-input": SgdsInput,
|
|
@@ -29391,7 +29575,7 @@
|
|
|
29391
29575
|
queryAsync("sgds-input")
|
|
29392
29576
|
], SgdsQuantityToggle.prototype, "_sgdsInput", void 0);
|
|
29393
29577
|
|
|
29394
|
-
var css_248z$
|
|
29578
|
+
var css_248z$k = 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)}`;
|
|
29395
29579
|
|
|
29396
29580
|
/**
|
|
29397
29581
|
* @summary Radio allows the user to select one option from a set while seeing all available options.
|
|
@@ -29477,7 +29661,7 @@
|
|
|
29477
29661
|
`;
|
|
29478
29662
|
}
|
|
29479
29663
|
}
|
|
29480
|
-
SgdsRadio.styles = [...SgdsElement.styles, css_248z$
|
|
29664
|
+
SgdsRadio.styles = [...SgdsElement.styles, css_248z$P, css_248z$k];
|
|
29481
29665
|
__decorate([
|
|
29482
29666
|
property({ type: Boolean, reflect: true })
|
|
29483
29667
|
], SgdsRadio.prototype, "checked", void 0);
|
|
@@ -29500,7 +29684,7 @@
|
|
|
29500
29684
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
29501
29685
|
], SgdsRadio.prototype, "handleDisabledChange", null);
|
|
29502
29686
|
|
|
29503
|
-
var css_248z$
|
|
29687
|
+
var css_248z$j = 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)}`;
|
|
29504
29688
|
|
|
29505
29689
|
/**
|
|
29506
29690
|
* @summary RadioGroup group multiple radios so they function as a single form control.
|
|
@@ -29731,7 +29915,7 @@
|
|
|
29731
29915
|
`;
|
|
29732
29916
|
}
|
|
29733
29917
|
}
|
|
29734
|
-
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$
|
|
29918
|
+
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$j];
|
|
29735
29919
|
__decorate([
|
|
29736
29920
|
query("slot:not([name])")
|
|
29737
29921
|
], SgdsRadioGroup.prototype, "defaultSlot", void 0);
|
|
@@ -29769,9 +29953,9 @@
|
|
|
29769
29953
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
29770
29954
|
], SgdsRadioGroup.prototype, "_handleDisabledChange", null);
|
|
29771
29955
|
|
|
29772
|
-
var css_248z$
|
|
29956
|
+
var css_248z$i = 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)}`;
|
|
29773
29957
|
|
|
29774
|
-
var css_248z$
|
|
29958
|
+
var css_248z$h = 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}`;
|
|
29775
29959
|
|
|
29776
29960
|
class SelectItem extends SgdsElement {
|
|
29777
29961
|
constructor() {
|
|
@@ -29816,7 +30000,7 @@
|
|
|
29816
30000
|
SelectItem.dependencies = {
|
|
29817
30001
|
"sgds-icon": SgdsIcon
|
|
29818
30002
|
};
|
|
29819
|
-
SelectItem.styles = [css_248z$
|
|
30003
|
+
SelectItem.styles = [css_248z$h];
|
|
29820
30004
|
__decorate([
|
|
29821
30005
|
property({ type: Boolean, reflect: true })
|
|
29822
30006
|
], SelectItem.prototype, "active", void 0);
|
|
@@ -29959,7 +30143,7 @@
|
|
|
29959
30143
|
`;
|
|
29960
30144
|
}
|
|
29961
30145
|
}
|
|
29962
|
-
SgdsSelect.styles = [...SelectElement.styles, css_248z$
|
|
30146
|
+
SgdsSelect.styles = [...SelectElement.styles, css_248z$i];
|
|
29963
30147
|
/** @internal */
|
|
29964
30148
|
SgdsSelect.dependencies = {
|
|
29965
30149
|
"sgds-icon": SgdsIcon,
|
|
@@ -29969,7 +30153,7 @@
|
|
|
29969
30153
|
watch("value", { waitUntilFirstUpdate: true })
|
|
29970
30154
|
], SgdsSelect.prototype, "_handleValueChange", null);
|
|
29971
30155
|
|
|
29972
|
-
var css_248z$
|
|
30156
|
+
var css_248z$g = 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)}`;
|
|
29973
30157
|
|
|
29974
30158
|
/**
|
|
29975
30159
|
* @summary The side navigation is used to display a list of links to move between pages within a related category.
|
|
@@ -30014,7 +30198,7 @@
|
|
|
30014
30198
|
`;
|
|
30015
30199
|
}
|
|
30016
30200
|
}
|
|
30017
|
-
SgdsSidenav.styles = [...SgdsElement.styles, css_248z$
|
|
30201
|
+
SgdsSidenav.styles = [...SgdsElement.styles, css_248z$g];
|
|
30018
30202
|
__decorate([
|
|
30019
30203
|
property({ type: Boolean, attribute: true })
|
|
30020
30204
|
], SgdsSidenav.prototype, "sticky", void 0);
|
|
@@ -30022,7 +30206,7 @@
|
|
|
30022
30206
|
queryAssignedElements()
|
|
30023
30207
|
], SgdsSidenav.prototype, "defaultNodes", void 0);
|
|
30024
30208
|
|
|
30025
|
-
var css_248z$
|
|
30209
|
+
var css_248z$f = 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}`;
|
|
30026
30210
|
|
|
30027
30211
|
/**
|
|
30028
30212
|
* @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.
|
|
@@ -30232,7 +30416,7 @@
|
|
|
30232
30416
|
`;
|
|
30233
30417
|
}
|
|
30234
30418
|
}
|
|
30235
|
-
SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z$
|
|
30419
|
+
SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z$f];
|
|
30236
30420
|
/** @internal */
|
|
30237
30421
|
SgdsSidenavItem.dependencies = {
|
|
30238
30422
|
"sgds-icon": SgdsIcon
|
|
@@ -30273,7 +30457,7 @@
|
|
|
30273
30457
|
options: { duration: 200, easing: "ease-in-out" }
|
|
30274
30458
|
});
|
|
30275
30459
|
|
|
30276
|
-
var css_248z$
|
|
30460
|
+
var css_248z$e = 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)}`;
|
|
30277
30461
|
|
|
30278
30462
|
/**
|
|
30279
30463
|
* @slot default - slot for label of anchor tag.
|
|
@@ -30310,7 +30494,7 @@
|
|
|
30310
30494
|
return html$1 ` <slot @slotchange=${this._handleSlotChange}></slot> `;
|
|
30311
30495
|
}
|
|
30312
30496
|
}
|
|
30313
|
-
SgdsSidenavLink.styles = [...SgdsElement.styles, css_248z$
|
|
30497
|
+
SgdsSidenavLink.styles = [...SgdsElement.styles, css_248z$e];
|
|
30314
30498
|
__decorate([
|
|
30315
30499
|
property({ type: Boolean, reflect: true })
|
|
30316
30500
|
], SgdsSidenavLink.prototype, "active", void 0);
|
|
@@ -30324,7 +30508,7 @@
|
|
|
30324
30508
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
30325
30509
|
], SgdsSidenavLink.prototype, "_handleDisabled", null);
|
|
30326
30510
|
|
|
30327
|
-
var css_248z$
|
|
30511
|
+
var css_248z$d = 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}}`;
|
|
30328
30512
|
|
|
30329
30513
|
/**
|
|
30330
30514
|
* @summary A skeleton is a low-fidelity visual placeholder that represents the loading of interface elements
|
|
@@ -30372,7 +30556,7 @@
|
|
|
30372
30556
|
`;
|
|
30373
30557
|
}
|
|
30374
30558
|
}
|
|
30375
|
-
SgdsSkeleton.styles = [css_248z$
|
|
30559
|
+
SgdsSkeleton.styles = [css_248z$d];
|
|
30376
30560
|
__decorate([
|
|
30377
30561
|
query(".skeleton")
|
|
30378
30562
|
], SgdsSkeleton.prototype, "skeleton", void 0);
|
|
@@ -30395,7 +30579,7 @@
|
|
|
30395
30579
|
// When user use a template of sgds-skeletons, add one visually hidden span to indicate Loading...
|
|
30396
30580
|
// Loading labels must be unique thats why its not advisible to handle the aria labelling for users inside sgds-skeleton
|
|
30397
30581
|
|
|
30398
|
-
var css_248z$
|
|
30582
|
+
var css_248z$c = 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)}`;
|
|
30399
30583
|
|
|
30400
30584
|
/**
|
|
30401
30585
|
* @summary Steppers are used to inform users which step they are at in a form or a process
|
|
@@ -30513,7 +30697,7 @@
|
|
|
30513
30697
|
`;
|
|
30514
30698
|
}
|
|
30515
30699
|
}
|
|
30516
|
-
SgdsStepper.styles = [...SgdsElement.styles, css_248z$
|
|
30700
|
+
SgdsStepper.styles = [...SgdsElement.styles, css_248z$c];
|
|
30517
30701
|
/** @internal */
|
|
30518
30702
|
SgdsStepper.dependencies = { "sgds-icon": SgdsIcon };
|
|
30519
30703
|
__decorate([
|
|
@@ -30535,9 +30719,9 @@
|
|
|
30535
30719
|
watch("activeStep", { waitUntilFirstUpdate: true })
|
|
30536
30720
|
], SgdsStepper.prototype, "_handleActiveStepChange", null);
|
|
30537
30721
|
|
|
30538
|
-
var css_248z$
|
|
30722
|
+
var css_248z$b = 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}}`;
|
|
30539
30723
|
|
|
30540
|
-
var css_248z$
|
|
30724
|
+
var css_248z$a = 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}}`;
|
|
30541
30725
|
|
|
30542
30726
|
const VALID_KEYS = ["Enter", " "];
|
|
30543
30727
|
/**
|
|
@@ -30717,7 +30901,7 @@
|
|
|
30717
30901
|
`;
|
|
30718
30902
|
}
|
|
30719
30903
|
}
|
|
30720
|
-
SgdsSubnav.styles = [...SgdsElement.styles, css_248z$
|
|
30904
|
+
SgdsSubnav.styles = [...SgdsElement.styles, css_248z$b, css_248z$a];
|
|
30721
30905
|
/** @internal */
|
|
30722
30906
|
SgdsSubnav.dependencies = {
|
|
30723
30907
|
"sgds-icon": SgdsIcon
|
|
@@ -30767,7 +30951,7 @@
|
|
|
30767
30951
|
options: { duration: 200, easing: "ease-in-out" }
|
|
30768
30952
|
});
|
|
30769
30953
|
|
|
30770
|
-
var css_248z$
|
|
30954
|
+
var css_248z$9 = 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}`;
|
|
30771
30955
|
|
|
30772
30956
|
/**
|
|
30773
30957
|
* @summary Switch component is used to toggle on and off or yes or no action.
|
|
@@ -30865,7 +31049,7 @@
|
|
|
30865
31049
|
`;
|
|
30866
31050
|
}
|
|
30867
31051
|
}
|
|
30868
|
-
SgdsSwitch.styles = [...SgdsElement.styles, css_248z$
|
|
31052
|
+
SgdsSwitch.styles = [...SgdsElement.styles, css_248z$P, css_248z$9];
|
|
30869
31053
|
__decorate([
|
|
30870
31054
|
property({ reflect: true, type: String })
|
|
30871
31055
|
], SgdsSwitch.prototype, "size", void 0);
|
|
@@ -30888,7 +31072,7 @@
|
|
|
30888
31072
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
30889
31073
|
], SgdsSwitch.prototype, "_handleDisabledChange", null);
|
|
30890
31074
|
|
|
30891
|
-
var css_248z$
|
|
31075
|
+
var css_248z$8 = 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}`;
|
|
30892
31076
|
|
|
30893
31077
|
let id$1 = 0;
|
|
30894
31078
|
/**
|
|
@@ -30944,7 +31128,7 @@
|
|
|
30944
31128
|
`;
|
|
30945
31129
|
}
|
|
30946
31130
|
}
|
|
30947
|
-
SgdsTab.styles = [css_248z$
|
|
31131
|
+
SgdsTab.styles = [css_248z$8];
|
|
30948
31132
|
__decorate([
|
|
30949
31133
|
query(".tab")
|
|
30950
31134
|
], SgdsTab.prototype, "tab", void 0);
|
|
@@ -30964,7 +31148,7 @@
|
|
|
30964
31148
|
watch("disabled")
|
|
30965
31149
|
], SgdsTab.prototype, "handleDisabledChange", null);
|
|
30966
31150
|
|
|
30967
|
-
var css_248z$
|
|
31151
|
+
var css_248z$7 = 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)}`;
|
|
30968
31152
|
|
|
30969
31153
|
/**
|
|
30970
31154
|
* @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.
|
|
@@ -31181,7 +31365,7 @@
|
|
|
31181
31365
|
`;
|
|
31182
31366
|
}
|
|
31183
31367
|
}
|
|
31184
|
-
SgdsTabGroup.styles = [...SgdsElement.styles, css_248z$
|
|
31368
|
+
SgdsTabGroup.styles = [...SgdsElement.styles, css_248z$7];
|
|
31185
31369
|
__decorate([
|
|
31186
31370
|
query(".tab-group")
|
|
31187
31371
|
], SgdsTabGroup.prototype, "_tabGroup", void 0);
|
|
@@ -31204,7 +31388,7 @@
|
|
|
31204
31388
|
queryAssignedElements({ slot: "nav", flatten: true })
|
|
31205
31389
|
], SgdsTabGroup.prototype, "_navSlot", void 0);
|
|
31206
31390
|
|
|
31207
|
-
var css_248z$
|
|
31391
|
+
var css_248z$6 = css`.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;
|
|
31208
31392
|
|
|
31209
31393
|
let id = 0;
|
|
31210
31394
|
/**
|
|
@@ -31241,7 +31425,7 @@
|
|
|
31241
31425
|
`;
|
|
31242
31426
|
}
|
|
31243
31427
|
}
|
|
31244
|
-
SgdsTabPanel.styles = [...SgdsElement.styles, css_248z$
|
|
31428
|
+
SgdsTabPanel.styles = [...SgdsElement.styles, css_248z$6];
|
|
31245
31429
|
__decorate([
|
|
31246
31430
|
property({ reflect: true })
|
|
31247
31431
|
], SgdsTabPanel.prototype, "name", void 0);
|
|
@@ -31252,7 +31436,7 @@
|
|
|
31252
31436
|
watch("active")
|
|
31253
31437
|
], SgdsTabPanel.prototype, "_handleActiveChange", null);
|
|
31254
31438
|
|
|
31255
|
-
var css_248z$
|
|
31439
|
+
var css_248z$5 = 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}}`;
|
|
31256
31440
|
|
|
31257
31441
|
/**
|
|
31258
31442
|
* @summary Table is used for displaying collections of data in organized rows and columns.
|
|
@@ -31356,7 +31540,7 @@
|
|
|
31356
31540
|
`;
|
|
31357
31541
|
}
|
|
31358
31542
|
}
|
|
31359
|
-
SgdsTable.styles = [...SgdsElement.styles, css_248z$
|
|
31543
|
+
SgdsTable.styles = [...SgdsElement.styles, css_248z$5];
|
|
31360
31544
|
__decorate([
|
|
31361
31545
|
property({ type: String, reflect: true })
|
|
31362
31546
|
], SgdsTable.prototype, "responsive", void 0);
|
|
@@ -31373,7 +31557,7 @@
|
|
|
31373
31557
|
property({ type: String })
|
|
31374
31558
|
], SgdsTable.prototype, "headerPosition", void 0);
|
|
31375
31559
|
|
|
31376
|
-
var css_248z$
|
|
31560
|
+
var css_248z$4 = 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))}`;
|
|
31377
31561
|
|
|
31378
31562
|
/**
|
|
31379
31563
|
*
|
|
@@ -31392,9 +31576,9 @@
|
|
|
31392
31576
|
</div> `;
|
|
31393
31577
|
}
|
|
31394
31578
|
}
|
|
31395
|
-
SgdsTableOfContents.styles = [...SgdsElement.styles, css_248z$
|
|
31579
|
+
SgdsTableOfContents.styles = [...SgdsElement.styles, css_248z$4];
|
|
31396
31580
|
|
|
31397
|
-
var css_248z$
|
|
31581
|
+
var css_248z$3 = 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}`;
|
|
31398
31582
|
|
|
31399
31583
|
/**
|
|
31400
31584
|
* @summary Text areas allow for the collection of input longer than a single line.
|
|
@@ -31590,7 +31774,7 @@
|
|
|
31590
31774
|
`;
|
|
31591
31775
|
}
|
|
31592
31776
|
}
|
|
31593
|
-
SgdsTextarea.styles = [...FormControlElement.styles, css_248z$
|
|
31777
|
+
SgdsTextarea.styles = [...FormControlElement.styles, css_248z$3];
|
|
31594
31778
|
__decorate([
|
|
31595
31779
|
query("textarea.form-control")
|
|
31596
31780
|
], SgdsTextarea.prototype, "textarea", void 0);
|
|
@@ -31661,6 +31845,85 @@
|
|
|
31661
31845
|
watch("value", { waitUntilFirstUpdate: true })
|
|
31662
31846
|
], SgdsTextarea.prototype, "_handleValueChange", null);
|
|
31663
31847
|
|
|
31848
|
+
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=thumbnail]::slotted(*){height:auto;max-width:100%}`;
|
|
31849
|
+
|
|
31850
|
+
/**
|
|
31851
|
+
* @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
31852
|
+
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
31853
|
+
* @slot thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.
|
|
31854
|
+
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
31855
|
+
* @slot subtitle - The subtitle of the card
|
|
31856
|
+
* @slot title - The title of the card
|
|
31857
|
+
* @slot description - The paragrapher text of the card
|
|
31858
|
+
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
31859
|
+
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
31860
|
+
*/
|
|
31861
|
+
class SgdsThumbnailCard extends CardElement {
|
|
31862
|
+
constructor() {
|
|
31863
|
+
super(...arguments);
|
|
31864
|
+
/** Removes the card's internal padding when set to true. */
|
|
31865
|
+
this.noPadding = false;
|
|
31866
|
+
}
|
|
31867
|
+
firstUpdated() {
|
|
31868
|
+
if (this._thumbnailNode.length === 0) {
|
|
31869
|
+
const thumbnail = this.shadowRoot.querySelector(".card-thumbnail");
|
|
31870
|
+
thumbnail.style.display = "none";
|
|
31871
|
+
if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
|
|
31872
|
+
const media = this.shadowRoot.querySelector(".card-media");
|
|
31873
|
+
media.style.display = "none";
|
|
31874
|
+
const body = this.shadowRoot.querySelector(".card-body");
|
|
31875
|
+
if (this.noPadding)
|
|
31876
|
+
body.style.padding = "0px";
|
|
31877
|
+
}
|
|
31878
|
+
}
|
|
31879
|
+
}
|
|
31880
|
+
render() {
|
|
31881
|
+
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
31882
|
+
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
31883
|
+
return html `
|
|
31884
|
+
<${tag}
|
|
31885
|
+
class="card ${classMap({
|
|
31886
|
+
disabled: this.disabled
|
|
31887
|
+
})}"
|
|
31888
|
+
tabindex=${cardTabIndex}
|
|
31889
|
+
>
|
|
31890
|
+
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
31891
|
+
<div class="card-media">
|
|
31892
|
+
<div class="card-thumbnail">
|
|
31893
|
+
<slot name="thumbnail"></slot>
|
|
31894
|
+
</div>
|
|
31895
|
+
${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
|
|
31896
|
+
</div>
|
|
31897
|
+
<div class="card-body">
|
|
31898
|
+
${this.orientation === "horizontal" ? html `<slot name="upper"></slot>` : nothing}
|
|
31899
|
+
<div class="card-header-container">
|
|
31900
|
+
<div class="card-header">
|
|
31901
|
+
<slot name="subtitle"></slot>
|
|
31902
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
31903
|
+
</div>
|
|
31904
|
+
<slot></slot>
|
|
31905
|
+
</div>
|
|
31906
|
+
<p class="card-text">
|
|
31907
|
+
<slot name="description"></slot>
|
|
31908
|
+
</p>
|
|
31909
|
+
<slot name="lower"></slot>
|
|
31910
|
+
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
31911
|
+
</div>
|
|
31912
|
+
</${tag}>
|
|
31913
|
+
`;
|
|
31914
|
+
}
|
|
31915
|
+
}
|
|
31916
|
+
SgdsThumbnailCard.styles = [...CardElement.styles, css_248z$2];
|
|
31917
|
+
__decorate([
|
|
31918
|
+
queryAssignedNodes({ slot: "thumbnail", flatten: true })
|
|
31919
|
+
], SgdsThumbnailCard.prototype, "_thumbnailNode", void 0);
|
|
31920
|
+
__decorate([
|
|
31921
|
+
queryAssignedNodes({ slot: "upper", flatten: true })
|
|
31922
|
+
], SgdsThumbnailCard.prototype, "_upperNode", void 0);
|
|
31923
|
+
__decorate([
|
|
31924
|
+
property({ type: Boolean, reflect: true })
|
|
31925
|
+
], SgdsThumbnailCard.prototype, "noPadding", void 0);
|
|
31926
|
+
|
|
31664
31927
|
var css_248z$1 = 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}`;
|
|
31665
31928
|
|
|
31666
31929
|
/**
|
|
@@ -31872,7 +32135,9 @@
|
|
|
31872
32135
|
exports.SgdsFooter = SgdsFooter;
|
|
31873
32136
|
exports.SgdsIcon = SgdsIcon;
|
|
31874
32137
|
exports.SgdsIconButton = SgdsIconButton;
|
|
32138
|
+
exports.SgdsIconCard = SgdsIconCard;
|
|
31875
32139
|
exports.SgdsIconList = SgdsIconList;
|
|
32140
|
+
exports.SgdsImageCard = SgdsImageCard;
|
|
31876
32141
|
exports.SgdsInput = SgdsInput;
|
|
31877
32142
|
exports.SgdsLink = SgdsLink;
|
|
31878
32143
|
exports.SgdsMainnav = SgdsMainnav;
|
|
@@ -31880,6 +32145,7 @@
|
|
|
31880
32145
|
exports.SgdsMainnavItem = SgdsMainnavItem;
|
|
31881
32146
|
exports.SgdsMasthead = SgdsMasthead;
|
|
31882
32147
|
exports.SgdsModal = SgdsModal;
|
|
32148
|
+
exports.SgdsOverflowMenu = SgdsOverflowMenu;
|
|
31883
32149
|
exports.SgdsPagination = SgdsPagination;
|
|
31884
32150
|
exports.SgdsProgressBar = SgdsProgressBar;
|
|
31885
32151
|
exports.SgdsQuantityToggle = SgdsQuantityToggle;
|
|
@@ -31900,6 +32166,7 @@
|
|
|
31900
32166
|
exports.SgdsTable = SgdsTable;
|
|
31901
32167
|
exports.SgdsTableOfContents = SgdsTableOfContents;
|
|
31902
32168
|
exports.SgdsTextarea = SgdsTextarea;
|
|
32169
|
+
exports.SgdsThumbnailCard = SgdsThumbnailCard;
|
|
31903
32170
|
exports.SgdsToast = SgdsToast;
|
|
31904
32171
|
exports.SgdsToastContainer = SgdsToastContainer;
|
|
31905
32172
|
exports.SgdsTooltip = SgdsTooltip;
|