@govtechsg/sgds-web-component 3.3.3-rc.1 → 3.3.3-rc.2
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/components/Breadcrumb/index.umd.js +1 -1
- package/components/Dropdown/dropdown-item.js +1 -1
- package/components/Dropdown/index.umd.js +1 -1
- package/components/Mainnav/index.umd.js +42 -9
- package/components/Mainnav/index.umd.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-dropdown.js +24 -7
- package/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-item.js +4 -0
- package/components/Mainnav/sgds-mainnav-item.js.map +1 -1
- package/components/Mainnav/sgds-mainnav.js +13 -1
- package/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/components/OverflowMenu/index.umd.js +1 -1
- package/components/Subnav/index.umd.js +2 -2
- package/components/Subnav/subnav-item.js +1 -1
- package/components/Subnav/subnav.js +1 -1
- package/components/index.umd.js +43 -10
- package/components/index.umd.js.map +1 -1
- package/index.umd.js +44 -11
- package/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Dropdown/dropdown-item.cjs.js +1 -1
- package/react/components/Dropdown/dropdown-item.js +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js +24 -7
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.js +24 -7
- package/react/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-item.cjs.js +4 -0
- package/react/components/Mainnav/sgds-mainnav-item.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-item.js +4 -0
- package/react/components/Mainnav/sgds-mainnav-item.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js +13 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.js +13 -1
- package/react/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/react/components/Subnav/subnav-item.cjs.js +1 -1
- package/react/components/Subnav/subnav-item.js +1 -1
- package/react/components/Subnav/subnav.cjs.js +1 -1
- package/react/components/Subnav/subnav.js +1 -1
|
@@ -11127,7 +11127,7 @@
|
|
|
11127
11127
|
property({ type: String, reflect: true })
|
|
11128
11128
|
], SgdsIcon.prototype, "size", void 0);
|
|
11129
11129
|
|
|
11130
|
-
var css_248z$3 = css
|
|
11130
|
+
var css_248z$3 = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
|
|
11131
11131
|
|
|
11132
11132
|
/**
|
|
11133
11133
|
* @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = css
|
|
3
|
+
var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=dropdown-item.js.map
|
|
@@ -11025,7 +11025,7 @@
|
|
|
11025
11025
|
property({ type: String, reflect: true })
|
|
11026
11026
|
], SgdsIcon.prototype, "size", void 0);
|
|
11027
11027
|
|
|
11028
|
-
var css_248z = css
|
|
11028
|
+
var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
|
|
11029
11029
|
|
|
11030
11030
|
/**
|
|
11031
11031
|
* @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
|
|
@@ -7907,10 +7907,20 @@
|
|
|
7907
7907
|
connectedCallback() {
|
|
7908
7908
|
super.connectedCallback();
|
|
7909
7909
|
this.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
|
|
7910
|
+
this.addEventListener("sgds-mainnav-close", () => {
|
|
7911
|
+
if (this.breakpointReached) {
|
|
7912
|
+
this.hide();
|
|
7913
|
+
}
|
|
7914
|
+
});
|
|
7910
7915
|
}
|
|
7911
7916
|
disconnectedCallback() {
|
|
7912
7917
|
super.disconnectedCallback();
|
|
7913
7918
|
this.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
|
|
7919
|
+
this.removeEventListener("sgds-mainnav-close", () => {
|
|
7920
|
+
if (this.breakpointReached) {
|
|
7921
|
+
this.hide();
|
|
7922
|
+
}
|
|
7923
|
+
});
|
|
7914
7924
|
}
|
|
7915
7925
|
firstUpdated() {
|
|
7916
7926
|
if (this.breakpointReached && this.body) {
|
|
@@ -8005,7 +8015,9 @@
|
|
|
8005
8015
|
}
|
|
8006
8016
|
this.expanded = false;
|
|
8007
8017
|
document.querySelector("body").style.removeProperty("overflow");
|
|
8008
|
-
|
|
8018
|
+
setTimeout(() => {
|
|
8019
|
+
this.emit("close-dropdown-menu");
|
|
8020
|
+
}, 200);
|
|
8009
8021
|
return waitForEvent(this, "sgds-after-hide");
|
|
8010
8022
|
}
|
|
8011
8023
|
// assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
|
|
@@ -12149,7 +12161,7 @@
|
|
|
12149
12161
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
12150
12162
|
], SgdsDropdown.prototype, "_handleDisabled", null);
|
|
12151
12163
|
|
|
12152
|
-
var css_248z$1 = css
|
|
12164
|
+
var css_248z$1 = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
|
|
12153
12165
|
|
|
12154
12166
|
/**
|
|
12155
12167
|
* @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
|
|
@@ -12259,15 +12271,21 @@
|
|
|
12259
12271
|
_handleSlotChange(e) {
|
|
12260
12272
|
const items = e.target.assignedElements({ flatten: true });
|
|
12261
12273
|
items.forEach(item => {
|
|
12274
|
+
var _a;
|
|
12262
12275
|
item.addEventListener("keydown", this._handleKeyboardMenuItemsEvent.bind(this));
|
|
12263
12276
|
const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
|
|
12264
12277
|
dropdownItem.classList.add("nav-link");
|
|
12265
|
-
const
|
|
12266
|
-
|
|
12267
|
-
|
|
12268
|
-
|
|
12269
|
-
|
|
12270
|
-
}
|
|
12278
|
+
const link = ((_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("a")) || item.querySelector("a");
|
|
12279
|
+
link.tabIndex = -1;
|
|
12280
|
+
if (dropdownItem.classList.contains("disabled")) {
|
|
12281
|
+
link.setAttribute("href", "javascript:void(0)");
|
|
12282
|
+
link.setAttribute("tabindex", "-1");
|
|
12283
|
+
}
|
|
12284
|
+
else {
|
|
12285
|
+
link.addEventListener("click", () => {
|
|
12286
|
+
this.emit("sgds-mainnav-close");
|
|
12287
|
+
});
|
|
12288
|
+
}
|
|
12271
12289
|
});
|
|
12272
12290
|
}
|
|
12273
12291
|
_handleDesktopSlotChange(e) {
|
|
@@ -12275,6 +12293,15 @@
|
|
|
12275
12293
|
items.forEach(item => {
|
|
12276
12294
|
const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
|
|
12277
12295
|
dropdownItem.classList.remove("nav-link");
|
|
12296
|
+
const slottedItem = item.shadowRoot.querySelector(".dropdown-item slot").assignedElements({
|
|
12297
|
+
flatten: true
|
|
12298
|
+
});
|
|
12299
|
+
slottedItem.forEach(item => {
|
|
12300
|
+
if (dropdownItem.classList.contains("disabled")) {
|
|
12301
|
+
item.setAttribute("href", "javascript:void(0)");
|
|
12302
|
+
item.setAttribute("tabindex", "-1");
|
|
12303
|
+
}
|
|
12304
|
+
});
|
|
12278
12305
|
});
|
|
12279
12306
|
}
|
|
12280
12307
|
_handleKeyboardMenuItemsEvent(e) {
|
|
@@ -12325,7 +12352,9 @@
|
|
|
12325
12352
|
}
|
|
12326
12353
|
_resetDropdownMenu() {
|
|
12327
12354
|
const navbarBody = this._getNavbarBody();
|
|
12328
|
-
navbarBody
|
|
12355
|
+
if (navbarBody) {
|
|
12356
|
+
navbarBody.style.removeProperty("transform");
|
|
12357
|
+
}
|
|
12329
12358
|
}
|
|
12330
12359
|
_handleKeyboardOpen(event) {
|
|
12331
12360
|
if (this.disabled) {
|
|
@@ -12515,7 +12544,11 @@
|
|
|
12515
12544
|
if (this.disabled) {
|
|
12516
12545
|
anchor.setAttribute("href", "javascript:void(0)");
|
|
12517
12546
|
anchor.setAttribute("tabindex", "-1");
|
|
12547
|
+
return;
|
|
12518
12548
|
}
|
|
12549
|
+
anchor.addEventListener("click", () => {
|
|
12550
|
+
this.emit("sgds-mainnav-close");
|
|
12551
|
+
});
|
|
12519
12552
|
}
|
|
12520
12553
|
}
|
|
12521
12554
|
render() {
|