@govtechsg/sgds-web-component 3.2.0-rc.4 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/Masthead/index.js +46 -15
  2. package/base/card-element.js +2 -53
  3. package/base/card-element.js.map +1 -1
  4. package/base/card.js +1 -1
  5. package/components/Breadcrumb/index.umd.js +3 -3
  6. package/components/Breadcrumb/index.umd.js.map +1 -1
  7. package/components/Breadcrumb/sgds-breadcrumb.js +1 -1
  8. package/components/Breadcrumb/sgds-breadcrumb.js.map +1 -1
  9. package/components/Card/card.js +1 -1
  10. package/components/Card/index.umd.js +76 -87
  11. package/components/Card/index.umd.js.map +1 -1
  12. package/components/Card/sgds-card.js +56 -16
  13. package/components/Card/sgds-card.js.map +1 -1
  14. package/components/Dropdown/dropdown.js +1 -1
  15. package/components/Dropdown/index.umd.js +1 -1
  16. package/components/Footer/index.umd.js +40 -84
  17. package/components/Footer/index.umd.js.map +1 -1
  18. package/components/Footer/sgds-footer.js +41 -36
  19. package/components/Footer/sgds-footer.js.map +1 -1
  20. package/components/Link/index.umd.js +2 -2
  21. package/components/Link/index.umd.js.map +1 -1
  22. package/components/Link/link.js +1 -1
  23. package/components/Link/sgds-link.js +1 -1
  24. package/components/Link/sgds-link.js.map +1 -1
  25. package/components/Mainnav/index.umd.js +4 -4
  26. package/components/Mainnav/index.umd.js.map +1 -1
  27. package/components/Mainnav/mainnav-item.js +1 -1
  28. package/components/Mainnav/mainnav.js +1 -1
  29. package/components/Mainnav/sgds-mainnav.js +1 -1
  30. package/components/Mainnav/sgds-mainnav.js.map +1 -1
  31. package/components/Masthead/index.umd.js +46 -15
  32. package/components/Masthead/index.umd.js.map +1 -1
  33. package/components/Masthead/masthead.js +1 -1
  34. package/components/Masthead/sgds-masthead.js +45 -14
  35. package/components/Masthead/sgds-masthead.js.map +1 -1
  36. package/components/index.js +0 -4
  37. package/components/index.js.map +1 -1
  38. package/components/index.umd.js +281 -502
  39. package/components/index.umd.js.map +1 -1
  40. package/css/reboot.css +0 -1
  41. package/index.js +0 -4
  42. package/index.js.map +1 -1
  43. package/index.umd.js +295 -520
  44. package/index.umd.js.map +1 -1
  45. package/{components → internals}/OverflowMenu/sgds-overflow-menu.js +3 -3
  46. package/internals/OverflowMenu/sgds-overflow-menu.js.map +1 -0
  47. package/package.json +1 -1
  48. package/react/base/card-element.cjs.js +1 -52
  49. package/react/base/card-element.cjs.js.map +1 -1
  50. package/react/base/card-element.js +2 -53
  51. package/react/base/card-element.js.map +1 -1
  52. package/react/base/card.cjs.js +1 -1
  53. package/react/base/card.js +1 -1
  54. package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js +1 -1
  55. package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js.map +1 -1
  56. package/react/components/Breadcrumb/sgds-breadcrumb.js +1 -1
  57. package/react/components/Breadcrumb/sgds-breadcrumb.js.map +1 -1
  58. package/react/components/Card/card.cjs.js +1 -1
  59. package/react/components/Card/card.js +1 -1
  60. package/react/components/Card/sgds-card.cjs.js +55 -15
  61. package/react/components/Card/sgds-card.cjs.js.map +1 -1
  62. package/react/components/Card/sgds-card.js +56 -16
  63. package/react/components/Card/sgds-card.js.map +1 -1
  64. package/react/components/Dropdown/dropdown.cjs.js +1 -1
  65. package/react/components/Dropdown/dropdown.js +1 -1
  66. package/react/components/Footer/sgds-footer.cjs.js +40 -35
  67. package/react/components/Footer/sgds-footer.cjs.js.map +1 -1
  68. package/react/components/Footer/sgds-footer.js +41 -36
  69. package/react/components/Footer/sgds-footer.js.map +1 -1
  70. package/react/components/Link/link.cjs.js +1 -1
  71. package/react/components/Link/link.js +1 -1
  72. package/react/components/Link/sgds-link.cjs.js +1 -1
  73. package/react/components/Link/sgds-link.cjs.js.map +1 -1
  74. package/react/components/Link/sgds-link.js +1 -1
  75. package/react/components/Link/sgds-link.js.map +1 -1
  76. package/react/components/Mainnav/mainnav-item.cjs.js +1 -1
  77. package/react/components/Mainnav/mainnav-item.js +1 -1
  78. package/react/components/Mainnav/mainnav.cjs.js +1 -1
  79. package/react/components/Mainnav/mainnav.js +1 -1
  80. package/react/components/Mainnav/sgds-mainnav.cjs.js +1 -1
  81. package/react/components/Mainnav/sgds-mainnav.cjs.js.map +1 -1
  82. package/react/components/Mainnav/sgds-mainnav.js +1 -1
  83. package/react/components/Mainnav/sgds-mainnav.js.map +1 -1
  84. package/react/components/Masthead/masthead.cjs.js +1 -1
  85. package/react/components/Masthead/masthead.js +1 -1
  86. package/react/components/Masthead/sgds-masthead.cjs.js +45 -14
  87. package/react/components/Masthead/sgds-masthead.cjs.js.map +1 -1
  88. package/react/components/Masthead/sgds-masthead.js +45 -14
  89. package/react/components/Masthead/sgds-masthead.js.map +1 -1
  90. package/react/index.cjs.js +70 -78
  91. package/react/index.cjs.js.map +1 -1
  92. package/react/index.js +0 -4
  93. package/react/index.js.map +1 -1
  94. package/react/{components → internals}/OverflowMenu/sgds-overflow-menu.cjs.js +3 -3
  95. package/react/internals/OverflowMenu/sgds-overflow-menu.cjs.js.map +1 -0
  96. package/react/{components → internals}/OverflowMenu/sgds-overflow-menu.js +3 -3
  97. package/react/internals/OverflowMenu/sgds-overflow-menu.js.map +1 -0
  98. package/src/base/card-element.d.ts +0 -14
  99. package/src/components/Breadcrumb/sgds-breadcrumb.d.ts +1 -1
  100. package/src/components/Card/sgds-card.d.ts +15 -4
  101. package/src/components/Footer/sgds-footer.d.ts +1 -1
  102. package/src/components/Link/sgds-link.d.ts +2 -2
  103. package/src/components/index.d.ts +0 -4
  104. package/src/index.d.ts +0 -4
  105. package/src/{components → internals}/OverflowMenu/sgds-overflow-menu.d.ts +3 -3
  106. package/src/react/index.d.ts +0 -4
  107. package/themes/root.css +2 -0
  108. package/components/IconCard/icon-card.js +0 -6
  109. package/components/IconCard/icon-card.js.map +0 -1
  110. package/components/IconCard/index.js +0 -4
  111. package/components/IconCard/index.js.map +0 -1
  112. package/components/IconCard/index.umd.js +0 -4760
  113. package/components/IconCard/index.umd.js.map +0 -1
  114. package/components/IconCard/sgds-icon-card.js +0 -83
  115. package/components/IconCard/sgds-icon-card.js.map +0 -1
  116. package/components/ImageCard/image-card.js +0 -6
  117. package/components/ImageCard/image-card.js.map +0 -1
  118. package/components/ImageCard/index.js +0 -4
  119. package/components/ImageCard/index.js.map +0 -1
  120. package/components/ImageCard/index.umd.js +0 -4774
  121. package/components/ImageCard/index.umd.js.map +0 -1
  122. package/components/ImageCard/sgds-image-card.js +0 -97
  123. package/components/ImageCard/sgds-image-card.js.map +0 -1
  124. package/components/OverflowMenu/index.js +0 -5
  125. package/components/OverflowMenu/index.js.map +0 -1
  126. package/components/OverflowMenu/index.umd.js +0 -11129
  127. package/components/OverflowMenu/index.umd.js.map +0 -1
  128. package/components/OverflowMenu/sgds-overflow-menu.js.map +0 -1
  129. package/components/ThumbnailCard/index.js +0 -4
  130. package/components/ThumbnailCard/index.js.map +0 -1
  131. package/components/ThumbnailCard/index.umd.js +0 -4764
  132. package/components/ThumbnailCard/index.umd.js.map +0 -1
  133. package/components/ThumbnailCard/sgds-thumbnail-card.js +0 -87
  134. package/components/ThumbnailCard/sgds-thumbnail-card.js.map +0 -1
  135. package/components/ThumbnailCard/thumbnail-card.js +0 -6
  136. package/components/ThumbnailCard/thumbnail-card.js.map +0 -1
  137. package/react/components/IconCard/icon-card.cjs.js +0 -11
  138. package/react/components/IconCard/icon-card.cjs.js.map +0 -1
  139. package/react/components/IconCard/icon-card.js +0 -7
  140. package/react/components/IconCard/icon-card.js.map +0 -1
  141. package/react/components/IconCard/sgds-icon-card.cjs.js +0 -89
  142. package/react/components/IconCard/sgds-icon-card.cjs.js.map +0 -1
  143. package/react/components/IconCard/sgds-icon-card.js +0 -84
  144. package/react/components/IconCard/sgds-icon-card.js.map +0 -1
  145. package/react/components/ImageCard/image-card.cjs.js +0 -11
  146. package/react/components/ImageCard/image-card.cjs.js.map +0 -1
  147. package/react/components/ImageCard/image-card.js +0 -7
  148. package/react/components/ImageCard/image-card.js.map +0 -1
  149. package/react/components/ImageCard/sgds-image-card.cjs.js +0 -103
  150. package/react/components/ImageCard/sgds-image-card.cjs.js.map +0 -1
  151. package/react/components/ImageCard/sgds-image-card.js +0 -98
  152. package/react/components/ImageCard/sgds-image-card.js.map +0 -1
  153. package/react/components/OverflowMenu/sgds-overflow-menu.cjs.js.map +0 -1
  154. package/react/components/OverflowMenu/sgds-overflow-menu.js.map +0 -1
  155. package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js +0 -93
  156. package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js.map +0 -1
  157. package/react/components/ThumbnailCard/sgds-thumbnail-card.js +0 -88
  158. package/react/components/ThumbnailCard/sgds-thumbnail-card.js.map +0 -1
  159. package/react/components/ThumbnailCard/thumbnail-card.cjs.js +0 -11
  160. package/react/components/ThumbnailCard/thumbnail-card.cjs.js.map +0 -1
  161. package/react/components/ThumbnailCard/thumbnail-card.js +0 -7
  162. package/react/components/ThumbnailCard/thumbnail-card.js.map +0 -1
  163. package/react/icon-card/index.cjs.js +0 -40
  164. package/react/icon-card/index.cjs.js.map +0 -1
  165. package/react/icon-card/index.js +0 -16
  166. package/react/icon-card/index.js.map +0 -1
  167. package/react/image-card/index.cjs.js +0 -40
  168. package/react/image-card/index.cjs.js.map +0 -1
  169. package/react/image-card/index.js +0 -16
  170. package/react/image-card/index.js.map +0 -1
  171. package/react/overflow-menu/index.cjs.js +0 -40
  172. package/react/overflow-menu/index.cjs.js.map +0 -1
  173. package/react/overflow-menu/index.js +0 -16
  174. package/react/overflow-menu/index.js.map +0 -1
  175. package/react/thumbnail-card/index.cjs.js +0 -40
  176. package/react/thumbnail-card/index.cjs.js.map +0 -1
  177. package/react/thumbnail-card/index.js +0 -16
  178. package/react/thumbnail-card/index.js.map +0 -1
  179. package/src/components/Card/types.d.ts +0 -3
  180. package/src/components/IconCard/index.d.ts +0 -6
  181. package/src/components/IconCard/sgds-icon-card.d.ts +0 -24
  182. package/src/components/ImageCard/index.d.ts +0 -6
  183. package/src/components/ImageCard/sgds-image-card.d.ts +0 -30
  184. package/src/components/ThumbnailCard/index.d.ts +0 -6
  185. package/src/components/ThumbnailCard/sgds-thumbnail-card.d.ts +0 -24
  186. package/src/react/icon-card/index.d.ts +0 -2
  187. package/src/react/image-card/index.d.ts +0 -2
  188. package/src/react/overflow-menu/index.d.ts +0 -2
  189. package/src/react/thumbnail-card/index.d.ts +0 -2
  190. /package/{components → internals}/OverflowMenu/overflow-menu.js +0 -0
  191. /package/{components → internals}/OverflowMenu/overflow-menu.js.map +0 -0
  192. /package/react/{components → internals}/OverflowMenu/overflow-menu.cjs.js +0 -0
  193. /package/react/{components → internals}/OverflowMenu/overflow-menu.cjs.js.map +0 -0
  194. /package/react/{components → internals}/OverflowMenu/overflow-menu.js +0 -0
  195. /package/react/{components → internals}/OverflowMenu/overflow-menu.js.map +0 -0
  196. /package/src/{components → internals}/OverflowMenu/index.d.ts +0 -0
@@ -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)}.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}}`;
3
+ var css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:16px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;padding:0!important;width:16px}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.75rem;line-height:1rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:16px;width:16px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
4
4
 
5
5
  export { css_248z as default };
6
6
  //# sourceMappingURL=masthead.js.map
@@ -28,7 +28,12 @@ class SgdsMasthead extends SgdsElement {
28
28
  }
29
29
  render() {
30
30
  return html `
31
- <div id="sgds-masthead" class="sgds-masthead" aria-label="A Singapore Government Agency Website" role="banner">
31
+ <div
32
+ id="sgds-masthead"
33
+ class="sgds-masthead"
34
+ aria-label="A Singapore Government Agency Website. Beware of government impersonation scams."
35
+ role="banner"
36
+ >
32
37
  <div class="banner">
33
38
  <div class="container">
34
39
  <div class="masthead-layout">
@@ -66,7 +71,7 @@ class SgdsMasthead extends SgdsElement {
66
71
  />
67
72
  </svg>
68
73
  <div class="masthead-text-layout">
69
- <span>A Singapore Government Agency Website</span>
74
+ <span>A Singapore Government Agency Website. Beware of government impersonation scams.</span>
70
75
  <div
71
76
  class="sgds-masthead-button"
72
77
  id="sgds-masthead-identify"
@@ -109,16 +114,16 @@ class SgdsMasthead extends SgdsElement {
109
114
  <div class="icon">
110
115
  <svg
111
116
  xmlns="http://www.w3.org/2000/svg"
112
- width="20"
113
- height="20"
114
- viewBox="0 0 20 20"
117
+ width="16"
118
+ height="16"
119
+ viewBox="0 0 16 16"
115
120
  fill="none"
116
121
  class="banner-icon"
117
122
  >
118
123
  <path
119
124
  fill-rule="evenodd"
120
125
  clip-rule="evenodd"
121
- 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"
126
+ d="M2 5.85166C2 5.61356 2.12699 5.39354 2.33315 5.27442L7.66648 2.19294C7.87284 2.07371 8.12716 2.07371 8.33352 2.19294L13.6669 5.27442C13.873 5.39354 14 5.61356 14 5.85166V6.66691C14 7.0351 13.7015 7.33357 13.3333 7.33357H12.6667V12.0002H13.3333C13.7015 12.0002 14 12.2987 14 12.6669V13.3336C14 13.7018 13.7015 14.0002 13.3333 14.0002H2.66667C2.29848 14.0002 2 13.7018 2 13.3336V12.6669C2 12.2987 2.29848 12.0002 2.66667 12.0002H3.33333V7.33357H2.66667C2.29848 7.33357 2 7.0351 2 6.66691V5.85166ZM5.33333 7.33357V12.0002H7V7.33357H5.33333ZM9 7.33357V12.0002H10.6667V7.33357H9ZM9 5.00024C9 5.55252 8.55229 6.00024 8 6.00024C7.44772 6.00024 7 5.55252 7 5.00024C7 4.44795 7.44772 4.00024 8 4.00024C8.55229 4.00024 9 4.44795 9 5.00024Z"
122
127
  fill="currentColor"
123
128
  />
124
129
  </svg>
@@ -139,16 +144,16 @@ class SgdsMasthead extends SgdsElement {
139
144
  <div class="icon">
140
145
  <svg
141
146
  xmlns="http://www.w3.org/2000/svg"
142
- width="20"
143
- height="20"
144
- viewBox="0 0 20 20"
147
+ width="17"
148
+ height="16"
149
+ viewBox="0 0 17 16"
145
150
  fill="none"
146
151
  class="banner-icon"
147
152
  >
148
153
  <path
149
154
  fill-rule="evenodd"
150
155
  clip-rule="evenodd"
151
- 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"
156
+ d="M5.3335 6.66683H5.00016C4.07969 6.66683 3.3335 7.41302 3.3335 8.3335V13.0002C3.3335 13.9206 4.07969 14.6668 5.00016 14.6668H12.3335C13.254 14.6668 14.0002 13.9206 14.0002 13.0002V8.3335C14.0002 7.41302 13.254 6.66683 12.3335 6.66683H12.0002V4.66683C12.0002 2.82588 10.5078 1.3335 8.66683 1.3335C6.82588 1.3335 5.3335 2.82588 5.3335 4.66683V6.66683ZM6.66683 6.66683H10.6668V4.66683C10.6668 3.56226 9.7714 2.66683 8.66683 2.66683C7.56226 2.66683 6.66683 3.56226 6.66683 4.66683V6.66683Z"
152
157
  fill="currentColor"
153
158
  />
154
159
  </svg>
@@ -158,16 +163,16 @@ class SgdsMasthead extends SgdsElement {
158
163
  <article>
159
164
  Look for a lock (<svg
160
165
  xmlns="http://www.w3.org/2000/svg"
161
- width="20"
162
- height="20"
163
- viewBox="0 0 20 20"
166
+ width="16"
167
+ height="16"
168
+ viewBox="0 0 16 16"
164
169
  fill="none"
165
170
  class="banner-icon-inline"
166
171
  >
167
172
  <path
168
173
  fill-rule="evenodd"
169
174
  clip-rule="evenodd"
170
- 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"
175
+ d="M4.66699 6.66683H4.33366C3.41318 6.66683 2.66699 7.41302 2.66699 8.3335V13.0002C2.66699 13.9206 3.41318 14.6668 4.33366 14.6668H11.667C12.5875 14.6668 13.3337 13.9206 13.3337 13.0002V8.3335C13.3337 7.41302 12.5875 6.66683 11.667 6.66683H11.3337V4.66683C11.3337 2.82588 9.84127 1.3335 8.00033 1.3335C6.15938 1.3335 4.66699 2.82588 4.66699 4.66683V6.66683ZM6.00033 6.66683H10.0003V4.66683C10.0003 3.56226 9.10489 2.66683 8.00033 2.66683C6.89576 2.66683 6.00033 3.56226 6.00033 4.66683V6.66683Z"
171
176
  fill="currentColor"
172
177
  /></svg
173
178
  >) or https:// as an added precaution. Share sensitive information only on official, secure
@@ -175,6 +180,32 @@ class SgdsMasthead extends SgdsElement {
175
180
  </article>
176
181
  </div>
177
182
  </div>
183
+ <div class="wrapper">
184
+ <div class="icon">
185
+ <svg
186
+ xmlns="http://www.w3.org/2000/svg"
187
+ width="17"
188
+ height="16"
189
+ viewBox="0 0 17 16"
190
+ fill="none"
191
+ class="banner-icon"
192
+ >
193
+ <path
194
+ fill-rule="evenodd"
195
+ clip-rule="evenodd"
196
+ d="M8.33342 1.3335C12.0153 1.3335 15.0001 4.31826 15.0001 8.00016C15.0001 11.6821 12.0153 14.6668 8.33342 14.6668C4.65152 14.6668 1.66675 11.6821 1.66675 8.00016C1.66675 4.31826 4.65152 1.3335 8.33342 1.3335ZM8.33342 10.0002C7.96523 10.0002 7.66675 10.2986 7.66675 10.6668C7.66675 11.035 7.96523 11.3335 8.33342 11.3335C8.7016 11.3335 9.00008 11.035 9.00008 10.6668C9.00008 10.2986 8.7016 10.0002 8.33342 10.0002ZM8.33342 4.68311C8.01125 4.68311 7.75008 4.94492 7.75008 5.26709V8.66683C7.75026 8.98885 8.01136 9.25016 8.33342 9.25016C8.65547 9.25016 8.91657 8.98885 8.91675 8.66683V5.26709C8.91675 4.94492 8.65558 4.68311 8.33342 4.68311Z"
197
+ fill="currentColor"
198
+ />
199
+ </svg>
200
+ </div>
201
+ <div class="content">
202
+ <div class="title">Scam alert</div>
203
+ <article>
204
+ Government officers will never ask you to send money or share your details over the phone. When
205
+ unsure, hang up and call Scamshield at 1799.
206
+ </article>
207
+ </div>
208
+ </div>
178
209
  </div>
179
210
  </div>
180
211
  </div>
@@ -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 _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;;;;"}
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\n id=\"sgds-masthead\"\n class=\"sgds-masthead\"\n aria-label=\"A Singapore Government Agency Website. Beware of government impersonation scams.\"\n role=\"banner\"\n >\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. Beware of government impersonation scams.</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=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2 5.85166C2 5.61356 2.12699 5.39354 2.33315 5.27442L7.66648 2.19294C7.87284 2.07371 8.12716 2.07371 8.33352 2.19294L13.6669 5.27442C13.873 5.39354 14 5.61356 14 5.85166V6.66691C14 7.0351 13.7015 7.33357 13.3333 7.33357H12.6667V12.0002H13.3333C13.7015 12.0002 14 12.2987 14 12.6669V13.3336C14 13.7018 13.7015 14.0002 13.3333 14.0002H2.66667C2.29848 14.0002 2 13.7018 2 13.3336V12.6669C2 12.2987 2.29848 12.0002 2.66667 12.0002H3.33333V7.33357H2.66667C2.29848 7.33357 2 7.0351 2 6.66691V5.85166ZM5.33333 7.33357V12.0002H7V7.33357H5.33333ZM9 7.33357V12.0002H10.6667V7.33357H9ZM9 5.00024C9 5.55252 8.55229 6.00024 8 6.00024C7.44772 6.00024 7 5.55252 7 5.00024C7 4.44795 7.44772 4.00024 8 4.00024C8.55229 4.00024 9 4.44795 9 5.00024Z\"\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=\"17\"\n height=\"16\"\n viewBox=\"0 0 17 16\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.3335 6.66683H5.00016C4.07969 6.66683 3.3335 7.41302 3.3335 8.3335V13.0002C3.3335 13.9206 4.07969 14.6668 5.00016 14.6668H12.3335C13.254 14.6668 14.0002 13.9206 14.0002 13.0002V8.3335C14.0002 7.41302 13.254 6.66683 12.3335 6.66683H12.0002V4.66683C12.0002 2.82588 10.5078 1.3335 8.66683 1.3335C6.82588 1.3335 5.3335 2.82588 5.3335 4.66683V6.66683ZM6.66683 6.66683H10.6668V4.66683C10.6668 3.56226 9.7714 2.66683 8.66683 2.66683C7.56226 2.66683 6.66683 3.56226 6.66683 4.66683V6.66683Z\"\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=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.66699 6.66683H4.33366C3.41318 6.66683 2.66699 7.41302 2.66699 8.3335V13.0002C2.66699 13.9206 3.41318 14.6668 4.33366 14.6668H11.667C12.5875 14.6668 13.3337 13.9206 13.3337 13.0002V8.3335C13.3337 7.41302 12.5875 6.66683 11.667 6.66683H11.3337V4.66683C11.3337 2.82588 9.84127 1.3335 8.00033 1.3335C6.15938 1.3335 4.66699 2.82588 4.66699 4.66683V6.66683ZM6.00033 6.66683H10.0003V4.66683C10.0003 3.56226 9.10489 2.66683 8.00033 2.66683C6.89576 2.66683 6.00033 3.56226 6.00033 4.66683V6.66683Z\"\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 class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"17\"\n height=\"16\"\n viewBox=\"0 0 17 16\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.33342 1.3335C12.0153 1.3335 15.0001 4.31826 15.0001 8.00016C15.0001 11.6821 12.0153 14.6668 8.33342 14.6668C4.65152 14.6668 1.66675 11.6821 1.66675 8.00016C1.66675 4.31826 4.65152 1.3335 8.33342 1.3335ZM8.33342 10.0002C7.96523 10.0002 7.66675 10.2986 7.66675 10.6668C7.66675 11.035 7.96523 11.3335 8.33342 11.3335C8.7016 11.3335 9.00008 11.035 9.00008 10.6668C9.00008 10.2986 8.7016 10.0002 8.33342 10.0002ZM8.33342 4.68311C8.01125 4.68311 7.75008 4.94492 7.75008 5.26709V8.66683C7.75026 8.98885 8.01136 9.25016 8.33342 9.25016C8.65547 9.25016 8.91657 8.98885 8.91675 8.66683V5.26709C8.91675 4.94492 8.65558 4.68311 8.33342 4.68311Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Scam alert</div>\n <article>\n Government officers will never ask you to send money or share your details over the phone. When\n unsure, hang up and call Scamshield at 1799.\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;KAyM1B;;AAtMS,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDoB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuGrF,CAAC;KACH;;AA5MM,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;;;;"}
@@ -21,9 +21,7 @@ export { SgdsFileUpload } from './FileUpload/sgds-file-upload.js';
21
21
  export { SgdsFooter } from './Footer/sgds-footer.js';
22
22
  export { SgdsIcon } from './Icon/sgds-icon.js';
23
23
  export { SgdsIconButton } from './IconButton/sgds-icon-button.js';
24
- export { SgdsIconCard } from './IconCard/sgds-icon-card.js';
25
24
  export { SgdsIconList } from './IconList/sgds-icon-list.js';
26
- export { SgdsImageCard } from './ImageCard/sgds-image-card.js';
27
25
  export { SgdsInput } from './Input/sgds-input.js';
28
26
  export { SgdsLink } from './Link/sgds-link.js';
29
27
  export { SgdsMainnav } from './Mainnav/sgds-mainnav.js';
@@ -31,7 +29,6 @@ export { SgdsMainnavDropdown } from './Mainnav/sgds-mainnav-dropdown.js';
31
29
  export { SgdsMainnavItem } from './Mainnav/sgds-mainnav-item.js';
32
30
  export { SgdsMasthead } from './Masthead/sgds-masthead.js';
33
31
  export { SgdsModal } from './Modal/sgds-modal.js';
34
- export { SgdsOverflowMenu } from './OverflowMenu/sgds-overflow-menu.js';
35
32
  export { SgdsPagination } from './Pagination/sgds-pagination.js';
36
33
  export { SgdsProgressBar } from './ProgressBar/sgds-progress-bar.js';
37
34
  export { SgdsQuantityToggle } from './QuantityToggle/sgds-quantity-toggle.js';
@@ -52,7 +49,6 @@ export { SgdsTabPanel } from './Tab/sgds-tab-panel.js';
52
49
  export { SgdsTable } from './Table/sgds-table.js';
53
50
  export { SgdsTableOfContents } from './TableOfContents/sgds-table-of-contents.js';
54
51
  export { SgdsTextarea } from './Textarea/sgds-textarea.js';
55
- export { SgdsThumbnailCard } from './ThumbnailCard/sgds-thumbnail-card.js';
56
52
  export { SgdsToast } from './Toast/sgds-toast.js';
57
53
  export { SgdsToastContainer } from './Toast/sgds-toast-container.js';
58
54
  export { SgdsTooltip } from './Tooltip/sgds-tooltip.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}