@govtechsg/sgds-web-component 3.2.0-rc.4 → 3.3.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 +46 -15
- package/base/card-element.js +2 -53
- package/base/card-element.js.map +1 -1
- package/base/card.js +1 -1
- package/components/Breadcrumb/index.umd.js +3 -3
- package/components/Breadcrumb/index.umd.js.map +1 -1
- package/components/Breadcrumb/sgds-breadcrumb.js +1 -1
- package/components/Breadcrumb/sgds-breadcrumb.js.map +1 -1
- package/components/Card/card.js +1 -1
- package/components/Card/index.umd.js +76 -87
- package/components/Card/index.umd.js.map +1 -1
- package/components/Card/sgds-card.js +56 -16
- package/components/Card/sgds-card.js.map +1 -1
- package/components/Dropdown/dropdown.js +1 -1
- package/components/Dropdown/index.umd.js +1 -1
- package/components/Footer/index.umd.js +40 -84
- package/components/Footer/index.umd.js.map +1 -1
- package/components/Footer/sgds-footer.js +41 -36
- package/components/Footer/sgds-footer.js.map +1 -1
- package/components/Link/index.umd.js +2 -2
- package/components/Link/index.umd.js.map +1 -1
- package/components/Link/link.js +1 -1
- package/components/Link/sgds-link.js +1 -1
- package/components/Link/sgds-link.js.map +1 -1
- package/components/Mainnav/index.umd.js +4 -4
- package/components/Mainnav/index.umd.js.map +1 -1
- package/components/Mainnav/mainnav-item.js +1 -1
- package/components/Mainnav/mainnav.js +1 -1
- package/components/Mainnav/sgds-mainnav.js +1 -1
- package/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/components/Masthead/index.umd.js +46 -15
- package/components/Masthead/index.umd.js.map +1 -1
- package/components/Masthead/masthead.js +1 -1
- package/components/Masthead/sgds-masthead.js +45 -14
- package/components/Masthead/sgds-masthead.js.map +1 -1
- package/components/index.js +0 -4
- package/components/index.js.map +1 -1
- package/components/index.umd.js +281 -502
- package/components/index.umd.js.map +1 -1
- package/css/reboot.css +0 -1
- package/index.js +0 -4
- package/index.js.map +1 -1
- package/index.umd.js +295 -520
- package/index.umd.js.map +1 -1
- package/{components → internals}/OverflowMenu/sgds-overflow-menu.js +3 -3
- package/internals/OverflowMenu/sgds-overflow-menu.js.map +1 -0
- package/package.json +1 -1
- package/react/base/card-element.cjs.js +1 -52
- package/react/base/card-element.cjs.js.map +1 -1
- package/react/base/card-element.js +2 -53
- package/react/base/card-element.js.map +1 -1
- package/react/base/card.cjs.js +1 -1
- package/react/base/card.js +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb.js +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb.js.map +1 -1
- package/react/components/Card/card.cjs.js +1 -1
- package/react/components/Card/card.js +1 -1
- package/react/components/Card/sgds-card.cjs.js +55 -15
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js +56 -16
- package/react/components/Card/sgds-card.js.map +1 -1
- package/react/components/Dropdown/dropdown.cjs.js +1 -1
- package/react/components/Dropdown/dropdown.js +1 -1
- package/react/components/Footer/sgds-footer.cjs.js +40 -35
- package/react/components/Footer/sgds-footer.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer.js +41 -36
- package/react/components/Footer/sgds-footer.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 +1 -1
- package/react/components/Link/sgds-link.cjs.js.map +1 -1
- package/react/components/Link/sgds-link.js +1 -1
- package/react/components/Link/sgds-link.js.map +1 -1
- package/react/components/Mainnav/mainnav-item.cjs.js +1 -1
- package/react/components/Mainnav/mainnav-item.js +1 -1
- package/react/components/Mainnav/mainnav.cjs.js +1 -1
- package/react/components/Mainnav/mainnav.js +1 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js +1 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.js +1 -1
- package/react/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/react/components/Masthead/masthead.cjs.js +1 -1
- package/react/components/Masthead/masthead.js +1 -1
- package/react/components/Masthead/sgds-masthead.cjs.js +45 -14
- package/react/components/Masthead/sgds-masthead.cjs.js.map +1 -1
- package/react/components/Masthead/sgds-masthead.js +45 -14
- package/react/components/Masthead/sgds-masthead.js.map +1 -1
- package/react/index.cjs.js +70 -78
- package/react/index.cjs.js.map +1 -1
- package/react/index.js +0 -4
- package/react/index.js.map +1 -1
- package/react/{components → internals}/OverflowMenu/sgds-overflow-menu.cjs.js +3 -3
- package/react/internals/OverflowMenu/sgds-overflow-menu.cjs.js.map +1 -0
- package/react/{components → internals}/OverflowMenu/sgds-overflow-menu.js +3 -3
- package/react/internals/OverflowMenu/sgds-overflow-menu.js.map +1 -0
- package/src/base/card-element.d.ts +0 -14
- package/src/components/Breadcrumb/sgds-breadcrumb.d.ts +1 -1
- package/src/components/Card/sgds-card.d.ts +15 -4
- package/src/components/Footer/sgds-footer.d.ts +1 -1
- package/src/components/Link/sgds-link.d.ts +2 -2
- package/src/components/index.d.ts +0 -4
- package/src/index.d.ts +0 -4
- package/src/{components → internals}/OverflowMenu/sgds-overflow-menu.d.ts +3 -3
- package/src/react/index.d.ts +0 -4
- package/themes/root.css +2 -0
- package/components/IconCard/icon-card.js +0 -6
- package/components/IconCard/icon-card.js.map +0 -1
- package/components/IconCard/index.js +0 -4
- package/components/IconCard/index.js.map +0 -1
- package/components/IconCard/index.umd.js +0 -4760
- package/components/IconCard/index.umd.js.map +0 -1
- package/components/IconCard/sgds-icon-card.js +0 -83
- package/components/IconCard/sgds-icon-card.js.map +0 -1
- package/components/ImageCard/image-card.js +0 -6
- package/components/ImageCard/image-card.js.map +0 -1
- package/components/ImageCard/index.js +0 -4
- package/components/ImageCard/index.js.map +0 -1
- package/components/ImageCard/index.umd.js +0 -4774
- package/components/ImageCard/index.umd.js.map +0 -1
- package/components/ImageCard/sgds-image-card.js +0 -97
- package/components/ImageCard/sgds-image-card.js.map +0 -1
- package/components/OverflowMenu/index.js +0 -5
- package/components/OverflowMenu/index.js.map +0 -1
- package/components/OverflowMenu/index.umd.js +0 -11129
- package/components/OverflowMenu/index.umd.js.map +0 -1
- package/components/OverflowMenu/sgds-overflow-menu.js.map +0 -1
- package/components/ThumbnailCard/index.js +0 -4
- package/components/ThumbnailCard/index.js.map +0 -1
- package/components/ThumbnailCard/index.umd.js +0 -4764
- package/components/ThumbnailCard/index.umd.js.map +0 -1
- package/components/ThumbnailCard/sgds-thumbnail-card.js +0 -87
- package/components/ThumbnailCard/sgds-thumbnail-card.js.map +0 -1
- package/components/ThumbnailCard/thumbnail-card.js +0 -6
- package/components/ThumbnailCard/thumbnail-card.js.map +0 -1
- package/react/components/IconCard/icon-card.cjs.js +0 -11
- package/react/components/IconCard/icon-card.cjs.js.map +0 -1
- package/react/components/IconCard/icon-card.js +0 -7
- package/react/components/IconCard/icon-card.js.map +0 -1
- package/react/components/IconCard/sgds-icon-card.cjs.js +0 -89
- package/react/components/IconCard/sgds-icon-card.cjs.js.map +0 -1
- package/react/components/IconCard/sgds-icon-card.js +0 -84
- package/react/components/IconCard/sgds-icon-card.js.map +0 -1
- package/react/components/ImageCard/image-card.cjs.js +0 -11
- package/react/components/ImageCard/image-card.cjs.js.map +0 -1
- package/react/components/ImageCard/image-card.js +0 -7
- package/react/components/ImageCard/image-card.js.map +0 -1
- package/react/components/ImageCard/sgds-image-card.cjs.js +0 -103
- package/react/components/ImageCard/sgds-image-card.cjs.js.map +0 -1
- package/react/components/ImageCard/sgds-image-card.js +0 -98
- package/react/components/ImageCard/sgds-image-card.js.map +0 -1
- package/react/components/OverflowMenu/sgds-overflow-menu.cjs.js.map +0 -1
- package/react/components/OverflowMenu/sgds-overflow-menu.js.map +0 -1
- package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js +0 -93
- package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js.map +0 -1
- package/react/components/ThumbnailCard/sgds-thumbnail-card.js +0 -88
- package/react/components/ThumbnailCard/sgds-thumbnail-card.js.map +0 -1
- package/react/components/ThumbnailCard/thumbnail-card.cjs.js +0 -11
- package/react/components/ThumbnailCard/thumbnail-card.cjs.js.map +0 -1
- package/react/components/ThumbnailCard/thumbnail-card.js +0 -7
- package/react/components/ThumbnailCard/thumbnail-card.js.map +0 -1
- package/react/icon-card/index.cjs.js +0 -40
- package/react/icon-card/index.cjs.js.map +0 -1
- package/react/icon-card/index.js +0 -16
- package/react/icon-card/index.js.map +0 -1
- package/react/image-card/index.cjs.js +0 -40
- package/react/image-card/index.cjs.js.map +0 -1
- package/react/image-card/index.js +0 -16
- package/react/image-card/index.js.map +0 -1
- package/react/overflow-menu/index.cjs.js +0 -40
- package/react/overflow-menu/index.cjs.js.map +0 -1
- package/react/overflow-menu/index.js +0 -16
- package/react/overflow-menu/index.js.map +0 -1
- package/react/thumbnail-card/index.cjs.js +0 -40
- package/react/thumbnail-card/index.cjs.js.map +0 -1
- package/react/thumbnail-card/index.js +0 -16
- package/react/thumbnail-card/index.js.map +0 -1
- package/src/components/Card/types.d.ts +0 -3
- package/src/components/IconCard/index.d.ts +0 -6
- package/src/components/IconCard/sgds-icon-card.d.ts +0 -24
- package/src/components/ImageCard/index.d.ts +0 -6
- package/src/components/ImageCard/sgds-image-card.d.ts +0 -30
- package/src/components/ThumbnailCard/index.d.ts +0 -6
- package/src/components/ThumbnailCard/sgds-thumbnail-card.d.ts +0 -24
- package/src/react/icon-card/index.d.ts +0 -2
- package/src/react/image-card/index.d.ts +0 -2
- package/src/react/overflow-menu/index.d.ts +0 -2
- package/src/react/thumbnail-card/index.d.ts +0 -2
- /package/{components → internals}/OverflowMenu/overflow-menu.js +0 -0
- /package/{components → internals}/OverflowMenu/overflow-menu.js.map +0 -0
- /package/react/{components → internals}/OverflowMenu/overflow-menu.cjs.js +0 -0
- /package/react/{components → internals}/OverflowMenu/overflow-menu.cjs.js.map +0 -0
- /package/react/{components → internals}/OverflowMenu/overflow-menu.js +0 -0
- /package/react/{components → internals}/OverflowMenu/overflow-menu.js.map +0 -0
- /package/src/{components → internals}/OverflowMenu/index.d.ts +0 -0
package/index.umd.js
CHANGED
|
@@ -4382,7 +4382,7 @@
|
|
|
4382
4382
|
});
|
|
4383
4383
|
}
|
|
4384
4384
|
|
|
4385
|
-
var css_248z$
|
|
4385
|
+
var css_248z$1h = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
|
|
4386
4386
|
|
|
4387
4387
|
/**
|
|
4388
4388
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -4439,11 +4439,11 @@
|
|
|
4439
4439
|
});
|
|
4440
4440
|
}
|
|
4441
4441
|
}
|
|
4442
|
-
SgdsElement.styles = [css_248z$
|
|
4442
|
+
SgdsElement.styles = [css_248z$1h];
|
|
4443
4443
|
/** @internal */
|
|
4444
4444
|
SgdsElement.dependencies = {};
|
|
4445
4445
|
|
|
4446
|
-
var css_248z$
|
|
4446
|
+
var css_248z$1g = css`:host([variant=border]) .accordion{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md)}`;
|
|
4447
4447
|
|
|
4448
4448
|
const VALID_KEYS$1 = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
|
|
4449
4449
|
/**
|
|
@@ -4515,7 +4515,7 @@
|
|
|
4515
4515
|
`;
|
|
4516
4516
|
}
|
|
4517
4517
|
}
|
|
4518
|
-
SgdsAccordion.styles = [...SgdsElement.styles, css_248z$
|
|
4518
|
+
SgdsAccordion.styles = [...SgdsElement.styles, css_248z$1g];
|
|
4519
4519
|
__decorate([
|
|
4520
4520
|
property({ type: Boolean, reflect: true })
|
|
4521
4521
|
], SgdsAccordion.prototype, "allowMultiple", void 0);
|
|
@@ -4790,7 +4790,7 @@
|
|
|
4790
4790
|
};
|
|
4791
4791
|
}
|
|
4792
4792
|
|
|
4793
|
-
var css_248z$
|
|
4793
|
+
var css_248z$1f = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-heading);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
|
|
4794
4794
|
|
|
4795
4795
|
/**
|
|
4796
4796
|
*
|
|
@@ -4925,7 +4925,7 @@
|
|
|
4925
4925
|
`;
|
|
4926
4926
|
}
|
|
4927
4927
|
}
|
|
4928
|
-
SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$
|
|
4928
|
+
SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$1f];
|
|
4929
4929
|
__decorate([
|
|
4930
4930
|
query(".accordion-item")
|
|
4931
4931
|
], SgdsAccordionItem.prototype, "accordion", void 0);
|
|
@@ -5112,7 +5112,7 @@
|
|
|
5112
5112
|
*/
|
|
5113
5113
|
const ifDefined = (value) => value ?? nothing;
|
|
5114
5114
|
|
|
5115
|
-
var css_248z$
|
|
5115
|
+
var css_248z$1e = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
|
|
5116
5116
|
|
|
5117
5117
|
/**
|
|
5118
5118
|
* @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
|
|
@@ -5156,7 +5156,7 @@
|
|
|
5156
5156
|
`;
|
|
5157
5157
|
}
|
|
5158
5158
|
}
|
|
5159
|
-
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$
|
|
5159
|
+
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$1e];
|
|
5160
5160
|
__decorate([
|
|
5161
5161
|
property({ type: String })
|
|
5162
5162
|
], SgdsCloseButton.prototype, "ariaLabel", void 0);
|
|
@@ -7615,7 +7615,7 @@
|
|
|
7615
7615
|
"zoom-out": ZoomOut
|
|
7616
7616
|
};
|
|
7617
7617
|
|
|
7618
|
-
var css_248z$
|
|
7618
|
+
var css_248z$1d = css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
|
|
7619
7619
|
|
|
7620
7620
|
/**
|
|
7621
7621
|
* @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons from `SgdsIcon` library set
|
|
@@ -7641,7 +7641,7 @@
|
|
|
7641
7641
|
return icon ? icon : nothing;
|
|
7642
7642
|
}
|
|
7643
7643
|
}
|
|
7644
|
-
SgdsIcon.styles = [...SgdsElement.styles, css_248z$
|
|
7644
|
+
SgdsIcon.styles = [...SgdsElement.styles, css_248z$1d];
|
|
7645
7645
|
__decorate([
|
|
7646
7646
|
property({ type: String, reflect: true })
|
|
7647
7647
|
], SgdsIcon.prototype, "name", void 0);
|
|
@@ -7649,7 +7649,7 @@
|
|
|
7649
7649
|
property({ type: String, reflect: true })
|
|
7650
7650
|
], SgdsIcon.prototype, "size", void 0);
|
|
7651
7651
|
|
|
7652
|
-
var css_248z$
|
|
7652
|
+
var css_248z$1c = css`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
|
|
7653
7653
|
|
|
7654
7654
|
/**
|
|
7655
7655
|
* @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.
|
|
@@ -7711,7 +7711,7 @@
|
|
|
7711
7711
|
: nothing;
|
|
7712
7712
|
}
|
|
7713
7713
|
}
|
|
7714
|
-
SgdsAlert.styles = [...SgdsElement.styles, css_248z$
|
|
7714
|
+
SgdsAlert.styles = [...SgdsElement.styles, css_248z$1c];
|
|
7715
7715
|
/**@internal */
|
|
7716
7716
|
SgdsAlert.dependencies = {
|
|
7717
7717
|
"sgds-close-button": SgdsCloseButton,
|
|
@@ -7736,9 +7736,9 @@
|
|
|
7736
7736
|
watch("show")
|
|
7737
7737
|
], SgdsAlert.prototype, "_handleShowChange", null);
|
|
7738
7738
|
|
|
7739
|
-
var css_248z$
|
|
7739
|
+
var css_248z$1b = css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
|
|
7740
7740
|
|
|
7741
|
-
var css_248z$
|
|
7741
|
+
var css_248z$1a = css`::slotted(a[target=_blank]:after),a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}`;
|
|
7742
7742
|
|
|
7743
7743
|
/**
|
|
7744
7744
|
* @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`
|
|
@@ -7752,7 +7752,7 @@
|
|
|
7752
7752
|
`;
|
|
7753
7753
|
}
|
|
7754
7754
|
}
|
|
7755
|
-
SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$
|
|
7755
|
+
SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$1a, css_248z$1b];
|
|
7756
7756
|
__decorate([
|
|
7757
7757
|
property({ type: String, reflect: true })
|
|
7758
7758
|
], SgdsAlertLink.prototype, "href", void 0);
|
|
@@ -7763,7 +7763,7 @@
|
|
|
7763
7763
|
register("sgds-alert", SgdsAlert);
|
|
7764
7764
|
register("sgds-alert-link", SgdsAlertLink);
|
|
7765
7765
|
|
|
7766
|
-
var css_248z$
|
|
7766
|
+
var css_248z$19 = css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24,24px);justify-content:center;max-width:192px;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}.badge.truncated .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}slot::slotted(*){font-size:14px;font-weight:400}`;
|
|
7767
7767
|
|
|
7768
7768
|
var top = 'top';
|
|
7769
7769
|
var bottom = 'bottom';
|
|
@@ -11869,7 +11869,7 @@
|
|
|
11869
11869
|
*/
|
|
11870
11870
|
const ref = directive(RefDirective);
|
|
11871
11871
|
|
|
11872
|
-
var css_248z$
|
|
11872
|
+
var css_248z$18 = css`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
|
|
11873
11873
|
|
|
11874
11874
|
/**
|
|
11875
11875
|
* @summary Tooltips display more information when users hover over, focus on, or interact with an element.
|
|
@@ -11962,7 +11962,7 @@
|
|
|
11962
11962
|
`;
|
|
11963
11963
|
}
|
|
11964
11964
|
}
|
|
11965
|
-
SgdsTooltip.styles = [...SgdsElement.styles, css_248z$
|
|
11965
|
+
SgdsTooltip.styles = [...SgdsElement.styles, css_248z$18];
|
|
11966
11966
|
__decorate([
|
|
11967
11967
|
property({ type: String })
|
|
11968
11968
|
], SgdsTooltip.prototype, "content", void 0);
|
|
@@ -12150,7 +12150,7 @@
|
|
|
12150
12150
|
: nothing;
|
|
12151
12151
|
}
|
|
12152
12152
|
}
|
|
12153
|
-
SgdsBadge.styles = [...SgdsElement.styles, css_248z$
|
|
12153
|
+
SgdsBadge.styles = [...SgdsElement.styles, css_248z$19];
|
|
12154
12154
|
/**@internal */
|
|
12155
12155
|
SgdsBadge.dependencies = {
|
|
12156
12156
|
"sgds-close-button": SgdsCloseButton,
|
|
@@ -12186,7 +12186,7 @@
|
|
|
12186
12186
|
|
|
12187
12187
|
register("sgds-badge", SgdsBadge);
|
|
12188
12188
|
|
|
12189
|
-
var css_248z$
|
|
12189
|
+
var css_248z$17 = css`:host([size=sm]) .overflow-btn{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.overflow-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border-radius:var(--sgds-border-radius-sm);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.overflow-btn:hover{background-color:var(--sgds-bg-translucent-subtle)}.overflow-btn:focus,.overflow-btn:focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
|
|
12190
12190
|
|
|
12191
12191
|
/**
|
|
12192
12192
|
* --------------------------------------------------------------------------
|
|
@@ -12959,9 +12959,9 @@
|
|
|
12959
12959
|
state()
|
|
12960
12960
|
], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
|
|
12961
12961
|
|
|
12962
|
-
var css_248z$
|
|
12962
|
+
var css_248z$16 = css`.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1000}.dropdown-menu.show{display:block}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
|
|
12963
12963
|
|
|
12964
|
-
var css_248z$
|
|
12964
|
+
var css_248z$15 = css`:host{position:relative}.dropdown{display:flex;height:inherit}`;
|
|
12965
12965
|
|
|
12966
12966
|
/**
|
|
12967
12967
|
* @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.
|
|
@@ -13040,7 +13040,7 @@
|
|
|
13040
13040
|
`;
|
|
13041
13041
|
}
|
|
13042
13042
|
}
|
|
13043
|
-
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$
|
|
13043
|
+
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$15, css_248z$16];
|
|
13044
13044
|
__decorate([
|
|
13045
13045
|
property({ type: Boolean, reflect: true, state: false })
|
|
13046
13046
|
], SgdsDropdown.prototype, "noFlip", void 0);
|
|
@@ -13057,7 +13057,7 @@
|
|
|
13057
13057
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
13058
13058
|
], SgdsDropdown.prototype, "_handleDisabled", null);
|
|
13059
13059
|
|
|
13060
|
-
var css_248z$
|
|
13060
|
+
var css_248z$14 = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
|
|
13061
13061
|
|
|
13062
13062
|
/**
|
|
13063
13063
|
* @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
|
|
@@ -13098,7 +13098,7 @@
|
|
|
13098
13098
|
`;
|
|
13099
13099
|
}
|
|
13100
13100
|
}
|
|
13101
|
-
SgdsDropdownItem.styles = [css_248z$
|
|
13101
|
+
SgdsDropdownItem.styles = [css_248z$15, css_248z$14];
|
|
13102
13102
|
SgdsDropdownItem.dependencies = {
|
|
13103
13103
|
"sgds-icon": SgdsIcon
|
|
13104
13104
|
};
|
|
@@ -13133,7 +13133,7 @@
|
|
|
13133
13133
|
`;
|
|
13134
13134
|
}
|
|
13135
13135
|
}
|
|
13136
|
-
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z$
|
|
13136
|
+
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z$17];
|
|
13137
13137
|
/** @internal */
|
|
13138
13138
|
SgdsOverflowMenu.dependencies = {
|
|
13139
13139
|
"sgds-dropdown": SgdsDropdown,
|
|
@@ -13144,7 +13144,7 @@
|
|
|
13144
13144
|
property({ type: String, reflect: true })
|
|
13145
13145
|
], SgdsOverflowMenu.prototype, "size", void 0);
|
|
13146
13146
|
|
|
13147
|
-
var css_248z$
|
|
13147
|
+
var css_248z$13 = css`.breadcrumb{display:flex;gap:var(--sgds-gap-xs)}`;
|
|
13148
13148
|
|
|
13149
13149
|
/**
|
|
13150
13150
|
* @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.
|
|
@@ -13215,7 +13215,7 @@
|
|
|
13215
13215
|
`;
|
|
13216
13216
|
}
|
|
13217
13217
|
}
|
|
13218
|
-
SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$
|
|
13218
|
+
SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$13];
|
|
13219
13219
|
SgdsBreadcrumb.dependencies = {
|
|
13220
13220
|
"sgds-overflow-menu": SgdsOverflowMenu
|
|
13221
13221
|
};
|
|
@@ -13226,7 +13226,7 @@
|
|
|
13226
13226
|
query("slot")
|
|
13227
13227
|
], SgdsBreadcrumb.prototype, "defaultSlot", void 0);
|
|
13228
13228
|
|
|
13229
|
-
var css_248z$
|
|
13229
|
+
var css_248z$12 = css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);justify-content:center;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])),.nav-link::slotted(a:focus:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
|
|
13230
13230
|
|
|
13231
13231
|
/**
|
|
13232
13232
|
* @summary Link allows users to click and navigate their way from page to page
|
|
@@ -13241,7 +13241,7 @@
|
|
|
13241
13241
|
/** when true, sets the active stylings of the link */
|
|
13242
13242
|
this.variant = "primary";
|
|
13243
13243
|
}
|
|
13244
|
-
_handleSlotChange(
|
|
13244
|
+
_handleSlotChange() {
|
|
13245
13245
|
const anchor = this.querySelector("a");
|
|
13246
13246
|
if (anchor) {
|
|
13247
13247
|
if (anchor.hasAttribute("disabled")) {
|
|
@@ -13258,7 +13258,7 @@
|
|
|
13258
13258
|
return html$1 `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
|
|
13259
13259
|
}
|
|
13260
13260
|
}
|
|
13261
|
-
SgdsLink.styles = [...SgdsElement.styles, css_248z$
|
|
13261
|
+
SgdsLink.styles = [...SgdsElement.styles, css_248z$12];
|
|
13262
13262
|
__decorate([
|
|
13263
13263
|
property({ type: String, reflect: true })
|
|
13264
13264
|
], SgdsLink.prototype, "size", void 0);
|
|
@@ -13266,7 +13266,7 @@
|
|
|
13266
13266
|
property({ type: String, reflect: true })
|
|
13267
13267
|
], SgdsLink.prototype, "variant", void 0);
|
|
13268
13268
|
|
|
13269
|
-
var css_248z$
|
|
13269
|
+
var css_248z$11 = css`:host{align-items:center;display:flex;gap:var(--sgds-gap-xs)}:host([active]) .nav-link::slotted(*){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default);pointer-events:none}:host([active]) .nav-link::slotted(:focus),:host([active]) .nav-link::slotted(:focus-visible),:host([active]) .nav-link::slotted(:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}.separator svg{display:block}:host(:last-of-type) .separator{display:none}`;
|
|
13270
13270
|
|
|
13271
13271
|
/**
|
|
13272
13272
|
* @summary Breadcrumb Item are navigational links used in Breadcrumb component
|
|
@@ -13295,7 +13295,7 @@
|
|
|
13295
13295
|
`;
|
|
13296
13296
|
}
|
|
13297
13297
|
}
|
|
13298
|
-
SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z$
|
|
13298
|
+
SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z$11];
|
|
13299
13299
|
__decorate([
|
|
13300
13300
|
property({ type: Boolean, reflect: true })
|
|
13301
13301
|
], SgdsBreadcrumbItem.prototype, "active", void 0);
|
|
@@ -13303,7 +13303,7 @@
|
|
|
13303
13303
|
register("sgds-breadcrumb", SgdsBreadcrumb);
|
|
13304
13304
|
register("sgds-breadcrumb-item", SgdsBreadcrumbItem);
|
|
13305
13305
|
|
|
13306
|
-
var css_248z$
|
|
13306
|
+
var css_248z$10 = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
|
|
13307
13307
|
|
|
13308
13308
|
class ButtonElement extends SgdsElement {
|
|
13309
13309
|
constructor() {
|
|
@@ -13345,7 +13345,7 @@
|
|
|
13345
13345
|
}
|
|
13346
13346
|
}
|
|
13347
13347
|
}
|
|
13348
|
-
ButtonElement.styles = [...SgdsElement.styles, css_248z$
|
|
13348
|
+
ButtonElement.styles = [...SgdsElement.styles, css_248z$10];
|
|
13349
13349
|
__decorate([
|
|
13350
13350
|
query(".btn")
|
|
13351
13351
|
], ButtonElement.prototype, "button", void 0);
|
|
@@ -13431,7 +13431,7 @@
|
|
|
13431
13431
|
}
|
|
13432
13432
|
}
|
|
13433
13433
|
|
|
13434
|
-
var css_248z
|
|
13434
|
+
var css_248z$$ = css`:host{display:inline-block}:host([fullWidth]),:host([fullWidth]) .btn{width:100%}:host([fullWidth]) .btn.has-left-icon{justify-content:flex-start}:host([fullWidth]) .btn.has-right-icon{justify-content:space-between}:host([fullWidth]) .btn.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
|
|
13435
13435
|
|
|
13436
13436
|
/**
|
|
13437
13437
|
* @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
|
@@ -13532,7 +13532,7 @@
|
|
|
13532
13532
|
`;
|
|
13533
13533
|
}
|
|
13534
13534
|
}
|
|
13535
|
-
SgdsButton.styles = [...ButtonElement.styles, css_248z$
|
|
13535
|
+
SgdsButton.styles = [...ButtonElement.styles, css_248z$1a, css_248z$$];
|
|
13536
13536
|
__decorate([
|
|
13537
13537
|
state()
|
|
13538
13538
|
], SgdsButton.prototype, "_hasLeftIcon", void 0);
|
|
@@ -13563,102 +13563,55 @@
|
|
|
13563
13563
|
|
|
13564
13564
|
register("sgds-button", SgdsButton);
|
|
13565
13565
|
|
|
13566
|
-
var css_248z$
|
|
13566
|
+
var css_248z$_ = css`:host([orientation=horizontal]) .card{flex-direction:row}:host([orientation=horizontal]) .card-body{flex:1}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([tinted]) .card{background-color:var(--sgds-bg-translucent-subtle);border:none}: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=vertical][imageAdjustment="padding around"]) .card-image{padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}:host([orientation=vertical][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-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{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-image{flex:1}.card-body{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl)}.card-body,.card-title{color:var(--sgds-body-color-default)}.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);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=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%}: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}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
|
|
13567
13567
|
|
|
13568
|
-
var css_248z$
|
|
13568
|
+
var css_248z$Z = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
|
|
13569
13569
|
|
|
13570
|
-
var css_248z
|
|
13570
|
+
var css_248z$Y = css`.bg-primary{background-color:var(--sgds-primary)!important}.bg-secondary{background-color:var(--sgds-secondary)!important}.bg-success{background-color:var(--sgds-success)!important}.bg-info{background-color:var(--sgds-info)!important}.bg-warning{background-color:var(--sgds-warning)!important}.bg-danger{background-color:var(--sgds-danger)!important}.bg-light{background-color:var(--sgds-light)!important}.bg-dark{background-color:var(--sgds-dark)!important}`;
|
|
13571
13571
|
|
|
13572
|
-
var css_248z$
|
|
13572
|
+
var css_248z$X = css`.border-primary{border-color:var(--sgds-primary)!important}.border-secondary{border-color:var(--sgds-secondary)!important}.border-success{border-color:var(--sgds-success)!important}.border-info{border-color:var(--sgds-info)!important}.border-warning{border-color:var(--sgds-warning)!important}.border-danger{border-color:var(--sgds-danger)!important}.border-light{border-color:var(--sgds-light)!important}.border-dark{border-color:var(--sgds-dark)!important}`;
|
|
13573
13573
|
|
|
13574
|
-
var css_248z$
|
|
13574
|
+
var css_248z$W = css`.h1,.h2,.h3,.h4,.h5,.h6 ::slotted(h6),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),h1,h2,h3,h4,h5,h6{color:var(--sgds-heading-color);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,::slotted(h1),h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,::slotted(h1),h1{font-size:2.5rem}}.h2,::slotted(h2),h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,::slotted(h2),h2{font-size:2rem}}.h3,::slotted(h3),h3{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h3,::slotted(h3),h3{font-size:1.5rem}}.h4,::slotted(h4),h4{font-size:1.125rem}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{font-size:1rem}.h1,::slotted(h1),h1{line-height:1.2}.h2,::slotted(h2),h2{line-height:1.25}.h3,::slotted(h3),h3{line-height:1.33}.h4,::slotted(h4),h4{line-height:1.78}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{line-height:1.2}`;
|
|
13575
13575
|
|
|
13576
|
-
var css_248z$
|
|
13576
|
+
var css_248z$V = css`p{margin-bottom:1.5rem;margin-top:0}`;
|
|
13577
13577
|
|
|
13578
13578
|
class CardElement extends SgdsElement {
|
|
13579
13579
|
constructor() {
|
|
13580
13580
|
super(...arguments);
|
|
13581
|
-
/** Extends the link passed in slot[name="link"] to the entire card */
|
|
13582
|
-
this.stretchedLink = false;
|
|
13583
|
-
/** Disables the card */
|
|
13584
|
-
this.disabled = false;
|
|
13585
13581
|
/** When true, hides the default border of the card. */
|
|
13586
13582
|
this.hideBorder = false;
|
|
13587
13583
|
/** When true, applies a tinted background color to the card. */
|
|
13588
13584
|
this.tinted = false;
|
|
13589
|
-
/** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
|
|
13590
|
-
this.orientation = "vertical";
|
|
13591
|
-
}
|
|
13592
|
-
firstUpdated() {
|
|
13593
|
-
if (this.disabled && this._linkNode.length > 0) {
|
|
13594
|
-
const hyperlink = this._linkNode[0].querySelector("a");
|
|
13595
|
-
hyperlink.setAttribute("disabled", "true");
|
|
13596
|
-
hyperlink.removeAttribute("href");
|
|
13597
|
-
}
|
|
13598
|
-
}
|
|
13599
|
-
handleTitleSlotChange(e) {
|
|
13600
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13601
|
-
if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
|
|
13602
|
-
const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
|
|
13603
|
-
hyperlink.removeAttribute("href");
|
|
13604
|
-
}
|
|
13605
|
-
return;
|
|
13606
|
-
}
|
|
13607
|
-
handleLinkSlotChange(e) {
|
|
13608
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13609
|
-
if (childNodes.length > 1) {
|
|
13610
|
-
return console.error("Multiple elements passed into SgdsCard's link slot");
|
|
13611
|
-
}
|
|
13612
|
-
if (!this.stretchedLink)
|
|
13613
|
-
return;
|
|
13614
|
-
if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
|
|
13615
|
-
const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
|
|
13616
|
-
this.card.setAttribute("href", hyperlink.href);
|
|
13617
|
-
const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
|
|
13618
|
-
linkSlot.style.display = "none";
|
|
13619
|
-
}
|
|
13620
13585
|
}
|
|
13621
13586
|
}
|
|
13622
|
-
CardElement.styles = [...SgdsElement.styles, css_248z$
|
|
13623
|
-
__decorate([
|
|
13624
|
-
query("a.card")
|
|
13625
|
-
], CardElement.prototype, "card", void 0);
|
|
13626
|
-
__decorate([
|
|
13627
|
-
queryAssignedNodes({ slot: "link", flatten: true })
|
|
13628
|
-
], CardElement.prototype, "_linkNode", void 0);
|
|
13629
|
-
__decorate([
|
|
13630
|
-
property({ type: Boolean, reflect: true })
|
|
13631
|
-
], CardElement.prototype, "stretchedLink", void 0);
|
|
13632
|
-
__decorate([
|
|
13633
|
-
property({ type: Boolean, reflect: true })
|
|
13634
|
-
], CardElement.prototype, "disabled", void 0);
|
|
13587
|
+
CardElement.styles = [...SgdsElement.styles, css_248z$Z, css_248z$Y, css_248z$X, css_248z$W, css_248z$V, css_248z$_];
|
|
13635
13588
|
__decorate([
|
|
13636
13589
|
property({ type: Boolean, reflect: true })
|
|
13637
13590
|
], CardElement.prototype, "hideBorder", void 0);
|
|
13638
13591
|
__decorate([
|
|
13639
13592
|
property({ type: Boolean, reflect: true })
|
|
13640
13593
|
], CardElement.prototype, "tinted", void 0);
|
|
13641
|
-
__decorate([
|
|
13642
|
-
property({ type: String, reflect: true })
|
|
13643
|
-
], CardElement.prototype, "orientation", void 0);
|
|
13644
13594
|
|
|
13645
|
-
var css_248z$
|
|
13595
|
+
var css_248z$U = css`:host([orientation=horizontal]) .card-icon{padding:var(--sgds-padding-xl) 0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.card-icon{line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}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}`;
|
|
13646
13596
|
|
|
13647
13597
|
/**
|
|
13648
13598
|
* @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
13649
|
-
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
13650
|
-
* @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
|
|
13651
13599
|
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
13652
13600
|
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
13653
13601
|
* @slot subtitle - The subtitle of the card
|
|
13654
13602
|
* @slot title - The title of the card
|
|
13655
13603
|
* @slot description - The paragrapher text of the card
|
|
13656
|
-
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
13657
13604
|
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
13658
13605
|
*/
|
|
13659
13606
|
class SgdsCard extends CardElement {
|
|
13660
13607
|
constructor() {
|
|
13661
13608
|
super(...arguments);
|
|
13609
|
+
/** Extends the link passed in slot[name="link"] to the entire card */
|
|
13610
|
+
this.stretchedLink = false;
|
|
13611
|
+
/** Disables the card */
|
|
13612
|
+
this.disabled = false;
|
|
13613
|
+
/** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
|
|
13614
|
+
this.orientation = "vertical";
|
|
13662
13615
|
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
13663
13616
|
this.imagePosition = "before";
|
|
13664
13617
|
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
@@ -13670,8 +13623,35 @@
|
|
|
13670
13623
|
icon.style.display = "none";
|
|
13671
13624
|
}
|
|
13672
13625
|
if (this._iconNode.length === 0) {
|
|
13673
|
-
const
|
|
13674
|
-
|
|
13626
|
+
const icon = this.shadowRoot.querySelector(".card-icon");
|
|
13627
|
+
icon.style.display = "none";
|
|
13628
|
+
}
|
|
13629
|
+
if (this.disabled && this._linkNode.length > 0) {
|
|
13630
|
+
const hyperlink = this._linkNode[0].querySelector("a");
|
|
13631
|
+
hyperlink.setAttribute("disabled", "true");
|
|
13632
|
+
hyperlink.removeAttribute("href");
|
|
13633
|
+
}
|
|
13634
|
+
}
|
|
13635
|
+
handleTitleSlotChange(e) {
|
|
13636
|
+
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13637
|
+
if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
|
|
13638
|
+
const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
|
|
13639
|
+
hyperlink.removeAttribute("href");
|
|
13640
|
+
}
|
|
13641
|
+
return;
|
|
13642
|
+
}
|
|
13643
|
+
handleLinkSlotChange(e) {
|
|
13644
|
+
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
13645
|
+
if (childNodes.length > 1) {
|
|
13646
|
+
return console.error("Multiple elements passed into SgdsCard's link slot");
|
|
13647
|
+
}
|
|
13648
|
+
if (!this.stretchedLink)
|
|
13649
|
+
return;
|
|
13650
|
+
if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
|
|
13651
|
+
const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
|
|
13652
|
+
this.card.setAttribute("href", hyperlink.href);
|
|
13653
|
+
const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
|
|
13654
|
+
linkSlot.style.display = "none";
|
|
13675
13655
|
}
|
|
13676
13656
|
}
|
|
13677
13657
|
handleImgSlotChange(e) {
|
|
@@ -13690,39 +13670,48 @@
|
|
|
13690
13670
|
})}"
|
|
13691
13671
|
tabindex=${cardTabIndex}
|
|
13692
13672
|
>
|
|
13693
|
-
<div class="card-tinted-bg"></div>
|
|
13694
|
-
<slot name="menu"></slot>
|
|
13695
13673
|
<div class="card-image">
|
|
13696
13674
|
<slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
|
|
13697
13675
|
</div>
|
|
13698
|
-
<div class="card-
|
|
13676
|
+
<div class="card-icon">
|
|
13699
13677
|
<slot name="icon"></slot>
|
|
13700
13678
|
</div>
|
|
13701
13679
|
<div class="card-body">
|
|
13702
|
-
<div class="card-header
|
|
13703
|
-
<
|
|
13704
|
-
|
|
13705
|
-
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
13706
|
-
</div>
|
|
13707
|
-
<slot></slot>
|
|
13680
|
+
<div class="card-header">
|
|
13681
|
+
<slot name="subtitle"></slot>
|
|
13682
|
+
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
13708
13683
|
</div>
|
|
13709
13684
|
<p class="card-text">
|
|
13710
13685
|
<slot name="description"></slot>
|
|
13711
13686
|
</p>
|
|
13712
|
-
<slot name="lower"></slot>
|
|
13713
13687
|
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
13714
13688
|
</div>
|
|
13715
13689
|
</${tag}>
|
|
13716
13690
|
`;
|
|
13717
13691
|
}
|
|
13718
13692
|
}
|
|
13719
|
-
SgdsCard.styles = [...CardElement.styles, css_248z$
|
|
13693
|
+
SgdsCard.styles = [...CardElement.styles, css_248z$U];
|
|
13694
|
+
__decorate([
|
|
13695
|
+
query("a.card")
|
|
13696
|
+
], SgdsCard.prototype, "card", void 0);
|
|
13720
13697
|
__decorate([
|
|
13721
13698
|
queryAssignedNodes({ slot: "image", flatten: true })
|
|
13722
13699
|
], SgdsCard.prototype, "_imageNode", void 0);
|
|
13723
13700
|
__decorate([
|
|
13724
13701
|
queryAssignedNodes({ slot: "icon", flatten: true })
|
|
13725
13702
|
], SgdsCard.prototype, "_iconNode", void 0);
|
|
13703
|
+
__decorate([
|
|
13704
|
+
queryAssignedNodes({ slot: "link", flatten: true })
|
|
13705
|
+
], SgdsCard.prototype, "_linkNode", void 0);
|
|
13706
|
+
__decorate([
|
|
13707
|
+
property({ type: Boolean, reflect: true })
|
|
13708
|
+
], SgdsCard.prototype, "stretchedLink", void 0);
|
|
13709
|
+
__decorate([
|
|
13710
|
+
property({ type: Boolean, reflect: true })
|
|
13711
|
+
], SgdsCard.prototype, "disabled", void 0);
|
|
13712
|
+
__decorate([
|
|
13713
|
+
property({ type: String, reflect: true })
|
|
13714
|
+
], SgdsCard.prototype, "orientation", void 0);
|
|
13726
13715
|
__decorate([
|
|
13727
13716
|
property({ type: String, reflect: true })
|
|
13728
13717
|
], SgdsCard.prototype, "imagePosition", void 0);
|
|
@@ -13806,9 +13795,9 @@
|
|
|
13806
13795
|
*/
|
|
13807
13796
|
const live = directive(LiveDirective);
|
|
13808
13797
|
|
|
13809
|
-
var css_248z$
|
|
13798
|
+
var css_248z$T = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-min)}.invalid-feedback{font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`;
|
|
13810
13799
|
|
|
13811
|
-
var css_248z$
|
|
13800
|
+
var css_248z$S = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-min)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
|
|
13812
13801
|
|
|
13813
13802
|
// @defaultValue decorator
|
|
13814
13803
|
const defaultValue = (propertyName = "value") => (proto, key) => {
|
|
@@ -14193,7 +14182,7 @@
|
|
|
14193
14182
|
}
|
|
14194
14183
|
}
|
|
14195
14184
|
}
|
|
14196
|
-
SelectElement.styles = [...DropdownListElement.styles, css_248z$
|
|
14185
|
+
SelectElement.styles = [...DropdownListElement.styles, css_248z$16, css_248z$S, css_248z$T];
|
|
14197
14186
|
__decorate([
|
|
14198
14187
|
property({ reflect: true })
|
|
14199
14188
|
], SelectElement.prototype, "label", void 0);
|
|
@@ -14249,9 +14238,9 @@
|
|
|
14249
14238
|
queryAsync("input.form-control")
|
|
14250
14239
|
], SelectElement.prototype, "_input", void 0);
|
|
14251
14240
|
|
|
14252
|
-
var css_248z$
|
|
14241
|
+
var css_248z$R = css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
|
|
14253
14242
|
|
|
14254
|
-
var css_248z$
|
|
14243
|
+
var css_248z$Q = css`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-body)}`;
|
|
14255
14244
|
|
|
14256
14245
|
class FormControlElement extends SgdsElement {
|
|
14257
14246
|
constructor() {
|
|
@@ -14278,7 +14267,7 @@
|
|
|
14278
14267
|
}
|
|
14279
14268
|
}
|
|
14280
14269
|
}
|
|
14281
|
-
FormControlElement.styles = [...SgdsElement.styles, css_248z$
|
|
14270
|
+
FormControlElement.styles = [...SgdsElement.styles, css_248z$T, css_248z$S, css_248z$R, css_248z$Q];
|
|
14282
14271
|
__decorate([
|
|
14283
14272
|
property({ reflect: true })
|
|
14284
14273
|
], FormControlElement.prototype, "label", void 0);
|
|
@@ -14295,7 +14284,7 @@
|
|
|
14295
14284
|
property({ type: Boolean, reflect: true })
|
|
14296
14285
|
], FormControlElement.prototype, "invalid", void 0);
|
|
14297
14286
|
|
|
14298
|
-
var css_248z$
|
|
14287
|
+
var css_248z$P = css`:host{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
|
|
14299
14288
|
|
|
14300
14289
|
/**
|
|
14301
14290
|
* @summary Checkbox component is used when you require users to select multiple items from a list.
|
|
@@ -14459,7 +14448,7 @@
|
|
|
14459
14448
|
`;
|
|
14460
14449
|
}
|
|
14461
14450
|
}
|
|
14462
|
-
SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$
|
|
14451
|
+
SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$P];
|
|
14463
14452
|
__decorate([
|
|
14464
14453
|
property({ type: String, reflect: true })
|
|
14465
14454
|
], SgdsCheckbox.prototype, "value", void 0);
|
|
@@ -14491,7 +14480,7 @@
|
|
|
14491
14480
|
watch("_isTouched", { waitUntilFirstUpdate: true })
|
|
14492
14481
|
], SgdsCheckbox.prototype, "_handleIsTouched", null);
|
|
14493
14482
|
|
|
14494
|
-
var css_248z$
|
|
14483
|
+
var css_248z$O = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
|
|
14495
14484
|
|
|
14496
14485
|
class ComboBoxItem extends SgdsElement {
|
|
14497
14486
|
constructor() {
|
|
@@ -14559,7 +14548,7 @@
|
|
|
14559
14548
|
"sgds-icon": SgdsIcon,
|
|
14560
14549
|
"sgds-checkbox": SgdsCheckbox
|
|
14561
14550
|
};
|
|
14562
|
-
ComboBoxItem.styles = [css_248z$
|
|
14551
|
+
ComboBoxItem.styles = [css_248z$O];
|
|
14563
14552
|
__decorate([
|
|
14564
14553
|
property({ type: Boolean, reflect: true })
|
|
14565
14554
|
], ComboBoxItem.prototype, "active", void 0);
|
|
@@ -14570,7 +14559,7 @@
|
|
|
14570
14559
|
property({ type: Boolean, reflect: true })
|
|
14571
14560
|
], ComboBoxItem.prototype, "checkbox", void 0);
|
|
14572
14561
|
|
|
14573
|
-
var css_248z$
|
|
14562
|
+
var css_248z$N = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.combobox .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
|
|
14574
14563
|
|
|
14575
14564
|
/**
|
|
14576
14565
|
* @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions
|
|
@@ -14845,7 +14834,7 @@
|
|
|
14845
14834
|
`;
|
|
14846
14835
|
}
|
|
14847
14836
|
}
|
|
14848
|
-
SgdsComboBox.styles = [...SelectElement.styles, css_248z$
|
|
14837
|
+
SgdsComboBox.styles = [...SelectElement.styles, css_248z$N];
|
|
14849
14838
|
/** @internal */
|
|
14850
14839
|
SgdsComboBox.dependencies = {
|
|
14851
14840
|
"sgds-combo-box-item": ComboBoxItem,
|
|
@@ -14870,7 +14859,7 @@
|
|
|
14870
14859
|
|
|
14871
14860
|
register("sgds-combo-box", SgdsComboBox);
|
|
14872
14861
|
|
|
14873
|
-
var css_248z$
|
|
14862
|
+
var css_248z$M = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.checkbox-group-validation-input{display:none}`;
|
|
14874
14863
|
|
|
14875
14864
|
/**
|
|
14876
14865
|
* @summary CheckboxGroup is a form component for multiselection of checkboxes.
|
|
@@ -15068,7 +15057,7 @@
|
|
|
15068
15057
|
`;
|
|
15069
15058
|
}
|
|
15070
15059
|
}
|
|
15071
|
-
SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z$
|
|
15060
|
+
SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z$M];
|
|
15072
15061
|
__decorate([
|
|
15073
15062
|
property({ reflect: true })
|
|
15074
15063
|
], SgdsCheckboxGroup.prototype, "label", void 0);
|
|
@@ -20806,7 +20795,7 @@
|
|
|
20806
20795
|
return newDate;
|
|
20807
20796
|
};
|
|
20808
20797
|
|
|
20809
|
-
var css_248z$
|
|
20798
|
+
var css_248z$L = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus,button.year:focus,td[data-day]:focus{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
|
|
20810
20799
|
|
|
20811
20800
|
const TODAY_DATE = new Date();
|
|
20812
20801
|
const keyPressAction = {
|
|
@@ -21202,7 +21191,7 @@
|
|
|
21202
21191
|
return html$1 ` <div class="datepicker-body">${viewContent}</div> `;
|
|
21203
21192
|
}
|
|
21204
21193
|
}
|
|
21205
|
-
DatepickerCalendar.styles = [css_248z$
|
|
21194
|
+
DatepickerCalendar.styles = [css_248z$L];
|
|
21206
21195
|
/** @internal */
|
|
21207
21196
|
DatepickerCalendar.DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
21208
21197
|
/** @internal */
|
|
@@ -21250,7 +21239,7 @@
|
|
|
21250
21239
|
watch("displayDate")
|
|
21251
21240
|
], DatepickerCalendar.prototype, "_updateFocusedDate", null);
|
|
21252
21241
|
|
|
21253
|
-
var css_248z$
|
|
21242
|
+
var css_248z$K = css`:host{display:inline-block}.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}`;
|
|
21254
21243
|
|
|
21255
21244
|
/**
|
|
21256
21245
|
* @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.
|
|
@@ -21297,7 +21286,7 @@
|
|
|
21297
21286
|
`;
|
|
21298
21287
|
}
|
|
21299
21288
|
}
|
|
21300
|
-
SgdsIconButton.styles = [...ButtonElement.styles, css_248z$
|
|
21289
|
+
SgdsIconButton.styles = [...ButtonElement.styles, css_248z$K];
|
|
21301
21290
|
/** @internal */
|
|
21302
21291
|
SgdsIconButton.dependencies = {
|
|
21303
21292
|
"sgds-icon": SgdsIcon
|
|
@@ -21306,7 +21295,7 @@
|
|
|
21306
21295
|
property({ type: String, reflect: true })
|
|
21307
21296
|
], SgdsIconButton.prototype, "name", void 0);
|
|
21308
21297
|
|
|
21309
|
-
var css_248z$
|
|
21298
|
+
var css_248z$J = css`.datepicker-header{display:flex;gap:var(--sgds-form-gap-md)}sgds-button{--btn-font-weight:var(--sgds-font-weight-semibold)}`;
|
|
21310
21299
|
|
|
21311
21300
|
class DatepickerHeader extends SgdsElement {
|
|
21312
21301
|
constructor() {
|
|
@@ -21482,7 +21471,7 @@
|
|
|
21482
21471
|
`;
|
|
21483
21472
|
}
|
|
21484
21473
|
}
|
|
21485
|
-
DatepickerHeader.styles = [css_248z$
|
|
21474
|
+
DatepickerHeader.styles = [css_248z$J];
|
|
21486
21475
|
/** @internal */
|
|
21487
21476
|
DatepickerHeader.dependencies = {
|
|
21488
21477
|
"sgds-icon": SgdsIcon,
|
|
@@ -25123,7 +25112,7 @@
|
|
|
25123
25112
|
globalThis.IMask = IMask;
|
|
25124
25113
|
} catch {}
|
|
25125
25114
|
|
|
25126
|
-
var css_248z$
|
|
25115
|
+
var css_248z$I = css`:host{--sgds-spinner-bg:var(--sgds-primary-surface-default);display:inline-flex}:host([variant=neutral]){--sgds-spinner-bg:var(--sgds-neutral-surface-default)}.spinner-wrapper{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.spinner{animation:spinner .75s linear infinite;border-radius:50%;border-right:.25em solid var(--sgds-bg-translucent);border:.25em solid var(--sgds-bg-translucent);border-right-color:var(--sgds-spinner-bg);color:var(--sgds-spinner-color);display:inline-flex;height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.spinner-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.spinner-lg{height:var(--sgds-dimension-48);width:var(--sgds-dimension-48)}.spinner-label{color:var(--sgds-neutral-color-default);font-size:var(--sgds-font-size-1)}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.5s}}
|
|
25127
25116
|
|
|
25128
25117
|
/*! CSS Used keyframes */@keyframes spinner{to{transform:rotate(1turn)}}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
25129
25118
|
|
|
@@ -25155,7 +25144,7 @@
|
|
|
25155
25144
|
`;
|
|
25156
25145
|
}
|
|
25157
25146
|
}
|
|
25158
|
-
SgdsSpinner.styles = [...SgdsElement.styles, css_248z$
|
|
25147
|
+
SgdsSpinner.styles = [...SgdsElement.styles, css_248z$Z, css_248z$I];
|
|
25159
25148
|
__decorate([
|
|
25160
25149
|
property({ type: String, reflect: true })
|
|
25161
25150
|
], SgdsSpinner.prototype, "variant", void 0);
|
|
@@ -25166,7 +25155,7 @@
|
|
|
25166
25155
|
property({ reflect: true, type: String })
|
|
25167
25156
|
], SgdsSpinner.prototype, "label", void 0);
|
|
25168
25157
|
|
|
25169
|
-
var css_248z$
|
|
25158
|
+
var css_248z$H = css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:none}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
|
|
25170
25159
|
|
|
25171
25160
|
/**
|
|
25172
25161
|
* @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
|
|
@@ -25391,7 +25380,7 @@
|
|
|
25391
25380
|
`;
|
|
25392
25381
|
}
|
|
25393
25382
|
}
|
|
25394
|
-
SgdsInput.styles = [...FormControlElement.styles, css_248z$
|
|
25383
|
+
SgdsInput.styles = [...FormControlElement.styles, css_248z$Q, css_248z$H];
|
|
25395
25384
|
/** @internal */
|
|
25396
25385
|
SgdsInput.dependencies = {
|
|
25397
25386
|
"sgds-spinner": SgdsSpinner,
|
|
@@ -25467,7 +25456,7 @@
|
|
|
25467
25456
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
25468
25457
|
], SgdsInput.prototype, "_handleDisabledChange", null);
|
|
25469
25458
|
|
|
25470
|
-
var css_248z$
|
|
25459
|
+
var css_248z$G = css`.input-container{display:flex;flex-direction:row;width:-webkit-fill-available;width:-moz-available}.form-control-group{border-right:0}.input-feedback{display:flex;flex-direction:column;width:-webkit-fill-available;width:-moz-available}.calendar-btn{all:unset}`;
|
|
25471
25460
|
|
|
25472
25461
|
class DatepickerInput extends SgdsInput {
|
|
25473
25462
|
constructor() {
|
|
@@ -25594,7 +25583,7 @@
|
|
|
25594
25583
|
`;
|
|
25595
25584
|
}
|
|
25596
25585
|
}
|
|
25597
|
-
DatepickerInput.styles = [...SgdsInput.styles, css_248z$
|
|
25586
|
+
DatepickerInput.styles = [...SgdsInput.styles, css_248z$G];
|
|
25598
25587
|
__decorate([
|
|
25599
25588
|
property({ type: String })
|
|
25600
25589
|
], DatepickerInput.prototype, "minDate", void 0);
|
|
@@ -25608,7 +25597,7 @@
|
|
|
25608
25597
|
queryAsync("input")
|
|
25609
25598
|
], DatepickerInput.prototype, "shadowInput", void 0);
|
|
25610
25599
|
|
|
25611
|
-
var css_248z$
|
|
25600
|
+
var css_248z$F = css`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-1)}.dropdown{display:flex;height:100%}.datepicker.dropdown-menu.show{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.datepicker-container{display:flex}.calendar-btn:not(.with-hint-text){align-self:center}.calendar-btn:not(.with-hint-text).with-label{align-self:end}.calendar-btn.with-hint-text.with-label,.calendar-btn:not(.with-hint-text).with-label{margin-top:calc(var(--sgds-font-size-2)*var(--sgds-line-height-body) - var(--sgds-line-height-min))}.calendar-btn.with-hint-text.with-label{align-self:center}`;
|
|
25612
25601
|
|
|
25613
25602
|
/**
|
|
25614
25603
|
* @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input
|
|
@@ -25994,7 +25983,7 @@
|
|
|
25994
25983
|
`;
|
|
25995
25984
|
}
|
|
25996
25985
|
}
|
|
25997
|
-
SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$
|
|
25986
|
+
SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$16, css_248z$F];
|
|
25998
25987
|
/**@internal */
|
|
25999
25988
|
SgdsDatepicker.dependencies = {
|
|
26000
25989
|
"sgds-datepicker-input": DatepickerInput,
|
|
@@ -26081,7 +26070,7 @@
|
|
|
26081
26070
|
|
|
26082
26071
|
register("sgds-datepicker", SgdsDatepicker);
|
|
26083
26072
|
|
|
26084
|
-
var css_248z$
|
|
26073
|
+
var css_248z$E = css`:host([bordered]) .container{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md)}.container{display:flex;flex-direction:column}.title{color:var(--sgds-header-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading)}.description{color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body)}.header{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:column;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}`;
|
|
26085
26074
|
|
|
26086
26075
|
/**
|
|
26087
26076
|
* @summary Description List Group organizes multiple description lists.
|
|
@@ -26167,7 +26156,7 @@
|
|
|
26167
26156
|
`;
|
|
26168
26157
|
}
|
|
26169
26158
|
}
|
|
26170
|
-
SgdsDescriptionListGroup.styles = [...SgdsElement.styles, css_248z$
|
|
26159
|
+
SgdsDescriptionListGroup.styles = [...SgdsElement.styles, css_248z$E];
|
|
26171
26160
|
__decorate([
|
|
26172
26161
|
property({ type: Boolean, reflect: true })
|
|
26173
26162
|
], SgdsDescriptionListGroup.prototype, "bordered", void 0);
|
|
@@ -26178,7 +26167,7 @@
|
|
|
26178
26167
|
queryAssignedElements({ flatten: true })
|
|
26179
26168
|
], SgdsDescriptionListGroup.prototype, "_descriptionLists", void 0);
|
|
26180
26169
|
|
|
26181
|
-
var css_248z$
|
|
26170
|
+
var css_248z$D = css`:host([bordered][islastchild]) .container:last-child{border-bottom:none}:host([stacked]) .container{align-items:flex-start;flex-direction:column;gap:var(--sgds-gap-xs);justify-content:flex-start}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;gap:var(--sgds-gap-xs);justify-content:space-between;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-2)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}`;
|
|
26182
26171
|
|
|
26183
26172
|
let id$2 = 0;
|
|
26184
26173
|
/**
|
|
@@ -26221,7 +26210,7 @@
|
|
|
26221
26210
|
`;
|
|
26222
26211
|
}
|
|
26223
26212
|
}
|
|
26224
|
-
SgdsDescriptionList.styles = [...SgdsElement.styles, css_248z$
|
|
26213
|
+
SgdsDescriptionList.styles = [...SgdsElement.styles, css_248z$D];
|
|
26225
26214
|
__decorate([
|
|
26226
26215
|
property({ type: Boolean, reflect: true })
|
|
26227
26216
|
], SgdsDescriptionList.prototype, "stacked", void 0);
|
|
@@ -26232,7 +26221,7 @@
|
|
|
26232
26221
|
register("sgds-description-list", SgdsDescriptionList);
|
|
26233
26222
|
register("sgds-description-list-group", SgdsDescriptionListGroup);
|
|
26234
26223
|
|
|
26235
|
-
var css_248z$
|
|
26224
|
+
var css_248z$C = css`:host{--container-size:8px}:host([orientation=horizontal]){border-top:var(--border-width) solid var(--sgds-border-color-muted);display:block;margin:calc((var(--container-size) - var(--border-width))/2) 0;width:100%}:host([orientation=vertical]){border-left:var(--border-width) solid var(--sgds-border-color-muted);display:inline-block;height:100%;margin:0 calc((var(--container-size) - var(--border-width))/2)}:host([thickness=thin]){--border-width:var(--sgds-border-width-1)}:host([thickness=thick]){--border-width:var(--sgds-border-width-2)}:host([thickness=thicker]){--border-width:var(--sgds-border-width-4)}`;
|
|
26236
26225
|
|
|
26237
26226
|
/**
|
|
26238
26227
|
* @summary A divider is a thin line that groups content in lists and layouts. They bring clarity to a layout by grouping and dividing content in close proximity.
|
|
@@ -26251,7 +26240,7 @@
|
|
|
26251
26240
|
this.setAttribute("aria-orientation", this.orientation);
|
|
26252
26241
|
}
|
|
26253
26242
|
}
|
|
26254
|
-
SgdsDivider.styles = [css_248z$
|
|
26243
|
+
SgdsDivider.styles = [css_248z$C];
|
|
26255
26244
|
__decorate([
|
|
26256
26245
|
property({ type: String, reflect: true })
|
|
26257
26246
|
], SgdsDivider.prototype, "orientation", void 0);
|
|
@@ -26280,7 +26269,7 @@
|
|
|
26280
26269
|
}
|
|
26281
26270
|
}
|
|
26282
26271
|
|
|
26283
|
-
var css_248z$
|
|
26272
|
+
var css_248z$B = css`:host{display:contents}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);max-height:100%;max-width:100%;overflow:auto;padding:var(--sgds-padding-4-xl) var(--sgds-padding-3-xl);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:var(--sgds-dimension-512);inset-inline-end:auto;inset-inline-start:0;top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;top:0;width:var(--sgds-dimension-512)}.drawer-bottom .drawer-panel{bottom:0;height:var(--sgds-dimension-512);inset-inline-end:auto;inset-inline-start:0;top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;top:0;width:var(--sgds-dimension-512)}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-6,var(--sgds-font-size-4));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,var(--sgds-margin-none))}sgds-close-button{position:absolute;right:32px;top:32px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}@media screen and (max-width:768px){.drawer-panel{padding:var(--sgds-padding-3-xl) var(--sgds-padding-lg)}sgds-close-button{right:20px;top:20px}}`;
|
|
26284
26273
|
|
|
26285
26274
|
/**
|
|
26286
26275
|
* @summary Drawers slide in from a container to expose additional options and information.
|
|
@@ -26499,7 +26488,7 @@
|
|
|
26499
26488
|
`;
|
|
26500
26489
|
}
|
|
26501
26490
|
}
|
|
26502
|
-
SgdsDrawer.styles = [...SgdsElement.styles, css_248z$
|
|
26491
|
+
SgdsDrawer.styles = [...SgdsElement.styles, css_248z$B];
|
|
26503
26492
|
/**@internal */
|
|
26504
26493
|
SgdsDrawer.dependencies = {
|
|
26505
26494
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -26624,7 +26613,7 @@
|
|
|
26624
26613
|
register("sgds-dropdown", SgdsDropdown);
|
|
26625
26614
|
register("sgds-dropdown-item", SgdsDropdownItem);
|
|
26626
26615
|
|
|
26627
|
-
var css_248z$
|
|
26616
|
+
var css_248z$A = css`.file-upload{display:flex;flex-direction:column;gap:var(--sgds-form-gap-2-xl)}.file-upload-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.file-upload-list{display:flex;flex-direction:column;gap:var(--sgds-form-gap-xl);list-style-type:none}.file-upload-list-item{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-lg);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.file-upload-list-item span:not(:first-of-type){cursor:pointer}ul{margin:0;padding:0}input{display:none}label,sgds-button{cursor:pointer}sgds-close-button{margin-left:auto}sgds-icon.valid{color:var(--sgds-form-success-color-default)}sgds-icon.invalid{color:var(--sgds-color-muted)}`;
|
|
26628
26617
|
|
|
26629
26618
|
/**
|
|
26630
26619
|
* @summary Allows users to upload files of various sizes and formats
|
|
@@ -26797,7 +26786,7 @@
|
|
|
26797
26786
|
`;
|
|
26798
26787
|
}
|
|
26799
26788
|
}
|
|
26800
|
-
SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$
|
|
26789
|
+
SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$A];
|
|
26801
26790
|
/**@internal */
|
|
26802
26791
|
SgdsFileUpload.dependencies = {
|
|
26803
26792
|
"sgds-button": SgdsButton,
|
|
@@ -26828,7 +26817,7 @@
|
|
|
26828
26817
|
|
|
26829
26818
|
register("sgds-file-upload", SgdsFileUpload);
|
|
26830
26819
|
|
|
26831
|
-
var css_248z$
|
|
26820
|
+
var css_248z$z = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
|
|
26832
26821
|
|
|
26833
26822
|
/**
|
|
26834
26823
|
* @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
|
|
@@ -26866,45 +26855,51 @@
|
|
|
26866
26855
|
* href link for terms of use
|
|
26867
26856
|
*/
|
|
26868
26857
|
this.termsOfUseHref = "#";
|
|
26869
|
-
|
|
26858
|
+
}
|
|
26859
|
+
firstUpdated() {
|
|
26860
|
+
const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
|
|
26861
|
+
const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
|
|
26862
|
+
const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
|
|
26863
|
+
const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
|
|
26864
|
+
const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
|
|
26865
|
+
const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
|
|
26866
|
+
const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
|
|
26867
|
+
const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
|
|
26868
|
+
if (socialMediaChildNodes.length === 0) {
|
|
26869
|
+
const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
|
|
26870
|
+
socialMediaContainer.style.display = "none";
|
|
26871
|
+
}
|
|
26872
|
+
if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
|
|
26873
|
+
const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
|
|
26874
|
+
footerHeaderContainer.style.display = "none";
|
|
26875
|
+
}
|
|
26876
|
+
if (footerItemsChildNodes.length === 0) {
|
|
26877
|
+
const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
|
|
26878
|
+
footerItemsContainer.style.display = "none";
|
|
26879
|
+
}
|
|
26880
|
+
if (footerTitleChildNodes.length === 0 &&
|
|
26881
|
+
footerDescriptionChildNodes.length === 0 &&
|
|
26882
|
+
footerItemsChildNodes.length === 0) {
|
|
26883
|
+
const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
|
|
26884
|
+
footerTopContainer.style.display = "none";
|
|
26885
|
+
}
|
|
26870
26886
|
}
|
|
26871
26887
|
render() {
|
|
26872
|
-
const hasSocialMediaSlot = this.hasSlotController.test("social-media");
|
|
26873
|
-
const hasTitleSlot = this.hasSlotController.test("title");
|
|
26874
|
-
const hasDescriptionSlot = this.hasSlotController.test("description");
|
|
26875
|
-
const hasItemsSlot = this.hasSlotController.test("items");
|
|
26876
|
-
const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;
|
|
26877
|
-
const displayFooterItems = hasItemsSlot;
|
|
26878
|
-
const displaySocialMedia = hasSocialMediaSlot;
|
|
26879
|
-
const displayFooterTop = displayFooterHeader || displayFooterItems;
|
|
26880
26888
|
return html$1 `
|
|
26881
26889
|
<footer class="footer">
|
|
26882
|
-
|
|
26883
|
-
|
|
26884
|
-
|
|
26885
|
-
|
|
26886
|
-
|
|
26887
|
-
|
|
26888
|
-
|
|
26889
|
-
|
|
26890
|
-
|
|
26891
|
-
: nothing}
|
|
26892
|
-
${displayFooterItems
|
|
26893
|
-
? html$1 ` <div class="footer-items">
|
|
26894
|
-
<slot name="items"></slot>
|
|
26895
|
-
</div>`
|
|
26896
|
-
: nothing}
|
|
26897
|
-
</section>`
|
|
26898
|
-
: nothing}
|
|
26899
|
-
|
|
26890
|
+
<section class="footer-top">
|
|
26891
|
+
<div class="footer-header">
|
|
26892
|
+
<slot name="title"></slot>
|
|
26893
|
+
<slot name="description"></slot>
|
|
26894
|
+
</div>
|
|
26895
|
+
<div class="footer-items">
|
|
26896
|
+
<slot name="items"></slot>
|
|
26897
|
+
</div>
|
|
26898
|
+
</section>
|
|
26900
26899
|
<section class="footer-bottom">
|
|
26901
|
-
|
|
26902
|
-
|
|
26903
|
-
|
|
26904
|
-
<slot name="social-media"></slot>
|
|
26905
|
-
</div>
|
|
26906
|
-
`
|
|
26907
|
-
: nothing}
|
|
26900
|
+
<div class="social-media">
|
|
26901
|
+
<slot name="social-media"></slot>
|
|
26902
|
+
</div>
|
|
26908
26903
|
<div class="footer-mandatory-links">
|
|
26909
26904
|
<ul>
|
|
26910
26905
|
<li><a href=${this.contactHref}>Contact</a></li>
|
|
@@ -26925,7 +26920,7 @@
|
|
|
26925
26920
|
`;
|
|
26926
26921
|
}
|
|
26927
26922
|
}
|
|
26928
|
-
SgdsFooter.styles = [...SgdsElement.styles, css_248z$
|
|
26923
|
+
SgdsFooter.styles = [...SgdsElement.styles, css_248z$z];
|
|
26929
26924
|
__decorate([
|
|
26930
26925
|
property({ type: String })
|
|
26931
26926
|
], SgdsFooter.prototype, "copyrightLiner", void 0);
|
|
@@ -26945,7 +26940,7 @@
|
|
|
26945
26940
|
property({ type: String })
|
|
26946
26941
|
], SgdsFooter.prototype, "termsOfUseHref", void 0);
|
|
26947
26942
|
|
|
26948
|
-
var css_248z$
|
|
26943
|
+
var css_248z$y = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a[target=_blank]){align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
|
|
26949
26944
|
|
|
26950
26945
|
/**
|
|
26951
26946
|
* @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.
|
|
@@ -26966,7 +26961,7 @@
|
|
|
26966
26961
|
`;
|
|
26967
26962
|
}
|
|
26968
26963
|
}
|
|
26969
|
-
SgdsFooterItem.styles = [...SgdsElement.styles, css_248z$
|
|
26964
|
+
SgdsFooterItem.styles = [...SgdsElement.styles, css_248z$y];
|
|
26970
26965
|
|
|
26971
26966
|
register("sgds-footer", SgdsFooter);
|
|
26972
26967
|
register("sgds-footer-item", SgdsFooterItem);
|
|
@@ -26975,7 +26970,7 @@
|
|
|
26975
26970
|
|
|
26976
26971
|
register("sgds-icon-button", SgdsIconButton);
|
|
26977
26972
|
|
|
26978
|
-
var css_248z$
|
|
26973
|
+
var css_248z$x = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:flex-start;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
|
|
26979
26974
|
|
|
26980
26975
|
/**
|
|
26981
26976
|
* @summary A IconList can be used to display content related to the same topic. Each list item begins an icon.
|
|
@@ -26998,7 +26993,7 @@
|
|
|
26998
26993
|
`;
|
|
26999
26994
|
}
|
|
27000
26995
|
}
|
|
27001
|
-
SgdsIconList.styles = [...SgdsElement.styles, css_248z$
|
|
26996
|
+
SgdsIconList.styles = [...SgdsElement.styles, css_248z$x];
|
|
27002
26997
|
__decorate([
|
|
27003
26998
|
property({ type: String, reflect: true })
|
|
27004
26999
|
], SgdsIconList.prototype, "role", void 0);
|
|
@@ -27503,14 +27498,14 @@
|
|
|
27503
27498
|
|
|
27504
27499
|
const MainnavContext = createContext("mainnav-context");
|
|
27505
27500
|
|
|
27506
|
-
var css_248z$
|
|
27501
|
+
var css_248z$w = css`:host{position:relative;z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);bottom:0;box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:768px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
|
|
27507
27502
|
|
|
27508
27503
|
const SIZES = {
|
|
27509
27504
|
sm: SM_BREAKPOINT,
|
|
27510
27505
|
md: MD_BREAKPOINT,
|
|
27511
27506
|
lg: LG_BREAKPOINT,
|
|
27512
27507
|
xl: XL_BREAKPOINT,
|
|
27513
|
-
|
|
27508
|
+
xxl: XXL_BREAKPOINT,
|
|
27514
27509
|
never: Infinity,
|
|
27515
27510
|
always: -1
|
|
27516
27511
|
};
|
|
@@ -27725,7 +27720,7 @@
|
|
|
27725
27720
|
}
|
|
27726
27721
|
}
|
|
27727
27722
|
}
|
|
27728
|
-
SgdsMainnav.styles = [...SgdsElement.styles, css_248z$
|
|
27723
|
+
SgdsMainnav.styles = [...SgdsElement.styles, css_248z$w];
|
|
27729
27724
|
/** @internal */
|
|
27730
27725
|
SgdsMainnav.dependencies = {
|
|
27731
27726
|
"sgds-icon-button": SgdsIconButton
|
|
@@ -27788,7 +27783,7 @@
|
|
|
27788
27783
|
options: { duration: 200, easing: "ease-in-out" }
|
|
27789
27784
|
});
|
|
27790
27785
|
|
|
27791
|
-
var css_248z$
|
|
27786
|
+
var css_248z$v = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=sm]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=md]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=lg]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=xl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=xxl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}.nav-link{align-items:center;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}@media screen and (max-width:767px){.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus,.nav-link:not(.disabled):focus-visible{outline:0}.nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus,.dropdown-items a:focus-visible{outline:0}.dropdown-items a:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{height:100%}`;
|
|
27792
27787
|
|
|
27793
27788
|
const TAB = "Tab";
|
|
27794
27789
|
const ENTER = "Enter";
|
|
@@ -27832,7 +27827,7 @@
|
|
|
27832
27827
|
return;
|
|
27833
27828
|
}
|
|
27834
27829
|
if (this._breakpointReached) {
|
|
27835
|
-
this.shadowRoot.adoptedStyleSheets = [css_248z$
|
|
27830
|
+
this.shadowRoot.adoptedStyleSheets = [css_248z$16.styleSheet, css_248z$v.styleSheet];
|
|
27836
27831
|
}
|
|
27837
27832
|
}
|
|
27838
27833
|
updated() {
|
|
@@ -28022,7 +28017,7 @@
|
|
|
28022
28017
|
return this._breakpointReached ? mobileView : desktopView;
|
|
28023
28018
|
}
|
|
28024
28019
|
}
|
|
28025
|
-
SgdsMainnavDropdown.styles = [...SgdsElement.styles, css_248z$
|
|
28020
|
+
SgdsMainnavDropdown.styles = [...SgdsElement.styles, css_248z$15, css_248z$16, css_248z$v];
|
|
28026
28021
|
/** @internal */
|
|
28027
28022
|
SgdsMainnavDropdown.dependencies = {
|
|
28028
28023
|
"sgds-dropdown": SgdsDropdown,
|
|
@@ -28058,7 +28053,7 @@
|
|
|
28058
28053
|
queryAssignedElements()
|
|
28059
28054
|
], SgdsMainnavDropdown.prototype, "defaultNodes", void 0);
|
|
28060
28055
|
|
|
28061
|
-
var css_248z$
|
|
28056
|
+
var css_248z$u = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=sm]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=md]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=lg]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xxl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;min-height:100%;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:767px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
|
|
28062
28057
|
|
|
28063
28058
|
/**
|
|
28064
28059
|
* @slot default - slot for SgdsMainnavItem element.
|
|
@@ -28108,7 +28103,7 @@
|
|
|
28108
28103
|
return html$1 `<slot @slotchange=${this._handleSlotChange}></slot>`;
|
|
28109
28104
|
}
|
|
28110
28105
|
}
|
|
28111
|
-
SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$
|
|
28106
|
+
SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$u];
|
|
28112
28107
|
__decorate([
|
|
28113
28108
|
property({ type: Boolean, reflect: true })
|
|
28114
28109
|
], SgdsMainnavItem.prototype, "active", void 0);
|
|
@@ -28123,9 +28118,9 @@
|
|
|
28123
28118
|
register("sgds-mainnav-dropdown", SgdsMainnavDropdown);
|
|
28124
28119
|
register("sgds-mainnav-item", SgdsMainnavItem);
|
|
28125
28120
|
|
|
28126
|
-
var css_248z$
|
|
28121
|
+
var css_248z$t = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:16px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;padding:0!important;width:16px}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.75rem;line-height:1rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:16px;width:16px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
|
|
28127
28122
|
|
|
28128
|
-
var css_248z$
|
|
28123
|
+
var css_248z$s = css`svg{vertical-align:middle}`;
|
|
28129
28124
|
|
|
28130
28125
|
/**
|
|
28131
28126
|
* @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.
|
|
@@ -28149,7 +28144,12 @@
|
|
|
28149
28144
|
}
|
|
28150
28145
|
render() {
|
|
28151
28146
|
return html$1 `
|
|
28152
|
-
<div
|
|
28147
|
+
<div
|
|
28148
|
+
id="sgds-masthead"
|
|
28149
|
+
class="sgds-masthead"
|
|
28150
|
+
aria-label="A Singapore Government Agency Website. Beware of government impersonation scams."
|
|
28151
|
+
role="banner"
|
|
28152
|
+
>
|
|
28153
28153
|
<div class="banner">
|
|
28154
28154
|
<div class="container">
|
|
28155
28155
|
<div class="masthead-layout">
|
|
@@ -28187,7 +28187,7 @@
|
|
|
28187
28187
|
/>
|
|
28188
28188
|
</svg>
|
|
28189
28189
|
<div class="masthead-text-layout">
|
|
28190
|
-
<span>A Singapore Government Agency Website
|
|
28190
|
+
<span>A Singapore Government Agency Website. Beware of government impersonation scams.</span>
|
|
28191
28191
|
<div
|
|
28192
28192
|
class="sgds-masthead-button"
|
|
28193
28193
|
id="sgds-masthead-identify"
|
|
@@ -28230,16 +28230,16 @@
|
|
|
28230
28230
|
<div class="icon">
|
|
28231
28231
|
<svg
|
|
28232
28232
|
xmlns="http://www.w3.org/2000/svg"
|
|
28233
|
-
width="
|
|
28234
|
-
height="
|
|
28235
|
-
viewBox="0 0
|
|
28233
|
+
width="16"
|
|
28234
|
+
height="16"
|
|
28235
|
+
viewBox="0 0 16 16"
|
|
28236
28236
|
fill="none"
|
|
28237
28237
|
class="banner-icon"
|
|
28238
28238
|
>
|
|
28239
28239
|
<path
|
|
28240
28240
|
fill-rule="evenodd"
|
|
28241
28241
|
clip-rule="evenodd"
|
|
28242
|
-
d="M2.
|
|
28242
|
+
d="M2 5.85166C2 5.61356 2.12699 5.39354 2.33315 5.27442L7.66648 2.19294C7.87284 2.07371 8.12716 2.07371 8.33352 2.19294L13.6669 5.27442C13.873 5.39354 14 5.61356 14 5.85166V6.66691C14 7.0351 13.7015 7.33357 13.3333 7.33357H12.6667V12.0002H13.3333C13.7015 12.0002 14 12.2987 14 12.6669V13.3336C14 13.7018 13.7015 14.0002 13.3333 14.0002H2.66667C2.29848 14.0002 2 13.7018 2 13.3336V12.6669C2 12.2987 2.29848 12.0002 2.66667 12.0002H3.33333V7.33357H2.66667C2.29848 7.33357 2 7.0351 2 6.66691V5.85166ZM5.33333 7.33357V12.0002H7V7.33357H5.33333ZM9 7.33357V12.0002H10.6667V7.33357H9ZM9 5.00024C9 5.55252 8.55229 6.00024 8 6.00024C7.44772 6.00024 7 5.55252 7 5.00024C7 4.44795 7.44772 4.00024 8 4.00024C8.55229 4.00024 9 4.44795 9 5.00024Z"
|
|
28243
28243
|
fill="currentColor"
|
|
28244
28244
|
/>
|
|
28245
28245
|
</svg>
|
|
@@ -28260,16 +28260,16 @@
|
|
|
28260
28260
|
<div class="icon">
|
|
28261
28261
|
<svg
|
|
28262
28262
|
xmlns="http://www.w3.org/2000/svg"
|
|
28263
|
-
width="
|
|
28264
|
-
height="
|
|
28265
|
-
viewBox="0 0
|
|
28263
|
+
width="17"
|
|
28264
|
+
height="16"
|
|
28265
|
+
viewBox="0 0 17 16"
|
|
28266
28266
|
fill="none"
|
|
28267
28267
|
class="banner-icon"
|
|
28268
28268
|
>
|
|
28269
28269
|
<path
|
|
28270
28270
|
fill-rule="evenodd"
|
|
28271
28271
|
clip-rule="evenodd"
|
|
28272
|
-
d="M5.
|
|
28272
|
+
d="M5.3335 6.66683H5.00016C4.07969 6.66683 3.3335 7.41302 3.3335 8.3335V13.0002C3.3335 13.9206 4.07969 14.6668 5.00016 14.6668H12.3335C13.254 14.6668 14.0002 13.9206 14.0002 13.0002V8.3335C14.0002 7.41302 13.254 6.66683 12.3335 6.66683H12.0002V4.66683C12.0002 2.82588 10.5078 1.3335 8.66683 1.3335C6.82588 1.3335 5.3335 2.82588 5.3335 4.66683V6.66683ZM6.66683 6.66683H10.6668V4.66683C10.6668 3.56226 9.7714 2.66683 8.66683 2.66683C7.56226 2.66683 6.66683 3.56226 6.66683 4.66683V6.66683Z"
|
|
28273
28273
|
fill="currentColor"
|
|
28274
28274
|
/>
|
|
28275
28275
|
</svg>
|
|
@@ -28279,16 +28279,16 @@
|
|
|
28279
28279
|
<article>
|
|
28280
28280
|
Look for a lock (<svg
|
|
28281
28281
|
xmlns="http://www.w3.org/2000/svg"
|
|
28282
|
-
width="
|
|
28283
|
-
height="
|
|
28284
|
-
viewBox="0 0
|
|
28282
|
+
width="16"
|
|
28283
|
+
height="16"
|
|
28284
|
+
viewBox="0 0 16 16"
|
|
28285
28285
|
fill="none"
|
|
28286
28286
|
class="banner-icon-inline"
|
|
28287
28287
|
>
|
|
28288
28288
|
<path
|
|
28289
28289
|
fill-rule="evenodd"
|
|
28290
28290
|
clip-rule="evenodd"
|
|
28291
|
-
d="
|
|
28291
|
+
d="M4.66699 6.66683H4.33366C3.41318 6.66683 2.66699 7.41302 2.66699 8.3335V13.0002C2.66699 13.9206 3.41318 14.6668 4.33366 14.6668H11.667C12.5875 14.6668 13.3337 13.9206 13.3337 13.0002V8.3335C13.3337 7.41302 12.5875 6.66683 11.667 6.66683H11.3337V4.66683C11.3337 2.82588 9.84127 1.3335 8.00033 1.3335C6.15938 1.3335 4.66699 2.82588 4.66699 4.66683V6.66683ZM6.00033 6.66683H10.0003V4.66683C10.0003 3.56226 9.10489 2.66683 8.00033 2.66683C6.89576 2.66683 6.00033 3.56226 6.00033 4.66683V6.66683Z"
|
|
28292
28292
|
fill="currentColor"
|
|
28293
28293
|
/></svg
|
|
28294
28294
|
>) or https:// as an added precaution. Share sensitive information only on official, secure
|
|
@@ -28296,6 +28296,32 @@
|
|
|
28296
28296
|
</article>
|
|
28297
28297
|
</div>
|
|
28298
28298
|
</div>
|
|
28299
|
+
<div class="wrapper">
|
|
28300
|
+
<div class="icon">
|
|
28301
|
+
<svg
|
|
28302
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
28303
|
+
width="17"
|
|
28304
|
+
height="16"
|
|
28305
|
+
viewBox="0 0 17 16"
|
|
28306
|
+
fill="none"
|
|
28307
|
+
class="banner-icon"
|
|
28308
|
+
>
|
|
28309
|
+
<path
|
|
28310
|
+
fill-rule="evenodd"
|
|
28311
|
+
clip-rule="evenodd"
|
|
28312
|
+
d="M8.33342 1.3335C12.0153 1.3335 15.0001 4.31826 15.0001 8.00016C15.0001 11.6821 12.0153 14.6668 8.33342 14.6668C4.65152 14.6668 1.66675 11.6821 1.66675 8.00016C1.66675 4.31826 4.65152 1.3335 8.33342 1.3335ZM8.33342 10.0002C7.96523 10.0002 7.66675 10.2986 7.66675 10.6668C7.66675 11.035 7.96523 11.3335 8.33342 11.3335C8.7016 11.3335 9.00008 11.035 9.00008 10.6668C9.00008 10.2986 8.7016 10.0002 8.33342 10.0002ZM8.33342 4.68311C8.01125 4.68311 7.75008 4.94492 7.75008 5.26709V8.66683C7.75026 8.98885 8.01136 9.25016 8.33342 9.25016C8.65547 9.25016 8.91657 8.98885 8.91675 8.66683V5.26709C8.91675 4.94492 8.65558 4.68311 8.33342 4.68311Z"
|
|
28313
|
+
fill="currentColor"
|
|
28314
|
+
/>
|
|
28315
|
+
</svg>
|
|
28316
|
+
</div>
|
|
28317
|
+
<div class="content">
|
|
28318
|
+
<div class="title">Scam alert</div>
|
|
28319
|
+
<article>
|
|
28320
|
+
Government officers will never ask you to send money or share your details over the phone. When
|
|
28321
|
+
unsure, hang up and call Scamshield at 1799.
|
|
28322
|
+
</article>
|
|
28323
|
+
</div>
|
|
28324
|
+
</div>
|
|
28299
28325
|
</div>
|
|
28300
28326
|
</div>
|
|
28301
28327
|
</div>
|
|
@@ -28303,7 +28329,7 @@
|
|
|
28303
28329
|
`;
|
|
28304
28330
|
}
|
|
28305
28331
|
}
|
|
28306
|
-
SgdsMasthead.styles = [...SgdsElement.styles, css_248z$
|
|
28332
|
+
SgdsMasthead.styles = [...SgdsElement.styles, css_248z$s, css_248z$1a, css_248z$t];
|
|
28307
28333
|
__decorate([
|
|
28308
28334
|
state()
|
|
28309
28335
|
], SgdsMasthead.prototype, "toggleVisibility", void 0);
|
|
@@ -28427,7 +28453,7 @@
|
|
|
28427
28453
|
}
|
|
28428
28454
|
}
|
|
28429
28455
|
|
|
28430
|
-
var css_248z$
|
|
28456
|
+
var css_248z$r = css`:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:var(--sgds-margin-sm) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-sm) - var(--sgds-margin-sm));position:relative;width:100%}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-sm)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-md);max-height:calc(100% - var(--sgds-margin-md) - var(--sgds-margin-md))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));max-width:var(--sgds-dimension-896)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1176)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1320)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
|
|
28431
28457
|
|
|
28432
28458
|
/**
|
|
28433
28459
|
* @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
|
|
@@ -28660,7 +28686,7 @@
|
|
|
28660
28686
|
`;
|
|
28661
28687
|
}
|
|
28662
28688
|
}
|
|
28663
|
-
SgdsModal.styles = [...SgdsElement.styles, css_248z$
|
|
28689
|
+
SgdsModal.styles = [...SgdsElement.styles, css_248z$W, css_248z$s, css_248z$r];
|
|
28664
28690
|
/**@internal */
|
|
28665
28691
|
SgdsModal.dependencies = {
|
|
28666
28692
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -28718,9 +28744,7 @@
|
|
|
28718
28744
|
|
|
28719
28745
|
register("sgds-modal", SgdsModal);
|
|
28720
28746
|
|
|
28721
|
-
|
|
28722
|
-
|
|
28723
|
-
var css_248z$t = css`ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:inline-flex;gap:var(--sgds-gap-2-xs);list-style:none;padding-left:0}.page-link{align-items:center;background-color:var(--sgds-bg-transparent);border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);display:flex;height:var(--sgds-dimension-48);justify-content:center;width:var(--sgds-dimension-48)}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:focus,.page-link:not(.ellipsis):hover{background-color:var(--sgds-primary-bg-translucent);color:var(--sgds-primary-color-default);z-index:2}.page-link:focus{box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.page-item>.page-link:not(.ellipsis){cursor:pointer}.page-item.active .page-link{background-color:var(--sgds-primary-bg-default);border-color:var(--sgds-info);color:var(--sgds-color-fixed-light);z-index:3}.ellipsis-disabled,.page-item.disabled .page-link{opacity:var(--sgds-opacity-50)}.ellipsis-disabled{cursor:not-allowed;pointer-events:none}.pagination-sm .page-link{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);width:var(--sgds-dimension-40)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pagination-description{align-items:center;display:flex}.pagination-sm .pagination-description{font-size:var(--sgds-font-size-1)}`;
|
|
28747
|
+
var css_248z$q = css`ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:inline-flex;gap:var(--sgds-gap-2-xs);list-style:none;padding-left:0}.page-link{align-items:center;background-color:var(--sgds-bg-transparent);border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);display:flex;height:var(--sgds-dimension-48);justify-content:center;width:var(--sgds-dimension-48)}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:focus,.page-link:not(.ellipsis):hover{background-color:var(--sgds-primary-bg-translucent);color:var(--sgds-primary-color-default);z-index:2}.page-link:focus{box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.page-item>.page-link:not(.ellipsis){cursor:pointer}.page-item.active .page-link{background-color:var(--sgds-primary-bg-default);border-color:var(--sgds-info);color:var(--sgds-color-fixed-light);z-index:3}.ellipsis-disabled,.page-item.disabled .page-link{opacity:var(--sgds-opacity-50)}.ellipsis-disabled{cursor:not-allowed;pointer-events:none}.pagination-sm .page-link{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);width:var(--sgds-dimension-40)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pagination-description{align-items:center;display:flex}.pagination-sm .pagination-description{font-size:var(--sgds-font-size-1)}`;
|
|
28724
28748
|
|
|
28725
28749
|
/**
|
|
28726
28750
|
* @summary The Pagination component enables the user to select a specific page from a range of pages
|
|
@@ -29004,7 +29028,7 @@
|
|
|
29004
29028
|
`;
|
|
29005
29029
|
}
|
|
29006
29030
|
}
|
|
29007
|
-
SgdsPagination.styles = [...SgdsElement.styles, css_248z$
|
|
29031
|
+
SgdsPagination.styles = [...SgdsElement.styles, css_248z$q];
|
|
29008
29032
|
/**@internal */
|
|
29009
29033
|
SgdsPagination.dependencies = {
|
|
29010
29034
|
"sgds-icon-button": SgdsIconButton,
|
|
@@ -29141,7 +29165,7 @@
|
|
|
29141
29165
|
*/
|
|
29142
29166
|
const styleMap = directive(StyleMapDirective);
|
|
29143
29167
|
|
|
29144
|
-
var css_248z$
|
|
29168
|
+
var css_248z$p = css`progress{vertical-align:baseline}.progress-container{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);overflow:hidden}.progress{background-color:var(--sgds-bg-translucent)}.progress-bar{background-color:var(--sgds-primary-surface-default);display:flex;flex-direction:column;height:var(--sgds-dimension-4);justify-content:center;overflow:hidden;transition:width .6s ease}:host([variant=neutral]) .progress-bar{background-color:var(--sgds-neutral-surface-default)}.label{color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-1);white-space:nowrap}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}`;
|
|
29145
29169
|
|
|
29146
29170
|
/**
|
|
29147
29171
|
* @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
|
|
@@ -29177,7 +29201,7 @@
|
|
|
29177
29201
|
`;
|
|
29178
29202
|
}
|
|
29179
29203
|
}
|
|
29180
|
-
SgdsProgressBar.styles = [...SgdsElement.styles, css_248z$
|
|
29204
|
+
SgdsProgressBar.styles = [...SgdsElement.styles, css_248z$p];
|
|
29181
29205
|
__decorate([
|
|
29182
29206
|
property({ type: String, reflect: true })
|
|
29183
29207
|
], SgdsProgressBar.prototype, "variant", void 0);
|
|
@@ -29199,7 +29223,7 @@
|
|
|
29199
29223
|
|
|
29200
29224
|
register("sgds-progress-bar", SgdsProgressBar);
|
|
29201
29225
|
|
|
29202
|
-
var css_248z$
|
|
29226
|
+
var css_248z$o = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.input-group{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-form-gap-lg);position:relative}.input-group>sgds-input{flex:1 1 auto;min-width:0;position:relative}.input-group sgds-button:focus,.input-group>sgds-input:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;
|
|
29203
29227
|
|
|
29204
29228
|
/**
|
|
29205
29229
|
* @summary The quantity toggle component is used to increase or decrease an incremental venue, best used when the user needs to enter or adjust the quantity of a selected item.
|
|
@@ -29416,7 +29440,7 @@
|
|
|
29416
29440
|
`;
|
|
29417
29441
|
}
|
|
29418
29442
|
}
|
|
29419
|
-
SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$
|
|
29443
|
+
SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$Q, css_248z$s, css_248z$o];
|
|
29420
29444
|
/** @internal */
|
|
29421
29445
|
SgdsQuantityToggle.dependencies = {
|
|
29422
29446
|
"sgds-input": SgdsInput,
|
|
@@ -29455,7 +29479,7 @@
|
|
|
29455
29479
|
|
|
29456
29480
|
register("sgds-quantity-toggle", SgdsQuantityToggle);
|
|
29457
29481
|
|
|
29458
|
-
var css_248z$
|
|
29482
|
+
var css_248z$n = css`:host{outline:0}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:50%;height:var(--sgds-form-height-sm);width:var(--sgds-form-height-sm)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:not([disabled]):not(.is-invalid):checked:focus-visible,.form-check-input:not([disabled]):not(.is-invalid):checked:hover,.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-surface-default)}`;
|
|
29459
29483
|
|
|
29460
29484
|
/**
|
|
29461
29485
|
* @summary Radio allows the user to select one option from a set while seeing all available options.
|
|
@@ -29541,7 +29565,7 @@
|
|
|
29541
29565
|
`;
|
|
29542
29566
|
}
|
|
29543
29567
|
}
|
|
29544
|
-
SgdsRadio.styles = [...SgdsElement.styles, css_248z$
|
|
29568
|
+
SgdsRadio.styles = [...SgdsElement.styles, css_248z$R, css_248z$n];
|
|
29545
29569
|
__decorate([
|
|
29546
29570
|
property({ type: Boolean, reflect: true })
|
|
29547
29571
|
], SgdsRadio.prototype, "checked", void 0);
|
|
@@ -29564,7 +29588,7 @@
|
|
|
29564
29588
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
29565
29589
|
], SgdsRadio.prototype, "handleDisabledChange", null);
|
|
29566
29590
|
|
|
29567
|
-
var css_248z$
|
|
29591
|
+
var css_248z$m = css`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
|
|
29568
29592
|
|
|
29569
29593
|
/**
|
|
29570
29594
|
* @summary RadioGroup group multiple radios so they function as a single form control.
|
|
@@ -29795,7 +29819,7 @@
|
|
|
29795
29819
|
`;
|
|
29796
29820
|
}
|
|
29797
29821
|
}
|
|
29798
|
-
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$
|
|
29822
|
+
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$m];
|
|
29799
29823
|
__decorate([
|
|
29800
29824
|
query("slot:not([name])")
|
|
29801
29825
|
], SgdsRadioGroup.prototype, "defaultSlot", void 0);
|
|
@@ -29836,7 +29860,7 @@
|
|
|
29836
29860
|
register("sgds-radio", SgdsRadio);
|
|
29837
29861
|
register("sgds-radio-group", SgdsRadioGroup);
|
|
29838
29862
|
|
|
29839
|
-
var css_248z$
|
|
29863
|
+
var css_248z$l = css`:host{--sidenav-sticky-top:0rem;padding:var(--sgds-padding-md)}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:visible;position:sticky;top:var(--sidenav-sticky-top)}`;
|
|
29840
29864
|
|
|
29841
29865
|
/**
|
|
29842
29866
|
* @summary The side navigation is used to display a list of links to move between pages within a related category.
|
|
@@ -29881,7 +29905,7 @@
|
|
|
29881
29905
|
`;
|
|
29882
29906
|
}
|
|
29883
29907
|
}
|
|
29884
|
-
SgdsSidenav.styles = [...SgdsElement.styles, css_248z$
|
|
29908
|
+
SgdsSidenav.styles = [...SgdsElement.styles, css_248z$l];
|
|
29885
29909
|
__decorate([
|
|
29886
29910
|
property({ type: Boolean, attribute: true })
|
|
29887
29911
|
], SgdsSidenav.prototype, "sticky", void 0);
|
|
@@ -29889,7 +29913,7 @@
|
|
|
29889
29913
|
queryAssignedElements()
|
|
29890
29914
|
], SgdsSidenav.prototype, "defaultNodes", void 0);
|
|
29891
29915
|
|
|
29892
|
-
var css_248z$
|
|
29916
|
+
var css_248z$k = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-border-radius-md);display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled),.sidenav-btn:focus:not(.disabled){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}.no-menu-default:focus,.no-menu-default:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-border-radius-md);color:inherit!important;display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body)!important;line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus),.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0!important}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}`;
|
|
29893
29917
|
|
|
29894
29918
|
/**
|
|
29895
29919
|
* @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.
|
|
@@ -30099,7 +30123,7 @@
|
|
|
30099
30123
|
`;
|
|
30100
30124
|
}
|
|
30101
30125
|
}
|
|
30102
|
-
SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z$
|
|
30126
|
+
SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z$k];
|
|
30103
30127
|
/** @internal */
|
|
30104
30128
|
SgdsSidenavItem.dependencies = {
|
|
30105
30129
|
"sgds-icon": SgdsIcon
|
|
@@ -30140,7 +30164,7 @@
|
|
|
30140
30164
|
options: { duration: 200, easing: "ease-in-out" }
|
|
30141
30165
|
});
|
|
30142
30166
|
|
|
30143
|
-
var css_248z$
|
|
30167
|
+
var css_248z$j = css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-border-radius-md);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}:host([disabled]) ::slotted(a:focus),:host([disabled]) ::slotted(a:focus-visible){box-shadow:none;outline:0}::slotted(a:focus),::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
|
|
30144
30168
|
|
|
30145
30169
|
/**
|
|
30146
30170
|
* @slot default - slot for label of anchor tag.
|
|
@@ -30177,7 +30201,7 @@
|
|
|
30177
30201
|
return html$1 ` <slot @slotchange=${this._handleSlotChange}></slot> `;
|
|
30178
30202
|
}
|
|
30179
30203
|
}
|
|
30180
|
-
SgdsSidenavLink.styles = [...SgdsElement.styles, css_248z$
|
|
30204
|
+
SgdsSidenavLink.styles = [...SgdsElement.styles, css_248z$j];
|
|
30181
30205
|
__decorate([
|
|
30182
30206
|
property({ type: Boolean, reflect: true })
|
|
30183
30207
|
], SgdsSidenavLink.prototype, "active", void 0);
|
|
@@ -30195,7 +30219,7 @@
|
|
|
30195
30219
|
register("sgds-sidenav-item", SgdsSidenavItem);
|
|
30196
30220
|
register("sgds-sidenav-link", SgdsSidenavLink);
|
|
30197
30221
|
|
|
30198
|
-
var css_248z$
|
|
30222
|
+
var css_248z$i = css`.skeleton{--bg:var(--sgds-bg-translucent-subtle);background-color:var(--bg);border-radius:var(--sgds-border-radius-sm);display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.skeleton.skeleton-paragraph{background-color:transparent}.skeleton.skeleton-paragraph.auto-size-rows>div[class*=skeleton-row]{background-color:var(--sgds-bg-translucent);border-radius:var(--sgds-border-radius-sm);height:-webkit-fill-available}.sheen{--sheen-color:var(--sgds-bg-translucent);animation:sheen 8s ease-in-out infinite;background:linear-gradient(270deg,var(--bg) 0,var(--sheen-color) 33.33%,var(--sheen-color) 66.67%,var(--bg) 100%);background-size:400% 100%}@keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.sheen{animation:none}}`;
|
|
30199
30223
|
|
|
30200
30224
|
/**
|
|
30201
30225
|
* @summary A skeleton is a low-fidelity visual placeholder that represents the loading of interface elements
|
|
@@ -30243,7 +30267,7 @@
|
|
|
30243
30267
|
`;
|
|
30244
30268
|
}
|
|
30245
30269
|
}
|
|
30246
|
-
SgdsSkeleton.styles = [css_248z$
|
|
30270
|
+
SgdsSkeleton.styles = [css_248z$i];
|
|
30247
30271
|
__decorate([
|
|
30248
30272
|
query(".skeleton")
|
|
30249
30273
|
], SgdsSkeleton.prototype, "skeleton", void 0);
|
|
@@ -30270,7 +30294,7 @@
|
|
|
30270
30294
|
|
|
30271
30295
|
register("sgds-spinner", SgdsSpinner);
|
|
30272
30296
|
|
|
30273
|
-
var css_248z$
|
|
30297
|
+
var css_248z$h = css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled]):checked:focus,.form-check-input:not([disabled]):checked:hover,.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-1)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-3)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input:checked,:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
|
|
30274
30298
|
|
|
30275
30299
|
/**
|
|
30276
30300
|
* @summary Switch component is used to toggle on and off or yes or no action.
|
|
@@ -30368,7 +30392,7 @@
|
|
|
30368
30392
|
`;
|
|
30369
30393
|
}
|
|
30370
30394
|
}
|
|
30371
|
-
SgdsSwitch.styles = [...SgdsElement.styles, css_248z$
|
|
30395
|
+
SgdsSwitch.styles = [...SgdsElement.styles, css_248z$R, css_248z$h];
|
|
30372
30396
|
__decorate([
|
|
30373
30397
|
property({ reflect: true, type: String })
|
|
30374
30398
|
], SgdsSwitch.prototype, "size", void 0);
|
|
@@ -30393,7 +30417,7 @@
|
|
|
30393
30417
|
|
|
30394
30418
|
register("sgds-switch", SgdsSwitch);
|
|
30395
30419
|
|
|
30396
|
-
var css_248z$
|
|
30420
|
+
var css_248z$g = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
|
|
30397
30421
|
|
|
30398
30422
|
/**
|
|
30399
30423
|
* @summary Steppers are used to inform users which step they are at in a form or a process
|
|
@@ -30511,7 +30535,7 @@
|
|
|
30511
30535
|
`;
|
|
30512
30536
|
}
|
|
30513
30537
|
}
|
|
30514
|
-
SgdsStepper.styles = [...SgdsElement.styles, css_248z$
|
|
30538
|
+
SgdsStepper.styles = [...SgdsElement.styles, css_248z$g];
|
|
30515
30539
|
/** @internal */
|
|
30516
30540
|
SgdsStepper.dependencies = { "sgds-icon": SgdsIcon };
|
|
30517
30541
|
__decorate([
|
|
@@ -30535,7 +30559,7 @@
|
|
|
30535
30559
|
|
|
30536
30560
|
register("sgds-stepper", SgdsStepper);
|
|
30537
30561
|
|
|
30538
|
-
var css_248z$
|
|
30562
|
+
var css_248z$f = css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-1);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical]) .tab{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal]) .tab{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus,.tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
|
|
30539
30563
|
|
|
30540
30564
|
let id$1 = 0;
|
|
30541
30565
|
/**
|
|
@@ -30591,7 +30615,7 @@
|
|
|
30591
30615
|
`;
|
|
30592
30616
|
}
|
|
30593
30617
|
}
|
|
30594
|
-
SgdsTab.styles = [css_248z$
|
|
30618
|
+
SgdsTab.styles = [css_248z$f];
|
|
30595
30619
|
__decorate([
|
|
30596
30620
|
query(".tab")
|
|
30597
30621
|
], SgdsTab.prototype, "tab", void 0);
|
|
@@ -30611,7 +30635,7 @@
|
|
|
30611
30635
|
watch("disabled")
|
|
30612
30636
|
], SgdsTab.prototype, "handleDisabledChange", null);
|
|
30613
30637
|
|
|
30614
|
-
var css_248z$
|
|
30638
|
+
var css_248z$e = css`.tab-group{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}.tab-group__nav{display:flex;flex-direction:row}.tab-group__content{flex:1}:host([orientation=vertical]) .tab-group{flex-direction:row}:host([orientation=vertical]) .tab-group__nav{flex-direction:column}:host([variant=solid]) .tab-group__nav{gap:var(--sgds-gap-xs)}`;
|
|
30615
30639
|
|
|
30616
30640
|
/**
|
|
30617
30641
|
* @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.
|
|
@@ -30828,7 +30852,7 @@
|
|
|
30828
30852
|
`;
|
|
30829
30853
|
}
|
|
30830
30854
|
}
|
|
30831
|
-
SgdsTabGroup.styles = [...SgdsElement.styles, css_248z$
|
|
30855
|
+
SgdsTabGroup.styles = [...SgdsElement.styles, css_248z$e];
|
|
30832
30856
|
__decorate([
|
|
30833
30857
|
query(".tab-group")
|
|
30834
30858
|
], SgdsTabGroup.prototype, "_tabGroup", void 0);
|
|
@@ -30851,7 +30875,7 @@
|
|
|
30851
30875
|
queryAssignedElements({ slot: "nav", flatten: true })
|
|
30852
30876
|
], SgdsTabGroup.prototype, "_navSlot", void 0);
|
|
30853
30877
|
|
|
30854
|
-
var css_248z$
|
|
30878
|
+
var css_248z$d = css`.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;
|
|
30855
30879
|
|
|
30856
30880
|
let id = 0;
|
|
30857
30881
|
/**
|
|
@@ -30888,7 +30912,7 @@
|
|
|
30888
30912
|
`;
|
|
30889
30913
|
}
|
|
30890
30914
|
}
|
|
30891
|
-
SgdsTabPanel.styles = [...SgdsElement.styles, css_248z$
|
|
30915
|
+
SgdsTabPanel.styles = [...SgdsElement.styles, css_248z$d];
|
|
30892
30916
|
__decorate([
|
|
30893
30917
|
property({ reflect: true })
|
|
30894
30918
|
], SgdsTabPanel.prototype, "name", void 0);
|
|
@@ -30903,7 +30927,7 @@
|
|
|
30903
30927
|
register("sgds-tab-group", SgdsTabGroup);
|
|
30904
30928
|
register("sgds-tab-panel", SgdsTabPanel);
|
|
30905
30929
|
|
|
30906
|
-
var css_248z$
|
|
30930
|
+
var css_248z$c = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);display:table;vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
|
|
30907
30931
|
|
|
30908
30932
|
/**
|
|
30909
30933
|
* @summary Table is used for displaying collections of data in organized rows and columns.
|
|
@@ -31007,7 +31031,7 @@
|
|
|
31007
31031
|
`;
|
|
31008
31032
|
}
|
|
31009
31033
|
}
|
|
31010
|
-
SgdsTable.styles = [...SgdsElement.styles, css_248z$
|
|
31034
|
+
SgdsTable.styles = [...SgdsElement.styles, css_248z$c];
|
|
31011
31035
|
__decorate([
|
|
31012
31036
|
property({ type: String, reflect: true })
|
|
31013
31037
|
], SgdsTable.prototype, "responsive", void 0);
|
|
@@ -31024,7 +31048,7 @@
|
|
|
31024
31048
|
property({ type: String })
|
|
31025
31049
|
], SgdsTable.prototype, "headerPosition", void 0);
|
|
31026
31050
|
|
|
31027
|
-
var css_248z$
|
|
31051
|
+
var css_248z$b = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis);display:table-cell;font-weight:700;padding:var(--sgds-padding-lg)}:host(:not([border])){border-color:var(--sgds-border-color-muted)}`;
|
|
31028
31052
|
|
|
31029
31053
|
/**
|
|
31030
31054
|
* @summary Table head represents a table header cell that identifies a group of information within the table.
|
|
@@ -31052,7 +31076,7 @@
|
|
|
31052
31076
|
return html$1 `<slot></slot>`;
|
|
31053
31077
|
}
|
|
31054
31078
|
}
|
|
31055
|
-
SgdsTableHead.styles = [...SgdsElement.styles, css_248z$
|
|
31079
|
+
SgdsTableHead.styles = [...SgdsElement.styles, css_248z$b];
|
|
31056
31080
|
__decorate([
|
|
31057
31081
|
state()
|
|
31058
31082
|
], SgdsTableHead.prototype, "border", void 0);
|
|
@@ -31060,7 +31084,7 @@
|
|
|
31060
31084
|
watch("border")
|
|
31061
31085
|
], SgdsTableHead.prototype, "_handleBorderChange", null);
|
|
31062
31086
|
|
|
31063
|
-
var css_248z$
|
|
31087
|
+
var css_248z$a = css`:host{display:table-row;width:100%}`;
|
|
31064
31088
|
|
|
31065
31089
|
/**
|
|
31066
31090
|
* @summary Table row organizes and groups table cells or header cells into a single horizontal line within the table.
|
|
@@ -31076,9 +31100,9 @@
|
|
|
31076
31100
|
return html$1 `<slot class="table-row"></slot>`;
|
|
31077
31101
|
}
|
|
31078
31102
|
}
|
|
31079
|
-
SgdsTableRow.styles = [...SgdsElement.styles, css_248z$
|
|
31103
|
+
SgdsTableRow.styles = [...SgdsElement.styles, css_248z$a];
|
|
31080
31104
|
|
|
31081
|
-
var css_248z$
|
|
31105
|
+
var css_248z$9 = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;padding:var(--sgds-padding-lg)}`;
|
|
31082
31106
|
|
|
31083
31107
|
/**
|
|
31084
31108
|
* @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.
|
|
@@ -31094,14 +31118,14 @@
|
|
|
31094
31118
|
return html$1 ` <slot class="table-cell"></slot> `;
|
|
31095
31119
|
}
|
|
31096
31120
|
}
|
|
31097
|
-
SgdsTableCell.styles = [...SgdsElement.styles, css_248z$
|
|
31121
|
+
SgdsTableCell.styles = [...SgdsElement.styles, css_248z$9];
|
|
31098
31122
|
|
|
31099
31123
|
register("sgds-table", SgdsTable);
|
|
31100
31124
|
register("sgds-table-head", SgdsTableHead);
|
|
31101
31125
|
register("sgds-table-row", SgdsTableRow);
|
|
31102
31126
|
register("sgds-table-cell", SgdsTableCell);
|
|
31103
31127
|
|
|
31104
|
-
var css_248z$
|
|
31128
|
+
var css_248z$8 = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}.form-control{appearance:none;background-clip:padding-box;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);color:var(--sgds-form-color-default);min-height:var(--sgds-dimension-136);outline:0;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.form-control[readonly]{border-color:var(--sgds-border-color-muted)}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:not([disabled]):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control:not([disabled]):not(.is-invalid):focus,.form-control:not([disabled]):not(.is-invalid):focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus)}.form-control.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control:disabled{background-color:var(--sgds-form-surface-muted)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
|
|
31105
31129
|
|
|
31106
31130
|
/**
|
|
31107
31131
|
* @summary Text areas allow for the collection of input longer than a single line.
|
|
@@ -31297,7 +31321,7 @@
|
|
|
31297
31321
|
`;
|
|
31298
31322
|
}
|
|
31299
31323
|
}
|
|
31300
|
-
SgdsTextarea.styles = [...FormControlElement.styles, css_248z$
|
|
31324
|
+
SgdsTextarea.styles = [...FormControlElement.styles, css_248z$8];
|
|
31301
31325
|
__decorate([
|
|
31302
31326
|
query("textarea.form-control")
|
|
31303
31327
|
], SgdsTextarea.prototype, "textarea", void 0);
|
|
@@ -31370,7 +31394,7 @@
|
|
|
31370
31394
|
|
|
31371
31395
|
register("sgds-textarea", SgdsTextarea);
|
|
31372
31396
|
|
|
31373
|
-
var css_248z$
|
|
31397
|
+
var css_248z$7 = css`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body{gap:var(--sgds-gap-2-xs)}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
|
|
31374
31398
|
|
|
31375
31399
|
/**
|
|
31376
31400
|
* @summary Toast allows you to convey quick messaging notifications to the user.
|
|
@@ -31487,7 +31511,7 @@
|
|
|
31487
31511
|
`;
|
|
31488
31512
|
}
|
|
31489
31513
|
}
|
|
31490
|
-
SgdsToast.styles = [...SgdsElement.styles, css_248z$
|
|
31514
|
+
SgdsToast.styles = [...SgdsElement.styles, css_248z$7];
|
|
31491
31515
|
/**@internal */
|
|
31492
31516
|
SgdsToast.dependencies = {
|
|
31493
31517
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -31531,7 +31555,7 @@
|
|
|
31531
31555
|
options: { duration: 400, easing: "ease" }
|
|
31532
31556
|
});
|
|
31533
31557
|
|
|
31534
|
-
var css_248z$
|
|
31558
|
+
var css_248z$6 = css`.toast-container{max-width:100%;pointer-events:none;position:fixed;width:max-content;z-index:1090}.top-start{left:0;top:0}.top-center{left:50%;top:0;transform:translateX(-50%)}.top-end{right:0;top:0}.middle-start{left:0;top:50%;transform:translateY(-50%)}.middle-center{left:50%;top:50%;transform:translate(-50%,-50%)}.middle-end{right:0;top:50%;transform:translateY(-50%)}.bottom-start{bottom:0;left:0}.bottom-center{bottom:0;left:50%;transform:translateX(-50%)}.bottom-end{bottom:0;right:0}slot{display:flex;flex-direction:column;gap:.5rem}`;
|
|
31535
31559
|
|
|
31536
31560
|
/**
|
|
31537
31561
|
* @summary ToastContainer is the container component to position `sgds-toast` in screen. When there is multiple toasts in the container, the toast components are stacked vertically.
|
|
@@ -31553,7 +31577,7 @@
|
|
|
31553
31577
|
`;
|
|
31554
31578
|
}
|
|
31555
31579
|
}
|
|
31556
|
-
SgdsToastContainer.styles = [css_248z$
|
|
31580
|
+
SgdsToastContainer.styles = [css_248z$6];
|
|
31557
31581
|
__decorate([
|
|
31558
31582
|
property({ type: String, reflect: true })
|
|
31559
31583
|
], SgdsToastContainer.prototype, "position", void 0);
|
|
@@ -31563,7 +31587,7 @@
|
|
|
31563
31587
|
|
|
31564
31588
|
register("sgds-tooltip", SgdsTooltip);
|
|
31565
31589
|
|
|
31566
|
-
var css_248z$
|
|
31590
|
+
var css_248z$5 = css`.container{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}slot:not([name])::slotted(*){--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-bold,var(--sgds-font-weight-semibold));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}.contents{display:flex;flex-direction:column;gap:var(--sgds-gap-md);list-style:none;margin:var(--sgds-margin-none);padding:var(--sgds-padding-none)}slot[name=contents]::slotted(li){--sgds-margin-3-xs:var(--sgds-margin-none);margin-top:var(--sgds-margin-3-xs,var(--sgds-margin-none))}`;
|
|
31567
31591
|
|
|
31568
31592
|
/**
|
|
31569
31593
|
*
|
|
@@ -31582,13 +31606,13 @@
|
|
|
31582
31606
|
</div> `;
|
|
31583
31607
|
}
|
|
31584
31608
|
}
|
|
31585
|
-
SgdsTableOfContents.styles = [...SgdsElement.styles, css_248z$
|
|
31609
|
+
SgdsTableOfContents.styles = [...SgdsElement.styles, css_248z$5];
|
|
31586
31610
|
|
|
31587
31611
|
customElements.define("sgds-table-of-contents", SgdsTableOfContents);
|
|
31588
31612
|
|
|
31589
|
-
var css_248z$
|
|
31613
|
+
var css_248z$4 = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
|
|
31590
31614
|
|
|
31591
|
-
var css_248z$
|
|
31615
|
+
var css_248z$3 = css`.sgds-container{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 64px)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container{max-width:896px}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-container{max-width:1176px}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:1320px}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}`;
|
|
31592
31616
|
|
|
31593
31617
|
const VALID_KEYS = ["Enter", " "];
|
|
31594
31618
|
/**
|
|
@@ -31768,7 +31792,7 @@
|
|
|
31768
31792
|
`;
|
|
31769
31793
|
}
|
|
31770
31794
|
}
|
|
31771
|
-
SgdsSubnav.styles = [...SgdsElement.styles, css_248z$
|
|
31795
|
+
SgdsSubnav.styles = [...SgdsElement.styles, css_248z$4, css_248z$3];
|
|
31772
31796
|
/** @internal */
|
|
31773
31797
|
SgdsSubnav.dependencies = {
|
|
31774
31798
|
"sgds-icon": SgdsIcon
|
|
@@ -31818,7 +31842,7 @@
|
|
|
31818
31842
|
options: { duration: 200, easing: "ease-in-out" }
|
|
31819
31843
|
});
|
|
31820
31844
|
|
|
31821
|
-
var css_248z$
|
|
31845
|
+
var css_248z$2 = css`:host(:not([disabled])[active]:not([active=false])) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-font-size-2:var(--sgds-font-size-1);--sgds-link-color-default:var(--sgds-color-default);box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));gap:var(--sgds-gap-2-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}@media screen and (min-width:1024px){:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);background-color:inherit;border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}::slotted(*){padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
|
|
31822
31846
|
|
|
31823
31847
|
/**
|
|
31824
31848
|
* @slot default - slot for SgdsSubnavItem element.
|
|
@@ -31868,7 +31892,7 @@
|
|
|
31868
31892
|
return html$1 `<slot @slotchange=${this._handleSlotChange}></slot>`;
|
|
31869
31893
|
}
|
|
31870
31894
|
}
|
|
31871
|
-
SgdsSubnavItem.styles = [...SgdsElement.styles, css_248z$
|
|
31895
|
+
SgdsSubnavItem.styles = [...SgdsElement.styles, css_248z$2];
|
|
31872
31896
|
__decorate([
|
|
31873
31897
|
property({ type: Boolean, reflect: true })
|
|
31874
31898
|
], SgdsSubnavItem.prototype, "active", void 0);
|
|
@@ -31882,9 +31906,9 @@
|
|
|
31882
31906
|
customElements.define("sgds-subnav", SgdsSubnav);
|
|
31883
31907
|
customElements.define("sgds-subnav-item", SgdsSubnavItem);
|
|
31884
31908
|
|
|
31885
|
-
var css_248z$
|
|
31909
|
+
var css_248z$1 = css`:host{display:block;position:relative}.select{flex-direction:column;gap:var(--sgds-form-gap-md)}.select .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.select{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;caret-color:transparent;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.select-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
|
|
31886
31910
|
|
|
31887
|
-
var css_248z
|
|
31911
|
+
var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
|
|
31888
31912
|
|
|
31889
31913
|
class SelectItem extends SgdsElement {
|
|
31890
31914
|
constructor() {
|
|
@@ -31929,7 +31953,7 @@
|
|
|
31929
31953
|
SelectItem.dependencies = {
|
|
31930
31954
|
"sgds-icon": SgdsIcon
|
|
31931
31955
|
};
|
|
31932
|
-
SelectItem.styles = [css_248z
|
|
31956
|
+
SelectItem.styles = [css_248z];
|
|
31933
31957
|
__decorate([
|
|
31934
31958
|
property({ type: Boolean, reflect: true })
|
|
31935
31959
|
], SelectItem.prototype, "active", void 0);
|
|
@@ -32072,7 +32096,7 @@
|
|
|
32072
32096
|
`;
|
|
32073
32097
|
}
|
|
32074
32098
|
}
|
|
32075
|
-
SgdsSelect.styles = [...SelectElement.styles, css_248z$
|
|
32099
|
+
SgdsSelect.styles = [...SelectElement.styles, css_248z$1];
|
|
32076
32100
|
/** @internal */
|
|
32077
32101
|
SgdsSelect.dependencies = {
|
|
32078
32102
|
"sgds-icon": SgdsIcon,
|
|
@@ -32084,254 +32108,5 @@
|
|
|
32084
32108
|
|
|
32085
32109
|
customElements.define("sgds-select", SgdsSelect);
|
|
32086
32110
|
|
|
32087
|
-
var css_248z$2 = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=image-badge]::slotted(*){left:20px;position:absolute;top:20px}slot[name=image-action]::slotted(*){position:absolute;right:20px;top:20px}`;
|
|
32088
|
-
|
|
32089
|
-
/**
|
|
32090
|
-
* @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
32091
|
-
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
32092
|
-
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
32093
|
-
* @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.
|
|
32094
|
-
* @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.
|
|
32095
|
-
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
32096
|
-
* @slot subtitle - The subtitle of the card
|
|
32097
|
-
* @slot title - The title of the card
|
|
32098
|
-
* @slot description - The paragrapher text of the card
|
|
32099
|
-
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
32100
|
-
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
32101
|
-
*/
|
|
32102
|
-
class SgdsImageCard extends CardElement {
|
|
32103
|
-
constructor() {
|
|
32104
|
-
super(...arguments);
|
|
32105
|
-
/** Removes the card's internal padding when set to true. */
|
|
32106
|
-
this.noPadding = false;
|
|
32107
|
-
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
32108
|
-
this.imagePosition = "before";
|
|
32109
|
-
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
32110
|
-
this.imageAdjustment = "default";
|
|
32111
|
-
}
|
|
32112
|
-
firstUpdated() {
|
|
32113
|
-
if (this._imageNode.length === 0) {
|
|
32114
|
-
const image = this.shadowRoot.querySelector(".card-image");
|
|
32115
|
-
const body = this.shadowRoot.querySelector(".card-body");
|
|
32116
|
-
image.style.display = "none";
|
|
32117
|
-
if (this.noPadding)
|
|
32118
|
-
body.style.padding = "0px";
|
|
32119
|
-
}
|
|
32120
|
-
}
|
|
32121
|
-
handleImgSlotChange(e) {
|
|
32122
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
32123
|
-
if (childNodes.length > 1) {
|
|
32124
|
-
return console.error("Multiple elements passed into SgdsCard's image slot");
|
|
32125
|
-
}
|
|
32126
|
-
}
|
|
32127
|
-
render() {
|
|
32128
|
-
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
32129
|
-
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
32130
|
-
return html `
|
|
32131
|
-
<${tag}
|
|
32132
|
-
class="card ${classMap({
|
|
32133
|
-
disabled: this.disabled
|
|
32134
|
-
})}"
|
|
32135
|
-
tabindex=${cardTabIndex}
|
|
32136
|
-
>
|
|
32137
|
-
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
32138
|
-
<div class="card-image">
|
|
32139
|
-
<slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
|
|
32140
|
-
<slot name="image-badge"></slot>
|
|
32141
|
-
<slot name="image-action"></slot>
|
|
32142
|
-
</div>
|
|
32143
|
-
<div class="card-body">
|
|
32144
|
-
<slot name="upper"></slot>
|
|
32145
|
-
<div class="card-header-container">
|
|
32146
|
-
<div class="card-header">
|
|
32147
|
-
<slot name="subtitle"></slot>
|
|
32148
|
-
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
32149
|
-
</div>
|
|
32150
|
-
<slot></slot>
|
|
32151
|
-
</div>
|
|
32152
|
-
<p class="card-text">
|
|
32153
|
-
<slot name="description"></slot>
|
|
32154
|
-
</p>
|
|
32155
|
-
<slot name="lower"></slot>
|
|
32156
|
-
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
32157
|
-
</div>
|
|
32158
|
-
</${tag}>
|
|
32159
|
-
`;
|
|
32160
|
-
}
|
|
32161
|
-
}
|
|
32162
|
-
SgdsImageCard.styles = [...CardElement.styles, css_248z$2];
|
|
32163
|
-
__decorate([
|
|
32164
|
-
queryAssignedNodes({ slot: "image", flatten: true })
|
|
32165
|
-
], SgdsImageCard.prototype, "_imageNode", void 0);
|
|
32166
|
-
__decorate([
|
|
32167
|
-
property({ type: Boolean, reflect: true })
|
|
32168
|
-
], SgdsImageCard.prototype, "noPadding", void 0);
|
|
32169
|
-
__decorate([
|
|
32170
|
-
property({ type: String, reflect: true })
|
|
32171
|
-
], SgdsImageCard.prototype, "imagePosition", void 0);
|
|
32172
|
-
__decorate([
|
|
32173
|
-
property({ type: String, reflect: true })
|
|
32174
|
-
], SgdsImageCard.prototype, "imageAdjustment", void 0);
|
|
32175
|
-
|
|
32176
|
-
customElements.define("sgds-image-card", SgdsImageCard);
|
|
32177
|
-
|
|
32178
|
-
var css_248z$1 = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:auto;max-width:100%}`;
|
|
32179
|
-
|
|
32180
|
-
/**
|
|
32181
|
-
* @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
32182
|
-
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
32183
|
-
* @slot thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.
|
|
32184
|
-
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
32185
|
-
* @slot subtitle - The subtitle of the card
|
|
32186
|
-
* @slot title - The title of the card
|
|
32187
|
-
* @slot description - The paragrapher text of the card
|
|
32188
|
-
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
32189
|
-
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
32190
|
-
*/
|
|
32191
|
-
class SgdsThumbnailCard extends CardElement {
|
|
32192
|
-
constructor() {
|
|
32193
|
-
super(...arguments);
|
|
32194
|
-
/** Removes the card's internal padding when set to true. */
|
|
32195
|
-
this.noPadding = false;
|
|
32196
|
-
}
|
|
32197
|
-
firstUpdated() {
|
|
32198
|
-
if (this._thumbnailNode.length === 0) {
|
|
32199
|
-
const thumbnail = this.shadowRoot.querySelector(".card-thumbnail");
|
|
32200
|
-
thumbnail.style.display = "none";
|
|
32201
|
-
if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
|
|
32202
|
-
const media = this.shadowRoot.querySelector(".card-media");
|
|
32203
|
-
media.style.display = "none";
|
|
32204
|
-
const body = this.shadowRoot.querySelector(".card-body");
|
|
32205
|
-
if (this.noPadding)
|
|
32206
|
-
body.style.padding = "0px";
|
|
32207
|
-
}
|
|
32208
|
-
}
|
|
32209
|
-
}
|
|
32210
|
-
render() {
|
|
32211
|
-
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
32212
|
-
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
32213
|
-
return html `
|
|
32214
|
-
<${tag}
|
|
32215
|
-
class="card ${classMap({
|
|
32216
|
-
disabled: this.disabled
|
|
32217
|
-
})}"
|
|
32218
|
-
tabindex=${cardTabIndex}
|
|
32219
|
-
>
|
|
32220
|
-
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
32221
|
-
<div class="card-media">
|
|
32222
|
-
<div class="card-thumbnail">
|
|
32223
|
-
<slot name="thumbnail"></slot>
|
|
32224
|
-
</div>
|
|
32225
|
-
${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
|
|
32226
|
-
</div>
|
|
32227
|
-
<div class="card-body">
|
|
32228
|
-
${this.orientation === "horizontal" ? html `<slot name="upper"></slot>` : nothing}
|
|
32229
|
-
<div class="card-header-container">
|
|
32230
|
-
<div class="card-header">
|
|
32231
|
-
<slot name="subtitle"></slot>
|
|
32232
|
-
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
32233
|
-
</div>
|
|
32234
|
-
<slot></slot>
|
|
32235
|
-
</div>
|
|
32236
|
-
<p class="card-text">
|
|
32237
|
-
<slot name="description"></slot>
|
|
32238
|
-
</p>
|
|
32239
|
-
<slot name="lower"></slot>
|
|
32240
|
-
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
32241
|
-
</div>
|
|
32242
|
-
</${tag}>
|
|
32243
|
-
`;
|
|
32244
|
-
}
|
|
32245
|
-
}
|
|
32246
|
-
SgdsThumbnailCard.styles = [...CardElement.styles, css_248z$1];
|
|
32247
|
-
__decorate([
|
|
32248
|
-
queryAssignedNodes({ slot: "thumbnail", flatten: true })
|
|
32249
|
-
], SgdsThumbnailCard.prototype, "_thumbnailNode", void 0);
|
|
32250
|
-
__decorate([
|
|
32251
|
-
queryAssignedNodes({ slot: "upper", flatten: true })
|
|
32252
|
-
], SgdsThumbnailCard.prototype, "_upperNode", void 0);
|
|
32253
|
-
__decorate([
|
|
32254
|
-
property({ type: Boolean, reflect: true })
|
|
32255
|
-
], SgdsThumbnailCard.prototype, "noPadding", void 0);
|
|
32256
|
-
|
|
32257
|
-
customElements.define("sgds-thumbnail-card", SgdsThumbnailCard);
|
|
32258
|
-
|
|
32259
|
-
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)}`;
|
|
32260
|
-
|
|
32261
|
-
/**
|
|
32262
|
-
* @summary Icon cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
32263
|
-
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
32264
|
-
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
32265
|
-
* @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
|
|
32266
|
-
* @slot subtitle - The subtitle of the card
|
|
32267
|
-
* @slot title - The title of the card
|
|
32268
|
-
* @slot description - The paragrapher text of the card
|
|
32269
|
-
* @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
|
|
32270
|
-
* @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
|
|
32271
|
-
*/
|
|
32272
|
-
class SgdsIconCard extends CardElement {
|
|
32273
|
-
constructor() {
|
|
32274
|
-
super(...arguments);
|
|
32275
|
-
/** Removes the card's internal padding when set to true. */
|
|
32276
|
-
this.noPadding = false;
|
|
32277
|
-
}
|
|
32278
|
-
firstUpdated() {
|
|
32279
|
-
if (this._iconNode.length === 0) {
|
|
32280
|
-
if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
|
|
32281
|
-
const media = this.shadowRoot.querySelector(".card-media");
|
|
32282
|
-
media.style.display = "none";
|
|
32283
|
-
const body = this.shadowRoot.querySelector(".card-body");
|
|
32284
|
-
if (this.noPadding)
|
|
32285
|
-
body.style.padding = "0px";
|
|
32286
|
-
}
|
|
32287
|
-
}
|
|
32288
|
-
}
|
|
32289
|
-
render() {
|
|
32290
|
-
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
32291
|
-
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
32292
|
-
return html `
|
|
32293
|
-
<${tag}
|
|
32294
|
-
class="card ${classMap({
|
|
32295
|
-
disabled: this.disabled
|
|
32296
|
-
})}"
|
|
32297
|
-
tabindex=${cardTabIndex}
|
|
32298
|
-
>
|
|
32299
|
-
${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
|
|
32300
|
-
<div class="card-media">
|
|
32301
|
-
<slot name="icon"></slot>
|
|
32302
|
-
${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
|
|
32303
|
-
</div>
|
|
32304
|
-
<div class="card-body">
|
|
32305
|
-
${this.orientation === "horizontal" ? html `<slot name="upper"></slot>` : nothing}
|
|
32306
|
-
<div class="card-header-container">
|
|
32307
|
-
<div class="card-header">
|
|
32308
|
-
<slot name="subtitle"></slot>
|
|
32309
|
-
<h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
|
|
32310
|
-
</div>
|
|
32311
|
-
<slot></slot>
|
|
32312
|
-
</div>
|
|
32313
|
-
<p class="card-text">
|
|
32314
|
-
<slot name="description"></slot>
|
|
32315
|
-
</p>
|
|
32316
|
-
<slot name="lower"></slot>
|
|
32317
|
-
<slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
|
|
32318
|
-
</div>
|
|
32319
|
-
</${tag}>
|
|
32320
|
-
`;
|
|
32321
|
-
}
|
|
32322
|
-
}
|
|
32323
|
-
SgdsIconCard.styles = [...CardElement.styles, css_248z];
|
|
32324
|
-
__decorate([
|
|
32325
|
-
queryAssignedNodes({ slot: "icon", flatten: true })
|
|
32326
|
-
], SgdsIconCard.prototype, "_iconNode", void 0);
|
|
32327
|
-
__decorate([
|
|
32328
|
-
queryAssignedNodes({ slot: "upper", flatten: true })
|
|
32329
|
-
], SgdsIconCard.prototype, "_upperNode", void 0);
|
|
32330
|
-
__decorate([
|
|
32331
|
-
property({ type: Boolean, reflect: true })
|
|
32332
|
-
], SgdsIconCard.prototype, "noPadding", void 0);
|
|
32333
|
-
|
|
32334
|
-
customElements.define("sgds-icon-card", SgdsIconCard);
|
|
32335
|
-
|
|
32336
32111
|
}));
|
|
32337
32112
|
//# sourceMappingURL=index.umd.js.map
|