@govtechsg/sgds-web-component 1.2.0 → 1.2.2

package/components/Masthead/sgds-masthead.cjs.js

@@ -128,21 +128,8 @@ class SgdsMasthead extends sgdsElement["default"] {
                         class="trusted-websites-link"
                         rel="noreferrer"
                         target="_blank"
-                        >Trusted websites<svg
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="18"
-                          height="18"
-                          viewBox="0 0 32 32"
-                          class="trusted-websites-icon"
-                        >
-                          <path
-                            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"
-                          ></path>
-                          <path
-                            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"
-                          ></path></svg
-                      ></a>
+                        >Trusted websites</a
+                      >
                     </article>
                   </div>
                 </div>

package/components/Masthead/sgds-masthead.cjs.js.map

@@ -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                          <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;;;;;"}
+{"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</a\n                      >\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;KAqJ1B;;IAlJS,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EnF,CAAC;KACH;;AA9JM,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

@@ -124,21 +124,8 @@ class SgdsMasthead extends SgdsElement {
                         class="trusted-websites-link"
                         rel="noreferrer"
                         target="_blank"
-                        >Trusted websites<svg
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="18"
-                          height="18"
-                          viewBox="0 0 32 32"
-                          class="trusted-websites-icon"
-                        >
-                          <path
-                            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"
-                          ></path>
-                          <path
-                            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"
-                          ></path></svg
-                      ></a>
+                        >Trusted websites</a
+                      >
                     </article>
                   </div>
                 </div>

package/components/Masthead/sgds-masthead.js.map

@@ -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                          <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;;;;"}
+{"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</a\n                      >\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;KAqJ1B;;IAlJS,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EnF,CAAC;KACH;;AA9JM,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;;;;"}