@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base/button.js +1 -1
- package/components/Alert/index.umd.min.js +17 -17
- package/components/Alert/index.umd.min.js.map +1 -1
- package/components/Alert/sgds-alert.d.ts +1 -1
- package/components/Alert/sgds-alert.js +2 -2
- package/components/Alert/sgds-alert.js.map +1 -1
- package/components/Badge/index.umd.min.js +16 -16
- package/components/Badge/index.umd.min.js.map +1 -1
- package/components/Badge/sgds-badge.d.ts +1 -1
- package/components/Badge/sgds-badge.js +2 -2
- package/components/Badge/sgds-badge.js.map +1 -1
- package/components/Breadcrumb/index.umd.min.js +17 -17
- package/components/Breadcrumb/index.umd.min.js.map +1 -1
- package/components/Breadcrumb/sgds-breadcrumb-item.d.ts +1 -0
- package/components/Breadcrumb/sgds-breadcrumb-item.js +5 -2
- package/components/Breadcrumb/sgds-breadcrumb-item.js.map +1 -1
- package/components/Button/index.umd.min.js +1 -1
- package/components/Card/index.umd.min.js.map +1 -1
- package/components/Card/sgds-card.js.map +1 -1
- package/components/CloseButton/close-button.js +6 -0
- package/components/CloseButton/index.js +5 -0
- package/components/CloseButton/index.js.map +1 -0
- package/components/CloseButton/index.umd.min.js +50 -0
- package/components/CloseButton/index.umd.min.js.map +1 -0
- package/{internals → components}/CloseButton/sgds-close-button.d.ts +2 -4
- package/{internals → components}/CloseButton/sgds-close-button.js +4 -10
- package/components/CloseButton/sgds-close-button.js.map +1 -0
- package/components/ComboBox/index.umd.min.js +18 -18
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/Datepicker/index.umd.min.js +1 -1
- package/components/Datepicker/index.umd.min.js.map +1 -1
- package/components/Drawer/index.umd.min.js +6 -11
- package/components/Drawer/index.umd.min.js.map +1 -1
- package/components/Drawer/sgds-drawer.d.ts +1 -1
- package/components/Drawer/sgds-drawer.js +1 -1
- package/components/Drawer/sgds-drawer.js.map +1 -1
- package/components/FileUpload/index.umd.min.js +26 -26
- package/components/FileUpload/index.umd.min.js.map +1 -1
- package/components/FileUpload/sgds-file-upload.d.ts +1 -1
- package/components/FileUpload/sgds-file-upload.js +1 -1
- package/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/components/Footer/footer-item.js +1 -1
- package/components/Footer/footer.js +1 -1
- package/components/Footer/index.umd.min.js +17 -17
- package/components/Footer/index.umd.min.js.map +1 -1
- package/components/Footer/sgds-footer-item.d.ts +1 -0
- package/components/Footer/sgds-footer-item.js +11 -1
- package/components/Footer/sgds-footer-item.js.map +1 -1
- package/components/Footer/sgds-footer.js +7 -7
- package/components/Footer/sgds-footer.js.map +1 -1
- package/components/IconButton/index.umd.min.js +1 -1
- package/components/IconCard/index.umd.min.js.map +1 -1
- package/components/IconCard/sgds-icon-card.js.map +1 -1
- package/components/ImageCard/index.umd.min.js.map +1 -1
- package/components/ImageCard/sgds-image-card.js.map +1 -1
- package/components/Input/index.umd.min.js.map +1 -1
- package/components/Input/sgds-input.js.map +1 -1
- package/components/Link/index.umd.min.js +9 -9
- package/components/Link/index.umd.min.js.map +1 -1
- package/components/Link/link.js +1 -1
- package/components/Link/sgds-link.d.ts +7 -1
- package/components/Link/sgds-link.js +28 -2
- package/components/Link/sgds-link.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +1 -1
- package/components/Modal/index.umd.min.js +4 -4
- package/components/Modal/index.umd.min.js.map +1 -1
- package/components/Modal/sgds-modal.d.ts +1 -1
- package/components/Modal/sgds-modal.js +2 -2
- package/components/Modal/sgds-modal.js.map +1 -1
- package/components/Pagination/index.umd.min.js +1 -1
- package/components/QuantityToggle/index.umd.min.js +1 -1
- package/components/QuantityToggle/index.umd.min.js.map +1 -1
- package/components/Subnav/index.umd.min.js +11 -9
- package/components/Subnav/index.umd.min.js.map +1 -1
- package/components/Subnav/sgds-subnav.d.ts +4 -0
- package/components/Subnav/sgds-subnav.js +18 -2
- package/components/Subnav/sgds-subnav.js.map +1 -1
- package/components/Subnav/subnav.js +1 -1
- package/components/SystemBanner/index.d.ts +6 -0
- package/components/SystemBanner/index.js +6 -0
- package/components/SystemBanner/index.js.map +1 -0
- package/components/SystemBanner/index.umd.min.js +2101 -0
- package/components/SystemBanner/index.umd.min.js.map +1 -0
- package/components/SystemBanner/sgds-system-banner-item.d.ts +24 -0
- package/components/SystemBanner/sgds-system-banner-item.js +93 -0
- package/components/SystemBanner/sgds-system-banner-item.js.map +1 -0
- package/components/SystemBanner/sgds-system-banner.d.ts +51 -0
- package/components/SystemBanner/sgds-system-banner.js +224 -0
- package/components/SystemBanner/sgds-system-banner.js.map +1 -0
- package/components/SystemBanner/system-banner-context.d.ts +3 -0
- package/components/SystemBanner/system-banner-context.js +6 -0
- package/components/SystemBanner/system-banner-context.js.map +1 -0
- package/components/SystemBanner/system-banner-item.js +6 -0
- package/components/SystemBanner/system-banner-item.js.map +1 -0
- package/components/SystemBanner/system-banner.js +6 -0
- package/components/SystemBanner/system-banner.js.map +1 -0
- package/components/Toast/index.umd.min.js +12 -12
- package/components/Toast/index.umd.min.js.map +1 -1
- package/components/Toast/sgds-toast.d.ts +1 -1
- package/components/Toast/sgds-toast.js +2 -2
- package/components/Toast/sgds-toast.js.map +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -0
- package/components/index.js.map +1 -1
- package/components/index.umd.min.js +168 -136
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +3 -0
- package/index.d.ts +3 -1
- package/index.js +3 -1
- package/index.js.map +1 -1
- package/index.umd.min.js +212 -161
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/button.cjs.js +1 -1
- package/react/base/button.js +1 -1
- package/react/close-button/index.cjs.js +40 -0
- package/react/close-button/index.cjs.js.map +1 -0
- package/react/close-button/index.d.ts +2 -0
- package/react/close-button/index.js +16 -0
- package/react/close-button/index.js.map +1 -0
- package/react/components/Alert/sgds-alert.cjs.js +2 -2
- package/react/components/Alert/sgds-alert.cjs.js.map +1 -1
- package/react/components/Alert/sgds-alert.js +2 -2
- package/react/components/Alert/sgds-alert.js.map +1 -1
- package/react/components/Badge/sgds-badge.cjs.js +2 -2
- package/react/components/Badge/sgds-badge.cjs.js.map +1 -1
- package/react/components/Badge/sgds-badge.js +2 -2
- package/react/components/Badge/sgds-badge.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js +5 -2
- package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb-item.js +5 -2
- package/react/components/Breadcrumb/sgds-breadcrumb-item.js.map +1 -1
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js.map +1 -1
- package/react/components/CloseButton/close-button.cjs.js +11 -0
- package/react/components/CloseButton/close-button.js +7 -0
- package/react/{internals → components}/CloseButton/sgds-close-button.cjs.js +4 -10
- package/react/components/CloseButton/sgds-close-button.cjs.js.map +1 -0
- package/react/{internals → components}/CloseButton/sgds-close-button.js +4 -10
- package/react/components/CloseButton/sgds-close-button.js.map +1 -0
- package/react/components/Drawer/sgds-drawer.cjs.js +1 -1
- package/react/components/Drawer/sgds-drawer.cjs.js.map +1 -1
- package/react/components/Drawer/sgds-drawer.js +1 -1
- package/react/components/Drawer/sgds-drawer.js.map +1 -1
- package/react/components/FileUpload/sgds-file-upload.cjs.js +1 -1
- package/react/components/FileUpload/sgds-file-upload.cjs.js.map +1 -1
- package/react/components/FileUpload/sgds-file-upload.js +1 -1
- package/react/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/react/components/Footer/footer-item.cjs.js +1 -1
- package/react/components/Footer/footer-item.js +1 -1
- package/react/components/Footer/footer.cjs.js +1 -1
- package/react/components/Footer/footer.js +1 -1
- package/react/components/Footer/sgds-footer-item.cjs.js +11 -1
- package/react/components/Footer/sgds-footer-item.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer-item.js +11 -1
- package/react/components/Footer/sgds-footer-item.js.map +1 -1
- package/react/components/Footer/sgds-footer.cjs.js +7 -7
- package/react/components/Footer/sgds-footer.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer.js +7 -7
- package/react/components/Footer/sgds-footer.js.map +1 -1
- package/react/components/IconCard/sgds-icon-card.cjs.js.map +1 -1
- package/react/components/IconCard/sgds-icon-card.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.cjs.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.js.map +1 -1
- package/react/components/Input/sgds-input.cjs.js.map +1 -1
- package/react/components/Input/sgds-input.js.map +1 -1
- package/react/components/Link/link.cjs.js +1 -1
- package/react/components/Link/link.js +1 -1
- package/react/components/Link/sgds-link.cjs.js +28 -2
- package/react/components/Link/sgds-link.cjs.js.map +1 -1
- package/react/components/Link/sgds-link.js +28 -2
- package/react/components/Link/sgds-link.js.map +1 -1
- package/react/components/Modal/sgds-modal.cjs.js +2 -2
- package/react/components/Modal/sgds-modal.cjs.js.map +1 -1
- package/react/components/Modal/sgds-modal.js +2 -2
- package/react/components/Modal/sgds-modal.js.map +1 -1
- package/react/components/Subnav/sgds-subnav.cjs.js +17 -1
- package/react/components/Subnav/sgds-subnav.cjs.js.map +1 -1
- package/react/components/Subnav/sgds-subnav.js +18 -2
- package/react/components/Subnav/sgds-subnav.js.map +1 -1
- package/react/components/Subnav/subnav.cjs.js +1 -1
- package/react/components/Subnav/subnav.js +1 -1
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js +99 -0
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner-item.js +94 -0
- package/react/components/SystemBanner/sgds-system-banner-item.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner.cjs.js +230 -0
- package/react/components/SystemBanner/sgds-system-banner.cjs.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner.js +225 -0
- package/react/components/SystemBanner/sgds-system-banner.js.map +1 -0
- package/react/components/SystemBanner/system-banner-context.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner-context.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner-context.js +7 -0
- package/react/components/SystemBanner/system-banner-context.js.map +1 -0
- package/react/components/SystemBanner/system-banner-item.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner-item.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner-item.js +7 -0
- package/react/components/SystemBanner/system-banner-item.js.map +1 -0
- package/react/components/SystemBanner/system-banner.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner.js +7 -0
- package/react/components/SystemBanner/system-banner.js.map +1 -0
- package/react/components/Toast/sgds-toast.cjs.js +2 -2
- package/react/components/Toast/sgds-toast.cjs.js.map +1 -1
- package/react/components/Toast/sgds-toast.js +2 -2
- package/react/components/Toast/sgds-toast.js.map +1 -1
- package/react/index.cjs.js +114 -108
- package/react/index.cjs.js.map +1 -1
- package/react/index.d.ts +3 -0
- package/react/index.js +3 -0
- package/react/index.js.map +1 -1
- package/react/system-banner/index.cjs.js +43 -0
- package/react/system-banner/index.cjs.js.map +1 -0
- package/react/system-banner/index.d.ts +2 -0
- package/react/system-banner/index.js +19 -0
- package/react/system-banner/index.js.map +1 -0
- package/react/system-banner-item/index.cjs.js +42 -0
- package/react/system-banner-item/index.cjs.js.map +1 -0
- package/react/system-banner-item/index.d.ts +2 -0
- package/react/system-banner-item/index.js +18 -0
- package/react/system-banner-item/index.js.map +1 -0
- package/themes/root.css +14 -2
- package/internals/CloseButton/close-button.js +0 -6
- package/internals/CloseButton/sgds-close-button.js.map +0 -1
- package/react/internals/CloseButton/close-button.cjs.js +0 -11
- package/react/internals/CloseButton/close-button.js +0 -7
- package/react/internals/CloseButton/sgds-close-button.cjs.js.map +0 -1
- package/react/internals/CloseButton/sgds-close-button.js.map +0 -1
- package/utils/test.d.ts +0 -28
- /package/{internals → components}/CloseButton/close-button.js.map +0 -0
- /package/{internals → components}/CloseButton/index.d.ts +0 -0
- /package/react/{internals → components}/CloseButton/close-button.cjs.js.map +0 -0
- /package/react/{internals → components}/CloseButton/close-button.js.map +0 -0
package/components/Link/link.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = css`:host{
|
|
3
|
+
var css_248z = css`:host{--color-emphasis:var(--sgds-link-color-emphasis);display:inline-flex;vertical-align:middle}:host([tone=danger]),:host([variant=danger]){--color-emphasis:var(--sgds-danger-color-emphasis)}:host([tone=neutral]),:host([variant=neutral]){--color-emphasis:var(--sgds-color-default)}:host([tone=fixed-light]),:host([variant=light]){--color-emphasis:var(--sgds-color-fixed-light)}:host([variant=dark]) :host([tone=fixed-dark]){--color-emphasis:var(--sgds-color-fixed-dark)}:host([tone=danger]) .nav-link::slotted(a),: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([tone=danger]) .nav-link::slotted(a:focus),:host([tone=danger]) .nav-link::slotted(a:focus-visible),:host([tone=danger]) .nav-link::slotted(a:hover),: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){--color-emphasis:var(--sgds-danger-color-emphasis);color:var(--color-emphasis,--sgds-danger-color-emphasis)}:host([tone=neutral]) .nav-link::slotted(a),: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([tone=neutral]) .nav-link::slotted(a:focus),:host([tone=neutral]) .nav-link::slotted(a:focus-visible),:host([tone=neutral]) .nav-link::slotted(a:hover),: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){--color-emphasis:var(--sgds-color-default);color:var(--color-emphasis,--sgds-color-default)}:host([tone=fixed-light]) .nav-link::slotted(a),: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([tone=fixed-light]) .nav-link::slotted(a:focus),:host([tone=fixed-light]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-light]) .nav-link::slotted(a:hover),: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){--color-emphasis:var(--sgds-color-fixed-light);color:var(--color-emphasis,--sgds-color-fixed-light)}:host([tone=fixed-dark]) .nav-link::slotted(a),: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([tone=fixed-dark]) .nav-link::slotted(a:focus),:host([tone=fixed-dark]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-dark]) .nav-link::slotted(a:hover),: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){--color-emphasis:var(--sgds-color-fixed-dark);color:var(--color-emphasis,--sgds-color-fixed-dark)}:host([size=md]) .nav-link::slotted(a){--text-underline-offset:3px;font-size:var(--sgds-font-size-2)!important;line-height:var(--sgds-line-height-24)!important}:host([size=lg]) .nav-link::slotted(a){--text-underline-offset:4px;font-size:var(--sgds-font-size-3)!important;line-height:var(--sgds-line-height-32)!important}:host([size=sm]) .nav-link::slotted(a){--text-underline-offset:2.8px;font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-20)!important}:host([size=xs]) .nav-link::slotted(a){--text-underline-offset:2.2px;font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)!important}.nav-link::slotted(a):after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important}:host([size=xs]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-sm)!important;width:var(--sgds-icon-size-sm)!important}:host([size=sm]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-md)!important;width:var(--sgds-icon-size-md)!important}:host([size=md]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-lg)!important;width:var(--sgds-icon-size-lg)!important}:host([size=lg]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-xl)!important;width:var(--sgds-icon-size-xl)!important}::slotted(*){align-items:center;display:flex}.nav-link::slotted(a:focus-visible:not([disabled])){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}.nav-link::slotted(a){color:var(--sgds-link-color-default);cursor:pointer}:host(:not([active])) .nav-link::slotted(a:not(:hover)){text-decoration:underline solid transparent!important;text-underline-offset:0;transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){color:var(--color-emphasis)!important}.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){text-decoration-color:var(--color-emphasis)!important;text-underline-offset:var(--text-underline-offset);transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a[disabled]),:host([disabled]) .nav-link::slotted(a){text-decoration:none!important}@media (prefers-reduced-motion:reduce){.nav-link::slotted(a:hover),:host(:not([active])) .nav-link::slotted(a:not(:hover)),:host([active]) .nav-link::slotted(a){transition:none}}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=link.js.map
|
|
@@ -9,8 +9,14 @@ export declare class SgdsLink extends SgdsElement {
|
|
|
9
9
|
static styles: import("lit").CSSResult[];
|
|
10
10
|
/** Determines the size of the link */
|
|
11
11
|
size: "xs" | "sm" | "md" | "lg";
|
|
12
|
-
/**
|
|
12
|
+
/** Sets the colour of the link @deprecated since 3.6.0 */
|
|
13
13
|
variant: "primary" | "danger" | "neutral" | "light" | "dark";
|
|
14
|
+
/** Sets the colour of the link, replaces variant prop */
|
|
15
|
+
tone: "primary" | "danger" | "neutral" | "fixed-light" | "fixed-dark";
|
|
16
|
+
/** When true, sets the active stylings of the link */
|
|
17
|
+
active: boolean;
|
|
18
|
+
/** Disables the link */
|
|
19
|
+
disabled: boolean;
|
|
14
20
|
private _processAnchor;
|
|
15
21
|
private _processIcon;
|
|
16
22
|
private _handleSlotChange;
|
|
@@ -14,10 +14,19 @@ class SgdsLink extends SgdsElement {
|
|
|
14
14
|
super(...arguments);
|
|
15
15
|
/** Determines the size of the link */
|
|
16
16
|
this.size = "md";
|
|
17
|
-
/**
|
|
17
|
+
/** Sets the colour of the link @deprecated since 3.6.0 */
|
|
18
18
|
this.variant = "primary";
|
|
19
|
+
/** Sets the colour of the link, replaces variant prop */
|
|
20
|
+
this.tone = "primary";
|
|
21
|
+
/** When true, sets the active stylings of the link */
|
|
22
|
+
this.active = false;
|
|
23
|
+
/** Disables the link */
|
|
24
|
+
this.disabled = false;
|
|
19
25
|
}
|
|
20
26
|
_processAnchor(anchor) {
|
|
27
|
+
if (this.disabled) {
|
|
28
|
+
anchor.setAttribute("disabled", "true");
|
|
29
|
+
}
|
|
21
30
|
if (anchor.hasAttribute("disabled")) {
|
|
22
31
|
anchor.setAttribute("href", "javascript:void(0)");
|
|
23
32
|
anchor.setAttribute("tabindex", "-1");
|
|
@@ -27,8 +36,16 @@ class SgdsLink extends SgdsElement {
|
|
|
27
36
|
}
|
|
28
37
|
}
|
|
29
38
|
_processIcon(anchor) {
|
|
39
|
+
const linkToIconSizeMapping = {
|
|
40
|
+
xs: "sm",
|
|
41
|
+
sm: "md",
|
|
42
|
+
md: "lg",
|
|
43
|
+
lg: "xl"
|
|
44
|
+
};
|
|
30
45
|
const icons = anchor.querySelectorAll("sgds-icon");
|
|
31
46
|
icons.forEach(icon => {
|
|
47
|
+
// icon.size = linkToIconSizeMapping[this.size]
|
|
48
|
+
icon.setAttribute("size", linkToIconSizeMapping[this.size]);
|
|
32
49
|
icon.classList.remove("icon-left", "icon-right");
|
|
33
50
|
if (!icon.previousElementSibling && !icon.previousSibling) {
|
|
34
51
|
icon.classList.add("icon-left");
|
|
@@ -57,7 +74,7 @@ class SgdsLink extends SgdsElement {
|
|
|
57
74
|
}
|
|
58
75
|
render() {
|
|
59
76
|
/** When removing href, link is no longer focusable */
|
|
60
|
-
return html `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot
|
|
77
|
+
return html `<slot class="nav-link " @slotchange=${this._handleSlotChange}></slot> `;
|
|
61
78
|
}
|
|
62
79
|
}
|
|
63
80
|
SgdsLink.styles = [...SgdsElement.styles, css_248z];
|
|
@@ -67,6 +84,15 @@ __decorate([
|
|
|
67
84
|
__decorate([
|
|
68
85
|
property({ type: String, reflect: true })
|
|
69
86
|
], SgdsLink.prototype, "variant", void 0);
|
|
87
|
+
__decorate([
|
|
88
|
+
property({ type: String, reflect: true })
|
|
89
|
+
], SgdsLink.prototype, "tone", void 0);
|
|
90
|
+
__decorate([
|
|
91
|
+
property({ type: Boolean, reflect: true })
|
|
92
|
+
], SgdsLink.prototype, "active", void 0);
|
|
93
|
+
__decorate([
|
|
94
|
+
property({ type: Boolean, reflect: true })
|
|
95
|
+
], SgdsLink.prototype, "disabled", void 0);
|
|
70
96
|
|
|
71
97
|
export { SgdsLink, SgdsLink as default };
|
|
72
98
|
//# sourceMappingURL=sgds-link.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-link.js","sources":["../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n static styles = [...SgdsElement.styles, linkStyles];\n /** Determines the size of the link */\n @property({ type: String, reflect: true })\n size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n /**
|
|
1
|
+
{"version":3,"file":"sgds-link.js","sources":["../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n static styles = [...SgdsElement.styles, linkStyles];\n /** Determines the size of the link */\n @property({ type: String, reflect: true })\n size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n /** Sets the colour of the link @deprecated since 3.6.0 */\n @property({ type: String, reflect: true })\n variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n /** Sets the colour of the link, replaces variant prop */\n @property({ type: String, reflect: true })\n tone: \"primary\" | \"danger\" | \"neutral\" | \"fixed-light\" | \"fixed-dark\" = \"primary\";\n /** When true, sets the active stylings of the link */\n @property({ type: Boolean, reflect: true })\n active = false;\n /** Disables the link */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n private _processAnchor(anchor: HTMLAnchorElement) {\n if (this.disabled) {\n anchor.setAttribute(\"disabled\", \"true\");\n }\n if (anchor.hasAttribute(\"disabled\")) {\n anchor.setAttribute(\"href\", \"javascript:void(0)\");\n anchor.setAttribute(\"tabindex\", \"-1\");\n } else {\n anchor.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n private _processIcon(anchor: HTMLAnchorElement) {\n const linkToIconSizeMapping = {\n xs: \"sm\",\n sm: \"md\",\n md: \"lg\",\n lg: \"xl\"\n };\n const icons = anchor.querySelectorAll<SgdsIcon>(\"sgds-icon\");\n\n icons.forEach(icon => {\n // icon.size = linkToIconSizeMapping[this.size]\n icon.setAttribute(\"size\", linkToIconSizeMapping[this.size]);\n icon.classList.remove(\"icon-left\", \"icon-right\");\n\n if (!icon.previousElementSibling && !icon.previousSibling) {\n icon.classList.add(\"icon-left\");\n }\n\n if (!icon.nextElementSibling && !icon.nextSibling) {\n icon.classList.add(\"icon-right\");\n }\n });\n }\n\n private _handleSlotChange(e: Event) {\n const anchor = (e.target as HTMLSlotElement)\n .assignedElements()\n .find(el => el.tagName.toLowerCase() === \"a\") as HTMLAnchorElement;\n\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const anchor = this.querySelector(\"a\");\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n render() {\n /** When removing href, link is no longer focusable */\n return html`<slot class=\"nav-link \" @slotchange=${this._handleSlotChange}></slot> `;\n }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;AAKA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;;QAGzE,IAAI,CAAA,IAAA,GAAoE,SAAS,CAAC;;QAGlF,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KA+DlB;AA7DS,IAAA,cAAc,CAAC,MAAyB,EAAA;AAC9C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;SACzC;AACD,QAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,YAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACvC;aAAM;AACL,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACtC;KACF;AAEO,IAAA,YAAY,CAAC,MAAyB,EAAA;AAC5C,QAAA,MAAM,qBAAqB,GAAG;AAC5B,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,EAAE,EAAE,IAAI;SACT,CAAC;QACF,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAW,WAAW,CAAC,CAAC;AAE7D,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;AAEnB,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAC5D,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YAEjD,IAAI,CAAC,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aACjC;YAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aAClC;AACH,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,MAAM,GAAI,CAAC,CAAC,MAA0B;AACzC,aAAA,gBAAgB,EAAE;AAClB,aAAA,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,CAAsB,CAAC;QAErE,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAO,IAAI,CAAA,CAAA,oCAAA,EAAuC,IAAI,CAAC,iBAAiB,WAAW,CAAC;KACrF;;AA7EM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGzE,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACwC,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlF,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
|
|
@@ -113,7 +113,7 @@ let Ge;Ye?.({LitElement:Je}),(globalThis.litElementVersions??=[]).push("4.1.0"),
|
|
|
113
113
|
* @license
|
|
114
114
|
* Copyright 2020 Google LLC
|
|
115
115
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
116
|
-
*/,Vt=Symbol.for(""),St=e=>{if(e?.r===Vt)return e?._$litStatic$},$t=(e,...t)=>({_$litStatic$:t.reduce(((t,i,a)=>t+(e=>{if(void 0!==e._$litStatic$)return e._$litStatic$;throw new Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(i)+e[a+1]),e[0]),r:Vt}),kt=new Map,Pt=(Bt=oe,(e,...t)=>{const i=t.length;let a,n;const o=[],s=[];let r,l=0,c=!1;for(;l<i;){for(r=e[l];l<i&&void 0!==(n=t[l],a=St(n));)r+=a+e[++l],c=!0;l!==i&&s.push(n),o.push(r),l++}if(l===i&&o.push(e[i]),c){const i=o.join("$$lit$$");void 0===(e=kt.get(i))&&(o.raw=o,kt.set(i,e=o)),t=s}return Bt(e,...t)});var Bt,Lt=$e`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}: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=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=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=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}: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);line-height:var(--sgds-line-height-32);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) 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-20);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-
|
|
116
|
+
*/,Vt=Symbol.for(""),St=e=>{if(e?.r===Vt)return e?._$litStatic$},$t=(e,...t)=>({_$litStatic$:t.reduce(((t,i,a)=>t+(e=>{if(void 0!==e._$litStatic$)return e._$litStatic$;throw new Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(i)+e[a+1]),e[0]),r:Vt}),kt=new Map,Pt=(Bt=oe,(e,...t)=>{const i=t.length;let a,n;const o=[],s=[];let r,l=0,c=!1;for(;l<i;){for(r=e[l];l<i&&void 0!==(n=t[l],a=St(n));)r+=a+e[++l],c=!0;l!==i&&s.push(n),o.push(r),l++}if(l===i&&o.push(e[i]),c){const i=o.join("$$lit$$");void 0===(e=kt.get(i))&&(o.raw=o,kt.set(i,e=o)),t=s}return Bt(e,...t)});var Bt,Lt=$e`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}: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=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=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=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}: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);line-height:var(--sgds-line-height-32);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) 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-20);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-0);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-16);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.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-24);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) 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:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;class At extends gt{constructor(){super(...arguments),this.variant="primary",this.tone="brand",this.size="md",this.active=!1,this.disabled=!1,this.target="_self"}focus(e){this.button.focus(e)}click(){this.button.click()}blur(){this.button.blur()}_handleBlur(){this.emit("sgds-blur")}_handleFocus(){this.emit("sgds-focus")}_handleClick(e){if(this.disabled||this.loading)return e.preventDefault(),void e.stopPropagation()}_handleKeydown(e){if("Enter"===e.key&&this.loading)return e.preventDefault(),void e.stopPropagation()}_assignSpinnerSize(e){return"xs"===e||"sm"===e?"xs":"md"===e||"lg"===e?"sm":void 0}_assignSpinnerTone(e,t){return"fixed-light"===e&&"primary"===t?"fixed-dark":"neutral"===e&&"primary"===t?"inverse":"fixed-light"===e||"primary"===t?"fixed-light":"neutral"!==e||"outline"!==t&&"ghost"!==t?"brand":"neutral"}}At.styles=[...gt.styles,Lt],e([st(".btn")],At.prototype,"button",void 0),e([it({reflect:!0})],At.prototype,"variant",void 0),e([it({reflect:!0})],At.prototype,"tone",void 0),e([it({reflect:!0})],At.prototype,"size",void 0),e([it({type:Boolean,reflect:!0})],At.prototype,"active",void 0),e([it({type:Boolean,reflect:!0})],At.prototype,"disabled",void 0),e([it({type:String,reflect:!0})],At.prototype,"href",void 0),e([it({type:String,reflect:!0})],At.prototype,"target",void 0),e([it({type:String,reflect:!0})],At.prototype,"download",void 0),e([it({type:String})],At.prototype,"ariaLabel",void 0),e([it({type:Boolean})],At.prototype,"loading",void 0);const Et={archive:oe`
|
|
117
117
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
118
118
|
<path
|
|
119
119
|
fill="currentColor"
|
|
@@ -57,11 +57,11 @@ let He;qe?.({LitElement:Fe}),(globalThis.litElementVersions??=[]).push("4.1.0"),
|
|
|
57
57
|
* @license
|
|
58
58
|
* Copyright 2018 Google LLC
|
|
59
59
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
60
|
-
*/const et=(tt=class extends Qe{constructor(e){if(super(e),e.type!==Ge||"class"!==e.name||e.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter((t=>e[t])).join(" ")+" "}update(e,[t]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==e.strings&&(this._staticClasses=new Set(e.strings.join(" ").split(/\s/).filter((e=>""!==e))));for(const e in t)t[e]&&!this._staticClasses?.has(e)&&this._previousClasses.add(e);return this.render(t)}const s=e.element.classList;for(const e of this._previousClasses)e in t||(s.remove(e),this._previousClasses.delete(e));for(const e in t){const i=!!t[e];i===this._previousClasses.has(e)||this._staticClasses?.has(e)||(i?(s.add(e),this._previousClasses.add(e)):(s.remove(e),this._previousClasses.delete(e)))}return ee}},(...e)=>({_$litDirective$:tt,values:e}));var tt,st=Se`: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-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-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.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;class it extends Fe{emit(e,t){const s=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(s),s}static define(e,t=this,s={}){if(customElements.get(e));else try{customElements.define(e,t,s)}catch(i){customElements.define(e,class extends t{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach((([e,t])=>{this.constructor.define(e,t)}))}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach((e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))})))}}function nt(e,t,s){return new Promise((i=>{if((null==s?void 0:s.duration)===1/0)throw new Error("Promise-based animations must be finite.");const n=e.animate(t,Object.assign(Object.assign({},s),{duration:ot()?0:null==s?void 0:s.duration}));n.addEventListener("cancel",i,{once:!0}),n.addEventListener("finish",i,{once:!0})}))}function ot(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function rt(e){return Promise.all(e.getAnimations().map((e=>new Promise((t=>{const s=requestAnimationFrame(t);e.addEventListener("cancel",(()=>s),{once:!0}),e.addEventListener("finish",(()=>s),{once:!0}),e.cancel()})))))}it.styles=[st],it.dependencies={},e([Je({type:Boolean,reflect:!0})],it.prototype,"ssr",void 0);const at=new Map,lt=new WeakMap;function dt(e,t){const s=lt.get(e);if(null==s?void 0:s[t])return s[t];const i=at.get(t);return i||{keyframes:[],options:{duration:0}}}function ht(e,t){at.set(e,function(e){return null!=e?e:{keyframes:[],options:{duration:0}}}(t))}function ct(e,t){return new Promise((s=>{e.addEventListener(t,(function i(n){n.target===e&&(e.removeEventListener(t,i),s())}))}))}function pt(e){const t=e.tagName.toLowerCase();return"-1"!==e.getAttribute("tabindex")&&(!e.hasAttribute("disabled")&&((!e.hasAttribute("aria-disabled")||"false"===e.getAttribute("aria-disabled"))&&(!("input"===t&&"radio"===e.getAttribute("type")&&!e.hasAttribute("checked"))&&(null!==e.offsetParent&&("hidden"!==window.getComputedStyle(e).visibility&&(!("audio"!==t&&"video"!==t||!e.hasAttribute("controls"))||(!!e.hasAttribute("tabindex")||(!(!e.hasAttribute("contenteditable")||"false"===e.getAttribute("contenteditable"))||["button","input","select","textarea","a","audio","video","summary"].includes(t)))))))))}let ut=[];class mt{constructor(e){this.tabDirection="forward",this.element=e,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this)}activate(){ut.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keyup",this.handleKeyUp)}deactivate(){ut=ut.filter((e=>e!==this.element)),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keyup",this.handleKeyUp)}isActive(){return ut[ut.length-1]===this.element}checkFocus(){if(this.isActive()&&!this.element.matches(":focus-within")){const{start:e,end:t}=function(e){var t,s;const i=[];return function e(t){t instanceof HTMLElement&&(i.push(t),null!==t.shadowRoot&&"open"===t.shadowRoot.mode&&e(t.shadowRoot)),[...t.children].forEach((t=>e(t)))}(e),{start:null!==(t=i.find((e=>pt(e))))&&void 0!==t?t:null,end:null!==(s=i.reverse().find((e=>pt(e))))&&void 0!==s?s:null}}(this.element),s="forward"===this.tabDirection?e:t;"function"==typeof(null==s?void 0:s.focus)&&s.focus({preventScroll:!0})}}handleFocusIn(){this.checkFocus()}handleKeyDown(e){"Tab"===e.key&&e.shiftKey&&(this.tabDirection="backward",requestAnimationFrame((()=>this.checkFocus())))}handleKeyUp(){this.tabDirection="forward"}}class gt{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some((e=>{var t;if(e.nodeType===e.TEXT_NODE&&""!==(null===(t=e.textContent)||void 0===t?void 0:t.trim()))return!0;if(e.nodeType===e.ELEMENT_NODE){const t=e;if("sl-visually-hidden"===t.tagName.toLowerCase())return!1;if(!t.hasAttribute("slot"))return!0}return!1}))}hasNamedSlot(e){return null!==this.host.querySelector(`:scope > [slot="${e}"]`)}test(e){return"[default]"===e?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(e){const t=e.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}}const ft=new Set;function vt(e){ft.add(e),document.body.style.overflow="hidden"}function yt(e){ft.delete(e),0===ft.size&&(document.body.style.overflow="")}var _t=Se`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([variant=light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([variant=dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.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:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.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)}`;function bt(e){return!!function(e){return!!customElements.get(e)}(e)||(console.error(`Custom element of name : ${e} is not registered. Remember to import the component file for custom element registration`),!1)}class wt extends it{constructor(){super(...arguments),this.ariaLabel="Close button",this.size="md",this.variant="default",this._clickHandler=()=>{}}_handleClick(){this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}firstUpdated(e){super.firstUpdated(e),bt("sgds-icon")}render(){return G`
|
|
61
|
-
<button class="btn-close" aria-label
|
|
60
|
+
*/const et=(tt=class extends Qe{constructor(e){if(super(e),e.type!==Ge||"class"!==e.name||e.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter((t=>e[t])).join(" ")+" "}update(e,[t]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==e.strings&&(this._staticClasses=new Set(e.strings.join(" ").split(/\s/).filter((e=>""!==e))));for(const e in t)t[e]&&!this._staticClasses?.has(e)&&this._previousClasses.add(e);return this.render(t)}const s=e.element.classList;for(const e of this._previousClasses)e in t||(s.remove(e),this._previousClasses.delete(e));for(const e in t){const i=!!t[e];i===this._previousClasses.has(e)||this._staticClasses?.has(e)||(i?(s.add(e),this._previousClasses.add(e)):(s.remove(e),this._previousClasses.delete(e)))}return ee}},(...e)=>({_$litDirective$:tt,values:e}));var tt,st=Se`: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-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-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.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;class it extends Fe{emit(e,t){const s=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(s),s}static define(e,t=this,s={}){if(customElements.get(e));else try{customElements.define(e,t,s)}catch(i){customElements.define(e,class extends t{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach((([e,t])=>{this.constructor.define(e,t)}))}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach((e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))})))}}function nt(e,t,s){return new Promise((i=>{if((null==s?void 0:s.duration)===1/0)throw new Error("Promise-based animations must be finite.");const n=e.animate(t,Object.assign(Object.assign({},s),{duration:ot()?0:null==s?void 0:s.duration}));n.addEventListener("cancel",i,{once:!0}),n.addEventListener("finish",i,{once:!0})}))}function ot(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function rt(e){return Promise.all(e.getAnimations().map((e=>new Promise((t=>{const s=requestAnimationFrame(t);e.addEventListener("cancel",(()=>s),{once:!0}),e.addEventListener("finish",(()=>s),{once:!0}),e.cancel()})))))}it.styles=[st],it.dependencies={},e([Je({type:Boolean,reflect:!0})],it.prototype,"ssr",void 0);const at=new Map,lt=new WeakMap;function dt(e,t){const s=lt.get(e);if(null==s?void 0:s[t])return s[t];const i=at.get(t);return i||{keyframes:[],options:{duration:0}}}function ht(e,t){at.set(e,function(e){return null!=e?e:{keyframes:[],options:{duration:0}}}(t))}function ct(e,t){return new Promise((s=>{e.addEventListener(t,(function i(n){n.target===e&&(e.removeEventListener(t,i),s())}))}))}function pt(e){const t=e.tagName.toLowerCase();return"-1"!==e.getAttribute("tabindex")&&(!e.hasAttribute("disabled")&&((!e.hasAttribute("aria-disabled")||"false"===e.getAttribute("aria-disabled"))&&(!("input"===t&&"radio"===e.getAttribute("type")&&!e.hasAttribute("checked"))&&(null!==e.offsetParent&&("hidden"!==window.getComputedStyle(e).visibility&&(!("audio"!==t&&"video"!==t||!e.hasAttribute("controls"))||(!!e.hasAttribute("tabindex")||(!(!e.hasAttribute("contenteditable")||"false"===e.getAttribute("contenteditable"))||["button","input","select","textarea","a","audio","video","summary"].includes(t)))))))))}let ut=[];class mt{constructor(e){this.tabDirection="forward",this.element=e,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this)}activate(){ut.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keyup",this.handleKeyUp)}deactivate(){ut=ut.filter((e=>e!==this.element)),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keyup",this.handleKeyUp)}isActive(){return ut[ut.length-1]===this.element}checkFocus(){if(this.isActive()&&!this.element.matches(":focus-within")){const{start:e,end:t}=function(e){var t,s;const i=[];return function e(t){t instanceof HTMLElement&&(i.push(t),null!==t.shadowRoot&&"open"===t.shadowRoot.mode&&e(t.shadowRoot)),[...t.children].forEach((t=>e(t)))}(e),{start:null!==(t=i.find((e=>pt(e))))&&void 0!==t?t:null,end:null!==(s=i.reverse().find((e=>pt(e))))&&void 0!==s?s:null}}(this.element),s="forward"===this.tabDirection?e:t;"function"==typeof(null==s?void 0:s.focus)&&s.focus({preventScroll:!0})}}handleFocusIn(){this.checkFocus()}handleKeyDown(e){"Tab"===e.key&&e.shiftKey&&(this.tabDirection="backward",requestAnimationFrame((()=>this.checkFocus())))}handleKeyUp(){this.tabDirection="forward"}}class gt{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some((e=>{var t;if(e.nodeType===e.TEXT_NODE&&""!==(null===(t=e.textContent)||void 0===t?void 0:t.trim()))return!0;if(e.nodeType===e.ELEMENT_NODE){const t=e;if("sl-visually-hidden"===t.tagName.toLowerCase())return!1;if(!t.hasAttribute("slot"))return!0}return!1}))}hasNamedSlot(e){return null!==this.host.querySelector(`:scope > [slot="${e}"]`)}test(e){return"[default]"===e?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(e){const t=e.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}}const ft=new Set;function vt(e){ft.add(e),document.body.style.overflow="hidden"}function yt(e){ft.delete(e),0===ft.size&&(document.body.style.overflow="")}var _t=Se`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.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:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.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)}`;function bt(e){return!!function(e){return!!customElements.get(e)}(e)||(console.error(`Custom element of name : ${e} is not registered. Remember to import the component file for custom element registration`),!1)}class wt extends it{constructor(){super(...arguments),this.size="md",this.tone="default",this._clickHandler=()=>{}}_handleClick(){this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}firstUpdated(e){super.firstUpdated(e),bt("sgds-icon")}render(){return G`
|
|
61
|
+
<button class="btn-close" aria-label="Close button" @click=${this._handleClick}>
|
|
62
62
|
<sgds-icon name="cross" size=${this.size}></sgds-icon>
|
|
63
63
|
</button>
|
|
64
|
-
|
|
64
|
+
`}}wt.styles=[...it.styles,_t],e([Je({type:String,reflect:!0})],wt.prototype,"size",void 0),e([Je({type:String,reflect:!0})],wt.prototype,"tone",void 0);var St,$t,Pt=Se`: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));width:100%;z-index:2}.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-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.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-40);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-24);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}`,xt=Se`.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}`,Ct=Se`svg{vertical-align:middle}`;class Et extends it{constructor(){super(...arguments),this.hasSlotController=new gt(this,"footer"),this.open=!1,this.noAnimation=!1,this.size="md",this.hasFooterSlot=!1}connectedCallback(){super.connectedCallback(),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.modal=new mt(this),this._resizeHandler=this._debounce(this._onWindowResize.bind(this),200)}disconnectedCallback(){super.disconnectedCallback(),this._removeResizeListener(),yt(this)}firstUpdated(e){super.firstUpdated(e),this._onWindowResize(),this.dialog.hidden=!this.open,this.open&&(this.addOpenListeners(),this.modal.activate(),vt(this))}updated(){this.hasFooterSlot||(this.hasFooterSlot=this.hasSlotController.test("footer"))}_debounce(e,t){let s;return(...i)=>{clearTimeout(s),s=window.setTimeout((()=>e(...i)),t)}}_onWindowResize(){const e=this.panel.getBoundingClientRect().width,t=this.querySelectorAll("sgds-button[slot='footer']");this.panel&&(t.length<=1||(e<512||"fullscreen"===this.size&&e<768?t.forEach((e=>{e.fullWidth=!0})):t.forEach((e=>{e.fullWidth=!1}))))}_addResizeListener(){window.addEventListener("resize",this._resizeHandler)}_removeResizeListener(){window.removeEventListener("resize",this._resizeHandler)}async show(){if(!this.open)return this.open=!0,ct(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,ct(this,"sgds-after-hide")}requestClose(e){if(this.emit("sgds-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=dt(this,"modal.denyClose");nt(this.panel,e.keyframes)}else this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown(e){this.open&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}_overlayClickHandler(){"fullscreen"!==this.size&&this.requestClose("overlay")}async handleOpenChange(){if(this.open){this.emit("sgds-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.modal.activate(),vt(this),await Promise.all([rt(this.dialog),rt(this.overlay)]),this.dialog.hidden=!1;const e=dt(this,"modal.show"),t=dt(this,"modal.overlay.show");!this.noAnimation&&await Promise.all([nt(this.panel,e.keyframes,e.options),nt(this.overlay,t.keyframes,t.options)]),this.emit("sgds-after-show"),this.heading.focus(),this._addResizeListener()}else{this.emit("sgds-hide"),this.removeOpenListeners(),this.modal.deactivate(),await Promise.all([rt(this.dialog),rt(this.overlay)]);const e=dt(this,"modal.hide"),t=dt(this,"modal.overlay.hide");!this.noAnimation&&await Promise.all([nt(this.overlay,t.keyframes,t.options).then((()=>{this.overlay.hidden=!0})),nt(this.panel,e.keyframes,e.options).then((()=>{this.panel.hidden=!0}))]),this.dialog.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1,yt(this);const s=this.originalTrigger;"function"==typeof(null==s?void 0:s.focus)&&setTimeout((()=>s.focus())),this.emit("sgds-after-hide"),this._removeResizeListener()}}render(){return G`
|
|
65
65
|
<div
|
|
66
66
|
class=${et({modal:!0,show:this.open,"has-footer":this.hasFooterSlot})}
|
|
67
67
|
>
|
|
@@ -79,7 +79,7 @@ let He;qe?.({LitElement:Fe}),(globalThis.litElementVersions??=[]).push("4.1.0"),
|
|
|
79
79
|
<sgds-close-button
|
|
80
80
|
class="modal-header__close"
|
|
81
81
|
@click="${()=>this.requestClose("close-button")}"
|
|
82
|
-
|
|
82
|
+
aria-label="close modal"
|
|
83
83
|
></sgds-close-button>
|
|
84
84
|
<div class="modal-header">
|
|
85
85
|
<div class="modal-header__title-description">
|