@govtechsg/sgds-web-component 3.1.0-rc.6 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base/button.js +1 -1
- package/base/select-element.d.ts +80 -0
- package/base/select-element.js +201 -0
- package/base/select-element.js.map +1 -0
- package/components/Accordion/index.umd.js +7 -5
- package/components/Accordion/index.umd.js.map +1 -1
- package/components/Accordion/sgds-accordion-item.d.ts +0 -1
- package/components/Accordion/sgds-accordion-item.js +7 -5
- package/components/Accordion/sgds-accordion-item.js.map +1 -1
- package/components/Breadcrumb/index.umd.js +5 -2
- package/components/Breadcrumb/index.umd.js.map +1 -1
- package/components/Button/button.js +1 -1
- package/components/Button/index.umd.js +3 -6
- package/components/Button/index.umd.js.map +1 -1
- package/components/Button/sgds-button.js +1 -4
- package/components/Button/sgds-button.js.map +1 -1
- package/components/Checkbox/checkbox.js +1 -1
- package/components/Checkbox/index.umd.js +42 -34
- package/components/Checkbox/index.umd.js.map +1 -1
- package/components/Checkbox/sgds-checkbox-group.d.ts +6 -4
- package/components/Checkbox/sgds-checkbox-group.js +34 -17
- package/components/Checkbox/sgds-checkbox-group.js.map +1 -1
- package/components/Checkbox/sgds-checkbox.d.ts +2 -3
- package/components/Checkbox/sgds-checkbox.js +9 -21
- package/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/components/ComboBox/combo-box.js +1 -1
- package/components/ComboBox/index.umd.js +492 -500
- package/components/ComboBox/index.umd.js.map +1 -1
- package/components/ComboBox/sgds-combo-box.d.ts +9 -82
- package/components/ComboBox/sgds-combo-box.js +13 -202
- package/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/components/Datepicker/index.umd.js +4 -7
- package/components/Datepicker/index.umd.js.map +1 -1
- package/components/Dropdown/dropdown-menu.js +1 -1
- package/components/Dropdown/dropdown.js +1 -1
- package/components/Dropdown/index.umd.js +5 -2
- package/components/Dropdown/index.umd.js.map +1 -1
- package/components/Dropdown/sgds-dropdown-item.js +3 -0
- package/components/Dropdown/sgds-dropdown-item.js.map +1 -1
- package/components/FileUpload/index.umd.js +3 -6
- package/components/FileUpload/index.umd.js.map +1 -1
- package/components/IconButton/index.umd.js +1 -1
- package/components/Mainnav/index.umd.js +13 -10
- package/components/Mainnav/index.umd.js.map +1 -1
- package/components/Mainnav/mainnav-dropdown.js +1 -1
- package/components/Mainnav/mainnav-item.js +1 -1
- package/components/Mainnav/mainnav.js +1 -1
- package/components/Pagination/index.umd.js +3 -6
- package/components/Pagination/index.umd.js.map +1 -1
- package/components/QuantityToggle/index.umd.js +1 -1
- package/components/Select/index.d.ts +6 -0
- package/components/Select/index.js +4 -0
- package/components/Select/index.js.map +1 -0
- package/components/Select/index.umd.js +10317 -0
- package/components/Select/index.umd.js.map +1 -0
- package/components/Select/select-item.d.ts +17 -0
- package/components/Select/select-item.js +61 -0
- package/components/Select/select-item.js.map +1 -0
- package/components/Select/select-item2.js +6 -0
- package/components/Select/select-item2.js.map +1 -0
- package/components/Select/select.js +6 -0
- package/components/Select/select.js.map +1 -0
- package/components/Select/sgds-select.d.ts +27 -0
- package/components/Select/sgds-select.js +158 -0
- package/components/Select/sgds-select.js.map +1 -0
- package/components/Subnav/index.d.ts +8 -0
- package/components/Subnav/index.js +6 -0
- package/components/Subnav/index.js.map +1 -0
- package/components/Subnav/index.umd.js +6074 -0
- package/components/Subnav/index.umd.js.map +1 -0
- package/components/Subnav/sgds-subnav-item.d.ts +16 -0
- package/components/Subnav/sgds-subnav-item.js +68 -0
- package/components/Subnav/sgds-subnav-item.js.map +1 -0
- package/components/Subnav/sgds-subnav.d.ts +47 -0
- package/components/Subnav/sgds-subnav.js +253 -0
- package/components/Subnav/sgds-subnav.js.map +1 -0
- package/components/Subnav/subnav-item.js +6 -0
- package/components/Subnav/subnav-item.js.map +1 -0
- package/components/Subnav/subnav.js +6 -0
- package/components/Subnav/subnav.js.map +1 -0
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -0
- package/components/index.js.map +1 -1
- package/components/index.umd.js +812 -355
- package/components/index.umd.js.map +1 -1
- package/css/grid.js +6 -0
- package/css/grid.js.map +1 -0
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/index.umd.js +897 -376
- package/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/react/base/button.cjs.js +1 -1
- package/react/base/button.js +1 -1
- package/react/base/select-element.cjs.js +206 -0
- package/react/base/select-element.cjs.js.map +1 -0
- package/react/base/select-element.js +202 -0
- package/react/base/select-element.js.map +1 -0
- package/react/checkbox/index.cjs.js +2 -1
- package/react/checkbox/index.cjs.js.map +1 -1
- package/react/checkbox/index.js +2 -1
- package/react/checkbox/index.js.map +1 -1
- package/react/checkbox-group/index.cjs.js +3 -1
- package/react/checkbox-group/index.cjs.js.map +1 -1
- package/react/checkbox-group/index.js +3 -1
- package/react/checkbox-group/index.js.map +1 -1
- package/react/components/Accordion/sgds-accordion-item.cjs.js +7 -5
- package/react/components/Accordion/sgds-accordion-item.cjs.js.map +1 -1
- package/react/components/Accordion/sgds-accordion-item.js +7 -5
- package/react/components/Accordion/sgds-accordion-item.js.map +1 -1
- package/react/components/Button/button.cjs.js +1 -1
- package/react/components/Button/button.js +1 -1
- package/react/components/Button/sgds-button.cjs.js +1 -4
- package/react/components/Button/sgds-button.cjs.js.map +1 -1
- package/react/components/Button/sgds-button.js +1 -4
- package/react/components/Button/sgds-button.js.map +1 -1
- package/react/components/Checkbox/checkbox.cjs.js +1 -1
- package/react/components/Checkbox/checkbox.js +1 -1
- package/react/components/Checkbox/sgds-checkbox-group.cjs.js +33 -16
- package/react/components/Checkbox/sgds-checkbox-group.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox-group.js +34 -17
- package/react/components/Checkbox/sgds-checkbox-group.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js +9 -21
- package/react/components/Checkbox/sgds-checkbox.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.js +9 -21
- package/react/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/react/components/ComboBox/combo-box.cjs.js +1 -1
- package/react/components/ComboBox/combo-box.js +1 -1
- package/react/components/ComboBox/sgds-combo-box.cjs.js +12 -201
- package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
- package/react/components/ComboBox/sgds-combo-box.js +13 -202
- package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/react/components/Dropdown/dropdown-menu.cjs.js +1 -1
- package/react/components/Dropdown/dropdown-menu.js +1 -1
- package/react/components/Dropdown/dropdown.cjs.js +1 -1
- package/react/components/Dropdown/dropdown.js +1 -1
- package/react/components/Dropdown/sgds-dropdown-item.cjs.js +3 -0
- package/react/components/Dropdown/sgds-dropdown-item.cjs.js.map +1 -1
- package/react/components/Dropdown/sgds-dropdown-item.js +3 -0
- package/react/components/Dropdown/sgds-dropdown-item.js.map +1 -1
- package/react/components/Mainnav/mainnav-dropdown.cjs.js +1 -1
- package/react/components/Mainnav/mainnav-dropdown.js +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/Select/select-item.cjs.js +67 -0
- package/react/components/Select/select-item.cjs.js.map +1 -0
- package/react/components/Select/select-item.cjs2.js +11 -0
- package/react/components/Select/select-item.cjs2.js.map +1 -0
- package/react/components/Select/select-item.js +62 -0
- package/react/components/Select/select-item.js.map +1 -0
- package/react/components/Select/select-item2.js +7 -0
- package/react/components/Select/select-item2.js.map +1 -0
- package/react/components/Select/select.cjs.js +11 -0
- package/react/components/Select/select.cjs.js.map +1 -0
- package/react/components/Select/select.js +7 -0
- package/react/components/Select/select.js.map +1 -0
- package/react/components/Select/sgds-select.cjs.js +164 -0
- package/react/components/Select/sgds-select.cjs.js.map +1 -0
- package/react/components/Select/sgds-select.js +159 -0
- package/react/components/Select/sgds-select.js.map +1 -0
- package/react/components/Subnav/sgds-subnav-item.cjs.js +74 -0
- package/react/components/Subnav/sgds-subnav-item.cjs.js.map +1 -0
- package/react/components/Subnav/sgds-subnav-item.js +69 -0
- package/react/components/Subnav/sgds-subnav-item.js.map +1 -0
- package/react/components/Subnav/sgds-subnav.cjs.js +259 -0
- package/react/components/Subnav/sgds-subnav.cjs.js.map +1 -0
- package/react/components/Subnav/sgds-subnav.js +254 -0
- package/react/components/Subnav/sgds-subnav.js.map +1 -0
- package/react/components/Subnav/subnav-item.cjs.js +11 -0
- package/react/components/Subnav/subnav-item.cjs.js.map +1 -0
- package/react/components/Subnav/subnav-item.js +7 -0
- package/react/components/Subnav/subnav-item.js.map +1 -0
- package/react/components/Subnav/subnav.cjs.js +11 -0
- package/react/components/Subnav/subnav.cjs.js.map +1 -0
- package/react/components/Subnav/subnav.js +7 -0
- package/react/components/Subnav/subnav.js.map +1 -0
- package/react/css/grid.cjs.js +11 -0
- package/react/css/grid.cjs.js.map +1 -0
- package/react/css/grid.js +7 -0
- package/react/css/grid.js.map +1 -0
- package/react/index.cjs.js +38 -32
- package/react/index.cjs.js.map +1 -1
- package/react/index.d.ts +3 -0
- package/react/index.js +3 -0
- package/react/index.js.map +1 -1
- package/react/select/index.cjs.js +46 -0
- package/react/select/index.cjs.js.map +1 -0
- package/react/select/index.d.ts +2 -0
- package/react/select/index.js +22 -0
- package/react/select/index.js.map +1 -0
- package/react/subnav/index.cjs.js +45 -0
- package/react/subnav/index.cjs.js.map +1 -0
- package/react/subnav/index.d.ts +2 -0
- package/react/subnav/index.js +21 -0
- package/react/subnav/index.js.map +1 -0
- package/react/subnav-item/index.cjs.js +40 -0
- package/react/subnav-item/index.cjs.js.map +1 -0
- package/react/subnav-item/index.d.ts +2 -0
- package/react/subnav-item/index.js +16 -0
- package/react/subnav-item/index.js.map +1 -0
- package/react/utils/breakpoints.cjs.js +4 -4
- package/react/utils/breakpoints.cjs.js.map +1 -1
- package/react/utils/breakpoints.js +4 -4
- package/react/utils/breakpoints.js.map +1 -1
- package/utils/breakpoints.d.ts +4 -4
- package/utils/breakpoints.js +4 -4
- package/utils/breakpoints.js.map +1 -1
package/components/index.umd.js
CHANGED
|
@@ -4383,7 +4383,7 @@
|
|
|
4383
4383
|
});
|
|
4384
4384
|
}
|
|
4385
4385
|
|
|
4386
|
-
var css_248z$
|
|
4386
|
+
var css_248z$1c = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
|
|
4387
4387
|
|
|
4388
4388
|
/**
|
|
4389
4389
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -4440,11 +4440,11 @@
|
|
|
4440
4440
|
});
|
|
4441
4441
|
}
|
|
4442
4442
|
}
|
|
4443
|
-
SgdsElement.styles = [css_248z$
|
|
4443
|
+
SgdsElement.styles = [css_248z$1c];
|
|
4444
4444
|
/** @internal */
|
|
4445
4445
|
SgdsElement.dependencies = {};
|
|
4446
4446
|
|
|
4447
|
-
var css_248z$
|
|
4447
|
+
var css_248z$1b = css`:host([variant=border]) .accordion{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md)}`;
|
|
4448
4448
|
|
|
4449
4449
|
const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
|
|
4450
4450
|
/**
|
|
@@ -4516,7 +4516,7 @@
|
|
|
4516
4516
|
`;
|
|
4517
4517
|
}
|
|
4518
4518
|
}
|
|
4519
|
-
SgdsAccordion.styles = [...SgdsElement.styles, css_248z$
|
|
4519
|
+
SgdsAccordion.styles = [...SgdsElement.styles, css_248z$1b];
|
|
4520
4520
|
__decorate([
|
|
4521
4521
|
property({ type: Boolean, reflect: true })
|
|
4522
4522
|
], SgdsAccordion.prototype, "allowMultiple", void 0);
|
|
@@ -4791,7 +4791,7 @@
|
|
|
4791
4791
|
};
|
|
4792
4792
|
}
|
|
4793
4793
|
|
|
4794
|
-
var css_248z$
|
|
4794
|
+
var css_248z$1a = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-heading);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
|
|
4795
4795
|
|
|
4796
4796
|
/**
|
|
4797
4797
|
*
|
|
@@ -4813,10 +4813,6 @@
|
|
|
4813
4813
|
/** Disables the accordion item */
|
|
4814
4814
|
this.disabled = false;
|
|
4815
4815
|
}
|
|
4816
|
-
firstUpdated() {
|
|
4817
|
-
if (!this.open)
|
|
4818
|
-
this.body.classList.add("hidden");
|
|
4819
|
-
}
|
|
4820
4816
|
handleSummaryClick() {
|
|
4821
4817
|
if (this.open) {
|
|
4822
4818
|
this.hide();
|
|
@@ -4895,6 +4891,7 @@
|
|
|
4895
4891
|
return waitForEvent(this, "sgds-after-hide");
|
|
4896
4892
|
}
|
|
4897
4893
|
render() {
|
|
4894
|
+
const isHydrated = this.hasUpdated;
|
|
4898
4895
|
return html$1 `
|
|
4899
4896
|
<div class="accordion-item">
|
|
4900
4897
|
<button
|
|
@@ -4917,14 +4914,19 @@
|
|
|
4917
4914
|
<sgds-icon name="chevron-down" size=${this.getAttribute("density") === "compact" ? "md" : "lg"}></sgds-icon>
|
|
4918
4915
|
</slot>
|
|
4919
4916
|
</button>
|
|
4920
|
-
<div
|
|
4917
|
+
<div
|
|
4918
|
+
class=${classMap({
|
|
4919
|
+
"accordion-body": true,
|
|
4920
|
+
hidden: !this.open && !isHydrated
|
|
4921
|
+
})}
|
|
4922
|
+
>
|
|
4921
4923
|
<slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
|
|
4922
4924
|
</div>
|
|
4923
4925
|
</div>
|
|
4924
4926
|
`;
|
|
4925
4927
|
}
|
|
4926
4928
|
}
|
|
4927
|
-
SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$
|
|
4929
|
+
SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$1a];
|
|
4928
4930
|
__decorate([
|
|
4929
4931
|
query(".accordion-item")
|
|
4930
4932
|
], SgdsAccordionItem.prototype, "accordion", void 0);
|
|
@@ -5085,7 +5087,7 @@
|
|
|
5085
5087
|
*/
|
|
5086
5088
|
const ifDefined = (value) => value ?? nothing;
|
|
5087
5089
|
|
|
5088
|
-
var css_248z$
|
|
5090
|
+
var css_248z$19 = 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)}`;
|
|
5089
5091
|
|
|
5090
5092
|
/**
|
|
5091
5093
|
*
|
|
@@ -5147,7 +5149,7 @@
|
|
|
5147
5149
|
`;
|
|
5148
5150
|
}
|
|
5149
5151
|
}
|
|
5150
|
-
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$
|
|
5152
|
+
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$19];
|
|
5151
5153
|
__decorate([
|
|
5152
5154
|
property({ type: String })
|
|
5153
5155
|
], SgdsCloseButton.prototype, "ariaLabel", void 0);
|
|
@@ -5228,7 +5230,7 @@
|
|
|
5228
5230
|
*/
|
|
5229
5231
|
const unsafeSVG = directive(UnsafeSVGDirective);
|
|
5230
5232
|
|
|
5231
|
-
var css_248z$
|
|
5233
|
+
var css_248z$18 = 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)}`;
|
|
5232
5234
|
|
|
5233
5235
|
/**
|
|
5234
5236
|
* @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
|
|
@@ -5271,7 +5273,7 @@
|
|
|
5271
5273
|
return html `${unsafeSVG(this._svgContent)}`;
|
|
5272
5274
|
}
|
|
5273
5275
|
}
|
|
5274
|
-
SgdsIcon.styles = [...SgdsElement.styles, css_248z$
|
|
5276
|
+
SgdsIcon.styles = [...SgdsElement.styles, css_248z$18];
|
|
5275
5277
|
__decorate([
|
|
5276
5278
|
property({ type: String, reflect: true })
|
|
5277
5279
|
], SgdsIcon.prototype, "name", void 0);
|
|
@@ -5282,7 +5284,7 @@
|
|
|
5282
5284
|
state()
|
|
5283
5285
|
], SgdsIcon.prototype, "_svgContent", void 0);
|
|
5284
5286
|
|
|
5285
|
-
var css_248z$
|
|
5287
|
+
var css_248z$17 = 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)}`;
|
|
5286
5288
|
|
|
5287
5289
|
/**
|
|
5288
5290
|
* @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.
|
|
@@ -5344,7 +5346,7 @@
|
|
|
5344
5346
|
: nothing;
|
|
5345
5347
|
}
|
|
5346
5348
|
}
|
|
5347
|
-
SgdsAlert.styles = [...SgdsElement.styles, css_248z$
|
|
5349
|
+
SgdsAlert.styles = [...SgdsElement.styles, css_248z$17];
|
|
5348
5350
|
/**@internal */
|
|
5349
5351
|
SgdsAlert.dependencies = {
|
|
5350
5352
|
"sgds-close-button": SgdsCloseButton,
|
|
@@ -5369,9 +5371,9 @@
|
|
|
5369
5371
|
watch("show")
|
|
5370
5372
|
], SgdsAlert.prototype, "_handleShowChange", null);
|
|
5371
5373
|
|
|
5372
|
-
var css_248z$
|
|
5374
|
+
var css_248z$16 = 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}`;
|
|
5373
5375
|
|
|
5374
|
-
var css_248z$
|
|
5376
|
+
var css_248z$15 = 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}`;
|
|
5375
5377
|
|
|
5376
5378
|
/**
|
|
5377
5379
|
* @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`
|
|
@@ -5385,7 +5387,7 @@
|
|
|
5385
5387
|
`;
|
|
5386
5388
|
}
|
|
5387
5389
|
}
|
|
5388
|
-
SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$
|
|
5390
|
+
SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$15, css_248z$16];
|
|
5389
5391
|
__decorate([
|
|
5390
5392
|
property({ type: String, reflect: true })
|
|
5391
5393
|
], SgdsAlertLink.prototype, "href", void 0);
|
|
@@ -5393,7 +5395,7 @@
|
|
|
5393
5395
|
property()
|
|
5394
5396
|
], SgdsAlertLink.prototype, "target", void 0);
|
|
5395
5397
|
|
|
5396
|
-
var css_248z$
|
|
5398
|
+
var css_248z$14 = css`:host{display:inline-flex}: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)}.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);justify-content:center;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-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)}slot::slotted(*){font-size:14px;font-weight:400}`;
|
|
5397
5399
|
|
|
5398
5400
|
/**
|
|
5399
5401
|
* @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
|
|
@@ -5455,7 +5457,7 @@
|
|
|
5455
5457
|
: nothing;
|
|
5456
5458
|
}
|
|
5457
5459
|
}
|
|
5458
|
-
SgdsBadge.styles = [...SgdsElement.styles, css_248z$
|
|
5460
|
+
SgdsBadge.styles = [...SgdsElement.styles, css_248z$14];
|
|
5459
5461
|
/**@internal */
|
|
5460
5462
|
SgdsBadge.dependencies = {
|
|
5461
5463
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -5476,7 +5478,7 @@
|
|
|
5476
5478
|
watch("show")
|
|
5477
5479
|
], SgdsBadge.prototype, "_handleShowChange", null);
|
|
5478
5480
|
|
|
5479
|
-
var css_248z
|
|
5481
|
+
var css_248z$13 = 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}`;
|
|
5480
5482
|
|
|
5481
5483
|
/**
|
|
5482
5484
|
* @license
|
|
@@ -9459,9 +9461,9 @@
|
|
|
9459
9461
|
state()
|
|
9460
9462
|
], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
|
|
9461
9463
|
|
|
9462
|
-
var css_248z$
|
|
9464
|
+
var css_248z$12 = 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%}`;
|
|
9463
9465
|
|
|
9464
|
-
var css_248z$
|
|
9466
|
+
var css_248z$11 = css`:host{position:relative}.dropdown{display:flex;height:inherit}`;
|
|
9465
9467
|
|
|
9466
9468
|
/**
|
|
9467
9469
|
* @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.
|
|
@@ -9540,7 +9542,7 @@
|
|
|
9540
9542
|
`;
|
|
9541
9543
|
}
|
|
9542
9544
|
}
|
|
9543
|
-
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$
|
|
9545
|
+
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$11, css_248z$12];
|
|
9544
9546
|
__decorate([
|
|
9545
9547
|
property({ type: Boolean, reflect: true, state: false })
|
|
9546
9548
|
], SgdsDropdown.prototype, "noFlip", void 0);
|
|
@@ -9557,7 +9559,7 @@
|
|
|
9557
9559
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
9558
9560
|
], SgdsDropdown.prototype, "_handleDisabled", null);
|
|
9559
9561
|
|
|
9560
|
-
var css_248z$
|
|
9562
|
+
var css_248z$10 = 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;white-space:nowrap}.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)}`;
|
|
9561
9563
|
|
|
9562
9564
|
/**
|
|
9563
9565
|
* @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
|
|
@@ -9578,6 +9580,9 @@
|
|
|
9578
9580
|
this.anchor[0].click();
|
|
9579
9581
|
}
|
|
9580
9582
|
});
|
|
9583
|
+
this.addEventListener("click", () => {
|
|
9584
|
+
this.anchor.length > 0 && this.anchor[0].click();
|
|
9585
|
+
});
|
|
9581
9586
|
this.setAttribute("role", "menuitem");
|
|
9582
9587
|
this.setAttribute("aria-disabled", `${this.disabled}`);
|
|
9583
9588
|
}
|
|
@@ -9595,7 +9600,7 @@
|
|
|
9595
9600
|
`;
|
|
9596
9601
|
}
|
|
9597
9602
|
}
|
|
9598
|
-
SgdsDropdownItem.styles = [css_248z$
|
|
9603
|
+
SgdsDropdownItem.styles = [css_248z$11, css_248z$10];
|
|
9599
9604
|
SgdsDropdownItem.dependencies = {
|
|
9600
9605
|
"sgds-icon": SgdsIcon
|
|
9601
9606
|
};
|
|
@@ -9630,7 +9635,7 @@
|
|
|
9630
9635
|
`;
|
|
9631
9636
|
}
|
|
9632
9637
|
}
|
|
9633
|
-
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z
|
|
9638
|
+
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z$13];
|
|
9634
9639
|
/** @internal */
|
|
9635
9640
|
SgdsOverflowMenu.dependencies = {
|
|
9636
9641
|
"sgds-dropdown": SgdsDropdown,
|
|
@@ -9641,7 +9646,7 @@
|
|
|
9641
9646
|
property({ type: String, reflect: true })
|
|
9642
9647
|
], SgdsOverflowMenu.prototype, "size", void 0);
|
|
9643
9648
|
|
|
9644
|
-
var css_248z
|
|
9649
|
+
var css_248z$$ = css`.breadcrumb{display:flex;gap:var(--sgds-gap-xs)}`;
|
|
9645
9650
|
|
|
9646
9651
|
/**
|
|
9647
9652
|
* @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.
|
|
@@ -9712,7 +9717,7 @@
|
|
|
9712
9717
|
`;
|
|
9713
9718
|
}
|
|
9714
9719
|
}
|
|
9715
|
-
SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z
|
|
9720
|
+
SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$$];
|
|
9716
9721
|
SgdsBreadcrumb.dependencies = {
|
|
9717
9722
|
"sgds-overflow-menu": SgdsOverflowMenu
|
|
9718
9723
|
};
|
|
@@ -9723,7 +9728,7 @@
|
|
|
9723
9728
|
query("slot")
|
|
9724
9729
|
], SgdsBreadcrumb.prototype, "defaultSlot", void 0);
|
|
9725
9730
|
|
|
9726
|
-
var css_248z$
|
|
9731
|
+
var css_248z$_ = 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);height:var(--sgds-dimension-24);justify-content:center;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){box-shadow:var(--sgds-box-shadow-focus);outline:0}.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=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;height:var(--sgds-dimension-32)}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;height:var(--sgds-dimension-20)}`;
|
|
9727
9732
|
|
|
9728
9733
|
/**
|
|
9729
9734
|
* @summary Link allows users to click and navigate their way from page to page
|
|
@@ -9755,7 +9760,7 @@
|
|
|
9755
9760
|
return html$1 `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
|
|
9756
9761
|
}
|
|
9757
9762
|
}
|
|
9758
|
-
SgdsLink.styles = [...SgdsElement.styles, css_248z$
|
|
9763
|
+
SgdsLink.styles = [...SgdsElement.styles, css_248z$_];
|
|
9759
9764
|
__decorate([
|
|
9760
9765
|
property({ type: String, reflect: true })
|
|
9761
9766
|
], SgdsLink.prototype, "size", void 0);
|
|
@@ -9763,7 +9768,7 @@
|
|
|
9763
9768
|
property({ type: String, reflect: true })
|
|
9764
9769
|
], SgdsLink.prototype, "variant", void 0);
|
|
9765
9770
|
|
|
9766
|
-
var css_248z$
|
|
9771
|
+
var css_248z$Z = 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}`;
|
|
9767
9772
|
|
|
9768
9773
|
/**
|
|
9769
9774
|
* @summary Breadcrumb Item are navigational links used in Breadcrumb component
|
|
@@ -9792,12 +9797,12 @@
|
|
|
9792
9797
|
`;
|
|
9793
9798
|
}
|
|
9794
9799
|
}
|
|
9795
|
-
SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z$
|
|
9800
|
+
SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z$Z];
|
|
9796
9801
|
__decorate([
|
|
9797
9802
|
property({ type: Boolean, reflect: true })
|
|
9798
9803
|
], SgdsBreadcrumbItem.prototype, "active", void 0);
|
|
9799
9804
|
|
|
9800
|
-
var css_248z$
|
|
9805
|
+
var css_248z$Y = 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);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}@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)}`;
|
|
9801
9806
|
|
|
9802
9807
|
class ButtonElement extends SgdsElement {
|
|
9803
9808
|
constructor() {
|
|
@@ -9839,7 +9844,7 @@
|
|
|
9839
9844
|
}
|
|
9840
9845
|
}
|
|
9841
9846
|
}
|
|
9842
|
-
ButtonElement.styles = [...SgdsElement.styles, css_248z$
|
|
9847
|
+
ButtonElement.styles = [...SgdsElement.styles, css_248z$Y];
|
|
9843
9848
|
__decorate([
|
|
9844
9849
|
query(".btn")
|
|
9845
9850
|
], ButtonElement.prototype, "button", void 0);
|
|
@@ -9925,7 +9930,7 @@
|
|
|
9925
9930
|
}
|
|
9926
9931
|
}
|
|
9927
9932
|
|
|
9928
|
-
var css_248z$
|
|
9933
|
+
var css_248z$X = 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)}`;
|
|
9929
9934
|
|
|
9930
9935
|
/**
|
|
9931
9936
|
* @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
|
@@ -10002,11 +10007,8 @@
|
|
|
10002
10007
|
class="btn ${classMap({
|
|
10003
10008
|
disabled: this.disabled,
|
|
10004
10009
|
active: this.active,
|
|
10005
|
-
"full-width": this.fullWidth,
|
|
10006
10010
|
"has-left-icon": this._hasLeftIcon,
|
|
10007
|
-
"has-right-icon": this._hasRightIcon
|
|
10008
|
-
[`btn-${this.variant}`]: this.variant,
|
|
10009
|
-
[`btn-${this.size}`]: this.size
|
|
10011
|
+
"has-right-icon": this._hasRightIcon
|
|
10010
10012
|
})}"
|
|
10011
10013
|
?disabled=${ifDefined(isLink ? undefined : this.disabled)}
|
|
10012
10014
|
type=${ifDefined(isLink ? undefined : this.type)}
|
|
@@ -10029,7 +10031,7 @@
|
|
|
10029
10031
|
`;
|
|
10030
10032
|
}
|
|
10031
10033
|
}
|
|
10032
|
-
SgdsButton.styles = [...ButtonElement.styles, css_248z$
|
|
10034
|
+
SgdsButton.styles = [...ButtonElement.styles, css_248z$15, css_248z$X];
|
|
10033
10035
|
__decorate([
|
|
10034
10036
|
state()
|
|
10035
10037
|
], SgdsButton.prototype, "_hasLeftIcon", void 0);
|
|
@@ -10058,17 +10060,17 @@
|
|
|
10058
10060
|
property({ type: Boolean, reflect: true })
|
|
10059
10061
|
], SgdsButton.prototype, "fullWidth", void 0);
|
|
10060
10062
|
|
|
10061
|
-
var css_248z$
|
|
10063
|
+
var css_248z$W = css`:host([orientation=horizontal]) .card{flex-direction:row}: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:auto;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;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:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);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)}`;
|
|
10062
10064
|
|
|
10063
|
-
var css_248z$
|
|
10065
|
+
var css_248z$V = 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}`;
|
|
10064
10066
|
|
|
10065
|
-
var css_248z$
|
|
10067
|
+
var css_248z$U = 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}`;
|
|
10066
10068
|
|
|
10067
|
-
var css_248z$
|
|
10069
|
+
var css_248z$T = 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}`;
|
|
10068
10070
|
|
|
10069
|
-
var css_248z$
|
|
10071
|
+
var css_248z$S = 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}`;
|
|
10070
10072
|
|
|
10071
|
-
var css_248z$
|
|
10073
|
+
var css_248z$R = css`p{margin-bottom:1.5rem;margin-top:0}`;
|
|
10072
10074
|
|
|
10073
10075
|
class CardElement extends SgdsElement {
|
|
10074
10076
|
constructor() {
|
|
@@ -10079,7 +10081,7 @@
|
|
|
10079
10081
|
this.tinted = false;
|
|
10080
10082
|
}
|
|
10081
10083
|
}
|
|
10082
|
-
CardElement.styles = [...SgdsElement.styles, css_248z$
|
|
10084
|
+
CardElement.styles = [...SgdsElement.styles, css_248z$V, css_248z$U, css_248z$T, css_248z$S, css_248z$R, css_248z$W];
|
|
10083
10085
|
__decorate([
|
|
10084
10086
|
property({ type: Boolean, reflect: true })
|
|
10085
10087
|
], CardElement.prototype, "hideBorder", void 0);
|
|
@@ -10087,7 +10089,7 @@
|
|
|
10087
10089
|
property({ type: Boolean, reflect: true })
|
|
10088
10090
|
], CardElement.prototype, "tinted", void 0);
|
|
10089
10091
|
|
|
10090
|
-
var css_248z$
|
|
10092
|
+
var css_248z$Q = 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}`;
|
|
10091
10093
|
|
|
10092
10094
|
/**
|
|
10093
10095
|
* @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
@@ -10184,7 +10186,7 @@
|
|
|
10184
10186
|
`;
|
|
10185
10187
|
}
|
|
10186
10188
|
}
|
|
10187
|
-
SgdsCard.styles = [...CardElement.styles, css_248z$
|
|
10189
|
+
SgdsCard.styles = [...CardElement.styles, css_248z$Q];
|
|
10188
10190
|
__decorate([
|
|
10189
10191
|
query("a.card")
|
|
10190
10192
|
], SgdsCard.prototype, "card", void 0);
|
|
@@ -10287,13 +10289,13 @@
|
|
|
10287
10289
|
*/
|
|
10288
10290
|
const live = directive(LiveDirective);
|
|
10289
10291
|
|
|
10290
|
-
var css_248z$
|
|
10292
|
+
var css_248z$P = 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)}`;
|
|
10291
10293
|
|
|
10292
|
-
var css_248z$
|
|
10294
|
+
var css_248z$O = 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)}`;
|
|
10293
10295
|
|
|
10294
|
-
var css_248z$
|
|
10296
|
+
var css_248z$N = 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}`;
|
|
10295
10297
|
|
|
10296
|
-
var css_248z$
|
|
10298
|
+
var css_248z$M = 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)}`;
|
|
10297
10299
|
|
|
10298
10300
|
class FormControlElement extends SgdsElement {
|
|
10299
10301
|
constructor() {
|
|
@@ -10320,7 +10322,7 @@
|
|
|
10320
10322
|
}
|
|
10321
10323
|
}
|
|
10322
10324
|
}
|
|
10323
|
-
FormControlElement.styles = [...SgdsElement.styles, css_248z$
|
|
10325
|
+
FormControlElement.styles = [...SgdsElement.styles, css_248z$P, css_248z$O, css_248z$N, css_248z$M];
|
|
10324
10326
|
__decorate([
|
|
10325
10327
|
property({ reflect: true })
|
|
10326
10328
|
], FormControlElement.prototype, "label", void 0);
|
|
@@ -10589,7 +10591,7 @@
|
|
|
10589
10591
|
return ToBeValidatedElement;
|
|
10590
10592
|
};
|
|
10591
10593
|
|
|
10592
|
-
var css_248z$
|
|
10594
|
+
var css_248z$L = 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%}`;
|
|
10593
10595
|
|
|
10594
10596
|
/**
|
|
10595
10597
|
* @summary Checkbox component is used when you require users to select multiple items from a list.
|
|
@@ -10599,7 +10601,8 @@
|
|
|
10599
10601
|
* @event sgds-change - Emitted when the checked state changes.
|
|
10600
10602
|
* @event sgds-blur - Emitted when input is not in focus.
|
|
10601
10603
|
* @event sgds-focus - Emitted when input is in focus.
|
|
10602
|
-
* @event sgds-
|
|
10604
|
+
* @event sgds-check - Emitted when checkbox is checked
|
|
10605
|
+
* @event sgds-uncheck - Emitted when checkbox is unchecked
|
|
10603
10606
|
*/
|
|
10604
10607
|
class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
|
|
10605
10608
|
constructor() {
|
|
@@ -10616,11 +10619,6 @@
|
|
|
10616
10619
|
this.invalidFeedback = "";
|
|
10617
10620
|
this._isTouched = false;
|
|
10618
10621
|
}
|
|
10619
|
-
_handleInvalidChange() {
|
|
10620
|
-
this.emit("sgds-validity-change", {
|
|
10621
|
-
detail: { invalid: this.invalid, validationMessage: this.input.validationMessage }
|
|
10622
|
-
});
|
|
10623
|
-
}
|
|
10624
10622
|
/** Simulates a click on the checkbox. */
|
|
10625
10623
|
click() {
|
|
10626
10624
|
this.input.click();
|
|
@@ -10640,6 +10638,9 @@
|
|
|
10640
10638
|
this.checked = !this.checked;
|
|
10641
10639
|
super._mixinHandleChange(e);
|
|
10642
10640
|
this.emit("sgds-change", { detail: { checked: this.checked, value: this.value } });
|
|
10641
|
+
this.checked
|
|
10642
|
+
? this.emit("sgds-check", { detail: { value: this.value } })
|
|
10643
|
+
: this.emit("sgds-uncheck", { detail: { value: this.value } });
|
|
10643
10644
|
}
|
|
10644
10645
|
_handleKeyDown(event) {
|
|
10645
10646
|
const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
|
|
@@ -10668,11 +10669,6 @@
|
|
|
10668
10669
|
this.invalid = !this.input.checkValidity();
|
|
10669
10670
|
}
|
|
10670
10671
|
}
|
|
10671
|
-
_handleChecked() {
|
|
10672
|
-
this.checked
|
|
10673
|
-
? this.emit("sgds-check", { detail: { value: this.value } })
|
|
10674
|
-
: this.emit("sgds-uncheck", { detail: { value: this.value } });
|
|
10675
|
-
}
|
|
10676
10672
|
_mixinResetFormControl() {
|
|
10677
10673
|
this._isTouched = false;
|
|
10678
10674
|
this.checked = this.input.checked = this.defaultChecked;
|
|
@@ -10709,15 +10705,15 @@
|
|
|
10709
10705
|
this.checked && this.emit("sgds-check", { detail: { value: this.value } });
|
|
10710
10706
|
}
|
|
10711
10707
|
render() {
|
|
10712
|
-
const
|
|
10713
|
-
const
|
|
10708
|
+
const displayFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
|
|
10709
|
+
const displayFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
|
|
10714
10710
|
return html$1 `
|
|
10715
10711
|
<div class="form-check">
|
|
10716
10712
|
<div class="form-check-input-container">
|
|
10717
10713
|
<input
|
|
10718
10714
|
class=${classMap({
|
|
10719
10715
|
"form-check-input": true,
|
|
10720
|
-
"is-invalid":
|
|
10716
|
+
"is-invalid": displayFeedbackStyle && this.invalid
|
|
10721
10717
|
})}
|
|
10722
10718
|
type="checkbox"
|
|
10723
10719
|
id=${this._controlId}
|
|
@@ -10739,7 +10735,7 @@
|
|
|
10739
10735
|
</div>
|
|
10740
10736
|
<label for="${this._controlId}" class="form-check-label" id="${this._labelId}"><slot></slot></label>
|
|
10741
10737
|
</div>
|
|
10742
|
-
${
|
|
10738
|
+
${displayFeedbackText && this.invalid
|
|
10743
10739
|
? html$1 `
|
|
10744
10740
|
<div class="invalid-feedback-container">
|
|
10745
10741
|
<slot name="invalidIcon">
|
|
@@ -10759,7 +10755,7 @@
|
|
|
10759
10755
|
`;
|
|
10760
10756
|
}
|
|
10761
10757
|
}
|
|
10762
|
-
SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$
|
|
10758
|
+
SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$L];
|
|
10763
10759
|
__decorate([
|
|
10764
10760
|
property({ type: String, reflect: true })
|
|
10765
10761
|
], SgdsCheckbox.prototype, "value", void 0);
|
|
@@ -10784,24 +10780,19 @@
|
|
|
10784
10780
|
__decorate([
|
|
10785
10781
|
state()
|
|
10786
10782
|
], SgdsCheckbox.prototype, "_isTouched", void 0);
|
|
10787
|
-
__decorate([
|
|
10788
|
-
watch("invalid", { waitUntilFirstUpdate: true })
|
|
10789
|
-
], SgdsCheckbox.prototype, "_handleInvalidChange", null);
|
|
10790
10783
|
__decorate([
|
|
10791
10784
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
10792
10785
|
], SgdsCheckbox.prototype, "_handleDisabledChange", null);
|
|
10793
10786
|
__decorate([
|
|
10794
10787
|
watch("_isTouched", { waitUntilFirstUpdate: true })
|
|
10795
10788
|
], SgdsCheckbox.prototype, "_handleIsTouched", null);
|
|
10796
|
-
__decorate([
|
|
10797
|
-
watch("checked", { waitUntilFirstUpdate: true })
|
|
10798
|
-
], SgdsCheckbox.prototype, "_handleChecked", null);
|
|
10799
10789
|
|
|
10800
|
-
var css_248z$
|
|
10790
|
+
var css_248z$K = 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}`;
|
|
10801
10791
|
|
|
10802
10792
|
/**
|
|
10803
|
-
* @summary CheckboxGroup is
|
|
10804
|
-
*
|
|
10793
|
+
* @summary CheckboxGroup is a form component for multiselection of checkboxes.
|
|
10794
|
+
*
|
|
10795
|
+
* @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.
|
|
10805
10796
|
*
|
|
10806
10797
|
* @slot default - Pass in `sgds-checkbox` into the default slot
|
|
10807
10798
|
* @slot invalidIcon - The slot for invalid icon
|
|
@@ -10813,7 +10804,7 @@
|
|
|
10813
10804
|
/** The checkbox group's label */
|
|
10814
10805
|
this.label = "";
|
|
10815
10806
|
/**Feedback text for error state when validated */
|
|
10816
|
-
this.invalidFeedback = "";
|
|
10807
|
+
this.invalidFeedback = "Please tick at least one box if you want to proceed";
|
|
10817
10808
|
/** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */
|
|
10818
10809
|
this.hasFeedback = false;
|
|
10819
10810
|
/** The checkbox group's hint text */
|
|
@@ -10823,12 +10814,11 @@
|
|
|
10823
10814
|
/** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */
|
|
10824
10815
|
this.value = "";
|
|
10825
10816
|
this._isTouched = false;
|
|
10826
|
-
/**@internal */
|
|
10827
10817
|
this.defaultValue = "";
|
|
10818
|
+
this._blurredCheckboxes = new Set();
|
|
10828
10819
|
}
|
|
10829
10820
|
connectedCallback() {
|
|
10830
10821
|
super.connectedCallback();
|
|
10831
|
-
this.defaultValue = this.value;
|
|
10832
10822
|
this.addEventListener("sgds-check", (e) => {
|
|
10833
10823
|
const { value } = e.detail;
|
|
10834
10824
|
!this.value.includes(value) && this._addValue(value);
|
|
@@ -10837,8 +10827,14 @@
|
|
|
10837
10827
|
const { value } = e.detail;
|
|
10838
10828
|
this._removeValue(value);
|
|
10839
10829
|
});
|
|
10840
|
-
|
|
10841
|
-
|
|
10830
|
+
/** Blurring when all checkboxes are blurred */
|
|
10831
|
+
this.addEventListener("sgds-blur", e => {
|
|
10832
|
+
const checkbox = e.target;
|
|
10833
|
+
this._blurredCheckboxes.add(checkbox);
|
|
10834
|
+
if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {
|
|
10835
|
+
this._isTouched = true;
|
|
10836
|
+
this._blurredCheckboxes.clear();
|
|
10837
|
+
}
|
|
10842
10838
|
});
|
|
10843
10839
|
}
|
|
10844
10840
|
firstUpdated(changedProperties) {
|
|
@@ -10846,6 +10842,9 @@
|
|
|
10846
10842
|
if (this.value) {
|
|
10847
10843
|
this._updateInputValue();
|
|
10848
10844
|
}
|
|
10845
|
+
if (this.invalid) {
|
|
10846
|
+
this._updateInvalid();
|
|
10847
|
+
}
|
|
10849
10848
|
}
|
|
10850
10849
|
_renderHintText() {
|
|
10851
10850
|
const hintTextTemplate = html$1 ` <div class="form-text">${this.hintText}</div> `;
|
|
@@ -10864,7 +10863,7 @@
|
|
|
10864
10863
|
_sanitizeSlot() {
|
|
10865
10864
|
const checkboxes = this._checkboxes;
|
|
10866
10865
|
checkboxes.forEach(checkbox => {
|
|
10867
|
-
checkbox.checked = this.value.includes(checkbox.value);
|
|
10866
|
+
checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);
|
|
10868
10867
|
checkbox.hasFeedback = this.hasFeedback ? "style" : null;
|
|
10869
10868
|
if (checkbox.required) {
|
|
10870
10869
|
console.error("Checkboxes in a group cannot have required or hasFeedback prop set to true");
|
|
@@ -10880,6 +10879,10 @@
|
|
|
10880
10879
|
}
|
|
10881
10880
|
}
|
|
10882
10881
|
_handleValueChange() {
|
|
10882
|
+
if (this.formEvent === "reset" && this.value === this.defaultValue) {
|
|
10883
|
+
this.formEvent = null;
|
|
10884
|
+
return;
|
|
10885
|
+
}
|
|
10883
10886
|
this.emit("sgds-change");
|
|
10884
10887
|
const checkboxes = this._checkboxes;
|
|
10885
10888
|
checkboxes.forEach(checkbox => {
|
|
@@ -10924,7 +10927,7 @@
|
|
|
10924
10927
|
return this._mixinGetValidationMessage();
|
|
10925
10928
|
}
|
|
10926
10929
|
/**
|
|
10927
|
-
*
|
|
10930
|
+
* checkbox requries a custom _mixinResetFormControl as the update of input value
|
|
10928
10931
|
* requires to fire a reset event manually
|
|
10929
10932
|
* */
|
|
10930
10933
|
_mixinResetFormControl() {
|
|
@@ -10936,9 +10939,10 @@
|
|
|
10936
10939
|
* when input value is set programatically, need to manually dispatch a change event
|
|
10937
10940
|
* In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input
|
|
10938
10941
|
*/
|
|
10939
|
-
_updateInputValue(eventName = "change") {
|
|
10942
|
+
async _updateInputValue(eventName = "change") {
|
|
10940
10943
|
this.input.value = this.value;
|
|
10941
10944
|
this.input.dispatchEvent(new InputEvent(eventName));
|
|
10945
|
+
this.formEvent = eventName;
|
|
10942
10946
|
}
|
|
10943
10947
|
render() {
|
|
10944
10948
|
return html$1 `
|
|
@@ -10981,7 +10985,7 @@
|
|
|
10981
10985
|
`;
|
|
10982
10986
|
}
|
|
10983
10987
|
}
|
|
10984
|
-
SgdsCheckboxGroup.styles = [...
|
|
10988
|
+
SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z$K];
|
|
10985
10989
|
__decorate([
|
|
10986
10990
|
property({ reflect: true })
|
|
10987
10991
|
], SgdsCheckboxGroup.prototype, "label", void 0);
|
|
@@ -11004,8 +11008,14 @@
|
|
|
11004
11008
|
state()
|
|
11005
11009
|
], SgdsCheckboxGroup.prototype, "_isTouched", void 0);
|
|
11006
11010
|
__decorate([
|
|
11007
|
-
|
|
11011
|
+
defaultValue()
|
|
11008
11012
|
], SgdsCheckboxGroup.prototype, "defaultValue", void 0);
|
|
11013
|
+
__decorate([
|
|
11014
|
+
state()
|
|
11015
|
+
], SgdsCheckboxGroup.prototype, "_blurredCheckboxes", void 0);
|
|
11016
|
+
__decorate([
|
|
11017
|
+
state()
|
|
11018
|
+
], SgdsCheckboxGroup.prototype, "formEvent", void 0);
|
|
11009
11019
|
__decorate([
|
|
11010
11020
|
queryAssignedElements()
|
|
11011
11021
|
], SgdsCheckboxGroup.prototype, "_checkboxes", void 0);
|
|
@@ -11019,7 +11029,194 @@
|
|
|
11019
11029
|
watch("invalid", { waitUntilFirstUpdate: true })
|
|
11020
11030
|
], SgdsCheckboxGroup.prototype, "_updateInvalid", null);
|
|
11021
11031
|
|
|
11022
|
-
|
|
11032
|
+
class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
|
|
11033
|
+
constructor() {
|
|
11034
|
+
super();
|
|
11035
|
+
/** The input's label */
|
|
11036
|
+
this.label = "";
|
|
11037
|
+
/** The input's hint text below the label */
|
|
11038
|
+
this.hintText = "";
|
|
11039
|
+
/** Autofocus the input */
|
|
11040
|
+
this.autofocus = false;
|
|
11041
|
+
/** Disables the input. */
|
|
11042
|
+
this.disabled = false;
|
|
11043
|
+
/** Makes the input a required field. */
|
|
11044
|
+
this.required = false;
|
|
11045
|
+
/** Makes the input readonly. */
|
|
11046
|
+
this.readonly = false;
|
|
11047
|
+
/**
|
|
11048
|
+
* IMPORTANT:
|
|
11049
|
+
* We still expose `.value` externally, but this is now the underlying ID or data
|
|
11050
|
+
* (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.
|
|
11051
|
+
*/
|
|
11052
|
+
this.value = "";
|
|
11053
|
+
this.displayValue = "";
|
|
11054
|
+
/** @internal Gets or sets the default value used to reset this element. */
|
|
11055
|
+
this.defaultValue = "";
|
|
11056
|
+
/** Allows invalidFeedback, invalid and valid styles to be visible with the input */
|
|
11057
|
+
this.hasFeedback = false;
|
|
11058
|
+
/** Feedback text for error state when validated */
|
|
11059
|
+
this.invalidFeedback = "";
|
|
11060
|
+
/** Marks the component as invalid. Replace the pseudo :invalid selector. */
|
|
11061
|
+
this.invalid = false;
|
|
11062
|
+
/** The list of items to display in the dropdown.
|
|
11063
|
+
* `interface SgdsComboBoxItemData {
|
|
11064
|
+
* label: string;
|
|
11065
|
+
* value: string;
|
|
11066
|
+
* }`
|
|
11067
|
+
*/
|
|
11068
|
+
this.menuList = [];
|
|
11069
|
+
/** Track selected items (even for single-select, but it will have at most one). */
|
|
11070
|
+
this.selectedItems = [];
|
|
11071
|
+
/** @internal Managed filtered menu on the fly with input change*/
|
|
11072
|
+
this.filteredMenuList = [];
|
|
11073
|
+
this._isTouched = false;
|
|
11074
|
+
this._controlId = genId("input");
|
|
11075
|
+
this._labelId = genId("label");
|
|
11076
|
+
/** @internal */
|
|
11077
|
+
this.modifierOpt = [
|
|
11078
|
+
{
|
|
11079
|
+
name: "offset",
|
|
11080
|
+
options: {
|
|
11081
|
+
offset: [0, 8]
|
|
11082
|
+
}
|
|
11083
|
+
}
|
|
11084
|
+
];
|
|
11085
|
+
}
|
|
11086
|
+
connectedCallback() {
|
|
11087
|
+
super.connectedCallback();
|
|
11088
|
+
this.addEventListener("blur", async () => {
|
|
11089
|
+
this.invalid = !this._mixinReportValidity();
|
|
11090
|
+
});
|
|
11091
|
+
if (this.readonly) {
|
|
11092
|
+
this._handleKeyboardMenuEvent = null;
|
|
11093
|
+
this._handleKeyboardMenuItemsEvent = null;
|
|
11094
|
+
}
|
|
11095
|
+
}
|
|
11096
|
+
/**
|
|
11097
|
+
* Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
|
|
11098
|
+
* Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
|
|
11099
|
+
*/
|
|
11100
|
+
reportValidity() {
|
|
11101
|
+
return this._mixinReportValidity();
|
|
11102
|
+
}
|
|
11103
|
+
/**
|
|
11104
|
+
* Checks for validity without any native error popup message
|
|
11105
|
+
*/
|
|
11106
|
+
checkValidity() {
|
|
11107
|
+
return this._mixinCheckValidity();
|
|
11108
|
+
}
|
|
11109
|
+
/**
|
|
11110
|
+
* Returns the ValidityState object
|
|
11111
|
+
*/
|
|
11112
|
+
get validity() {
|
|
11113
|
+
return this._mixinGetValidity();
|
|
11114
|
+
}
|
|
11115
|
+
/**
|
|
11116
|
+
* Returns the validation message based on the ValidityState
|
|
11117
|
+
*/
|
|
11118
|
+
get validationMessage() {
|
|
11119
|
+
return this._mixinGetValidationMessage();
|
|
11120
|
+
}
|
|
11121
|
+
_renderFeedback() {
|
|
11122
|
+
return this.invalid && this.hasFeedback
|
|
11123
|
+
? html$1 ` <div class="invalid-feedback-container">
|
|
11124
|
+
<slot name="invalidIcon">
|
|
11125
|
+
<sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
|
|
11126
|
+
</slot>
|
|
11127
|
+
<div id="${this._controlId}-invalid" class="invalid-feedback">
|
|
11128
|
+
${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
|
|
11129
|
+
</div>
|
|
11130
|
+
</div>`
|
|
11131
|
+
: html$1 `${this._renderHintText()}`;
|
|
11132
|
+
}
|
|
11133
|
+
_renderHintText() {
|
|
11134
|
+
const hintTextTemplate = html$1 ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
|
|
11135
|
+
return this.hintText && hintTextTemplate;
|
|
11136
|
+
}
|
|
11137
|
+
_renderLabel() {
|
|
11138
|
+
const labelTemplate = html$1 `
|
|
11139
|
+
<label
|
|
11140
|
+
for=${this._controlId}
|
|
11141
|
+
id=${this._labelId}
|
|
11142
|
+
class=${classMap({
|
|
11143
|
+
"form-label": true,
|
|
11144
|
+
required: this.required
|
|
11145
|
+
})}
|
|
11146
|
+
>${this.label}</label
|
|
11147
|
+
>
|
|
11148
|
+
`;
|
|
11149
|
+
return this.label && labelTemplate;
|
|
11150
|
+
}
|
|
11151
|
+
_handleClick() {
|
|
11152
|
+
if (this.readonly) {
|
|
11153
|
+
return null;
|
|
11154
|
+
}
|
|
11155
|
+
if (!this.menuIsOpen) {
|
|
11156
|
+
this.showMenu();
|
|
11157
|
+
}
|
|
11158
|
+
else {
|
|
11159
|
+
this.hideMenu();
|
|
11160
|
+
}
|
|
11161
|
+
}
|
|
11162
|
+
}
|
|
11163
|
+
SelectElement.styles = [...DropdownListElement.styles, css_248z$12, css_248z$O, css_248z$P];
|
|
11164
|
+
__decorate([
|
|
11165
|
+
property({ reflect: true })
|
|
11166
|
+
], SelectElement.prototype, "label", void 0);
|
|
11167
|
+
__decorate([
|
|
11168
|
+
property({ reflect: true })
|
|
11169
|
+
], SelectElement.prototype, "hintText", void 0);
|
|
11170
|
+
__decorate([
|
|
11171
|
+
property({ reflect: true })
|
|
11172
|
+
], SelectElement.prototype, "name", void 0);
|
|
11173
|
+
__decorate([
|
|
11174
|
+
property({ type: String, reflect: true })
|
|
11175
|
+
], SelectElement.prototype, "placeholder", void 0);
|
|
11176
|
+
__decorate([
|
|
11177
|
+
property({ type: Boolean, reflect: true })
|
|
11178
|
+
], SelectElement.prototype, "autofocus", void 0);
|
|
11179
|
+
__decorate([
|
|
11180
|
+
property({ type: Boolean, reflect: true })
|
|
11181
|
+
], SelectElement.prototype, "disabled", void 0);
|
|
11182
|
+
__decorate([
|
|
11183
|
+
property({ type: Boolean, reflect: true })
|
|
11184
|
+
], SelectElement.prototype, "required", void 0);
|
|
11185
|
+
__decorate([
|
|
11186
|
+
property({ type: Boolean, reflect: true })
|
|
11187
|
+
], SelectElement.prototype, "readonly", void 0);
|
|
11188
|
+
__decorate([
|
|
11189
|
+
property({ type: String, reflect: true })
|
|
11190
|
+
], SelectElement.prototype, "value", void 0);
|
|
11191
|
+
__decorate([
|
|
11192
|
+
state()
|
|
11193
|
+
], SelectElement.prototype, "displayValue", void 0);
|
|
11194
|
+
__decorate([
|
|
11195
|
+
defaultValue()
|
|
11196
|
+
], SelectElement.prototype, "defaultValue", void 0);
|
|
11197
|
+
__decorate([
|
|
11198
|
+
property({ type: Boolean, reflect: true })
|
|
11199
|
+
], SelectElement.prototype, "hasFeedback", void 0);
|
|
11200
|
+
__decorate([
|
|
11201
|
+
property({ type: String, reflect: true })
|
|
11202
|
+
], SelectElement.prototype, "invalidFeedback", void 0);
|
|
11203
|
+
__decorate([
|
|
11204
|
+
property({ type: Boolean, reflect: true })
|
|
11205
|
+
], SelectElement.prototype, "invalid", void 0);
|
|
11206
|
+
__decorate([
|
|
11207
|
+
property({ type: Array })
|
|
11208
|
+
], SelectElement.prototype, "menuList", void 0);
|
|
11209
|
+
__decorate([
|
|
11210
|
+
state()
|
|
11211
|
+
], SelectElement.prototype, "selectedItems", void 0);
|
|
11212
|
+
__decorate([
|
|
11213
|
+
state()
|
|
11214
|
+
], SelectElement.prototype, "filteredMenuList", void 0);
|
|
11215
|
+
__decorate([
|
|
11216
|
+
queryAsync("input.form-control")
|
|
11217
|
+
], SelectElement.prototype, "_input", void 0);
|
|
11218
|
+
|
|
11219
|
+
var css_248z$J = 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;white-space:nowrap}.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}`;
|
|
11023
11220
|
|
|
11024
11221
|
class ComboBoxItem extends SgdsElement {
|
|
11025
11222
|
constructor() {
|
|
@@ -11087,7 +11284,7 @@
|
|
|
11087
11284
|
"sgds-icon": SgdsIcon,
|
|
11088
11285
|
"sgds-checkbox": SgdsCheckbox
|
|
11089
11286
|
};
|
|
11090
|
-
ComboBoxItem.styles = [css_248z$
|
|
11287
|
+
ComboBoxItem.styles = [css_248z$J];
|
|
11091
11288
|
__decorate([
|
|
11092
11289
|
property({ type: Boolean, reflect: true })
|
|
11093
11290
|
], ComboBoxItem.prototype, "active", void 0);
|
|
@@ -11098,93 +11295,35 @@
|
|
|
11098
11295
|
property({ type: Boolean, reflect: true })
|
|
11099
11296
|
], ComboBoxItem.prototype, "checkbox", void 0);
|
|
11100
11297
|
|
|
11101
|
-
var css_248z$
|
|
11298
|
+
var css_248z$I = 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)}`;
|
|
11102
11299
|
|
|
11103
11300
|
/**
|
|
11104
|
-
* @summary ComboBox component is used for users to make one or more selections from a list
|
|
11301
|
+
* @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions
|
|
11105
11302
|
*
|
|
11106
11303
|
* @slot icon - slot for form control icon to be displayed on the right of the input box.
|
|
11107
11304
|
*
|
|
11108
11305
|
* @event sgds-select - Emitted when the combo box's selected value changes.
|
|
11109
11306
|
* @event sgds-input - Emitted when user input is received and its value changes.
|
|
11110
11307
|
*/
|
|
11111
|
-
class SgdsComboBox extends
|
|
11308
|
+
class SgdsComboBox extends SelectElement {
|
|
11112
11309
|
constructor() {
|
|
11113
|
-
super();
|
|
11114
|
-
/** The input's label */
|
|
11115
|
-
this.label = "";
|
|
11116
|
-
/** The input's hint text below the label */
|
|
11117
|
-
this.hintText = "";
|
|
11118
|
-
/** Autofocus the input */
|
|
11119
|
-
this.autofocus = false;
|
|
11120
|
-
/** Disables the input. */
|
|
11121
|
-
this.disabled = false;
|
|
11122
|
-
/** Makes the input a required field. */
|
|
11123
|
-
this.required = false;
|
|
11124
|
-
/** Makes the input readonly. */
|
|
11125
|
-
this.readonly = false;
|
|
11126
|
-
/**
|
|
11127
|
-
* IMPORTANT:
|
|
11128
|
-
* We still expose `.value` externally, but this is now the underlying ID or data
|
|
11129
|
-
* (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.
|
|
11130
|
-
*/
|
|
11131
|
-
this.value = "";
|
|
11132
|
-
this.displayValue = "";
|
|
11133
|
-
/** @internal Gets or sets the default value used to reset this element. */
|
|
11134
|
-
this.defaultValue = "";
|
|
11135
|
-
/** Allows invalidFeedback, invalid and valid styles to be visible with the input */
|
|
11136
|
-
this.hasFeedback = false;
|
|
11137
|
-
/** Feedback text for error state when validated */
|
|
11138
|
-
this.invalidFeedback = "";
|
|
11139
|
-
/** Marks the component as invalid. Replace the pseudo :invalid selector. */
|
|
11140
|
-
this.invalid = false;
|
|
11141
|
-
/** The list of items to display in the dropdown.
|
|
11142
|
-
* `interface SgdsComboBoxItemData {
|
|
11143
|
-
* label: string;
|
|
11144
|
-
* value: string;
|
|
11145
|
-
* }`
|
|
11146
|
-
*/
|
|
11147
|
-
this.menuList = [];
|
|
11310
|
+
super(...arguments);
|
|
11148
11311
|
/** If true, renders multiple checkbox selection items. If false, single-select. */
|
|
11149
11312
|
this.multiSelect = false;
|
|
11150
11313
|
/** The function used to filter the menu list, given the user's input value. */
|
|
11151
11314
|
this.filterFunction = (inputValue, item) => {
|
|
11152
11315
|
return item.label.toLowerCase().startsWith(inputValue.toLowerCase());
|
|
11153
11316
|
};
|
|
11154
|
-
/**
|
|
11155
|
-
this.filteredMenuList = [];
|
|
11156
|
-
/** @internal Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */
|
|
11317
|
+
/** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */
|
|
11157
11318
|
this._renderedMenu = [];
|
|
11158
|
-
/** Track selected items (even for single-select, but it will have at most one). */
|
|
11159
|
-
this.selectedItems = [];
|
|
11160
|
-
this._isTouched = false;
|
|
11161
|
-
this._controlId = genId("input");
|
|
11162
|
-
this._labelId = genId("label");
|
|
11163
|
-
/** @internal */
|
|
11164
|
-
this.modifierOpt = [
|
|
11165
|
-
{
|
|
11166
|
-
name: "offset",
|
|
11167
|
-
options: {
|
|
11168
|
-
offset: [0, 8]
|
|
11169
|
-
}
|
|
11170
|
-
}
|
|
11171
|
-
];
|
|
11172
11319
|
}
|
|
11173
11320
|
connectedCallback() {
|
|
11174
11321
|
super.connectedCallback();
|
|
11175
|
-
this.addEventListener("blur", async () => {
|
|
11176
|
-
this.invalid = !this._mixinReportValidity();
|
|
11177
|
-
});
|
|
11178
11322
|
this.addEventListener("sgds-hide", async () => {
|
|
11179
|
-
const sgdsInput = await this.
|
|
11323
|
+
const sgdsInput = await this._input;
|
|
11180
11324
|
sgdsInput.focus();
|
|
11181
11325
|
this._renderedMenu = this.menuList;
|
|
11182
11326
|
});
|
|
11183
|
-
/** @internal */
|
|
11184
|
-
if (this.readonly) {
|
|
11185
|
-
this._handleKeyboardMenuEvent = null;
|
|
11186
|
-
this._handleKeyboardMenuItemsEvent = null;
|
|
11187
|
-
}
|
|
11188
11327
|
}
|
|
11189
11328
|
async firstUpdated() {
|
|
11190
11329
|
super.firstUpdated();
|
|
@@ -11197,7 +11336,7 @@
|
|
|
11197
11336
|
this.displayValue = initialSelectedItem[0].label;
|
|
11198
11337
|
}
|
|
11199
11338
|
}
|
|
11200
|
-
this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this.
|
|
11339
|
+
this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);
|
|
11201
11340
|
this._mixinValidate(this.input);
|
|
11202
11341
|
if (this.menuIsOpen && !this.readonly) {
|
|
11203
11342
|
this.showMenu();
|
|
@@ -11207,7 +11346,7 @@
|
|
|
11207
11346
|
if (this.value) {
|
|
11208
11347
|
this.emit("sgds-select");
|
|
11209
11348
|
}
|
|
11210
|
-
const sgdsInput = await this.
|
|
11349
|
+
const sgdsInput = await this._input;
|
|
11211
11350
|
this._mixinSetFormValue();
|
|
11212
11351
|
if (this.multiSelect) {
|
|
11213
11352
|
this._mixinValidate(this.input);
|
|
@@ -11314,52 +11453,6 @@
|
|
|
11314
11453
|
}
|
|
11315
11454
|
}
|
|
11316
11455
|
}
|
|
11317
|
-
/**
|
|
11318
|
-
* Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
|
|
11319
|
-
* Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
|
|
11320
|
-
*/
|
|
11321
|
-
reportValidity() {
|
|
11322
|
-
return this._mixinReportValidity();
|
|
11323
|
-
}
|
|
11324
|
-
/**
|
|
11325
|
-
* Checks for validity without any native error popup message
|
|
11326
|
-
*/
|
|
11327
|
-
checkValidity() {
|
|
11328
|
-
return this._mixinCheckValidity();
|
|
11329
|
-
}
|
|
11330
|
-
/**
|
|
11331
|
-
* Returns the ValidityState object
|
|
11332
|
-
*/
|
|
11333
|
-
get validity() {
|
|
11334
|
-
return this._mixinGetValidity();
|
|
11335
|
-
}
|
|
11336
|
-
/**
|
|
11337
|
-
* Returns the validation message based on the ValidityState
|
|
11338
|
-
*/
|
|
11339
|
-
get validationMessage() {
|
|
11340
|
-
return this._mixinGetValidationMessage();
|
|
11341
|
-
}
|
|
11342
|
-
_renderFeedback() {
|
|
11343
|
-
return this.invalid && this.hasFeedback
|
|
11344
|
-
? html$1 ` <div class="invalid-feedback-container">
|
|
11345
|
-
<slot name="invalidIcon">
|
|
11346
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
11347
|
-
<path
|
|
11348
|
-
d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
|
|
11349
|
-
fill="currentColor"
|
|
11350
|
-
/>
|
|
11351
|
-
</svg>
|
|
11352
|
-
</slot>
|
|
11353
|
-
<div id="${this._controlId}-invalid" class="invalid-feedback">
|
|
11354
|
-
${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
|
|
11355
|
-
</div>
|
|
11356
|
-
</div>`
|
|
11357
|
-
: html$1 `${this._renderHintText()}`;
|
|
11358
|
-
}
|
|
11359
|
-
_renderHintText() {
|
|
11360
|
-
const hintTextTemplate = html$1 ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
|
|
11361
|
-
return this.hintText && hintTextTemplate;
|
|
11362
|
-
}
|
|
11363
11456
|
/** For form reset */
|
|
11364
11457
|
async _mixinResetFormControl() {
|
|
11365
11458
|
this.value = this.defaultValue;
|
|
@@ -11371,7 +11464,7 @@
|
|
|
11371
11464
|
else {
|
|
11372
11465
|
this.displayValue = initialItem[0].label;
|
|
11373
11466
|
}
|
|
11374
|
-
this._mixinResetValidity(await this.
|
|
11467
|
+
this._mixinResetValidity(await this._input);
|
|
11375
11468
|
}
|
|
11376
11469
|
else {
|
|
11377
11470
|
const valueArray = this.value.split(";");
|
|
@@ -11380,7 +11473,7 @@
|
|
|
11380
11473
|
this._mixinResetValidity(await this._multiSelectInput);
|
|
11381
11474
|
}
|
|
11382
11475
|
}
|
|
11383
|
-
|
|
11476
|
+
_renderMenu() {
|
|
11384
11477
|
const emptyMenu = html$1 ` <div class="empty-menu">No options</div> `;
|
|
11385
11478
|
const menu = this._renderedMenu.map(item => {
|
|
11386
11479
|
let isActive = false;
|
|
@@ -11405,31 +11498,6 @@
|
|
|
11405
11498
|
});
|
|
11406
11499
|
return this._renderedMenu.length === 0 ? emptyMenu : menu;
|
|
11407
11500
|
}
|
|
11408
|
-
_handleClick() {
|
|
11409
|
-
if (this.readonly) {
|
|
11410
|
-
return null;
|
|
11411
|
-
}
|
|
11412
|
-
if (!this.menuIsOpen) {
|
|
11413
|
-
this.showMenu();
|
|
11414
|
-
}
|
|
11415
|
-
else {
|
|
11416
|
-
this.hideMenu();
|
|
11417
|
-
}
|
|
11418
|
-
}
|
|
11419
|
-
_renderLabel() {
|
|
11420
|
-
const labelTemplate = html$1 `
|
|
11421
|
-
<label
|
|
11422
|
-
for=${this._controlId}
|
|
11423
|
-
id=${this._labelId}
|
|
11424
|
-
class=${classMap({
|
|
11425
|
-
"form-label": true,
|
|
11426
|
-
required: this.required
|
|
11427
|
-
})}
|
|
11428
|
-
>${this.label}</label
|
|
11429
|
-
>
|
|
11430
|
-
`;
|
|
11431
|
-
return this.label && labelTemplate;
|
|
11432
|
-
}
|
|
11433
11501
|
_renderInput() {
|
|
11434
11502
|
const wantFeedbackStyle = this.hasFeedback;
|
|
11435
11503
|
return html$1 `
|
|
@@ -11486,7 +11554,7 @@
|
|
|
11486
11554
|
<!-- The input -->
|
|
11487
11555
|
${this._renderInput()} ${this._renderFeedback()}
|
|
11488
11556
|
<ul id=${this.dropdownMenuId} class="dropdown-menu" part="menu" tabindex="-1">
|
|
11489
|
-
${this.
|
|
11557
|
+
${this._renderMenu()}
|
|
11490
11558
|
</ul>
|
|
11491
11559
|
</div>
|
|
11492
11560
|
<!-- Required an input element for constraint validation -->
|
|
@@ -11501,76 +11569,22 @@
|
|
|
11501
11569
|
`;
|
|
11502
11570
|
}
|
|
11503
11571
|
}
|
|
11504
|
-
SgdsComboBox.styles = [...
|
|
11572
|
+
SgdsComboBox.styles = [...SelectElement.styles, css_248z$I];
|
|
11505
11573
|
/** @internal */
|
|
11506
11574
|
SgdsComboBox.dependencies = {
|
|
11507
11575
|
"sgds-combo-box-item": ComboBoxItem,
|
|
11508
11576
|
"sgds-icon": SgdsIcon,
|
|
11509
11577
|
"sgds-badge": SgdsBadge
|
|
11510
11578
|
};
|
|
11511
|
-
__decorate([
|
|
11512
|
-
property({ reflect: true })
|
|
11513
|
-
], SgdsComboBox.prototype, "label", void 0);
|
|
11514
|
-
__decorate([
|
|
11515
|
-
property({ reflect: true })
|
|
11516
|
-
], SgdsComboBox.prototype, "hintText", void 0);
|
|
11517
|
-
__decorate([
|
|
11518
|
-
property({ reflect: true })
|
|
11519
|
-
], SgdsComboBox.prototype, "name", void 0);
|
|
11520
|
-
__decorate([
|
|
11521
|
-
property({ type: String, reflect: true })
|
|
11522
|
-
], SgdsComboBox.prototype, "placeholder", void 0);
|
|
11523
|
-
__decorate([
|
|
11524
|
-
property({ type: Boolean, reflect: true })
|
|
11525
|
-
], SgdsComboBox.prototype, "autofocus", void 0);
|
|
11526
|
-
__decorate([
|
|
11527
|
-
property({ type: Boolean, reflect: true })
|
|
11528
|
-
], SgdsComboBox.prototype, "disabled", void 0);
|
|
11529
|
-
__decorate([
|
|
11530
|
-
property({ type: Boolean, reflect: true })
|
|
11531
|
-
], SgdsComboBox.prototype, "required", void 0);
|
|
11532
|
-
__decorate([
|
|
11533
|
-
property({ type: Boolean, reflect: true })
|
|
11534
|
-
], SgdsComboBox.prototype, "readonly", void 0);
|
|
11535
|
-
__decorate([
|
|
11536
|
-
property({ type: String, reflect: true })
|
|
11537
|
-
], SgdsComboBox.prototype, "value", void 0);
|
|
11538
|
-
__decorate([
|
|
11539
|
-
state()
|
|
11540
|
-
], SgdsComboBox.prototype, "displayValue", void 0);
|
|
11541
|
-
__decorate([
|
|
11542
|
-
defaultValue()
|
|
11543
|
-
], SgdsComboBox.prototype, "defaultValue", void 0);
|
|
11544
|
-
__decorate([
|
|
11545
|
-
property({ type: Boolean, reflect: true })
|
|
11546
|
-
], SgdsComboBox.prototype, "hasFeedback", void 0);
|
|
11547
|
-
__decorate([
|
|
11548
|
-
property({ type: String, reflect: true })
|
|
11549
|
-
], SgdsComboBox.prototype, "invalidFeedback", void 0);
|
|
11550
|
-
__decorate([
|
|
11551
|
-
property({ type: Boolean, reflect: true })
|
|
11552
|
-
], SgdsComboBox.prototype, "invalid", void 0);
|
|
11553
|
-
__decorate([
|
|
11554
|
-
property({ type: Array })
|
|
11555
|
-
], SgdsComboBox.prototype, "menuList", void 0);
|
|
11556
11579
|
__decorate([
|
|
11557
11580
|
property({ type: Boolean, reflect: true })
|
|
11558
11581
|
], SgdsComboBox.prototype, "multiSelect", void 0);
|
|
11559
11582
|
__decorate([
|
|
11560
11583
|
property()
|
|
11561
11584
|
], SgdsComboBox.prototype, "filterFunction", void 0);
|
|
11562
|
-
__decorate([
|
|
11563
|
-
state()
|
|
11564
|
-
], SgdsComboBox.prototype, "filteredMenuList", void 0);
|
|
11565
11585
|
__decorate([
|
|
11566
11586
|
state()
|
|
11567
11587
|
], SgdsComboBox.prototype, "_renderedMenu", void 0);
|
|
11568
|
-
__decorate([
|
|
11569
|
-
state()
|
|
11570
|
-
], SgdsComboBox.prototype, "selectedItems", void 0);
|
|
11571
|
-
__decorate([
|
|
11572
|
-
queryAsync("input.form-control")
|
|
11573
|
-
], SgdsComboBox.prototype, "_sgdsInput", void 0);
|
|
11574
11588
|
__decorate([
|
|
11575
11589
|
queryAsync("input#multi-select-input-tracker")
|
|
11576
11590
|
], SgdsComboBox.prototype, "_multiSelectInput", void 0);
|
|
@@ -17269,7 +17283,7 @@
|
|
|
17269
17283
|
return newDate;
|
|
17270
17284
|
};
|
|
17271
17285
|
|
|
17272
|
-
var css_248z$
|
|
17286
|
+
var css_248z$H = 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)}`;
|
|
17273
17287
|
|
|
17274
17288
|
const TODAY_DATE = new Date();
|
|
17275
17289
|
const keyPressAction = {
|
|
@@ -17665,7 +17679,7 @@
|
|
|
17665
17679
|
return html$1 ` <div class="datepicker-body">${viewContent}</div> `;
|
|
17666
17680
|
}
|
|
17667
17681
|
}
|
|
17668
|
-
DatepickerCalendar.styles = [css_248z$
|
|
17682
|
+
DatepickerCalendar.styles = [css_248z$H];
|
|
17669
17683
|
/** @internal */
|
|
17670
17684
|
DatepickerCalendar.DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
17671
17685
|
/** @internal */
|
|
@@ -17713,7 +17727,7 @@
|
|
|
17713
17727
|
watch("displayDate")
|
|
17714
17728
|
], DatepickerCalendar.prototype, "_updateFocusedDate", null);
|
|
17715
17729
|
|
|
17716
|
-
var css_248z$
|
|
17730
|
+
var css_248z$G = 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)}`;
|
|
17717
17731
|
|
|
17718
17732
|
/**
|
|
17719
17733
|
* @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.
|
|
@@ -17760,7 +17774,7 @@
|
|
|
17760
17774
|
`;
|
|
17761
17775
|
}
|
|
17762
17776
|
}
|
|
17763
|
-
SgdsIconButton.styles = [...ButtonElement.styles, css_248z$
|
|
17777
|
+
SgdsIconButton.styles = [...ButtonElement.styles, css_248z$G];
|
|
17764
17778
|
/** @internal */
|
|
17765
17779
|
SgdsIconButton.dependencies = {
|
|
17766
17780
|
"sgds-icon": SgdsIcon
|
|
@@ -17769,7 +17783,7 @@
|
|
|
17769
17783
|
property({ type: String, reflect: true })
|
|
17770
17784
|
], SgdsIconButton.prototype, "name", void 0);
|
|
17771
17785
|
|
|
17772
|
-
var css_248z$
|
|
17786
|
+
var css_248z$F = css`.datepicker-header{display:flex;gap:var(--sgds-form-gap-md)}sgds-button{--btn-font-weight:var(--sgds-font-weight-semibold)}`;
|
|
17773
17787
|
|
|
17774
17788
|
class DatepickerHeader extends SgdsElement {
|
|
17775
17789
|
constructor() {
|
|
@@ -17945,7 +17959,7 @@
|
|
|
17945
17959
|
`;
|
|
17946
17960
|
}
|
|
17947
17961
|
}
|
|
17948
|
-
DatepickerHeader.styles = [css_248z$
|
|
17962
|
+
DatepickerHeader.styles = [css_248z$F];
|
|
17949
17963
|
/** @internal */
|
|
17950
17964
|
DatepickerHeader.dependencies = {
|
|
17951
17965
|
"sgds-icon": SgdsIcon,
|
|
@@ -21586,7 +21600,7 @@
|
|
|
21586
21600
|
globalThis.IMask = IMask;
|
|
21587
21601
|
} catch {}
|
|
21588
21602
|
|
|
21589
|
-
var css_248z$
|
|
21603
|
+
var css_248z$E = 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}}
|
|
21590
21604
|
|
|
21591
21605
|
/*! 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}`;
|
|
21592
21606
|
|
|
@@ -21618,7 +21632,7 @@
|
|
|
21618
21632
|
`;
|
|
21619
21633
|
}
|
|
21620
21634
|
}
|
|
21621
|
-
SgdsSpinner.styles = [...SgdsElement.styles, css_248z$
|
|
21635
|
+
SgdsSpinner.styles = [...SgdsElement.styles, css_248z$V, css_248z$E];
|
|
21622
21636
|
__decorate([
|
|
21623
21637
|
property({ type: String, reflect: true })
|
|
21624
21638
|
], SgdsSpinner.prototype, "variant", void 0);
|
|
@@ -21629,7 +21643,7 @@
|
|
|
21629
21643
|
property({ reflect: true, type: String })
|
|
21630
21644
|
], SgdsSpinner.prototype, "label", void 0);
|
|
21631
21645
|
|
|
21632
|
-
var css_248z$
|
|
21646
|
+
var css_248z$D = 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{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)}: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}`;
|
|
21633
21647
|
|
|
21634
21648
|
/**
|
|
21635
21649
|
* @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
|
|
@@ -21830,7 +21844,7 @@
|
|
|
21830
21844
|
`;
|
|
21831
21845
|
}
|
|
21832
21846
|
}
|
|
21833
|
-
SgdsInput.styles = [...FormControlElement.styles, css_248z$
|
|
21847
|
+
SgdsInput.styles = [...FormControlElement.styles, css_248z$M, css_248z$D];
|
|
21834
21848
|
/** @internal */
|
|
21835
21849
|
SgdsInput.dependencies = {
|
|
21836
21850
|
"sgds-spinner": SgdsSpinner,
|
|
@@ -21903,7 +21917,7 @@
|
|
|
21903
21917
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
21904
21918
|
], SgdsInput.prototype, "_handleDisabledChange", null);
|
|
21905
21919
|
|
|
21906
|
-
var css_248z$
|
|
21920
|
+
var css_248z$C = 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}`;
|
|
21907
21921
|
|
|
21908
21922
|
class DatepickerInput extends SgdsInput {
|
|
21909
21923
|
constructor() {
|
|
@@ -22030,7 +22044,7 @@
|
|
|
22030
22044
|
`;
|
|
22031
22045
|
}
|
|
22032
22046
|
}
|
|
22033
|
-
DatepickerInput.styles = [...SgdsInput.styles, css_248z$
|
|
22047
|
+
DatepickerInput.styles = [...SgdsInput.styles, css_248z$C];
|
|
22034
22048
|
__decorate([
|
|
22035
22049
|
property({ type: String })
|
|
22036
22050
|
], DatepickerInput.prototype, "minDate", void 0);
|
|
@@ -22044,7 +22058,7 @@
|
|
|
22044
22058
|
queryAsync("input")
|
|
22045
22059
|
], DatepickerInput.prototype, "shadowInput", void 0);
|
|
22046
22060
|
|
|
22047
|
-
var css_248z$
|
|
22061
|
+
var css_248z$B = 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}`;
|
|
22048
22062
|
|
|
22049
22063
|
/**
|
|
22050
22064
|
* @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
|
|
@@ -22416,7 +22430,7 @@
|
|
|
22416
22430
|
`;
|
|
22417
22431
|
}
|
|
22418
22432
|
}
|
|
22419
|
-
SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$
|
|
22433
|
+
SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$12, css_248z$B];
|
|
22420
22434
|
/**@internal */
|
|
22421
22435
|
SgdsDatepicker.dependencies = {
|
|
22422
22436
|
"sgds-datepicker-input": DatepickerInput,
|
|
@@ -22498,7 +22512,7 @@
|
|
|
22498
22512
|
watch("value")
|
|
22499
22513
|
], SgdsDatepicker.prototype, "_handleValueChange", null);
|
|
22500
22514
|
|
|
22501
|
-
var css_248z$
|
|
22515
|
+
var css_248z$A = 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}`;
|
|
22502
22516
|
|
|
22503
22517
|
let id$2 = 0;
|
|
22504
22518
|
/**
|
|
@@ -22541,7 +22555,7 @@
|
|
|
22541
22555
|
`;
|
|
22542
22556
|
}
|
|
22543
22557
|
}
|
|
22544
|
-
SgdsDescriptionList.styles = [...SgdsElement.styles, css_248z$
|
|
22558
|
+
SgdsDescriptionList.styles = [...SgdsElement.styles, css_248z$A];
|
|
22545
22559
|
__decorate([
|
|
22546
22560
|
property({ type: Boolean, reflect: true })
|
|
22547
22561
|
], SgdsDescriptionList.prototype, "stacked", void 0);
|
|
@@ -22549,7 +22563,7 @@
|
|
|
22549
22563
|
property({ type: Boolean, reflect: true })
|
|
22550
22564
|
], SgdsDescriptionList.prototype, "bordered", void 0);
|
|
22551
22565
|
|
|
22552
|
-
var css_248z$
|
|
22566
|
+
var css_248z$z = 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)}`;
|
|
22553
22567
|
|
|
22554
22568
|
class HasSlotController {
|
|
22555
22569
|
constructor(host, ...slotNames) {
|
|
@@ -22685,7 +22699,7 @@
|
|
|
22685
22699
|
`;
|
|
22686
22700
|
}
|
|
22687
22701
|
}
|
|
22688
|
-
SgdsDescriptionListGroup.styles = [...SgdsElement.styles, css_248z$
|
|
22702
|
+
SgdsDescriptionListGroup.styles = [...SgdsElement.styles, css_248z$z];
|
|
22689
22703
|
__decorate([
|
|
22690
22704
|
property({ type: Boolean, reflect: true })
|
|
22691
22705
|
], SgdsDescriptionListGroup.prototype, "bordered", void 0);
|
|
@@ -22696,7 +22710,7 @@
|
|
|
22696
22710
|
queryAssignedElements({ flatten: true })
|
|
22697
22711
|
], SgdsDescriptionListGroup.prototype, "_descriptionLists", void 0);
|
|
22698
22712
|
|
|
22699
|
-
var css_248z$
|
|
22713
|
+
var css_248z$y = 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)}`;
|
|
22700
22714
|
|
|
22701
22715
|
/**
|
|
22702
22716
|
* @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.
|
|
@@ -22715,7 +22729,7 @@
|
|
|
22715
22729
|
this.setAttribute("aria-orientation", this.orientation);
|
|
22716
22730
|
}
|
|
22717
22731
|
}
|
|
22718
|
-
SgdsDivider.styles = [css_248z$
|
|
22732
|
+
SgdsDivider.styles = [css_248z$y];
|
|
22719
22733
|
__decorate([
|
|
22720
22734
|
property({ type: String, reflect: true })
|
|
22721
22735
|
], SgdsDivider.prototype, "orientation", void 0);
|
|
@@ -22742,7 +22756,7 @@
|
|
|
22742
22756
|
}
|
|
22743
22757
|
}
|
|
22744
22758
|
|
|
22745
|
-
var css_248z$
|
|
22759
|
+
var css_248z$x = 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}}`;
|
|
22746
22760
|
|
|
22747
22761
|
/**
|
|
22748
22762
|
* @summary Drawers slide in from a container to expose additional options and information.
|
|
@@ -22961,7 +22975,7 @@
|
|
|
22961
22975
|
`;
|
|
22962
22976
|
}
|
|
22963
22977
|
}
|
|
22964
|
-
SgdsDrawer.styles = [...SgdsElement.styles, css_248z$
|
|
22978
|
+
SgdsDrawer.styles = [...SgdsElement.styles, css_248z$x];
|
|
22965
22979
|
/**@internal */
|
|
22966
22980
|
SgdsDrawer.dependencies = {
|
|
22967
22981
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -23081,7 +23095,7 @@
|
|
|
23081
23095
|
options: { duration: 250 }
|
|
23082
23096
|
});
|
|
23083
23097
|
|
|
23084
|
-
var css_248z$
|
|
23098
|
+
var css_248z$w = 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)}`;
|
|
23085
23099
|
|
|
23086
23100
|
/**
|
|
23087
23101
|
* @summary Allows users to upload files of various sizes and formats
|
|
@@ -23254,7 +23268,7 @@
|
|
|
23254
23268
|
`;
|
|
23255
23269
|
}
|
|
23256
23270
|
}
|
|
23257
|
-
SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$
|
|
23271
|
+
SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$w];
|
|
23258
23272
|
/**@internal */
|
|
23259
23273
|
SgdsFileUpload.dependencies = {
|
|
23260
23274
|
"sgds-button": SgdsButton,
|
|
@@ -23283,7 +23297,7 @@
|
|
|
23283
23297
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
23284
23298
|
], SgdsFileUpload.prototype, "_handleDisabledChange", null);
|
|
23285
23299
|
|
|
23286
|
-
var css_248z$
|
|
23300
|
+
var css_248z$v = 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}}`;
|
|
23287
23301
|
|
|
23288
23302
|
/**
|
|
23289
23303
|
* @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.
|
|
@@ -23386,7 +23400,7 @@
|
|
|
23386
23400
|
`;
|
|
23387
23401
|
}
|
|
23388
23402
|
}
|
|
23389
|
-
SgdsFooter.styles = [...SgdsElement.styles, css_248z$
|
|
23403
|
+
SgdsFooter.styles = [...SgdsElement.styles, css_248z$v];
|
|
23390
23404
|
__decorate([
|
|
23391
23405
|
property({ type: String })
|
|
23392
23406
|
], SgdsFooter.prototype, "copyrightLiner", void 0);
|
|
@@ -23406,7 +23420,7 @@
|
|
|
23406
23420
|
property({ type: String })
|
|
23407
23421
|
], SgdsFooter.prototype, "termsOfUseHref", void 0);
|
|
23408
23422
|
|
|
23409
|
-
var css_248z$
|
|
23423
|
+
var css_248z$u = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
|
|
23410
23424
|
|
|
23411
23425
|
/**
|
|
23412
23426
|
* @summary A IconList can be used to display content related to the same topic. Each list item begins an icon.
|
|
@@ -23429,7 +23443,7 @@
|
|
|
23429
23443
|
`;
|
|
23430
23444
|
}
|
|
23431
23445
|
}
|
|
23432
|
-
SgdsIconList.styles = [...SgdsElement.styles, css_248z$
|
|
23446
|
+
SgdsIconList.styles = [...SgdsElement.styles, css_248z$u];
|
|
23433
23447
|
__decorate([
|
|
23434
23448
|
property({ type: String, reflect: true })
|
|
23435
23449
|
], SgdsIconList.prototype, "role", void 0);
|
|
@@ -23920,15 +23934,15 @@
|
|
|
23920
23934
|
});
|
|
23921
23935
|
}
|
|
23922
23936
|
|
|
23923
|
-
const LG_BREAKPOINT =
|
|
23937
|
+
const LG_BREAKPOINT = 1024;
|
|
23924
23938
|
const MD_BREAKPOINT = 768;
|
|
23925
|
-
const SM_BREAKPOINT =
|
|
23926
|
-
const XL_BREAKPOINT =
|
|
23927
|
-
const XXL_BREAKPOINT =
|
|
23939
|
+
const SM_BREAKPOINT = 512;
|
|
23940
|
+
const XL_BREAKPOINT = 1280;
|
|
23941
|
+
const XXL_BREAKPOINT = 1440;
|
|
23928
23942
|
|
|
23929
23943
|
const MainnavContext = createContext("mainnav-context");
|
|
23930
23944
|
|
|
23931
|
-
var css_248z$
|
|
23945
|
+
var css_248z$t = css`:host{z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);bottom:0;box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:768px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:992px){.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:1200px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.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:1400px){.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}`;
|
|
23932
23946
|
|
|
23933
23947
|
const SIZES = {
|
|
23934
23948
|
sm: SM_BREAKPOINT,
|
|
@@ -24150,7 +24164,7 @@
|
|
|
24150
24164
|
}
|
|
24151
24165
|
}
|
|
24152
24166
|
}
|
|
24153
|
-
SgdsMainnav.styles = [...SgdsElement.styles, css_248z$
|
|
24167
|
+
SgdsMainnav.styles = [...SgdsElement.styles, css_248z$t];
|
|
24154
24168
|
/** @internal */
|
|
24155
24169
|
SgdsMainnav.dependencies = {
|
|
24156
24170
|
"sgds-icon-button": SgdsIconButton
|
|
@@ -24213,7 +24227,7 @@
|
|
|
24213
24227
|
options: { duration: 200, easing: "ease-in-out" }
|
|
24214
24228
|
});
|
|
24215
24229
|
|
|
24216
|
-
var css_248z$
|
|
24230
|
+
var css_248z$s = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=sm]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=md]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=lg]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=xl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=xxl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}.nav-link{align-items:center;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}@media screen and (max-width:767px){.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus,.nav-link:not(.disabled):focus-visible{outline:0}.nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus,.dropdown-items a:focus-visible{outline:0}.dropdown-items a:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{height:100%}`;
|
|
24217
24231
|
|
|
24218
24232
|
const TAB = "Tab";
|
|
24219
24233
|
const ENTER = "Enter";
|
|
@@ -24257,7 +24271,7 @@
|
|
|
24257
24271
|
return;
|
|
24258
24272
|
}
|
|
24259
24273
|
if (this._breakpointReached) {
|
|
24260
|
-
this.shadowRoot.adoptedStyleSheets = [css_248z$
|
|
24274
|
+
this.shadowRoot.adoptedStyleSheets = [css_248z$12.styleSheet, css_248z$s.styleSheet];
|
|
24261
24275
|
}
|
|
24262
24276
|
}
|
|
24263
24277
|
updated() {
|
|
@@ -24447,7 +24461,7 @@
|
|
|
24447
24461
|
return this._breakpointReached ? mobileView : desktopView;
|
|
24448
24462
|
}
|
|
24449
24463
|
}
|
|
24450
|
-
SgdsMainnavDropdown.styles = [...SgdsElement.styles, css_248z$
|
|
24464
|
+
SgdsMainnavDropdown.styles = [...SgdsElement.styles, css_248z$11, css_248z$12, css_248z$s];
|
|
24451
24465
|
/** @internal */
|
|
24452
24466
|
SgdsMainnavDropdown.dependencies = {
|
|
24453
24467
|
"sgds-dropdown": SgdsDropdown,
|
|
@@ -24483,7 +24497,7 @@
|
|
|
24483
24497
|
queryAssignedElements()
|
|
24484
24498
|
], SgdsMainnavDropdown.prototype, "defaultNodes", void 0);
|
|
24485
24499
|
|
|
24486
|
-
var css_248z$
|
|
24500
|
+
var css_248z$r = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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;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)}`;
|
|
24487
24501
|
|
|
24488
24502
|
/**
|
|
24489
24503
|
* @slot default - slot for SgdsMainnavItem element.
|
|
@@ -24533,7 +24547,7 @@
|
|
|
24533
24547
|
return html$1 `<slot @slotchange=${this._handleSlotChange}></slot>`;
|
|
24534
24548
|
}
|
|
24535
24549
|
}
|
|
24536
|
-
SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$
|
|
24550
|
+
SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$r];
|
|
24537
24551
|
__decorate([
|
|
24538
24552
|
property({ type: Boolean })
|
|
24539
24553
|
], SgdsMainnavItem.prototype, "active", void 0);
|
|
@@ -24544,9 +24558,9 @@
|
|
|
24544
24558
|
watch("disabled")
|
|
24545
24559
|
], SgdsMainnavItem.prototype, "_handleDisabled", null);
|
|
24546
24560
|
|
|
24547
|
-
var css_248z$
|
|
24561
|
+
var css_248z$q = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.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 .75rem}.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:20px;width:20px}.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}}`;
|
|
24548
24562
|
|
|
24549
|
-
var css_248z$
|
|
24563
|
+
var css_248z$p = css`svg{vertical-align:middle}`;
|
|
24550
24564
|
|
|
24551
24565
|
/**
|
|
24552
24566
|
* @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.
|
|
@@ -24724,7 +24738,7 @@
|
|
|
24724
24738
|
`;
|
|
24725
24739
|
}
|
|
24726
24740
|
}
|
|
24727
|
-
SgdsMasthead.styles = [...SgdsElement.styles, css_248z$
|
|
24741
|
+
SgdsMasthead.styles = [...SgdsElement.styles, css_248z$p, css_248z$15, css_248z$q];
|
|
24728
24742
|
__decorate([
|
|
24729
24743
|
state()
|
|
24730
24744
|
], SgdsMasthead.prototype, "toggleVisibility", void 0);
|
|
@@ -24846,7 +24860,7 @@
|
|
|
24846
24860
|
}
|
|
24847
24861
|
}
|
|
24848
24862
|
|
|
24849
|
-
var css_248z$
|
|
24863
|
+
var css_248z$o = css`:host([size=sm]) .modal-panel{max-width:480px}:host([size=lg]) .modal-panel{max-width:800px}:host([size=fullscreen]) .modal-panel{max-width:1128px}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default)}: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;margin:var(--sgds-spacer-9) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-9) - var(--sgds-spacer-9));max-width:640px;position:relative;width:100%}.modal-panel:focus{outline:none}@media screen and (max-width:420px){.modal-panel{margin:var(--sgds-spacer-8) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-8) - var(--sgds-spacer-8))}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;padding:var(--sgds-padding-xl)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}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;overflow:auto;padding:0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding:var(--sgds-padding-xl)}.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}`;
|
|
24850
24864
|
|
|
24851
24865
|
/**
|
|
24852
24866
|
* @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
|
|
@@ -25077,7 +25091,7 @@
|
|
|
25077
25091
|
`;
|
|
25078
25092
|
}
|
|
25079
25093
|
}
|
|
25080
|
-
SgdsModal.styles = [...SgdsElement.styles, css_248z$
|
|
25094
|
+
SgdsModal.styles = [...SgdsElement.styles, css_248z$S, css_248z$p, css_248z$o];
|
|
25081
25095
|
/**@internal */
|
|
25082
25096
|
SgdsModal.dependencies = {
|
|
25083
25097
|
"sgds-close-button": SgdsCloseButton
|
|
@@ -25133,7 +25147,7 @@
|
|
|
25133
25147
|
options: { duration: 400 }
|
|
25134
25148
|
});
|
|
25135
25149
|
|
|
25136
|
-
var css_248z$
|
|
25150
|
+
var css_248z$n = css`ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:inline-flex;gap:var(--sgds-gap-2-xs);list-style:none;padding-left:0}.page-link{align-items:center;background-color:var(--sgds-bg-transparent);border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);display:flex;height:var(--sgds-dimension-48);justify-content:center;width:var(--sgds-dimension-48)}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:focus,.page-link:not(.ellipsis):hover{background-color:var(--sgds-primary-bg-translucent);color:var(--sgds-primary-color-default);z-index:2}.page-link:focus{box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.page-item>.page-link:not(.ellipsis){cursor:pointer}.page-item.active .page-link{background-color:var(--sgds-primary-bg-default);border-color:var(--sgds-info);color:var(--sgds-color-fixed-light);z-index:3}.ellipsis-disabled,.page-item.disabled .page-link{opacity:var(--sgds-opacity-50)}.ellipsis-disabled{cursor:not-allowed;pointer-events:none}.pagination-sm .page-link{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);width:var(--sgds-dimension-40)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pagination-description{align-items:center;display:flex}.pagination-sm .pagination-description{font-size:var(--sgds-font-size-1)}`;
|
|
25137
25151
|
|
|
25138
25152
|
/**
|
|
25139
25153
|
* @summary The Pagination component enables the user to select a specific page from a range of pages
|
|
@@ -25417,7 +25431,7 @@
|
|
|
25417
25431
|
`;
|
|
25418
25432
|
}
|
|
25419
25433
|
}
|
|
25420
|
-
SgdsPagination.styles = [...SgdsElement.styles, css_248z$
|
|
25434
|
+
SgdsPagination.styles = [...SgdsElement.styles, css_248z$n];
|
|
25421
25435
|
/**@internal */
|
|
25422
25436
|
SgdsPagination.dependencies = {
|
|
25423
25437
|
"sgds-icon-button": SgdsIconButton,
|
|
@@ -25552,7 +25566,7 @@
|
|
|
25552
25566
|
*/
|
|
25553
25567
|
const styleMap = directive(StyleMapDirective);
|
|
25554
25568
|
|
|
25555
|
-
var css_248z$
|
|
25569
|
+
var css_248z$m = css`progress{vertical-align:baseline}.progress-container{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);overflow:hidden}.progress{background-color:var(--sgds-bg-translucent)}.progress-bar{background-color:var(--sgds-primary-surface-default);display:flex;flex-direction:column;height:var(--sgds-dimension-4);justify-content:center;overflow:hidden;transition:width .6s ease}:host([variant=neutral]) .progress-bar{background-color:var(--sgds-neutral-surface-default)}.label{color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-1);white-space:nowrap}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}`;
|
|
25556
25570
|
|
|
25557
25571
|
/**
|
|
25558
25572
|
* @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
|
|
@@ -25588,7 +25602,7 @@
|
|
|
25588
25602
|
`;
|
|
25589
25603
|
}
|
|
25590
25604
|
}
|
|
25591
|
-
SgdsProgressBar.styles = [...SgdsElement.styles, css_248z$
|
|
25605
|
+
SgdsProgressBar.styles = [...SgdsElement.styles, css_248z$m];
|
|
25592
25606
|
__decorate([
|
|
25593
25607
|
property({ type: String, reflect: true })
|
|
25594
25608
|
], SgdsProgressBar.prototype, "variant", void 0);
|
|
@@ -25608,7 +25622,7 @@
|
|
|
25608
25622
|
property({ type: String, reflect: true })
|
|
25609
25623
|
], SgdsProgressBar.prototype, "label", void 0);
|
|
25610
25624
|
|
|
25611
|
-
var css_248z$
|
|
25625
|
+
var css_248z$l = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.input-group{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-form-gap-lg);position:relative}.input-group>sgds-input{flex:1 1 auto;min-width:0;position:relative}.input-group sgds-button:focus,.input-group>sgds-input:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;
|
|
25612
25626
|
|
|
25613
25627
|
/**
|
|
25614
25628
|
* @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.
|
|
@@ -25825,7 +25839,7 @@
|
|
|
25825
25839
|
`;
|
|
25826
25840
|
}
|
|
25827
25841
|
}
|
|
25828
|
-
SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$
|
|
25842
|
+
SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$M, css_248z$p, css_248z$l];
|
|
25829
25843
|
/** @internal */
|
|
25830
25844
|
SgdsQuantityToggle.dependencies = {
|
|
25831
25845
|
"sgds-input": SgdsInput,
|
|
@@ -25862,7 +25876,7 @@
|
|
|
25862
25876
|
queryAsync("sgds-input")
|
|
25863
25877
|
], SgdsQuantityToggle.prototype, "_sgdsInput", void 0);
|
|
25864
25878
|
|
|
25865
|
-
var css_248z$
|
|
25879
|
+
var css_248z$k = css`:host{outline:0}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:50%;height:var(--sgds-form-height-sm);width:var(--sgds-form-height-sm)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:not([disabled]):not(.is-invalid):checked:focus-visible,.form-check-input:not([disabled]):not(.is-invalid):checked:hover,.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-surface-default)}`;
|
|
25866
25880
|
|
|
25867
25881
|
/**
|
|
25868
25882
|
* @summary Radio allows the user to select one option from a set while seeing all available options.
|
|
@@ -25948,7 +25962,7 @@
|
|
|
25948
25962
|
`;
|
|
25949
25963
|
}
|
|
25950
25964
|
}
|
|
25951
|
-
SgdsRadio.styles = [...SgdsElement.styles, css_248z$
|
|
25965
|
+
SgdsRadio.styles = [...SgdsElement.styles, css_248z$N, css_248z$k];
|
|
25952
25966
|
__decorate([
|
|
25953
25967
|
property({ type: Boolean, reflect: true })
|
|
25954
25968
|
], SgdsRadio.prototype, "checked", void 0);
|
|
@@ -25971,7 +25985,7 @@
|
|
|
25971
25985
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
25972
25986
|
], SgdsRadio.prototype, "handleDisabledChange", null);
|
|
25973
25987
|
|
|
25974
|
-
var css_248z$
|
|
25988
|
+
var css_248z$j = css`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
|
|
25975
25989
|
|
|
25976
25990
|
/**
|
|
25977
25991
|
* @summary RadioGroup group multiple radios so they function as a single form control.
|
|
@@ -26202,7 +26216,7 @@
|
|
|
26202
26216
|
`;
|
|
26203
26217
|
}
|
|
26204
26218
|
}
|
|
26205
|
-
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$
|
|
26219
|
+
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$j];
|
|
26206
26220
|
__decorate([
|
|
26207
26221
|
query("slot:not([name])")
|
|
26208
26222
|
], SgdsRadioGroup.prototype, "defaultSlot", void 0);
|
|
@@ -26240,7 +26254,207 @@
|
|
|
26240
26254
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
26241
26255
|
], SgdsRadioGroup.prototype, "_handleDisabledChange", null);
|
|
26242
26256
|
|
|
26243
|
-
var css_248z$
|
|
26257
|
+
var css_248z$i = 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)}`;
|
|
26258
|
+
|
|
26259
|
+
var css_248z$h = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.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}`;
|
|
26260
|
+
|
|
26261
|
+
class SelectItem extends SgdsElement {
|
|
26262
|
+
constructor() {
|
|
26263
|
+
super(...arguments);
|
|
26264
|
+
/** when true, sets the active stylings */
|
|
26265
|
+
this.active = false;
|
|
26266
|
+
/** Disables the Item */
|
|
26267
|
+
this.disabled = false;
|
|
26268
|
+
}
|
|
26269
|
+
connectedCallback() {
|
|
26270
|
+
super.connectedCallback();
|
|
26271
|
+
this.setAttribute("role", "menuitem");
|
|
26272
|
+
this.setAttribute("aria-disabled", `${this.disabled}`);
|
|
26273
|
+
this.addEventListener("keydown", (e) => {
|
|
26274
|
+
if (e.key === "Enter") {
|
|
26275
|
+
this._handleClickItem();
|
|
26276
|
+
}
|
|
26277
|
+
});
|
|
26278
|
+
this.addEventListener("click", () => {
|
|
26279
|
+
this._handleClickItem();
|
|
26280
|
+
});
|
|
26281
|
+
}
|
|
26282
|
+
_handleClickItem() {
|
|
26283
|
+
this.emit("sgds-select");
|
|
26284
|
+
}
|
|
26285
|
+
render() {
|
|
26286
|
+
const classes = {
|
|
26287
|
+
disabled: this.disabled,
|
|
26288
|
+
active: this.active
|
|
26289
|
+
};
|
|
26290
|
+
return html$1 `
|
|
26291
|
+
<div class="dropdown-item ${classMap(classes)}" tabindex=${this.disabled ? "-1" : "0"}>
|
|
26292
|
+
<div class="normal-item-content">
|
|
26293
|
+
<slot></slot>
|
|
26294
|
+
${this.active ? html$1 ` <sgds-icon name="check"></sgds-icon> ` : nothing}
|
|
26295
|
+
</div>
|
|
26296
|
+
</div>
|
|
26297
|
+
`;
|
|
26298
|
+
}
|
|
26299
|
+
}
|
|
26300
|
+
/** @internal */
|
|
26301
|
+
SelectItem.dependencies = {
|
|
26302
|
+
"sgds-icon": SgdsIcon
|
|
26303
|
+
};
|
|
26304
|
+
SelectItem.styles = [css_248z$h];
|
|
26305
|
+
__decorate([
|
|
26306
|
+
property({ type: Boolean, reflect: true })
|
|
26307
|
+
], SelectItem.prototype, "active", void 0);
|
|
26308
|
+
__decorate([
|
|
26309
|
+
property({ type: Boolean, reflect: true })
|
|
26310
|
+
], SelectItem.prototype, "disabled", void 0);
|
|
26311
|
+
|
|
26312
|
+
/**
|
|
26313
|
+
* @summary Select is used to make one selection from a list through keyboard or mouse actions
|
|
26314
|
+
*
|
|
26315
|
+
* @event sgds-select - Emitted when an option is selected and the value of select is updated
|
|
26316
|
+
*/
|
|
26317
|
+
class SgdsSelect extends SelectElement {
|
|
26318
|
+
connectedCallback() {
|
|
26319
|
+
super.connectedCallback();
|
|
26320
|
+
this.addEventListener("sgds-hide", async () => {
|
|
26321
|
+
const sgdsInput = await this._input;
|
|
26322
|
+
sgdsInput.focus();
|
|
26323
|
+
});
|
|
26324
|
+
}
|
|
26325
|
+
async firstUpdated() {
|
|
26326
|
+
super.firstUpdated();
|
|
26327
|
+
if (this.value) {
|
|
26328
|
+
const valueArray = this.value.split(";");
|
|
26329
|
+
const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));
|
|
26330
|
+
this.selectedItems = [...initialSelectedItem, ...this.selectedItems];
|
|
26331
|
+
this.displayValue = initialSelectedItem[0].label;
|
|
26332
|
+
}
|
|
26333
|
+
this.input = await this._input;
|
|
26334
|
+
this._mixinValidate(this.input);
|
|
26335
|
+
if (this.menuIsOpen && !this.readonly) {
|
|
26336
|
+
this.showMenu();
|
|
26337
|
+
}
|
|
26338
|
+
}
|
|
26339
|
+
async _handleValueChange() {
|
|
26340
|
+
if (this.value) {
|
|
26341
|
+
this.emit("sgds-select");
|
|
26342
|
+
}
|
|
26343
|
+
const sgdsInput = await this._input;
|
|
26344
|
+
this._mixinSetFormValue();
|
|
26345
|
+
this._mixinValidate(sgdsInput);
|
|
26346
|
+
if (!this._isTouched && this.value === "")
|
|
26347
|
+
return;
|
|
26348
|
+
this.invalid = !this._mixinReportValidity();
|
|
26349
|
+
}
|
|
26350
|
+
async _handleItemSelected(e) {
|
|
26351
|
+
var _a, _b, _c;
|
|
26352
|
+
const itemEl = e.target;
|
|
26353
|
+
const itemLabel = (_b = (_a = itemEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
|
|
26354
|
+
const itemValueAttr = (_c = itemEl.getAttribute("value")) !== null && _c !== void 0 ? _c : itemLabel;
|
|
26355
|
+
const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {
|
|
26356
|
+
label: itemLabel,
|
|
26357
|
+
value: itemValueAttr
|
|
26358
|
+
};
|
|
26359
|
+
this.selectedItems = [foundItem];
|
|
26360
|
+
this.value = foundItem.value.toString();
|
|
26361
|
+
this.displayValue = this.selectedItems[0].label;
|
|
26362
|
+
this.hideMenu();
|
|
26363
|
+
}
|
|
26364
|
+
async _handleInputBlur(e) {
|
|
26365
|
+
e.preventDefault();
|
|
26366
|
+
if (this.selectedItems.length > 0) {
|
|
26367
|
+
this.displayValue = this.selectedItems[0].label;
|
|
26368
|
+
}
|
|
26369
|
+
else {
|
|
26370
|
+
this.displayValue = "";
|
|
26371
|
+
}
|
|
26372
|
+
}
|
|
26373
|
+
/** For form reset */
|
|
26374
|
+
async _mixinResetFormControl() {
|
|
26375
|
+
this.value = this.defaultValue;
|
|
26376
|
+
const initialItem = this.menuList.filter(({ value }) => value === this.value);
|
|
26377
|
+
if (initialItem.length <= 0) {
|
|
26378
|
+
this.displayValue = "";
|
|
26379
|
+
}
|
|
26380
|
+
else {
|
|
26381
|
+
this.displayValue = initialItem[0].label;
|
|
26382
|
+
}
|
|
26383
|
+
this._mixinResetValidity(await this._input);
|
|
26384
|
+
}
|
|
26385
|
+
_renderMenu() {
|
|
26386
|
+
const emptyMenu = html$1 ` <div class="empty-menu">No options</div> `;
|
|
26387
|
+
const menu = this.menuList.map(item => {
|
|
26388
|
+
const isActive = item.value === this.value;
|
|
26389
|
+
return html$1 `
|
|
26390
|
+
<sgds-select-item ?active=${isActive} value=${item.value} @sgds-select=${this._handleItemSelected}>
|
|
26391
|
+
${item.label}
|
|
26392
|
+
</sgds-select-item>
|
|
26393
|
+
`;
|
|
26394
|
+
});
|
|
26395
|
+
return this.menuList.length === 0 ? emptyMenu : menu;
|
|
26396
|
+
}
|
|
26397
|
+
_renderInput() {
|
|
26398
|
+
const wantFeedbackStyle = this.hasFeedback;
|
|
26399
|
+
return html$1 `
|
|
26400
|
+
<div
|
|
26401
|
+
${ref(this.myDropdown)}
|
|
26402
|
+
class="form-control-group ${classMap({
|
|
26403
|
+
disabled: this.disabled,
|
|
26404
|
+
readonly: this.readonly,
|
|
26405
|
+
"is-invalid": this.invalid && wantFeedbackStyle
|
|
26406
|
+
})}"
|
|
26407
|
+
@click=${this._handleClick}
|
|
26408
|
+
>
|
|
26409
|
+
<div class="select-input-container">
|
|
26410
|
+
<input
|
|
26411
|
+
class="form-control"
|
|
26412
|
+
type="text"
|
|
26413
|
+
id=${this._controlId}
|
|
26414
|
+
name=${ifDefined(this.name)}
|
|
26415
|
+
placeholder=${ifDefined(this.placeholder)}
|
|
26416
|
+
aria-invalid=${this.invalid ? "true" : "false"}
|
|
26417
|
+
?autofocus=${this.autofocus}
|
|
26418
|
+
?disabled=${this.disabled}
|
|
26419
|
+
?readonly=${this.readonly}
|
|
26420
|
+
?required=${this.required}
|
|
26421
|
+
.value=${this.displayValue}
|
|
26422
|
+
@blur=${this._handleInputBlur}
|
|
26423
|
+
aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
|
|
26424
|
+
aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
|
|
26425
|
+
? `${this._controlId}-invalid`
|
|
26426
|
+
: ""}"
|
|
26427
|
+
@keydown=${(e) => e.preventDefault()}
|
|
26428
|
+
/>
|
|
26429
|
+
</div>
|
|
26430
|
+
<sgds-icon name="chevron-down" size="md"></sgds-icon>
|
|
26431
|
+
</div>
|
|
26432
|
+
`;
|
|
26433
|
+
}
|
|
26434
|
+
render() {
|
|
26435
|
+
return html$1 `
|
|
26436
|
+
<div class="select">
|
|
26437
|
+
${this._renderLabel()}
|
|
26438
|
+
<!-- The input -->
|
|
26439
|
+
${this._renderInput()} ${this._renderFeedback()}
|
|
26440
|
+
<ul id=${this.dropdownMenuId} class="dropdown-menu" part="menu" tabindex="-1">
|
|
26441
|
+
${this._renderMenu()}
|
|
26442
|
+
</ul>
|
|
26443
|
+
</div>
|
|
26444
|
+
`;
|
|
26445
|
+
}
|
|
26446
|
+
}
|
|
26447
|
+
SgdsSelect.styles = [...SelectElement.styles, css_248z$i];
|
|
26448
|
+
/** @internal */
|
|
26449
|
+
SgdsSelect.dependencies = {
|
|
26450
|
+
"sgds-icon": SgdsIcon,
|
|
26451
|
+
"sgds-select-item": SelectItem
|
|
26452
|
+
};
|
|
26453
|
+
__decorate([
|
|
26454
|
+
watch("value", { waitUntilFirstUpdate: true })
|
|
26455
|
+
], SgdsSelect.prototype, "_handleValueChange", null);
|
|
26456
|
+
|
|
26457
|
+
var css_248z$g = css`:host{--sidenav-sticky-top:0rem;padding:var(--sgds-padding-md)}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:visible;position:sticky;top:var(--sidenav-sticky-top)}`;
|
|
26244
26458
|
|
|
26245
26459
|
/**
|
|
26246
26460
|
* @summary The side navigation is used to display a list of links to move between pages within a related category.
|
|
@@ -26285,7 +26499,7 @@
|
|
|
26285
26499
|
`;
|
|
26286
26500
|
}
|
|
26287
26501
|
}
|
|
26288
|
-
SgdsSidenav.styles = [...SgdsElement.styles, css_248z$
|
|
26502
|
+
SgdsSidenav.styles = [...SgdsElement.styles, css_248z$g];
|
|
26289
26503
|
__decorate([
|
|
26290
26504
|
property({ type: Boolean, attribute: true })
|
|
26291
26505
|
], SgdsSidenav.prototype, "sticky", void 0);
|
|
@@ -26293,7 +26507,7 @@
|
|
|
26293
26507
|
queryAssignedElements()
|
|
26294
26508
|
], SgdsSidenav.prototype, "defaultNodes", void 0);
|
|
26295
26509
|
|
|
26296
|
-
var css_248z$
|
|
26510
|
+
var css_248z$f = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-border-radius-md);display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled),.sidenav-btn:focus:not(.disabled){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}.no-menu-default:focus,.no-menu-default:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-border-radius-md);color:inherit!important;display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body)!important;line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus),.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0!important}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}`;
|
|
26297
26511
|
|
|
26298
26512
|
/**
|
|
26299
26513
|
* @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.
|
|
@@ -26503,7 +26717,7 @@
|
|
|
26503
26717
|
`;
|
|
26504
26718
|
}
|
|
26505
26719
|
}
|
|
26506
|
-
SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z$
|
|
26720
|
+
SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z$f];
|
|
26507
26721
|
/** @internal */
|
|
26508
26722
|
SgdsSidenavItem.dependencies = {
|
|
26509
26723
|
"sgds-icon": SgdsIcon
|
|
@@ -26544,7 +26758,7 @@
|
|
|
26544
26758
|
options: { duration: 200, easing: "ease-in-out" }
|
|
26545
26759
|
});
|
|
26546
26760
|
|
|
26547
|
-
var css_248z$
|
|
26761
|
+
var css_248z$e = css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-border-radius-md);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}:host([disabled]) ::slotted(a:focus),:host([disabled]) ::slotted(a:focus-visible){box-shadow:none;outline:0}::slotted(a:focus),::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
|
|
26548
26762
|
|
|
26549
26763
|
/**
|
|
26550
26764
|
* @slot default - slot for label of anchor tag.
|
|
@@ -26581,7 +26795,7 @@
|
|
|
26581
26795
|
return html$1 ` <slot @slotchange=${this._handleSlotChange}></slot> `;
|
|
26582
26796
|
}
|
|
26583
26797
|
}
|
|
26584
|
-
SgdsSidenavLink.styles = [...SgdsElement.styles, css_248z$
|
|
26798
|
+
SgdsSidenavLink.styles = [...SgdsElement.styles, css_248z$e];
|
|
26585
26799
|
__decorate([
|
|
26586
26800
|
property({ type: Boolean, reflect: true })
|
|
26587
26801
|
], SgdsSidenavLink.prototype, "active", void 0);
|
|
@@ -26595,7 +26809,7 @@
|
|
|
26595
26809
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
26596
26810
|
], SgdsSidenavLink.prototype, "_handleDisabled", null);
|
|
26597
26811
|
|
|
26598
|
-
var css_248z$
|
|
26812
|
+
var css_248z$d = css`.skeleton{--bg:var(--sgds-bg-translucent-subtle);background-color:var(--bg);border-radius:var(--sgds-border-radius-sm);display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.skeleton.skeleton-paragraph{background-color:transparent}.skeleton.skeleton-paragraph.auto-size-rows>div[class*=skeleton-row]{background-color:var(--sgds-bg-translucent);border-radius:var(--sgds-border-radius-sm);height:-webkit-fill-available}.sheen{--sheen-color:var(--sgds-bg-translucent);animation:sheen 8s ease-in-out infinite;background:linear-gradient(270deg,var(--bg) 0,var(--sheen-color) 33.33%,var(--sheen-color) 66.67%,var(--bg) 100%);background-size:400% 100%}@keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.sheen{animation:none}}`;
|
|
26599
26813
|
|
|
26600
26814
|
/**
|
|
26601
26815
|
* @summary A skeleton is a low-fidelity visual placeholder that represents the loading of interface elements
|
|
@@ -26643,7 +26857,7 @@
|
|
|
26643
26857
|
`;
|
|
26644
26858
|
}
|
|
26645
26859
|
}
|
|
26646
|
-
SgdsSkeleton.styles = [css_248z$
|
|
26860
|
+
SgdsSkeleton.styles = [css_248z$d];
|
|
26647
26861
|
__decorate([
|
|
26648
26862
|
query(".skeleton")
|
|
26649
26863
|
], SgdsSkeleton.prototype, "skeleton", void 0);
|
|
@@ -26666,7 +26880,7 @@
|
|
|
26666
26880
|
// When user use a template of sgds-skeletons, add one visually hidden span to indicate Loading...
|
|
26667
26881
|
// Loading labels must be unique thats why its not advisible to handle the aria labelling for users inside sgds-skeleton
|
|
26668
26882
|
|
|
26669
|
-
var css_248z$
|
|
26883
|
+
var css_248z$c = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
|
|
26670
26884
|
|
|
26671
26885
|
/**
|
|
26672
26886
|
* @summary Steppers are used to inform users which step they are at in a form or a process
|
|
@@ -26784,7 +26998,7 @@
|
|
|
26784
26998
|
`;
|
|
26785
26999
|
}
|
|
26786
27000
|
}
|
|
26787
|
-
SgdsStepper.styles = [...SgdsElement.styles, css_248z$
|
|
27001
|
+
SgdsStepper.styles = [...SgdsElement.styles, css_248z$c];
|
|
26788
27002
|
/** @internal */
|
|
26789
27003
|
SgdsStepper.dependencies = { "sgds-icon": SgdsIcon };
|
|
26790
27004
|
__decorate([
|
|
@@ -26806,6 +27020,247 @@
|
|
|
26806
27020
|
watch("activeStep", { waitUntilFirstUpdate: true })
|
|
26807
27021
|
], SgdsStepper.prototype, "_handleActiveStepChange", null);
|
|
26808
27022
|
|
|
27023
|
+
var css_248z$b = css`:host{position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}nav.mobile{border-bottom:none}.subnav{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.mobile{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg)}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-lg)}.subnav.mobile slot[name=header]::slotted(*){padding-top:var(--sgds-padding-none)}.subnav-nav-group{flex:1 1 0;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav,.subnav-nav-group{align-items:center;display:flex}.subnav-nav{gap:var(--sgds-gap-lg)}.subnav-nav-mobile{display:flex;flex-direction:column;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-actions{align-items:center;display:flex;gap:var(--sgds-gap-md)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-dropdown{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav-actions-mobile{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky}.hidden{display:none}`;
|
|
27024
|
+
|
|
27025
|
+
var css_248z$a = css`.sgds-container{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 64px)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container{max-width:896px}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-container{max-width:1176px}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:1320px}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}`;
|
|
27026
|
+
|
|
27027
|
+
/**
|
|
27028
|
+
* @summary This component provides secondary navigation within a specific section or page. It typically appears below the main navigation and offers context-specific links or actions to help users explore related content.
|
|
27029
|
+
*
|
|
27030
|
+
* @event sgds-show - Emitted on show. Only for collapsed menu.
|
|
27031
|
+
* @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.
|
|
27032
|
+
* @event sgds-hide - Emitted on hide. Only for collapsed menu.
|
|
27033
|
+
* @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
|
|
27034
|
+
*
|
|
27035
|
+
* @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.
|
|
27036
|
+
* @slot header - Slot for rendering the sub-navigation header or section title.
|
|
27037
|
+
* @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.
|
|
27038
|
+
*
|
|
27039
|
+
*/
|
|
27040
|
+
class SgdsSubnav extends SgdsElement {
|
|
27041
|
+
constructor() {
|
|
27042
|
+
super(...arguments);
|
|
27043
|
+
this.isCollapsed = false;
|
|
27044
|
+
this.isMenuOpen = false;
|
|
27045
|
+
this._handleResize = () => {
|
|
27046
|
+
this.isCollapsed = window.innerWidth < LG_BREAKPOINT;
|
|
27047
|
+
if (!this.isCollapsed) {
|
|
27048
|
+
this.isMenuOpen = false;
|
|
27049
|
+
}
|
|
27050
|
+
this._updateMobileNavMaxHeight();
|
|
27051
|
+
};
|
|
27052
|
+
this._updateMobileNavMaxHeight = () => {
|
|
27053
|
+
if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav)
|
|
27054
|
+
return;
|
|
27055
|
+
const { top: subnavTop } = this.nav.getBoundingClientRect();
|
|
27056
|
+
const headerHeight = this.subnav.clientHeight;
|
|
27057
|
+
const actionsButtonHeight = this.mobileActions.clientHeight;
|
|
27058
|
+
const offset = subnavTop + headerHeight + actionsButtonHeight;
|
|
27059
|
+
this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;
|
|
27060
|
+
};
|
|
27061
|
+
this._toggleMenu = () => {
|
|
27062
|
+
var _a;
|
|
27063
|
+
if (this.isMenuOpen) {
|
|
27064
|
+
this.hide();
|
|
27065
|
+
}
|
|
27066
|
+
else {
|
|
27067
|
+
document.querySelector("body").style.overflow = "hidden";
|
|
27068
|
+
this.show();
|
|
27069
|
+
}
|
|
27070
|
+
(_a = this.toggler) === null || _a === void 0 ? void 0 : _a.focus();
|
|
27071
|
+
};
|
|
27072
|
+
}
|
|
27073
|
+
connectedCallback() {
|
|
27074
|
+
super.connectedCallback();
|
|
27075
|
+
this._handleResize();
|
|
27076
|
+
window.addEventListener("resize", this._handleResize);
|
|
27077
|
+
window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
|
|
27078
|
+
}
|
|
27079
|
+
disconnectedCallback() {
|
|
27080
|
+
super.disconnectedCallback();
|
|
27081
|
+
window.removeEventListener("resize", this._handleResize);
|
|
27082
|
+
window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
|
|
27083
|
+
}
|
|
27084
|
+
firstUpdated() {
|
|
27085
|
+
this._updateMobileNavMaxHeight();
|
|
27086
|
+
}
|
|
27087
|
+
_handleSlotChange(e) {
|
|
27088
|
+
const childElements = e.target.assignedElements({ flatten: true });
|
|
27089
|
+
if (this.isCollapsed) {
|
|
27090
|
+
childElements.forEach(element => {
|
|
27091
|
+
element.setAttribute("isCollapsed", `${this.isCollapsed}`);
|
|
27092
|
+
});
|
|
27093
|
+
}
|
|
27094
|
+
else {
|
|
27095
|
+
childElements.forEach(element => {
|
|
27096
|
+
element.removeAttribute("isCollapsed");
|
|
27097
|
+
});
|
|
27098
|
+
}
|
|
27099
|
+
}
|
|
27100
|
+
_handleClickOutOfElement(e, self) {
|
|
27101
|
+
if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {
|
|
27102
|
+
this.hide();
|
|
27103
|
+
}
|
|
27104
|
+
}
|
|
27105
|
+
/** Shows the menu. For when subnav is in the collapsed form */
|
|
27106
|
+
async show() {
|
|
27107
|
+
if (this.isMenuOpen) {
|
|
27108
|
+
return;
|
|
27109
|
+
}
|
|
27110
|
+
this.isMenuOpen = true;
|
|
27111
|
+
return waitForEvent(this, "sgds-after-show");
|
|
27112
|
+
}
|
|
27113
|
+
/** Hide the menu. For when subnav is in the collapsed form */
|
|
27114
|
+
async hide() {
|
|
27115
|
+
if (!this.isMenuOpen) {
|
|
27116
|
+
return;
|
|
27117
|
+
}
|
|
27118
|
+
this.isMenuOpen = false;
|
|
27119
|
+
document.querySelector("body").style.removeProperty("overflow");
|
|
27120
|
+
return waitForEvent(this, "sgds-after-hide");
|
|
27121
|
+
}
|
|
27122
|
+
async _animateToShow() {
|
|
27123
|
+
const sgdsShow = this.emit("sgds-show", { cancelable: true });
|
|
27124
|
+
if (sgdsShow.defaultPrevented) {
|
|
27125
|
+
this.isMenuOpen = false;
|
|
27126
|
+
return;
|
|
27127
|
+
}
|
|
27128
|
+
await stopAnimations(this.mobileNav);
|
|
27129
|
+
this.mobileNav.classList.remove("hidden");
|
|
27130
|
+
const { keyframes, options } = getAnimation(this, "subnav.show");
|
|
27131
|
+
await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
|
|
27132
|
+
// this.mobileNav.style.height = "auto";
|
|
27133
|
+
this.emit("sgds-after-show");
|
|
27134
|
+
}
|
|
27135
|
+
async _animateToHide() {
|
|
27136
|
+
const slHide = this.emit("sgds-hide", { cancelable: true });
|
|
27137
|
+
if (slHide.defaultPrevented) {
|
|
27138
|
+
this.isMenuOpen = true;
|
|
27139
|
+
return;
|
|
27140
|
+
}
|
|
27141
|
+
await stopAnimations(this.mobileNav);
|
|
27142
|
+
const { keyframes, options } = getAnimation(this, "subnav.hide");
|
|
27143
|
+
await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
|
|
27144
|
+
this.mobileNav.classList.add("hidden");
|
|
27145
|
+
// this.mobileNav.style.height = "auto";
|
|
27146
|
+
this.emit("sgds-after-hide");
|
|
27147
|
+
}
|
|
27148
|
+
async handleOpenChange() {
|
|
27149
|
+
if (this.isMenuOpen) {
|
|
27150
|
+
// Show
|
|
27151
|
+
this._animateToShow();
|
|
27152
|
+
}
|
|
27153
|
+
else {
|
|
27154
|
+
// Hide
|
|
27155
|
+
this._animateToHide();
|
|
27156
|
+
}
|
|
27157
|
+
}
|
|
27158
|
+
render() {
|
|
27159
|
+
const isHydrated = this.hasUpdated;
|
|
27160
|
+
return html$1 `
|
|
27161
|
+
<nav
|
|
27162
|
+
class=${classMap({
|
|
27163
|
+
mobile: this.isCollapsed
|
|
27164
|
+
})}
|
|
27165
|
+
aria-label="Sub navigation"
|
|
27166
|
+
>
|
|
27167
|
+
<div
|
|
27168
|
+
class=${classMap({
|
|
27169
|
+
"sgds-container": !this.isCollapsed,
|
|
27170
|
+
subnav: true,
|
|
27171
|
+
mobile: this.isCollapsed,
|
|
27172
|
+
collapsed: !this.isMenuOpen
|
|
27173
|
+
})}
|
|
27174
|
+
>
|
|
27175
|
+
<slot name="header"></slot>
|
|
27176
|
+
${this.isCollapsed
|
|
27177
|
+
? html$1 `
|
|
27178
|
+
<sgds-icon
|
|
27179
|
+
class="subnav-toggler"
|
|
27180
|
+
name="chevron-down"
|
|
27181
|
+
@click=${this._toggleMenu}
|
|
27182
|
+
aria-label="Toggle sub navigation"
|
|
27183
|
+
></sgds-icon>
|
|
27184
|
+
`
|
|
27185
|
+
: html$1 `
|
|
27186
|
+
<div class="subnav-nav-group">
|
|
27187
|
+
<div class="subnav-nav">
|
|
27188
|
+
<slot @slotchange="${this._handleSlotChange}"></slot>
|
|
27189
|
+
</div>
|
|
27190
|
+
<div class="subnav-actions">
|
|
27191
|
+
<slot name="actions"></slot>
|
|
27192
|
+
</div>
|
|
27193
|
+
</div>
|
|
27194
|
+
`}
|
|
27195
|
+
</div>
|
|
27196
|
+
${this.isCollapsed
|
|
27197
|
+
? html$1 `
|
|
27198
|
+
<div class="subnav-dropdown">
|
|
27199
|
+
<div
|
|
27200
|
+
class=${classMap({
|
|
27201
|
+
"subnav-nav-mobile": true,
|
|
27202
|
+
hidden: !this.isMenuOpen && !isHydrated
|
|
27203
|
+
})}
|
|
27204
|
+
>
|
|
27205
|
+
<slot @slotchange="${this._handleSlotChange}"></slot>
|
|
27206
|
+
</div>
|
|
27207
|
+
<div class="subnav-actions-mobile">
|
|
27208
|
+
<slot name="actions"></slot>
|
|
27209
|
+
</div>
|
|
27210
|
+
</div>
|
|
27211
|
+
`
|
|
27212
|
+
: nothing}
|
|
27213
|
+
</nav>
|
|
27214
|
+
`;
|
|
27215
|
+
}
|
|
27216
|
+
}
|
|
27217
|
+
SgdsSubnav.styles = [...SgdsElement.styles, css_248z$b, css_248z$a];
|
|
27218
|
+
/** @internal */
|
|
27219
|
+
SgdsSubnav.dependencies = {
|
|
27220
|
+
"sgds-icon": SgdsIcon
|
|
27221
|
+
};
|
|
27222
|
+
__decorate([
|
|
27223
|
+
query("nav")
|
|
27224
|
+
], SgdsSubnav.prototype, "nav", void 0);
|
|
27225
|
+
__decorate([
|
|
27226
|
+
query(".subnav")
|
|
27227
|
+
], SgdsSubnav.prototype, "subnav", void 0);
|
|
27228
|
+
__decorate([
|
|
27229
|
+
query(".subnav-nav-mobile")
|
|
27230
|
+
], SgdsSubnav.prototype, "mobileNav", void 0);
|
|
27231
|
+
__decorate([
|
|
27232
|
+
query(".subnav-toggler")
|
|
27233
|
+
], SgdsSubnav.prototype, "toggler", void 0);
|
|
27234
|
+
__decorate([
|
|
27235
|
+
query(".subnav-dropdown")
|
|
27236
|
+
], SgdsSubnav.prototype, "body", void 0);
|
|
27237
|
+
__decorate([
|
|
27238
|
+
query(".subnav-actions-mobile")
|
|
27239
|
+
], SgdsSubnav.prototype, "mobileActions", void 0);
|
|
27240
|
+
__decorate([
|
|
27241
|
+
state()
|
|
27242
|
+
], SgdsSubnav.prototype, "isCollapsed", void 0);
|
|
27243
|
+
__decorate([
|
|
27244
|
+
state()
|
|
27245
|
+
], SgdsSubnav.prototype, "isMenuOpen", void 0);
|
|
27246
|
+
__decorate([
|
|
27247
|
+
watch("isMenuOpen", { waitUntilFirstUpdate: true })
|
|
27248
|
+
], SgdsSubnav.prototype, "handleOpenChange", null);
|
|
27249
|
+
setDefaultAnimation("subnav.show", {
|
|
27250
|
+
keyframes: [
|
|
27251
|
+
{ height: "0", opacity: "0" },
|
|
27252
|
+
{ height: "auto", opacity: "1" }
|
|
27253
|
+
],
|
|
27254
|
+
options: { duration: 200, easing: "ease-in-out" }
|
|
27255
|
+
});
|
|
27256
|
+
setDefaultAnimation("subnav.hide", {
|
|
27257
|
+
keyframes: [
|
|
27258
|
+
{ height: "auto", opacity: "1" },
|
|
27259
|
+
{ height: "0", opacity: "0" }
|
|
27260
|
+
],
|
|
27261
|
+
options: { duration: 200, easing: "ease-in-out" }
|
|
27262
|
+
});
|
|
27263
|
+
|
|
26809
27264
|
var css_248z$9 = css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled]):checked:focus,.form-check-input:not([disabled]):checked:hover,.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-1)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-3)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input:checked,:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
|
|
26810
27265
|
|
|
26811
27266
|
/**
|
|
@@ -26904,7 +27359,7 @@
|
|
|
26904
27359
|
`;
|
|
26905
27360
|
}
|
|
26906
27361
|
}
|
|
26907
|
-
SgdsSwitch.styles = [...SgdsElement.styles, css_248z$
|
|
27362
|
+
SgdsSwitch.styles = [...SgdsElement.styles, css_248z$N, css_248z$9];
|
|
26908
27363
|
__decorate([
|
|
26909
27364
|
property({ reflect: true, type: String })
|
|
26910
27365
|
], SgdsSwitch.prototype, "size", void 0);
|
|
@@ -29920,12 +30375,14 @@
|
|
|
29920
30375
|
exports.SgdsQuantityToggle = SgdsQuantityToggle;
|
|
29921
30376
|
exports.SgdsRadio = SgdsRadio;
|
|
29922
30377
|
exports.SgdsRadioGroup = SgdsRadioGroup;
|
|
30378
|
+
exports.SgdsSelect = SgdsSelect;
|
|
29923
30379
|
exports.SgdsSidenav = SgdsSidenav;
|
|
29924
30380
|
exports.SgdsSidenavItem = SgdsSidenavItem;
|
|
29925
30381
|
exports.SgdsSidenavLink = SgdsSidenavLink;
|
|
29926
30382
|
exports.SgdsSkeleton = SgdsSkeleton;
|
|
29927
30383
|
exports.SgdsSpinner = SgdsSpinner;
|
|
29928
30384
|
exports.SgdsStepper = SgdsStepper;
|
|
30385
|
+
exports.SgdsSubnav = SgdsSubnav;
|
|
29929
30386
|
exports.SgdsSwitch = SgdsSwitch;
|
|
29930
30387
|
exports.SgdsTab = SgdsTab;
|
|
29931
30388
|
exports.SgdsTabGroup = SgdsTabGroup;
|