@govtechsg/sgds-web-component 3.0.4 → 3.0.6

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.
Files changed (42) hide show
  1. package/Masthead/index.js +11 -2
  2. package/components/Card/index.umd.js +2 -2
  3. package/components/Card/index.umd.js.map +1 -1
  4. package/components/Card/sgds-card.d.ts +1 -1
  5. package/components/Card/sgds-card.js +2 -2
  6. package/components/Card/sgds-card.js.map +1 -1
  7. package/components/Datepicker/index.umd.js +1 -10
  8. package/components/Datepicker/index.umd.js.map +1 -1
  9. package/components/Input/index.umd.js +1 -10
  10. package/components/Input/index.umd.js.map +1 -1
  11. package/components/Input/sgds-input.d.ts +0 -2
  12. package/components/Input/sgds-input.js +1 -10
  13. package/components/Input/sgds-input.js.map +1 -1
  14. package/components/Masthead/index.umd.js +11 -2
  15. package/components/Masthead/index.umd.js.map +1 -1
  16. package/components/Masthead/masthead.js +1 -1
  17. package/components/Masthead/sgds-masthead.d.ts +2 -0
  18. package/components/Masthead/sgds-masthead.js +10 -1
  19. package/components/Masthead/sgds-masthead.js.map +1 -1
  20. package/components/QuantityToggle/index.umd.js +1 -10
  21. package/components/QuantityToggle/index.umd.js.map +1 -1
  22. package/components/index.umd.js +14 -14
  23. package/components/index.umd.js.map +1 -1
  24. package/css/grid.css +55 -16
  25. package/index.umd.js +14 -14
  26. package/index.umd.js.map +1 -1
  27. package/package.json +1 -4
  28. package/react/components/Card/sgds-card.cjs.js +2 -2
  29. package/react/components/Card/sgds-card.cjs.js.map +1 -1
  30. package/react/components/Card/sgds-card.js +2 -2
  31. package/react/components/Card/sgds-card.js.map +1 -1
  32. package/react/components/Input/sgds-input.cjs.js +1 -10
  33. package/react/components/Input/sgds-input.cjs.js.map +1 -1
  34. package/react/components/Input/sgds-input.js +1 -10
  35. package/react/components/Input/sgds-input.js.map +1 -1
  36. package/react/components/Masthead/masthead.cjs.js +1 -1
  37. package/react/components/Masthead/masthead.js +1 -1
  38. package/react/components/Masthead/sgds-masthead.cjs.js +10 -1
  39. package/react/components/Masthead/sgds-masthead.cjs.js.map +1 -1
  40. package/react/components/Masthead/sgds-masthead.js +10 -1
  41. package/react/components/Masthead/sgds-masthead.js.map +1 -1
  42. package/themes/root.css +17 -6
package/components/Masthead/masthead.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css } from 'lit';
2
2
 
3
- var css_248z = 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)}@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}}`;
3
+ var css_248z = 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}}`;
4
4
 
5
5
  export { css_248z as default };
6
6
  //# sourceMappingURL=masthead.js.map
package/components/Masthead/sgds-masthead.d.ts CHANGED
@@ -7,6 +7,8 @@ export declare class SgdsMasthead extends SgdsElement {
7
7
  /** @internal */
8
8
  toggleVisibility: boolean;
9
9
  /** @internal */
10
+ private _handleKeydown;
11
+ /** @internal */
10
12
  private _toggleVisibility;
11
13
  render(): import("lit-html").TemplateResult<1>;
12
14
  }
package/components/Masthead/sgds-masthead.js CHANGED
@@ -16,6 +16,13 @@ class SgdsMasthead extends SgdsElement {
16
16
  this.toggleVisibility = false;
17
17
  }
18
18
  /** @internal */
19
+ _handleKeydown(event) {
20
+ if (event.key === "Enter" || event.key === " ") {
21
+ event.preventDefault();
22
+ this._toggleVisibility();
23
+ }
24
+ }
25
+ /** @internal */
19
26
  _toggleVisibility() {
20
27
  this.toggleVisibility = !this.toggleVisibility;
21
28
  }
@@ -64,9 +71,11 @@ class SgdsMasthead extends SgdsElement {
64
71
  class="sgds-masthead-button"
65
72
  id="sgds-masthead-identify"
66
73
  role="button"
74
+ tabindex="0"
67
75
  aria-expanded="${this.toggleVisibility}"
68
76
  aria-controls="sgds-masthead-content"
69
- @click=${() => this._toggleVisibility()}
77
+ @keydown=${this._handleKeydown}
78
+ @click=${this._toggleVisibility}
70
79
  >
71
80
  <span>How to identify</span>
72
81
  <svg
package/components/Masthead/sgds-masthead.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-masthead.js","sources":["../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mastheadStyle from \"./masthead.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\n/**\n * @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.\n */\nexport class SgdsMasthead extends SgdsElement {\n static styles = [...SgdsElement.styles, svgStyles, anchorStyles, mastheadStyle];\n\n /** @internal */\n @state()\n toggleVisibility = false;\n\n /** @internal */\n private _toggleVisibility() {\n this.toggleVisibility = !this.toggleVisibility;\n }\n\n render() {\n return html`\n <div id=\"sgds-masthead\" class=\"sgds-masthead\" aria-label=\"A Singapore Government Agency Website\" role=\"banner\">\n <div class=\"banner\">\n <div class=\"container\">\n <div class=\"masthead-layout\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n class=\"sg-crest\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n fill=\"currentColor\"\n />\n </svg>\n <div class=\"masthead-text-layout\">\n <span>A Singapore Government Agency Website</span>\n <div\n class=\"sgds-masthead-button\"\n id=\"sgds-masthead-identify\"\n role=\"button\"\n aria-expanded=\"${this.toggleVisibility}\"\n aria-controls=\"sgds-masthead-content\"\n @click=${() => this._toggleVisibility()}\n >\n <span>How to identify</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"panel\">\n <div\n id=\"sgds-masthead-content\"\n class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n >\n <div class=\"content-grid\">\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2.5 7.31409C2.5 7.01647 2.65873 6.74143 2.91644 6.59254L9.5831 2.74069C9.84105 2.59165 10.1589 2.59165 10.4169 2.74069L17.0836 6.59254C17.3413 6.74143 17.5 7.01647 17.5 7.31409V8.33314C17.5 8.79338 17.1269 9.16648 16.6667 9.16648H15.8333V14.9998H16.6667C17.1269 14.9998 17.5 15.3729 17.5 15.8331V16.6665C17.5 17.1267 17.1269 17.4998 16.6667 17.4998H3.33333C2.8731 17.4998 2.5 17.1267 2.5 16.6665V15.8331C2.5 15.3729 2.8731 14.9998 3.33333 14.9998H4.16667V9.16648H3.33333C2.8731 9.16648 2.5 8.79338 2.5 8.33314V7.31409ZM6.66667 9.16648V14.9998H8.75V9.16648H6.66667ZM11.25 9.16648V14.9998H13.3333V9.16648H11.25ZM11.25 6.24981C11.25 6.94017 10.6904 7.49981 10 7.49981C9.30964 7.49981 8.75 6.94017 8.75 6.24981C8.75 5.55945 9.30964 4.99981 10 4.99981C10.6904 4.99981 11.25 5.55945 11.25 6.24981Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Official website links end with .gov.sg</div>\n <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n <a\n href=\"https://www.gov.sg/trusted-sites#govsites\"\n class=\"trusted-websites-link\"\n rel=\"noreferrer\"\n target=\"_blank\"\n >Trusted websites</a\n >\n </div>\n </div>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.83334 8.33317H5.41668C4.26608 8.33317 3.33334 9.26591 3.33334 10.4165V16.2498C3.33334 17.4004 4.26608 18.3332 5.41668 18.3332H14.5833C15.7339 18.3332 16.6667 17.4004 16.6667 16.2498V10.4165C16.6667 9.26591 15.7339 8.33317 14.5833 8.33317H14.1667V5.83317C14.1667 3.53198 12.3012 1.6665 10 1.6665C7.69882 1.6665 5.83334 3.53198 5.83334 5.83317V8.33317ZM7.50001 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 10 3.33317C8.6193 3.33317 7.50001 4.45246 7.50001 5.83317V8.33317Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Secure websites use HTTPS</div>\n <article>\n Look for a lock (<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.83331 8.33317H5.41665C4.26605 8.33317 3.33331 9.26591 3.33331 10.4165V16.2498C3.33331 17.4004 4.26605 18.3332 5.41665 18.3332H14.5833C15.7339 18.3332 16.6666 17.4004 16.6666 16.2498V10.4165C16.6666 9.26591 15.7339 8.33317 14.5833 8.33317H14.1666V5.83317C14.1666 3.53198 12.3012 1.6665 9.99998 1.6665C7.69879 1.6665 5.83331 3.53198 5.83331 5.83317V8.33317ZM7.49998 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 9.99998 3.33317C8.61927 3.33317 7.49998 4.45246 7.49998 5.83317V8.33317Z\"\n fill=\"currentColor\"\n /></svg\n >) or https:// as an added precaution. Share sensitive information only on official, secure\n websites.\n </article>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsMasthead;\n"],"names":["svgStyles","anchorStyles","mastheadStyle"],"mappings":";;;;;;;;AAOA;;AAEG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAKE,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KAgK1B;;IA7JS,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CoB,iCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;AAE7B,yBAAA,EAAA,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAA;;;;;;;;;yDASA,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAA;;;;;;;;;;;;;;;;;;qDAkB1C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ErF,CAAC;KACH;;AAnKM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAY,EAAEC,UAAa,CAAC,CAAC;AAIhF,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
1
+ {"version":3,"file":"sgds-masthead.js","sources":["../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mastheadStyle from \"./masthead.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\n/**\n * @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.\n */\nexport class SgdsMasthead extends SgdsElement {\n static styles = [...SgdsElement.styles, svgStyles, anchorStyles, mastheadStyle];\n\n /** @internal */\n @state()\n toggleVisibility = false;\n\n /** @internal */\n private _handleKeydown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this._toggleVisibility();\n }\n }\n\n /** @internal */\n private _toggleVisibility() {\n this.toggleVisibility = !this.toggleVisibility;\n }\n\n render() {\n return html`\n <div id=\"sgds-masthead\" class=\"sgds-masthead\" aria-label=\"A Singapore Government Agency Website\" role=\"banner\">\n <div class=\"banner\">\n <div class=\"container\">\n <div class=\"masthead-layout\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n class=\"sg-crest\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n fill=\"currentColor\"\n />\n </svg>\n <div class=\"masthead-text-layout\">\n <span>A Singapore Government Agency Website</span>\n <div\n class=\"sgds-masthead-button\"\n id=\"sgds-masthead-identify\"\n role=\"button\"\n tabindex=\"0\"\n aria-expanded=\"${this.toggleVisibility}\"\n aria-controls=\"sgds-masthead-content\"\n @keydown=${this._handleKeydown}\n @click=${this._toggleVisibility}\n >\n <span>How to identify</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"panel\">\n <div\n id=\"sgds-masthead-content\"\n class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n >\n <div class=\"content-grid\">\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2.5 7.31409C2.5 7.01647 2.65873 6.74143 2.91644 6.59254L9.5831 2.74069C9.84105 2.59165 10.1589 2.59165 10.4169 2.74069L17.0836 6.59254C17.3413 6.74143 17.5 7.01647 17.5 7.31409V8.33314C17.5 8.79338 17.1269 9.16648 16.6667 9.16648H15.8333V14.9998H16.6667C17.1269 14.9998 17.5 15.3729 17.5 15.8331V16.6665C17.5 17.1267 17.1269 17.4998 16.6667 17.4998H3.33333C2.8731 17.4998 2.5 17.1267 2.5 16.6665V15.8331C2.5 15.3729 2.8731 14.9998 3.33333 14.9998H4.16667V9.16648H3.33333C2.8731 9.16648 2.5 8.79338 2.5 8.33314V7.31409ZM6.66667 9.16648V14.9998H8.75V9.16648H6.66667ZM11.25 9.16648V14.9998H13.3333V9.16648H11.25ZM11.25 6.24981C11.25 6.94017 10.6904 7.49981 10 7.49981C9.30964 7.49981 8.75 6.94017 8.75 6.24981C8.75 5.55945 9.30964 4.99981 10 4.99981C10.6904 4.99981 11.25 5.55945 11.25 6.24981Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Official website links end with .gov.sg</div>\n <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n <a\n href=\"https://www.gov.sg/trusted-sites#govsites\"\n class=\"trusted-websites-link\"\n rel=\"noreferrer\"\n target=\"_blank\"\n >Trusted websites</a\n >\n </div>\n </div>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.83334 8.33317H5.41668C4.26608 8.33317 3.33334 9.26591 3.33334 10.4165V16.2498C3.33334 17.4004 4.26608 18.3332 5.41668 18.3332H14.5833C15.7339 18.3332 16.6667 17.4004 16.6667 16.2498V10.4165C16.6667 9.26591 15.7339 8.33317 14.5833 8.33317H14.1667V5.83317C14.1667 3.53198 12.3012 1.6665 10 1.6665C7.69882 1.6665 5.83334 3.53198 5.83334 5.83317V8.33317ZM7.50001 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 10 3.33317C8.6193 3.33317 7.50001 4.45246 7.50001 5.83317V8.33317Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Secure websites use HTTPS</div>\n <article>\n Look for a lock (<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.83331 8.33317H5.41665C4.26605 8.33317 3.33331 9.26591 3.33331 10.4165V16.2498C3.33331 17.4004 4.26605 18.3332 5.41665 18.3332H14.5833C15.7339 18.3332 16.6666 17.4004 16.6666 16.2498V10.4165C16.6666 9.26591 15.7339 8.33317 14.5833 8.33317H14.1666V5.83317C14.1666 3.53198 12.3012 1.6665 9.99998 1.6665C7.69879 1.6665 5.83331 3.53198 5.83331 5.83317V8.33317ZM7.49998 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 9.99998 3.33317C8.61927 3.33317 7.49998 4.45246 7.49998 5.83317V8.33317Z\"\n fill=\"currentColor\"\n /></svg\n >) or https:// as an added precaution. Share sensitive information only on official, secure\n websites.\n </article>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsMasthead;\n"],"names":["svgStyles","anchorStyles","mastheadStyle"],"mappings":";;;;;;;;AAOA;;AAEG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAKE,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KA0K1B;;AAvKS,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;;IAGO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CoB,iCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;AAE3B,2BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,yBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;yDASQ,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAA;;;;;;;;;;;;;;;;;;qDAkB1C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ErF,CAAC;KACH;;AA7KM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAY,EAAEC,UAAa,CAAC,CAAC;AAIhF,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
package/components/QuantityToggle/index.umd.js CHANGED
@@ -5401,16 +5401,6 @@
5401
5401
  blur() {
5402
5402
  this.input.blur();
5403
5403
  }
5404
- /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
5405
- setInvalid(bool) {
5406
- this.invalid = bool;
5407
- if (bool) {
5408
- this.emit("sgds-invalid");
5409
- }
5410
- else {
5411
- this.emit("sgds-valid");
5412
- }
5413
- }
5414
5404
  /**
5415
5405
  * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
5416
5406
  * 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
@@ -5447,6 +5437,7 @@
5447
5437
  }
5448
5438
  _handleBlur() {
5449
5439
  const sgdsBlur = this.emit("sgds-blur", { cancelable: true });
5440
+ this.setInvalid(!this._mixinCheckValidity());
5450
5441
  if (sgdsBlur.defaultPrevented)
5451
5442
  return;
5452
5443
  this._isTouched = true;