@govtechsg/sgds-web-component 1.0.1 → 1.0.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.
Files changed (25) hide show
  1. package/Masthead/index.js +305 -3
  2. package/components/Masthead/index.umd.js +0 -1
  3. package/components/Masthead/index.umd.js.map +1 -1
  4. package/components/Masthead/sgds-masthead.cjs.js +0 -1
  5. package/components/Masthead/sgds-masthead.cjs.js.map +1 -1
  6. package/components/Masthead/sgds-masthead.js +0 -1
  7. package/components/Masthead/sgds-masthead.js.map +1 -1
  8. package/components/index.umd.js +0 -1
  9. package/components/index.umd.js.map +1 -1
  10. package/index.umd.js +0 -1
  11. package/index.umd.js.map +1 -1
  12. package/package.json +1 -1
  13. package/Masthead/index.d.ts +0 -6
  14. package/Masthead/index.js.map +0 -1
  15. package/Masthead/index.umd.js +0 -307
  16. package/Masthead/index.umd.js.map +0 -1
  17. package/Masthead/sgds-masthead.cjs.js +0 -204
  18. package/Masthead/sgds-masthead.cjs.js.map +0 -1
  19. package/Masthead/sgds-masthead.cjs2.js +0 -10
  20. package/Masthead/sgds-masthead.cjs2.js.map +0 -1
  21. package/Masthead/sgds-masthead.d.ts +0 -26
  22. package/Masthead/sgds-masthead.js +0 -199
  23. package/Masthead/sgds-masthead.js.map +0 -1
  24. package/Masthead/sgds-masthead2.js +0 -6
  25. package/Masthead/sgds-masthead2.js.map +0 -1
package/components/Masthead/sgds-masthead.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-masthead.cjs.js","sources":["../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport styles from \"./sgds-masthead.scss\";\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 *\n * @cssproperty --masthead-font-family - Sets font family for masthead\n * @cssproperty --masthead-text-color - Sets overall text color\n * @cssproperty --masthead-link-color - Sets link color for `How to identify?` and `Trusted Site`\n * @cssproperty --masthead-link-color-hover - Sets link hover color for `How to identify?` and `Trusted Site`\n * @cssproperty --masthead-mobile-font-size - Sets the padding left and right for viewport width 1024px and below\n * @cssproperty --masthead-mobile-padding-x - Sets the font size for viewport width 1024px and below\n * @cssproperty --masthead-fluid-padding-x - Sets the container-fluid padding left and right for viewport width 1024px and above\n * @cssproperty --masthead-crest-color - Sets the lion head crest color.\n */\nexport class SgdsMasthead extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /**\n * Sets the masthead container width to 100% for all breakpoints\n */\n @property({ type: Boolean, reflect: true })\n fluid = false;\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\">\n <div class=\"${this.fluid ? \"container-fluid\" : \"container\"}\">\n <div class=\"row\">\n <div class=\"col\">\n <div class=\"masthead-layout\">\n <svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n class=\"sg-crest\"\n >\n <path\n d=\"M5.896 11.185c0 0-0.949 1.341 0.294 3.075 0 0 0.196-0.883 2.159-0.883h2.356c2.225 0 3.893-2.126 2.846-4.319 0 0 1.57 0.164 2.095-0.818 0.523-0.981-0.033-1.374-0.818-1.374h-3.959c0 0.704-1.341 0.802-1.341 0h-2.225c0 0-1.669 0-1.701 1.407 0 0 0.377-0.229 0.752-0.261v0.375c0 0-0.458 0.082-0.671 0.197-0.212 0.114-0.523 0.425-0.228 1.227 0.294 0.801 0.409 1.079 0.409 1.079s0.475-0.41 1.244-0.41h0.9c1.602 0 1.308 1.554-0.295 1.554s-1.815-0.85-1.815-0.85z\"\n ></path>\n <path\n d=\"M14.255 9.566c0 0 0.54 0.033 0.932-0.31 0 0 3.55 2.765-1.717 8.326-5.268 5.562-1.195 9.162-1.195 9.162s-0.948 0.915-0.409 2.699c0 0-2.191-1.237-3.867-3.338-2.422-3.036-3.902-7.681 2.749-11.386 0 0 4.389-2.208 3.506-5.153z\"\n ></path>\n <path\n d=\"M8.829 6.343c0 0 0.709-1.265 2.355-1.265 1.298 0 1.594-0.666 1.594-0.666s0.566-1.079 3.424-1.079c2.619 0 4.384 0.873 5.812 2.039 0 0-3.85-2.388-7.645 0.971h-5.54z\"\n ></path>\n <path\n d=\"M24.839 14.348c-0.109-3.948-3.163-8.179-9.728-7.939 6.413-5.431 17.537 6.695 8.375 13.066 0 0 1.533-2.186 1.353-5.126z\"\n ></path>\n <path\n d=\"M16.093 6.845c8.005-0.24 10.863 9.357 5.693 13.676l-5.191 2.509c0 0-0.676-2.181 1.833-4.734 2.509-2.551 4.929-7.328-2.006-10.469 0 0 0.131-0.654-0.327-0.981z\"\n ></path>\n <path\n d=\"M15.678 9.004c0 0 0.393-0.371 0.524-0.676 5.954 2.486 5.017 6.697 1.461 10.23-2.181 2.246-1.505 4.668-1.505 4.668s-2.66 1.657-3.577 3.097c0 0-3.852-3.28 1.483-8.724 5.235-5.344 1.614-8.594 1.614-8.594z\"\n ></path>\n </svg>\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 class=\"sgds-masthead-button-text\">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=\"none\"\n class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n >\n <path\n d=\"M8.65188 6.85L8.64813 6.84625L10.0031 5.49125L17.0744 12.5625L15.7194 13.9175L10.0075 8.20562L4.2875 13.9256L2.9325 12.5706L8.6525 6.85062L8.65188 6.85Z\"\n fill=\"#2F60CE\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n id=\"sgds-masthead-content\"\n class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n >\n <div class=\"row\">\n <div class=\"col\">\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=\"17\"\n height=\"17\"\n viewBox=\"0 0 17 17\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n d=\"M0.166016 5.6665V9.00067H0.999349V13.9998H0.166016V16.4998H0.999349H3.49935H5.16602H7.66601H9.33268H11.8327H13.4993L15.9993 16.5007V16.4998H16.8327V13.9998H15.9993V9.00067H16.8327V5.6665L8.49935 0.666504L0.166016 5.6665ZM3.49935 13.9998V9.00067H5.16602V13.9998H3.49935ZM7.66601 13.9998V9.00067H9.33268V13.9998H7.66601ZM13.4993 13.9998H11.8327V9.00067H13.4993V13.9998ZM10.166 5.6665C10.166 6.58651 9.41935 7.33317 8.49935 7.33317C7.57935 7.33317 6.83268 6.58651 6.83268 5.6665C6.83268 4.7465 7.57935 3.99984 8.49935 3.99984C9.41935 3.99984 10.166 4.7465 10.166 5.6665Z\"\n fill=\"#242425\"\n ></path>\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Official website links end with .gov.sg</div>\n <article>\n Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).<a\n href=\"https://www.gov.sg/trusted-sites#govsites\"\n class=\"trusted-websites-link\"\n rel=\"noreferrer\"\n target=\"_blank\"\n >Trusted websites<svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 32 32\"\n class=\"trusted-websites-icon\"\n >\n <title>Trusted websites</title>\n <path\n d=\"M18.667 4v2.667h4c0.186-0.020 0.374-0.020 0.56 0l-2.667 2.667-6.973 6.987 1.88 1.88 9.733-9.667c0.092 0.257 0.137 0.528 0.133 0.8v4h2.667v-9.333h-9.333z\"\n ></path>\n <path\n d=\"M22.667 25.333h-16v-16h8v-2.667h-8c-1.473 0-2.667 1.194-2.667 2.667v16c0 1.473 1.194 2.667 2.667 2.667h16c1.473 0 2.667-1.194 2.667-2.667v-8h-2.667v8z\"\n ></path></svg\n ></a>\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=\"15\"\n height=\"18\"\n viewBox=\"0 0 15 18\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n d=\"M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z\"\n fill=\"#242425\"\n ></path>\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Secure websites use HTTPS</div>\n <article>\n Look for a<b> lock </b>(<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"15\"\n height=\"18\"\n viewBox=\"0 0 15 18\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n d=\"M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z\"\n fill=\"#242425\"\n ></path></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 </div>\n `;\n }\n}\n\nexport default SgdsMasthead;\n"],"names":["SgdsElement","html","styles","__decorate","property","state"],"mappings":";;;;;;;;;;AAKA;;;;;;;;;;;AAWG;AACG,MAAO,YAAa,SAAQA,sBAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;AAGE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KAmK1B;;IAhKS,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;sBAEO,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,WAAW,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoC/B,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;;;;;;;;;;;;;;;mDAe5C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyFnF,CAAC;KACH;;AA5KM,YAAM,CAAA,MAAA,GAAG,CAACD,sBAAW,CAAC,MAAM,EAAEE,uBAAM,CAA9B,CAAgC;AAM7CC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIdD,gBAAA,CAAA;AADC,IAAAE,mBAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
1
+ {"version":3,"file":"sgds-masthead.cjs.js","sources":["../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport styles from \"./sgds-masthead.scss\";\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 *\n * @cssproperty --masthead-font-family - Sets font family for masthead\n * @cssproperty --masthead-text-color - Sets overall text color\n * @cssproperty --masthead-link-color - Sets link color for `How to identify?` and `Trusted Site`\n * @cssproperty --masthead-link-color-hover - Sets link hover color for `How to identify?` and `Trusted Site`\n * @cssproperty --masthead-mobile-font-size - Sets the padding left and right for viewport width 1024px and below\n * @cssproperty --masthead-mobile-padding-x - Sets the font size for viewport width 1024px and below\n * @cssproperty --masthead-fluid-padding-x - Sets the container-fluid padding left and right for viewport width 1024px and above\n * @cssproperty --masthead-crest-color - Sets the lion head crest color.\n */\nexport class SgdsMasthead extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /**\n * Sets the masthead container width to 100% for all breakpoints\n */\n @property({ type: Boolean, reflect: true })\n fluid = false;\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\">\n <div class=\"${this.fluid ? \"container-fluid\" : \"container\"}\">\n <div class=\"row\">\n <div class=\"col\">\n <div class=\"masthead-layout\">\n <svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n class=\"sg-crest\"\n >\n <path\n d=\"M5.896 11.185c0 0-0.949 1.341 0.294 3.075 0 0 0.196-0.883 2.159-0.883h2.356c2.225 0 3.893-2.126 2.846-4.319 0 0 1.57 0.164 2.095-0.818 0.523-0.981-0.033-1.374-0.818-1.374h-3.959c0 0.704-1.341 0.802-1.341 0h-2.225c0 0-1.669 0-1.701 1.407 0 0 0.377-0.229 0.752-0.261v0.375c0 0-0.458 0.082-0.671 0.197-0.212 0.114-0.523 0.425-0.228 1.227 0.294 0.801 0.409 1.079 0.409 1.079s0.475-0.41 1.244-0.41h0.9c1.602 0 1.308 1.554-0.295 1.554s-1.815-0.85-1.815-0.85z\"\n ></path>\n <path\n d=\"M14.255 9.566c0 0 0.54 0.033 0.932-0.31 0 0 3.55 2.765-1.717 8.326-5.268 5.562-1.195 9.162-1.195 9.162s-0.948 0.915-0.409 2.699c0 0-2.191-1.237-3.867-3.338-2.422-3.036-3.902-7.681 2.749-11.386 0 0 4.389-2.208 3.506-5.153z\"\n ></path>\n <path\n d=\"M8.829 6.343c0 0 0.709-1.265 2.355-1.265 1.298 0 1.594-0.666 1.594-0.666s0.566-1.079 3.424-1.079c2.619 0 4.384 0.873 5.812 2.039 0 0-3.85-2.388-7.645 0.971h-5.54z\"\n ></path>\n <path\n d=\"M24.839 14.348c-0.109-3.948-3.163-8.179-9.728-7.939 6.413-5.431 17.537 6.695 8.375 13.066 0 0 1.533-2.186 1.353-5.126z\"\n ></path>\n <path\n d=\"M16.093 6.845c8.005-0.24 10.863 9.357 5.693 13.676l-5.191 2.509c0 0-0.676-2.181 1.833-4.734 2.509-2.551 4.929-7.328-2.006-10.469 0 0 0.131-0.654-0.327-0.981z\"\n ></path>\n <path\n d=\"M15.678 9.004c0 0 0.393-0.371 0.524-0.676 5.954 2.486 5.017 6.697 1.461 10.23-2.181 2.246-1.505 4.668-1.505 4.668s-2.66 1.657-3.577 3.097c0 0-3.852-3.28 1.483-8.724 5.235-5.344 1.614-8.594 1.614-8.594z\"\n ></path>\n </svg>\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 class=\"sgds-masthead-button-text\">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=\"none\"\n class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n >\n <path\n d=\"M8.65188 6.85L8.64813 6.84625L10.0031 5.49125L17.0744 12.5625L15.7194 13.9175L10.0075 8.20562L4.2875 13.9256L2.9325 12.5706L8.6525 6.85062L8.65188 6.85Z\"\n fill=\"#2F60CE\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n id=\"sgds-masthead-content\"\n class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n >\n <div class=\"row\">\n <div class=\"col\">\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=\"17\"\n height=\"17\"\n viewBox=\"0 0 17 17\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n d=\"M0.166016 5.6665V9.00067H0.999349V13.9998H0.166016V16.4998H0.999349H3.49935H5.16602H7.66601H9.33268H11.8327H13.4993L15.9993 16.5007V16.4998H16.8327V13.9998H15.9993V9.00067H16.8327V5.6665L8.49935 0.666504L0.166016 5.6665ZM3.49935 13.9998V9.00067H5.16602V13.9998H3.49935ZM7.66601 13.9998V9.00067H9.33268V13.9998H7.66601ZM13.4993 13.9998H11.8327V9.00067H13.4993V13.9998ZM10.166 5.6665C10.166 6.58651 9.41935 7.33317 8.49935 7.33317C7.57935 7.33317 6.83268 6.58651 6.83268 5.6665C6.83268 4.7465 7.57935 3.99984 8.49935 3.99984C9.41935 3.99984 10.166 4.7465 10.166 5.6665Z\"\n fill=\"#242425\"\n ></path>\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Official website links end with .gov.sg</div>\n <article>\n Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).<a\n href=\"https://www.gov.sg/trusted-sites#govsites\"\n class=\"trusted-websites-link\"\n rel=\"noreferrer\"\n target=\"_blank\"\n >Trusted websites<svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 32 32\"\n class=\"trusted-websites-icon\"\n >\n <path\n d=\"M18.667 4v2.667h4c0.186-0.020 0.374-0.020 0.56 0l-2.667 2.667-6.973 6.987 1.88 1.88 9.733-9.667c0.092 0.257 0.137 0.528 0.133 0.8v4h2.667v-9.333h-9.333z\"\n ></path>\n <path\n d=\"M22.667 25.333h-16v-16h8v-2.667h-8c-1.473 0-2.667 1.194-2.667 2.667v16c0 1.473 1.194 2.667 2.667 2.667h16c1.473 0 2.667-1.194 2.667-2.667v-8h-2.667v8z\"\n ></path></svg\n ></a>\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=\"15\"\n height=\"18\"\n viewBox=\"0 0 15 18\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n d=\"M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z\"\n fill=\"#242425\"\n ></path>\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Secure websites use HTTPS</div>\n <article>\n Look for a<b> lock </b>(<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"15\"\n height=\"18\"\n viewBox=\"0 0 15 18\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n d=\"M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z\"\n fill=\"#242425\"\n ></path></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 </div>\n `;\n }\n}\n\nexport default SgdsMasthead;\n"],"names":["SgdsElement","html","styles","__decorate","property","state"],"mappings":";;;;;;;;;;AAKA;;;;;;;;;;;AAWG;AACG,MAAO,YAAa,SAAQA,sBAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;AAGE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KAkK1B;;IA/JS,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;sBAEO,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,WAAW,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoC/B,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;;;;;;;;;;;;;;;mDAe5C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwFnF,CAAC;KACH;;AA3KM,YAAM,CAAA,MAAA,GAAG,CAACD,sBAAW,CAAC,MAAM,EAAEE,uBAAM,CAA9B,CAAgC;AAM7CC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIdD,gBAAA,CAAA;AADC,IAAAE,mBAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
package/components/Masthead/sgds-masthead.js CHANGED
@@ -132,7 +132,6 @@ class SgdsMasthead extends SgdsElement {
132
132
  viewBox="0 0 32 32"
133
133
  class="trusted-websites-icon"
134
134
  >
135
- <title>Trusted websites</title>
136
135
  <path
137
136
  d="M18.667 4v2.667h4c0.186-0.020 0.374-0.020 0.56 0l-2.667 2.667-6.973 6.987 1.88 1.88 9.733-9.667c0.092 0.257 0.137 0.528 0.133 0.8v4h2.667v-9.333h-9.333z"
138
137
  ></path>
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 { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport styles from \"./sgds-masthead.scss\";\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 *\n * @cssproperty --masthead-font-family - Sets font family for masthead\n * @cssproperty --masthead-text-color - Sets overall text color\n * @cssproperty --masthead-link-color - Sets link color for `How to identify?` and `Trusted Site`\n * @cssproperty --masthead-link-color-hover - Sets link hover color for `How to identify?` and `Trusted Site`\n * @cssproperty --masthead-mobile-font-size - Sets the padding left and right for viewport width 1024px and below\n * @cssproperty --masthead-mobile-padding-x - Sets the font size for viewport width 1024px and below\n * @cssproperty --masthead-fluid-padding-x - Sets the container-fluid padding left and right for viewport width 1024px and above\n * @cssproperty --masthead-crest-color - Sets the lion head crest color.\n */\nexport class SgdsMasthead extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /**\n * Sets the masthead container width to 100% for all breakpoints\n */\n @property({ type: Boolean, reflect: true })\n fluid = false;\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\">\n <div class=\"${this.fluid ? \"container-fluid\" : \"container\"}\">\n <div class=\"row\">\n <div class=\"col\">\n <div class=\"masthead-layout\">\n <svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n class=\"sg-crest\"\n >\n <path\n d=\"M5.896 11.185c0 0-0.949 1.341 0.294 3.075 0 0 0.196-0.883 2.159-0.883h2.356c2.225 0 3.893-2.126 2.846-4.319 0 0 1.57 0.164 2.095-0.818 0.523-0.981-0.033-1.374-0.818-1.374h-3.959c0 0.704-1.341 0.802-1.341 0h-2.225c0 0-1.669 0-1.701 1.407 0 0 0.377-0.229 0.752-0.261v0.375c0 0-0.458 0.082-0.671 0.197-0.212 0.114-0.523 0.425-0.228 1.227 0.294 0.801 0.409 1.079 0.409 1.079s0.475-0.41 1.244-0.41h0.9c1.602 0 1.308 1.554-0.295 1.554s-1.815-0.85-1.815-0.85z\"\n ></path>\n <path\n d=\"M14.255 9.566c0 0 0.54 0.033 0.932-0.31 0 0 3.55 2.765-1.717 8.326-5.268 5.562-1.195 9.162-1.195 9.162s-0.948 0.915-0.409 2.699c0 0-2.191-1.237-3.867-3.338-2.422-3.036-3.902-7.681 2.749-11.386 0 0 4.389-2.208 3.506-5.153z\"\n ></path>\n <path\n d=\"M8.829 6.343c0 0 0.709-1.265 2.355-1.265 1.298 0 1.594-0.666 1.594-0.666s0.566-1.079 3.424-1.079c2.619 0 4.384 0.873 5.812 2.039 0 0-3.85-2.388-7.645 0.971h-5.54z\"\n ></path>\n <path\n d=\"M24.839 14.348c-0.109-3.948-3.163-8.179-9.728-7.939 6.413-5.431 17.537 6.695 8.375 13.066 0 0 1.533-2.186 1.353-5.126z\"\n ></path>\n <path\n d=\"M16.093 6.845c8.005-0.24 10.863 9.357 5.693 13.676l-5.191 2.509c0 0-0.676-2.181 1.833-4.734 2.509-2.551 4.929-7.328-2.006-10.469 0 0 0.131-0.654-0.327-0.981z\"\n ></path>\n <path\n d=\"M15.678 9.004c0 0 0.393-0.371 0.524-0.676 5.954 2.486 5.017 6.697 1.461 10.23-2.181 2.246-1.505 4.668-1.505 4.668s-2.66 1.657-3.577 3.097c0 0-3.852-3.28 1.483-8.724 5.235-5.344 1.614-8.594 1.614-8.594z\"\n ></path>\n </svg>\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 class=\"sgds-masthead-button-text\">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=\"none\"\n class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n >\n <path\n d=\"M8.65188 6.85L8.64813 6.84625L10.0031 5.49125L17.0744 12.5625L15.7194 13.9175L10.0075 8.20562L4.2875 13.9256L2.9325 12.5706L8.6525 6.85062L8.65188 6.85Z\"\n fill=\"#2F60CE\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n id=\"sgds-masthead-content\"\n class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n >\n <div class=\"row\">\n <div class=\"col\">\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=\"17\"\n height=\"17\"\n viewBox=\"0 0 17 17\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n d=\"M0.166016 5.6665V9.00067H0.999349V13.9998H0.166016V16.4998H0.999349H3.49935H5.16602H7.66601H9.33268H11.8327H13.4993L15.9993 16.5007V16.4998H16.8327V13.9998H15.9993V9.00067H16.8327V5.6665L8.49935 0.666504L0.166016 5.6665ZM3.49935 13.9998V9.00067H5.16602V13.9998H3.49935ZM7.66601 13.9998V9.00067H9.33268V13.9998H7.66601ZM13.4993 13.9998H11.8327V9.00067H13.4993V13.9998ZM10.166 5.6665C10.166 6.58651 9.41935 7.33317 8.49935 7.33317C7.57935 7.33317 6.83268 6.58651 6.83268 5.6665C6.83268 4.7465 7.57935 3.99984 8.49935 3.99984C9.41935 3.99984 10.166 4.7465 10.166 5.6665Z\"\n fill=\"#242425\"\n ></path>\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Official website links end with .gov.sg</div>\n <article>\n Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).<a\n href=\"https://www.gov.sg/trusted-sites#govsites\"\n class=\"trusted-websites-link\"\n rel=\"noreferrer\"\n target=\"_blank\"\n >Trusted websites<svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 32 32\"\n class=\"trusted-websites-icon\"\n >\n <title>Trusted websites</title>\n <path\n d=\"M18.667 4v2.667h4c0.186-0.020 0.374-0.020 0.56 0l-2.667 2.667-6.973 6.987 1.88 1.88 9.733-9.667c0.092 0.257 0.137 0.528 0.133 0.8v4h2.667v-9.333h-9.333z\"\n ></path>\n <path\n d=\"M22.667 25.333h-16v-16h8v-2.667h-8c-1.473 0-2.667 1.194-2.667 2.667v16c0 1.473 1.194 2.667 2.667 2.667h16c1.473 0 2.667-1.194 2.667-2.667v-8h-2.667v8z\"\n ></path></svg\n ></a>\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=\"15\"\n height=\"18\"\n viewBox=\"0 0 15 18\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n d=\"M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z\"\n fill=\"#242425\"\n ></path>\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Secure websites use HTTPS</div>\n <article>\n Look for a<b> lock </b>(<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"15\"\n height=\"18\"\n viewBox=\"0 0 15 18\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n d=\"M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z\"\n fill=\"#242425\"\n ></path></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 </div>\n `;\n }\n}\n\nexport default SgdsMasthead;\n"],"names":["styles"],"mappings":";;;;;;AAKA;;;;;;;;;;;AAWG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;AAGE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KAmK1B;;IAhKS,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;sBAEO,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,WAAW,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoC/B,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;;;;;;;;;;;;;;;mDAe5C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyFnF,CAAC;KACH;;AA5KM,YAAM,CAAA,MAAA,GAAG,CAAC,WAAW,CAAC,MAAM,EAAEA,QAAM,CAA9B,CAAgC;AAM7C,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAId,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 { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport styles from \"./sgds-masthead.scss\";\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 *\n * @cssproperty --masthead-font-family - Sets font family for masthead\n * @cssproperty --masthead-text-color - Sets overall text color\n * @cssproperty --masthead-link-color - Sets link color for `How to identify?` and `Trusted Site`\n * @cssproperty --masthead-link-color-hover - Sets link hover color for `How to identify?` and `Trusted Site`\n * @cssproperty --masthead-mobile-font-size - Sets the padding left and right for viewport width 1024px and below\n * @cssproperty --masthead-mobile-padding-x - Sets the font size for viewport width 1024px and below\n * @cssproperty --masthead-fluid-padding-x - Sets the container-fluid padding left and right for viewport width 1024px and above\n * @cssproperty --masthead-crest-color - Sets the lion head crest color.\n */\nexport class SgdsMasthead extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /**\n * Sets the masthead container width to 100% for all breakpoints\n */\n @property({ type: Boolean, reflect: true })\n fluid = false;\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\">\n <div class=\"${this.fluid ? \"container-fluid\" : \"container\"}\">\n <div class=\"row\">\n <div class=\"col\">\n <div class=\"masthead-layout\">\n <svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n class=\"sg-crest\"\n >\n <path\n d=\"M5.896 11.185c0 0-0.949 1.341 0.294 3.075 0 0 0.196-0.883 2.159-0.883h2.356c2.225 0 3.893-2.126 2.846-4.319 0 0 1.57 0.164 2.095-0.818 0.523-0.981-0.033-1.374-0.818-1.374h-3.959c0 0.704-1.341 0.802-1.341 0h-2.225c0 0-1.669 0-1.701 1.407 0 0 0.377-0.229 0.752-0.261v0.375c0 0-0.458 0.082-0.671 0.197-0.212 0.114-0.523 0.425-0.228 1.227 0.294 0.801 0.409 1.079 0.409 1.079s0.475-0.41 1.244-0.41h0.9c1.602 0 1.308 1.554-0.295 1.554s-1.815-0.85-1.815-0.85z\"\n ></path>\n <path\n d=\"M14.255 9.566c0 0 0.54 0.033 0.932-0.31 0 0 3.55 2.765-1.717 8.326-5.268 5.562-1.195 9.162-1.195 9.162s-0.948 0.915-0.409 2.699c0 0-2.191-1.237-3.867-3.338-2.422-3.036-3.902-7.681 2.749-11.386 0 0 4.389-2.208 3.506-5.153z\"\n ></path>\n <path\n d=\"M8.829 6.343c0 0 0.709-1.265 2.355-1.265 1.298 0 1.594-0.666 1.594-0.666s0.566-1.079 3.424-1.079c2.619 0 4.384 0.873 5.812 2.039 0 0-3.85-2.388-7.645 0.971h-5.54z\"\n ></path>\n <path\n d=\"M24.839 14.348c-0.109-3.948-3.163-8.179-9.728-7.939 6.413-5.431 17.537 6.695 8.375 13.066 0 0 1.533-2.186 1.353-5.126z\"\n ></path>\n <path\n d=\"M16.093 6.845c8.005-0.24 10.863 9.357 5.693 13.676l-5.191 2.509c0 0-0.676-2.181 1.833-4.734 2.509-2.551 4.929-7.328-2.006-10.469 0 0 0.131-0.654-0.327-0.981z\"\n ></path>\n <path\n d=\"M15.678 9.004c0 0 0.393-0.371 0.524-0.676 5.954 2.486 5.017 6.697 1.461 10.23-2.181 2.246-1.505 4.668-1.505 4.668s-2.66 1.657-3.577 3.097c0 0-3.852-3.28 1.483-8.724 5.235-5.344 1.614-8.594 1.614-8.594z\"\n ></path>\n </svg>\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 class=\"sgds-masthead-button-text\">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=\"none\"\n class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n >\n <path\n d=\"M8.65188 6.85L8.64813 6.84625L10.0031 5.49125L17.0744 12.5625L15.7194 13.9175L10.0075 8.20562L4.2875 13.9256L2.9325 12.5706L8.6525 6.85062L8.65188 6.85Z\"\n fill=\"#2F60CE\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n id=\"sgds-masthead-content\"\n class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n >\n <div class=\"row\">\n <div class=\"col\">\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=\"17\"\n height=\"17\"\n viewBox=\"0 0 17 17\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n d=\"M0.166016 5.6665V9.00067H0.999349V13.9998H0.166016V16.4998H0.999349H3.49935H5.16602H7.66601H9.33268H11.8327H13.4993L15.9993 16.5007V16.4998H16.8327V13.9998H15.9993V9.00067H16.8327V5.6665L8.49935 0.666504L0.166016 5.6665ZM3.49935 13.9998V9.00067H5.16602V13.9998H3.49935ZM7.66601 13.9998V9.00067H9.33268V13.9998H7.66601ZM13.4993 13.9998H11.8327V9.00067H13.4993V13.9998ZM10.166 5.6665C10.166 6.58651 9.41935 7.33317 8.49935 7.33317C7.57935 7.33317 6.83268 6.58651 6.83268 5.6665C6.83268 4.7465 7.57935 3.99984 8.49935 3.99984C9.41935 3.99984 10.166 4.7465 10.166 5.6665Z\"\n fill=\"#242425\"\n ></path>\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Official website links end with .gov.sg</div>\n <article>\n Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).<a\n href=\"https://www.gov.sg/trusted-sites#govsites\"\n class=\"trusted-websites-link\"\n rel=\"noreferrer\"\n target=\"_blank\"\n >Trusted websites<svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 32 32\"\n class=\"trusted-websites-icon\"\n >\n <path\n d=\"M18.667 4v2.667h4c0.186-0.020 0.374-0.020 0.56 0l-2.667 2.667-6.973 6.987 1.88 1.88 9.733-9.667c0.092 0.257 0.137 0.528 0.133 0.8v4h2.667v-9.333h-9.333z\"\n ></path>\n <path\n d=\"M22.667 25.333h-16v-16h8v-2.667h-8c-1.473 0-2.667 1.194-2.667 2.667v16c0 1.473 1.194 2.667 2.667 2.667h16c1.473 0 2.667-1.194 2.667-2.667v-8h-2.667v8z\"\n ></path></svg\n ></a>\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=\"15\"\n height=\"18\"\n viewBox=\"0 0 15 18\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n d=\"M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z\"\n fill=\"#242425\"\n ></path>\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Secure websites use HTTPS</div>\n <article>\n Look for a<b> lock </b>(<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"15\"\n height=\"18\"\n viewBox=\"0 0 15 18\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n d=\"M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z\"\n fill=\"#242425\"\n ></path></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 </div>\n `;\n }\n}\n\nexport default SgdsMasthead;\n"],"names":["styles"],"mappings":";;;;;;AAKA;;;;;;;;;;;AAWG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;AAGE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KAkK1B;;IA/JS,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;sBAEO,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,WAAW,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoC/B,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;;;;;;;;;;;;;;;mDAe5C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwFnF,CAAC;KACH;;AA3KM,YAAM,CAAA,MAAA,GAAG,CAAC,WAAW,CAAC,MAAM,EAAEA,QAAM,CAA9B,CAAgC;AAM7C,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAId,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
package/components/index.umd.js CHANGED
@@ -8191,7 +8191,6 @@
8191
8191
  viewBox="0 0 32 32"
8192
8192
  class="trusted-websites-icon"
8193
8193
  >
8194
- <title>Trusted websites</title>
8195
8194
  <path
8196
8195
  d="M18.667 4v2.667h4c0.186-0.020 0.374-0.020 0.56 0l-2.667 2.667-6.973 6.987 1.88 1.88 9.733-9.667c0.092 0.257 0.137 0.528 0.133 0.8v4h2.667v-9.333h-9.333z"
8197
8196
  ></path>