@govtechsg/sgds-web-component 3.3.2 → 3.3.3-rc.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/Masthead/index.js +2 -2
- package/base/card.js +1 -1
- package/base/sgds-element2.js +1 -1
- package/components/Accordion/index.umd.js +1 -1
- package/components/Alert/index.umd.js +2 -2
- package/components/Badge/index.umd.js +1 -1
- package/components/Breadcrumb/index.umd.js +36 -11
- package/components/Breadcrumb/index.umd.js.map +1 -1
- package/components/Button/button.js +1 -1
- package/components/Button/index.umd.js +61 -54
- package/components/Button/index.umd.js.map +1 -1
- package/components/Button/sgds-button.d.ts +1 -6
- package/components/Button/sgds-button.js +11 -27
- package/components/Button/sgds-button.js.map +1 -1
- package/components/Card/index.umd.js +3330 -3251
- package/components/Card/index.umd.js.map +1 -1
- package/components/Card/sgds-card.d.ts +1 -0
- package/components/Card/sgds-card.js +9 -3
- package/components/Card/sgds-card.js.map +1 -1
- package/components/Checkbox/index.umd.js +1 -1
- package/components/ComboBox/index.umd.js +2 -2
- package/components/Datepicker/index.umd.js +62 -29
- package/components/Datepicker/index.umd.js.map +1 -1
- package/components/DescriptionList/index.umd.js +1 -1
- package/components/Divider/index.umd.js +1 -1
- package/components/Drawer/index.umd.js +1 -1
- package/components/Dropdown/index.umd.js +2 -2
- package/components/FileUpload/index.umd.js +62 -29
- package/components/FileUpload/index.umd.js.map +1 -1
- package/components/Footer/footer-item.js +1 -1
- package/components/Footer/index.umd.js +89 -45
- package/components/Footer/index.umd.js.map +1 -1
- package/components/Footer/sgds-footer.d.ts +1 -1
- package/components/Footer/sgds-footer.js +39 -44
- package/components/Footer/sgds-footer.js.map +1 -1
- package/components/Icon/icon.js +1 -1
- package/components/Icon/index.umd.js +2 -2
- package/components/IconButton/index.umd.js +2 -2
- package/components/IconCard/index.umd.js +93 -14
- package/components/IconCard/index.umd.js.map +1 -1
- package/components/IconCard/sgds-icon-card.d.ts +1 -0
- package/components/IconCard/sgds-icon-card.js +8 -3
- package/components/IconCard/sgds-icon-card.js.map +1 -1
- package/components/IconList/index.umd.js +1 -1
- package/components/ImageCard/index.umd.js +93 -14
- package/components/ImageCard/index.umd.js.map +1 -1
- package/components/ImageCard/sgds-image-card.d.ts +1 -0
- package/components/ImageCard/sgds-image-card.js +8 -3
- package/components/ImageCard/sgds-image-card.js.map +1 -1
- package/components/Input/index.umd.js +2 -2
- package/components/Link/index.umd.js +35 -10
- package/components/Link/index.umd.js.map +1 -1
- package/components/Link/link.js +1 -1
- package/components/Link/sgds-link.d.ts +3 -0
- package/components/Link/sgds-link.js +33 -8
- package/components/Link/sgds-link.js.map +1 -1
- package/components/Mainnav/index.umd.js +2 -2
- package/components/Masthead/index.umd.js +2 -2
- package/components/Masthead/masthead.js +1 -1
- package/components/Modal/index.umd.js +1 -1
- package/components/OverflowMenu/index.umd.js +2 -2
- package/components/Pagination/index.umd.js +62 -29
- package/components/Pagination/index.umd.js.map +1 -1
- package/components/ProgressBar/index.umd.js +1 -1
- package/components/QuantityToggle/index.umd.js +2 -2
- package/components/Radio/index.umd.js +1 -1
- package/components/Select/index.umd.js +2 -2
- package/components/Sidenav/index.umd.js +2 -2
- package/components/Skeleton/index.umd.js +1 -1
- package/components/Spinner/index.umd.js +1 -1
- package/components/Stepper/index.umd.js +2 -2
- package/components/Subnav/index.umd.js +3 -3
- package/components/Subnav/subnav-item.js +1 -1
- package/components/Switch/index.umd.js +1 -1
- package/components/Tab/index.umd.js +1 -1
- package/components/Table/index.umd.js +1 -1
- package/components/TableOfContents/index.umd.js +1 -1
- package/components/Textarea/index.umd.js +1 -1
- package/components/ThumbnailCard/index.umd.js +93 -14
- package/components/ThumbnailCard/index.umd.js.map +1 -1
- package/components/ThumbnailCard/sgds-thumbnail-card.d.ts +1 -0
- package/components/ThumbnailCard/sgds-thumbnail-card.js +8 -3
- package/components/ThumbnailCard/sgds-thumbnail-card.js.map +1 -1
- package/components/Toast/index.umd.js +1 -1
- package/components/Tooltip/index.umd.js +1 -1
- package/components/index.umd.js +113 -95
- package/components/index.umd.js.map +1 -1
- package/index.umd.js +115 -97
- package/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/react/base/card.cjs.js +1 -1
- package/react/base/card.js +1 -1
- package/react/base/sgds-element.cjs2.js +1 -1
- package/react/base/sgds-element2.js +1 -1
- package/react/components/Button/button.cjs.js +1 -1
- package/react/components/Button/button.js +1 -1
- package/react/components/Button/sgds-button.cjs.js +10 -26
- package/react/components/Button/sgds-button.cjs.js.map +1 -1
- package/react/components/Button/sgds-button.js +11 -27
- package/react/components/Button/sgds-button.js.map +1 -1
- package/react/components/Card/sgds-card.cjs.js +9 -3
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js +9 -3
- package/react/components/Card/sgds-card.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/sgds-footer.cjs.js +38 -43
- package/react/components/Footer/sgds-footer.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer.js +39 -44
- package/react/components/Footer/sgds-footer.js.map +1 -1
- package/react/components/Icon/icon.cjs.js +1 -1
- package/react/components/Icon/icon.js +1 -1
- package/react/components/IconCard/sgds-icon-card.cjs.js +8 -3
- package/react/components/IconCard/sgds-icon-card.cjs.js.map +1 -1
- package/react/components/IconCard/sgds-icon-card.js +8 -3
- package/react/components/IconCard/sgds-icon-card.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.cjs.js +8 -3
- package/react/components/ImageCard/sgds-image-card.cjs.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.js +8 -3
- package/react/components/ImageCard/sgds-image-card.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 +33 -8
- package/react/components/Link/sgds-link.cjs.js.map +1 -1
- package/react/components/Link/sgds-link.js +33 -8
- package/react/components/Link/sgds-link.js.map +1 -1
- package/react/components/Masthead/masthead.cjs.js +1 -1
- package/react/components/Masthead/masthead.js +1 -1
- package/react/components/Subnav/subnav-item.cjs.js +1 -1
- package/react/components/Subnav/subnav-item.js +1 -1
- package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js +8 -3
- package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js.map +1 -1
- package/react/components/ThumbnailCard/sgds-thumbnail-card.js +8 -3
- package/react/components/ThumbnailCard/sgds-thumbnail-card.js.map +1 -1
|
@@ -4499,7 +4499,7 @@
|
|
|
4499
4499
|
*/
|
|
4500
4500
|
const classMap = directive(ClassMapDirective);
|
|
4501
4501
|
|
|
4502
|
-
var css_248z$8 = 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}}
|
|
4502
|
+
var css_248z$8 = 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}}::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}}`;
|
|
4503
4503
|
|
|
4504
4504
|
/**
|
|
4505
4505
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -4560,7 +4560,7 @@
|
|
|
4560
4560
|
/** @internal */
|
|
4561
4561
|
SgdsElement.dependencies = {};
|
|
4562
4562
|
|
|
4563
|
-
var css_248z$7 = css
|
|
4563
|
+
var css_248z$7 = css`:host{display:inline-flex}.nav-link::slotted(a){color:var(--sgds-link-color-default);cursor:pointer;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])){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)}`;
|
|
4564
4564
|
|
|
4565
4565
|
/**
|
|
4566
4566
|
* @summary Link allows users to click and navigate their way from page to page
|
|
@@ -4575,16 +4575,41 @@
|
|
|
4575
4575
|
/** when true, sets the active stylings of the link */
|
|
4576
4576
|
this.variant = "primary";
|
|
4577
4577
|
}
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
|
|
4578
|
+
_processAnchor(anchor) {
|
|
4579
|
+
if (anchor.hasAttribute("disabled")) {
|
|
4580
|
+
anchor.setAttribute("href", "javascript:void(0)");
|
|
4581
|
+
anchor.setAttribute("tabindex", "-1");
|
|
4582
|
+
}
|
|
4583
|
+
else {
|
|
4584
|
+
anchor.setAttribute("tabindex", "0");
|
|
4585
|
+
}
|
|
4586
|
+
}
|
|
4587
|
+
_processIcon(anchor) {
|
|
4588
|
+
const icons = anchor.querySelectorAll("sgds-icon");
|
|
4589
|
+
icons.forEach(icon => {
|
|
4590
|
+
icon.classList.remove("icon-left", "icon-right");
|
|
4591
|
+
if (!icon.previousElementSibling && !icon.previousSibling) {
|
|
4592
|
+
icon.classList.add("icon-left");
|
|
4584
4593
|
}
|
|
4585
|
-
|
|
4586
|
-
|
|
4594
|
+
if (!icon.nextElementSibling && !icon.nextSibling) {
|
|
4595
|
+
icon.classList.add("icon-right");
|
|
4587
4596
|
}
|
|
4597
|
+
});
|
|
4598
|
+
}
|
|
4599
|
+
_handleSlotChange(e) {
|
|
4600
|
+
const anchor = e.target
|
|
4601
|
+
.assignedElements()
|
|
4602
|
+
.find(el => el.tagName.toLowerCase() === "a");
|
|
4603
|
+
if (anchor) {
|
|
4604
|
+
this._processAnchor(anchor);
|
|
4605
|
+
this._processIcon(anchor);
|
|
4606
|
+
}
|
|
4607
|
+
}
|
|
4608
|
+
firstUpdated() {
|
|
4609
|
+
const anchor = this.querySelector("a");
|
|
4610
|
+
if (anchor) {
|
|
4611
|
+
this._processAnchor(anchor);
|
|
4612
|
+
this._processIcon(anchor);
|
|
4588
4613
|
}
|
|
4589
4614
|
}
|
|
4590
4615
|
render() {
|
|
@@ -4600,7 +4625,7 @@
|
|
|
4600
4625
|
property({ type: String, reflect: true })
|
|
4601
4626
|
], SgdsLink.prototype, "variant", void 0);
|
|
4602
4627
|
|
|
4603
|
-
var css_248z$6 = 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);
|
|
4628
|
+
var css_248z$6 = 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);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)}`;
|
|
4604
4629
|
|
|
4605
4630
|
var css_248z$5 = 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}`;
|
|
4606
4631
|
|
|
@@ -4669,6 +4694,56 @@
|
|
|
4669
4694
|
property({ type: String, reflect: true })
|
|
4670
4695
|
], CardElement.prototype, "orientation", void 0);
|
|
4671
4696
|
|
|
4697
|
+
class HasSlotController {
|
|
4698
|
+
constructor(host, ...slotNames) {
|
|
4699
|
+
this.slotNames = [];
|
|
4700
|
+
(this.host = host).addController(this);
|
|
4701
|
+
this.slotNames = slotNames;
|
|
4702
|
+
this.handleSlotChange = this.handleSlotChange.bind(this);
|
|
4703
|
+
}
|
|
4704
|
+
hasDefaultSlot() {
|
|
4705
|
+
return [...this.host.childNodes].some(node => {
|
|
4706
|
+
var _a;
|
|
4707
|
+
if (node.nodeType === node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== "") {
|
|
4708
|
+
return true;
|
|
4709
|
+
}
|
|
4710
|
+
if (node.nodeType === node.ELEMENT_NODE) {
|
|
4711
|
+
const el = node;
|
|
4712
|
+
const tagName = el.tagName.toLowerCase();
|
|
4713
|
+
// Ignore visually hidden elements since they aren't rendered
|
|
4714
|
+
if (tagName === "sl-visually-hidden") {
|
|
4715
|
+
return false;
|
|
4716
|
+
}
|
|
4717
|
+
// If it doesn't have a slot attribute, it's part of the default slot
|
|
4718
|
+
if (!el.hasAttribute("slot")) {
|
|
4719
|
+
return true;
|
|
4720
|
+
}
|
|
4721
|
+
}
|
|
4722
|
+
return false;
|
|
4723
|
+
});
|
|
4724
|
+
}
|
|
4725
|
+
hasNamedSlot(name) {
|
|
4726
|
+
return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
|
|
4727
|
+
}
|
|
4728
|
+
test(slotName) {
|
|
4729
|
+
return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
|
|
4730
|
+
}
|
|
4731
|
+
hostConnected() {
|
|
4732
|
+
var _a;
|
|
4733
|
+
(_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener("slotchange", this.handleSlotChange);
|
|
4734
|
+
}
|
|
4735
|
+
hostDisconnected() {
|
|
4736
|
+
var _a;
|
|
4737
|
+
(_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener("slotchange", this.handleSlotChange);
|
|
4738
|
+
}
|
|
4739
|
+
handleSlotChange(event) {
|
|
4740
|
+
const slot = event.target;
|
|
4741
|
+
if ((this.slotNames.includes("[default]") && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
|
|
4742
|
+
this.host.requestUpdate();
|
|
4743
|
+
}
|
|
4744
|
+
}
|
|
4745
|
+
}
|
|
4746
|
+
|
|
4672
4747
|
var css_248z = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:auto;max-width:100%}`;
|
|
4673
4748
|
|
|
4674
4749
|
/**
|
|
@@ -4687,6 +4762,7 @@
|
|
|
4687
4762
|
super(...arguments);
|
|
4688
4763
|
/** Removes the card's internal padding when set to true. */
|
|
4689
4764
|
this.noPadding = false;
|
|
4765
|
+
this.hasSlotController = new HasSlotController(this, "description");
|
|
4690
4766
|
}
|
|
4691
4767
|
firstUpdated() {
|
|
4692
4768
|
if (this._thumbnailNode.length === 0) {
|
|
@@ -4704,6 +4780,7 @@
|
|
|
4704
4780
|
render() {
|
|
4705
4781
|
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
4706
4782
|
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
4783
|
+
const hasDescriptionSlot = this.hasSlotController.test("description");
|
|
4707
4784
|
return html `
|
|
4708
4785
|
<${tag}
|
|
4709
4786
|
class="card ${classMap({
|
|
@@ -4727,9 +4804,11 @@
|
|
|
4727
4804
|
</div>
|
|
4728
4805
|
<slot></slot>
|
|
4729
4806
|
</div>
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4807
|
+
${hasDescriptionSlot
|
|
4808
|
+
? html `<p class="card-text">
|
|
4809
|
+
<slot name="description"></slot>
|
|
4810
|
+
</p>`
|
|
4811
|
+
: nothing}
|
|
4733
4812
|
<slot name="lower"></slot>
|
|
4734
4813
|
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
4735
4814
|
</div>
|